/* ==========================================================================
   XenChucks — wave2-a.css (Builder A: navigation + typography)
   Progressive enhancement only: every rule here ADDS to styles.css.
   If this file fails to load, the base page is unchanged and fully usable.
   Brand: #6ea8ff / #cfe2ff / #0b0c11, dark mode always. No orange.
   ========================================================================== */

/* ---------- #223 font scale: applied via --xc-font-scale on <html> ---------- */
html{font-size:calc(100% * var(--xc-font-scale, 1))}

/* ---------- #222 base body size ---------- */
body{font-size:1.0625rem}

/* ---------- #219 Bungee restricted to h1/h2 (+ brand logotype & ticker) ----
   Everything below was Bungee in styles.css and is a label/button/table
   header — set in Inter per the idea. ------------------------------------- */
.success h3,
.compare-table thead th,
.compare thead th,
.print-card h4,
.soon-box strong,
.clicker .big-btn,
.combo-name,
.ladder li::before,
.trick-steps li::before,
.step-num{
  font-family:var(--font-body);
  font-weight:800;
  letter-spacing:.02em;
}
.step-num{font-size:2.2rem}
.clicker .big-btn{font-size:1.5rem}

/* ---------- #220 fluid type for the rest of the scale ---------- */
h3{font-size:clamp(1.05rem,1rem + 1.2vw,1.3rem);line-height:1.3}
h4{font-size:clamp(.95rem,.92rem + .6vw,1.1rem);line-height:1.35}

/* ---------- #221 comfortable measure for body copy ---------- */
main p:not(.form-msg):not(.micro):not(.badge),
main li,
.faq details p,
.log-post p{
  max-width:65ch;
}
.lede,.section-sub{margin-inline:auto} /* keep intro copy centered in their columns */

/* ---------- #231 balanced headlines, #232 hyphenation ---------- */
h1,h2,h3,.kicker{text-wrap:balance}
main p,main li,.faq details p{
  hyphens:auto;
  -webkit-hyphens:auto;
  overflow-wrap:break-word;
}

/* ---------- #233 body-copy link styling ---------- */
main p a:not(.btn),main li a:not(.btn),.micro a,.crumbs a,.toc-card a,.prevnext a{
  text-decoration:underline;
  text-decoration-color:rgba(110,168,255,.65);
  text-underline-offset:.18em;
  text-decoration-thickness:1px;
}
main p a:not(.btn):hover,main li a:not(.btn):hover{
  text-decoration-color:var(--blue);
  text-decoration-thickness:2px;
}
main p a:not(.btn):visited,main li a:not(.btn):visited{
  color:#b79cff; /* visited, tuned for the dark theme */
}

/* ---------- #234 kbd caps ---------- */
kbd{
  display:inline-block;
  font-family:var(--font-body);
  font-size:.82em;font-weight:700;
  color:var(--ice2);
  background:rgba(255,255,255,.07);
  border:1px solid var(--line);
  border-bottom-width:2px;
  border-radius:6px;
  padding:.1em .45em;
  white-space:nowrap;
}

/* ---------- #235 tabular numerals ---------- */
time,.compare-table td,.compare-table th[scope="row"],
.micro,.tabular,.search-meta{
  font-variant-numeric:tabular-nums;
}

/* ---------- #226 list styling ---------- */
main ul:not(.steps):not(.checklist):not(.trick-check):not(.timeline):not(.ladder),
main ol:not(.steps):not(.timeline):not(.ladder){
  margin:1rem 0 1.4rem;
  padding-inline-start:1.6rem;
}
main ul:not(.steps):not(.checklist):not(.trick-check):not(.timeline):not(.ladder) > li::marker{
  color:var(--blue);
}
main ul:not(.steps):not(.checklist):not(.trick-check):not(.timeline):not(.ladder) > li,
main ol:not(.steps):not(.timeline):not(.ladder) > li{
  margin-bottom:.55rem;
  padding-inline-start:.3rem; /* hanging indent feel */
}

/* ---------- #227 table readability ---------- */
.table-wrap{
  overflow-x:auto;
  border-radius:var(--radius);
  background:
    linear-gradient(90deg,var(--bg) 0%,transparent 24px) left/24px 100% no-repeat,
    linear-gradient(-90deg,var(--bg) 0%,transparent 24px) right/24px 100% no-repeat;
}
.compare-table{border-collapse:collapse;min-width:620px;width:100%}
.compare-table thead th{
  position:sticky;top:0;
  background:#1a2030; /* solid so sticky header stays legible */
  z-index:1;
}
.compare-table tbody tr:nth-child(even){background:rgba(255,255,255,.025)}
.compare-table th,.compare-table td{padding:.75rem .9rem;text-align:start}

