/* ============================================================
   IKAN · India Essentials · web design system
   Quiet-luxury editorial. Ivory & ink, green/gold/teal.
   Playfair Display + DM Sans. Built to feel intentional,
   never template-default. Mobile-first, motion-aware.
   ============================================================ */

:root{
  /* ink + neutrals · white base, AA-tuned */
  --ink:#15241d; --ink2:#3a4942; --muted:#5b6660; --faint:#67706a;
  --line:#e8e5db; --line-2:#f1efe7; --hair:rgba(21,36,29,.07);
  --paper:#ffffff; --page:#ffffff;
  /* neutral near-white surfaces (no yellow bias) + colour washes for life */
  --cream:#f7f8f6; --cream-2:#f0f2ef; --cream-3:#e6e8e4;
  --wash-green:#edf4ee; --wash-green-2:#e3eee7;
  --wash-teal:#e9f1f1;  --wash-mint:#e6f0ef;
  --wash-gold:#f8f1e1;  --wash-rose:#fbf0ee;

  /* brand */
  --green:#10703c; --green-deep:#0a4f2c; --green-bright:#16924f;
  --teal:#154550; --teal-2:#1d5763; --teal-deep:#0e2f37;   /* real IKAN brand teal */
  --mint:#acd6d4; --mint-deep:#4f9a96;
  --gold:#b08a3c; --gold-soft:#caa863; --gold-bright:#d8b76e;
  --gold-ink:#7f6118;   /* AA-contrast gold for small eyebrow TEXT on light + wash surfaces */
  --gold-text:#85661d;  /* AA gold ink for sub-24px text (labels, numerals, th) · 4.76:1 on cream-2, 5.36:1 on white; #8a6a1f misses AA on cream-2 */
  --gold-rule:#9a7a2e;  /* darker gold for structural rules (≥3:1 non-text on white) */
  --rose:#b1554c;

  /* dark hero field (the green the brand owner loves) */
  --field:linear-gradient(157deg,#123a43 0%,#0f5130 60%,#0a3f25 100%);
  --field-teal:linear-gradient(157deg,#103840 0%,#154550 55%,#0e2f37 100%);

  /* type */
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --t-base:clamp(1.02rem,0.99rem + 0.16vw,1.14rem);
  --t-lead:clamp(1.18rem,1.10rem + 0.40vw,1.40rem);
  --t-h2:clamp(1.7rem,1.35rem + 1.5vw,2.6rem);
  --t-h3:clamp(1.22rem,1.10rem + 0.55vw,1.5rem);
  --t-display:clamp(2.7rem,1.6rem + 5.2vw,6.4rem);
  --t-eyebrow:0.74rem;

  /* space + motion */
  --container:1140px;
  --reading:720px;
  --section:clamp(3.4rem,2.4rem + 4.5vw,6.5rem);
  --radius:16px; --radius-s:11px; --radius-pill:999px;
  --shadow-soft:0 1px 2px rgba(22,39,31,.04), 0 12px 34px -18px rgba(22,39,31,.18);
  --shadow-lift:0 2px 6px rgba(22,39,31,.06), 0 26px 60px -28px rgba(22,39,31,.30);
  --ease:cubic-bezier(0.16,1,0.3,1);
  --dur:.55s;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--page); color:var(--ink2);
  font-family:var(--sans); font-size:var(--t-base); line-height:1.72;
  font-feature-settings:"kern" 1,"liga" 1; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility; overflow-x:hidden;
}
.serif{ font-family:var(--serif); }
h1,h2,h3,h4{ font-family:var(--serif); color:var(--ink); font-weight:600; line-height:1.12; letter-spacing:-.01em; }
strong,b{ color:var(--ink); font-weight:600; }
img{ max-width:100%; display:block; }
::selection{ background:rgba(176,138,60,.22); }
:focus-visible{ outline:2.5px solid var(--gold-bright); outline-offset:3px; border-radius:3px; box-shadow:0 0 0 4px rgba(0,0,0,.32); }

/* skip link · reachable on focus */
.skip{ position:absolute; left:-999px; top:0; z-index:200; background:var(--green); color:#fff;
  padding:.7rem 1.1rem; border-radius:0 0 8px 0; font-weight:600; }
.skip:focus{ left:0; outline:2.5px solid var(--gold-bright); outline-offset:2px; }

/* visually-hidden (screen-reader only) */
.vh{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

a{ color:var(--green-deep); text-decoration:none; }
.prose a{ color:var(--green-deep); font-weight:600;
  background-image:linear-gradient(var(--gold),var(--gold));
  background-size:100% 1px; background-position:0 1.18em; background-repeat:no-repeat;
  transition:background-size var(--dur) var(--ease), color .2s ease; }
.prose a:hover{ color:var(--green); background-image:linear-gradient(var(--green),var(--green)); }

/* ---------- layout helpers ---------- */
.wrap{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:clamp(1.25rem,4vw,2.5rem); }
.eyebrow{ font-family:var(--sans); font-size:var(--t-eyebrow); letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-ink); font-weight:700; }
.ico{ width:1em; height:1em; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none; }

/* reveal-on-scroll · only hides when JS is present (progressive enhancement) */
.js .reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .js .reveal{ opacity:1 !important; transform:none !important; } }

/* ============================================================
   SITE NAV
   ============================================================ */
.nav{ position:sticky; top:0; z-index:60; }
.nav-inner{ display:flex; align-items:center; gap:1.5rem; height:68px;
  padding-inline:clamp(1.25rem,4vw,2.5rem); max-width:1380px; margin-inline:auto;
  transition:background .35s ease, box-shadow .35s ease, border-color .35s ease;
  border-bottom:1px solid transparent; }
.nav.scrolled .nav-inner{ background:rgba(250,248,241,.82); backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px); border-bottom-color:var(--line);
  box-shadow:0 1px 0 rgba(22,39,31,.02); }
.nav .brand{ display:flex; align-items:center; gap:.7rem; flex:none; }
.nav .brand img{ height:30px; width:auto; }
.nav .brand .logo-dark{ display:none; }
.nav:not(.on-dark) .brand .logo-white{ display:none; }
.nav:not(.on-dark) .brand .logo-dark{ display:block; }
.nav .brand .div{ width:1px; height:22px; background:var(--line); }
.nav .brand .sub{ font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.nav.on-dark .brand .sub{ color:rgba(255,255,255,.7); }
.nav-links{ margin-left:auto; display:flex; align-items:center; gap:1.6rem; }
.nav-link, .nav-dd-trigger{ font-size:.92rem; font-weight:500; color:var(--ink2); transition:color .2s; }
.nav.on-dark .nav-link, .nav.on-dark .nav-dd-trigger{ color:rgba(255,255,255,.86); }
.nav-link:hover, .nav-dd-trigger:hover{ color:var(--green); }
.nav.on-dark .nav-link:hover, .nav.on-dark .nav-dd-trigger:hover{ color:var(--gold-bright); }

/* guides mega-dropdown */
.nav-dd{ position:relative; display:flex; align-items:center; }
.nav-dd-trigger{ display:inline-flex; align-items:center; gap:.3rem; background:none; border:0; cursor:pointer; padding:.4rem 0; font-family:var(--sans); }
.nav-dd-trigger .chev{ width:15px; height:15px; transition:transform .3s var(--ease); }
.nav-dd:hover .nav-dd-trigger .chev, .nav-dd.open .nav-dd-trigger .chev{ transform:rotate(180deg); }
.nav-dd-panel{ position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(-8px);
  width:min(640px,90vw); background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-lift);
  padding:1.2rem 1.2rem 1rem; opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .26s var(--ease), transform .26s var(--ease); z-index:80; }
.nav-dd-panel::before{ content:""; position:absolute; top:-6px; left:50%; transform:translateX(-50%) rotate(45deg);
  width:13px; height:13px; background:#fff; border-left:1px solid var(--line); border-top:1px solid var(--line); border-radius:3px 0 0 0; }
.nav-dd:hover .nav-dd-panel, .nav-dd.open .nav-dd-panel{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.dd-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:.1rem 1.6rem; }
.dd-h{ font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-ink); font-weight:700; padding:.7rem .6rem .3rem; }
.ddi{ display:flex; align-items:center; gap:.7rem; padding:.5rem .6rem; border-radius:10px; color:var(--ink2); transition:background .18s, color .18s, transform .18s var(--ease); }
.ddi{ border-left:2px solid transparent; }
.ddi:hover,.ddi:focus-visible{ background:var(--wash-green); color:var(--green-deep); transform:translateX(2px); border-left-color:var(--gold-soft); }
.ddi:active{ background:var(--wash-green-2); transform:translateX(2px) scale(.99); transition-duration:.08s; }
.ddi-ic{ flex:none; width:30px; height:30px; border-radius:8px; background:var(--wash-green); display:flex; align-items:center; justify-content:center; color:var(--green); transition:background .2s, color .2s; }
.ddi:hover .ddi-ic{ background:var(--green); color:#fff; }
.ddi-ic svg{ width:16px; height:16px; }
.ddi-t{ font-size:.9rem; font-weight:500; line-height:1.25; }
.dd-all{ display:flex; align-items:center; justify-content:center; gap:.45rem; margin-top:.8rem; padding:.8rem; border-top:1px solid var(--line); color:var(--green-deep) !important; font-weight:600; font-size:.92rem; }
.dd-all svg{ width:16px; height:16px; transition:transform .25s var(--ease); }
.dd-all:hover svg{ transform:translateX(4px); }
.nav-cta{ display:inline-flex; align-items:center; gap:.5rem; padding:.56rem 1.05rem; border-radius:var(--radius-pill);
  background:var(--green); color:#fff !important; font-weight:600; font-size:.9rem; letter-spacing:.01em;
  box-shadow:0 1px 2px rgba(10,79,44,.3); transition:transform .25s var(--ease), background .25s, box-shadow .25s; }
.nav-cta:hover{ background:var(--green-deep); transform:translateY(-1px); box-shadow:0 8px 20px -8px rgba(10,79,44,.6); }
.nav-cta svg{ width:1em; height:1em; }
.nav-toggle{ display:none; }
/* scroll progress */
.progress{ position:fixed; left:0; top:0; height:3px; width:100%; transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,var(--gold-soft),var(--green)); z-index:70; }

