/* Self-hosted brand faces (no third-party font CDN). */
@font-face{font-family:'Libre Caslon Display';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/libre-caslon-display-latin-400-normal.woff2') format('woff2');}
/* Display has no italic cut; serve Libre Caslon Text italic under the same family so <em> renders a true italic */
@font-face{font-family:'Libre Caslon Display';font-style:italic;font-weight:400;font-display:swap;
  src:url('../fonts/libre-caslon-text-latin-400-italic.woff2') format('woff2');}
@font-face{font-family:'Libre Caslon Text';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/libre-caslon-text-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Libre Caslon Text';font-style:italic;font-weight:400;font-display:swap;
  src:url('../fonts/libre-caslon-text-latin-400-italic.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/inter-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/inter-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/inter-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Antonio';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/antonio-latin-700-normal.woff2') format('woff2');}

/* ═══════════════════ TOKENS ═══════════════════ */
:root{
  --vu-black:#1C1C1C; --vu-white:#FFFFFF;
  --vu-gold:#CFAE70; --vu-highlight:#ECB748; --vu-oak:#8C6822;
  --vu-cream:#F5F3EF; --vu-sand:#E0D5C0;
  --vu-gray-l:#E4E4E4; --vu-gray-d:#777;
  --vu-sky:#B3C9CD; --vu-sage:#8BA18E; --vu-err:#A94438;
  --metal:linear-gradient(135deg,#FEEEB6 0%,#CFAE70 45%,#B49248 100%);
  --maxw:1200px; --r:4px;
  --ease:cubic-bezier(.33,1,.68,1);
  --serif:'Libre Caslon Display','Libre Caslon Text','Times New Roman',serif;
  --serif-i:'Libre Caslon Text','Times New Roman',serif;
  --sans:'Inter',Arial,system-ui,sans-serif;
  --cond:'Antonio','Arial Narrow',Impact,sans-serif;
}
/* theme scopes — every component reads these vars, so each section theme recolors everything */
.th-dark{
  background:var(--vu-black); color:#FFFFFF;
  --tx:#FFFFFF; --tx2:rgba(255,255,255,.74); --tx3:rgba(255,255,255,.64);
  --bd:rgba(255,255,255,.15); --bdg:rgba(207,174,112,.35);
  --card:#262624; --card2:#212120; --field:#141414; --field-bd:rgba(255,255,255,.2);
  --eyebrow:#CFAE70; --link:#CFAE70; --strong:#ECB748; --focus:#ECB748; --acc:#CFAE70;
  --btn-bg:#CFAE70; --btn-tx:#1C1C1C; --btn-hv:#ECB748;
  --gold:#CFAE70; --champ:#ECB748; --muted:rgba(255,255,255,.74); --faint:rgba(255,255,255,.56); --ink:#1C1C1C;
}
.th-light, .th-cream{
  background:var(--vu-white); color:var(--vu-black);
  --tx:#1C1C1C; --tx2:#555555; --tx3:#6E6E6E;
  --bd:#E4E4E4; --bdg:rgba(148,110,36,.4);
  --card:#FFFFFF; --card2:#F5F3EF; --field:#FFFFFF; --field-bd:#D6D0C4;
  --eyebrow:#8C6822; --link:#8C6822; --strong:#8C6822; --focus:#8C6822; --acc:#8C6822;
  --btn-bg:#1C1C1C; --btn-tx:#FFFFFF; --btn-hv:#8C6822;
  --gold:#8C6822; --champ:#8C6822; --muted:#555555; --faint:#6E6E6E; --ink:#1C1C1C;
}
.th-cream{ background:var(--vu-cream); --card2:#FFFFFF; --bd:#E0D8C8;
  --eyebrow:#7A5C1E; --link:#7A5C1E; --strong:#7A5C1E; --focus:#7A5C1E; --acc:#7A5C1E;
  --gold:#7A5C1E; --champ:#7A5C1E; }

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:118px; } /* 96px bar + breathing room */
body{ font-family:var(--sans); font-size:1.0625rem; background:var(--vu-black); color:#fff; line-height:1.6;
  overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; min-height:100dvh; }
h1,h2,.module-head h3{ font-family:var(--serif); font-weight:400; line-height:1.1; letter-spacing:-.01em; color:var(--tx,#fff); }
h3,h4,h5{ font-family:var(--sans); font-weight:600; line-height:1.3; letter-spacing:-.01em; color:var(--tx,#fff); }
h1 em,h2 em,.module-head h3 em,em.s{ font-family:var(--serif-i); font-style:italic; font-weight:400; letter-spacing:0; }
p{ max-width:65ch; }
a{ color:inherit; text-decoration:none; } img{ max-width:100%; display:block; height:auto; }
button{ font:inherit; color:inherit; } input,select,textarea{ font:inherit; }
::selection{ background:rgba(207,174,112,.55); color:#1C1C1C; }
:focus-visible{ outline:2px solid var(--focus,#ECB748); outline-offset:3px; border-radius:2px; }
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(20px,5vw,48px); }
.skip{ position:absolute; left:-999px; top:10px; z-index:400; background:var(--vu-gold); color:#1C1C1C; padding:12px 20px; border-radius:var(--r); font-weight:500; }
.skip:focus{ left:16px; }
.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* Antonio microlabel */
.mono{ font-family:var(--cond); font-weight:700; font-size:.8125rem; letter-spacing:.04em; text-transform:uppercase; color:var(--eyebrow,#CFAE70); }
.eyebrow{ display:inline-flex; align-items:center; gap:12px; }
.eyebrow .tick{ width:26px; height:2px; background:var(--vu-gold); }
.you-are{ display:block; font-family:var(--cond); font-weight:700; font-size:.75rem; letter-spacing:.05em; text-transform:uppercase; color:var(--tx3); margin-bottom:14px; }

/* metallic headline — white words, gold italic emphasis (hero H1, closing-CTA H2) */
.metal{ color:var(--vu-white); }
.metal em{ color:var(--vu-gold); font-style:italic; }
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .metal em{ background:var(--metal); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; padding-bottom:.14em; margin-bottom:-.14em; }
}

/* ═══════════════════ NAV ═══════════════════ */
/* solid black banner, taller and airier, in the reference-header pattern */
header.nav{ position:fixed; inset:0 0 auto 0; z-index:200; background:var(--vu-black); border-bottom:1px solid transparent; transition:border-color .3s; }
header.nav.scrolled{ border-bottom-color:rgba(207,174,112,.2); }
header.nav .wrap{ max-width:1440px; } /* wider banner than the page columns */
header.nav .bar{ display:flex; align-items:center; justify-content:space-between; gap:clamp(16px,2vw,36px); height:96px; }
.logo{ display:flex; align-items:center; flex-shrink:1; min-width:0; }
.logo img{ height:48px; width:auto; display:block; }
nav.links{ display:flex; align-items:center; flex-wrap:nowrap; gap:clamp(0px,.5vw,10px); }
nav.links a{ position:relative; padding:10px clamp(9px,.9vw,16px); color:#fff; font-size:.9rem; font-weight:500; letter-spacing:.02em; white-space:nowrap; }
nav.links a::after{ content:''; position:absolute; left:12px; right:12px; bottom:5px; height:2px; background:var(--vu-gold);
  transform:scaleX(0); transform-origin:left; transition:transform .2s var(--ease); }
nav.links a:hover::after,nav.links a:focus-visible::after{ transform:scaleX(1); }
nav.links .nav-cta{ margin-left:clamp(8px,1vw,20px); } nav.links .nav-cta::after{ display:none; }
nav.links a.nav-cta{ color:#1C1C1C; min-height:50px; padding:13px clamp(20px,1.8vw,30px); font-size:.9rem; letter-spacing:0; } /* black on gold — AA 8:1; must beat the white nav-link rule */
.menu-btn{ display:none; background:transparent; border:1px solid rgba(255,255,255,.25); color:#fff;
  width:46px; height:46px; border-radius:var(--r); cursor:pointer; place-items:center; }
.menu-btn .b{ display:block; width:18px; height:2px; background:currentColor; transition:transform .3s var(--ease),opacity .2s; }
.menu-btn .b + .b{ margin-top:4px; }
body.menu-open .menu-btn .b1{ transform:translateY(6px) rotate(45deg); }
body.menu-open .menu-btn .b2{ opacity:0; }
body.menu-open .menu-btn .b3{ transform:translateY(-6px) rotate(-45deg); }
.mobile-menu{ position:fixed; inset:0; z-index:150; background:var(--vu-black); overflow-y:auto;
  display:flex; flex-direction:column; justify-content:flex-start; padding:96px clamp(24px,8vw,60px) 56px;
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility 0s .3s; }
/* safe centering: centers when the list fits, scrolls from the top when it does not
   (justify-content:center would clip the first links under the fixed header) */
.mobile-menu::before,.mobile-menu::after{ content:''; display:block; margin:auto; }
body.menu-open .mobile-menu{ opacity:1; visibility:visible; transition:opacity .3s var(--ease); }
body.menu-open{ overflow:hidden; }
.mobile-menu a.mlink{ font-family:var(--serif); font-size:clamp(1.5rem,7vw,2.4rem); color:#fff;
  padding:12px 0; border-bottom:1px solid rgba(255,255,255,.12); display:flex; align-items:baseline; gap:18px; }
.mobile-menu a.mlink .mono{ font-size:.75rem; color:var(--vu-gold); }
.mobile-menu .mfoot{ margin-top:30px; color:rgba(255,255,255,.55); font-size:.85rem; }

/* ═══════════════════ BUTTONS ═══════════════════ */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family:var(--sans); font-size:.95rem; font-weight:500;
  min-height:48px; padding:12px 26px; border-radius:var(--r); cursor:pointer; border:1px solid transparent; text-align:center;
  transition:background-color .2s ease-out, border-color .2s ease-out, color .2s ease-out; }
.btn svg{ width:17px; height:17px; flex-shrink:0; }
.btn-primary{ background:var(--btn-bg,#CFAE70); color:var(--btn-tx,#1C1C1C); }
.btn-primary:hover{ background:var(--btn-hv,#ECB748); color:var(--btn-tx,#1C1C1C); }
.btn-gold{ background:var(--vu-gold); color:#1C1C1C; }
.btn-gold:hover{ background:var(--vu-highlight); }
.btn-ghost{ background:transparent; color:var(--tx,#fff); border-color:var(--bd,rgba(255,255,255,.25)); }
.btn-ghost:hover{ border-color:var(--strong,#CFAE70); color:var(--strong,#CFAE70); }
.btn-sm{ min-height:44px; padding:9px 18px; font-size:.875rem; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; }

/* ═══════════════════ HERO ═══════════════════ */
.hero{ position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding:140px 0 96px; overflow:hidden; }
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.3; mix-blend-mode:screen; filter:saturate(.85); transition:opacity 1.8s ease; }
.hero-video.hv-hidden{ opacity:0; }
.hero-scrim{ position:absolute; inset:0; background:rgba(28,28,28,.42); }
.hero .wrap{ position:relative; z-index:2; }
.hero h1{ font-size:clamp(2.75rem,7vw,5.5rem); line-height:1.05; letter-spacing:-.01em; margin-top:28px; max-width:1000px; }
.hero .lead{ font-size:1.125rem; color:rgba(255,255,255,.78); max-width:54ch; margin-top:24px; }
.hero .lead b{ color:#fff; font-weight:600; }
.hero .lead .def{ color:var(--vu-gold); }
.hero .hello{ font-family:var(--serif); font-size:1.375rem; color:#fff; margin-top:26px; }
.hero .lead.closer em{ font-family:var(--serif); font-style:italic; color:var(--vu-gold); font-size:1.1em; }
.hero .meta-line{ font-family:var(--cond); font-weight:700; font-size:.8125rem; letter-spacing:.03em; text-transform:uppercase;
  color:rgba(255,255,255,.55); margin-top:22px; }
.hero .meta-line b{ color:var(--vu-gold); font-weight:700; }
.hero .cta-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top:36px; }

/* ═══════════════════ TOPIC BAR ═══════════════════ */
.topics{ padding:44px 0 40px; border-bottom:1px solid var(--vu-gray-l); }
.topics .tlabel{ text-align:center; margin-bottom:22px; color:#1C1C1C; }
.marquee{ position:relative; overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee .track{ display:flex; width:max-content; animation:mq 40s linear infinite; }
.marquee:hover .track{ animation-play-state:paused; }
.marquee .set{ display:flex; align-items:center; flex-shrink:0; }
.marquee .it{ display:inline-flex; align-items:center; padding-inline:18px; font-family:var(--cond); font-weight:700; font-size:1.05rem;
  letter-spacing:.05em; text-transform:uppercase; color:var(--vu-gray-d); white-space:nowrap; transition:color .2s ease-out; }
.marquee .it:hover{ color:#1C1C1C; }
.marquee .it::after{ content:''; width:5px; height:5px; background:var(--vu-gold); margin-left:36px; flex-shrink:0; }
@keyframes mq{ to{ transform:translateX(-50%) } }

/* ═══════════════════ MANIFESTO ═══════════════════ */
.manifesto{ padding:clamp(80px,12vw,160px) 0; }
.creed{ font-family:var(--serif); font-size:clamp(1.5rem,3vw,2.5rem); line-height:1.35; color:#1C1C1C; max-width:30ch; margin-top:26px; }
.creed em{ font-family:var(--serif-i); font-style:italic; }
.js .creed .w{ opacity:.3; transition:opacity .4s ease-out; }
.js .creed.in .w{ opacity:1; }

/* ═══════════════════ NUMBERED PROGRESSION ═══════════════════ */
.howworks{ padding:clamp(72px,10vw,140px) 0; }
.hw-cover{ display:block; margin-top:clamp(28px,4.5vh,44px); }
.hw-list{ margin-top:clamp(36px,5vw,56px); border-top:1px solid var(--vu-gray-l); }
.hw-cover + .hw-list{ margin-top:14px; }
.hw-step{ display:grid; grid-template-columns:150px 1fr auto; gap:16px 32px; align-items:baseline; padding:34px 0; border-bottom:1px solid var(--vu-gray-l); }
.hw-step .hw-no{ font-family:var(--cond); font-weight:700; font-size:clamp(2.6rem,5vw,3.4rem); line-height:1; color:var(--vu-gold); letter-spacing:.02em; }
.hw-step h3{ font-family:var(--serif); font-weight:400; font-size:clamp(1.35rem,2.4vw,1.8rem); }
.hw-step p{ color:var(--tx2); margin-top:8px; max-width:56ch; }
.hw-step .chip{ justify-self:end; }
.hw-meta{ margin-top:26px; color:var(--tx3); font-size:.9375rem; max-width:none; }
.acr-line{ margin-top:clamp(40px,6vw,64px); padding:22px 0; border-top:1px solid var(--vu-gray-l); border-bottom:1px solid var(--vu-gray-l);
  text-align:center; font-family:var(--serif); font-size:clamp(1.02rem,2vw,1.3rem); color:#1C1C1C; letter-spacing:.02em; max-width:none; }
.acr-line b{ font-weight:400; color:var(--vu-oak); }

/* ── ROUTER: five-question entry diagnostic (How Working Smarter works) ── */
.route{ margin-top:clamp(40px,6vw,64px); border:1px solid var(--bd); border-left:3px solid var(--vu-gold); border-radius:var(--r); background:var(--card2); padding:clamp(22px,3.5vw,36px); }
.route-head h3{ font-family:var(--serif); font-weight:400; font-size:clamp(1.35rem,2.4vw,1.8rem); margin-top:12px; }
.route-head h3 em{ font-family:var(--serif-i); font-style:italic; color:var(--strong); }
.route-head p{ color:var(--tx2); margin-top:10px; max-width:66ch; }
.route-qs{ display:flex; flex-direction:column; gap:14px; margin-top:24px; }
.route-q{ border:1px solid var(--bd); border-radius:var(--r); background:var(--card); padding:18px 20px; }
.route-q .qn{ font-family:var(--cond); font-weight:700; font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; color:var(--eyebrow); margin-right:10px; }
.route-qt{ font-weight:600; color:var(--tx); font-size:1rem; }
.route-opts{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:12px; }
.route-opts button{ text-align:left; border:1px solid var(--field-bd); background:var(--field); color:var(--tx2);
  border-radius:var(--r); min-height:46px; padding:11px 14px; font-size:.875rem; line-height:1.45; cursor:pointer;
  transition:border-color .2s ease-out,color .2s ease-out,background-color .2s ease-out; }
.route-opts button:hover{ border-color:var(--bdg); color:var(--tx); }
.route-opts button[aria-pressed="true"]{ border-color:var(--strong); color:var(--tx); background:rgba(207,174,112,.14); font-weight:600; }
.route-act{ display:flex; align-items:center; flex-wrap:wrap; gap:12px 18px; margin-top:22px; }
.route-hint{ font-size:.875rem; color:var(--tx3); }
.route-out:empty{ display:none; }
.route-out{ margin-top:26px; padding-top:22px; border-top:1px solid var(--bd); }
.route-out h4{ font-family:var(--serif); font-weight:400; font-size:1.25rem; }
.route-out h4 em{ font-family:var(--serif-i); font-style:italic; color:var(--strong); }
.route-cols{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:16px; }
.route-col{ border:1px solid var(--bd); border-radius:var(--r); background:var(--card); padding:16px 18px; }
.route-col.route-do{ border-top:3px solid var(--vu-oak); }
.route-col.route-skip{ border-top:3px dashed var(--vu-sage); } /* not ".skip": that is the skip-nav link, parked off screen */
.route-col .mono{ display:block; }
.route-col ul{ list-style:none; margin-top:10px; }
.route-col li{ display:flex; align-items:baseline; gap:10px; padding:8px 0; border-top:1px solid var(--bd); font-size:.9375rem; }
.route-col li:first-child{ border-top:0; }
.route-col li .no{ font-family:var(--cond); font-weight:700; font-size:.78rem; color:var(--eyebrow); letter-spacing:.04em; flex-shrink:0; }
.route-col li a{ color:var(--link); border-bottom:1px solid var(--bdg); }
.route-col li a:hover{ color:var(--strong); }
.route-col li .why{ display:block; font-size:.8125rem; color:var(--tx3); margin-top:2px; }
.route-col .none{ color:var(--tx3); font-size:.9rem; margin-top:10px; }
.route-time{ margin-top:16px; color:var(--tx2); font-size:.9375rem; max-width:70ch; }
.route-time b{ color:var(--tx); font-weight:600; }
.route-end{ margin-top:8px; color:var(--tx3); font-size:.875rem; }
.route-end a{ color:var(--link); border-bottom:1px solid var(--bdg); }
@media (max-width:640px){ .route-opts{ grid-template-columns:1fr; } .route-cols{ grid-template-columns:1fr; } }

/* ═══════════════════ SECTIONS / SHARED ═══════════════════ */
section{ position:relative; padding:clamp(64px,10vw,150px) 0; }
section + section{ border-top:1px solid transparent; }
.th-light + .th-light,.th-light + .th-cream,.th-cream + .th-light{ border-top-color:var(--vu-gray-l); }
.sec-head{ max-width:840px; margin-bottom:clamp(36px,6vw,64px); }
.sec-head h2{ font-size:clamp(2rem,4.5vw,3.5rem); margin-top:18px; }
.sec-head p{ color:var(--tx2); margin-top:18px; font-size:1.125rem; }
/* book mode: scroll reveals are retired; pages animate as a whole (.reveal is inert, .srev still staggers app results) */
.js .reveal{ opacity:1; transform:none; }
.js .srev{ opacity:0; transform:translateY(16px); transition:opacity .35s ease-out, transform .35s ease-out; }
.js .srev.in{ opacity:1; transform:none; }
.chip{ display:inline-flex; align-items:center; gap:8px; font-family:var(--cond); font-weight:700; font-size:.72rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--tx2); border:1px solid var(--bd); border-radius:var(--r); padding:6px 12px; }
.honest{ display:inline-flex; align-items:flex-start; gap:10px; margin-top:18px; padding:14px 16px; border-radius:var(--r);
  border:1px dashed var(--bdg); color:var(--tx2); font-size:.9rem; max-width:660px; }
.honest svg{ width:16px; height:16px; flex-shrink:0; color:var(--eyebrow); margin-top:3px; }
.lframe{ display:block; margin-top:18px; }
.lf-chip{ display:inline-flex; align-items:baseline; gap:9px; margin:0 6px 8px 0; border:1px solid var(--bd); border-radius:var(--r); vertical-align:top;
  padding:8px 12px; font-size:.85rem; color:var(--tx2); background:var(--card2); }
.lf-chip b{ font-family:var(--cond); font-weight:700; font-size:.68rem; letter-spacing:.05em; text-transform:uppercase; color:var(--eyebrow); white-space:nowrap; }
.lf-why{ display:block; color:var(--tx2); font-size:.9375rem; margin-top:6px; max-width:65ch; }
.lf-why b{ color:var(--tx); font-weight:600; }
.micro{ display:flex; flex-wrap:wrap; gap:10px 22px; margin:0 0 24px; padding:13px 16px;
  border:1px solid var(--bd); border-radius:var(--r); background:var(--card2); }
.micro span{ display:inline-flex; align-items:center; gap:9px; font-size:.875rem; color:var(--tx2); }
.micro i{ font-style:normal; font-family:var(--cond); font-weight:700; font-size:.72rem; color:#1C1C1C;
  background:var(--vu-gold); width:20px; height:20px; border-radius:2px; display:grid; place-items:center; flex-shrink:0; }
.module{ margin-top:clamp(48px,7vw,80px); }
.module-head{ display:block; margin-bottom:26px; }
.module-head .mno{ display:block; font-family:var(--cond); font-weight:700; font-size:.78rem; letter-spacing:.05em; text-transform:uppercase; color:var(--eyebrow); margin-bottom:10px; }
.module-head h3{ font-size:clamp(1.45rem,2.8vw,2.1rem); }
.module-head p{ color:var(--tx2); max-width:66ch; margin-top:12px; }
.module-head .lframe{ margin-top:16px; }

/* concept block — the mental model before every activity */
.concept{ margin:0 0 26px; padding:2px 0 2px 20px; border-left:3px solid var(--vu-gold); max-width:780px; }
.concept .c-label{ display:block; font-family:var(--cond); font-weight:700; font-size:.72rem; letter-spacing:.07em; text-transform:uppercase; color:var(--eyebrow); margin-bottom:8px; }
.concept p{ color:var(--tx2); font-size:.9575rem; line-height:1.75; max-width:68ch; }
.concept p + p{ margin-top:10px; }
.concept p b{ color:var(--tx); font-weight:600; }
.concept p em{ font-family:var(--serif-i); font-style:italic; }

/* bridge — one connective sentence handing a section to the next */
.bridge{ display:flex; align-items:baseline; flex-wrap:wrap; gap:10px 18px; margin-top:clamp(44px,6vw,64px); padding-top:24px; border-top:1px solid var(--bd); }
.bridge.mid{ margin-top:32px; padding-top:20px; }
.bridge .b-label{ display:inline-flex; align-items:center; gap:10px; font-family:var(--cond); font-weight:700; font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--eyebrow); }
.bridge .b-label::before{ content:''; width:26px; height:2px; background:var(--vu-gold); }
.bridge p{ font-family:var(--serif); font-size:clamp(1.05rem,2.2vw,1.3rem); line-height:1.45; color:var(--tx); max-width:none; }
.bridge p em{ font-family:var(--serif-i); font-style:italic; color:var(--strong); }

/* evidence — a real citation, named and linked, grounding the module */
.evidence{ margin-top:24px; border:1px solid var(--bd); border-left:3px solid var(--vu-gold); border-radius:var(--r); background:var(--card); padding:20px 22px; max-width:820px; }
.evidence .e-label{ display:block; font-family:var(--cond); font-weight:700; font-size:.72rem; letter-spacing:.07em; text-transform:uppercase; color:var(--eyebrow); margin-bottom:10px; }
.evidence p{ color:var(--tx2); font-size:.9375rem; line-height:1.75; max-width:none; }
.evidence p + p{ margin-top:10px; }
.evidence p b{ color:var(--tx); font-weight:600; }
.evidence p em{ font-family:var(--serif-i); font-style:italic; }
.evidence .e-src{ display:block; margin-top:12px; padding-top:10px; border-top:1px solid var(--bd); font-size:.83rem; color:var(--tx3); }

/* ═══════════════════ LEARN — cards ═══════════════════ */
.flip-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.flip-grid.five{ grid-template-columns:repeat(5,1fr); }
.fcard button{ width:100%; height:100%; border:1px solid var(--bd); border-radius:var(--r); background:var(--card);
  cursor:pointer; text-align:left; padding:24px 22px; display:flex; flex-direction:column; transition:border-color .2s ease-out; }
.fcard button:hover{ border-color:var(--bdg); }
.fcard button.flipped{ border-color:var(--bdg); background:var(--card2); }
.fcard .face{ display:flex; flex-direction:column; flex:1; }
.fcard .face.back{ display:none; }
.fcard button.flipped .face.front{ display:none; }
.fcard button.flipped .face.back{ display:flex; }
.fcard .abbr{ font-family:var(--cond); font-weight:700; font-size:1.9rem; line-height:1; color:var(--vu-gold); letter-spacing:.02em; }
.fcard .abbr-ic{ width:30px; height:30px; color:var(--vu-gold); flex-shrink:0; }
.fcard h4{ font-size:1.08rem; margin-top:12px; }
.fcard .def{ color:var(--tx2); font-size:.9rem; margin-top:8px; }
.fcard .hint{ margin-top:auto; padding-top:18px; display:inline-flex; align-items:center; gap:8px;
  font-family:var(--cond); font-weight:700; font-size:.68rem; letter-spacing:.05em; text-transform:uppercase; color:var(--eyebrow); }
.fcard .hint svg{ width:13px; height:13px; }
.fcard .back .tag{ font-family:var(--cond); font-weight:700; font-size:.68rem; letter-spacing:.05em; text-transform:uppercase; color:var(--eyebrow); }
.fcard .back p{ color:var(--tx2); font-size:.9rem; margin-top:12px; }
.fcard .back p b{ color:var(--tx); font-weight:600; }

/* LLM demo */
.llm{ border:1px solid var(--bd); border-radius:var(--r); background:var(--card); padding:clamp(24px,4vw,42px); margin-top:4px; }
.llm .sentence{ font-family:var(--serif); font-size:clamp(1.25rem,2.6vw,1.8rem); line-height:1.4; max-width:820px; }
.llm .sentence .blank{ display:inline-block; min-width:3.2em; border-bottom:2px solid var(--vu-gold); color:var(--vu-oak);
  font-family:var(--serif-i); font-style:italic; text-align:center; padding:0 .25em; }
.llm-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(24px,4vw,48px); margin-top:30px; align-items:start; }
.pbars{ display:flex; flex-direction:column; gap:12px; }
.pbar{ display:grid; grid-template-columns:110px 1fr 52px; align-items:center; gap:12px; }
.pbar .w{ font-size:.85rem; font-weight:500; color:var(--tx); text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pbar .rail{ height:24px; border-radius:2px; background:var(--vu-cream); border:1px solid var(--bd); overflow:hidden; }
.pbar .fill{ height:100%; width:0%; background:var(--vu-gold); transition:width .38s ease-out; }
.pbar.top .fill{ background:var(--vu-oak); }
.pbar .pct{ font-family:var(--cond); font-weight:700; font-size:.78rem; color:var(--tx3); }
.llm-ctrl{ display:flex; flex-direction:column; gap:18px; }
.llm-ctrl .ctl-row{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; }
.llm-ctrl label{ font-family:var(--cond); font-weight:700; font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; color:var(--tx2); }
.llm-ctrl input[type=range]{ flex:1; min-width:140px; accent-color:var(--vu-oak); height:28px; }
.llm-ctrl .tval{ font-family:var(--cond); font-weight:700; font-size:.85rem; color:var(--vu-oak); min-width:3ch; }
.llm-note{ border-left:2px solid var(--vu-gold); padding:2px 0 2px 14px; color:var(--tx2); font-size:.9375rem; }
.llm-note b{ color:var(--tx); font-weight:600; }
.llm-note + .llm-note{ margin-top:12px; }
.demo-steps{ margin:12px 0 0; padding-left:22px; max-width:66ch; color:var(--tx2); }
.demo-steps li{ margin-top:6px; }
.demo-steps li::marker{ font-family:var(--cond); font-weight:700; color:var(--vu-oak); }
.pb-head{ font-family:var(--cond); font-weight:700; font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; color:var(--tx2); margin-bottom:10px; }
.pb-cap{ font-size:.8rem; color:var(--tx3); margin-top:10px; }
.ctl-temp{ flex-direction:column; align-items:stretch; gap:6px; }
.t-ends{ display:flex; justify-content:space-between; gap:12px; font-family:var(--cond); font-weight:700; font-size:.68rem; letter-spacing:.04em; text-transform:uppercase; color:var(--tx3); }

/* myths */
.myth-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.myth{ position:relative; border:1px solid var(--bd); border-radius:var(--r); background:var(--card); }
.myth > button{ width:100%; min-height:64px; border:0; background:none; cursor:pointer; text-align:left; padding:20px 56px 20px 22px;
  font-weight:600; font-size:1rem; line-height:1.45; color:var(--tx); }
.myth .flag{ position:absolute; top:18px; right:16px; width:28px; height:28px; border-radius:2px; display:grid; place-items:center;
  border:1px solid var(--bd); color:var(--eyebrow); transition:transform .2s var(--ease); pointer-events:none; }
.myth .flag svg{ width:14px; height:14px; }
.myth.open .flag{ transform:rotate(45deg); }
.myth .verdict{ display:none; padding:0 22px 20px; }
.myth.open .verdict{ display:block; }
.myth .vtag{ display:inline-flex; align-items:center; font-family:var(--cond); font-weight:700; font-size:.7rem; letter-spacing:.05em;
  text-transform:uppercase; padding:5px 10px; border-radius:2px; border:1px solid; }
.myth .vtag.myth-v{ color:#7A5C1E; border-color:var(--vu-gold); background:rgba(207,174,112,.14); }
.myth .vtag.fact-v{ color:#42604A; border-color:var(--vu-sage); background:rgba(139,161,142,.16); }
.myth .verdict p{ color:var(--tx2); font-size:.9375rem; margin-top:12px; }

/* techniques */
.tech-list{ display:flex; flex-direction:column; gap:12px; }
.tech{ display:grid; grid-template-columns:40px 1fr; gap:16px; align-items:start; border:1px solid var(--bd);
  border-radius:var(--r); padding:20px; background:var(--card); }
.tech .t-no{ font-family:var(--cond); font-weight:700; font-size:.85rem; color:#1C1C1C; background:var(--vu-gold);
  width:30px; height:30px; border-radius:2px; display:grid; place-items:center; margin-top:2px; }
.tech h4{ font-size:1.02rem; }
.tech .t-why{ color:var(--tx2); font-size:.9rem; margin-top:4px; }
.tech code{ display:block; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.8rem; line-height:1.7; color:var(--tx);
  background:var(--card2); border:1px solid var(--bd); border-radius:var(--r); padding:10px 14px; margin-top:12px; white-space:pre-wrap; }
.tech .btn{ margin-top:10px; }

/* hallucination drill */
.hal-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.hal{ border:1px solid var(--bd); border-radius:var(--r); padding:20px 22px; background:var(--card); transition:border-color .2s ease-out; }
.hal.done{ border-color:var(--bdg); }
.hal-q{ font-family:var(--cond); font-weight:700; font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; color:var(--eyebrow); }
.hal-a{ margin-top:12px; color:var(--tx2); font-size:.9375rem; line-height:1.85; max-width:none; }
button.hal-span{ display:inline; background:none; border:0; border-bottom:1.5px dashed var(--bdg); color:var(--tx);
  cursor:pointer; font:inherit; padding:1px 3px; border-radius:2px; transition:color .2s ease-out, background-color .2s ease-out; }
button.hal-span:hover{ background:rgba(207,174,112,.14); }
button.hal-span.correct{ background:rgba(207,174,112,.28); border-bottom-color:var(--vu-oak); color:var(--tx); font-weight:600; }
button.hal-span.wrong{ color:var(--vu-err); border-bottom-color:var(--vu-err); }
.hal-reveal{ display:none; margin-top:12px; font-size:.875rem; color:var(--tx2); border-left:2px solid var(--vu-gold); padding-left:12px; }
.hal-status{ margin-top:18px; padding:14px 18px; border-radius:var(--r); border:1px solid var(--bdg);
  background:rgba(207,174,112,.1); color:var(--tx); font-size:.9375rem; max-width:none; }

/* go-deeper */
details.deeper{ margin-top:20px; border:1px solid var(--bd); border-radius:var(--r); background:var(--card); max-width:900px; }
details.deeper summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:12px; padding:15px 20px;
  font-weight:500; color:var(--tx2); min-height:52px; transition:color .2s ease-out; }
details.deeper summary::-webkit-details-marker{ display:none; }
details.deeper summary:hover{ color:var(--tx); }
details.deeper summary .dx{ width:26px; height:26px; border-radius:2px; border:1px solid var(--bd); display:grid;
  place-items:center; color:var(--eyebrow); flex-shrink:0; transition:transform .2s var(--ease); }
details.deeper summary .dx svg{ width:14px; height:14px; }
details.deeper[open] summary .dx{ transform:rotate(45deg); }
details.deeper .d-body{ padding:0 20px 20px; color:var(--tx2); font-size:.9375rem; }
details.deeper .d-body p{ margin-top:10px; }
details.deeper .d-body b{ color:var(--tx); font-weight:600; }

/* YouTube facades — always FLH black card */
.yt{ position:relative; aspect-ratio:16/9; border-radius:var(--r); overflow:hidden; border:1px solid rgba(207,174,112,.45); max-width:760px; background:#1C1C1C; }
.yt iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.yt-btn{ position:absolute; inset:0; width:100%; height:100%; background:none; border:0; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:20px; }
.yt-play{ width:64px; height:64px; border-radius:var(--r); background:var(--vu-gold); display:grid; place-items:center; color:#1C1C1C;
  transition:background-color .2s ease-out; }
.yt-btn:hover .yt-play{ background:var(--vu-highlight); }
.yt-play svg{ width:26px; height:26px; margin-left:3px; }
.yt-t{ font-weight:600; font-size:1rem; color:#fff; text-align:center; max-width:460px; }
.yt-sub{ font-size:.68rem; color:var(--vu-gold); }
.yt-fallback{ margin:10px 2px 0; font-size:.85rem; color:var(--tx3); }
.yt-fallback a,.pol a,.wb-practice p a,.honest a,.evidence a,.rstep a,.concept p a,details.deeper .d-body a{ color:var(--link); border-bottom:1px solid var(--bdg); }
.yt-fallback a:hover,.evidence a:hover,.rstep a:hover,.concept p a:hover,details.deeper .d-body a:hover{ color:var(--strong); }
</style>
/* ═══════════════════ PLAYGROUND — TABS + FORMS ═══════════════════ */
.ptabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:24px; border-bottom:1px solid var(--bd); padding-bottom:14px; }
.ptab{ border:1px solid var(--bd); background:transparent; color:var(--tx2); cursor:pointer;
  font-weight:500; font-size:.9rem; min-height:48px; padding:11px 20px; border-radius:var(--r);
  display:inline-flex; align-items:center; gap:10px; transition:color .2s ease-out,border-color .2s ease-out,background-color .2s ease-out; }
.ptab svg{ width:16px; height:16px; }
.ptab:hover{ color:var(--tx); border-color:var(--bdg); }
.ptab[aria-selected="true"]{ color:#1C1C1C; background:var(--vu-gold); border-color:var(--vu-gold); }
.ppanel{ border:1px solid var(--bdg); border-radius:var(--r); background:var(--card2); padding:clamp(22px,4vw,40px); }
.ppanel[hidden]{ display:none; }
.btn[hidden]{ display:none; }
.app-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,44px); align-items:start; }
.field{ display:flex; flex-direction:column; gap:8px; margin-bottom:18px; }
.field label,.field .flabel{ font-family:var(--cond); font-weight:700; font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; color:var(--tx2); }
.crl{ display:inline-grid; place-items:center; width:20px; height:20px; margin-right:8px; border:1px solid var(--bdg); border-radius:2px;
  color:var(--strong); background:rgba(207,174,112,.1); font-size:.7rem; line-height:1; vertical-align:-4px; }
.itv-checks{ margin:0; gap:10px 18px; }
details.pl-opt{ margin:0 0 18px; max-width:none; }
.pl-opt .d-body .field{ margin-bottom:14px; }
.pl-opt .d-body .field:last-child{ margin-bottom:0; }
.field .hinttxt{ font-size:.8rem; color:var(--tx3); margin-top:-2px; }
.field input[type=text],.field textarea,.field select{ width:100%; min-height:48px; padding:12px 16px; border-radius:var(--r); color:var(--tx);
  background:var(--field); border:1px solid var(--field-bd); transition:border-color .2s ease-out, box-shadow .2s ease-out; }
.field textarea{ resize:vertical; min-height:110px; line-height:1.6; }
.field select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23CFAE70' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:16px; padding-right:44px; cursor:pointer; }
.field select option{ background:var(--field); color:var(--tx); }
.field input:focus,.field textarea:focus,.field select:focus{ outline:none; border-color:var(--focus); box-shadow:0 0 0 3px rgba(207,174,112,.25); }
.field input::placeholder,.field textarea::placeholder{ color:var(--tx3); opacity:1; }
.checks{ display:flex; flex-wrap:wrap; gap:12px 22px; margin:4px 0 18px; }
.checks label{ display:inline-flex; align-items:center; gap:10px; font-size:.9rem; color:var(--tx2); cursor:pointer; min-height:44px; }
.checks input{ width:18px; height:18px; accent-color:var(--acc); cursor:pointer; }
.nudge{ display:none; align-items:center; gap:10px; margin-top:14px; padding:12px 16px; border-radius:var(--r); font-size:.9rem;
  color:var(--tx); background:rgba(207,174,112,.12); border:1px solid var(--bdg); }
.nudge.show{ display:flex; }
.nudge svg{ width:16px; height:16px; flex-shrink:0; color:var(--eyebrow); }

/* prompt lab preview */
.preview-box{ position:sticky; top:96px; }
.preview-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
.preview{ border-radius:var(--r); border:1px solid var(--field-bd); background:var(--field); padding:18px 20px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.84rem; line-height:1.75; color:var(--tx); white-space:pre-wrap; word-break:break-word;
  min-height:200px; max-height:420px; overflow:auto; }
.preview .ph{ color:var(--tx3); font-style:italic; }
.meter{ margin-top:18px; }
.meter .mrow{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; gap:12px; }
.meter .mlabel{ font-family:var(--cond); font-weight:700; font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; color:var(--tx2); }
.meter .mscore{ font-weight:600; font-size:.9rem; color:var(--strong); }
.meter .rail{ height:8px; border-radius:2px; background:rgba(207,174,112,.14); border:1px solid var(--bd); overflow:hidden; }
.meter .fill{ height:100%; width:0%; background:var(--vu-gold); transition:width .38s ease-out; }
.launch-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.copied{ color:var(--strong) !important; }

/* grader */
.grade-out{ margin-top:6px; }
.grade-badge{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.grade-letter{ width:84px; height:84px; border-radius:var(--r); display:grid; place-items:center; font-family:var(--cond); font-weight:700; font-size:2.7rem;
  color:#1C1C1C; background:var(--vu-gold); }
.grade-badge .gword{ font-weight:600; font-size:1.25rem; color:var(--tx); }
.grade-badge .gword .soft{ color:var(--tx3); font-weight:400; }
.grade-badge .gsub{ color:var(--tx2); font-size:.9375rem; max-width:400px; }
.dim-bars{ display:flex; flex-direction:column; gap:14px; margin-top:26px; }
.dim{ display:grid; grid-template-columns:130px 1fr 44px; gap:12px; align-items:center; }
.dim .dl{ font-family:var(--cond); font-weight:700; font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; color:var(--tx2); text-align:right; }
.dim .rail{ display:block; height:10px; border-radius:2px; background:rgba(207,174,112,.12); border:1px solid var(--bd); overflow:hidden; }
.dim .fill{ display:block; height:100%; width:0%; background:var(--vu-gold); transition:width .38s ease-out; }
.dim .dv{ font-family:var(--cond); font-weight:700; font-size:.78rem; color:var(--tx3); }
.sugg{ margin-top:26px; display:flex; flex-direction:column; gap:12px; }
.sugg li{ list-style:none; display:flex; gap:12px; align-items:flex-start; color:var(--tx2); font-size:.9375rem;
  padding:14px 16px; border-radius:var(--r); border:1px solid var(--bd); background:var(--card); }
.sugg li svg{ width:16px; height:16px; flex-shrink:0; color:var(--eyebrow); margin-top:3px; }
.sugg li b{ color:var(--tx); font-weight:600; }

/* tool match / self-check question blocks */
.tm-lead{ margin:14px 2px 12px; font-size:.9375rem; color:var(--tx2); max-width:66ch; }
.tm-q{ border:1px solid var(--bd); border-radius:var(--r); padding:18px 20px; margin-bottom:14px; background:var(--card); }
.tm-q legend{ float:left; width:100%; font-weight:600; font-size:.98rem; padding:0; margin-bottom:12px; color:var(--tx); }
.tm-q legend .qn{ font-family:var(--cond); font-weight:700; font-size:.72rem; letter-spacing:.05em; color:var(--eyebrow); margin-right:10px; }
.tm-opts{ display:flex; gap:10px; clear:both; }
.tm-opts label{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:46px; padding:10px 16px;
  border-radius:var(--r); border:1px solid var(--field-bd); background:var(--field); color:var(--tx2); cursor:pointer; font-size:.9rem;
  transition:border-color .2s ease-out,color .2s ease-out,background-color .2s ease-out; }
.tm-opts label:hover{ border-color:var(--bdg); color:var(--tx); }
.tm-opts input{ accent-color:var(--acc); width:17px; height:17px; cursor:pointer; }
.tm-opts label:has(input:checked){ border-color:var(--strong); color:var(--tx); background:rgba(207,174,112,.14); }
.result-card{ border-radius:var(--r); padding:26px; background:var(--card); border:1px solid var(--bdg); }
.result-card .rc-head{ display:flex; align-items:center; gap:16px; }
.rc-glyph{ width:54px; height:54px; border-radius:var(--r); display:grid; place-items:center; flex-shrink:0;
  background:var(--vu-gold); color:#1C1C1C; }
.rc-glyph svg{ width:27px; height:27px; }
.result-card h4{ font-size:1.35rem; }
.result-card .rc-sub{ font-family:var(--cond); font-weight:700; font-size:.7rem; letter-spacing:.05em; text-transform:uppercase; color:var(--eyebrow); margin-top:4px; display:block; }
.result-card ul{ list-style:none; margin-top:18px; display:flex; flex-direction:column; gap:10px; }
.result-card li{ display:flex; gap:10px; align-items:flex-start; color:var(--tx2); font-size:.9375rem; }
.result-card li svg{ width:16px; height:16px; flex-shrink:0; color:var(--eyebrow); margin-top:4px; }
.result-card .rc-note{ color:var(--tx2); margin-top:16px; font-size:.9375rem; }
.result-card .rc-fine{ color:var(--tx3); margin-top:12px; font-size:.83rem; }

/* ═══════════════════ SIMULATOR ═══════════════════ */
.sim-shell{ border:1px solid var(--bd); border-radius:var(--r); background:var(--card); padding:clamp(22px,4vw,46px); }
.sim-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.sim-chips{ display:flex; flex-wrap:wrap; gap:10px; margin:2px 0 20px; }
.sim-chip{ border:1px dashed var(--bdg); background:transparent; color:var(--tx2); border-radius:var(--r);
  min-height:44px; padding:9px 18px; font-size:.85rem; cursor:pointer; transition:color .2s ease-out,border-color .2s ease-out,background-color .2s ease-out; }
.sim-chip:hover{ color:var(--tx); border-color:var(--strong); background:rgba(207,174,112,.1); }
.sim-chip[hidden]{ display:none; }
#simFocusChip{ border-style:solid; border-color:var(--strong); color:var(--tx); background:rgba(207,174,112,.12); font-weight:600; }
.ra-fchip[aria-pressed="true"]{ border-style:solid; border-color:var(--strong); color:var(--tx); background:rgba(207,174,112,.12); }
.sim-steps{ display:none; margin-top:30px; flex-direction:column; gap:12px; }
.sim-steps.show{ display:flex; }
.sim-step{ display:flex; align-items:center; gap:14px; color:var(--tx3); font-family:var(--cond); font-weight:700; font-size:.8rem;
  letter-spacing:.05em; text-transform:uppercase; opacity:.45; transition:opacity .2s ease-out,color .2s ease-out; }
.sim-step .dot{ width:26px; height:26px; border-radius:2px; border:1px solid var(--bd); display:grid; place-items:center; flex-shrink:0; }
.sim-step .dot svg{ width:13px; height:13px; opacity:0; transition:opacity .2s; color:#1C1C1C; }
.sim-step.active{ opacity:1; color:var(--strong); }
.sim-step.active .dot{ border-color:var(--strong); }
.sim-step.done{ opacity:1; color:var(--tx2); }
.sim-step.done .dot{ background:var(--vu-gold); border-color:var(--vu-gold); }
.sim-step.done .dot svg{ opacity:1; }
.sim-out{ margin-top:34px; }
.sim-out .sub-h{ display:flex; align-items:baseline; gap:14px; margin:34px 0 16px; flex-wrap:wrap; }
.sim-out .sub-h h4{ font-family:var(--serif); font-weight:400; font-size:1.4rem; }
.sim-out .sub-h:first-child{ margin-top:0; }
.opp-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.opp{ border:1px solid var(--bd); border-radius:var(--r); padding:22px 20px; background:var(--card2); display:flex; flex-direction:column; gap:10px; }
.opp .o-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.opp h5{ font-size:1rem; }
.opp .lvl{ font-family:var(--cond); font-weight:700; font-size:.66rem; letter-spacing:.05em; text-transform:uppercase; padding:5px 9px; border-radius:2px; white-space:nowrap; border:1px solid; }
.lvl.automate{ color:#42604A; border-color:var(--vu-sage); background:rgba(139,161,142,.16); }
.lvl.assist{ color:#7A5C1E; border-color:var(--vu-gold); background:rgba(207,174,112,.14); }
.lvl.advise{ color:#3E5A66; border-color:var(--vu-sky); background:rgba(179,201,205,.22); }
.opp p{ color:var(--tx2); font-size:.875rem; flex:1; }
.opp .o-meta{ display:flex; justify-content:space-between; gap:10px; padding-top:12px; border-top:1px solid var(--bd);
  font-family:var(--cond); font-weight:700; font-size:.7rem; letter-spacing:.05em; text-transform:uppercase; color:var(--tx3); }
.opp .o-meta b{ color:var(--strong); font-weight:700; }
.sp-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.sp{ border:1px solid var(--bd); border-radius:var(--r); padding:20px; background:var(--card2); display:flex; flex-direction:column; gap:12px; }
.sp .sp-txt{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.78rem; line-height:1.7; color:var(--tx2); flex:1; max-height:190px; overflow:auto; }
.sp .btn{ align-self:flex-start; }
.watchout{ border-radius:var(--r); border:2px solid var(--vu-gold); background:var(--card2);
  padding:24px 26px; display:flex; gap:18px; align-items:flex-start; }
.watchout .w-ic{ width:44px; height:44px; border-radius:var(--r); background:var(--vu-gold); color:#1C1C1C; display:grid; place-items:center; flex-shrink:0; }
.watchout .w-ic svg{ width:22px; height:22px; }
.watchout h5{ font-size:1.08rem; }
.watchout p{ color:var(--tx2); font-size:.9375rem; margin-top:8px; }
.watchout p b{ color:var(--tx); font-weight:600; }
.watchout .hits{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.watchout .hits span{ font-family:var(--cond); font-weight:700; font-size:.7rem; letter-spacing:.05em; text-transform:uppercase; color:var(--vu-oak);
  border:1px solid var(--vu-gold); border-radius:2px; padding:4px 10px; }
.watchout.ok{ border:1px solid var(--bd); }
.roadmap{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.roadmap.three{ grid-template-columns:repeat(3,1fr); }
.rstep{ border:1px solid var(--bd); border-radius:var(--r); padding:22px 20px; background:var(--card2); }
.rstep .rno{ font-family:var(--cond); font-weight:700; font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; color:var(--eyebrow); }
.rstep h5{ font-size:1rem; margin-top:8px; }
.rstep p{ color:var(--tx2); font-size:.875rem; margin-top:8px; }
.rstep ul{ list-style:none; margin-top:10px; display:flex; flex-direction:column; gap:9px; }
.rstep li{ display:flex; gap:9px; align-items:flex-start; color:var(--tx2); font-size:.85rem; }
.rstep li svg{ width:14px; height:14px; flex-shrink:0; color:var(--eyebrow); margin-top:4px; }

/* ═══════════════════ TOOLS ═══════════════════ */
.tool-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.tool{ border:1px solid var(--bd); border-radius:var(--r); background:var(--card); padding:30px 26px; display:flex; flex-direction:column; }
.tool .t-glyph{ width:54px; height:54px; border-radius:var(--r); display:grid; place-items:center; margin-bottom:18px;
  background:rgba(207,174,112,.14); border:1px solid var(--bdg); color:var(--eyebrow); }
.tool .t-glyph svg{ width:27px; height:27px; }
.tool h3{ font-size:1.35rem; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.tool .t-tag{ color:var(--tx2); font-size:.9375rem; margin-top:8px; }
.tool .vu-badge{ display:inline-flex; align-items:center; font-family:var(--cond); font-weight:700; font-size:.66rem; letter-spacing:.05em; text-transform:uppercase;
  color:#1C1C1C; background:var(--vu-gold); padding:5px 10px; border-radius:2px; }
.tool dl{ margin-top:20px; display:flex; flex-direction:column; }
.tool dl div{ display:grid; grid-template-columns:96px 1fr; gap:12px; padding:12px 0; border-top:1px solid var(--bd); }
.tool dt{ font-family:var(--cond); font-weight:700; font-size:.68rem; letter-spacing:.05em; text-transform:uppercase; color:var(--tx3); padding-top:3px; }
.tool dd{ color:var(--tx2); font-size:.9rem; }
.tool dd b{ color:var(--tx); font-weight:600; }
.tool .t-cta{ margin-top:auto; padding-top:22px; }
.tool.hero-tool{ background:#1C1C1C; border:1px solid rgba(207,174,112,.55); color:#fff;
  --tx:#FFFFFF; --tx2:rgba(255,255,255,.75); --tx3:rgba(255,255,255,.64); --bd:rgba(255,255,255,.16); --bdg:rgba(207,174,112,.4);
  --eyebrow:#CFAE70; --link:#CFAE70; --strong:#ECB748; --focus:#ECB748;
  --btn-bg:#CFAE70; --btn-tx:#1C1C1C; --btn-hv:#ECB748;
  --gold:#CFAE70; --champ:#ECB748; --muted:rgba(255,255,255,.75); --faint:rgba(255,255,255,.56); }
.rule-strip{ margin-top:28px; border-radius:var(--r); border:1px solid var(--bd); padding:20px 26px; display:flex; flex-wrap:wrap; gap:14px 34px;
  align-items:center; justify-content:center; background:var(--card2); text-align:center; }
.rule-strip .r{ display:inline-flex; align-items:center; gap:10px; font-weight:500; font-size:.98rem; color:var(--tx); }
.rule-strip .r svg{ width:16px; height:16px; color:var(--eyebrow); flex-shrink:0; }
.rule-strip .r b{ color:#7A5C1E; font-weight:600; }

/* ═══════════════════ PRINCIPLES / ETHICS / WELLBEING ═══════════════════ */
.resp-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.principle{ border:1px solid var(--bd); border-radius:var(--r); background:var(--card); padding:26px 24px; }
.principle .p-ic{ width:46px; height:46px; border-radius:var(--r); display:grid; place-items:center; margin-bottom:18px;
  background:rgba(207,174,112,.14); border:1px solid var(--bdg); color:var(--eyebrow); }
.principle .p-ic svg{ width:23px; height:23px; }
.principle h3{ font-size:1.12rem; }
.principle p{ color:var(--tx2); font-size:.9375rem; margin-top:10px; }
.never{ margin-top:28px; border-radius:var(--r); border:2px solid var(--vu-gold); padding:28px clamp(22px,4vw,40px); background:var(--card2); }
.never h3{ display:flex; align-items:center; gap:12px; font-size:1.2rem; }
.never h3 svg{ width:22px; height:22px; color:var(--eyebrow); flex-shrink:0; }
.never ul{ list-style:none; margin-top:16px; display:grid; grid-template-columns:repeat(4,1fr); gap:10px 22px; }
.never li{ display:flex; gap:10px; align-items:flex-start; color:var(--tx2); font-size:.9rem; }
.never li svg{ width:15px; height:15px; flex-shrink:0; color:var(--vu-oak); margin-top:5px; }
.never .pol{ margin-top:18px; font-size:.875rem; color:var(--tx3); max-width:none; }
.dilemma-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.dilemma{ border:1px solid var(--bd); border-radius:var(--r); background:var(--card); padding:26px 24px; display:flex; flex-direction:column; }
.dilemma .d-no{ font-family:var(--cond); font-weight:700; font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; color:var(--eyebrow); }
.dilemma h4{ font-size:1.12rem; margin-top:8px; }
.dilemma .d-sit{ color:var(--tx2); font-size:.9375rem; margin-top:10px; }
.d-choices{ display:flex; flex-direction:column; gap:8px; margin-top:16px; }
.d-choices button{ text-align:left; border:1px solid var(--field-bd); background:var(--field); color:var(--tx2);
  border-radius:var(--r); min-height:46px; padding:11px 15px; font-size:.875rem; line-height:1.5; cursor:pointer;
  transition:border-color .2s ease-out,color .2s ease-out,background-color .2s ease-out; }
.d-choices button:hover{ border-color:var(--bdg); color:var(--tx); }
.d-choices button[aria-pressed="true"]{ border-color:var(--strong); color:var(--tx); background:rgba(207,174,112,.14); }
.d-take{ display:none; margin-top:16px; border-top:1px solid var(--bd); padding-top:14px; }
.d-take.show{ display:block; }
.d-react{ display:block; color:var(--strong); font-size:1.02rem; font-family:var(--serif-i); font-style:italic; }
.d-our{ color:var(--tx2); font-size:.9rem; margin-top:10px; }
.d-our b{ color:var(--tx); font-weight:600; }
.d-take .chip{ margin-top:12px; }
.wb-example{ color:var(--tx3); font-size:.875rem; margin-top:10px; padding-left:14px; border-left:2px solid var(--bd); }
.wb-example b{ color:var(--tx2); font-weight:600; }
.wb-counter{ margin-top:14px; padding:12px 14px; border-radius:var(--r); border:1px solid var(--bdg);
  background:rgba(207,174,112,.1); color:var(--tx2); font-size:.875rem; }
.wb-counter b{ color:var(--tx); font-weight:600; }
.conseq{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 12px; margin-top:26px;
  padding:18px 22px; border:1px solid var(--bd); border-radius:var(--r); background:var(--card); }
.conseq .c-lead{ flex-basis:100%; text-align:center; margin-bottom:4px; color:var(--tx3); }
.conseq span.step{ font-family:var(--cond); font-weight:700; font-size:.72rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--tx2); border:1px solid var(--bd); border-radius:2px; padding:7px 12px; }
.conseq svg{ width:14px; height:14px; color:var(--eyebrow); flex-shrink:0; }
.wb-cards{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:26px; }
.wb-practice{ border:1px solid var(--bd); border-radius:var(--r); background:var(--card); padding:26px 24px; }
.wb-practice h4{ font-size:1.1rem; display:flex; align-items:center; gap:10px; }
.wb-practice h4 svg{ width:20px; height:20px; color:var(--eyebrow); flex-shrink:0; }
.wb-practice ul{ list-style:none; margin-top:14px; display:flex; flex-direction:column; gap:10px; }
.wb-practice li{ display:flex; gap:10px; align-items:flex-start; color:var(--tx2); font-size:.9rem; }
.wb-practice li svg{ width:15px; height:15px; flex-shrink:0; color:var(--eyebrow); margin-top:5px; }
.wb-practice li b{ color:var(--tx); font-weight:600; }
.wb-practice p{ color:var(--tx2); font-size:.9rem; margin-top:12px; }
.skill-picks{ display:flex; flex-wrap:wrap; gap:10px; }
.skill-picks label{ display:inline-flex; align-items:center; gap:10px; min-height:46px; padding:10px 16px; border-radius:var(--r);
  border:1px solid var(--field-bd); background:var(--field); color:var(--tx2); cursor:pointer; font-size:.9rem;
  transition:border-color .2s ease-out,color .2s ease-out,background-color .2s ease-out; }
.skill-picks label:hover{ border-color:var(--bdg); color:var(--tx); }
.skill-picks input{ accent-color:var(--acc); width:17px; height:17px; cursor:pointer; }
.skill-picks label:has(input:checked){ border-color:var(--strong); color:var(--tx); background:rgba(207,174,112,.14); }
.fp-fine{ color:var(--tx3); font-size:.83rem; margin-top:12px; }
.hw-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.hw{ border:1px solid var(--bd); border-radius:var(--r); background:var(--card); padding:26px 24px; display:flex; flex-direction:column; }
.hw .hw-no{ font-family:var(--cond); font-weight:700; font-size:1.8rem; line-height:1; color:var(--vu-gold); }
.hw h3{ font-size:1.1rem; margin-top:10px; }
.hw p{ color:var(--tx2); font-size:.9rem; margin-top:8px; flex:1; }
.hw .chip{ align-self:flex-start; margin-top:14px; }

/* ═══════════════════ QUIZ ═══════════════════ */
.quiz-shell{ border:1px solid var(--bd); border-radius:var(--r); background:var(--card); padding:clamp(22px,4vw,46px); }
.qz{ border:1px solid var(--bd); border-radius:var(--r); padding:22px 24px; margin-bottom:16px; background:var(--card2); }
.qz legend{ float:left; width:100%; font-weight:600; font-size:1.02rem; margin-bottom:14px; padding:0; color:var(--tx); }
.qz legend .qn{ font-family:var(--cond); font-weight:700; font-size:.72rem; letter-spacing:.05em; color:var(--eyebrow); margin-right:10px; }
.qz .opts{ display:grid; grid-template-columns:1fr 1fr; gap:10px; clear:both; }
.qz .opts label{ display:flex; align-items:center; gap:12px; min-height:48px; padding:11px 16px; border-radius:var(--r); cursor:pointer;
  border:1px solid var(--field-bd); background:var(--field); color:var(--tx2); font-size:.9rem;
  transition:border-color .2s ease-out,color .2s ease-out,background-color .2s ease-out; }
.qz .opts label:hover{ border-color:var(--bdg); color:var(--tx); }
.qz .opts input{ accent-color:var(--acc); width:17px; height:17px; flex-shrink:0; cursor:pointer; }
.qz .opts label:has(input:checked){ border-color:var(--strong); color:var(--tx); background:rgba(207,174,112,.14); }
.qz.correct{ border-color:var(--vu-sage); border-width:2px; }
.qz.wrong{ border-color:var(--vu-err); border-width:2px; }
.qz .expl{ display:none; margin-top:12px; clear:both; font-size:.875rem; color:var(--tx2); border-left:2px solid var(--vu-gold); padding-left:14px; }
.qz.graded .expl{ display:block; }
.qz .expl b{ color:var(--tx); font-weight:600; }
.quiz-foot{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:8px; }
.quiz-prog{ font-family:var(--cond); font-weight:700; font-size:.78rem; letter-spacing:.05em; text-transform:uppercase; color:var(--tx3); }
.quiz-result{ display:none; margin-top:26px; border-radius:var(--r); padding:30px; text-align:center; border:1px solid var(--bdg); background:var(--card2); }
.quiz-result.show{ display:block; }
.quiz-result .big-score{ font-family:var(--cond); font-weight:700; font-size:clamp(2.4rem,6vw,3.4rem); color:var(--vu-oak); }
.quiz-result h3{ font-family:var(--serif); font-weight:400; font-size:1.5rem; margin-top:8px; }
.quiz-result p{ color:var(--tx2); margin-top:10px; max-width:520px; margin-inline:auto; }
.quiz-result .btn{ margin-top:20px; }
/* ── course feedback (NPS + CSAT) ── */
.fb-panel{ display:none; margin-top:26px; border:1px solid var(--bdg); border-radius:var(--r); background:var(--card2); padding:clamp(20px,3.5vw,36px); }
.fb-panel.show{ display:block; }
.fb-panel h3{ font-family:var(--serif); font-weight:400; font-size:1.5rem; }
.fb-intro{ color:var(--tx2); margin-top:8px; font-size:.9375rem; }
.fb-q{ border:1px solid var(--bd); border-radius:var(--r); background:var(--card); padding:18px 20px; margin-top:16px; }
.fb-q legend{ float:left; width:100%; font-weight:600; font-size:.98rem; margin-bottom:12px; padding:0; color:var(--tx); }
.nps-opts{ display:flex; flex-wrap:wrap; gap:8px; clear:both; }
.nps-opts label{ position:relative; flex:1 1 44px; min-width:44px; max-width:72px; min-height:44px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--field-bd); background:var(--field); border-radius:var(--r); cursor:pointer; font-weight:600; color:var(--tx2); }
.nps-opts input{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.nps-opts label:hover,.csat-opts label:hover{ border-color:var(--bdg); color:var(--tx); }
.nps-opts label:has(input:checked),.csat-opts label:has(input:checked){ border-color:var(--strong); color:var(--tx); background:rgba(207,174,112,.14); }
.nps-opts label:focus-within{ outline:2px solid var(--focus); outline-offset:2px; }
.nps-ends{ display:flex; justify-content:space-between; clear:both; font-size:.78rem; color:var(--tx3); margin-top:8px; }
.csat-opts{ display:flex; flex-wrap:wrap; gap:8px; clear:both; }
.csat-opts label{ flex:1 1 160px; min-height:44px; display:inline-flex; align-items:center; gap:10px; padding:10px 14px; font-size:.875rem; color:var(--tx2);
  border:1px solid var(--field-bd); background:var(--field); border-radius:var(--r); cursor:pointer; }
.csat-opts input{ accent-color:var(--acc); width:17px; height:17px; flex-shrink:0; cursor:pointer; }
.fb-count{ font-size:.8rem; color:var(--tx3); text-align:right; margin-top:-12px; margin-bottom:4px; }
.fb-scoreline{ font-size:.875rem; color:var(--tx2); margin:16px 0 14px; }
.fb-disclose{ font-size:.83rem; color:var(--tx3); margin-top:12px; max-width:60ch; }
.fb-status{ margin-top:12px; font-size:.9375rem; color:var(--tx); font-weight:600; }
.btn[aria-disabled="true"]{ opacity:.45; cursor:not-allowed; }

/* ═══════════════════ RESOURCES ═══════════════════ */
.res-group{ margin-top:34px; }
.res-group h3{ font-family:var(--serif); font-weight:400; font-size:1.35rem; display:flex; align-items:baseline; gap:12px; }
.res-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px; }
a.res{ display:flex; gap:14px; align-items:flex-start; justify-content:space-between; border:1px solid var(--bd);
  border-radius:var(--r); padding:16px 18px; background:var(--card); transition:border-color .2s ease-out; }
a.res:hover{ border-color:var(--bdg); }
a.res b{ display:block; font-weight:600; font-size:.98rem; color:var(--tx); }
a.res .why{ display:block; color:var(--tx2); font-size:.86rem; margin-top:4px; }
a.res .rtag{ display:inline-block; font-family:var(--cond); font-weight:700; font-size:.64rem; letter-spacing:.05em;
  text-transform:uppercase; color:var(--vu-oak); border:1px solid var(--vu-gold); border-radius:2px; padding:4px 9px; margin-top:10px; }
a.res .r-arrow{ width:16px; height:16px; color:var(--tx3); flex-shrink:0; margin-top:4px; transition:color .2s ease-out; }
a.res:hover .r-arrow{ color:var(--strong); }
/* plain-words glossary strip */
.gloss{ display:grid; grid-template-columns:1fr 1fr; gap:10px 28px; margin-top:16px; }
.gloss > div{ border-top:1px solid var(--bd); padding-top:10px; font-size:.9rem; color:var(--tx2); max-width:none; }
.gloss dt{ display:inline; font-weight:600; color:var(--tx); }
.gloss dd{ display:inline; margin:0; }
@media(max-width:767px){ .gloss{ grid-template-columns:1fr; } }

/* ═══════════════════ SUMMARY RECAP + NEXT STEP ═══════════════════ */
.recap-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.recap{ border:1px solid var(--bd); border-top:3px solid var(--vu-gold); border-radius:var(--r); background:var(--card); padding:24px 22px; display:flex; flex-direction:column; }
.recap h3{ font-family:var(--serif); font-weight:400; font-size:1.3rem; }
.recap p{ color:var(--tx2); font-size:.9375rem; margin-top:10px; flex:1; }
.recap .r-why{ display:block; margin-top:14px; padding-top:12px; border-top:1px solid var(--bd); color:var(--tx3); font-size:.875rem; }
.recap .r-why b{ color:var(--eyebrow); font-weight:600; }
.hw-step p a{ color:var(--link); border-bottom:1px solid var(--bdg); }
.hw-step p a:hover{ color:var(--strong); }
@media (max-width:960px){ .recap-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .recap-grid{ grid-template-columns:1fr; } }

/* ═══════════════════ CLOSING SEND-OFF + FOOTER STRIP ═══════════════════ */
.cta{ text-align:center; padding:clamp(64px,9vw,120px) 0; border-top:1px solid rgba(207,174,112,.2); }
.cta h2{ font-size:clamp(2.1rem,5vw,3.8rem); max-width:18ch; margin:18px auto 0; }
.cta p{ color:rgba(255,255,255,.7); margin:20px auto 0; max-width:46ch; }
.cta .btn-gold{ margin-top:36px; }
.cta .cta-alt{ margin-top:22px; font-size:.9375rem; color:rgba(255,255,255,.64); }
.cta .cta-alt a{ color:var(--vu-gold); border-bottom:1px solid rgba(207,174,112,.4); }
.cta .cta-oracle{ margin:clamp(36px,6vh,56px) auto 0; max-width:860px; text-align:left; }
.cta .cta-oracle p{ margin-top:6px; max-width:48ch; }
.cta .cta-oracle a:not(.btn){ color:var(--vu-gold); border-bottom:1px solid rgba(207,174,112,.4); }
.send-sign{ font-family:var(--serif-i); font-style:italic; font-size:clamp(1.15rem,2.4vw,1.5rem); color:#fff; margin:clamp(32px,5vh,48px) auto 0; max-width:none; }
footer{ background:var(--vu-black); color:#fff; border-top:1px solid rgba(207,174,112,.2); padding:clamp(36px,5vw,52px) 0 36px;
  --tx:#fff; --tx2:rgba(255,255,255,.7); --tx3:rgba(255,255,255,.64); --link:#CFAE70; --strong:#ECB748; --focus:#ECB748; --bdg:rgba(207,174,112,.35); }
.fcenter{ text-align:center; }
.fcenter img{ margin:0 auto; }
.fprogram{ font-family:var(--cond); font-weight:700; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--vu-gold); margin-top:18px; max-width:none; }
.flegal{ color:rgba(255,255,255,.55); font-size:.83rem; margin:18px auto 0; max-width:640px; }
.flegal a{ color:var(--vu-gold); border-bottom:1px solid rgba(207,174,112,.4); }

/* ═══════════════════ AI READINESS (your role, task by task) ═══════════════════ */
.ra-idea{ margin-top:30px; max-width:820px; }
.ra-idea h4{ font-family:var(--serif); font-weight:400; font-size:1.3rem; display:flex; align-items:baseline; gap:12px; }
.ra-idea h4 .no{ font-family:var(--cond); font-weight:700; font-size:.8rem; color:#1C1C1C; background:var(--vu-gold);
  border-radius:2px; padding:3px 9px; flex-shrink:0; }
.ra-idea > p{ color:var(--tx2); font-size:.9575rem; line-height:1.75; margin-top:10px; max-width:70ch; }
.ra-idea > p b{ color:var(--tx); font-weight:600; }
.canon{ margin-top:20px; border:1px solid var(--bdg); border-radius:var(--r); background:var(--card2); padding:22px 24px; }
.canon h5{ font-family:var(--cond); font-weight:700; font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color:var(--eyebrow); }
.canon ol{ margin:12px 0 0 0; padding-left:0; list-style:none; counter-reset:cn; display:flex; flex-direction:column; gap:10px; }
.canon ol li{ counter-increment:cn; display:flex; gap:12px; align-items:flex-start; color:var(--tx2); font-size:.9rem; }
.canon ol li::before{ content:counter(cn,decimal-leading-zero); font-family:var(--cond); font-weight:700; font-size:.8rem; color:#1C1C1C;
  background:var(--vu-gold); border-radius:2px; min-width:26px; height:22px; display:inline-grid; place-items:center; flex-shrink:0; }
.canon ol li b{ color:var(--tx); font-weight:600; }
.canon .c-fine{ margin-top:14px; font-size:.83rem; color:var(--tx3); max-width:none; }
.dd{ border:1px solid var(--bd); border-radius:var(--r); background:var(--card2); padding:20px 22px; }
.dd h5{ display:flex; align-items:center; gap:10px; font-size:1rem; }
.dd h5 svg{ width:18px; height:18px; flex-shrink:0; color:var(--eyebrow); }
.dd ul{ list-style:none; margin-top:12px; display:flex; flex-direction:column; gap:9px; }
.dd li{ display:flex; gap:9px; align-items:flex-start; color:var(--tx2); font-size:.875rem; }
.dd li svg{ width:14px; height:14px; flex-shrink:0; color:var(--eyebrow); margin-top:4px; }
.dd li b{ color:var(--tx); font-weight:600; }
.ra-shell{ border:1px solid var(--bd); border-radius:var(--r); background:var(--card); padding:clamp(22px,4vw,42px); }
.ra-step{ margin-top:30px; }
.ra-step:first-child{ margin-top:0; }
.ra-step > .rs-head{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.ra-step > .rs-head .rs-no{ font-family:var(--cond); font-weight:700; font-size:.85rem; color:#1C1C1C; background:var(--vu-gold);
  border-radius:2px; min-width:30px; height:26px; display:inline-grid; place-items:center; }
.ra-step > .rs-head h4{ font-family:var(--serif); font-weight:400; font-size:1.35rem; }
.ra-step > .rs-body{ margin-top:14px; }
.ra-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.qz .opts.o3{ grid-template-columns:repeat(3,1fr); }
.ra-cluster{ font-family:var(--cond); font-weight:700; font-size:.75rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--eyebrow); margin:22px 0 12px; }
.ra-buckets{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:14px; }
.ra-buckets.two{ grid-template-columns:1fr 1fr; }
.ra-block{ margin-top:26px; }
.ra-block > h5{ font-family:var(--cond); font-weight:700; font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color:var(--eyebrow); }
.ra-block a{ color:var(--link); border-bottom:1px solid var(--bdg); }
.ra-block a:hover{ color:var(--strong); }
.rt-intro{ color:var(--tx2); font-size:.9rem; max-width:62ch; margin-bottom:14px; }
.ra-trow{ border:1px solid var(--bd); border-radius:var(--r); background:var(--card2); padding:18px 18px 20px; margin-bottom:12px; }
.ra-trow .rt-head{ display:flex; align-items:flex-end; gap:10px; }
.ra-trow .rt-head .field{ flex:1; margin-bottom:0; }
.rt-remove{ display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; flex-shrink:0;
  border:1px solid var(--bd); border-radius:var(--r); background:transparent; color:var(--tx3); cursor:pointer;
  transition:color .2s ease-out, border-color .2s ease-out; }
.rt-remove:hover{ color:var(--vu-err); border-color:var(--vu-err); }
.rt-remove svg{ width:16px; height:16px; }
.rt-sels{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:14px; }
.rt-sels .field{ margin-bottom:0; min-width:0; }
.rt-sels select{ font-size:.9rem; max-width:100%; }
.ra-addrow{ margin-top:4px; }
@media (max-width:960px){ .ra-buckets, .ra-buckets.two{ grid-template-columns:1fr; } }
@media (max-width:860px){ .rt-sels{ grid-template-columns:1fr; } }
@media (max-width:640px){ .qz .opts.o3{ grid-template-columns:1fr; } }
@media (max-width:480px){ .ra-actions .btn{ flex:1; } }
/* the "where to learn it" shelf inside each learning-plan track */
.ra-res{ margin-top:16px; border-top:1px dashed var(--bd); padding-top:14px; }
.ra-res h6{ font-family:var(--cond); font-weight:700; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--eyebrow); }
.ra-res ul{ margin-top:10px; gap:12px; }
.ra-res li{ display:block; font-size:.85rem; min-width:0; }
.ra-res .rr-top{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ra-res .rr-top a{ font-weight:600; overflow-wrap:anywhere; }
.ra-res .rr-tag{ font-family:var(--cond); font-weight:700; font-size:.62rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--eyebrow); border:1px solid var(--bdg); border-radius:2px; padding:2px 7px; white-space:nowrap; }
.ra-res .rr-cost{ font-size:.75rem; color:var(--tx3); }
.ra-res .rr-why{ display:block; color:var(--tx2); margin-top:3px; line-height:1.6; }

/* ═══════════════════ PROGRESS TRACKER ═══════════════════ */
.bar-r{ display:flex; align-items:center; gap:10px; min-width:0; }
.prog-btn{ display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:8px 14px; flex-shrink:0;
  border:1px solid rgba(255,255,255,.25); border-radius:var(--r); background:transparent; color:#fff; cursor:pointer;
  font-family:var(--cond); font-weight:700; font-size:.78rem; letter-spacing:.05em; text-transform:uppercase;
  transition:border-color .2s ease-out; }
.prog-btn b{ color:var(--vu-gold); font-weight:700; }
.prog-btn:hover{ border-color:var(--vu-gold); }
.prog-track{ position:absolute; left:0; right:0; bottom:0; height:2px; pointer-events:none; }
.prog-fill{ display:block; height:100%; width:0%; background:var(--vu-gold); transition:width .38s ease-out; }
.prog-panel{ position:fixed; top:calc(var(--nav-h) + 8px); right:clamp(8px,3vw,44px); z-index:220; width:min(380px, calc(100vw - 16px));
  max-height:min(72vh,600px); overflow:auto; background:var(--vu-black); color:#fff;
  border:1px solid rgba(207,174,112,.4); border-radius:var(--r); padding:20px 20px 16px; }
.prog-panel[hidden]{ display:none; }
.prog-panel .pp-h{ font-family:var(--cond); font-weight:700; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--vu-gold); }
.prog-sum{ color:rgba(255,255,255,.75); font-size:.9rem; margin-top:8px; max-width:none; }
.prog-list{ list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; }
.prog-list li{ display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; border-top:1px solid rgba(255,255,255,.1); }
.prog-list a{ display:grid; grid-template-columns:32px 1fr; gap:10px; align-items:center; padding:9px 4px; min-height:44px;
  font-size:.875rem; color:rgba(255,255,255,.82); transition:color .2s ease-out; }
.prog-list a:hover{ color:#fff; }
.prog-list .p-no{ font-family:var(--cond); font-weight:700; font-size:.72rem; letter-spacing:.05em; color:var(--vu-gold); }
.prog-list .p-name{ font-weight:500; }
.prog-list .p-how{ display:block; font-weight:400; font-size:.75rem; color:rgba(255,255,255,.5); margin-top:2px; }
.prog-list li.done .p-how{ display:none; }
.prog-list button.p-state{ font-family:var(--cond); font-weight:700; font-size:.66rem; letter-spacing:.05em; text-transform:uppercase;
  color:rgba(255,255,255,.6); background:transparent; border:1px solid rgba(255,255,255,.25); border-radius:2px;
  min-height:38px; padding:4px 10px; white-space:nowrap; cursor:pointer;
  transition:border-color .2s ease-out, color .2s ease-out, background-color .2s ease-out; }
.prog-list button.p-state:hover{ border-color:var(--vu-gold); color:#fff; }
.prog-list li.done button.p-state{ color:#1C1C1C; background:var(--vu-gold); border-color:var(--vu-gold); }
.prog-list li.done button.p-state:hover{ background:var(--vu-highlight); border-color:var(--vu-highlight); }
.prog-fine{ margin-top:12px; font-size:.78rem; color:rgba(255,255,255,.5); max-width:none; }
.prog-warn{ color:var(--vu-highlight); }
.md-wrap{ margin-top:28px; }
.md-btn[aria-pressed="true"]{ border-color:var(--strong); color:var(--strong); }
.mobile-menu a.mlink .mdone{ display:none; margin-left:auto; font-family:var(--cond); font-weight:700; font-size:.66rem; letter-spacing:.05em;
  text-transform:uppercase; color:#1C1C1C; background:var(--vu-gold); border-radius:2px; padding:3px 8px; align-self:center; }
.mobile-menu a.mlink.done .mdone{ display:inline-block; }
.mprog{ margin-top:10px; color:var(--vu-gold); font-family:var(--cond); font-weight:700; font-size:.75rem; letter-spacing:.05em; text-transform:uppercase; }
.preset{ display:inline-flex; align-items:center; gap:8px; margin:18px 0 0; min-height:44px; background:none; border:0; cursor:pointer;
  color:rgba(255,255,255,.55); font-family:var(--cond); font-weight:700; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  transition:color .2s ease-out; }
.preset:hover{ color:#fff; }
.preset svg{ width:14px; height:14px; }
@media (max-width:1000px){ .prog-btn .pw{ display:none; } } /* narrow: the pill shows just the count */
@media (max-width:400px){ .prog-btn{ padding:8px 10px; } }

/* ═══════════════════ BOOK MODE: STAGE + PAGES ═══════════════════
   The whole course reads as a book: one .page visible in a fixed stage,
   pages turning right-to-left. Everything is scoped under html.paged so
   the original scroll layout remains the no-JS fallback. */
html.paged{ --nav-h:96px; --bar-h:64px; }
@media (max-width:960px){ html.paged{ --nav-h:72px; --bar-h:56px; } }
html.paged, html.paged body{ height:100%; overflow:hidden; overscroll-behavior:none; }
html.paged main#main{ position:fixed; top:var(--nav-h); bottom:var(--bar-h); left:0; right:0;
  overflow:hidden; background:var(--vu-black); z-index:1; }
.page{ position:absolute; inset:0; overflow-y:auto; overflow-x:hidden; visibility:hidden; z-index:1;
  display:flex; flex-direction:column; -webkit-overflow-scrolling:touch; outline:none; }
.page.cur{ visibility:visible; z-index:2; }
.page > section{ flex:1 0 auto; width:100%; }
.page > .topics, .page > footer{ flex:0 0 auto; width:100%; }
.page.pg-in-r{ animation:pgInR .35s var(--ease) both; }
.page.pg-in-l{ animation:pgInL .35s var(--ease) both; }
.page.pg-out{ visibility:visible; z-index:1; }
.page.pg-out-l{ animation:pgOutL .35s var(--ease) both; }
.page.pg-out-r{ animation:pgOutR .35s var(--ease) both; }
@keyframes pgInR{ from{ transform:translateX(100%); } }
@keyframes pgInL{ from{ transform:translateX(-100%); } }
@keyframes pgOutL{ to{ transform:translateX(-100%); } }
@keyframes pgOutR{ to{ transform:translateX(100%); } }
/* fit-the-viewport rhythm: tighter vertical spacing inside pages */
html.paged section{ padding:clamp(24px,4vh,48px) 0; }
html.paged .hero{ min-height:100%; padding:clamp(8px,1.6vh,24px) 0; }
html.paged .hero h1{ font-size:clamp(2rem,4vh + 1rem,4rem); margin-top:14px; }
html.paged .hero .hello{ margin-top:14px; }
html.paged .hero .lead{ margin-top:12px; max-width:78ch; }
html.paged .hero .outcomes{ margin-top:10px; gap:5px; max-width:none; }
html.paged .hero .outcomes li{ font-size:.98rem; line-height:1.4; }
html.paged .hero .meta-line{ margin-top:12px; }
html.paged .hero .cta-row{ margin-top:14px; }
html.paged .manifesto{ padding:clamp(36px,9vh,90px) 0; }
html.paged .howworks{ padding:clamp(24px,4vh,44px) 0; }
html.paged .hw-list{ margin-top:clamp(16px,2.5vh,28px); }
html.paged .hw-step{ padding:clamp(14px,2.2vh,24px) 0; }
html.paged .hw-meta{ margin-top:14px; }
html.paged .acr-line{ margin-top:clamp(16px,2.5vh,28px); padding:14px 0; }
html.paged .sec-head{ margin-bottom:clamp(16px,2.8vh,32px); }
html.paged .sec-head h2{ font-size:clamp(1.65rem,2.2vh + 1rem,2.7rem); }
html.paged .module{ margin-top:clamp(16px,2.6vh,30px); }
html.paged .module-head{ margin-bottom:18px; }
html.paged .concept{ margin-bottom:18px; }
html.paged .bridge{ margin-top:clamp(18px,3vh,32px); padding-top:16px; }
html.paged .bridge.mid{ margin-top:clamp(18px,3vh,32px); }
html.paged .md-wrap{ margin-top:18px; }
html.paged .topics{ padding:20px 0 18px; border-bottom:0; border-top:1px solid var(--vu-gray-l); }
html.paged .topics .tlabel{ margin-bottom:14px; }
html.paged .cta{ padding:clamp(16px,3vh,36px) 0; }
html.paged .cta h2{ font-size:clamp(1.85rem,3.2vh + .9rem,3rem); margin-top:12px; }
html.paged .cta p{ margin-top:14px; }
html.paged .cta .wrap > p:first-of-type{ max-width:64ch; }
html.paged .cta .cta-alt{ max-width:none; }
html.paged .cta .cta-oracle{ padding:14px 20px; }
html.paged .cta .btn-gold{ margin-top:20px; }
html.paged .cta .cta-alt{ margin-top:14px; }
html.paged .cta .cta-oracle{ margin-top:clamp(14px,2.4vh,24px); }
html.paged .send-sign{ margin-top:clamp(12px,2.2vh,22px); }
html.paged footer{ padding:clamp(10px,1.8vh,18px) 0; }
html.paged .flegal{ font-size:.8rem; }
/* the condensed strip runs horizontal inside the finale page so the send-off fits the stage */
html.paged .fcenter{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:2px 20px; text-align:left; }
html.paged .fcenter img{ width:56px; height:59px; margin:0; grid-row:1 / span 2; }
html.paged .fprogram{ grid-column:2; margin:0; }
html.paged .flegal{ grid-column:2; margin:4px 0 0; max-width:none; }
html.paged .preset{ grid-column:3; grid-row:1 / span 2; margin:0; }
@media (max-width:760px){
  html.paged .fcenter{ display:block; text-align:center; }
  html.paged .fcenter img{ margin:0 auto; }
  html.paged .fprogram{ margin-top:10px; }
  html.paged .flegal{ margin-top:8px; }
  html.paged .preset{ margin-top:6px; }
}
html.paged .preview-box{ top:8px; }
/* denser cards and shells so most pages fit a 1366x768 stage */
html.paged .qz{ padding:16px 18px; margin-bottom:12px; }
html.paged .qz legend{ margin-bottom:10px; }
html.paged .tm-q{ padding:13px 16px; margin-bottom:11px; }
html.paged .tech{ padding:14px 16px; }
html.paged .tech-list{ gap:10px; }
html.paged .evidence{ padding:15px 18px; margin-top:16px; }
html.paged .ra-idea{ margin-top:20px; }
html.paged .canon{ margin-top:16px; padding:16px 18px; }
html.paged .llm{ padding:clamp(16px,2.6vh,30px); }
html.paged .llm-grid{ margin-top:18px; }
html.paged .demo-steps{ margin-top:8px; }
html.paged .demo-steps li{ margin-top:3px; }
html.paged .llm-note + .llm-note{ margin-top:8px; }
html.paged .pbars{ gap:9px; }
html.paged .fcard button{ padding:18px 16px; }
html.paged .principle{ padding:20px 18px; }
html.paged .recap{ padding:20px 18px; }
html.paged .never{ padding:20px; margin-top:18px; }
html.paged .rule-strip{ margin-top:18px; padding:16px 20px; }
html.paged .quiz-shell{ padding:clamp(16px,2.6vh,30px); }
html.paged .sim-shell{ padding:clamp(16px,2.6vh,30px); }
html.paged .ra-shell{ padding:clamp(16px,2.6vh,30px); }
html.paged .ppanel{ padding:clamp(16px,2.6vh,30px); }
html.paged .hw-step .hw-no{ font-size:clamp(1.8rem,3.4vh,2.6rem); }
html.paged .res-group{ margin-top:22px; }
html.paged .dilemma{ padding:20px 18px; }
html.paged .lframe{ margin-top:12px; }
html.paged .micro{ margin-bottom:16px; padding:10px 14px; }
/* "more below" affordance: floats over the stage when the page scrolls internally */
#pgMore{ position:absolute; z-index:6; right:clamp(10px,2vw,22px); bottom:10px; display:none; align-items:center; gap:7px;
  pointer-events:none; font-family:var(--cond); font-weight:700; font-size:.68rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--vu-gold); background:rgba(28,28,28,.85); border:1px solid rgba(207,174,112,.45); border-radius:var(--r); padding:7px 11px; }
#pgMore svg{ width:12px; height:12px; }
html.paged main#main.more #pgMore{ display:inline-flex; }

/* ═══════════════════ BOTTOM BOOK BAR ═══════════════════ */
.book-bar{ position:fixed; left:0; right:0; bottom:0; height:var(--bar-h,64px); z-index:210; background:var(--vu-black);
  border-top:1px solid rgba(207,174,112,.25); display:none; align-items:center; gap:clamp(8px,2vw,26px);
  padding:0 clamp(8px,2.5vw,28px); }
html.paged .book-bar{ display:flex; }
.bb-left{ flex:1 1 0; min-width:0; display:flex; align-items:center; gap:clamp(8px,1.4vw,16px); }
.bb-sec{ flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-family:var(--cond); font-weight:700; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--vu-gold); }
.bb-done{ display:inline-flex; align-items:center; justify-content:center; gap:7px; height:44px; padding:0 13px; flex-shrink:0;
  border:1px solid rgba(255,255,255,.25); border-radius:var(--r); background:transparent; color:#fff; cursor:pointer;
  font-family:var(--cond); font-weight:700; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
  transition:border-color .2s ease-out, color .2s ease-out, background-color .2s ease-out; }
.bb-done:hover{ border-color:var(--vu-gold); color:var(--vu-gold); }
.bb-done[aria-pressed="true"]{ border-color:var(--vu-gold); background:var(--vu-gold); color:var(--vu-black); }
.bb-done[aria-pressed="true"]:hover{ background:var(--vu-highlight); border-color:var(--vu-highlight); color:var(--vu-black); }
.bb-done:focus-visible{ outline:2px solid var(--vu-highlight); outline-offset:1px; }
.bb-done svg{ width:14px; height:14px; flex-shrink:0; }
.bb-done[hidden]{ display:none; }
.bb-dots{ display:flex; align-items:center; justify-content:center; gap:2px; flex-shrink:0; }
a.bb-dot{ display:grid; place-items:center; width:22px; height:44px; border-radius:2px; }
a.bb-dot .dot{ display:block; width:9px; height:9px; border-radius:50%; border:1.5px solid var(--vu-gold); background:transparent;
  transition:background-color .2s ease-out, transform .2s ease-out, box-shadow .2s ease-out; }
a.bb-dot.done .dot{ background:var(--vu-gold); }
a.bb-dot.cur .dot{ transform:scale(1.35); box-shadow:0 0 0 2px rgba(236,183,72,.55); }
a.bb-dot:hover .dot{ background:rgba(207,174,112,.5); }
a.bb-dot.done:hover .dot{ background:var(--vu-highlight); }
a.bb-dot:focus-visible{ outline:2px solid var(--vu-highlight); outline-offset:1px; }
.bb-ctl{ flex:1 1 0; display:flex; align-items:center; justify-content:flex-end; gap:clamp(6px,1vw,12px); }
.bb-count{ font-family:var(--cond); font-weight:700; font-size:.78rem; letter-spacing:.05em; color:rgba(255,255,255,.72); white-space:nowrap; }
.bb-btn{ display:grid; place-items:center; width:44px; height:44px; flex-shrink:0; border:1px solid rgba(255,255,255,.25); border-radius:var(--r);
  background:transparent; color:#fff; cursor:pointer; transition:border-color .2s ease-out,color .2s ease-out; }
.bb-btn:hover{ border-color:var(--vu-gold); color:var(--vu-gold); }
.bb-btn[disabled]{ opacity:.35; cursor:default; }
.bb-btn[disabled]:hover{ border-color:rgba(255,255,255,.25); color:#fff; }
.bb-btn svg{ width:16px; height:16px; }
@media (max-width:1000px){ .bb-done .bb-done-t{ display:none; } .bb-done{ width:44px; padding:0; } a.bb-dot{ width:18px; } }
@media (max-width:760px){ .bb-sec{ display:none; } .bb-left{ flex:0 0 auto; } .bb-dots{ flex:1; } .bb-ctl{ flex:0 0 auto; } a.bb-dot{ width:15px; } a.bb-dot .dot{ width:8px; height:8px; } }
@media (max-width:420px){ a.bb-dot{ width:12px; } a.bb-dot .dot{ width:7px; height:7px; } .bb-btn{ width:40px; } .bb-done{ width:40px; height:44px; } .bb-count{ font-size:.72rem; } .book-bar{ gap:6px; } }

/* ═══════════════════ CRIT ═══════════════════ */
.cr-chips{ display:flex; flex-wrap:wrap; gap:10px; margin:-6px 0 18px; }
.cr-chips.last{ margin-bottom:0; }

/* ═══════════════════ ORACLE COMPLETION (modal + capstone strip) ═══════════════════ */
.oracle-overlay{ position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(28,28,28,.72); overflow-y:auto;
  opacity:0; transition:opacity .25s var(--ease); }
.oracle-overlay[hidden]{ display:none; }
.oracle-overlay.open{ opacity:1; }
body.oracle-open{ overflow:hidden; }
.oracle-modal{ background:#212120; border:1px solid rgba(207,174,112,.45); border-top:3px solid var(--vu-gold);
  border-radius:var(--r); max-width:560px; width:100%; padding:clamp(26px,5vw,40px); margin:auto; }
.oracle-modal .mono{ color:var(--vu-gold); }
.oracle-modal h2{ font-family:var(--serif); font-weight:400; font-size:clamp(1.55rem,4.5vw,2.1rem); line-height:1.15; color:#fff; margin-top:12px; }
.oracle-modal p{ color:rgba(255,255,255,.78); margin-top:14px; max-width:none; }
.oracle-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.oracle-modal .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.3); }
.oracle-modal .btn-ghost:hover{ border-color:var(--vu-gold); color:var(--vu-gold); }
.oracle-fine{ margin-top:18px; font-size:.8rem; color:rgba(255,255,255,.5); }
.oracle-strip{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 28px;
  margin-top:34px; padding:22px 24px; background:var(--card2); border:1px solid var(--bdg);
  border-left:3px solid var(--gold); border-radius:var(--r); }
.oracle-strip p{ color:var(--tx2); margin-top:6px; max-width:56ch; }
@media (max-width:480px){ .oracle-actions .btn{ flex:1; min-width:0; } .oracle-strip .btn{ width:100%; } }

/* ═══════════════════ RESPONSIVE ═══════════════════ */
@media (max-width:1024px){
  .flip-grid,.flip-grid.five{ grid-template-columns:1fr 1fr; }
  .flip-grid.five .fcard:last-child{ grid-column:1 / -1; }
  .opp-grid,.sp-grid{ grid-template-columns:1fr 1fr; }
  .roadmap{ grid-template-columns:1fr 1fr; }
  .roadmap.three{ grid-template-columns:1fr 1fr; }
  .never ul{ grid-template-columns:1fr 1fr; }
}
@media (max-width:1280px){
  .logo img{ height:42px; }
  nav.links a{ font-size:.86rem; letter-spacing:.01em; }
  nav.links a.nav-cta{ font-size:.875rem; min-height:46px; padding:11px 20px; }
}
@media (max-width:1099px){
  /* below 1100 the full link row cannot sit on one line; hand off to the menu (the rail hides at the same width) */
  nav.links{ display:none; } .menu-btn{ display:grid; }
}
@media (max-width:960px){
  header.nav .bar{ height:72px; }
  .logo img{ height:36px; }
  html{ scroll-padding-top:92px; }
  .prog-panel{ top:80px; }
  .app-grid{ grid-template-columns:1fr; }
  .preview-box{ position:static; }
  .llm-grid{ grid-template-columns:1fr; }
  .myth-grid,.tool-grid{ grid-template-columns:1fr; }
  .resp-grid{ grid-template-columns:1fr 1fr; }
  .sim-row{ grid-template-columns:1fr; }
  .hal-grid,.hw-grid,.dilemma-grid,.wb-cards{ grid-template-columns:1fr; }
  .hw-step{ grid-template-columns:90px 1fr; }
  .hw-step .chip{ grid-column:2; justify-self:start; }
}
@media (max-width:640px){
  .flip-grid,.flip-grid.five{ grid-template-columns:1fr; }
  .flip-grid.five .fcard:last-child{ grid-column:auto; }
  .opp-grid,.sp-grid,.roadmap,.roadmap.three,.resp-grid{ grid-template-columns:1fr; }
  .never ul{ grid-template-columns:1fr; }
  .qz .opts{ grid-template-columns:1fr; }
  .pbar{ grid-template-columns:84px 1fr 44px; }
  .pbar .w{ font-size:.75rem; }
  .dim{ grid-template-columns:96px 1fr 40px; }
  .ptabs{ gap:6px; }
  .ptab{ flex:1; justify-content:center; padding:11px 10px; font-size:.85rem; }
  .ptab svg{ display:none; }
  .res-grid{ grid-template-columns:1fr; }
  .tech{ grid-template-columns:1fr; } .tech .t-no{ margin-top:0; }
  .conseq span.step{ font-size:.66rem; padding:6px 10px; }
  .hw-step{ grid-template-columns:1fr; gap:8px; padding:26px 0; }
  .logo img{ height:30px; }
}
@media (max-width:480px){
  .hero .cta-row .btn{ flex:1; }
  .launch-row .btn{ flex:1; }
  .tm-opts{ flex-direction:row; }
  .grade-letter{ width:70px; height:70px; font-size:2.1rem; }
  .cta .cta-oracle .btn{ width:100%; }
}

/* hero outcome bullets */
.hero .outcomes{ list-style:none; margin-top:14px; display:flex; flex-direction:column; gap:8px; max-width:62ch; }
.hero .outcomes li{ position:relative; padding-left:24px; color:var(--tx2); font-size:1.02rem; line-height:1.55; }
.hero .outcomes li::before{ content:""; position:absolute; left:0; top:.62em; width:12px; height:2px; background:var(--vu-gold); }
.hero .outcomes b{ color:#fff; font-weight:600; }
/* compact how-it-works strip on the Welcome page (book mode only; the scroll fallback needs no page instructions) */
.hw-mini{ display:none; }
html.paged .hero .hw-mini{ display:flex; flex-wrap:wrap; gap:4px 22px; list-style:none; margin:12px 0 0; padding:9px 0 0;
  border-top:1px solid rgba(255,255,255,.16); counter-reset:hm; max-width:none; }
html.paged .hero .hw-mini li{ display:inline-flex; align-items:baseline; gap:8px; counter-increment:hm;
  color:rgba(255,255,255,.62); font-size:.78rem; line-height:1.45; }
html.paged .hero .hw-mini li::before{ content:counter(hm,decimal-leading-zero); font-family:var(--cond); font-weight:700;
  font-size:.68rem; letter-spacing:.05em; color:var(--vu-gold); }

/* ═══════════════════ PRINT SUMMARY ═══════════════════
   #printSummary is display:none on screen and populated only when the
   learner clicks "Download your summary (PDF)"; @media print swaps the
   whole app out for it. Screen rendering is untouched. */
#printSummary{ display:none; }
.print-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:18px; }
.print-cta .hinttxt{ margin:0; }
@media print{
  html, body{ height:auto !important; overflow:visible !important; background:#fff !important; }
  body > *:not(#printSummary){ display:none !important; }
  #printSummary{ display:block !important; color:#000; background:#fff;
    font-family:-apple-system, "Segoe UI", Helvetica, Arial, sans-serif; font-size:11pt; line-height:1.5; }
  #printSummary .ps-head{ display:flex; align-items:center; gap:16pt; border-bottom:2pt solid #000; padding-bottom:10pt; }
  #printSummary .ps-head img{ width:52pt; height:auto; }
  #printSummary .ps-title{ font-family:Georgia, "Times New Roman", serif; font-size:16pt; margin:0; }
  #printSummary .ps-meta{ margin:2pt 0 0; font-size:9pt; color:#333; }
  #printSummary h2{ font-family:Georgia, "Times New Roman", serif; font-weight:700; color:#000; font-size:13pt; margin:16pt 0 4pt;
    border-bottom:.75pt solid #999; padding-bottom:2pt; break-after:avoid; page-break-after:avoid; }
  #printSummary h3{ font-family:inherit; color:#000; font-size:10.5pt; margin:8pt 0 2pt; break-after:avoid; page-break-after:avoid; }
  #printSummary .ps-title{ color:#000; }
  #printSummary p{ margin:3pt 0; }
  #printSummary ul, #printSummary ol{ margin:3pt 0 3pt 16pt; padding:0; }
  #printSummary li{ margin:2pt 0; break-inside:avoid; page-break-inside:avoid; }
  #printSummary .ps-block{ break-inside:avoid; page-break-inside:avoid; margin:6pt 0; }
  #printSummary .ps-pre{ white-space:pre-wrap; font-family:"Courier New", monospace; font-size:9pt;
    border:.75pt solid #999; padding:6pt; margin:4pt 0; break-inside:avoid; page-break-inside:avoid; }
  #printSummary .ps-empty{ color:#555; font-style:italic; }
  #printSummary .ps-url{ color:#000; word-break:break-all; }
  #printSummary a{ color:#000; text-decoration:none; }
  #printSummary .ps-fine{ font-size:8.5pt; color:#444; margin-top:14pt; border-top:.75pt solid #999; padding-top:6pt; }
  #printSummary dl{ margin:3pt 0; }
  #printSummary dt{ font-weight:700; display:inline; }
  #printSummary dd{ display:inline; margin:0; }
  #printSummary .ps-term{ margin:2pt 0; }
}

/* ═══════════════════ REDUCED MOTION ═══════════════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto !important; }
  .js .reveal,.js .srev{ opacity:1 !important; transform:none !important; }
  .js .creed .w{ opacity:1 !important; }
  .hero-video{ display:none !important; }
  .marquee .track{ animation:none !important; flex-wrap:wrap; width:auto; justify-content:center; }
  .marquee .set:nth-child(2){ display:none; }
  .pbar .fill,.meter .fill,.dim .fill{ display:block; transition:none !important; }
}
</style>