/* ---------- #228 lede standard ---------- */
.lede{
  font-size:clamp(1.1rem,1.02rem + 1.2vw,1.3rem);
  line-height:1.65;
  color:var(--ice2);
  max-width:60ch;
}

/* ---------- #229 pull quotes ---------- */
blockquote.pull{
  font-size:clamp(1.25rem,1.1rem + 1.6vw,1.7rem);
  font-weight:700;line-height:1.45;
  color:var(--ice2);
  border-inline-start:4px solid var(--blue);
  padding:.4rem 0 .4rem 1.4rem;
  margin:2rem auto;max-width:60ch;
}
blockquote.pull cite{
  display:block;margin-top:.8rem;
  font-size:.85rem;font-weight:600;font-style:normal;color:var(--muted);
}

/* ---------- #230 definition lists ---------- */
dl.xc-def{margin:1.2rem 0}
dl.xc-def dt{
  color:var(--blue2);font-weight:800;margin-top:1rem;
}
dl.xc-def dd{
  margin:.25rem 0 0 1.2rem;color:var(--muted);
  border-inline-start:2px solid var(--line);padding-inline-start:.8rem;
}

/* ==========================================================================
   NAVIGATION COMPONENTS
   ========================================================================== */

/* ---------- #210 "you are here" kicker ---------- */
.kicker{
  font-size:.78rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--blue);margin:0 0 .6rem;
}
.page-hero .kicker{margin-bottom:.8rem}

/* ---------- #202 breadcrumbs ---------- */
.crumbs{
  max-width:1080px;margin:0 auto;
  padding:5.2rem 1.4rem 0; /* clears the fixed header */
  font-size:.85rem;color:var(--muted);
}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0}
.crumbs li{display:flex;align-items:center;gap:.4rem}
.crumbs li + li::before{content:"›";color:var(--ice);opacity:.7}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--blue2)}
.crumbs [aria-current="page"]{color:var(--ink);font-weight:700}
.page-hero:has(+ *){padding-top:2rem}
body:has(.crumbs) .page-hero{padding-top:2.2rem}

/* ---------- #203 active nav underline ---------- */
.nav-links a[aria-current="page"],
.foot-cols a[aria-current="page"]{
  color:var(--blue2);
  text-decoration:underline;
  text-decoration-color:var(--blue);
  text-decoration-thickness:2px;
  text-underline-offset:.35em;
}

/* ---------- #201 mobile hamburger ---------- */
.menu-btn{
  display:none;
  align-items:center;justify-content:center;
  width:44px;height:44px;flex:none;
  background:transparent;border:1px solid var(--line);border-radius:12px;
  color:var(--ink);cursor:pointer;
  margin-inline-start:auto;
}
.menu-btn:hover{border-color:var(--blue)}
.menu-btn svg{width:22px;height:22px}
.menu-btn .bar{transition:transform .18s ease,opacity .18s ease}
.menu-btn[aria-expanded="true"] .bar1{transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .bar2{opacity:0}
.menu-btn[aria-expanded="true"] .bar3{transform:translateY(-6px) rotate(-45deg)}
.mobile-menu{
  position:fixed;inset:0;z-index:90;
  background:rgba(11,12,17,.6);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  display:flex;justify-content:flex-end;
}
.mobile-menu[hidden]{display:none}
/* while the menu is open the header (with the X button) sits above the overlay */
body.menu-open .nav{z-index:95}
.mobile-menu-panel{
  width:min(340px,88vw);height:100%;
  background:var(--bg2);border-inline-start:1px solid var(--line);
  padding:1.2rem 1.4rem 2rem;overflow-y:auto;
  display:flex;flex-direction:column;gap:.4rem;
  animation:slidein .2s ease;
}
.mobile-menu-panel .btn{margin-bottom:1rem;text-align:center} /* waitlist CTA first */
.mobile-menu-panel a.mlink{
  display:flex;align-items:center;min-height:44px;
  color:var(--ink);text-decoration:none;font-weight:700;font-size:1.05rem;
  padding:.4rem .2rem;border-bottom:1px solid var(--line);
}
.mobile-menu-panel a.mlink:hover{color:var(--blue2)}
.mobile-menu-panel .mlink[aria-current="page"]{color:var(--blue2)}
.mobile-menu-search{margin-top:1.2rem;display:flex;gap:.5rem}
.mobile-menu-search input{
  flex:1;min-width:0;font-size:16px;border-radius:12px;
  border:1px solid var(--line);background:rgba(255,255,255,.05);
  color:var(--ink);padding:.6rem .8rem;font-family:var(--font-body);
}
@media (max-width:760px){
  .menu-btn{display:inline-flex}
  .nav-links{display:none !important} /* hamburger owns mobile nav */
}

/* ---------- #217 desktop header search ---------- */
.hsearch{display:flex;align-items:center;margin-inline-start:.6rem}
.hsearch input{
  width:2.2rem;height:2.2rem;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,.05);
  color:var(--ink);font-family:var(--font-body);font-size:.9rem;
  padding:0 .8rem;cursor:pointer;
  transition:width .2s ease,border-color .15s ease;
}
.hsearch input::placeholder{color:transparent}
.hsearch input:focus,.hsearch input:not(:placeholder-shown){
  width:11rem;cursor:text;border-color:var(--blue);outline:none;
}
.hsearch input:focus::placeholder,.hsearch input:not(:placeholder-shown)::placeholder{color:var(--muted)}
.hsearch label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (max-width:900px){.hsearch{display:none}} /* mobile uses the hamburger search */