/* ============================================================
   HERO · landing
   ============================================================ */
.hero{ position:relative; background:var(--field); color:#fff; overflow:hidden; isolation:isolate;
  margin-top:-68px; padding-top:68px; }
.hero::before{ content:""; position:absolute; right:-12%; top:-18%; width:60vw; height:60vw; max-width:780px; max-height:780px;
  border-radius:50%; background:radial-gradient(circle at center,rgba(202,168,99,.20),transparent 62%); z-index:-1; }
.hero::after{ content:""; position:absolute; inset:0; z-index:-1; opacity:.5;
  background:radial-gradient(120% 90% at 80% 0%, rgba(255,255,255,.06), transparent 55%); }
.hero-frame{ position:absolute; inset:clamp(14px,2.4vw,30px); border:1px solid rgba(202,168,99,.26); border-radius:6px; z-index:-1; pointer-events:none; }
.hero-inner{ max-width:var(--container); margin-inline:auto; padding:clamp(3.5rem,7vw,7rem) clamp(1.25rem,4vw,2.5rem) clamp(3rem,6vw,5.5rem); }
.hero .kicker{ color:var(--gold-bright); margin-bottom:1.6rem; }
.hero h1{ color:#fff; font-size:var(--t-display); line-height:1.02; max-width:14ch; }
.hero h1 em{ font-style:italic; font-weight:500; color:var(--gold-soft); }
.hero .lede{ margin-top:1.8rem; max-width:46ch; font-size:var(--t-lead); line-height:1.6; color:#dbe6df; font-weight:400; }
.hero .gold-rule{ width:64px; height:2px; background:var(--gold-soft); margin:2.1rem 0; opacity:.9; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2.4rem; }
.btn{ display:inline-flex; align-items:center; gap:.6rem; padding:.92rem 1.5rem; border-radius:var(--radius-pill);
  font-weight:600; font-size:1rem; letter-spacing:.01em; cursor:pointer; border:1px solid transparent;
  transition:transform .25s var(--ease), background .25s, box-shadow .25s, border-color .25s, color .25s; }
.btn svg{ width:1.05em; height:1.05em; }
.btn-gold{ background:var(--gold-soft); color:#1c1407; box-shadow:0 10px 30px -12px rgba(202,168,99,.7); }
.btn-gold:hover{ background:var(--gold-bright); transform:translateY(-2px); box-shadow:0 16px 38px -14px rgba(202,168,99,.8); }
.btn-ghost{ color:#fff; border-color:rgba(255,255,255,.34); }
.btn-ghost:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.6); transform:translateY(-2px); }
.btn-green{ background:var(--green); color:#fff; box-shadow:0 10px 30px -14px rgba(10,79,44,.7); }
.btn-green:hover{ background:var(--green-deep); transform:translateY(-2px); }
.hero-meta{ margin-top:3.6rem; display:flex; flex-wrap:wrap; gap:1.6rem 3rem; border-top:1px solid rgba(255,255,255,.14); padding-top:2rem; padding-bottom:.4rem; }
.hero-meta .m{ min-width:max-content; }
.hero-meta .m{ display:flex; flex-direction:column; gap:.25rem; }
.hero-meta .m .n{ font-family:var(--serif); font-size:1.7rem; font-weight:600; color:var(--gold-soft); line-height:1; }
.hero-meta .m .l{ font-size:.82rem; color:#bccabf; letter-spacing:.02em; }

/* ============================================================
   GUIDE HERO (interior pages)
   ============================================================ */
.ghero{ position:relative; background:var(--field); color:#fff; overflow:hidden; isolation:isolate;
  margin-top:-68px; padding-top:68px; }
.ghero::before{ content:""; position:absolute; right:-10%; top:-26%; width:52vw; height:52vw; max-width:620px; max-height:620px;
  border-radius:50%; background:radial-gradient(circle at center,rgba(202,168,99,.18),transparent 62%); z-index:-1; }
.ghero-inner{ max-width:var(--container); margin-inline:auto; padding:clamp(2.6rem,5vw,4.6rem) clamp(1.25rem,4vw,2.5rem) clamp(2.6rem,5vw,4rem); }
.ghero .crumb{ display:flex; align-items:center; gap:.5rem; font-size:.84rem; color:#aebfb4; margin-bottom:1.8rem; }
.ghero .crumb a{ color:#cdd9d0; }
.ghero .crumb a:hover{ color:var(--gold-soft); }
.ghero .phase-tag{ color:var(--gold-bright); margin-bottom:1.1rem; }
.ghero h1{ color:#fff; font-size:clamp(2.2rem,1.3rem + 3.4vw,4rem); line-height:1.04; max-width:18ch; }
.ghero h1 em{ font-style:italic; font-weight:500; color:var(--gold-soft); }
.ghero .gsub{ margin-top:1.4rem; max-width:52ch; font-size:var(--t-lead); line-height:1.58; color:#d6e2db; font-weight:400; }
.ghero .gchips{ display:flex; flex-wrap:wrap; gap:1.6rem 2.4rem; margin-top:2rem; }
.ghero .gchip{ display:flex; align-items:baseline; gap:.55rem; font-size:.92rem; color:#cbd8d0; }
.ghero .gchip .n{ font-family:var(--serif); font-size:1.5rem; font-weight:600; color:var(--gold-soft); line-height:1; }
.ghero-actions{ margin-top:2.3rem; display:flex; flex-wrap:wrap; gap:.8rem; }

/* ============================================================
   GUIDE BODY · layout shell with sticky TOC
   ============================================================ */
.guide-body{ max-width:1080px; margin-inline:auto; padding:clamp(3.5rem,4vw + 1rem,5.5rem) clamp(1.5rem,4vw,3rem) 1.5rem;
  display:grid; grid-template-columns:1fr; gap:3rem; }
@media (min-width:1000px){ .guide-body{ grid-template-columns:218px minmax(0,1fr); gap:clamp(2.5rem,4vw,4rem); } }
.toc{ display:none; }
@media (min-width:1000px){
  .toc{ display:block; position:sticky; top:96px; align-self:start; max-height:calc(100vh - 120px); overflow:auto; }
  .toc .th{ font-size:var(--t-eyebrow); letter-spacing:.2em; text-transform:uppercase; color:var(--gold-ink); font-weight:700; margin-bottom:1rem; }
  .toc ol{ list-style:none; margin:0; padding:0; border-left:1px solid var(--line); }
  .toc li a{ display:block; padding:.42rem 0 .42rem 1.1rem; margin-left:-1px; font-size:.9rem; color:var(--muted);
    border-left:1px solid transparent; line-height:1.35; transition:color .2s, border-color .2s; }
  .toc li a:hover{ color:var(--ink); }
  .toc li a.active{ color:var(--green-deep); font-weight:600; border-left-color:var(--green); }
  /* sticky utility card · fills the rail, adds a download + help affordance */
  .toc-card{ margin-top:1.7rem; padding:1.1rem 1.2rem 1.2rem; border:1px solid var(--line); border-radius:var(--radius-s);
    background:linear-gradient(170deg,var(--wash-green),#fff); display:grid; gap:.7rem; }
  .toc-dl{ display:inline-flex; align-items:center; gap:.55rem; font-size:.85rem; font-weight:600; color:var(--green-deep); line-height:1.3; }
  .toc-dl svg{ width:16px; height:16px; flex:none; transition:transform .25s var(--ease); }
  .toc-dl:hover{ color:var(--green); } .toc-dl:hover svg{ transform:translateY(1px); }
  .toc-help{ font-size:.8rem; color:var(--muted); line-height:1.5; margin:0; }
  .toc-contact{ font-size:.8rem; font-weight:600; color:var(--green-deep); }
  .toc-contact:hover{ color:var(--green); }
}
.toc-card{ display:none; }
@media (min-width:1000px){ .toc-card{ display:grid; } }

/* ============================================================
   PROSE · restyle the guide content classes for screen
   ============================================================ */
/* Editorial measure: running text stays readable, visual blocks use the full column.
   (min-width:0 lets .tbl-scroll contain wide tables instead of expanding the grid track.) */
.prose{ max-width:none; min-width:0; }
.prose > *{ scroll-margin-top:92px; max-width:var(--reading); }
.prose > .stats,.prose > .grid,.prose > .gtk,.prose > .nets,.prose > .tbl-scroll,
.prose > .costbars,.prose > .refgrid,.prose > .glos,.prose > .opts,.prose > .dbox{ max-width:none; }
.guide-body > *{ min-width:0; }

/* reference docs (no in-page sections, e.g. Quick Reference) drop the empty rail and use a wide canvas */
.guide-body.no-toc{ grid-template-columns:minmax(0,1fr); max-width:1060px; }
.guide-body.no-toc .toc{ display:none; }
.guide-body.no-toc .prose > *{ max-width:var(--reading); }
.guide-body.no-toc .prose > .stats,.guide-body.no-toc .prose > .grid,.guide-body.no-toc .prose > .gtk,
.guide-body.no-toc .prose > .nets,.guide-body.no-toc .prose > .tbl-scroll,.guide-body.no-toc .prose > .costbars,
.guide-body.no-toc .prose > .refgrid,.guide-body.no-toc .prose > .glos,.guide-body.no-toc .prose > .opts,
.guide-body.no-toc .prose > .dbox{ max-width:none; }

.prose .lead{ font-size:var(--t-lead); line-height:1.66; color:var(--ink); font-weight:400; margin:0 0 2.4rem; }
.prose .lead::first-letter{ font-family:var(--serif); font-size:3.6em; line-height:.82; float:left;
  padding:.06em .12em 0 0; color:var(--green); font-weight:600; }

.prose p{ margin:0 0 1.25rem; }
.prose p.body{ margin:0 0 1.3rem; }
.prose .fine{ font-size:.88rem; color:var(--faint); line-height:1.6; margin:.6rem 0 1.4rem; }

/* section headers */
.prose .sec,.prose .opener{ margin:3.4rem 0 0; }
.prose .sec .badge,.prose .opener .gh{ display:none; }
.prose .sec .k,.prose .opener .k{ display:block; font-size:var(--t-eyebrow); letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-ink); font-weight:700; margin-bottom:.7rem; }
.prose .sec h2,.prose .opener h2{ font-size:var(--t-h2); color:var(--ink); line-height:1.1; }
.prose .sec-rule{ height:1px; background:var(--line); margin:1.1rem 0 1.8rem; }
.prose .eyebrow{ display:block; margin:2.4rem 0 1rem; }
.prose .band-title{ text-align:center; font-family:var(--serif); font-style:italic; font-size:1.25rem; color:var(--gold-text);
  font-weight:500; margin:2.8rem 0 1.6rem; position:relative; }
.prose .band-title span{ background:var(--cream); padding:0 1.2rem; position:relative; z-index:2; }
.prose .band-title::before{ content:""; position:absolute; left:0; right:0; top:54%; height:1px; background:var(--line); z-index:1; }

/* stat strip */
.prose .stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1.5px solid var(--ink); border-bottom:1px solid var(--line);
  margin:2.2rem 0; }
.prose .stats .st{ padding:1.3rem 1.1rem 1.3rem 0; border-left:1px solid var(--line-2); padding-left:1.1rem; }
.prose .stats .st:first-child{ border-left:none; padding-left:0; }
.prose .stats .st .v{ font-family:var(--serif); font-size:clamp(1.7rem,1.3rem + 1.4vw,2.3rem); font-weight:600; color:var(--green); line-height:1; }
.prose .stats .st .v small{ font-size:.5em; color:var(--gold-text); }
.prose .stats .st .l{ font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-top:.7rem; line-height:1.35; }

/* start-here box */
.prose .startbox{ background:linear-gradient(180deg,#f4f8f5,#f0f6f1); border:1px solid #d9e8df; border-left:3px solid var(--green);
  border-radius:var(--radius-s); padding:1.5rem 1.7rem; margin:1.8rem 0 2rem; box-shadow:var(--shadow-soft); }
.prose .startbox .lab{ font-size:var(--t-eyebrow); letter-spacing:.16em; text-transform:uppercase; color:var(--green-deep); font-weight:700; margin-bottom:.6rem; }
.prose .startbox .t{ font-size:1.02rem; color:var(--ink2); line-height:1.62; }
.prose .startbox .t b{ color:var(--ink); }

/* numbered steps timeline */
.prose .steps{ margin:1.4rem 0 2rem; }
.prose .steps .s{ display:flex; gap:1.2rem; padding:0 0 1.6rem; position:relative; }
.prose .steps .s:last-child{ padding-bottom:0; }
.prose .steps .s:not(:last-child)::before{ content:""; position:absolute; left:18px; top:40px; bottom:2px; width:1px; background:var(--line); }
.prose .steps .n{ flex:none; width:37px; height:37px; border:1px solid var(--gold); border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); color:var(--gold-text); font-weight:600; font-size:1.05rem; background:var(--cream); position:relative; z-index:1; }
.prose .steps .c b{ font-family:var(--serif); color:var(--ink); font-size:1.08rem; font-weight:600; display:block; line-height:1.3; }
.prose .steps .c span{ font-size:.96rem; color:var(--muted); display:block; margin-top:.3rem; line-height:1.6; }
.prose .steps .c span b{ font-family:var(--sans); font-size:inherit; color:var(--ink2); display:inline; }

/* feature / doc cards */
.prose .grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin:1.4rem 0 1.6rem; }
.prose .card{ border:1px solid var(--line); border-radius:var(--radius-s); padding:1.25rem 1.3rem; background:var(--paper);
  display:flex; gap:1rem; align-items:flex-start; position:relative; overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s; }
.prose .card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--green);
  transform:scaleY(0); transform-origin:50% 0; transition:transform .35s var(--ease); }
.prose .card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lift); border-color:var(--wash-green-2); }
.prose .card:hover::before{ transform:scaleY(1); }
.prose .card .ci{ flex:none; width:42px; height:42px; border-radius:11px; background:var(--wash-green);
  display:flex; align-items:center; justify-content:center; color:var(--green); margin-top:.1rem;
  transition:background .3s var(--ease), color .3s, transform .3s var(--ease); }
.prose .card:hover .ci{ background:var(--green); color:#fff; transform:rotate(-4deg); }
.prose .card .ci svg{ width:21px; height:21px; }
.prose .card b{ color:var(--ink); font-size:1.02rem; font-weight:600; }
.prose .card .x{ font-size:.92rem; color:var(--muted); display:block; margin-top:.3rem; line-height:1.55; }

/* network / accent cards */
.prose .nets{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin:1.4rem 0; }
.prose .net{ border:1px solid var(--line); border-radius:var(--radius-s); padding:1.3rem 1.3rem 1.1rem; background:var(--paper); position:relative; overflow:hidden;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.prose .net:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lift); }
.prose .net::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; }
.prose .net.jio::before{ background:#0c2ea0; } .prose .net.airtel::before{ background:#e40000; } .prose .net.vi::before{ background:#f2a516; }
.prose .net.hdfc::before{ background:#004c8f; } .prose .net.icici::before{ background:#ae282e; } .prose .net.axis::before{ background:#97144d; }
.prose .net.uber::before{ background:#111; } .prose .net.ola::before{ background:#9bbf2f; } .prose .net.rapido::before{ background:#f2b50a; }
.prose .net .nm{ font-family:var(--serif); font-size:1.18rem; font-weight:600; color:var(--ink); }
.prose .net .nm a{ color:var(--ink); }
.prose .net .ds{ font-size:.94rem; color:var(--muted); margin-top:.35rem; line-height:1.5; }
.prose .net .pl{ font-size:.86rem; color:var(--faint); margin-top:.8rem; border-top:1px solid var(--line-2); padding-top:.7rem; }

/* tables */
.prose .tbl-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:.4rem 0 1.4rem; }
.prose table{ width:100%; border-collapse:collapse; font-size:.97rem; min-width:420px; }
.prose thead th{ text-align:left; color:var(--gold-text); padding:0 1.2rem .7rem 0; font-weight:700; font-size:.74rem; letter-spacing:.1em;
  text-transform:uppercase; border-bottom:1.5px solid var(--ink); white-space:nowrap; }
.prose thead th:last-child{ padding-right:0; }
.prose tbody td{ padding:.85rem 1.2rem .85rem 0; border-bottom:1px solid var(--line); color:var(--ink2); vertical-align:top; line-height:1.55; }
.prose tbody td:last-child{ padding-right:0; }
.prose tbody tr:last-child td{ border-bottom:none; }
.prose td.name{ color:var(--ink); font-weight:600; }
.prose td.price{ color:var(--green); font-weight:600; white-space:nowrap; font-variant-numeric:tabular-nums; }

/* matrix (doc kit) */
.prose table.matrix{ table-layout:fixed; min-width:560px; }
.prose table.matrix thead th{ text-align:center; font-size:.72rem; }
.prose table.matrix thead th.rk{ text-align:left; }
.prose table.matrix td{ text-align:center; font-size:1.15rem; padding:.7rem .4rem; }
.prose table.matrix tbody th.rk{ text-align:left; font-size:.95rem; font-weight:600; color:var(--ink); }
.prose table.matrix td.y{ color:var(--green); } .prose table.matrix td.s{ color:var(--gold-text); } .prose table.matrix td.n{ color:#c9c4b8; }
.prose .lg{ font-size:.9rem; color:var(--muted); margin-left:.4rem; }
.prose .dy{ color:var(--green); } .prose .ds{ color:var(--gold-text); } .prose .dn{ color:#b9b3a5; }

/* callouts */
.prose .note{ border-radius:var(--radius-s); padding:1.2rem 1.5rem; font-size:.98rem; line-height:1.62; margin:1.5rem 0 1.8rem;
  background:var(--cream-2); border:1px solid var(--line); border-left:3px solid var(--gold); color:var(--ink2); }
.prose .note svg{ display:none; }
.prose .note > span{ display:inline; }
.prose .note b{ color:var(--ink); }
.prose .note.warn{ border-left-color:var(--rose); background:#fbf1ef; border-color:#ecd6d1; }
.prose .note.info{ border-left-color:var(--teal); background:#eef4f5; border-color:#d6e4e6; }
.prose .note.gold{ border-left-color:var(--gold); }
.prose .strip{ background:var(--cream-2); border:1px solid var(--line); border-left:3px solid var(--teal);
  border-radius:var(--radius-s); padding:1.3rem 1.5rem; font-size:1rem; color:var(--ink2); line-height:1.6; margin:1.4rem 0; }
.prose .strip b{ color:var(--ink); }
.prose .unlock{ display:inline-flex; align-items:center; gap:.6rem; background:var(--paper); color:var(--green-deep);
  border:1px solid var(--line); border-radius:var(--radius-pill); padding:.7rem 1.3rem; font-size:.95rem; font-weight:600; margin:.8rem 0; }
.prose .unlock svg{ width:18px; height:18px; color:var(--gold); }

/* helps panel */
.prose .helps{ background:linear-gradient(165deg,var(--wash-green),var(--wash-green-2)); border:1px solid var(--wash-green-2); border-left:3px solid var(--green); border-radius:var(--radius); padding:1.7rem 1.9rem; margin:1.4rem 0 1.8rem; box-shadow:var(--shadow-soft); }
.prose .helps .row{ display:flex; gap:.95rem; align-items:flex-start; padding:.55rem 0; font-size:1.0rem; line-height:1.55; color:var(--ink2); }
.prose .helps .row svg{ width:21px; height:21px; color:var(--green); flex:none; margin-top:.18rem; }
.prose .helps .row b{ color:var(--ink); }

/* good to know */
.prose .gtk{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.4rem 1.8rem; margin:1.4rem 0; }
.prose .gtk .t{ border-bottom:1px solid var(--line); padding-bottom:1rem; }
.prose .gtk .t .h{ display:flex; align-items:center; gap:.6rem; font-weight:600; color:var(--ink); font-size:1.04rem; margin-bottom:.45rem; font-family:var(--serif); }
.prose .gtk .t .h svg{ width:19px; height:19px; color:var(--gold); }
.prose .gtk .t .p{ font-size:.94rem; color:var(--muted); line-height:1.58; }

/* checklist */
.prose .clist{ background:linear-gradient(165deg,#f3f8f4,var(--wash-green)); border:1px solid var(--wash-green-2); border-radius:var(--radius); padding:1.9rem 2rem; margin:2.2rem 0 1rem; box-shadow:var(--shadow-soft); }
.prose .clist .mk{ display:none; }
.prose .clist h3{ font-family:var(--serif); font-size:var(--t-h3); font-weight:600; color:var(--ink); margin:0; }
.prose .clist .u{ width:48px; height:2px; background:var(--gold); margin:.8rem 0 1.2rem; }
.prose .clist .row{ display:flex; gap:.9rem; align-items:flex-start; padding:.5rem 0; font-size:1.0rem; color:var(--ink2); line-height:1.5; }
.prose .clist .row svg{ width:20px; height:20px; color:var(--green); flex:none; margin-top:.2rem; }
.prose .clist .row b{ color:var(--ink); }

/* settling-in checklist: local browser state, no document collection */
.prose .checklist-tool{ background:linear-gradient(165deg,#f3f8f4,var(--wash-green)); border:1px solid var(--wash-green-2); border-radius:var(--radius); padding:1.6rem 1.7rem 1.3rem; margin:1.4rem 0 2rem; box-shadow:var(--shadow-soft); }
.prose .checklist-tool-head{ display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,310px); gap:1rem 1.5rem; align-items:end; }
.prose .checklist-label,.prose .checklist-state-k{ color:var(--gold-text); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; }
.prose .checklist-select-label{ display:block; color:var(--ink); font-family:var(--serif); font-size:1.2rem; font-weight:600; margin-top:.3rem; }
.prose .checklist-select{ width:100%; appearance:none; border:1px solid var(--line); border-radius:10px; background:var(--paper); color:var(--ink); padding:.85rem 2.5rem .85rem 1rem; font:inherit; font-size:.95rem; font-weight:600; background-image:linear-gradient(45deg,transparent 50%,var(--green) 50%),linear-gradient(135deg,var(--green) 50%,transparent 50%); background-position:calc(100% - 18px) 1.1rem,calc(100% - 12px) 1.1rem; background-size:6px 6px,6px 6px; background-repeat:no-repeat; }
.prose .checklist-select:focus{ outline:3px solid rgba(194,145,54,.26); outline-offset:2px; border-color:var(--gold); }
.prose .checklist-help{ color:var(--muted); font-size:.9rem; line-height:1.5; margin:.8rem 0 1.2rem; }
.prose .checklist-state{ display:flex; justify-content:space-between; gap:1.3rem; align-items:end; border-top:1px solid var(--wash-green-2); border-bottom:1px solid var(--wash-green-2); padding:1rem 0; }
.prose .checklist-state h3{ color:var(--ink); font-family:var(--serif); font-size:1.35rem; line-height:1.15; margin:.25rem 0 .3rem; }
.prose .checklist-state p{ color:var(--muted); font-size:.92rem; line-height:1.5; margin:0; max-width:39rem; }
.prose .checklist-score{ flex:none; width:150px; text-align:right; color:var(--green-deep); font-size:.84rem; font-weight:700; }
.prose .checklist-track{ display:block; height:7px; background:var(--paper); border-radius:10px; overflow:hidden; margin-top:.55rem; }
.prose .checklist-track i{ display:block; width:100%; height:100%; background:var(--green); border-radius:10px; transform:scaleX(0); transform-origin:left center; transition:transform .25s var(--ease); }
.prose .checklist-list{ margin:.9rem 0 .7rem; }
.prose .check-row{ display:flex; gap:.8rem; align-items:flex-start; padding:.85rem .2rem; border-bottom:1px solid rgba(30,81,48,.12); cursor:pointer; }
.prose .check-row:last-child{ border-bottom:none; }
.prose .check-row input{ position:absolute; opacity:0; width:1px; height:1px; }
.prose .check-box{ flex:none; width:22px; height:22px; border:1.5px solid var(--green); border-radius:6px; background:var(--paper); margin-top:.1rem; position:relative; pointer-events:none; transition:background .2s, border-color .2s, transform .2s; }
.prose .check-box::after{ content:""; position:absolute; left:6px; top:2px; width:6px; height:11px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg) scale(0); transition:transform .2s var(--ease); }
.prose .check-row input:focus-visible + .check-box{ outline:3px solid rgba(194,145,54,.28); outline-offset:2px; }
.prose .check-row input:checked + .check-box{ background:var(--green); border-color:var(--green); transform:scale(1.03); }
.prose .check-row input:checked + .check-box::after{ transform:rotate(45deg) scale(1); }
.prose .check-copy{ display:block; color:var(--muted); font-size:.93rem; line-height:1.5; }
.prose .check-copy strong{ display:block; color:var(--ink); font-size:1rem; margin-bottom:.15rem; }
.prose .check-row input:checked ~ .check-copy strong{ color:var(--green-deep); }
.prose .check-row input:checked ~ .check-copy{ color:var(--ink2); }
.prose .checklist-actions{ display:flex; justify-content:space-between; gap:1rem; align-items:center; border-top:1px solid var(--wash-green-2); padding-top:1rem; }
.prose .text-button{ appearance:none; border:0; background:none; color:var(--green-deep); cursor:pointer; font:inherit; font-size:.86rem; font-weight:700; padding:.3rem 0; text-decoration:underline; text-underline-offset:3px; }
.prose .text-button:hover{ color:var(--gold-text); }
.prose .checklist-storage{ color:var(--faint); font-size:.78rem; line-height:1.5; margin:.8rem 0 0; }

/* comparison options */
.prose .opts{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin:1.4rem 0; }
.prose .vs{ display:none; }
.prose .opt{ border:1px solid var(--line); border-radius:var(--radius); background:var(--paper); display:flex; flex-direction:column; overflow:hidden;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.prose .opt:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lift); }
.prose .opt .hd{ padding:1.3rem 1.4rem 0; }
.prose .opt .hd .wm,.prose .opt .badge{ display:none; }
.prose .opt .tag{ font-size:.7rem; letter-spacing:.15em; text-transform:uppercase; font-weight:700; color:var(--gold-text); }
.prose .opt h3{ font-family:var(--serif); font-size:1.3rem; font-weight:600; color:var(--ink); line-height:1.15; margin-top:.3rem; }
.prose .opt .roof{ font-size:.95rem; color:var(--muted); margin-top:.5rem; }
.prose .opt .bd{ padding:1rem 1.4rem 0; flex:1; }
.prose .opt .bd::before{ content:""; display:block; height:1px; background:var(--line-2); margin-bottom:.9rem; }
.prose .opt ul{ list-style:none; margin:0; padding:0; }
.prose .opt li{ display:flex; gap:.7rem; font-size:.98rem; line-height:1.5; padding:.4rem 0; align-items:flex-start; color:var(--ink2); }
.prose .opt .ck{ flex:none; margin-top:.1rem; } .prose .opt .ck svg{ width:16px; height:16px; stroke-width:2.4; }
.prose .opt .ck.y{ color:var(--green); } .prose .opt .ck.n{ color:var(--rose); }
.prose .opt .ft{ margin:1rem 1.4rem 1.4rem; padding-top:.9rem; border-top:1px solid var(--line-2); display:flex; flex-direction:column; gap:.3rem; }
.prose .opt .ft .lab{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--gold-text); }
.prose .opt .ft .txt{ font-size:.95rem; color:var(--muted); line-height:1.5; }

/* pull quote */
.prose .pull{ margin:2rem 0; padding:1.2rem 0 1.2rem 1.6rem; border-left:3px solid var(--gold); }
.prose .pull .mk{ display:none; }
.prose .pull .q{ font-family:var(--serif); font-style:italic; font-size:1.4rem; line-height:1.5; color:var(--ink); font-weight:500; }
.prose .pull .q b{ color:var(--green); font-style:normal; font-weight:600; }

/* detail box (airport) + qref */
.prose .dbox{ border:1px solid var(--line); border-radius:var(--radius-s); overflow:hidden; margin:1.2rem 0 1.5rem; }
.prose .dbox .drow{ display:flex; border-top:1px solid var(--line-2); }
.prose .dbox .drow:first-child{ border-top:none; }
.prose .dbox .dl{ width:170px; flex:none; background:var(--cream-2); padding:.85rem 1.2rem; font-size:.9rem; font-weight:600; color:var(--ink); }
.prose .dbox .dv{ flex:1; padding:.85rem 1.2rem; border-left:1px solid var(--line-2); }
.prose .qref{ border:1px solid var(--line); border-radius:var(--radius-s); overflow:hidden; margin:1.4rem 0 1.6rem; box-shadow:var(--shadow-soft); }
.prose .qref .h{ background:var(--teal); color:#fff; font-family:var(--serif); font-size:1.15rem; padding:.85rem 1.4rem; }
.prose .qref .row{ display:flex; border-top:1px solid var(--line-2); font-size:.96rem; }
.prose .qref .k{ width:170px; flex:none; padding:.8rem 1.3rem; color:var(--gold-text); font-weight:700; font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; background:var(--cream-2); display:flex; align-items:center; }
.prose .qref .v{ flex:1; padding:.8rem 1.3rem; color:var(--ink2); border-left:1px solid var(--line-2); line-height:1.5; }
.prose .qref .v b{ color:var(--ink); }

/* scenario cards: compact field playbooks with one clear route per card */
.prose > .scenario-grid{ max-width:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; margin:1.5rem 0 2.2rem; }
.prose .scenario-card{ position:relative; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); padding:1.45rem 1.5rem 1.35rem; background:var(--paper); box-shadow:var(--shadow-soft); }
.prose .scenario-card::before{ content:""; position:absolute; inset:0 0 auto; height:5px; background:var(--green); }
.prose .scenario-card.scenario-amber::before{ background:var(--gold); }
.prose .scenario-card.scenario-teal::before{ background:var(--teal-2); }
.prose .scenario-card.scenario-rose::before{ background:var(--rose); }
.prose .scenario-card.scenario-green::before{ background:var(--green-bright); }
.prose .scenario-card.scenario-gold::before{ background:var(--gold-bright); }
.prose .scenario-top{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:.25rem 0 1rem; }
.prose .scenario-num{ font-family:var(--serif); font-size:1.45rem; line-height:1; color:var(--gold-text); font-weight:600; }
.prose .scenario-tag{ color:var(--gold-ink); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; }
.prose .scenario-card h2{ font-size:clamp(1.4rem,1.15rem + .7vw,2rem); line-height:1.12; margin:0 0 .9rem; }
.prose .scenario-signal{ font-size:.98rem; line-height:1.55; color:var(--ink2); margin:0 0 1rem; }
.prose .scenario-signal b{ color:var(--ink); }
.prose .scenario-part{ border-top:1px solid var(--line); padding-top:1rem; }
.prose .scenario-part h3{ font-family:var(--serif); color:var(--ink); font-size:1.12rem; line-height:1.2; margin:0 0 .55rem; }
.prose .scenario-part ol{ margin:0; padding-left:1.3rem; color:var(--muted); font-size:.93rem; line-height:1.55; }
.prose .scenario-part li{ padding-left:.25rem; margin:.45rem 0; }
.prose .scenario-avoid,.prose .scenario-route{ margin-top:1rem; padding:.8rem .9rem; border-radius:10px; font-size:.9rem; line-height:1.5; }
.prose .scenario-avoid{ background:var(--wash-rose); border-left:3px solid var(--rose); color:var(--ink2); }
.prose .scenario-route{ background:var(--wash-green); border-left:3px solid var(--green); color:var(--ink2); }
.prose .scenario-avoid b,.prose .scenario-route b{ color:var(--ink); }
.prose .scenario-card blockquote{ margin:1rem 0 0; padding:.85rem 1rem; border-left:2px solid var(--gold); background:var(--wash-gold); color:var(--ink); font-family:var(--serif); font-size:1rem; line-height:1.45; }
.prose .scenario-links{ display:flex; flex-wrap:wrap; gap:.5rem .8rem; margin-top:1rem; padding-top:.85rem; border-top:1px solid var(--line-2); }
.prose .scenario-links a{ font-size:.82rem; }

/* kids mini-guide: softer field cards for co-reading with children */
.prose .kids-grid{ margin-top:1.6rem; }
.prose .kids-card{ border-radius:22px; background:linear-gradient(180deg,#fffdf8 0%,#fff 100%); }
.prose .kids-card .scenario-num{ font-size:1.65rem; }
.prose .kids-card .scenario-signal{ font-family:var(--serif); font-size:1.05rem; line-height:1.5; }
.prose .kids-card .scenario-route{ border-left-width:0; border-radius:14px; background:var(--cream-2); }
.prose .kids-card blockquote{ border-left-width:0; border-radius:14px; }
.prose .kids-note b{ color:var(--green-deep); }
.prose .kids-check{ background:linear-gradient(135deg,var(--wash-gold),var(--paper)); border-color:var(--gold-soft); }
.prose .pet-grid{ margin-top:1.6rem; }
.prose .pet-card .scenario-signal{ font-size:1rem; line-height:1.55; }
.prose .pet-card .scenario-route{ border-left-width:0; border-radius:14px; }

/* resources list */
.prose .reslist{ margin:.4rem 0 1.4rem; }
.prose .reslist .r{ display:flex; justify-content:space-between; gap:1.4rem; padding:.85rem 0; border-bottom:1px solid var(--line); font-size:.98rem; align-items:baseline; }
.prose .reslist .r:last-child{ border-bottom:none; }
.prose .reslist .r .nm{ color:var(--ink); font-weight:600; }
.prose .reslist .r .nm a{ color:var(--green-deep); }
.prose .reslist .r .nt{ color:var(--muted); text-align:right; }

/* QRC blocks */
.prose .refgrid{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin:1.4rem 0; }
.prose .refblock{ border:1px solid var(--line); border-radius:var(--radius-s); padding:1.3rem 1.4rem; background:var(--paper); }
.prose .refblock.span{ grid-column:1 / -1; }
.prose .refblock .rh{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-text); font-weight:700; margin-bottom:.9rem; display:flex; align-items:center; gap:.5rem; }
.prose .refblock .rh svg{ width:17px; height:17px; color:var(--gold); }
.prose .enum{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); gap:.55rem 1.2rem; }
.prose .enum .e{ display:flex; align-items:baseline; gap:.7rem; font-size:.95rem; }
.prose .enum .e .num{ font-family:var(--serif); font-weight:700; color:var(--ink); font-size:1.15rem; min-width:54px; }
.prose .enum .e .lab{ color:var(--ink2); }
.prose .refseq{ list-style:none; counter-reset:rs; margin:0; padding:0; }
.prose .refseq li{ counter-increment:rs; position:relative; padding:.5rem 0 .5rem 1.9rem; font-size:.95rem; color:var(--ink2); line-height:1.45; border-bottom:1px solid var(--line-2); }
.prose .refseq li:last-child{ border-bottom:none; }
.prose .refseq li::before{ content:counter(rs); position:absolute; left:0; top:.45rem; font-family:var(--serif); font-weight:700; color:var(--gold-text); font-size:1.05rem; }
.prose .refseq li b{ color:var(--ink); }
.prose .reddl{ background:#fbf1ef; border:1px solid #ecd6d1; border-left:3px solid var(--rose); border-radius:var(--radius-s); padding:1.2rem 1.4rem; }
.prose .reddl .t{ font-family:var(--serif); font-size:1.2rem; color:#8f3d35; font-weight:600; }
.prose .reddl .d{ font-size:.95rem; color:#7a4a44; margin-top:.4rem; line-height:1.5; }
.prose .kv{ font-size:.95rem; color:var(--ink2); line-height:1.75; }
.prose .kv b{ color:var(--ink); } .prose .kv a{ color:var(--green-deep); }
.prose .fillrow{ font-size:.95rem; color:var(--ink2); padding:.5rem 0; border-bottom:1px dotted var(--line); }
.prose .fillrow b{ color:var(--ink); }
.prose .applist{ display:flex; flex-wrap:wrap; gap:.5rem; }
.prose .applist span{ font-size:.86rem; background:var(--cream-2); border:1px solid var(--line); border-radius:var(--radius-pill); padding:.35rem 1rem; color:var(--ink2); }

/* cost bars */
.prose .costbars{ margin:.6rem 0 1.4rem; }
.prose .costbars .cb{ display:grid; grid-template-columns:minmax(120px,200px) 1fr minmax(90px,110px); gap:1.2rem; align-items:center; padding:.7rem 0; border-bottom:1px solid var(--line); font-size:.95rem; }
.prose .costbars .cb:last-child{ border-bottom:none; }
.prose .costbars .cb .lbl{ color:var(--ink); font-weight:600; }
.prose .costbars .cb .bar{ height:13px; background:var(--cream-3); border-radius:7px; position:relative; overflow:hidden; }
.prose .costbars .cb .bar i{ position:absolute; left:0; top:0; bottom:0; background:linear-gradient(90deg,var(--gold-soft),var(--gold)); border-radius:7px; }
.prose .costbars .cb .amt{ color:var(--green-deep); font-weight:600; text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }

/* glossary */
.prose .glos{ columns:2; column-gap:2.6rem; margin-top:.6rem; }
.prose .gdef{ break-inside:avoid; margin-bottom:1.2rem; }
.prose .gdef .term{ display:block; font-weight:700; color:var(--green-deep); font-size:1.04rem; }
.prose .gdef .def{ display:block; font-size:.93rem; color:var(--ink2); margin-top:.2rem; line-height:1.5; }

/* signoff + disclaimer */
.prose .signoff{ margin-top:3rem; padding-top:1.8rem; border-top:1px solid var(--line); }
.prose .signoff p{ font-size:1.05rem; color:var(--ink2); }
.prose .signoff .nm{ font-weight:600; color:var(--ink); font-size:1.12rem; margin-top:.7rem; font-family:var(--serif); }
.prose .signoff .meta{ font-size:.92rem; color:var(--muted); margin-top:.3rem; }
.prose .signoff .meta a{ color:var(--muted); }
.prose .endbar{ margin-top:1.6rem; }
.prose .endbar img{ display:none; }
.prose .endbar .t{ font-size:.82rem; color:var(--faint); line-height:1.6; }

/* ============================================================
   PREV / NEXT
   ============================================================ */
.pager{ max-width:var(--container); margin:1rem auto 0; padding:2rem clamp(1.25rem,4vw,2.5rem) 4rem; display:grid; gap:1rem; grid-template-columns:1fr 1fr; }
.pager a{ display:flex; flex-direction:column; gap:.3rem; padding:1.3rem 1.5rem; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--paper); transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
.pager a:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lift); border-color:var(--wash-green-2); }
.pager a.next{ text-align:right; align-items:flex-end; }
.pager .dir{ font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-text); font-weight:700; }
.pager .ttl{ font-family:var(--serif); font-size:1.12rem; color:var(--ink); font-weight:600; }
.pager .ph{ visibility:hidden; }

/* ============================================================
   LANDING · sections
   ============================================================ */
.section{ padding-block:var(--section); }
.section.tight{ padding-block:clamp(3rem,2rem + 4vw,5rem); }
.sec-head{ max-width:640px; margin-bottom:clamp(2rem,4vw,3.4rem); }
.sec-head.center{ margin-inline:auto; text-align:center; }
.sec-head .eyebrow{ display:block; margin-bottom:1rem; }
.sec-head h2{ font-size:var(--t-h2); line-height:1.08; }
.sec-head p{ margin-top:1.1rem; font-size:var(--t-lead); color:var(--ink2); line-height:1.6; }

/* three things */
.threes{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.three{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:1.8rem 1.7rem;
  position:relative; transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.three.accent{ background:var(--field); color:#fff; border-color:transparent; }
.three:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lift); }
.three .n{ font-family:var(--serif); font-size:1.1rem; color:var(--gold); font-weight:700; }
.three h3{ font-size:1.32rem; margin:.7rem 0 .6rem; }
.three.accent h3{ color:#fff; }
.three p{ font-size:.98rem; color:var(--muted); line-height:1.6; margin:0; }
.three.accent p{ color:#cdd9d2; }
.three.accent .n{ color:var(--gold-soft); }

/* ============================================================
   GUIDE EXPLORER · the showpiece (filterable bento)
   ============================================================ */
.guides-section{ background:linear-gradient(180deg,#ffffff 0%,#f5faf6 100%); position:relative; }
.guides-section .sec-head{ max-width:none; display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1.5rem; }
.guides-section .sec-head .htext{ max-width:640px; }

/* filter rail */
.g-filter{ display:flex; flex-wrap:wrap; gap:.55rem; margin-bottom:2.2rem; }
.fpill{ font-family:var(--sans); font-size:.9rem; font-weight:600; color:var(--ink2); background:var(--paper);
  border:1px solid var(--line); border-radius:var(--radius-pill); padding:.58rem 1.05rem; cursor:pointer;
  display:inline-flex; align-items:center; gap:.5rem; line-height:1; transition:transform .25s var(--ease), background .25s, color .25s, border-color .25s, box-shadow .25s; }
.fpill .ct{ font-size:.74rem; color:var(--green-deep); background:var(--wash-green); border-radius:var(--radius-pill); padding:.12rem .5rem; font-weight:700; transition:background .25s, color .25s; }
.fpill:hover{ border-color:var(--gold-soft); color:var(--ink); transform:translateY(-1px); }
.fpill:focus-visible{ outline:2.5px solid var(--gold); outline-offset:2px; }
.fpill.is-active{ background:var(--green); color:#fff; border-color:var(--green); box-shadow:0 10px 24px -12px rgba(10,79,44,.7); }
.fpill.is-active .ct{ background:#fff; color:var(--green-deep); }

/* bento grid */
.g-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:1.1rem; }
.gx-card{ grid-column:span 4; position:relative; display:flex; flex-direction:column; gap:.5rem;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:1.5rem 1.5rem 1.35rem;
  overflow:hidden; min-height:215px; transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s; }
.gx-card::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg,var(--gold-soft),var(--green)); opacity:.7; transition:opacity .4s var(--ease), height .3s var(--ease); }
.gx-card:hover,.gx-card:focus-within{ transform:translateY(-5px); box-shadow:var(--shadow-lift); border-color:var(--wash-green-2); }
.gx-card:hover::after,.gx-card:focus-within::after{ opacity:1; height:3px; }
.gx-card:focus-within{ outline:2.5px solid var(--gold-bright); outline-offset:3px; }
.gx-card.featured:focus-within{ outline-color:var(--gold-bright); }
.gx-card:active{ transform:translateY(-2px); transition-duration:.1s; }
.gx-hit{ position:absolute; inset:0; z-index:1; }
.gx-hit:focus-visible{ outline:none; }   /* ring lives on the card */
.gx-top{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:.35rem; }
.gx-ic{ width:48px; height:48px; border-radius:13px; background:var(--wash-green-2); border:1px solid #c2dccb;
  box-shadow:inset 0 0 0 1px rgba(16,112,60,.06), 0 1px 2px rgba(16,112,60,.05);
  display:flex; align-items:center; justify-content:center; color:var(--green);
  transition:background .3s var(--ease), color .3s, border-color .3s, transform .3s var(--ease); }
.gx-ic svg{ width:24px; height:24px; }
.gx-card:hover .gx-ic{ background:var(--green); color:#fff; border-color:var(--green); transform:rotate(-4deg) scale(1.05); }
.gx-num{ font-family:var(--serif); font-size:1.75rem; font-weight:700; letter-spacing:-.01em; color:#6b9a7f; line-height:1; transition:color .35s var(--ease); }
.gx-card:hover .gx-num{ color:#4f8266; }
.gx-tag{ font-size:.69rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-ink); font-weight:700; }
.gx-title{ font-size:1.22rem; margin:.05rem 0 0; line-height:1.2; }
.gx-desc{ font-size:.93rem; color:var(--muted); line-height:1.55; margin:0; flex:1; }
.gx-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:.55rem; }
.gx-open{ font-size:.87rem; font-weight:600; color:var(--green-deep); display:inline-flex; align-items:center; gap:.4rem; }
.gx-open svg{ width:16px; height:16px; transition:transform .25s var(--ease); }
.gx-card:hover .gx-open svg{ transform:translateX(4px); }
.gx-dl{ position:relative; z-index:2; width:36px; height:36px; border-radius:10px; border:1px solid var(--line);
  display:inline-flex; align-items:center; justify-content:center; color:var(--muted); background:var(--paper); transition:color .25s, border-color .25s, background .25s; }
.gx-dl svg{ width:17px; height:17px; }
.gx-dl:hover{ color:#fff; border-color:var(--green); background:var(--green); transform:translateY(-1px); box-shadow:0 6px 14px -8px rgba(10,79,44,.6); }
.gx-dl:active{ transform:translateY(0) scale(.92); transition-duration:.08s; }

/* featured · the two 'start here' guides: dark field, gold accents */
.gx-card.featured{ grid-column:span 6; background:var(--field); border-color:transparent; color:#fff; min-height:240px; }
.gx-card.featured::before{ content:""; position:absolute; right:-15%; top:-40%; width:55%; height:180%; border-radius:50%;
  background:radial-gradient(circle at center,rgba(202,168,99,.18),transparent 62%); pointer-events:none; }
.gx-card.featured .gx-ic{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.22); color:var(--gold-soft); }
.gx-card.featured:hover .gx-ic{ background:var(--gold-soft); color:#1c1407; border-color:var(--gold-soft); }
.gx-card.featured .gx-num{ color:rgba(255,255,255,.24); }
.gx-card.featured .gx-tag{ color:var(--gold-bright); }
.gx-card.featured .gx-title{ color:#fff; font-size:1.6rem; }
.gx-card.featured .gx-desc{ color:#cdd9d2; }
.gx-card.featured .gx-open{ color:var(--gold-soft); }
.gx-card.featured .gx-dl{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.22); color:#cdd9d2; }
.gx-card.featured .gx-dl:hover{ background:rgba(255,255,255,.16); color:#fff; }
.gx-card.featured::after{ background:linear-gradient(90deg,var(--gold-soft),var(--gold)); }

/* filtering */
.gx-card.hide{ display:none; }
.gx-card.enter{ animation:gxin .55s var(--ease) both; }
@keyframes gxin{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .gx-card.enter{ animation:none; } }
.g-empty{ text-align:center; color:var(--muted); padding:2rem 0; font-size:1.05rem; }

/* CTA band */
.cta-band{ background:var(--field); color:#fff; border-radius:var(--radius); padding:clamp(2.4rem,5vw,4rem); position:relative; overflow:hidden; isolation:isolate; }
.cta-band::before{ content:""; position:absolute; right:-8%; top:-40%; width:50%; height:180%; border-radius:50%; background:radial-gradient(circle at center,rgba(202,168,99,.18),transparent 62%); z-index:-1; }
.cta-band h2{ color:#fff; font-size:var(--t-h2); max-width:18ch; }
.cta-band p{ color:#cfdbd4; margin-top:1rem; max-width:46ch; font-size:var(--t-lead); line-height:1.55; }
.cta-band .cta-actions{ margin-top:2rem; display:flex; flex-wrap:wrap; gap:.9rem; }

/* feature row (how IKAN helps) */
.assist{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.6rem,3vw,3rem); align-items:stretch; }
.assist .ax{ display:grid; gap:.7rem; align-content:center; }
.assist .arow{ display:flex; gap:1.1rem; align-items:flex-start; padding:1rem 1.1rem; border-radius:var(--radius-s);
  border:1px solid transparent; transition:background .3s var(--ease), border-color .3s, transform .3s var(--ease); }
.assist .arow:hover{ background:var(--wash-green); border-color:var(--wash-green-2); transform:translateX(3px); }
.assist .arow .ic{ flex:none; width:46px; height:46px; border-radius:13px; background:var(--wash-green); border:1px solid var(--wash-green-2); display:flex; align-items:center; justify-content:center; color:var(--green); transition:background .3s var(--ease), color .3s, transform .3s var(--ease); }
.assist .arow:hover .ic{ background:var(--green); color:#fff; transform:rotate(-4deg); }
.assist .arow .ic svg{ width:22px; height:22px; }
.assist .arow h3{ font-size:1.12rem; color:var(--ink); margin:0 0 .3rem; }
.assist .arow p{ font-size:.95rem; color:var(--muted); margin:0; line-height:1.55; }
.assist .portrait{ background:var(--field); border-radius:var(--radius); padding:clamp(2rem,3vw,2.8rem); color:#fff;
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:center; isolation:isolate;
  box-shadow:0 24px 60px -30px rgba(10,79,44,.6); }
.assist .portrait::before{ content:"\201C"; position:absolute; top:-.3rem; left:1.4rem; font-family:var(--serif); font-size:9rem; line-height:1; color:rgba(202,168,99,.16); z-index:-1; }
.assist .portrait::after{ content:""; position:absolute; right:-20%; bottom:-30%; width:70%; height:80%; border-radius:50%; background:radial-gradient(circle at center,rgba(202,168,99,.18),transparent 62%); z-index:-1; }
.assist .portrait .q{ font-family:var(--serif); font-style:italic; font-size:clamp(1.35rem,1rem + 1vw,1.65rem); line-height:1.42; color:#fff; }
.assist .portrait .q b{ color:var(--gold-soft); font-style:normal; font-weight:600; }
.assist .portrait .by{ margin-top:1.6rem; padding-top:1.3rem; border-top:1px solid rgba(255,255,255,.16); font-size:.9rem; color:#bccabf; letter-spacing:.02em; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ background:linear-gradient(165deg,#0d3f2b 0%,#0a3122 100%); color:#cdd9d2; padding-block:clamp(3rem,5vw,4.5rem) 2rem; position:relative; }
.foot::before{ content:""; position:absolute; left:0; right:0; top:0; height:1px; background:linear-gradient(90deg,transparent,rgba(202,168,99,.5),transparent); }
.foot .grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.4rem; }
.foot .brand img{ height:34px; margin-bottom:1rem; }
.foot .tag{ font-family:var(--serif); font-style:italic; color:#e7d9b6; font-size:1.05rem; }
.foot p{ font-size:.92rem; color:#aebbb1; line-height:1.6; margin:.8rem 0 0; max-width:34ch; }
.foot h3{ font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-soft); margin:0 0 1rem; font-family:var(--sans); font-weight:700; }
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:.72rem; }
.foot ul a{ color:#c4d0c7; font-size:.92rem; }
.foot ul a:hover{ color:#fff; }
.foot .base{ margin-top:2.6rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.12); display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center; }
.foot .base .c{ font-size:.84rem; color:#90a097; }
.foot .base .links{ display:flex; gap:1.4rem; }
.foot .base .links a{ font-size:.84rem; color:#aebbb1; }

/* ============================================================
   REVIEW POLISH · correctness + last-15% finish
   ============================================================ */
/* never let long URLs / words clip under overflow-x:hidden */
.prose, .prose p, .prose li, .prose .kv, .prose .def, .prose .x, .prose td,
.prose .lab, .prose .gx-desc, .prose .dv, .prose .v, .prose .ds{ overflow-wrap:anywhere; }
.prose a{ word-break:break-word; }

/* designed press states (mobile-first feedback) */
.btn:active{ transform:translateY(0) scale(.985); transition-duration:.08s; }
.nav-cta:active{ transform:translateY(0) scale(.985); transition-duration:.08s; }
.fpill:active{ transform:translateY(0) scale(.97); box-shadow:inset 0 2px 6px rgba(22,39,31,.1); transition-duration:.08s; }
.fpill.is-active:active{ box-shadow:inset 0 2px 8px rgba(0,0,0,.22); }

/* bento: wide anchor card removes the last-row orphan; focus echoes hover */
.gx-card.wide{ grid-column:span 8; }
.gx-card:focus-within .gx-open svg{ transform:translateX(4px); }
.gx-card:focus-within .gx-ic{ background:var(--green); color:#fff; border-color:var(--green); transform:rotate(-4deg) scale(1.05); }
.gx-card.featured:focus-within .gx-ic{ background:var(--gold-soft); color:#1c1407; border-color:var(--gold-soft); }

/* numbered-steps connector: part of the journey palette + hover */
.prose .steps .s:not(:last-child)::before{ width:2px; background:linear-gradient(var(--gold-soft),var(--line)); opacity:.6; }
.prose .steps .s:hover .n{ border-color:var(--green); color:var(--green); background:#fff; box-shadow:0 0 0 4px rgba(16,112,60,.07); }

/* document-kit matrix: legibility + colour-independent cues */
.prose table.matrix td{ position:relative; }   /* contains the abs .vh labels so they can't escape the .tbl-scroll */
.prose table.matrix tbody tr:nth-child(even) td{ background:var(--cream); }
.prose table.matrix td.rk{ background:var(--cream-2); position:sticky; left:0; z-index:1; }
.prose table.matrix th.rk{ position:sticky; left:0; z-index:2; background:var(--cream); }
.prose table.matrix td.n{ color:var(--faint); }   /* glyph is text · AA 4.5:1 on white + cream zebra rows */
.prose .dn{ color:var(--faint); }

/* guide-hero chips → spec-strip, matching the landing hero-meta */
.ghero .gchips{ border-top:1px solid rgba(255,255,255,.16); padding-top:1.4rem; gap:1.5rem 2.6rem; }
.ghero .gchip{ flex-direction:column; align-items:flex-start; gap:.25rem; }

/* the 'three things' accent card earns its hierarchy */
.three.accent{ box-shadow:0 18px 50px -22px rgba(10,79,44,.55); }
.three.accent:hover{ box-shadow:0 26px 60px -22px rgba(10,79,44,.7); }
.three.accent::after{ content:""; position:absolute; top:1.9rem; right:1.9rem; width:10px; height:10px; border-radius:50%;
  background:var(--gold-bright); box-shadow:0 0 0 5px rgba(216,183,110,.22); }
.three.accent h3{ font-size:1.42rem; }

/* glossary: scannable reference */
.prose .glos{ column-fill:balance; }
.prose .gdef{ padding:.25rem .6rem; margin-left:-.6rem; border-radius:8px; transition:background .2s; }
.prose .gdef:hover{ background:var(--cream-2); }
.prose .gdef .term{ position:relative; padding-left:.95rem; }
.prose .gdef .term::before{ content:""; position:absolute; left:0; top:.58em; width:5px; height:5px; border-radius:50%; background:var(--gold-soft); }

/* footer finish */
.foot{ border-top:1px solid rgba(202,168,99,.28); }
.foot .tag{ font-size:1.18rem; }
.foot .tag::after{ content:""; display:block; width:42px; height:2px; background:var(--gold-soft); margin-top:.9rem; opacity:.85; }
.foot ul a{ background-image:linear-gradient(var(--gold-soft),var(--gold-soft)); background-size:0 1px; background-position:0 1.32em; background-repeat:no-repeat; transition:background-size .4s var(--ease), color .2s; }
.foot ul a:hover{ color:#fff; background-size:100% 1px; }

/* designed empty-state */
.g-empty{ display:flex; flex-direction:column; align-items:center; gap:1rem; padding:3rem 0; }
.g-empty .ee{ font-family:var(--serif); font-style:italic; font-size:1.25rem; color:var(--muted); }

/* hero / guide-hero entrance · staggered, runs once on load */
@keyframes heroIn{ from{ opacity:0; transform:translateY(20px); } to{ opacity:1; transform:none; } }
@keyframes heroWipe{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
.js .hero .kicker,.js .hero h1,.js .hero .lede,.js .hero .hero-cta,.js .hero-meta,
.js .ghero .crumb,.js .ghero .phase-tag,.js .ghero h1,.js .ghero .gsub,.js .ghero .gchips,.js .ghero-actions{
  animation:heroIn .82s var(--ease) both; }
.js .hero h1,.js .ghero h1{ animation-delay:.07s; }
.js .hero .lede,.js .ghero .gsub{ animation-delay:.15s; }
.js .hero .hero-cta,.js .ghero .gchips{ animation-delay:.24s; }
.js .hero-meta,.js .ghero-actions{ animation-delay:.34s; }
.js .hero .gold-rule{ transform-origin:0 50%; animation:heroWipe .7s var(--ease) .2s both; }
@media (prefers-reduced-motion:reduce){
  .js .hero .kicker,.js .hero h1,.js .hero .lede,.js .hero .hero-cta,.js .hero-meta,.js .hero .gold-rule,
  .js .ghero .crumb,.js .ghero .phase-tag,.js .ghero h1,.js .ghero .gsub,.js .ghero .gchips,.js .ghero-actions{ animation:none !important; }
}

/* the two supporting 'three things' cards earn colour too */
.three:not(.accent){ background:linear-gradient(180deg,var(--wash-green) 0%,#fff 48%); border-color:var(--wash-green-2); }
.three:not(.accent)::after{ content:""; position:absolute; top:1.7rem; right:1.7rem; width:8px; height:8px; border-radius:50%; background:var(--gold-soft); opacity:.45; }
.three:not(.accent) .n{ color:var(--green); }
.three.accent{ padding:2.1rem 1.9rem; }

/* empty-state must honour the hidden attribute (it sits under a populated grid otherwise) */
.g-empty[hidden]{ display:none !important; }

/* entrance stagger · cascade grids/rows instead of one slab */
.js .g-grid .gx-card.reveal:nth-child(1){ transition-delay:.03s; }
.js .g-grid .gx-card.reveal:nth-child(2){ transition-delay:.09s; }
.js .g-grid .gx-card.reveal:nth-child(3){ transition-delay:.15s; }
.js .g-grid .gx-card.reveal:nth-child(4){ transition-delay:.21s; }
.js .g-grid .gx-card.reveal:nth-child(5){ transition-delay:.26s; }
.js .g-grid .gx-card.reveal:nth-child(6){ transition-delay:.31s; }
.js .g-grid .gx-card.reveal:nth-child(7){ transition-delay:.35s; }
.js .g-grid .gx-card.reveal:nth-child(n+8){ transition-delay:.4s; }
.js .threes .three.reveal:nth-child(2){ transition-delay:.09s; }
.js .threes .three.reveal:nth-child(3){ transition-delay:.18s; }
.js .assist .arow.reveal:nth-child(2){ transition-delay:.07s; }
.js .assist .arow.reveal:nth-child(3){ transition-delay:.14s; }
.js .assist .arow.reveal:nth-child(4){ transition-delay:.21s; }

/* gold rule under the landing section headlines (matches the hero/footer gold detail) */
.section .sec-head h2{ position:relative; }
.section .sec-head h2::after{ content:""; display:block; width:56px; height:2px; background:var(--gold-rule); margin-top:1rem; opacity:.9; border-radius:2px; }
.section .sec-head.center h2::after{ margin-inline:auto; }
.guides-section .sec-head h2::after{ margin-bottom:.2rem; }

/* sticky TOC link · subtle motion on hover */
.toc li a{ transition:color .2s, border-color .2s, transform .2s var(--ease); }
.toc li a:hover{ transform:translateX(2px); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .gx-card{ grid-column:span 6; }
  .gx-card.featured{ grid-column:span 12; }
}
@media (max-width:920px){
  .threes{ grid-template-columns:1fr; }
  .assist{ grid-template-columns:1fr; }
  .foot .grid{ grid-template-columns:1fr 1fr; }
  .foot .brand{ grid-column:1 / -1; }
}
@media (max-width:680px){
  .gx-card,.gx-card.featured{ grid-column:span 12; }
  .gx-card.featured .gx-title{ font-size:1.34rem; }
}
@media (max-width:760px){
  .nav-links{ position:fixed; inset:68px 0 auto 0; flex-direction:column; align-items:stretch; gap:0;
    background:#fff; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    padding:.5rem 1.25rem 1.4rem; border-bottom:1px solid var(--line); box-shadow:var(--shadow-soft);
    max-height:calc(100vh - 68px); overflow:auto;
    transform:translateY(-12px); opacity:0; pointer-events:none; transition:opacity .25s, transform .25s var(--ease); }
  .nav-links{ visibility:hidden; }
  .nav-links.open{ opacity:1; transform:none; pointer-events:auto; visibility:visible; }
  .nav-links > a{ padding:.9rem .2rem; border-bottom:1px solid var(--line-2); color:var(--ink2) !important; }
  .nav-links .nav-cta{ margin-top:1rem; justify-content:center; }
  /* dropdown becomes an inline, always-open compact list on mobile */
  .nav-dd{ display:block; width:100%; }
  .nav-dd-trigger{ width:100%; justify-content:flex-start; padding:1rem .2rem .3rem; pointer-events:none;
    color:var(--gold-ink) !important; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; }
  .nav-dd-trigger .chev{ display:none; }
  .nav-dd-panel{ position:static; transform:none !important; opacity:1 !important; visibility:visible !important;
    pointer-events:auto; width:auto; box-shadow:none; border:0; border-radius:0; padding:0 0 .4rem; background:none; }
  .nav-links:not(.open) .nav-dd-panel{ pointer-events:none; visibility:hidden !important; }
  .nav-dd-panel::before{ display:none; }
  .dd-grid{ grid-template-columns:1fr 1fr; gap:0 .8rem; }
  .dd-h{ display:none; }
  .nav-links .ddi{ padding:.55rem .3rem; }
  .nav-links .ddi-t{ font-size:.84rem; }
  .nav-links .dd-all{ grid-column:1 / -1; justify-content:flex-start; padding:.9rem .2rem .2rem; border-top:1px solid var(--line-2); margin-top:.4rem; }
  .nav-toggle{ display:inline-flex; margin-left:auto; align-items:center; justify-content:center; width:42px; height:42px;
    border:1px solid var(--line); border-radius:11px; background:var(--paper); color:var(--ink); cursor:pointer; }
  .nav.on-dark .nav-toggle{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.25); color:#fff; }
  .nav-toggle svg{ width:20px; height:20px; }
  .prose .stats{ grid-template-columns:1fr 1fr; }
  .prose .stats .st{ padding:1rem .9rem; border-top:1px solid var(--line-2); }
  .prose .stats .st:nth-child(-n+2){ border-top:none; }
  .prose .stats .st:nth-child(odd){ border-left:none; padding-left:0; }
  .prose .grid,.prose .gtk,.prose .nets,.prose .opts,.prose .refgrid,.prose .threes,.prose > .scenario-grid{ grid-template-columns:1fr; }
  .prose .glos{ columns:1; }
  .prose .costbars .cb{ grid-template-columns:1fr; gap:.4rem; }
  .prose .costbars .cb .bar{ order:3; }
  .prose .qref .row,.prose .dbox .drow{ flex-direction:column; }
  .prose .qref .k,.prose .dbox .dl{ width:auto; border-bottom:1px solid var(--line-2); }
  .prose .qref .v,.prose .dbox .dv{ border-left:none; }
  .prose .checklist-tool-head{ grid-template-columns:1fr; align-items:stretch; }
  .prose .checklist-state{ align-items:stretch; flex-direction:column; gap:.9rem; }
  .prose .checklist-score{ width:auto; text-align:left; }
  .pager{ grid-template-columns:1fr; }
  .pager a.next{ text-align:left; align-items:flex-start; }
}
@media (max-width:560px){
  .hero-meta{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem 1.6rem; }
  .hero-meta .m{ min-width:0; padding-left:1rem; border-left:1px solid rgba(255,255,255,.16); }
  .hero-meta .m:nth-child(odd){ padding-left:0; border-left:none; }
}
@media (max-width:440px){
  .prose .steps .s{ gap:.9rem; }
}

/* ============================================================
   PRINT (keep pages saveable as tidy PDFs)
   ============================================================ */
@media print{
  .nav,.progress,.pager,.foot,.ghero-actions,.hero-cta,.toc{ display:none !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
  body{ background:#fff; }
  .ghero,.hero{ background:#0f5130 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .guide-body{ display:block; }
  .prose{ max-width:none; }
  .prose .card,.prose .net,.prose .opt,.prose table,.prose .helps,.prose .clist,.prose .steps .s,.prose .startbox,.prose .qref,.prose .stats,.prose .gtk .t,.prose .scenario-card{ break-inside:avoid; }
}


/* ============================================================
   SCROLLED NAV · light bar always carries light-bar ink
   The .scrolled bar is a light ivory sheet. While the page is
   still inside the dark hero, .on-dark can coexist with
   .scrolled for a moment (and JS class-painting can lag a
   frame), which left white text on the light bar. These rules
   are placed last so .scrolled always wins over .on-dark.
   ============================================================ */
/* while the transparent bar rides the dark hero, a whisper of scrim keeps
   the white ink legible over the hero's gold glow (and any audit angle) */
.nav.on-dark:not(.scrolled) .nav-inner{ background-image:linear-gradient(180deg,rgba(13,42,38,.32),rgba(13,42,38,0)); }
.nav.scrolled .brand .sub{ color:var(--teal); }
.nav.scrolled .nav-link, .nav.scrolled .nav-dd-trigger{ color:var(--teal-2); }
.nav.scrolled .nav-link:hover, .nav.scrolled .nav-dd-trigger:hover{ color:var(--green-deep); }
.nav.scrolled .brand .logo-white{ display:none; }
.nav.scrolled .brand .logo-dark{ display:block; }
.nav.scrolled .nav-toggle{ background:var(--paper); border-color:var(--line); color:var(--ink); }

/* ===== deep-dive additions (2026-06-20) ===== */
.panfig{ margin:1.5rem 0 1.75rem; }
.panfig .cap{ font-size:.82rem; color:var(--muted); margin-top:.9rem; text-align:center; }
.panwrap{ display:flex; gap:1.6rem; align-items:center; flex-wrap:wrap; }
.pancard{ position:relative; flex:1 1 320px; min-width:280px; max-width:430px; border-radius:14px; overflow:hidden; color:#143a5f;
  border:1px solid #aebfd4; background:linear-gradient(135deg,#eaf2fb 0%,#d8e7f6 55%,#c9ddf0 100%); padding:1rem 1.2rem 1.1rem; }
.pancard::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(135deg, rgba(255,255,255,0) 0 9px, rgba(255,255,255,.35) 9px 10px); }
.pancard::after{ content:"SPECIMEN"; position:absolute; right:1.1rem; top:3.4rem; transform:rotate(-16deg);
  font-family:var(--sans); font-weight:700; font-size:1.5rem; letter-spacing:2px; color:rgba(20,60,95,.12); pointer-events:none; }
.pc-top{ display:flex; justify-content:space-between; align-items:center; position:relative; z-index:1; }
.pc-top .u{ font-size:.5rem; font-weight:700; line-height:1.25; letter-spacing:.2px; }
.pc-top .u.r{ text-align:right; }
.pc-emb{ width:1.5rem; height:1.5rem; flex:none; border-radius:50%; border:1px solid #7793b8; color:#3a5d86; display:flex; align-items:center; justify-content:center; }
.pc-emb svg{ width:1rem; height:1rem; }
.pc-rule{ border-top:1px solid #9fb6d4; margin:.5rem 0 .4rem; position:relative; z-index:1; }
.pc-lab{ font-size:.5rem; text-transform:uppercase; letter-spacing:.6px; color:#5d79a0; }
.pc-pan{ font-family:var(--sans); font-weight:700; font-size:1.5rem; letter-spacing:2.4px; color:#0e2f50; position:relative; z-index:1; }
.pc-grid{ display:flex; gap:.9rem; margin-top:.5rem; position:relative; z-index:1; }
.pc-fields{ flex:1; }
.pc-fields .f{ margin-bottom:.4rem; }
.pc-fields .v{ font-size:.85rem; font-weight:700; color:#10243a; letter-spacing:.3px; }
.pc-sign{ font-family:var(--serif); font-style:italic; font-size:.85rem; color:#34557c; border-top:1px solid #b9cae0; padding-top:.25rem; margin-top:.25rem; }
.pc-side{ flex:none; width:4.2rem; display:flex; flex-direction:column; align-items:center; gap:.5rem; }
.pc-photo{ width:3.8rem; height:4.5rem; border:1px solid #8aa4c6; border-radius:4px; background:#eef4fb; display:flex; align-items:flex-end; justify-content:center; color:#9db4d2; overflow:hidden; }
.pc-photo svg{ width:3.1rem; height:3.1rem; }
.pc-qr{ width:3.1rem; height:3.1rem; }
.pcnote{ flex:1 1 280px; min-width:240px; }
.pcnote .pt{ display:flex; gap:.7rem; align-items:flex-start; margin-bottom:.7rem; }
.pcnote .pt:last-child{ margin-bottom:0; }
.pcnote .d{ flex:none; width:1.45rem; height:1.45rem; border-radius:50%; background:var(--wash-green); color:var(--green); display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:700; }
.pcnote .tx{ font-size:.92rem; line-height:1.45; color:var(--ink2); }
.pcnote .tx b{ color:var(--ink); }

#deepdives .dd-hub{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1rem; margin-top:1.6rem; }
.dd-it{ position:relative; border:1px solid var(--line); border-radius:16px; padding:1.15rem 1.25rem 1.2rem; background:var(--paper); transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.dd-it:hover{ border-color:var(--gold-soft); transform:translateY(-2px); }
.dd-it .dt{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-ink); font-weight:700; }
.dd-it h3{ font-family:var(--serif); font-size:1.18rem; color:var(--teal); margin:.4rem 0 .35rem; line-height:1.2; }
.dd-it p{ font-size:.92rem; color:var(--muted); line-height:1.5; margin-bottom:.95rem; }
.dd-it .dl{ display:flex; gap:1.1rem; align-items:center; font-size:.86rem; font-weight:600; }
.dd-it .dl a.read{ color:var(--green); }
.dd-it .dl a.read:hover{ color:var(--green-deep); }
.dd-it .dl a.pdf{ color:var(--muted); }
.dd-it .dl a.pdf:hover{ color:var(--ink); }