/* learn.travelcoordination.com — app stylesheet.
   Brand tokens copied from website/site/style.css (the two docroots are
   deployed separately and must not reach across at runtime — brief §4.0),
   layout from the "Membership Corner" design canvas with its palette
   swapped to brand per DECISIONS.md 2026-08-26:
   design #0B4B3E → --deep(#0B5D57), #10C08D → --teal(#16C9B1),
   amber locked/upgrade accents → --premium family. */

:root{
  --bg:#F3F6FB;
  --surface:#FFFFFF;
  --surface-alt:#E8F0F4;
  --ink:#1F2D3D;
  --ink-soft:#5A6A7A;
  --teal:#16C9B1;
  --teal-deep:#0B5D57;
  --teal-wash:#E3F7F3;
  --premium:#C98A2E;
  --premium-deep:#8A5A20;
  --premium-wash:#FBF1E1;
  --premium-line:#EFDFC9;
  --line:#D7E3ED;
  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:14px;
  --deep:#0B5D57;            /* dark panel */
  --deep-ink:#08453F;        /* text on teal buttons */
  --on-deep:#BFE3DC;         /* body text on dark panel */
  --on-deep-mono:#8FE3D3;    /* mono eyebrows on dark panel */
  --font-display:'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;height:auto;}   /* height:auto, or an image carrying width/height attributes renders stretched */
a{color:var(--teal-deep);text-decoration:none;}
a:hover{color:var(--teal);}
h1,h2,h3{font-family:var(--font-display);color:var(--ink);margin:0;line-height:1.2;}
p{color:var(--ink-soft);margin:0;}
button{font-family:inherit;}

.wrap{max-width:1180px;margin:0 auto;padding:0 32px;}
@media (max-width:720px){ .wrap{padding:0 18px;} }

.eyebrow{
  font-family:var(--font-mono);font-size:11px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--teal-deep);
}
.mono{font-family:var(--font-mono);}
.mono-label{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:#8B99A4;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;border:1px solid transparent;border-radius:8px;
  padding:13px 20px;font-size:14px;font-weight:700;cursor:pointer;
  text-align:center;transition:transform .12s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--teal);color:var(--deep-ink);}