/* ---------- #207 back-to-top ---------- */
.to-top{
  position:fixed;z-index:80;
  inset-inline-end:1rem;
  bottom:calc(1rem + env(safe-area-inset-bottom,0px));
  width:48px;height:48px;border-radius:50%;
  background:var(--bg2);border:1px solid var(--blue);color:var(--blue2);
  font-size:1.3rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transform:translateY(8px);
  transition:opacity .2s ease,transform .2s ease;
}
.to-top.show{opacity:1;pointer-events:auto;transform:none}
.to-top:hover{background:var(--blue);color:#0b1428}
html.sticky-visible body .to-top{
  bottom:calc(5.2rem + env(safe-area-inset-bottom,0px)); /* above the sticky bar */
}
@media (prefers-reduced-motion:reduce){.to-top{transition:none}}

/* ---------- #209 copy-link heading anchors ---------- */
.copylink{
  display:inline-flex;align-items:center;justify-content:center;
  width:1.9rem;height:1.9rem;margin-inline-start:.5rem;
  background:transparent;border:0;border-radius:8px;cursor:pointer;
  color:var(--ice);font-size:1rem;vertical-align:middle;
  opacity:0;transition:opacity .15s ease;
}
h2:hover .copylink,h3:hover .copylink,summary:hover .copylink,
.copylink:focus-visible{opacity:1}
.copylink:hover{color:var(--blue2);background:rgba(110,168,255,.12)}
.copylink.ok{color:var(--blue);opacity:1}

/* ---------- #212 scrollspy + #213 TOC card ---------- */
.toc-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.2rem 1.4rem;margin:0 auto 2rem;max-width:65ch;
}
.toc-card h2{font-size:1rem;font-family:var(--font-body);font-weight:800;text-align:start;margin-bottom:.6rem}
.toc-card ol{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.toc-card a{color:var(--muted);text-decoration:none;font-size:.95rem}
.toc-card a:hover{color:var(--blue2)}
.spy{
  position:sticky;top:6rem;float:inline-end;
  width:220px;margin-inline-start:2rem;margin-bottom:1rem;
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:1rem 1.1rem;font-size:.88rem;
}
.spy p{font-weight:800;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ice);margin-bottom:.5rem}
.spy ol{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.spy a{
  display:block;color:var(--muted);text-decoration:none;
  padding:.3rem .6rem;border-inline-start:2px solid transparent;border-radius:0 8px 8px 0;
}
.spy a:hover{color:var(--ink)}
.spy a.active{color:var(--blue2);border-inline-start-color:var(--blue);background:rgba(110,168,255,.08)}
@media (max-width:1100px){.spy{display:none}}
.spy-wrap{overflow:hidden} /* contain the floated spy */

/* ---------- #211 prev/next trick nav, #214 try-this-next ---------- */
.prevnext{
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  max-width:720px;margin:2.5rem auto 0;
}
.prevnext a{
  flex:1 1 200px;
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:1rem 1.2rem;text-decoration:none;color:var(--ink);
}
.prevnext a:hover{border-color:var(--blue)}
.prevnext .pn-k{display:block;font-size:.75rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ice);margin-bottom:.25rem}
.prevnext .pn-t{font-weight:800;color:var(--blue2)}
.prevnext a.next{text-align:end}
.trynext{
  max-width:720px;margin:2rem auto 0;
  border:1px solid rgba(110,168,255,.35);border-radius:var(--radius);
  background:rgba(110,168,255,.06);padding:1.4rem 1.6rem;text-align:center;
}
.trynext h2{font-size:1.15rem;font-family:var(--font-body);font-weight:800;margin-bottom:.4rem}
.trynext p{color:var(--muted);margin-bottom:1rem}

/* ---------- #215 external links ---------- */
a.ext::after{
  content:"↗";font-size:.8em;margin-inline-start:.15em;color:var(--blue);
}
a.ext[target="_blank"]::after{content:"↗"}

/* ---------- #208 footer nav columns ---------- */
.foot-cols{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1.6rem 2rem;
  width:100%;max-width:1080px;margin:0 auto 1.6rem;
  text-align:start;
}
.foot-col-t{
  font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ice);margin:0 0 .7rem;
}
.foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.foot-col a{color:var(--muted);text-decoration:none;font-size:.92rem}
.foot-col a:hover{color:var(--blue2)}
html.xc-nav footer .foot-map{display:none} /* hidden only once JS builds the columns */

