/* ==========================================================================
   ASTRA360AI — design system. Manrope throughout.
   Warm paper canvas, near-black ink, dark instrument panels, signal orange.

   CONTRAST RULES (measured, not assumed)
   White on #FF5A1F is 3.12:1 and FAILS AA. Near-black on #FF5A1F is 6.35:1.
   So orange buttons carry INK text, never white.
   On light surfaces orange is a FILL ONLY; orange text uses #C2410C (4.82:1).
   On dark panels #FF5A1F reaches 6.28:1 and is used freely.
   ========================================================================== */
:root{
  --ink:#0a0a0a; --paper:#f7f7f4; --white:#fff;
  --panel:#0b0c0d; --panel-2:#111314; --panel-3:#151718; --panel-line:#292b2d;
  --muted:#5f6469; --muted-2:#4d5257; --faint:#8a8e92;
  --line:#dedfdb; --line-2:#e7e8e5;
  --orange:#ff5a1f; --orange-ink:#c2410c; --orange-soft:rgba(255,90,31,.12);
  --green:#16805a; --green-lite:#73d4aa; --red:#c94a3b; --red-ink:#a8341f;
  --shadow:0 18px 60px rgba(10,10,10,.10); --shadow-lg:0 35px 100px rgba(10,10,10,.22);
  --radius:24px; --radius-sm:18px; --radius-lg:32px; --pill:999px; --max:1240px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:Manrope,system-ui,-apple-system,sans-serif;font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;letter-spacing:-.055em;line-height:1.02;font-weight:800}
p{margin:0}
img,svg{max-width:100%}
:focus-visible{outline:2px solid var(--orange-ink);outline-offset:3px;border-radius:4px}
@media(prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1!important;transform:none!important}
}
.container{max-width:var(--max);margin:auto;padding:0 28px}
.mono{font-variant-numeric:tabular-nums}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.eyebrow{display:inline-flex;gap:8px;align-items:center;font-size:11px;font-weight:800;
  text-transform:uppercase;letter-spacing:.12em;color:var(--muted-2)}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--orange);
  box-shadow:0 0 0 5px var(--orange-soft);flex:none}
.eyebrow.on-dark{color:#b6b9bc}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid var(--ink);background:var(--ink);color:#fff;border-radius:var(--pill);
  padding:13px 20px;font-size:13px;font-weight:800;cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(10,10,10,.18)}