.btn-deep{background:var(--deep);color:#fff;}
.btn-ghost{border-color:var(--line);color:var(--ink);background:var(--surface);}
.btn-ghost:hover{border-color:var(--teal-deep);}
.btn-quiet{background:transparent;border:0;color:var(--ink-soft);font-weight:700;}
.btn[disabled]{background:var(--surface-alt);color:#98A5AE;cursor:default;transform:none;}
.btn-block{display:block;width:100%;}
/* Link-buttons: the generic `a:hover{color:var(--teal)}` above outranks
   .btn-primary's own colour (specificity 0,1,1 vs 0,1,0), which turned
   primary buttons' text the same teal as their background — invisible on
   hover. Restate each variant's colour at matching specificity. */
a.btn-primary:hover{color:var(--deep-ink);}
a.btn-deep:hover{color:#fff;}
a.btn-ghost:hover{color:var(--ink);}
a.btn-quiet:hover{color:var(--ink-soft);}
a.btn-outline:hover{color:#E4F2EE;}

/* ---------- header: the main site's bar, mirrored exactly ---------- */
.site-header{
  background:var(--bg);
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.site-bar{display:flex;align-items:center;justify-content:space-between;height:76px;gap:24px;}
.brand{display:inline-flex;align-items:baseline;gap:2px;font-family:var(--font-display);font-weight:600;font-size:21px;letter-spacing:-.01em;color:var(--ink);}
.brand em{font-style:normal;color:var(--teal-deep);}
.site-nav{display:flex;align-items:center;gap:30px;}
.site-nav a:not(.btn){font-size:14.5px;font-weight:500;color:var(--ink-soft);white-space:nowrap;}
.site-nav a:not(.btn):hover{color:var(--ink);}
.site-nav a.here{color:var(--ink);font-weight:600;}
.site-cta{padding:11px 20px;font-size:14.5px;font-weight:600;border-radius:var(--radius-sm);}
.site-cta.btn-primary{color:var(--ink);}
/* Below 1000px the links are hidden and replaced by a burger. Previously
   they were hidden with NOTHING to replace them, so every /learn/ page on a
   phone had a bare wordmark and no navigation — the footer links were the
   only way out. The main site solved this; learn never got the same treatment. */
.learn-burger{display:none;background:none;border:1px solid var(--line);border-radius:var(--radius-sm);padding:9px 11px;cursor:pointer;color:var(--ink);}
@media (max-width:1000px){
  .site-nav a:not(.btn){display:none;}
  .learn-burger{display:inline-flex;align-items:center;}
  .site-nav.open{
    position:fixed;top:64px;left:0;right:0;bottom:0;background:var(--bg);
    flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 24px;
    overflow-y:auto;z-index:60;
  }
  /* Must out-specify `.site-nav a:not(.btn){display:none}` (0,2,1): this is (0,3,1). */
  .site-nav.open a:not(.btn){display:block;padding:16px 0;border-bottom:1px solid var(--line);font-size:16px;}
  .site-nav.open .site-cta{display:inline-flex;margin-top:20px;justify-content:center;}
}
@media (min-width:1001px){ .learn-burger{display:none !important;} .site-nav.open{position:static;} }
@media (max-width:640px){ .site-cta{display:none;} }

/* ---------- learn sub-nav: the app's own bar, under the site's ---------- */
.learn-subnav{
  background:var(--surface);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20;
}
.sub-bar{display:flex;align-items:center;justify-content:space-between;height:54px;gap:20px;}
.sub-left{display:flex;align-items:center;gap:26px;min-width:0;}
.learn-mark{
  font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--teal-deep);
  border:1px solid var(--teal-wash);background:var(--teal-wash);
  border-radius:5px;padding:4px 9px;flex:none;
}
.app-nav{display:flex;gap:22px;font-size:14px;font-weight:500;overflow-x:auto;}
.app-nav a{color:var(--ink-soft);padding:15px 0 13px;border-bottom:2px solid transparent;white-space:nowrap;}
.app-nav a.active{color:var(--ink);border-bottom-color:var(--teal);}
.app-nav a:hover{color:var(--ink);}
.avatar{
  width:34px;height:34px;border-radius:50%;background:var(--deep);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;flex:none;
}

.app-main{padding:32px 0 56px;}

/* ---------- flash / notices ---------- */
.flash{
  background:var(--teal-wash);color:var(--teal-deep);border-radius:var(--radius-sm);
  padding:10px 14px;font-size:14px;margin-bottom:18px;
}
.notice-premium{
  background:var(--premium-wash);border:1px solid var(--premium-line);
  border-radius:var(--radius-md);padding:16px 18px;
}

/* ---------- corner (dashboard) ---------- */
.corner-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:24px;flex-wrap:wrap;}
.corner-head h1{font-size:34px;margin-top:10px;}
.stat-tiles{display:flex;gap:10px;}
.stat-tile{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:11px 16px;text-align:center;min-width:100px;
}
.stat-tile .n{font-family:var(--font-display);font-size:22px;font-weight:600;}
.stat-tile .n small{font-size:14px;color:#8B99A4;font-weight:400;}
.stat-tile .l{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#8B99A4;margin-top:3px;}

.corner-grid{display:grid;grid-template-columns:1fr 344px;gap:22px;align-items:start;}
@media (max-width:980px){ .corner-grid{grid-template-columns:1fr;} }
.corner-col{display:flex;flex-direction:column;gap:22px;min-width:0;}

/* dark hero: pick up where you stopped */
.resume-hero{
  background:var(--deep);border-radius:var(--radius-lg);
  padding:28px 30px;position:relative;overflow:hidden;color:#fff;
}
.resume-hero .flightpath{position:absolute;right:-30px;top:-10px;opacity:.45;pointer-events:none;}
.resume-hero .inner{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:30px;}
.resume-hero .eyebrow{color:var(--on-deep-mono);}
.resume-hero h3{font-size:27px;color:#fff;margin:14px 0 8px;max-width:22ch;}
.resume-hero .sub{font-size:14.5px;color:var(--on-deep);line-height:1.55;max-width:52ch;}
.resume-hero .actions{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap;}
.resume-hero .btn-outline{background:transparent;color:#E4F2EE;border:1px solid rgba(255,255,255,.32);}
.ring-block{text-align:center;flex:none;}
.ring-block .l{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-deep-mono);margin-top:6px;}
@media (max-width:640px){ .resume-hero .inner{flex-direction:column;align-items:flex-start;} }

/* section heads + cards */
.section-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:13px;gap:14px;}
.section-head h3{font-size:20px;}
.section-head a{font-size:13px;font-weight:500;}
.card-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.card-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
@media (max-width:640px){ .card-grid-2,.card-grid-3{grid-template-columns:1fr;} }

.card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:12px;padding:18px;display:block;color:inherit;
}
a.card:hover{border-color:var(--teal);color:inherit;}
.card .card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:10px;}
.card h4{font-size:16.5px;font-weight:700;line-height:1.3;margin:0 0 6px;font-family:var(--font-body);}
.card .meta{font-size:13px;color:var(--ink-soft);line-height:1.5;}
.status-chip{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 8px;border-radius:5px;white-space:nowrap;
}
.status-chip.open{color:var(--teal-deep);background:var(--teal-wash);}
.status-chip.idle{color:var(--ink-soft);background:var(--surface-alt);}
.status-chip.locked{color:var(--premium-deep);background:var(--premium-wash);border:1px solid var(--premium-line);}

/* template cards */
.tpl-card .doc-icon{
  width:26px;height:32px;border:1px solid #C4D2DC;border-radius:3px;
  background:linear-gradient(#fff,var(--surface-alt));margin-bottom:12px;
}
.tpl-card h4{font-size:14.5px;margin-bottom:5px;}
.tpl-card .fmt{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#8B99A4;}

/* sidebar upsell */
.upsell{background:var(--surface);border:1px solid var(--premium);border-radius:var(--radius-lg);overflow:hidden;}
.upsell .head{background:var(--premium-wash);padding:14px 20px;border-bottom:1px solid var(--premium-line);}
.upsell .head .mono-label{color:var(--premium-deep);font-size:10.5px;letter-spacing:.12em;}
.upsell .body{padding:20px;}
.upsell h3{font-size:22px;margin-bottom:8px;}
.upsell .sub{font-size:13.5px;line-height:1.55;margin-bottom:16px;}
.tick-list{display:flex;flex-direction:column;gap:9px;margin:0 0 18px;padding:0;list-style:none;}
.tick-list li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;color:var(--ink);}
.tick-list li::before{content:"✓";color:var(--teal);font-weight:700;}
.price-line{display:flex;align-items:baseline;gap:7px;margin-bottom:14px;}
.price-line .amount{font-family:var(--font-display);font-size:30px;font-weight:600;}
.price-line .note{font-size:13px;color:#8B99A4;}

/* badges */
.badge-row{display:flex;gap:14px;flex-wrap:wrap;}
.badge{text-align:center;width:66px;}
.badge .disc{
  width:52px;height:52px;margin:0 auto 7px;border-radius:50%;
  background:var(--teal-wash);border:2px solid var(--teal);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:15px;color:var(--teal-deep);
}
.badge .name{font-size:10.5px;line-height:1.3;color:var(--ink-soft);}
.badge.locked{opacity:.45;}
.badge.locked .disc{background:var(--surface-alt);border:2px dashed #C4D2DC;color:#8B99A4;}

/* ---------- course overview ---------- */
.course-hero{
  background:var(--deep);border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  padding:34px 40px 30px;position:relative;overflow:hidden;color:#fff;
}
.course-hero .flightpath{position:absolute;right:-40px;bottom:-40px;opacity:.32;pointer-events:none;}
.course-hero .inner{position:relative;display:flex;justify-content:space-between;align-items:flex-end;gap:40px;}
.course-hero .eyebrow{color:var(--on-deep-mono);}
.course-hero h1{font-size:36px;color:#fff;margin:12px 0 10px;max-width:24ch;}
.course-hero .sub{font-size:15.5px;color:var(--on-deep);max-width:60ch;}
.course-hero .ring-card{
  flex:none;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  border-radius:12px;padding:18px 22px;text-align:center;
}
@media (max-width:800px){ .course-hero .inner{flex-direction:column;align-items:flex-start;} .course-hero{padding:26px 22px;} }

.course-body{
  background:var(--surface-alt);border:1px solid var(--line);border-top:0;
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
  padding:28px 40px 36px;display:grid;grid-template-columns:1fr 320px;gap:28px;align-items:start;
}
@media (max-width:980px){ .course-body{grid-template-columns:1fr;padding:22px;} }

.chapter-open{background:var(--surface);border:1px solid var(--teal);border-radius:12px;overflow:hidden;margin-bottom:12px;}
.chapter-open .head{
  display:flex;align-items:center;gap:16px;padding:18px 20px;
  background:var(--teal-wash);border-bottom:1px solid #C2E8DF;
}
.chapter-num{
  width:34px;height:34px;border-radius:50%;background:var(--deep);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:13px;flex:none;
}
.chapter-num.idle{background:var(--surface-alt);color:#8B99A4;}
.chapter-open .head .t{font-size:17px;font-weight:700;}
.chapter-open .head .m{font-size:13px;color:var(--ink-soft);margin-top:3px;}
.free-chip{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--teal-deep);background:#fff;border:1px solid var(--teal);border-radius:5px;padding:5px 9px;
}
.lesson-rows{padding:6px 20px 14px;}
.lesson-row{display:flex;align-items:center;gap:13px;padding:12px 0;border-bottom:1px solid var(--surface-alt);color:inherit;}
.lesson-row:last-child{border-bottom:0;}
.lesson-row .t{flex:1;font-size:14.5px;color:var(--ink);}
.lesson-row .m{font-family:var(--font-mono);font-size:11px;color:#8B99A4;}
.lesson-row.current{font-weight:700;}
.lesson-row.current .m{color:var(--teal-deep);}
a.lesson-row:hover .t{color:var(--teal-deep);}
.mark{width:20px;height:20px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:11px;}
.mark.done{background:var(--teal);color:#fff;}
.mark.open{border:2px solid var(--teal);}
.mark.todo{border:2px solid #D3DEE7;}

.chapter-locked{
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:17px 20px;display:flex;align-items:center;gap:16px;margin-bottom:10px;
}
.chapter-locked .t{font-size:16.5px;font-weight:700;}
.chapter-locked .tease{font-size:13.5px;color:var(--ink-soft);margin-top:4px;line-height:1.5;}
.chapter-locked .side{flex:none;text-align:right;}
.chapter-locked .n-lessons{font-family:var(--font-mono);font-size:11px;color:#8B99A4;margin-bottom:7px;}

.deep-panel{background:var(--deep);border-radius:12px;padding:22px;color:#fff;}
.deep-panel .eyebrow{color:var(--on-deep-mono);}
.deep-panel h3{color:#fff;font-size:23px;margin:10px 0;}
.deep-panel .sub{font-size:13.5px;color:var(--on-deep);line-height:1.55;margin-bottom:16px;}
.deep-panel .under{font-size:12px;color:var(--on-deep-mono);text-align:center;margin-top:10px;}

/* ---------- lesson page ---------- */
.lesson-shell{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;display:flex;min-height:640px;
}
.lesson-toc{
  width:296px;flex:none;background:var(--surface-alt);border-right:1px solid var(--line);
  /* sticky under the 54px learn sub-nav, so the chapter list scrolls on
     its own instead of running the whole page down past the lesson */
  display:flex;flex-direction:column;position:sticky;top:54px;max-height:calc(100vh - 54px);
}
.toc-scroll{overflow-y:auto;flex:1;min-height:0;overscroll-behavior:contain;}
.lesson-toc .chapter-head{background:var(--deep);padding:22px 20px;color:#fff;}
.lesson-toc .chapter-head .eyebrow{color:var(--on-deep-mono);font-size:9.5px;}
.lesson-toc .chapter-head h2{font-size:19px;color:#fff;margin:9px 0 16px;}
.progress-strip{display:flex;align-items:center;gap:11px;}
.progress-strip .track{flex:1;height:5px;background:rgba(255,255,255,.22);border-radius:3px;overflow:hidden;}
.progress-strip .fill{height:100%;background:var(--teal);transition:width .4s;}
.progress-strip .pct{font-family:var(--font-mono);font-size:10.5px;color:var(--on-deep-mono);}
.toc-row{
  display:flex;align-items:flex-start;gap:11px;padding:13px 20px;
  border-bottom:1px solid #DEE8EE;border-left:3px solid transparent;color:inherit;
}
.toc-row .t{font-size:13.5px;line-height:1.4;color:var(--ink);}
.toc-row .m{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:#93A1AC;margin-top:4px;}
.toc-row.current{background:var(--surface);border-left-color:var(--teal);}
.toc-row.current .t{font-weight:700;}
a.toc-row:hover .t{color:var(--teal-deep);}
.toc-row .mark{width:19px;height:19px;margin-top:1px;font-size:10.5px;}
/* chapter accordion (native <details>) — every chapter listed, current
   one open, the rest collapsed. Replaced the old "next 2 chapters only"
   strip, which hid six of eight chapters from anyone deciding to buy. */
.toc-ch{border-bottom:1px solid #DEE8EE;}
.toc-ch > summary{
  display:flex;align-items:center;gap:10px;padding:13px 20px;cursor:pointer;
  list-style:none;user-select:none;background:var(--surface-alt);
}
.toc-ch > summary::-webkit-details-marker{display:none;}
.toc-ch > summary:hover{background:#DFEAF1;}
.toc-ch > summary::after{
  content:"";flex:none;width:7px;height:7px;margin-left:8px;
  border-right:1.5px solid #8B99A4;border-bottom:1.5px solid #8B99A4;
  transform:rotate(-45deg);transition:transform .15s ease;
}
.toc-ch[open] > summary::after{transform:rotate(45deg);}
.toc-ch .ch-n{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;color:#8B99A4;flex:none;
}
.toc-ch .ch-t{font-size:13px;font-weight:600;line-height:1.35;color:var(--ink);min-width:0;}
.toc-ch.is-current > summary{background:var(--surface);}
.toc-ch.is-current .ch-t{color:var(--teal-deep);}
.toc-ch .ch-meta{
  font-family:var(--font-mono);font-size:9.5px;color:#8B99A4;flex:none;margin-left:auto;
}
.toc-ch .ch-lock{font-size:11px;flex:none;margin-left:auto;}
.toc-ch .ch-teaser{
  font-size:12px;line-height:1.55;color:var(--ink-soft);
  padding:11px 20px 4px;margin:0;background:var(--surface);
}
.toc-ch-body{background:var(--surface);}
.toc-row.locked{opacity:.62;}
.toc-row.locked .t{font-weight:500;}
.toc-row .mark.lock{font-size:10px;line-height:1.6;}

@media (max-width:900px){
  .lesson-shell{flex-direction:column;}
  .lesson-toc{width:100%;border-right:0;border-bottom:1px solid var(--line);
    position:static;max-height:none;}
  .toc-scroll{max-height:420px;}
}

.lesson-main{flex:1;min-width:0;}
.lesson-topbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 34px;border-bottom:1px solid var(--line);background:#F8FAFB;
}
.lesson-topbar h1{font-size:21px;margin-top:5px;font-family:var(--font-display);}
.step-indicator{display:flex;align-items:center;gap:16px;}
.step-indicator .txt{text-align:right;}
.step-indicator .counter{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#8B99A4;}
.step-indicator .name{font-size:14px;font-weight:700;margin-top:2px;}

.lesson-opener{display:flex;gap:22px;align-items:flex-start;padding:24px 34px 0;max-width:860px;}
.lesson-opener img{width:220px;height:150px;object-fit:cover;border-radius:var(--radius-md);flex:none;border:1px solid var(--line);}
.lesson-opener .body{flex:1;padding-top:2px;}
@media (max-width:720px){ .lesson-opener{flex-direction:column;padding:20px 18px 0;} .lesson-opener img{width:100%;height:180px;} }

.lesson-canvas{padding:34px 34px 44px;max-width:860px;}
.lesson-opener + .lesson-canvas{padding-top:26px;}
.step-rail{margin-bottom:30px;}
.screen-tag{margin-bottom:18px;}
@media (max-width:720px){ .lesson-canvas{padding:20px 18px 30px;} .lesson-topbar{padding:14px 18px;} }

/* step rail */
.step-rail{display:flex;align-items:flex-start;gap:7px;margin-bottom:26px;}
.step-rail button{flex:1;min-width:0;padding:0;border:0;background:transparent;cursor:pointer;text-align:left;}
.step-rail .bar{height:4px;border-radius:2px;background:var(--surface-alt);}
.step-rail .on .bar{background:var(--teal);}
/* A rail step you haven't earned yet: visibly inert, not just unclickable.
   The rail navigates between finished screens — it is not a skip button. */
.step-rail button.locked{cursor:not-allowed;}
.step-rail button.locked .bar{background:var(--surface-alt);}
.step-rail button.locked .lbl{color:#C3CCD4;}
.step-rail button:disabled{opacity:1;}   /* keep labels legible when locked */
/* Continue stays visible but inert until the screen is actually done, so
   it reads as "not yet" rather than vanishing and moving the layout. */
.step-nav .btn[disabled]{background:var(--surface-alt);color:#98A5AE;cursor:not-allowed;transform:none;}
.step-rail .lbl{
  font-family:var(--font-mono);font-size:9px;letter-spacing:.05em;text-transform:uppercase;
  color:#9AA6B0;margin-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.step-rail .current .lbl{color:var(--teal-deep);}

.screen-tag{
  display:flex;align-items:center;gap:11px;margin-bottom:14px;flex-wrap:wrap;
}
.screen-tag .chip{
  font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--teal-deep);background:var(--teal-wash);
  border-radius:5px;padding:5px 9px;white-space:nowrap;
}
.screen-tag .hint{font-size:14px;color:var(--ink-soft);}

.step-screen{display:none;animation:riseIn .3s ease;}
.step-screen.active{display:block;}
@keyframes riseIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* audio brief player */
.brief-player{background:var(--deep);border-radius:var(--radius-lg);padding:24px 26px;margin-bottom:32px;color:#fff;}
.brief-player .head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px;flex-wrap:wrap;}
.brief-player .eyebrow{color:var(--on-deep-mono);}
.brief-player h3{font-family:var(--font-display);font-size:20px;color:#fff;margin-top:7px;}
.brief-player .ctl{display:flex;gap:8px;}
.brief-player .ctl button{
  background:transparent;color:#E4F2EE;font-size:12.5px;font-weight:700;
  padding:8px 12px;border:1px solid rgba(255,255,255,.32);border-radius:7px;cursor:pointer;
}
.brief-player .ctl .speed{font-family:var(--font-mono);font-size:11.5px;font-weight:400;}
.play-row{display:flex;align-items:center;gap:18px;}
.play-btn{
  width:56px;height:56px;flex:none;border-radius:50%;background:var(--teal);
  color:var(--deep-ink);font-size:17px;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.wave{flex:1;min-width:0;cursor:pointer;}
.wave .bars{display:flex;align-items:flex-end;gap:2px;height:44px;}
.wave .bars i{flex:1;border-radius:1px;background:rgba(255,255,255,.22);}
.wave .bars i.played{background:var(--teal);}
.wave .times{display:flex;justify-content:space-between;margin-top:9px;font-family:var(--font-mono);font-size:11px;color:var(--on-deep-mono);}
.chapters-list{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;}
.chapters-list button{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:var(--on-deep);
  font-family:var(--font-mono);font-size:10.5px;border-radius:6px;padding:6px 10px;cursor:pointer;
}
.chapters-list button.on{border-color:var(--teal);color:#fff;}
.transcript{margin-top:20px;padding-top:20px;border-top:1px solid rgba(255,255,255,.16);}
.transcript .eyebrow{margin-bottom:11px;display:block;}
.transcript p{font-size:14.5px;line-height:1.75;color:#CFE6E0;margin:0 0 4px;cursor:pointer;padding:3px 8px;border-radius:6px;}
.transcript p.now{background:rgba(255,255,255,.1);color:#fff;}

.prose h2{font-size:27px;margin:0 0 14px;}
.prose p{font-size:16px;line-height:1.7;color:#3E4F5C;margin:0 0 12px;}

/* tabs */
.tabs-box{border:1px solid var(--line);border-radius:12px;overflow:hidden;}
.tabs-box .tab-bar{display:flex;background:var(--surface-alt);}
.tabs-box .tab-bar button{
  flex:1;padding:16px 12px;border:0;border-bottom:3px solid transparent;background:transparent;
  color:#7A8892;font-family:var(--font-mono);font-size:11px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
}
.tabs-box .tab-bar button.on{background:var(--surface);color:var(--teal-deep);border-bottom-color:var(--teal);}
.tabs-box .tab-pane{padding:24px 26px;background:var(--surface);}
.tabs-box .tab-pane h4{font-size:18px;font-weight:700;margin:0 0 10px;font-family:var(--font-body);}
.tabs-box .tab-pane p{font-size:15.5px;line-height:1.7;color:#3E4F5C;margin:0 0 14px;}
.callout{
  background:var(--surface-alt);border-left:3px solid var(--teal);
  border-radius:0 8px 8px 0;padding:13px 16px;
}
.callout .k{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-deep);margin-bottom:6px;}
.callout .v{font-size:14.5px;line-height:1.6;color:var(--ink);font-weight:500;}

/* reveal (accordion) */
.acc-box{border:1px solid var(--line);border-radius:12px;overflow:hidden;}
.acc-item{border-bottom:1px solid var(--surface-alt);}
.acc-item:last-child{border-bottom:0;}
.acc-item > button{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:17px 22px;background:transparent;border:0;border-left:3px solid transparent;
  cursor:pointer;text-align:left;font-size:16px;font-weight:700;color:var(--ink);
}
.acc-item.open{background:#F7FBFA;}
.acc-item.open > button{border-left-color:var(--teal);}
.acc-item .sign{font-size:19px;color:var(--teal-deep);flex:none;line-height:1;}
.acc-item .a{display:none;padding:0 22px 20px 25px;}
.acc-item.open .a{display:block;animation:riseIn .25s ease;}
.acc-item .a p{font-size:15px;line-height:1.7;color:#3E4F5C;margin:0;}

/* flip cards */
.flip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
@media (max-width:720px){ .flip-grid{grid-template-columns:1fr;} }
.flip-card{height:196px;perspective:900px;cursor:pointer;}
.flip-card .inner{
  position:relative;width:100%;height:100%;
  transition:transform .55s cubic-bezier(.4,.1,.2,1);transform-style:preserve-3d;
}
.flip-card.flipped .inner{transform:rotateY(180deg);}
.flip-face{
  position:absolute;inset:0;backface-visibility:hidden;border-radius:12px;
  padding:20px;display:flex;flex-direction:column;justify-content:space-between;
}
.flip-face.front{background:var(--surface-alt);border:1px solid var(--line);}
.flip-face.front .k{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--premium);}
.flip-face.front .v{font-size:16.5px;font-weight:700;line-height:1.35;color:var(--ink);}
.flip-face.front .hint{font-family:var(--font-mono);font-size:10px;color:#8B99A4;}
.flip-face.back{background:var(--deep);transform:rotateY(180deg);}
.flip-face.back .k{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-deep-mono);}
.flip-face.back .v{font-size:14.5px;line-height:1.55;color:#E4F2EE;}
.flip-face.back .hint{font-family:var(--font-mono);font-size:10px;color:#6FBFB0;}

/* sort */
.sort-box{border:1px solid var(--line);border-radius:12px;padding:18px;background:#F8FAFB;}
.sort-box.solved{border-color:var(--teal);}
.sort-list{display:flex;flex-direction:column;gap:9px;}
.sort-item{
  display:flex;align-items:center;gap:14px;background:var(--surface);
  border:1px solid var(--line);border-radius:9px;padding:14px 16px;cursor:grab;
  box-shadow:0 1px 2px rgba(0,0,0,.04);user-select:none;touch-action:none;
}
.sort-item.dragging{opacity:.5;border-color:var(--teal-deep);}
.solved .sort-item{border-color:var(--teal);}
.sort-item .grip{font-family:var(--font-mono);font-size:12px;color:#8B99A4;flex:none;}
.sort-item .pos{
  width:24px;height:24px;border-radius:6px;background:var(--surface-alt);color:var(--ink-soft);
  font-family:var(--font-mono);font-size:11.5px;display:flex;align-items:center;justify-content:center;flex:none;
}
.solved .sort-item .pos{background:var(--teal);color:#fff;}
.sort-item .t{font-size:15px;font-weight:500;flex:1;}
.sort-foot{display:flex;align-items:center;justify-content:space-between;margin-top:16px;gap:16px;}
.sort-foot .msg{font-size:14px;color:var(--ink-soft);font-weight:500;}
.solved .sort-foot .msg{color:var(--teal-deep);}

/* buckets */
.buckets-box{border:1px solid var(--line);border-radius:12px;padding:18px;background:#F8FAFB;}
.buckets-box.solved{border-color:var(--teal);}
.bucket-pool{display:flex;flex-wrap:wrap;gap:9px;min-height:20px;margin-bottom:16px;}
.bucket-item{
  font-family:inherit;font-size:14px;font-weight:500;color:var(--ink);text-align:left;
  background:var(--surface);border:1px solid var(--line);border-radius:9px;
  padding:11px 14px;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.bucket-item.selected{border-color:var(--teal-deep);background:#EFF6F9;}
.bucket-item.wrong{border-color:var(--premium);background:var(--premium-wash);}
.bucket-item.right{border-color:var(--teal);background:var(--teal-wash);}
.bucket-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;}
.bucket{background:var(--surface);border:1px dashed #B9C8D3;border-radius:10px;min-height:120px;}
.bucket.over{border-color:var(--teal-deep);}
.bucket-label{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--teal-deep);padding:10px 12px;border-bottom:1px solid var(--surface-alt);
}
.bucket-drop{display:flex;flex-direction:column;gap:7px;padding:10px;}
.bucket-drop .bucket-item{width:100%;}

/* hotspot */
.hotspot-box{border:1px solid var(--line);border-radius:12px;padding:18px;background:var(--surface);}
.hotspot-stage{position:relative;min-height:260px;border-radius:10px;overflow:visible;background:var(--surface-alt);}
.hotspot-stage img{display:block;width:100%;border-radius:10px;}
.hotspot-desc{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:28px 12%;text-align:center;font-size:15px;color:var(--ink-soft);line-height:1.7;
}
.hotspot-dot{
  position:absolute;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;
  background:var(--teal);color:var(--deep-ink);border:2px solid #fff;
  font-family:var(--font-mono);font-size:12px;font-weight:600;cursor:pointer;
  box-shadow:0 1px 4px rgba(31,45,61,.3);z-index:2;
}
.hotspot-dot.seen{background:var(--teal-deep);color:#fff;}
.hotspot-pop{
  position:absolute;transform:translate(-50%,14px);max-width:260px;min-width:180px;z-index:3;
  background:#fff;border:1px solid var(--line);border-radius:10px;padding:13px 15px;
  box-shadow:0 8px 24px rgba(31,45,61,.16);animation:riseIn .2s ease;
}
.hotspot-pop .k{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-deep);margin-bottom:5px;}
.hotspot-pop p{font-size:13.5px;line-height:1.55;color:#3E4F5C;margin:0;}

/* scenario */
.scenario-box{border:1px solid var(--line);border-radius:12px;overflow:hidden;}
.scenario-box .situation{background:#1C2B33;padding:22px 26px;}
.scenario-box .situation .k{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:#8FA3AE;margin-bottom:9px;}
.scenario-box .situation p{font-size:16.5px;line-height:1.65;color:#fff;margin:0;}
.scenario-box .choices{padding:20px 26px 24px;background:var(--surface);display:flex;flex-direction:column;gap:10px;}
.choice{
  display:flex;gap:13px;align-items:flex-start;text-align:left;background:#F8FAFB;
  border:1px solid var(--line);border-radius:9px;padding:15px 17px;cursor:pointer;font-size:15px;line-height:1.5;color:var(--ink);
}
.choice:hover{border-color:var(--teal-deep);}
.choice.picked{background:var(--teal-wash);border-color:var(--teal);}
.choice .dot{width:22px;height:22px;border-radius:50%;border:2px solid #C4D2DC;flex:none;margin-top:1px;}
.choice.picked .dot{border-color:var(--teal);background:var(--teal);}
.verdict{
  margin:18px 26px 24px;background:var(--surface-alt);border-left:3px solid var(--teal);
  border-radius:0 9px 9px 0;padding:17px 19px;animation:riseIn .3s ease;
}
.verdict .k{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-deep);margin-bottom:8px;}
.verdict p{font-size:15px;line-height:1.7;color:#3E4F5C;margin:0;}
.scenario-restart{margin:0 26px 24px;}

/* key insight — same shape as pro-tip, teal (brand) instead of premium */
.key-insight{
  background:var(--teal-wash);border:1px solid var(--teal);border-radius:12px;
  padding:20px 22px;margin-top:26px;display:flex;gap:16px;align-items:flex-start;
}
.key-insight .chip{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--teal-deep);background:#fff;border:1px solid var(--teal);
  border-radius:5px;padding:5px 9px;flex:none;
}
.key-insight p{font-size:15px;line-height:1.7;color:var(--teal-deep);margin:0;font-weight:500;}

/* pro tip */
.pro-tip{
  background:var(--premium-wash);border:1px solid var(--premium-line);border-radius:12px;
  padding:20px 22px;margin-top:26px;display:flex;gap:16px;align-items:flex-start;
}
.pro-tip .chip{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--premium-deep);background:#fff;border:1px solid var(--premium-line);
  border-radius:5px;padding:5px 9px;flex:none;
}
.pro-tip p{font-size:15px;line-height:1.7;color:#5F4B33;margin:0;}

/* check (quiz) */
.quiz-box{border:1px solid var(--line);border-radius:12px;padding:24px 26px 26px;background:var(--surface);}
.quiz-q{margin-bottom:26px;}
.quiz-q .qhead{display:flex;gap:12px;align-items:baseline;margin-bottom:12px;}
.quiz-q .qn{font-family:var(--font-mono);font-size:11px;color:#8B99A4;flex:none;}
.quiz-q .qt{font-size:16.5px;font-weight:700;line-height:1.4;}
.quiz-opts{display:flex;flex-direction:column;gap:8px;padding-left:32px;}
@media (max-width:640px){ .quiz-opts{padding-left:0;} }
.quiz-opt{
  display:flex;gap:12px;align-items:center;text-align:left;background:#F8FAFB;
  border:1px solid var(--line);border-radius:8px;padding:13px 15px;cursor:pointer;
  font-size:15px;line-height:1.5;color:var(--ink);
}
.quiz-opt .dot{
  width:20px;height:20px;border-radius:50%;border:2px solid #C4D2DC;flex:none;
  display:flex;align-items:center;justify-content:center;font-size:11px;color:#fff;
}
.quiz-opt.picked{background:#EFF6F9;border-color:var(--teal-deep);}
.quiz-opt.picked .dot{border-color:var(--teal-deep);background:var(--teal-deep);}
.quiz-opt.right{background:var(--teal-wash);border-color:var(--teal);}
.quiz-opt.right .dot{border-color:var(--teal);background:var(--teal);}
.quiz-opt.wrong{background:var(--premium-wash);border-color:var(--premium);}
.quiz-opt.wrong .dot{border-color:var(--premium);background:var(--premium);}
.quiz-why{margin:11px 0 0 32px;font-size:14px;line-height:1.65;color:var(--ink-soft);border-left:2px solid var(--line);padding-left:13px;display:none;}
.quiz-why.show{display:block;}
.quiz-foot{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  margin-top:8px;padding-top:22px;border-top:1px solid var(--surface-alt);flex-wrap:wrap;
}
.quiz-foot .score-t{font-size:16px;font-weight:700;}
.quiz-foot .score-n{font-size:13.5px;color:var(--ink-soft);margin-top:4px;}

/* wrap-up */
.done-banner{
  background:var(--teal-wash);border:1px solid var(--teal);border-radius:12px;
  padding:20px 22px;margin-bottom:18px;display:flex;gap:16px;align-items:center;animation:riseIn .35s ease;
}
.done-banner .tick{
  width:44px;height:44px;border-radius:50%;background:var(--teal);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:19px;flex:none;
}
.done-banner .t{font-size:16.5px;font-weight:700;}
.done-banner .t .badge-name{font-family:var(--font-display);}
.done-banner .m{font-size:14px;color:var(--teal-deep);margin-top:4px;}
.next-cards{display:flex;gap:14px;align-items:stretch;}
@media (max-width:720px){ .next-cards{flex-direction:column;} }
.next-card{flex:1;border-radius:12px;padding:18px 20px;}
.next-card.free{background:var(--surface-alt);border:1px solid var(--line);}
.next-card.locked{background:var(--surface);border:1px solid var(--premium-line);}
.next-card .k{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:7px;color:#8B99A4;}
.next-card.locked .k{color:var(--premium-deep);}
.next-card .t{font-size:16px;font-weight:700;margin-bottom:12px;}
.next-card .m{font-size:13.5px;color:var(--ink-soft);line-height:1.5;margin-bottom:12px;}

/* step footer nav */
.step-nav{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:30px;padding-top:20px;border-top:1px solid var(--surface-alt);
}
.step-nav .counter{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#8B99A4;}
.step-nav .side{display:flex;gap:9px;}

/* ---------- paywall (the peek) ---------- */
.peek-wall{max-width:560px;margin:40px auto;}
.peek-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px;box-shadow:0 8px 24px rgba(31,45,61,.10);}
.peek-card .lock-chip{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--premium-deep);background:var(--premium-wash);border:1px solid var(--premium-line);
  border-radius:5px;padding:5px 9px;display:inline-block;margin-bottom:16px;
}
.peek-card h2{font-size:22px;margin-bottom:10px;}
.peek-excerpt{position:relative;border:1px solid var(--line);border-radius:9px;padding:16px;overflow:hidden;}
.peek-excerpt p{font-size:14.5px;line-height:1.7;color:#3E4F5C;margin:0;}
.peek-excerpt .fade{position:absolute;left:0;right:0;bottom:0;height:72px;background:linear-gradient(rgba(255,255,255,0),#fff 70%);}
.peek-note{margin-top:16px;display:flex;align-items:center;gap:12px;font-size:13.5px;color:var(--ink-soft);line-height:1.5;}
.peek-price{
  background:var(--surface-alt);border:1px solid var(--line);border-radius:9px;
  padding:14px 16px;margin-top:18px;
}
.peek-price .row{display:flex;justify-content:space-between;align-items:baseline;}
.peek-price .amount{font-family:var(--font-display);font-size:24px;font-weight:600;}
.peek-price .sub{font-size:12.5px;color:#8B99A4;margin-top:5px;}

/* ---------- buy pipe ---------- */
.buy-shell{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;}
.buy-topbar{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:0 28px;height:64px;border-bottom:1px solid var(--line);
}
.buy-rail{display:flex;align-items:center;gap:26px;}
@media (max-width:860px){ .buy-rail{display:none;} }
.buy-rail .st{display:flex;align-items:center;gap:9px;}
.buy-rail .n{
  width:22px;height:22px;border-radius:50%;background:var(--surface-alt);color:#8B99A4;
  font-family:var(--font-mono);font-size:11px;display:flex;align-items:center;justify-content:center;
}
.buy-rail .st.now .n{background:var(--deep);color:#fff;}
.buy-rail .st.done .n{background:var(--teal);color:#fff;}
.buy-rail .l{font-size:12.5px;font-weight:700;color:#8B99A4;}
.buy-rail .st.now .l{color:var(--ink);}
.buy-secure{font-family:var(--font-mono);font-size:11px;color:#8B99A4;}
.buy-grid{display:grid;grid-template-columns:1fr 340px;align-items:stretch;}
@media (max-width:860px){ .buy-grid{grid-template-columns:1fr;} }
.buy-main{padding:30px 32px 34px;min-height:480px;}
.buy-main h2{font-size:29px;margin-bottom:8px;}
.buy-main .lead{font-size:15.5px;line-height:1.7;color:#3E4F5C;margin-bottom:24px;max-width:60ch;}
.buy-feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:26px;}
@media (max-width:640px){ .buy-feature-grid{grid-template-columns:1fr;} }
.buy-feature{background:var(--surface-alt);border:1px solid var(--line);border-radius:10px;padding:16px 18px;}
.buy-feature .t{font-size:15px;font-weight:700;margin-bottom:5px;}
.buy-feature .m{font-size:13.5px;color:var(--ink-soft);line-height:1.5;}
.teams-strip{
  display:flex;gap:12px;align-items:center;background:var(--premium-wash);
  border:1px solid var(--premium-line);border-radius:10px;padding:14px 16px;flex-wrap:wrap;
}
.teams-strip .chip{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--premium-deep);background:#fff;border:1px solid var(--premium-line);border-radius:5px;padding:5px 8px;flex:none;
}
.teams-strip .m{font-size:14px;color:#5F4B33;line-height:1.5;flex:1;min-width:200px;}
.teams-strip a{font-size:13.5px;font-weight:700;color:var(--premium-deep);white-space:nowrap;}
.buy-side{background:#F8FAFB;border-left:1px solid var(--line);padding:30px 26px;display:flex;flex-direction:column;}
@media (max-width:860px){ .buy-side{border-left:0;border-top:1px solid var(--line);} }
.order-card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:18px;margin-bottom:16px;}
.order-card .t{font-size:15px;font-weight:700;line-height:1.35;margin-bottom:12px;}
.order-card .row{display:flex;justify-content:space-between;font-size:14px;color:#3E4F5C;margin-bottom:8px;}
.order-card .row.dim{color:#8B99A4;margin-bottom:14px;}
.order-card .total{
  border-top:1px solid var(--surface-alt);padding-top:14px;
  display:flex;justify-content:space-between;align-items:baseline;
}
.order-card .total .amount{font-family:var(--font-display);font-size:26px;font-weight:600;}
.order-card .vat{font-size:12px;color:#8B99A4;margin-top:6px;}
.buy-side .free-note{font-size:13px;color:var(--ink-soft);line-height:1.6;margin-bottom:20px;}
.buy-side .cta-stack{margin-top:auto;display:flex;flex-direction:column;gap:10px;}

.field{margin-bottom:16px;}
.field label{
  display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:#8B99A4;margin-bottom:7px;
}
.field input,.field select{
  width:100%;font-size:15px;font-family:inherit;color:var(--ink);
  padding:13px 14px;background:var(--surface);border:1px solid var(--line);border-radius:8px;
}
.field select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-soft) 50%),linear-gradient(135deg,var(--ink-soft) 50%,transparent 50%);background-position:calc(100% - 20px) 22px,calc(100% - 15px) 22px;background-size:5px 5px;background-repeat:no-repeat;}
.field input:focus,.field select:focus{outline:2px solid var(--teal);outline-offset:1px;border-color:var(--teal);}
.field input[readonly]{background:var(--surface-alt);}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media (max-width:640px){ .field-grid{grid-template-columns:1fr;} }
.invoice-block{background:#F8FAFB;border:1px solid var(--line);border-radius:10px;padding:18px 20px;margin-bottom:18px;}
.invoice-block .head{display:flex;align-items:center;justify-content:space-between;gap:18px;}
.invoice-block .t{font-size:15px;font-weight:700;}
.invoice-block .m{font-size:13.5px;color:var(--ink-soft);margin-top:3px;}
.toggle{width:44px;height:24px;border-radius:999px;border:0;background:var(--line);position:relative;cursor:pointer;flex:none;padding:0;}
.toggle .knob{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .18s;box-shadow:0 1px 2px rgba(0,0,0,.2);}
.toggle.on{background:var(--teal);}
.toggle.on .knob{left:22px;}
.invoice-fields{display:none;margin-top:18px;}
.invoice-fields.show{display:grid;grid-template-columns:1fr 1fr;gap:14px;animation:riseIn .25s ease;}
.invoice-fields .span-2{grid-column:1 / -1;}
@media (max-width:640px){ .invoice-fields.show{grid-template-columns:1fr;} .invoice-fields .span-2{grid-column:auto;} }

.stripe-note{
  display:flex;gap:11px;align-items:flex-start;font-size:13px;color:#8B99A4;line-height:1.6;margin-top:8px;
}

/* auth pages (shared minimal chrome, restyled to brand) */
.auth-wrap{max-width:420px;margin:64px auto;padding:0 20px;}
.auth-brand{margin-bottom:28px;}
.auth-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:32px;}
.auth-card h1{font-size:22px;margin:0 0 18px;}
.auth-card label{display:block;font-size:13px;font-weight:600;margin:16px 0 6px;color:var(--ink);}
.auth-card input{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:6px;font-size:15px;font-family:inherit;}
.auth-card input:focus{outline:2px solid var(--teal);outline-offset:1px;border-color:var(--teal);}
.auth-card button[type="submit"]{margin-top:22px;width:100%;padding:12px;border:none;border-radius:6px;background:var(--teal-deep);color:#fff;font-size:15px;font-weight:600;cursor:pointer;}
.auth-card button[type="submit"]:hover{background:var(--teal);color:var(--deep-ink);}
.auth-card .error{color:#B4232E;font-size:14px;margin-top:14px;}
.auth-card .foot{margin-top:18px;font-size:13.5px;color:var(--ink-soft);}
.auth-card p.lead{color:var(--ink-soft);font-size:14.5px;}

/* onboarding chips (register step 1) */
.onb-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;}
/* width:auto is load-bearing. `.auth-card input{width:100%}` above is the
   same specificity (0,1,1) and comes first, so without this the visually
   hidden radio inherits 100% — which, being position:absolute, resolves
   against the VIEWPORT. Nine of them made /learn/register.php 854px wide in
   a 500px viewport and the whole page scrolled sideways at every width.
   Same class of specificity collision as the main site's nav bug. */
.onb-chip input{position:absolute;opacity:0;pointer-events:none;width:auto;}
.onb-chip span{
  display:inline-block;padding:9px 14px;border:1px solid var(--line);border-radius:999px;
  font-size:13.5px;color:var(--ink);cursor:pointer;background:var(--surface);
}
.onb-chip span:hover{border-color:var(--teal-deep);}
.onb-chip input:checked + span{background:var(--teal-wash);border-color:var(--teal);color:var(--teal-deep);font-weight:600;}
.onb-chip input:focus-visible + span{outline:2px solid var(--teal);outline-offset:1px;}

/* The role/goal onboarding step (register.php step 1) packs in two full
   chip grids — the 420px login-form width squeezes every chip onto its
   own line even on desktop. Widen only while that step is the visible
   one; login/forgot/reset and register step 2 (3 plain fields) stay at
   the narrower width, which suits them better. */
.auth-wrap:has(#reg-step-1:not([hidden])){max-width:640px;}
.auth-wrap:has(#reg-step-1:not([hidden])) .onb-chips{gap:10px;}

/* footer */
.app-footer{border-top:1px solid var(--line);padding:22px 0 30px;margin-top:20px;}
.app-footer .row{display:flex;justify-content:space-between;gap:16px;font-size:13px;color:var(--ink-soft);flex-wrap:wrap;}
.app-footer a{color:var(--ink-soft);}
.app-footer a:hover{color:var(--teal-deep);}

/* progress ring svg helper */
.ring-track{stroke:var(--surface-alt);}
.ring-fill{stroke:var(--teal);}
.ring-label{font-family:var(--font-display);font-weight:600;fill:var(--ink);}
.on-dark .ring-track{stroke:rgba(255,255,255,.18);}
.on-dark .ring-label{fill:#fff;}

/* ---------- public /learn/ landing (logged out) ---------- */
.lp-hero{padding:52px 0 40px;max-width:760px;}
.lp-hero h1{font-size:42px;line-height:1.1;margin:14px 0 16px;}
.lp-lead{font-size:17px;line-height:1.65;color:var(--ink-soft);}
.lp-facts{display:flex;flex-wrap:wrap;gap:26px;margin:26px 0 24px;}
.lp-facts span{font-size:13.5px;color:var(--ink-soft);}
.lp-facts strong{display:block;font-family:var(--font-display);font-size:24px;font-weight:600;color:var(--ink);}
.lp-cta{display:flex;gap:12px;flex-wrap:wrap;}
.lp-note{font-size:13px;color:#8B99A4;margin-top:14px;}

.lp-band{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:14px 0 48px;}
.lp-band-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:22px;}
.lp-band-item h4{font-size:16px;font-weight:700;margin:0 0 8px;font-family:var(--font-body);}
.lp-band-item p{font-size:14.5px;line-height:1.65;}
@media (max-width:900px){ .lp-band{grid-template-columns:1fr;} }

.lp-section{margin-bottom:48px;}
.lp-chapters{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media (max-width:820px){ .lp-chapters{grid-template-columns:1fr;} }
.lp-ch{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:18px 20px;}
.lp-ch-head{display:flex;align-items:baseline;gap:11px;}
.lp-ch-head h3{font-size:16px;font-family:var(--font-body);font-weight:700;flex:1;min-width:0;line-height:1.35;}
.lp-ch-num{font-family:var(--font-mono);font-size:11px;color:#9AA6B0;flex:none;}
.lp-ch-free{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  background:var(--teal-wash);color:var(--teal-deep);border-radius:4px;padding:4px 7px;flex:none;font-weight:600;}
.lp-ch-n{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:#9AA6B0;flex:none;}
.lp-ch-teaser{font-size:13.5px;line-height:1.6;margin-top:9px;color:var(--ink-soft);}

.lp-split{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:48px;align-items:start;}
@media (max-width:900px){ .lp-split{grid-template-columns:1fr;} }
.lp-price{background:var(--deep);color:#fff;border-radius:var(--radius-lg);padding:28px 30px;}
.lp-price .eyebrow{color:var(--on-deep-mono);}
.lp-amount{font-family:var(--font-display);font-size:44px;font-weight:600;margin:10px 0 6px;}
.lp-price-sub{font-size:13.5px;color:var(--on-deep);line-height:1.6;margin-bottom:18px;}
.lp-price .tick-list li{color:var(--on-deep);}
.lp-price .lp-note{color:var(--on-deep-mono);}
.lp-tpl{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px 30px;}
.lp-tpl h3{font-size:22px;margin:10px 0 10px;}
.lp-tpl-list{list-style:none;padding:0;margin:14px 0 0;}
.lp-tpl-list li{font-size:14px;padding:9px 0;border-bottom:1px solid var(--surface-alt);color:var(--ink);}
.lp-tpl-list li:last-child{border-bottom:0;}
.lp-fmt{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.06em;color:#9AA6B0;margin-left:6px;}

.lp-foot-cta{text-align:center;padding:44px 0 60px;border-top:1px solid var(--line);}
.lp-foot-cta h3{font-size:26px;margin-bottom:8px;}
.lp-foot-cta p{font-size:15px;margin-bottom:20px;}

/* ---------- admin dashboard ---------- */
.ad-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px;flex-wrap:wrap;}
.ad-head h1{font-size:32px;margin-top:8px;}
.ad-tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:30px;}
@media (max-width:1000px){ .ad-tiles{grid-template-columns:repeat(3,1fr);} }
@media (max-width:620px){ .ad-tiles{grid-template-columns:repeat(2,1fr);} }
.ad-tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:16px 14px;}
.ad-n{font-family:var(--font-display);font-size:28px;font-weight:600;line-height:1;}
.ad-l{font-size:12.5px;font-weight:600;color:var(--ink);margin-top:7px;}
.ad-s{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;color:#8B99A4;margin-top:4px;}

.ad-sec{margin-bottom:32px;}
.ad-two{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
@media (max-width:1000px){ .ad-two{grid-template-columns:1fr;} }

.ad-table-wrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);overflow-x:auto;}
.ad-table{width:100%;border-collapse:collapse;font-size:13.5px;}
.ad-table th{
  text-align:left;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:#8B99A4;font-weight:500;padding:11px 14px;border-bottom:1px solid var(--line);white-space:nowrap;
}
.ad-table td{padding:12px 14px;border-bottom:1px solid var(--surface-alt);vertical-align:top;color:var(--ink);}
.ad-table tr:last-child td{border-bottom:0;}
.ad-table tr.ad-done td{opacity:.45;}
.ad-msg{max-width:420px;}
.ad-num{font-family:var(--font-mono);font-size:12px;}
.ad-sub{font-size:11.5px;color:#8B99A4;margin-top:3px;}
.ad-muted{color:#98A5AE;}
.ad-empty{color:#8B99A4;font-style:italic;}
.ad-where{display:block;font-family:var(--font-mono);font-size:10px;color:#98A5AE;margin-top:3px;}
.ad-ok{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--teal-deep);background:var(--teal-wash);border-radius:4px;padding:2px 6px;}
.ad-warn{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--premium-deep);background:var(--premium-wash);border-radius:4px;padding:2px 6px;}
.ad-tag{display:inline-block;font-size:11.5px;background:var(--surface-alt);border-radius:4px;padding:3px 7px;margin:0 4px 4px 0;}
.ad-tag-goal{background:var(--teal-wash);color:var(--teal-deep);}
.ad-sev{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;border-radius:4px;padding:3px 7px;white-space:nowrap;}
.ad-sev-php{background:#FDE8E8;color:#A32B2B;}
.ad-sev-js{background:#E8EEFD;color:#2B49A3;}
.ad-ga{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:22px;}
.ad-ga p{font-size:14.5px;margin-bottom:16px;max-width:70ch;}
.ad-acts{white-space:nowrap;}
.ad-act{display:inline-block;margin:0 4px 4px 0;}
.ad-act button{
  font-family:var(--font-body);font-size:11.5px;font-weight:600;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:5px;
  padding:5px 9px;color:var(--ink);
}
.ad-act button:hover{border-color:var(--teal-deep);color:var(--teal-deep);}
.ad-code{font-family:var(--font-mono);font-size:12.5px;font-weight:600;color:var(--teal-deep);white-space:nowrap;}
.ad-mint{display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:14px 16px;}
.ad-mint input{padding:9px 11px;border:1px solid var(--line);border-radius:6px;font-family:inherit;font-size:14px;}
.ad-mint input[name=label]{flex:1;min-width:220px;}
.ad-mint input[name=days]{width:90px;}
.ad-spark{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:16px 18px 10px;margin-top:12px;}
.ad-spark svg{width:100%;height:90px;display:block;}
.ad-spark-ax{display:flex;justify-content:space-between;font-family:var(--font-mono);
  font-size:9.5px;letter-spacing:.06em;color:#8B99A4;margin-top:6px;}
.ad-narrative{background:var(--teal-wash);border:1px solid var(--teal);border-radius:var(--radius-md);
  padding:18px 20px;margin-top:12px;}
.ad-narrative p{font-size:14.5px;line-height:1.7;color:var(--teal-deep);margin-top:8px;}