/* ---------- #223/#224 footer display controls ---------- */
.display-ctl{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:.6rem;margin:0 auto 1.4rem;max-width:1080px;
  font-size:.85rem;color:var(--muted);
}
.display-ctl .dc-label{font-weight:800;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ice)}
.display-ctl button{
  min-height:44px;min-width:44px;padding:.4rem .8rem;
  background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:10px;
  color:var(--ink);font-family:var(--font-body);font-weight:700;font-size:.9rem;cursor:pointer;
}
.display-ctl button:hover{border-color:var(--blue)}
.display-ctl button[aria-pressed="true"]{border-color:var(--blue);color:var(--blue2);background:rgba(110,168,255,.12)}

/* ---------- #224 dyslexia-friendly mode ---------- */
html.dyslexia body{
  font-family:Verdana,Geneva,"DejaVu Sans",system-ui,sans-serif;
  letter-spacing:.035em;word-spacing:.14em;line-height:1.75;
}
html.dyslexia body em,html.dyslexia body i,html.dyslexia body cite{font-style:normal}
html.dyslexia body h1,html.dyslexia body h2{letter-spacing:0}

/* ---------- #225 reading mode ---------- */
html.reading body .ticker,
html.reading body .flip-demo,
html.reading body .trail,
html.reading body #confetti,
html.reading body .sticky-bar,
html.reading body .nudge,
html.reading body .share-row,
html.reading body .spy,
html.reading body .scroll-cue{display:none !important}
html.reading body .section{max-width:65ch}
html.reading body main .section{padding-inline:1.4rem}
.read-toggle{
  display:inline-flex;align-items:center;gap:.5rem;
  min-height:44px;padding:.5rem 1.1rem;margin:0 auto 1.5rem;
  background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:999px;
  color:var(--ink);font-family:var(--font-body);font-weight:700;font-size:.9rem;cursor:pointer;
}
.read-toggle:hover{border-color:var(--blue)}
.read-toggle[aria-pressed="true"]{border-color:var(--blue);color:var(--blue2)}

/* ---------- #205 search page ---------- */
.search-page .search-box{display:flex;gap:.6rem;max-width:640px;margin:1.6rem auto}
.search-page .search-box input{
  flex:1;min-width:0;font-size:1rem;border-radius:14px;
  border:1px solid var(--line);background:rgba(255,255,255,.05);
  color:var(--ink);padding:.85rem 1rem;font-family:var(--font-body);
}
.search-page .search-box input:focus{border-color:var(--blue);outline:none}
.search-results{max-width:720px;margin:0 auto;display:grid;gap:1rem}
.search-hit{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:1.1rem 1.3rem;
}
.search-hit .kicker{margin-bottom:.3rem}
.search-hit h3{margin:0 0 .3rem}
.search-hit h3 a{color:var(--ink);text-decoration:none}
.search-hit h3 a:hover{color:var(--blue2)}
.search-hit p{color:var(--muted);font-size:.95rem;margin:0}
.search-meta{font-size:.8rem;color:var(--ice);margin-top:.5rem}
.search-empty{
  text-align:center;color:var(--muted);padding:3rem 1rem;
  border:1px dashed var(--line);border-radius:var(--radius);max-width:720px;margin:0 auto;
}

/* ---------- sitemap page ---------- */
.sitemap-groups{display:grid;gap:2rem;max-width:900px;margin:2rem auto}
.sitemap-group h2{font-size:1.2rem;font-family:var(--font-body);font-weight:800;text-align:start;margin-bottom:.8rem}
.sitemap-group ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.sitemap-group li{display:flex;gap:.7rem;align-items:baseline;flex-wrap:wrap}
.sitemap-group a{font-weight:700}
.sitemap-group .pg-desc{color:var(--muted);font-size:.9rem}
.start-here{
  max-width:900px;margin:0 auto 2rem;
  border:1px solid rgba(110,168,255,.35);border-radius:var(--radius);
  background:rgba(110,168,255,.06);padding:1.4rem 1.6rem;
}
.start-here h2{font-size:1.1rem;font-family:var(--font-body);font-weight:800;text-align:start;margin-bottom:.6rem}
.start-here ol{margin:0;padding-inline-start:1.4rem;display:grid;gap:.4rem}

/* ---------- skip links (covers #218 second link) ---------- */
.skip + .skip{inset-inline-start:9rem}

/* ---------- scroll-margin for anchored sections (#212/#213 targets) ---------- */
main [id]{scroll-margin-top:5.5rem}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .mobile-menu-panel{animation:none}
  html{scroll-behavior:auto}
}