.btn:active{transform:none}
.btn.light{background:#fff;color:var(--ink);border-color:#d6d7d3}
.btn.light:hover{border-color:var(--ink)}
.btn.orange{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.btn.orange:hover{background:#ff6b36}
.btn.ghost-dark{background:transparent;border-color:#3a3c3e;color:#fff}
.btn.ghost-dark:hover{border-color:#fff}
.btn.sm{padding:9px 15px;font-size:12px}
.btn.block{width:100%}

.nav{position:sticky;top:0;z-index:60;background:rgba(247,247,244,.9);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(10,10,10,.08)}
.navin{height:74px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{font-weight:800;letter-spacing:-.055em;font-size:20px;flex:none}
.brand span{color:var(--orange-ink)}
.navlinks{display:flex;gap:4px;align-items:center}
.navgroup{position:relative}
.navtop{background:none;border:0;padding:9px 12px;border-radius:var(--pill);
  font-size:13px;font-weight:700;color:#33373b;cursor:pointer}
.navtop:hover,.navgroup:hover .navtop,.navtop[aria-expanded=true]{background:rgba(10,10,10,.06);color:var(--ink)}
.navpanel{position:absolute;top:calc(100% + 8px);left:0;min-width:230px;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow);padding:8px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s,transform .16s,visibility .16s;z-index:70}
.navgroup:hover .navpanel,.navgroup:focus-within .navpanel{opacity:1;visibility:visible;transform:none}
.navpanel ul{list-style:none;margin:0;padding:0}
.navpanel a,.soon-item{display:flex;justify-content:space-between;align-items:center;
  padding:9px 12px;border-radius:12px;font-size:13px;font-weight:600}
.navpanel a:hover{background:var(--orange-soft);color:var(--orange-ink)}
.soon-item{color:var(--faint)}
.soon-item em{font-style:normal;font-size:9px;text-transform:uppercase;letter-spacing:.1em}
.navright{display:flex;align-items:center;gap:9px;flex:none}
@media(max-width:1080px){.navlinks{display:none}}
@media(max-width:560px){.navright .light{display:none}}

.hero{padding:52px 0 40px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;width:720px;height:720px;border-radius:50%;
  right:-350px;top:-300px;background:radial-gradient(circle,rgba(255,90,31,.13),transparent 68%);
  pointer-events:none}
.heroGrid{display:grid;grid-template-columns:1.02fr .98fr;gap:54px;align-items:center;position:relative}
.hero h1{font-size:clamp(48px,6.4vw,88px);line-height:.94;letter-spacing:-.075em;margin:18px 0 24px;max-width:14ch}
.hero h1 em{font-style:normal;color:var(--orange-ink)}
.lead{font-size:16.5px;line-height:1.6;color:var(--muted);max-width:54ch}
.heroCtas{display:flex;gap:10px;flex-wrap:wrap;margin:28px 0 20px}
.micro{font-size:11.5px;color:var(--muted);line-height:1.6}

.console{background:var(--panel);color:#fff;border-radius:30px;padding:18px;
  box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.console::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,90,31,.10),transparent 38%,rgba(255,255,255,.03))}
.consoleTop{display:flex;justify-content:space-between;align-items:center;gap:12px;
  border-bottom:1px solid var(--panel-line);padding:5px 4px 15px;position:relative}
.consoleTitle{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:#a7aaad;font-weight:800}
.live{font-size:10px;color:var(--green-lite);display:flex;gap:6px;align-items:center;font-weight:700}
.live i{width:6px;height:6px;border-radius:50%;background:#4fd095;flex:none}
.consoleMain{padding:20px 4px;position:relative}
.scoreRow{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.bigscore{font-size:76px;font-weight:800;letter-spacing:-.08em;line-height:.88}
.bigscore.pos{color:var(--green-lite)} .bigscore.neg{color:#ff8a6b}
.scorelabel{font-size:11px;color:#9da0a3;text-transform:uppercase;letter-spacing:.1em;font-weight:800}
.delta{color:var(--green-lite);font-size:12px;font-weight:800;text-align:right}
.metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:20px}
.metric{border:1px solid var(--panel-line);background:var(--panel-2);border-radius:16px;padding:13px}
.metric small{display:block;color:#9a9da0;font-size:10px;text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.metric strong{display:block;font-size:22px;letter-spacing:-.045em;margin-top:5px}
.metric b{font-size:10px;color:var(--green-lite);letter-spacing:.06em}
.metric b.warn{color:#ffab8f}
.next{margin-top:10px;border:1px solid #303234;background:var(--panel-3);border-radius:17px;padding:15px}
.nextHead{display:flex;justify-content:space-between;gap:10px;color:#9a9da0;font-size:10px;
  text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.next h3{font-size:18px;margin:8px 0 4px;letter-spacing:-.045em}
.next p{color:#aeb1b4;font-size:11.5px;line-height:1.55}
.consoleFoot{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.pill{border:1px solid #303234;background:#101112;border-radius:var(--pill);
  padding:7px 11px;color:#b9bbbe;font-size:10px;font-weight:700}

.signal{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:14px 0;background:#fff;overflow:hidden}
.signalIn{display:flex;justify-content:space-between;gap:24px;align-items:center}
.signalText{font-size:11px;color:var(--muted);font-weight:800;white-space:nowrap;
  text-transform:uppercase;letter-spacing:.1em}
.ticker{display:flex;gap:28px;white-space:nowrap;font-size:11px;font-weight:800;overflow:hidden}
.ticker span{color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.ticker span.hot{color:var(--orange-ink)}
@media(max-width:760px){.signalText{display:none}}

.section{padding:100px 0}
.section.tight{padding-top:20px}
.sectionHead{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:42px}
.sectionHead h2{font-size:clamp(34px,4.8vw,58px);line-height:.99;letter-spacing:-.065em;margin:12px 0 0;max-width:19ch}
.sectionHead p{max-width:40ch;color:var(--muted);line-height:1.62;font-size:14px}
@media(max-width:760px){.sectionHead{display:block}.sectionHead p{margin-top:18px}}

.three{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;
  min-height:240px;position:relative;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease}
a.card:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.card .num{font-size:11px;color:var(--muted);font-weight:800;letter-spacing:.06em}
.card h3{font-size:25px;letter-spacing:-.05em;margin:54px 0 8px}
.card p{color:var(--muted);font-size:13px;line-height:1.62}
.card .arrow{position:absolute;right:22px;top:22px;font-size:20px;color:var(--muted)}
a.card:hover .arrow{color:var(--orange-ink)}
.card.accent{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.card.accent p{color:rgba(10,10,10,.72)}
.card.accent .num,.card.accent .arrow{color:rgba(10,10,10,.62)}

.split{display:grid;grid-template-columns:.85fr 1.15fr;gap:16px}
.dark{background:var(--panel);color:#fff;border-radius:var(--radius-lg);padding:34px;overflow:hidden}
.dark h3{font-size:32px;letter-spacing:-.06em;margin:10px 0 12px}
.dark .muted{color:#a2a5a8;font-size:13.5px;line-height:1.62}
.dna{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:26px}
.dnaItem{border:1px solid var(--panel-line);border-radius:16px;padding:14px;background:var(--panel-2)}
.dnaItem small{color:#9a9da0;font-size:10px;text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.dnaItem strong{font-size:24px;display:block;margin-top:5px;letter-spacing:-.05em}
.dnaItem .tagline{font-size:10px;color:#8d9093}

.bars{display:grid;gap:14px;margin-top:26px}
.barLine{display:grid;grid-template-columns:132px 1fr 42px;gap:12px;align-items:center;font-size:12px;font-weight:700}
.bar{height:8px;background:var(--line-2);border-radius:var(--pill);overflow:hidden}
.bar i{display:block;height:100%;background:var(--orange);border-radius:var(--pill)}
.bar i.dark{background:var(--ink)}
.bar i.good{background:var(--green)}
.barLine b{text-align:right;color:var(--muted-2)}

.mapWrap{background:#101112;border-radius:var(--radius-lg);padding:28px;color:#fff;overflow:hidden}
.mapHeader{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.mapHeader h3{font-size:26px;letter-spacing:-.05em}
.map{height:430px;position:relative;margin-top:16px;border-radius:22px;border:1px solid #27292b;overflow:hidden;
  background:radial-gradient(circle at 46% 50%,rgba(255,90,31,.14),transparent 22%),
  linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:auto,42px 42px,42px 42px}
.node{position:absolute;background:#181a1b;border:1px solid #343638;border-radius:14px;
  padding:12px 14px;min-width:126px;box-shadow:0 10px 30px rgba(0,0,0,.24)}
.node small{display:block;color:#9a9da0;font-size:9px;text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.node strong{display:block;font-size:13px;margin-top:4px;letter-spacing:-.03em}
.node em{display:block;font-style:normal;color:var(--green-lite);font-size:10px;margin-top:4px;font-weight:700}
.node.current{border-color:var(--orange)}
.node.current em{color:#ffab8f}
svg.lines{position:absolute;inset:0;width:100%;height:100%}
.lines line{stroke:#4c4e50;stroke-width:1.2;stroke-dasharray:5 7}
.lines line.hot{stroke:var(--orange);stroke-width:2;stroke-dasharray:none}

.market{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.marketBox{background:#fff;border:1px solid var(--line);border-radius:26px;padding:28px}
.marketBox h3{font-size:23px;letter-spacing:-.05em;margin:10px 0 20px}
.country{display:grid;grid-template-columns:100px 1fr 46px;gap:12px;align-items:center;margin:13px 0;font-size:12px;font-weight:700}
.country .bar{height:7px}
.country b{text-align:right;color:var(--muted-2)}
.skill{display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--line-2);font-size:13px;font-weight:700}
.skill:last-of-type{border-bottom:0}
.skill b{color:var(--green)}

.path{background:#fff;border:1px solid var(--line);border-radius:28px;padding:30px}
.pathGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.future{border:1px solid var(--line);border-radius:20px;padding:20px;background:#fafaf8}
.future .tag{font-size:10px;text-transform:uppercase;letter-spacing:.1em;font-weight:800;color:var(--muted)}
.future h4{font-size:19px;letter-spacing:-.045em;margin:16px 0 8px}
.future strong{font-size:26px;letter-spacing:-.05em;display:block;margin-bottom:8px}
.future p{font-size:12.5px;line-height:1.6;color:var(--muted)}
.future.risk{border-top:3px solid var(--red)} .future.risk strong{color:var(--red-ink)}
.future.good{border-top:3px solid var(--green)} .future.good strong{color:var(--green)}
.future.switch{border-top:3px solid var(--orange)} .future.switch strong{color:var(--orange-ink)}

.calc{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.calcCard{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:19px;
  min-height:150px;display:flex;flex-direction:column;transition:transform .2s ease,border-color .2s ease}
.calcCard:hover{border-color:#a9aaa6;transform:translateY(-2px)}
.calcCard small{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.08em;font-weight:800}
.calcCard h4{font-size:17px;letter-spacing:-.04em;margin:auto 0 5px}
.calcCard p{font-size:11.5px;color:var(--muted)}
.calcCard.soon{opacity:.55}

.cta{background:var(--panel);color:#fff;border-radius:34px;padding:58px 50px;
  display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center;position:relative;overflow:hidden}
.cta::after{content:"";position:absolute;width:460px;height:460px;border-radius:50%;right:-180px;top:-220px;
  background:radial-gradient(circle,rgba(255,90,31,.24),transparent 65%);pointer-events:none}
.cta h2{font-size:clamp(38px,4.8vw,64px);line-height:.99;letter-spacing:-.07em;margin:12px 0 18px;position:relative}
.cta p{color:#a9acaf;max-width:52ch;line-height:1.62;position:relative}
.ctaBtns{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px;position:relative}
.formCard{position:relative;z-index:2;background:var(--panel-3);border:1px solid #303234;border-radius:22px;padding:20px}
.formCard label{display:block;color:#9a9da0;font-size:10px;text-transform:uppercase;letter-spacing:.1em;font-weight:800;margin-bottom:8px}
.formCard select{width:100%;border:1px solid #353739;background:#0d0e0f;color:#fff;border-radius:13px;
  padding:13px 14px;outline:none;appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,#888 50%),linear-gradient(135deg,#888 50%,transparent 50%);
  background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.formCard select:focus{border-color:var(--orange)}
.formCard .btn{margin-top:10px}
.formResult{font-size:11.5px;color:#a2a5a8;line-height:1.55;margin-top:14px;padding-top:14px;border-top:1px solid #2a2c2e}
.formResult strong{color:#fff}
.formResult .fr-num{color:var(--orange);font-weight:800}

.disclose{margin-top:20px;padding-top:14px;border-top:1px dashed rgba(10,10,10,.16);
  font-size:11.5px;color:var(--muted);line-height:1.6;max-width:76ch}
.disclose a{color:var(--orange-ink);font-weight:700}
.dark .disclose,.mapWrap .disclose{border-top-color:#2a2c2e;color:#96999c}
.dark .disclose a,.mapWrap .disclose a{color:var(--orange)}

.footer{padding:46px 0 60px;border-top:1px solid var(--line);margin-top:20px}
.footerIn{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:34px}
.footer h4{font-size:10px;text-transform:uppercase;letter-spacing:.11em;color:var(--muted);margin-bottom:12px;font-weight:800}
.footer ul{list-style:none;margin:0;padding:0}
.footer li{margin-bottom:8px;font-size:12.5px;color:var(--muted);font-weight:600}
.footer li a:hover{color:var(--orange-ink)}
.footNote{margin-top:36px;padding-top:22px;border-top:1px solid var(--line);
  font-size:11.5px;color:var(--muted);line-height:1.65;max-width:82ch}
.footNote strong{color:var(--ink)}
.footNote a{color:var(--orange-ink);font-weight:700}
@media(max-width:820px){.footerIn{grid-template-columns:1fr 1fr}}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal.on{opacity:1;transform:none}

/* ===== application surfaces ===== */
.pagehead{padding:56px 0 34px}
.pagehead h1{font-size:clamp(36px,4.6vw,58px);letter-spacing:-.065em;max-width:17ch}
.pagehead .lede{margin-top:18px;max-width:56ch;color:var(--muted);font-size:17px;line-height:1.6}
.crumb{padding-top:26px;font-size:12px;color:var(--muted);font-weight:700}
.crumb a:hover{color:var(--orange-ink)}
.meta-strip{display:flex;flex-wrap:wrap;gap:20px;margin-top:22px;font-size:11.5px;color:var(--muted);font-weight:700}
.meta-strip b{color:var(--ink)}
.meta-strip a{color:var(--orange-ink)}
.split-app{display:grid;grid-template-columns:minmax(0,350px) minmax(0,1fr);gap:36px;padding:10px 0 70px;align-items:start}
@media(max-width:940px){.split-app{grid-template-columns:1fr;gap:24px}}
.panel{position:sticky;top:92px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px}
@media(max-width:940px){.panel{position:static}}

.field{margin-bottom:20px}
.field:last-child{margin-bottom:0}
.field>label{display:block;font-weight:700;margin-bottom:7px;font-size:13.5px}
.field .help{font-size:11.5px;color:var(--muted);margin-bottom:10px;line-height:1.55}
select,input[type=number],input[type=text]{width:100%;padding:11px 13px;background:#fff;
  border:1px solid #d6d7d3;border-radius:12px;outline:none;font-size:14px}
select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
select:hover,input:hover{border-color:#a9aaa6}
select:focus,input:focus{border-color:var(--ink)}
.slider-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;gap:10px}
.slider-val{font-weight:800;font-size:15px;color:var(--orange-ink);font-variant-numeric:tabular-nums}
input[type=range]{width:100%;appearance:none;background:transparent;cursor:pointer;margin:10px 0 4px}
input[type=range]::-webkit-slider-runnable-track{height:6px;background:var(--line-2);border-radius:99px}
input[type=range]::-moz-range-track{height:6px;background:var(--line-2);border-radius:99px}
input[type=range]::-webkit-slider-thumb{appearance:none;width:18px;height:18px;border-radius:50%;
  background:var(--orange);border:3px solid #fff;box-shadow:0 2px 8px rgba(10,10,10,.28);margin-top:-6px}
input[type=range]::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:var(--orange);
  border:3px solid #fff;box-shadow:0 2px 8px rgba(10,10,10,.28)}
.slider-ends{display:flex;justify-content:space-between;font-size:10px;color:var(--faint);
  text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{padding:8px 13px;border:1px solid #d6d7d3;border-radius:var(--pill);background:#fff;
  font-size:12.5px;font-weight:700;cursor:pointer;transition:.15s}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed=true]{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.subgroup{border-left:2px solid var(--line);padding-left:18px;margin:22px 0}

.result{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.result-head{padding:30px;border-bottom:1px solid var(--line)}
.headline{display:flex;align-items:flex-end;gap:24px;flex-wrap:wrap}
.figure{font-size:clamp(58px,8vw,86px);font-weight:800;letter-spacing:-.075em;line-height:.86;font-variant-numeric:tabular-nums}
.figure.t-positive{color:var(--green)} .figure.t-negative{color:var(--red-ink)}
.headline-side{padding-bottom:8px}
.hl-label{color:var(--muted);max-width:30ch;font-size:13.5px}
.band{display:inline-block;font-size:10px;text-transform:uppercase;letter-spacing:.11em;
  padding:6px 11px;border-radius:var(--pill);margin-bottom:8px;font-weight:800}
.band.t-positive{background:rgba(22,128,90,.12);color:var(--green)}
.band.t-neutral{background:var(--orange-soft);color:var(--orange-ink)}
.band.t-negative{background:rgba(201,74,59,.12);color:var(--red-ink)}
.secondary{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:10px;margin-top:26px}
.sec-tile{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:15px}
.sec-tile .v{font-size:21px;font-weight:800;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.sec-tile .v.t-positive{color:var(--green)} .sec-tile .v.t-negative{color:var(--red-ink)}
.sec-tile .k{font-size:11px;color:var(--muted);margin-top:3px;font-weight:600}
.confidence{margin-top:26px;padding-top:18px;border-top:1px solid var(--line)}
.conf-row{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);font-weight:700}
.conf-track{height:6px;background:var(--line-2);border-radius:99px;margin-top:8px;overflow:hidden}
.conf-fill{height:100%;background:var(--ink);border-radius:99px}
.conf-hint{margin-top:9px;font-size:11.5px;color:var(--muted)}

.axis{padding:30px}
.axis-legend{display:flex;gap:22px;margin-bottom:20px;font-size:10px;text-transform:uppercase;
  letter-spacing:.1em;font-weight:800;flex-wrap:wrap}
.axis-legend i{font-style:normal;display:inline-flex;align-items:center;gap:7px}
.axis-legend i::before{content:'';width:9px;height:9px;border-radius:3px}
.lg-prot{color:var(--green)} .lg-prot::before{background:var(--green)}
.lg-risk{color:var(--red-ink)} .lg-risk::before{background:var(--orange)}
.axis-rows{position:relative}
.axis-rows::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--line)}
.arow{display:grid;grid-template-columns:1fr minmax(0,auto) 1fr;align-items:center;min-height:38px;border-bottom:1px solid var(--line-2)}
.arow:last-child{border-bottom:0}
.arow-l,.arow-r{display:flex;align-items:center;height:20px}
.arow-l{justify-content:flex-end}
.bar-seg{height:100%;min-width:3px;border-radius:99px 0 0 99px}
.bar-seg.r{border-radius:0 99px 99px 0}
.bar-seg.prot{background:var(--green)}
.bar-seg.risk{background:var(--orange)}
.bar-seg.risk.dominant{background:var(--red)}
.arow-label{font-size:12px;background:var(--white);padding:0 12px;white-space:nowrap;text-align:center;font-weight:600}
.arow-val{font-size:10px;color:var(--muted);padding:0 8px;font-weight:700;font-variant-numeric:tabular-nums}
@media(max-width:620px){
  .arow{grid-template-columns:1fr;min-height:auto;padding:10px 0}
  .arow-l{justify-content:flex-start}
  .arow-label{text-align:left;padding:0 0 5px}
  .axis-rows::before{display:none}
}

.ledger{border-top:1px solid var(--line)}
.lrow{border-bottom:1px solid var(--line-2)}
.lrow:last-child{border-bottom:0}
.lrow summary{display:flex;align-items:center;gap:13px;padding:16px 30px;cursor:pointer;list-style:none}
.lrow summary::-webkit-details-marker{display:none}
.lrow summary:hover{background:var(--paper)}
.l-dir{width:4px;height:24px;border-radius:99px;flex:none}
.l-dir.prot{background:var(--green)} .l-dir.risk{background:var(--orange)}
.l-name{flex:1;font-weight:700;font-size:13.5px}
.l-weight{font-size:11px;color:var(--faint);font-weight:700}
.l-raw{font-size:15px;min-width:52px;text-align:right;font-weight:800;font-variant-numeric:tabular-nums}
.l-raw.prot{color:var(--green)}
.l-caret{color:var(--faint);font-size:11px;transition:transform .15s}
.lrow[open] .l-caret{transform:rotate(90deg)}
.l-body{padding:0 30px 22px 47px;color:var(--muted);max-width:66ch;font-size:13.5px;line-height:1.62}
.l-src{margin-top:12px;font-size:10px;text-transform:uppercase;letter-spacing:.09em;color:var(--faint);font-weight:700}

.moves{padding:30px;border-top:1px solid var(--line);background:var(--paper)}
.move{display:grid;grid-template-columns:1fr auto;gap:20px;padding:18px 0;border-bottom:1px solid var(--line)}
.move:last-of-type{border-bottom:0}
.move h3{font-size:17px;letter-spacing:-.04em}
.move p{color:var(--muted);margin-top:7px;max-width:60ch;font-size:13px;line-height:1.6}
.move-delta{font-size:22px;font-weight:800;color:var(--green);text-align:right;white-space:nowrap;letter-spacing:-.045em}
.move-diff{font-size:10px;color:var(--faint);text-transform:uppercase;letter-spacing:.09em;text-align:right;margin-top:3px;font-weight:700}
.caveats{padding:24px 30px;border-top:1px solid var(--line)}
.caveats ul{margin:0;padding:0}
.caveats li{font-size:12px;color:var(--muted);margin-bottom:9px;padding-left:18px;position:relative;list-style:none;line-height:1.6}
.caveats li::before{content:'—';position:absolute;left:0;color:var(--faint)}

.suppressed{padding:70px 30px;text-align:center}
.suppressed .mark{font-size:76px;color:var(--line);line-height:1;font-weight:800}
.suppressed h2{font-size:24px;margin-top:16px;letter-spacing:-.05em}
.suppressed p{margin-top:12px;color:var(--muted);max-width:44ch;margin-left:auto;margin-right:auto}
.needs{display:inline-flex;flex-direction:column;gap:9px;margin-top:26px;text-align:left}
.need{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:13.5px;font-weight:600}
.need i{font-style:normal;width:16px;height:16px;border:1px solid #d6d7d3;border-radius:50%;flex:none}
.need.done{color:var(--ink)} .need.done i{background:var(--green);border-color:var(--green)}

.faq{padding:50px 0 20px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line-2)}
.faq summary{padding:18px 0;cursor:pointer;font-weight:700;font-size:16px;list-style:none;display:flex;gap:14px;align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:'+';color:var(--orange-ink);font-weight:800;flex:none}
.faq details[open] summary::before{content:'–'}
.faq .a{padding:0 0 20px 28px;color:var(--muted);max-width:72ch;line-height:1.65}

.prose{padding:20px 0 60px;max-width:74ch}
.prose h2{font-size:30px;margin:44px 0 16px;letter-spacing:-.05em}
.prose h3{font-size:21px;margin:30px 0 12px;letter-spacing:-.04em}
.prose p{margin-bottom:16px;color:var(--muted);line-height:1.7}
.prose ul{color:var(--muted);padding-left:22px;margin-bottom:16px}
.prose li{margin-bottom:9px;line-height:1.65}
.prose strong{color:var(--ink);font-weight:700}
.prose a{color:var(--orange-ink);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.prose table{width:100%;border-collapse:collapse;margin-bottom:22px;font-size:13px}
.prose th,.prose td{text-align:left;padding:11px;border-bottom:1px solid var(--line-2)}
.prose th{font-size:10px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:800}

.dnagrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,330px);gap:36px;padding:10px 0 70px;align-items:start}
@media(max-width:980px){.dnagrid{grid-template-columns:1fr;gap:24px}.dnaside{order:-1}}
.dnaside{position:sticky;top:92px}
@media(max-width:980px){.dnaside{position:static}}
.dnasec{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;margin-bottom:16px}
.dnahead{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-bottom:16px;
  border-bottom:1px solid var(--line-2);margin-bottom:22px}
.dnahead h2{font-size:21px;letter-spacing:-.05em}
.dnapct{font-size:12px;color:var(--faint);font-weight:800;font-variant-numeric:tabular-nums}
.dnapct.full{color:var(--green)}
.dnafields{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:640px){.dnafields{grid-template-columns:1fr}}
.dnafields .field{margin-bottom:0}
.dnafields .field:has(.chips){grid-column:1/-1}
.dnacard{background:var(--panel);color:#fff;border-radius:var(--radius);padding:26px}
.dnascore{text-align:center;padding-bottom:20px;border-bottom:1px solid var(--panel-line)}
.dnascore .n{font-size:72px;line-height:.9;font-weight:800;letter-spacing:-.075em}
.dnascore .n.empty{color:#33363a}
.dnascore .n.t-positive{color:var(--green-lite)} .dnascore .n.t-negative{color:#ff8a6b}
.dnascore .k{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:#9a9da0;margin-top:9px;font-weight:800}
.dnahint{font-size:11.5px;color:#a2a5a8;margin-top:12px;text-align:center;line-height:1.55}
.dnabar{margin-top:22px}
.dnabar-row{display:flex;justify-content:space-between;font-size:11px;color:#9a9da0;margin-bottom:8px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.dnacard .conf-track{background:#2a2c2e}
.dnacard .conf-fill{background:var(--orange)}
.dnagaps{margin-top:22px;padding-top:18px;border-top:1px solid var(--panel-line)}
.dnagaps .k{font-size:10px;text-transform:uppercase;letter-spacing:.11em;color:#9a9da0;margin-bottom:12px;font-weight:800}
.dnagap{display:flex;justify-content:space-between;align-items:center;padding:8px 0;font-size:12.5px;border-bottom:1px solid #232527;font-weight:600}
.dnagap:last-child{border-bottom:0}
.dnagap b{color:var(--orange);font-weight:800}
.dnaacts{display:flex;flex-direction:column;gap:9px;margin-top:22px}
.dnaprivacy{font-size:10.5px;line-height:1.6;color:#83868a;margin-top:18px;padding-top:14px;border-top:1px solid var(--panel-line)}

.dashhead{padding:52px 0 26px}
.dashhead h1{font-size:clamp(34px,4.4vw,54px);letter-spacing:-.065em}
.dashhead .lede{margin-top:12px;color:var(--muted);font-size:16px}
.dashhead .lede a{color:var(--orange-ink);font-weight:700}
.statusgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:34px}
.statcell{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:20px}
.sv{font-size:30px;font-weight:800;letter-spacing:-.06em;line-height:1;font-variant-numeric:tabular-nums}
.sv.t-positive{color:var(--green)} .sv.t-negative{color:var(--red-ink)}
.sk{font-size:11.5px;color:var(--muted);margin-top:8px;font-weight:600}
.nextmove{background:var(--panel);color:#fff;border-radius:var(--radius-lg);padding:34px;margin-bottom:34px}
.nextmove h2{font-size:clamp(28px,3.6vw,42px);letter-spacing:-.06em;margin:14px 0 26px}
.whygrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.why{background:var(--panel-2);border:1px solid var(--panel-line);border-radius:16px;padding:16px}
.wv{font-size:21px;font-weight:800;color:var(--orange);letter-spacing:-.045em}
.wk{font-size:11px;color:#9a9da0;margin-top:4px;font-weight:600}
.timeline{margin-bottom:34px}
.tstep{display:grid;grid-template-columns:130px 1fr;gap:24px;padding:18px 0;border-bottom:1px solid var(--line-2)}
@media(max-width:620px){.tstep{grid-template-columns:1fr;gap:6px}}
.tk{font-size:11px;text-transform:uppercase;letter-spacing:.11em;color:var(--orange-ink);font-weight:800}
.tv{color:var(--muted);max-width:68ch;line-height:1.62}
.dashtools{margin-bottom:60px}

.wall-tools{display:flex;gap:14px;flex-wrap:wrap;align-items:center;padding:0 0 26px}
.searchbox{flex:1;min-width:240px}
.searchbox input{border-radius:var(--pill);padding:12px 18px}
.filters{display:flex;gap:7px;flex-wrap:wrap}
.fchip{padding:9px 15px;border:1px solid #d6d7d3;border-radius:var(--pill);background:#fff;font-size:12.5px;cursor:pointer;font-weight:700}
.fchip[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-bottom:50px}
.cell{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:22px;
  display:flex;flex-direction:column;gap:9px;min-height:170px;transition:transform .2s ease,border-color .2s ease}
a.cell:hover{border-color:#a9aaa6;transform:translateY(-2px)}
.cell .cat{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--orange-ink);font-weight:800}
.cell h3{font-size:19px;letter-spacing:-.045em}
.cell p{color:var(--muted);flex:1;font-size:12.5px;line-height:1.6}
.cell .go{font-size:11.5px;color:var(--muted);font-weight:700}
a.cell:hover .go{color:var(--orange-ink)}
.cell.soon{opacity:.55}
.cell.soon .cat{color:var(--faint)}

@media(max-width:960px){
  .heroGrid,.split,.cta{grid-template-columns:1fr}
  .three,.market,.pathGrid{grid-template-columns:1fr}
  .calc{grid-template-columns:repeat(2,1fr)}
  .hero{padding-top:52px}
}
@media(max-width:620px){
  .container{padding:0 18px}
  .navin{height:66px}
  .section{padding:66px 0}
  .metrics,.dna{grid-template-columns:1fr}
  .calc{grid-template-columns:1fr}
  .cta{padding:36px 24px}
  .map{height:540px}
  .panel,.dnasec{padding:20px}
  .result-head,.axis,.moves{padding:22px}
  .lrow summary{padding:15px 22px}
  .l-body{padding:0 22px 20px 39px}
}

/* ==========================================================================
   AI MENTOR
   ========================================================================== */
.mentorWrap{padding:10px 0 70px;max-width:900px}
.mentorIntro{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:34px}
.mentorIntro h2{font-size:clamp(24px,3.2vw,34px);letter-spacing:-.055em;margin:16px 0 14px;max-width:22ch}
.mentorIntro p{color:var(--muted);line-height:1.7;max-width:64ch;margin-bottom:12px}
.mentorNote{font-size:12.5px;padding-top:14px;border-top:1px solid var(--line-2)}
.mentorNote a{color:var(--orange-ink);font-weight:700}
.mentorThread{display:flex;flex-direction:column;gap:18px}
.mTurn{display:flex;flex-direction:column;gap:12px}
.mQ{align-self:flex-end;background:var(--ink);color:#fff;border-radius:20px 20px 6px 20px;
  padding:13px 19px;font-weight:600;max-width:78%;font-size:14.5px}
.mA{background:#fff;border:1px solid var(--line);border-radius:6px 20px 20px 20px;padding:26px}
.mCalc{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:18px;margin-bottom:22px}
.mCalcHead,.mAdviceHead{font-size:10px;text-transform:uppercase;letter-spacing:.12em;
  font-weight:800;margin-bottom:12px}
.mCalcHead{color:var(--orange-ink)}
.mAdviceHead{color:var(--muted)}
.mCalcRow{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:baseline;
  padding:8px 0;border-bottom:1px solid var(--line-2)}
.mCalcRow:last-child{border-bottom:0}
.mCalcRow .k{font-size:13px;color:var(--muted-2);font-weight:600}
.mCalcRow .v{font-size:17px;font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.mCalcRow .src{font-size:9.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--faint);font-weight:700}
.mAdvice p{color:var(--muted);line-height:1.72;margin-bottom:13px;max-width:66ch}
.mAdvice p:last-child{margin-bottom:0}
.mSteps{margin:22px 0 0;padding-left:22px;color:var(--muted-2)}
.mSteps li{margin-bottom:9px;line-height:1.62;font-size:14px}
.mLinks{display:flex;gap:9px;flex-wrap:wrap;margin-top:22px;padding-top:18px;border-top:1px solid var(--line-2)}
.mUnmatched{color:var(--muted);line-height:1.7}
.mentorAsk{display:flex;gap:10px;margin-top:24px;position:sticky;bottom:18px;
  background:var(--paper);padding:10px 0}
.mentorAsk input{border-radius:var(--pill);padding:14px 20px;flex:1}
.mentorChips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;align-items:center}
.mchipLabel{font-size:10px;text-transform:uppercase;letter-spacing:.11em;
  color:var(--muted);font-weight:800;margin-right:6px}
@media(max-width:620px){.mA{padding:20px}.mQ{max-width:92%}}

/* ==========================================================================
   FOUR-STEP JOURNEY
   ========================================================================== */
.jProgress{display:flex;align-items:center;gap:16px;margin-bottom:26px}
.jBar{flex:1;height:7px;background:var(--line-2);border-radius:99px;overflow:hidden}
.jBar i{display:block;height:100%;background:var(--orange);border-radius:99px;transition:width .5s ease}
.jProgress span{font-size:11px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--muted);font-weight:800;white-space:nowrap}
.jStep{display:grid;grid-template-columns:56px 1fr 140px;gap:24px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:28px;margin-bottom:14px}
.jStep.done{border-color:rgba(22,128,90,.4)}
.jStep.locked{opacity:.62}
.jNum{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;
  color:var(--muted)}
.jStep.done .jNum{background:var(--green);border-color:var(--green);color:#fff}
.jStep:not(.locked):not(.done) .jNum{border-color:var(--orange);color:var(--orange-ink)}
.jBody h2{font-size:23px;letter-spacing:-.05em;margin:8px 0 9px}
.jBody p{color:var(--muted);max-width:62ch;line-height:1.62;margin-bottom:16px;font-size:14px}
.jLocked{font-size:11.5px;color:var(--faint);font-weight:700}
.jStat{text-align:right}
.jStat .v{font-size:30px;font-weight:800;letter-spacing:-.06em;font-variant-numeric:tabular-nums}
.jStat .k{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.09em;
  font-weight:700;margin-top:4px}
@media(max-width:760px){
  .jStep{grid-template-columns:44px 1fr;gap:16px;padding:22px}
  .jStat{grid-column:2;text-align:left;margin-top:6px}
}

/* --- dashboard trend bar ---------------------------------------------------- */
.trendbar{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--line);
  border-radius:var(--pill);padding:12px 20px;margin-bottom:22px;font-size:13px;font-weight:600;
  color:var(--muted-2)}
.tdot{width:8px;height:8px;border-radius:50%;background:var(--green);flex:none}
.tdot.quiet{background:var(--faint)}
.trendbar.quiet{color:var(--muted)}

/* ==========================================================================
   RESUME IMPORT · EMPLOYMENT HISTORY
   ========================================================================== */
.impGrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:10px 0 70px;align-items:start}
@media(max-width:940px){.impGrid{grid-template-columns:1fr}}
.impNote{font-size:12.5px;color:var(--muted);line-height:1.65;margin-bottom:16px;max-width:52ch}
textarea{width:100%;padding:14px;border:1px solid #d6d7d3;border-radius:14px;background:#fff;
  outline:none;font-size:13.5px;line-height:1.6;resize:vertical;font-family:inherit}
textarea:focus{border-color:var(--ink)}
.impEmpty{margin-top:16px;padding:18px;background:var(--paper);border:1px dashed var(--line);
  border-radius:14px;font-size:12.5px;color:var(--muted);line-height:1.6}
.impFound{margin-top:20px;padding:18px;background:var(--paper);border:1px solid var(--line);border-radius:16px}
.impRow{display:grid;grid-template-columns:20px 1fr auto;gap:10px 12px;align-items:baseline;
  padding:10px 0;border-bottom:1px solid var(--line-2);cursor:pointer}
.impRow:last-of-type{border-bottom:0}
.impRow input{width:16px;height:16px;accent-color:var(--orange);cursor:pointer}
.impRow .ik{font-size:13px;font-weight:700}
.impRow .iv{font-size:13px;font-weight:800;color:var(--orange-ink);text-align:right}
.impRow .inote{grid-column:2/-1;font-size:11px;color:var(--muted);line-height:1.5}
.impDone{margin-top:18px;padding:16px;background:rgba(22,128,90,.08);border:1px solid rgba(22,128,90,.3);
  border-radius:14px;font-size:13px;font-weight:600;color:var(--green)}
.impDone a{color:var(--green);text-decoration:underline}
.jobForm{margin-top:18px;padding-top:18px;border-top:1px solid var(--line-2)}
.jobRow{display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:13px 0;border-bottom:1px solid var(--line-2)}
.jobRow:last-child{border-bottom:0}
.jobRow strong{font-size:14px;letter-spacing:-.02em}
.jEmp{color:var(--muted);font-size:13px}
.jDates{font-size:11.5px;color:var(--muted);margin-top:3px;font-variant-numeric:tabular-nums}
.jDel{background:none;border:1px solid var(--line);border-radius:50%;width:28px;height:28px;
  cursor:pointer;color:var(--muted);font-size:16px;line-height:1;flex:none}
.jDel:hover{border-color:var(--red);color:var(--red)}
.impStats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:20px;
  padding-top:18px;border-top:1px solid var(--line-2)}
.impStat{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:14px}
.impStat .v{font-size:19px;font-weight:800;letter-spacing:-.04em}
.impStat .k{font-size:10.5px;color:var(--muted);margin-top:3px;font-weight:600}

/* ==========================================================================
   SEGMENT BANNER — emphasis only, never arithmetic
   ========================================================================== */
.segBar{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start;
  background:var(--panel);color:#fff;border-radius:var(--radius);padding:26px 28px;margin-bottom:22px}
.segTag{background:var(--orange);color:var(--ink);border-radius:var(--pill);padding:7px 14px;
  font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.09em;white-space:nowrap}
.segLead{font-size:17px;font-weight:700;letter-spacing:-.035em;line-height:1.4;max-width:56ch}
.segNote{color:#a2a5a8;font-size:13px;line-height:1.6;margin-top:9px;max-width:60ch}
.segLinks{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
@media(max-width:700px){.segBar{grid-template-columns:1fr;gap:14px;padding:22px}}

/* ==========================================================================
   SKILLS ASSESSMENT
   ========================================================================== */
.asHead{padding:10px 0 26px}
.asProgress{display:flex;align-items:center;gap:16px;margin-bottom:18px;max-width:520px}
.asProgress span{font-size:11px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--muted);font-weight:800;white-space:nowrap}
.asGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding-bottom:24px}
@media(max-width:900px){.asGrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.asGrid{grid-template-columns:1fr}}
.asCard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;display:flex;flex-direction:column;gap:12px;min-height:180px}
.asCard.done{border-color:rgba(22,128,90,.4)}
.asCardTop{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.asCard h3{font-size:18px;letter-spacing:-.04em}
.asLevel{font-size:10px;text-transform:uppercase;letter-spacing:.09em;font-weight:800;
  color:var(--green);background:rgba(22,128,90,.1);border-radius:var(--pill);
  padding:5px 10px;white-space:nowrap}
.asScore{display:flex;align-items:baseline;gap:12px;flex:1}
.asScore .v{font-size:38px;font-weight:800;letter-spacing:-.06em;line-height:1}
.asScore .v em{font-style:normal;font-size:16px;color:var(--muted);font-weight:700}
.asScore .k{font-size:11.5px;color:var(--muted);font-weight:600}
.asBlurb{font-size:12.5px;color:var(--muted);line-height:1.6;flex:1}
.asCard .btn{align-self:flex-start}

.asRunner{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:36px;max-width:780px;margin:10px 0 70px}
.asRunTop{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.asCount{font-size:11px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--muted);font-weight:800}
.asQ{font-size:clamp(21px,2.8vw,28px);letter-spacing:-.05em;line-height:1.24;
  margin-bottom:26px;max-width:44ch}
.asOpts{display:grid;gap:9px}
.asOpt{text-align:left;background:#fff;border:1px solid #d6d7d3;border-radius:16px;
  padding:16px 20px;font-size:14.5px;font-weight:600;cursor:pointer;transition:.15s}
.asOpt:hover:not(:disabled){border-color:var(--ink);transform:translateX(3px)}
.asOpt:disabled{cursor:default}
.asOpt.right{border-color:var(--green);background:rgba(22,128,90,.08);color:var(--green)}
.asOpt.wrong{border-color:var(--red);background:rgba(201,74,59,.07);color:var(--red-ink)}
.asWhy{margin-top:24px;padding:22px;background:var(--paper);border:1px solid var(--line);
  border-radius:18px}
.asWhy p{color:var(--muted);line-height:1.7;margin-bottom:18px;max-width:62ch}
.asQuit{display:block;margin-top:26px;background:none;border:0;color:var(--faint);
  font-size:12px;font-weight:700;cursor:pointer;text-decoration:underline;padding:0}
.asQuit:hover{color:var(--muted)}

.asResult{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:40px;max-width:720px;margin:10px 0 70px}
.asResult h2{font-size:clamp(24px,3.4vw,34px);letter-spacing:-.055em;margin:16px 0 20px}
.asBig{font-size:80px;font-weight:800;letter-spacing:-.08em;line-height:1;color:var(--orange-ink)}
.asBig em{font-style:normal;font-size:26px;color:var(--muted);font-weight:700}
.asResult .asBlurb{margin-top:18px;font-size:14.5px;max-width:60ch}
.asWhyLevel{margin-top:24px;padding:20px;background:var(--paper);border:1px solid var(--line);
  border-radius:16px;font-size:13px;color:var(--muted);line-height:1.7;max-width:64ch}
.asWhyLevel strong{color:var(--ink)}

/* --- evidence bar: confidence shown as its parts --------------------------- */
.evBar{display:flex;align-items:center;gap:20px;flex-wrap:wrap;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:20px 26px;margin-bottom:22px}
.evPart{min-width:96px}
.evV{font-size:26px;font-weight:800;letter-spacing:-.055em;line-height:1;font-variant-numeric:tabular-nums}
.evV.up{color:var(--green)} .evV.none{color:var(--faint)}
.evV.strong{color:var(--orange-ink)}
.evK{font-size:11px;color:var(--muted);margin-top:6px;font-weight:600}
.evK a{color:var(--orange-ink);text-decoration:underline}
.evPlus,.evEq{font-size:20px;color:var(--faint);font-weight:800}
@media(max-width:620px){.evBar{gap:12px;padding:16px}.evPart{min-width:74px}.evV{font-size:21px}}

/* ==========================================================================
   OPPORTUNITY RADAR · PORTABILITY · SHARE
   ========================================================================== */
.radarNote{background:var(--panel);color:#fff;border-radius:var(--radius);padding:24px 28px;
  margin:10px 0 26px;font-size:13.5px;line-height:1.7;max-width:78ch}
.radarNote strong{color:#fff}
.radarBlock{margin-bottom:34px}
.radarHead h2{font-size:23px;letter-spacing:-.05em;margin-bottom:7px}
.radarHead p{color:var(--muted);font-size:13px;line-height:1.62;max-width:66ch;margin-bottom:16px}
.radarHead a{color:var(--orange-ink);font-weight:700}
.radarLinks{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.radarLink{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:20px;display:flex;flex-direction:column;gap:7px;transition:.2s}
.radarLink:hover{border-color:var(--ink);transform:translateY(-2px)}
.rlName{font-weight:800;font-size:15px;letter-spacing:-.035em}
.rlWhy{font-size:12px;color:var(--muted);line-height:1.55;flex:1}
.rlGo{font-size:11px;color:var(--orange-ink);font-weight:800}
.abroadRow{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:15px 0;border-bottom:1px solid var(--line-2);flex-wrap:wrap}
.abroadRow:last-child{border-bottom:0}
.abName{font-weight:800;font-size:15px}
.abLinks{display:flex;gap:14px;flex-wrap:wrap}
.abLinks a{font-size:12.5px;color:var(--orange-ink);font-weight:700}

#pxOut{background:var(--paper);font-family:ui-monospace,monospace;font-size:11px;
  word-break:break-all;color:var(--muted-2)}

.shareRow{display:flex;justify-content:space-between;align-items:center;gap:20px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:20px 24px;margin-top:14px;flex-wrap:wrap}
.shareTxt{flex:1;min-width:240px}
.shareTxt strong{display:block;font-size:14px;letter-spacing:-.03em;margin-bottom:5px}
.shareTxt span{font-size:11.5px;color:var(--muted);line-height:1.55}

/* ==========================================================================
   BRAND AXIS — blue is identity and progress, orange is the thing to click
   Measured: #0B5FFF is 4.78:1 on paper (AA). Cyan #22D3EE is 10.83:1 on the
   dark panel but only 2.21:1 on paper, so cyan is dark-surface only — the
   same rule signal orange already follows in reverse.
   ========================================================================== */
:root{
  --brand:#0B5FFF;
  --brand-deep:#0A4FD8;
  --brand-cyan:#22D3EE;      /* dark panels only */
  --brand-wash:rgba(11,95,255,.10);
  --brand-line:rgba(11,95,255,.28);
}
.brand span{color:var(--brand)}

/* ==========================================================================
   JOURNEY RAIL
   ========================================================================== */
.railLayout{display:grid;grid-template-columns:264px minmax(0,1fr);gap:40px;
  align-items:start;padding-bottom:70px}
@media(max-width:1000px){.railLayout{grid-template-columns:1fr;gap:24px}}
.rail{position:sticky;top:92px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:22px}
@media(max-width:1000px){.rail{position:static}}
.railHead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.railK{font-size:10px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--muted);font-weight:800}
.railPct{font-size:12px;font-weight:800;color:var(--brand);font-variant-numeric:tabular-nums}
.railBar{height:5px;background:var(--line-2);border-radius:99px;overflow:hidden;margin-bottom:18px}
.railBar i{display:block;height:100%;background:var(--brand);border-radius:99px;transition:width .5s ease}
.railList{list-style:none;margin:0;padding:0;position:relative}
.railList::before{content:'';position:absolute;left:13px;top:14px;bottom:14px;width:2px;
  background:var(--line-2)}
.railStep{position:relative;z-index:1}
.railStep a,.railLocked{display:flex;gap:12px;align-items:flex-start;padding:9px 0;
  border-radius:12px;transition:.15s}
.railStep a:hover{background:var(--brand-wash)}
.railDot{width:27px;height:27px;border-radius:50%;background:#fff;
  border:2px solid var(--line);display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:800;color:var(--muted);flex:none}
.railStep.done .railDot{background:var(--brand);border-color:var(--brand);color:#fff}
.railStep.current .railDot{border-color:var(--orange);color:var(--orange-ink);
  box-shadow:0 0 0 4px var(--orange-soft)}
.railTxt{display:flex;flex-direction:column;gap:1px;padding-top:2px}
.railName{font-size:12.5px;font-weight:700;letter-spacing:-.02em}
.railSub{font-size:10.5px;color:var(--muted)}
.railStep.current .railName{color:var(--orange-ink)}
.railStep.locked{opacity:.45}
.railStep.locked .railLocked{cursor:default}
.railNext{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-2)}
.railNext .railK{display:block;margin-bottom:9px}
.btn.block{width:100%}
.railCmd{display:block;margin-top:14px;font-size:11.5px;color:var(--brand);
  font-weight:700;text-align:center}

/* ==========================================================================
   STEP 04 — CHOOSE MY FUTURE
   ========================================================================== */
.futBanner{background:var(--panel);color:#fff;border-radius:var(--radius);
  padding:24px 28px;margin-bottom:20px}
.futBanner.none{background:#fff;color:var(--ink);border:1px dashed var(--hairline-firm)}
.futBannerK{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--brand-cyan);font-weight:800;margin-bottom:8px}
.futBanner.none .futBannerK{color:var(--brand)}
.futBanner strong{display:block;font-size:26px;letter-spacing:-.055em}
.futBannerN{display:block;font-size:12.5px;color:#a2a5a8;margin-top:8px;max-width:60ch;line-height:1.6}
.futBanner.none .futBannerN{color:var(--muted)}
.futGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(max-width:820px){.futGrid{grid-template-columns:1fr}}
.futCard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;display:flex;flex-direction:column;gap:14px}
.futCard.chosen{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-wash)}
.futTop{display:flex;justify-content:space-between;align-items:center;gap:10px}
.futKind{font-size:10px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--muted);font-weight:800}
.futTag{font-size:10px;text-transform:uppercase;letter-spacing:.09em;font-weight:800;
  background:var(--brand);color:#fff;border-radius:var(--pill);padding:5px 11px}
.futCard h3{font-size:24px;letter-spacing:-.05em}
.futStats{display:flex;gap:22px;flex-wrap:wrap;padding:14px 0;
  border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.futStats .fv{display:block;font-size:21px;font-weight:800;letter-spacing:-.05em;
  font-variant-numeric:tabular-nums}
.futStats .fk{display:block;font-size:10.5px;color:var(--muted);margin-top:3px;font-weight:600}
.futWhy{font-size:12.5px;color:var(--muted);line-height:1.62;flex:1}
.futNa{font-size:11.5px;color:var(--faint);font-weight:700}
.futCard .btn{align-self:flex-start}

/* --- journey page: resume banner ------------------------------------------ */
.jResume{background:var(--panel);color:#fff;border-radius:var(--radius);
  padding:28px 30px;margin-bottom:24px}
.jResume.none{background:#fff;color:var(--ink);border:1px solid var(--line)}
.jResumeK{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.12em;
  font-weight:800;color:var(--brand-cyan);margin-bottom:9px}
.jResume.none .jResumeK{color:var(--brand)}
.jResume strong{display:block;font-size:clamp(22px,3vw,32px);letter-spacing:-.055em}
.jResumeN{display:block;font-size:13px;color:#a2a5a8;margin:10px 0 18px;
  max-width:64ch;line-height:1.62}
.jResume.none .jResumeN{color:var(--muted)}
.jStep.next{border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-soft)}
.jStep.next .jNum{border-color:var(--orange);color:var(--orange-ink)}

/* ==========================================================================
   CAREER UNIVERSE
   Distance from centre is (1 − fit). Nothing is placed for looks.
   ========================================================================== */
.uTools{display:flex;justify-content:space-between;align-items:center;gap:18px;
  flex-wrap:wrap;margin-bottom:16px}
.uHint{font-size:11px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--muted);font-weight:800}
.uWrap{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}
@media(max-width:1000px){.uWrap{grid-template-columns:1fr}}
.uField{position:relative;height:620px;border-radius:var(--radius-lg);overflow:hidden;
  background:#0b0c0d;
  background-image:radial-gradient(circle at 50% 50%,rgba(11,95,255,.16),transparent 42%),
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:auto,46px 46px,46px 46px}
@media(max-width:700px){.uField{height:520px}}
.uRings{position:absolute;inset:0;pointer-events:none}
.uRings i{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  border:1px solid rgba(255,255,255,.07);border-radius:50%}
.uRings i:nth-child(1){width:36%;height:44%}
.uRings i:nth-child(2){width:64%;height:74%}
.uRings i:nth-child(3){width:92%;height:104%}
.uCore{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  background:var(--orange);color:var(--ink);border-radius:18px;padding:14px 20px;
  text-align:center;z-index:5;box-shadow:0 12px 40px rgba(255,90,31,.34)}
.uCoreK{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.11em;
  font-weight:800;opacity:.72}
.uCore strong{display:block;font-size:15px;letter-spacing:-.035em;margin-top:3px}
.uNode{position:absolute;transform:translate(-50%,-50%);border-radius:50%;
  border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.05);
  cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;
  transition:transform .18s ease,border-color .18s ease;z-index:3}
.uNode:hover{transform:translate(-50%,-50%) scale(1.12);border-color:#fff}
.uDot{width:38%;height:38%;border-radius:50%;display:block}
.uNode.u-role .uDot{background:var(--brand-cyan)}
.uNode.u-skill .uDot{background:#a78bfa}
.uNode.u-country .uDot{background:#fbbf24}
.uNode.u-role{border-color:rgba(34,211,238,.45);background:rgba(34,211,238,.10)}
.uNode.u-skill{border-color:rgba(167,139,250,.45);background:rgba(167,139,250,.10)}
.uNode.u-country{border-color:rgba(251,191,36,.45);background:rgba(251,191,36,.10)}
.uNode.sel{border-color:#fff;border-width:2px;transform:translate(-50%,-50%) scale(1.16)}
.uNode.target{border-color:var(--orange);border-width:2px;
  box-shadow:0 0 0 5px rgba(255,90,31,.2)}
.uLabel{position:absolute;transform:translate(-50%,0);font-size:10px;font-weight:700;
  color:#a7aaad;white-space:nowrap;pointer-events:none;z-index:2;letter-spacing:-.01em}
.uLabel.sel{color:#fff}
@media(max-width:700px){.uLabel{font-size:9px}}

.uPanel{position:sticky;top:92px}
@media(max-width:1000px){.uPanel{position:static}}
.uEmpty,.uCard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.uEmpty p{color:var(--muted);font-size:13px;line-height:1.68;margin-top:12px}
.uLegend{display:flex;flex-direction:column;gap:8px;margin-top:20px;padding-top:16px;
  border-top:1px solid var(--line-2)}
.uLegend span{font-size:11.5px;font-weight:700;display:flex;align-items:center;gap:9px}
.uLegend span::before{content:'';width:10px;height:10px;border-radius:50%}
.uLegend .u-role::before{background:#0891b2}
.uLegend .u-skill::before{background:#7c3aed}
.uLegend .u-country::before{background:#b45309}
.uKind{font-size:10px;text-transform:uppercase;letter-spacing:.11em;font-weight:800}
.uKind.u-role{color:#0891b2} .uKind.u-skill{color:#7c3aed} .uKind.u-country{color:#b45309}
.uCard h3{font-size:23px;letter-spacing:-.05em;margin:10px 0 18px}
.uRows{border-top:1px solid var(--line-2)}
.uRow{display:flex;justify-content:space-between;align-items:baseline;padding:11px 0;
  border-bottom:1px solid var(--line-2)}
.uk{font-size:12px;color:var(--muted);font-weight:600}
.uv{font-size:16px;font-weight:800;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.uv.good{color:var(--green)} .uv.bad{color:var(--red-ink)}
.uWhy{margin:16px 0}
.uWhy summary{cursor:pointer;list-style:none;font-size:12px;font-weight:800;
  color:var(--brand);display:flex;gap:8px;align-items:center}
.uWhy summary::-webkit-details-marker{display:none}
.uWhy summary::before{content:'?';width:17px;height:17px;border-radius:50%;
  background:var(--brand-wash);color:var(--brand);display:flex;align-items:center;
  justify-content:center;font-size:10px;flex:none}
.uWhy p{margin-top:11px;font-size:12.5px;color:var(--muted);line-height:1.68}
.uChosen{background:var(--brand-wash);border:1px solid var(--brand-line);border-radius:14px;
  padding:14px;font-size:12.5px;color:var(--brand-deep);line-height:1.6;margin-bottom:10px;font-weight:600}

/* ==========================================================================
   ENTRANCE — homepage hero, different for a returning visitor
   ========================================================================== */
.entGrid{display:grid;grid-template-columns:1.02fr .98fr;gap:54px;align-items:center;position:relative}
@media(max-width:960px){.entGrid{grid-template-columns:1fr;gap:32px}}
.entGrid h1{font-size:clamp(34px,4.2vw,58px);line-height:1.0;letter-spacing:-.065em;
  margin:14px 0 18px;max-width:19ch}
.entGrid h1.entBack{font-size:clamp(28px,3.4vw,42px);max-width:20ch}
.entStart{margin-top:32px}
.entK{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.12em;
  font-weight:800;color:var(--muted);margin-bottom:12px}
.entOpts{display:grid;grid-template-columns:1fr 1fr;gap:9px}
@media(max-width:560px){.entOpts{grid-template-columns:1fr}}
.entOpt{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px;
  display:flex;flex-direction:column;gap:3px;transition:.18s}
.entOpt:hover{border-color:var(--brand);transform:translateY(-2px);box-shadow:var(--shadow)}
.entOpt strong{font-size:14.5px;letter-spacing:-.035em}
.entOpt span{font-size:11.5px;color:var(--muted);line-height:1.5}
.entOpt.ghost{background:transparent;border-style:dashed}
.entNext{background:#fff;border:1px solid var(--line);border-left:4px solid var(--orange);
  border-radius:18px;padding:22px 24px;margin-bottom:20px}
.entNext strong{display:block;font-size:23px;letter-spacing:-.05em;margin-bottom:8px}
.entNext p{font-size:13.5px;color:var(--muted);line-height:1.65;max-width:58ch;margin-bottom:16px}
.entNextBtns{display:flex;gap:9px;flex-wrap:wrap}
.entMini{display:flex;gap:7px;margin-bottom:14px;flex-wrap:wrap}
.entPip{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;
  color:var(--muted);transition:.15s}
.entPip:hover{border-color:var(--ink)}
.entPip.done{background:var(--brand);border-color:var(--brand);color:#fff}
.entPip.next{border-color:var(--orange);color:var(--orange-ink);box-shadow:0 0 0 3px var(--orange-soft)}
.entPip.locked{opacity:.4}

/* --- homepage journey steps ------------------------------------------------ */
.hSteps{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(max-width:820px){.hSteps{grid-template-columns:1fr}}
.hStep{display:grid;grid-template-columns:auto 1fr;gap:18px;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);padding:26px;transition:.2s}
.hStep:hover{border-color:var(--brand);transform:translateY(-2px);box-shadow:var(--shadow)}
.hStepN{font-size:13px;font-weight:800;color:var(--brand);letter-spacing:.04em;padding-top:2px}
.hStepBody h3{font-size:21px;letter-spacing:-.05em;margin:8px 0 9px}
.hStepBody p{font-size:13px;color:var(--muted);line-height:1.62;margin-bottom:14px}
.hStepGo{font-size:11.5px;font-weight:800;color:var(--orange-ink)}

/* ==========================================================================
   "WHY THIS?" — the same disclosure wherever a recommendation appears
   ========================================================================== */
.whyBox{margin-top:14px;border-top:1px solid var(--line-2);padding-top:12px}
.whyBox summary{cursor:pointer;list-style:none;font-size:11.5px;font-weight:800;
  color:var(--brand);display:inline-flex;gap:7px;align-items:center}
.whyBox summary::-webkit-details-marker{display:none}
.whyBox summary::before{content:'?';width:16px;height:16px;border-radius:50%;
  background:var(--brand-wash);color:var(--brand);display:flex;align-items:center;
  justify-content:center;font-size:10px;flex:none}
.whyBox[open] summary{margin-bottom:12px}
.whyBody{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:18px}
.whyLead{font-size:12px;color:var(--muted);line-height:1.6;margin-bottom:14px}
.whyRow{display:grid;grid-template-columns:1fr auto;gap:4px 14px;padding:11px 0;
  border-bottom:1px solid var(--line-2)}
.whyRow:last-child{border-bottom:0}
.wl{font-size:12.5px;font-weight:700}
.wv{font-size:14px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;
  text-align:right}
.wn{grid-column:1/-1;font-size:11.5px;color:var(--muted);line-height:1.55}
.ws{grid-column:1/-1;font-size:9.5px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--faint);font-weight:700}
.whyFoot{margin-top:12px;padding-top:10px;border-top:1px solid var(--line-2);
  font-size:11px;color:var(--muted)}
.whyFoot a{color:var(--brand);font-weight:700}
.nextmove .whyBox{border-top-color:var(--panel-line)}
.nextmove .whyBox summary{color:var(--brand-cyan)}
.nextmove .whyBox summary::before{background:rgba(34,211,238,.14);color:var(--brand-cyan)}
.nextmove .whyBody{background:var(--panel-2);border-color:var(--panel-line)}
.nextmove .whyLead,.nextmove .wn,.nextmove .whyFoot{color:#9a9da0}
.nextmove .whyRow{border-bottom-color:var(--panel-line)}
.nextmove .whyFoot{border-top-color:var(--panel-line)}
.nextmove .whyFoot a{color:var(--brand-cyan)}

/* ==========================================================================
   ASK ASTRA — persistent throughout the journey
   ========================================================================== */
.askHost{position:fixed;right:22px;bottom:22px;z-index:80}
@media(max-width:620px){.askHost{right:14px;bottom:14px}}
.askFab{display:inline-flex;align-items:center;gap:9px;background:var(--ink);color:#fff;
  border:0;border-radius:var(--pill);padding:14px 20px;font-size:13px;font-weight:800;
  cursor:pointer;box-shadow:0 12px 34px rgba(10,10,10,.3);transition:transform .18s ease}
.askFab:hover{transform:translateY(-2px)}
.askFabDot{width:8px;height:8px;border-radius:50%;background:var(--brand-cyan);flex:none;
  box-shadow:0 0 0 4px rgba(34,211,238,.22)}
.askPanel{position:absolute;right:0;bottom:60px;width:396px;max-width:calc(100vw - 28px);
  max-height:min(560px,calc(100vh - 130px));overflow:auto;background:#fff;
  border:1px solid var(--line);border-radius:22px;box-shadow:0 30px 80px rgba(10,10,10,.24)}
.askTop{display:flex;justify-content:space-between;align-items:center;
  padding:18px 20px;border-bottom:1px solid var(--line-2);position:sticky;top:0;background:#fff}
.askTop strong{font-size:15px;letter-spacing:-.035em}
.askClose{background:none;border:0;font-size:22px;line-height:1;color:var(--muted);
  cursor:pointer;padding:0 4px}
.askClose:hover{color:var(--ink)}
.askBody{padding:20px}
.askLead{font-size:12.5px;color:var(--muted);line-height:1.62;margin-bottom:14px}
.askLead a{color:var(--brand);font-weight:700}
.askChips{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.askChips .chip{text-align:left;border-radius:14px}
.askInput{display:flex;gap:8px}
.askInput input{border-radius:var(--pill);padding:11px 16px;font-size:13px}
.askQ{background:var(--ink);color:#fff;border-radius:16px 16px 4px 16px;padding:11px 15px;
  font-size:13px;font-weight:600;margin-bottom:14px}
.askCalc{background:var(--paper);border:1px solid var(--line);border-radius:14px;
  padding:14px;margin-bottom:14px}
.askCalcRow{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:7px 0;
  border-bottom:1px solid var(--line-2)}
.askCalcRow:last-child{border-bottom:0}
.askCalcRow span{font-size:11.5px;color:var(--muted-2);font-weight:600}
.askCalcRow b{font-size:14px;font-weight:800;text-align:right;font-variant-numeric:tabular-nums}
.askCalcRow em{grid-column:1/-1;font-style:normal;font-size:9px;text-transform:uppercase;
  letter-spacing:.09em;color:var(--faint);font-weight:700}
.askAdvice p{font-size:12.5px;color:var(--muted);line-height:1.68;margin-bottom:10px}
.askActs{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-top:14px;
  padding-top:14px;border-top:1px solid var(--line-2)}
.askBack{background:none;border:0;color:var(--muted);font-size:11.5px;font-weight:700;
  cursor:pointer;padding:0}
.askBack:hover{color:var(--ink)}

/* --- journey: non-linear paths --------------------------------------------- */
.jSkip{background:var(--brand-wash);border:1px solid var(--brand-line);border-radius:18px;
  padding:18px 22px;margin-bottom:16px}
.jSkip.alt{background:#fff;border-color:var(--line);border-style:dashed}
.jSkipK{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.11em;
  font-weight:800;color:var(--brand);margin-bottom:7px}
.jSkip p{font-size:13px;color:var(--muted-2);line-height:1.65;max-width:70ch}
.jSkip.alt p{color:var(--muted);margin-bottom:14px}
.jSkip a{color:var(--brand);font-weight:700}
.jSkip .btn{color:var(--ink)}

/* --- universe: search and scale ------------------------------------------- */
.uSearch{flex:1;min-width:200px;max-width:320px}
.uSearch input{border-radius:var(--pill);padding:10px 18px;font-size:13px}
.uMeta{display:flex;justify-content:space-between;align-items:center;gap:16px;
  flex-wrap:wrap;margin-bottom:14px}
.uHidden{font-size:11px;font-weight:700;color:var(--orange-ink)}
.uHidden.quiet{color:var(--faint)}
.uNone{grid-column:1/-1;background:#fff;border:1px dashed var(--hairline-firm);
  border-radius:18px;padding:24px;font-size:13px;color:var(--muted);text-align:center}

/* ==========================================================================
   MY CAREER FUTURE PLAN — the central object
   ========================================================================== */
.pHead{background:var(--panel);color:#fff;border-radius:var(--radius-lg);padding:32px;margin-bottom:16px}
.pHeadTop{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.pKicker{font-size:11px;text-transform:uppercase;letter-spacing:.13em;font-weight:800;color:var(--brand-cyan)}
.pReady{font-size:13px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums}
.pBar{height:6px;background:#2a2c2e;border-radius:99px;margin:14px 0 26px;overflow:hidden}
.pBar i{display:block;height:100%;background:var(--brand-cyan);border-radius:99px;transition:width .6s ease}
.pArrow{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.pArrowCell{min-width:150px}
.pArrowCell .pk{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.1em;
  color:#9a9da0;font-weight:800;margin-bottom:5px}
.pArrowCell strong{font-size:20px;letter-spacing:-.045em}
.pArrowSep{color:#5a5d60;font-size:18px}
@media(max-width:700px){.pArrowSep{display:none}.pArrow{gap:14px}}

.pNext{background:var(--orange);color:var(--ink);border-radius:var(--radius-lg);
  padding:34px;margin-bottom:34px}
.pNext .pk{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.12em;
  font-weight:800;opacity:.7;margin-bottom:10px}
.pNext h2{font-size:clamp(26px,3.6vw,40px);letter-spacing:-.06em;margin-bottom:12px}
.pNext p{font-size:15px;line-height:1.6;max-width:62ch;color:rgba(10,10,10,.8)}
.pNextMeta{font-size:12.5px;margin:16px 0 20px;color:rgba(10,10,10,.7)}
.pNext .btn{background:var(--ink);border-color:var(--ink);color:#fff}

.pSection{margin-bottom:38px}
.pSecHead{display:flex;align-items:baseline;gap:14px;margin-bottom:18px;
  padding-bottom:12px;border-bottom:1px solid var(--line)}
.pSecN{font-size:12px;font-weight:800;color:var(--brand);letter-spacing:.05em}
.pSecHead h2{font-size:24px;letter-spacing:-.05em}
.pHole{background:#fff;border:1px dashed var(--hairline-firm);border-radius:var(--radius);
  padding:26px;text-align:center}
.pHole p{color:var(--muted);max-width:56ch;margin:0 auto 16px;line-height:1.65}
.pNote{font-size:12px;color:var(--muted);margin-top:14px;line-height:1.6;max-width:74ch}
.pNote a{color:var(--brand);font-weight:700}

.pStats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.pStat{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:18px}
.pv{font-size:30px;font-weight:800;letter-spacing:-.06em;font-variant-numeric:tabular-nums}
.pv.good{color:var(--green)} .pv.bad{color:var(--red-ink)}
.pkk{font-size:11px;color:var(--muted);margin-top:6px;font-weight:600}

.pFutures{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:860px){.pFutures{grid-template-columns:1fr}}
.pFuture{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.pFuture.chosen{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-wash)}
.pfTop{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.pfRank{font-size:11px;font-weight:800;color:var(--brand);letter-spacing:.06em}
.pFuture h3{font-size:20px;letter-spacing:-.05em;margin-bottom:14px}
.pfRows{border-top:1px solid var(--line-2);margin-bottom:14px}
.pfRow{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line-2);font-size:12.5px}
.pfRow:last-child{border-bottom:0}
.pfRow span{color:var(--muted)}
.pfRow b{font-weight:800;font-variant-numeric:tabular-nums}

.pDir{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px}
.pDirHead .pk{font-size:10px;text-transform:uppercase;letter-spacing:.11em;color:var(--muted);font-weight:800}
.pDirHead h3{font-size:28px;letter-spacing:-.055em;margin:8px 0 6px}
.pDirRank{font-size:12px;color:var(--muted)}
.pWhy{margin-top:20px;padding-top:18px;border-top:1px solid var(--line-2)}
.pWhy ul{margin:0;padding-left:20px;color:var(--muted)}
.pWhy li{margin-bottom:10px;line-height:1.65;font-size:13.5px}

.pGap{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px}
.pGapHead{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.pGapHead .pk{font-size:11px;color:var(--muted);font-weight:700}
.pGapHead strong{font-size:32px;letter-spacing:-.06em;color:var(--brand)}
.pTable{width:100%;border-collapse:collapse;font-size:13px}
.pTable th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--muted);font-weight:800;padding:0 10px 10px 0;border-bottom:1px solid var(--line)}
.pTable td{padding:12px 10px 12px 0;border-bottom:1px solid var(--line-2);vertical-align:middle}
.pTable td:last-child{display:flex;align-items:center;gap:10px}
.pGapBar{flex:1;height:7px;background:var(--line-2);border-radius:99px;overflow:hidden;display:block;min-width:60px}
.pGapBar i{display:block;height:100%;background:var(--orange);border-radius:99px}
.pTable b{font-size:12px;font-variant-numeric:tabular-nums;min-width:34px;text-align:right}

.pRoad{border-left:2px solid var(--line);padding-left:24px}
.pRoadStep{position:relative;padding-bottom:24px}
.pRoadStep::before{content:'';position:absolute;left:-31px;top:4px;width:12px;height:12px;
  border-radius:50%;background:var(--brand);border:3px solid var(--paper)}
.prWin{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--brand);font-weight:800}
.prBody h4{font-size:18px;letter-spacing:-.04em;margin:6px 0 6px}
.prBody p{font-size:13px;color:var(--muted);line-height:1.62;max-width:64ch}

.pScenarios{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:760px){.pScenarios{grid-template-columns:1fr}}
.pScen{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.pScen.bad{border-top:3px solid var(--red)} .pScen.good{border-top:3px solid var(--green)}
.pScen .pk{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--muted);font-weight:800;margin-bottom:10px}
.pScen strong{font-size:24px;letter-spacing:-.05em;display:block}
.pScen.bad strong{color:var(--red-ink)} .pScen.good strong{color:var(--green)}
.pScenSub{font-size:12px;color:var(--muted);margin-top:6px;display:block}

.pOpp{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.pOpp p{color:var(--muted);line-height:1.65;margin-bottom:16px;max-width:70ch}

.pMissing{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;margin-bottom:24px}
.pMissing p{font-size:13px;color:var(--muted);margin-bottom:14px}
.pMissRow{display:flex;justify-content:space-between;align-items:center;padding:13px 0;
  border-bottom:1px solid var(--line-2);font-weight:700;font-size:14px}
.pMissRow:last-child{border-bottom:0}
.pMissRow:hover{color:var(--orange-ink)}
.pComplete{background:rgba(22,128,90,.08);border:1px solid rgba(22,128,90,.3);
  border-radius:var(--radius);padding:24px;color:var(--green);line-height:1.65;margin-bottom:24px}

/* --- persistent plan strip -------------------------------------------------- */
.planStrip{background:var(--panel);color:#fff;position:sticky;top:74px;z-index:50}
@media(max-width:1080px){.planStrip{position:static}}
.psIn{display:flex;align-items:center;gap:16px;padding:12px 28px;flex-wrap:wrap}
.psCell{min-width:0}
.psK{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.11em;
  color:#8d9093;font-weight:800}
.psCell strong{font-size:13px;letter-spacing:-.025em;white-space:nowrap}
.psCell:hover strong{color:var(--brand-cyan)}
.psArrow{color:#4a4d50;font-size:13px}
.psNext{margin-left:auto;background:var(--orange);color:var(--ink);border-radius:var(--pill);
  padding:8px 16px}
.psNext .psK{color:rgba(10,10,10,.62)}
.psNext strong{font-size:12.5px}
@media(max-width:820px){.psNext{margin-left:0;width:100%;text-align:center}
  .psArrow{display:none}.psIn{gap:12px;padding:12px 18px}}
.pUnknown{margin-top:18px;padding:16px 18px;background:var(--orange-soft);
  border:1px solid rgba(255,90,31,.28);border-radius:14px;font-size:12.5px;
  color:var(--muted-2);line-height:1.65}
.pUnknown strong{color:var(--ink)}
.pUnknown a{color:var(--orange-ink);font-weight:700}

/* --- homepage: one dominant action ----------------------------------------- */
.entPrimary{margin-top:24px}
.entBig{font-size:15px;padding:17px 30px}
.entMicro{display:block;font-size:11.5px;color:var(--muted);margin-top:12px}
.entAlt{display:flex;gap:10px;align-items:center;margin-top:20px;font-size:12.5px;
  color:var(--muted);flex-wrap:wrap}
.entAlt a{color:var(--brand);font-weight:700}

/* --- dashboard: plan card leads --------------------------------------------- */
.dashPlan{display:block;background:var(--panel);color:#fff;border-radius:var(--radius-lg);
  padding:28px;margin-bottom:22px;transition:transform .2s ease}
.dashPlan:hover{transform:translateY(-2px)}
.dpArrow{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding-bottom:18px;border-bottom:1px solid var(--panel-line)}
.dpArrow strong{display:block;font-size:18px;letter-spacing:-.04em;margin-top:4px}
.dpSep{color:#5a5d60}
.dpNext{padding:16px 0}
.dpNext strong{display:block;font-size:22px;letter-spacing:-.05em;margin-top:5px;color:var(--orange)}
.dpGo{font-size:12.5px;font-weight:800;color:var(--brand-cyan);padding-top:14px;
  border-top:1px solid var(--panel-line)}
.dpGo em{font-style:normal;color:#8d9093;font-weight:600;float:right}
@media(max-width:640px){.dpSep{display:none}.dpGo em{float:none;display:block;margin-top:4px}}

/* ==========================================================================
   HOMEPAGE NARRATIVE
   ========================================================================== */
.heroSrc{font-size:11px;color:var(--faint);margin-top:12px;font-weight:600}
.lead strong{color:var(--ink);font-weight:800}
.lead em{font-style:italic;color:var(--orange-ink);font-weight:700}

/* --- world problem statistics --------------------------------------------- */
.wStats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:940px){.wStats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.wStats{grid-template-columns:1fr}}
.wStat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;
  display:flex;flex-direction:column;gap:10px}
.wNum{font-size:clamp(34px,4.4vw,48px);font-weight:800;letter-spacing:-.07em;
  line-height:1;color:var(--orange-ink)}
.wLabel{font-size:13px;line-height:1.55;color:var(--muted-2);font-weight:600;flex:1}
.wSrc{font-size:10px;color:var(--faint);line-height:1.5;padding-top:10px;
  border-top:1px solid var(--line-2);font-weight:600}

/* --- problem list ---------------------------------------------------------- */
.probList{display:grid;gap:12px}
.probRow{display:grid;grid-template-columns:auto 1fr;gap:22px;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);padding:28px}
@media(max-width:620px){.probRow{grid-template-columns:1fr;gap:12px}}
.probN{font-size:13px;font-weight:800;color:var(--brand);letter-spacing:.05em;padding-top:4px}
.probBody h3{font-size:22px;letter-spacing:-.05em;margin-bottom:10px}
.probReal{color:var(--muted);line-height:1.68;max-width:74ch;font-size:14px}
.probAstra{margin-top:18px;padding:18px 20px;background:var(--paper);
  border-left:3px solid var(--orange);border-radius:0 14px 14px 0}
.probK{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.11em;
  font-weight:800;color:var(--orange-ink);margin-bottom:8px}
.probAstra p{font-size:13.5px;color:var(--muted-2);line-height:1.65;max-width:70ch;margin-bottom:12px}
.probAstra a{font-size:12.5px;font-weight:800;color:var(--orange-ink)}

/* --- what it is not -------------------------------------------------------- */
.notList{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.notItem{border:1px solid #3a3c3e;border-radius:var(--pill);padding:8px 15px;
  font-size:12px;font-weight:700;color:#9a9da0;position:relative}
.notItem::before{content:'';position:absolute;left:12px;right:12px;top:50%;height:1px;
  background:#5a5d60}

/* --- flow chain ------------------------------------------------------------ */
.flowChain{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center}
.flowNode{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px;
  min-width:132px;transition:.2s}
.flowNode:hover{border-color:var(--brand);transform:translateY(-2px)}
.fN{display:block;font-size:10px;font-weight:800;color:var(--brand);letter-spacing:.06em}
.flowNode strong{display:block;font-size:14px;letter-spacing:-.035em;margin:5px 0 2px}
.fT{font-size:11px;color:var(--muted)}
.flowArrow{color:var(--faint);font-size:14px}
@media(max-width:760px){.flowArrow{display:none}.flowChain{justify-content:flex-start}
  .flowNode{flex:1;min-width:120px}}

/* --- live worked example --------------------------------------------------- */
.demoProfile{background:var(--panel);color:#fff;border-radius:var(--radius) var(--radius) 0 0;
  padding:20px 26px}
.dpK{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.11em;
  font-weight:800;color:var(--brand-cyan);margin-bottom:7px}
.demoProfile strong{font-size:14px;letter-spacing:-.02em;font-weight:600;color:#e3e5e7}
.demoGrid{display:grid;grid-template-columns:1.15fr .85fr;gap:1px;background:var(--line);
  border:1px solid var(--line);border-top:0;border-radius:0 0 var(--radius) var(--radius);
  overflow:hidden}
@media(max-width:860px){.demoGrid{grid-template-columns:1fr}}
.demoCard{background:#fff;padding:28px}
.demoCard .dpK{color:var(--muted)}
.demoCard.accent{background:var(--orange)}
.demoCard.accent .dpK{color:rgba(10,10,10,.6)}
.demoCard.accent h3{font-size:28px;letter-spacing:-.055em;margin-bottom:12px}
.demoCard.accent p{font-size:13.5px;line-height:1.65;color:rgba(10,10,10,.78);margin-bottom:16px}
.demoStats{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:16px;
  padding-bottom:20px;border-bottom:1px solid var(--line-2);margin-bottom:18px}
.demoStats b{display:block;font-size:28px;font-weight:800;letter-spacing:-.06em;
  font-variant-numeric:tabular-nums}
.demoStats span{font-size:11px;color:var(--muted);font-weight:600}
.demoWhy ul{margin:10px 0 0;padding-left:18px}
.demoWhy li{font-size:12.5px;color:var(--muted);line-height:1.62;margin-bottom:9px}
.demoWhy li strong{color:var(--ink)}
.demoNote{font-size:11.5px;color:rgba(10,10,10,.62);line-height:1.55;margin-bottom:16px;
  padding-top:14px;border-top:1px solid rgba(10,10,10,.16)}

/* --- outcome grid ---------------------------------------------------------- */
.outGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:860px){.outGrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.outGrid{grid-template-columns:1fr}}
.outCell{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:22px}
.outCell h4{font-size:16px;letter-spacing:-.04em;margin-bottom:8px}
.outCell p{font-size:12.5px;color:var(--muted);line-height:1.6}

/* --- navigation: application mode ------------------------------------------ */
.navApp .navtop{color:var(--ink)}
/* `.navlinks{display:flex}` outranks the HTML `hidden` attribute, so setting
   hidden on the public nav did nothing and BOTH menus rendered at once.
   Attribute selectors of equal specificity lose to a later rule, so this is
   stated explicitly rather than relying on source order. */
.navlinks[hidden]{display:none !important}
.navright .mlink{font-size:12.5px;font-weight:600}
@media(max-width:1180px){.navlinks{display:none}}

/* ==========================================================================
   HOMEPAGE: the disconnection argument
   ========================================================================== */
.pivot{background:var(--panel);color:#fff;border-radius:var(--radius-lg);padding:46px 44px;text-align:center}
.pivotK{font-size:11px;text-transform:uppercase;letter-spacing:.13em;font-weight:800;
  color:var(--brand-cyan);margin-bottom:14px}
.pivot h2{font-size:clamp(26px,3.8vw,44px);letter-spacing:-.06em;line-height:1.14;
  max-width:22ch;margin:0 auto 34px}
.pivot h2 span{color:var(--orange)}
.fragGrid{display:grid;grid-template-columns:repeat(6,1fr);gap:9px;margin-bottom:30px}
@media(max-width:900px){.fragGrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.fragGrid{grid-template-columns:repeat(2,1fr)}}
.frag{background:var(--panel-2);border:1px solid var(--panel-line);border-radius:14px;padding:16px 12px}
.frag strong{display:block;font-size:12.5px;letter-spacing:-.02em}
.frag span{display:block;font-size:11px;color:#8d9093;margin-top:4px}
.pivotEnd{color:#a2a5a8;font-size:14.5px;line-height:1.7;max-width:70ch;margin:0 auto}
.pivotArrow{margin-top:30px;display:inline-block;background:var(--orange);color:var(--ink);
  border-radius:var(--pill);padding:11px 24px;font-size:13px;font-weight:800}

/* --- six intelligence layers ----------------------------------------------- */
.layerGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:940px){.layerGrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.layerGrid{grid-template-columns:1fr}}
.layer{display:grid;grid-template-columns:auto 1fr;gap:16px;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);padding:26px;transition:.2s}
.layer:hover{border-color:var(--brand);transform:translateY(-2px);box-shadow:var(--shadow)}
.layerN{font-size:12px;font-weight:800;color:var(--brand);letter-spacing:.05em;padding-top:3px}
.layer h3{font-size:19px;letter-spacing:-.045em;margin-bottom:8px}
.layerQ{font-size:13px;color:var(--orange-ink);font-weight:700;line-height:1.5;margin-bottom:10px}
.layerW{font-size:12.5px;color:var(--muted);line-height:1.62;margin-bottom:12px}
.layerGo{font-size:11.5px;font-weight:800;color:var(--muted)}
.layer:hover .layerGo{color:var(--brand)}

/* --- four phases ----------------------------------------------------------- */
.phaseGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:940px){.phaseGrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.phaseGrid{grid-template-columns:1fr}}
.phase{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;position:relative;transition:.2s}
.phase:hover{border-color:var(--orange);transform:translateY(-2px)}
.phaseN{font-size:32px;font-weight:800;letter-spacing:-.07em;color:var(--line);line-height:1}
.phase:hover .phaseN{color:var(--orange)}
.phase h3{font-size:20px;letter-spacing:-.05em;margin:10px 0 8px}
.phaseQ{font-size:12.5px;color:var(--orange-ink);font-weight:700;line-height:1.5;margin-bottom:14px}
.phaseItems{display:flex;flex-wrap:wrap;gap:6px}
.phaseItems span{font-size:10.5px;font-weight:700;color:var(--muted);
  background:var(--paper);border:1px solid var(--line-2);border-radius:var(--pill);padding:4px 9px}

/* --- story arc -------------------------------------------------------------- */
.arcHead{background:var(--panel);color:#fff;border-radius:var(--radius) var(--radius) 0 0;padding:22px 26px}
.arcTag{display:inline-block;font-size:9.5px;text-transform:uppercase;letter-spacing:.11em;
  font-weight:800;color:var(--ink);background:var(--brand-cyan);border-radius:var(--pill);
  padding:4px 10px;margin-bottom:10px}
.arcHead strong{display:block;font-size:14px;font-weight:600;color:#e3e5e7;letter-spacing:-.02em}
.arc{background:#fff;border:1px solid var(--line);border-top:0;border-radius:0 0 var(--radius) var(--radius);
  padding:8px 26px 22px}
.arcStep{display:grid;grid-template-columns:150px 1fr;gap:20px;padding:20px 0;
  border-bottom:1px solid var(--line-2);align-items:baseline}
.arcStep:last-child{border-bottom:0}
@media(max-width:620px){.arcStep{grid-template-columns:1fr;gap:5px}}
.arcK{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:800}
.arcBody strong{display:block;font-size:22px;letter-spacing:-.05em}
.arcBody span{display:block;font-size:12.5px;color:var(--muted);margin-top:5px;line-height:1.6}
.arcStep.warn .arcBody strong{color:var(--red-ink)}
.arcStep.go .arcBody strong{color:var(--orange-ink)}
.arcFoot{margin-top:14px;font-size:12px;color:var(--muted);line-height:1.6}
.arcFoot a{color:var(--orange-ink);font-weight:700}

/* --- plan preview ----------------------------------------------------------- */
.planPreview{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:34px}
.ppK{font-size:11px;text-transform:uppercase;letter-spacing:.13em;font-weight:800;
  color:var(--brand);margin-bottom:20px}
.ppChain{display:grid;grid-template-columns:repeat(2,1fr);gap:0 30px;margin-bottom:26px}
@media(max-width:700px){.ppChain{grid-template-columns:1fr}}
.ppRow{display:grid;grid-template-columns:auto 1fr;gap:14px;padding:13px 0;
  border-bottom:1px solid var(--line-2);align-items:baseline}
.ppN{font-size:11px;font-weight:800;color:var(--faint);font-variant-numeric:tabular-nums}
.ppRow strong{display:block;font-size:14.5px;letter-spacing:-.03em}
.ppRow span{display:block;font-size:12px;color:var(--muted);margin-top:2px}

/* --- deep dive -------------------------------------------------------------- */
.deepDive{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.deepDive summary{cursor:pointer;list-style:none;display:flex;flex-direction:column;gap:5px}
.deepDive summary::-webkit-details-marker{display:none}
.ddK{font-size:10px;text-transform:uppercase;letter-spacing:.11em;font-weight:800;color:var(--brand)}
.deepDive summary strong{font-size:20px;letter-spacing:-.045em}
.deepDive summary::after{content:'Show +';font-size:11.5px;color:var(--muted);font-weight:700;margin-top:6px}
.deepDive[open] summary::after{content:'Hide −'}
.ddBody{margin-top:24px;padding-top:22px;border-top:1px solid var(--line-2)}
.ddBody > p{color:var(--muted);font-size:13.5px;line-height:1.65;margin-bottom:22px;max-width:68ch}
.ddBody .btn{margin-top:22px}

/* ==========================================================================
   ACCOUNT
   ========================================================================== */
.acctGrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:16px;align-items:start}
@media(max-width:860px){.acctGrid{grid-template-columns:1fr}}
.acctCard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px}
.acctTabs{display:flex;gap:6px;margin-bottom:24px;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--pill);padding:4px}
.acctTab{flex:1;border:0;background:none;padding:9px 14px;border-radius:var(--pill);
  font-size:13px;font-weight:800;color:var(--muted);cursor:pointer}
.acctTab[aria-pressed=true]{background:var(--ink);color:#fff}
.acctOpt{font-weight:600;color:var(--faint);font-size:11px}
.acctFine{margin-top:20px;padding-top:16px;border-top:1px solid var(--line-2);
  font-size:11.5px;color:var(--muted);line-height:1.6}
.acctFine a{color:var(--brand);font-weight:700}
.acctMsg{margin-top:14px;padding:13px 16px;border-radius:14px;font-size:12.5px;line-height:1.55}
.acctMsg.error{background:rgba(201,74,59,.09);border:1px solid rgba(201,74,59,.3);color:var(--red-ink)}
.acctMsg.ok{background:rgba(22,128,90,.09);border:1px solid rgba(22,128,90,.3);color:var(--green)}
.acctMsg.info{background:var(--brand-wash);border:1px solid var(--brand-line);color:var(--brand-deep)}
.acctMuted{color:var(--muted);font-size:13px;line-height:1.65}
.acctSide{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.acctSide h3{font-size:18px;letter-spacing:-.045em;margin-bottom:12px}
.acctSide p{font-size:13px;color:var(--muted);line-height:1.65;margin-bottom:14px}
.acctList{margin:0 0 14px;padding-left:18px}
.acctList li{font-size:12.5px;color:var(--muted);line-height:1.6;margin-bottom:10px}
.acctList strong{color:var(--ink)}
.acctSide a{color:var(--brand);font-weight:700}
.acctActions{display:flex;gap:9px;flex-wrap:wrap;margin-top:22px}
.conflictGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
@media(max-width:620px){.conflictGrid{grid-template-columns:1fr}}
.conflictCard{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:22px}
.ck{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.11em;
  font-weight:800;color:var(--muted);margin-bottom:8px}
.conflictCard strong{display:block;font-size:26px;letter-spacing:-.05em;margin-bottom:4px}
.cd{display:block;font-size:11.5px;color:var(--muted);margin-bottom:16px}