/* CleverGrade landing page, campus tour. Theme D tokens (paper, sage, slate blue, deep slate). */
:root{
  --paper:#F5F5F0; --card:#FFFFFF; --sunk:#FAFAF7; --line:#E1E2DA; --line-2:#EEEFE9;
  --ink:#1F2A37; --muted:#5B6470;
  --deep:#1F3550; --deep-2:#2A4466; --deep-text:#DDE5EE; --deep-muted:#AFC0D2;
  --blue:#33507A; --blue-hover:#27406A; --blue-soft:#E4EAF3;
  --sage:#4F7A5E; --sage-wash:#E6EEE7; --sage-line:#D0DDD2; --sage-ink:#2F5A3D; --sage-light:#A8D5B5;
  --gold:#8A6D2B; --gold-soft:#F4ECD8; --gold-line:#E4D5B0; --gold-ink:#6E5418;
  --serif:'Newsreader', Georgia, serif;
  --sans:'Public Sans', 'Segoe UI', system-ui, sans-serif;
  --r:12px; --r-sm:8px;
  --shadow:0 30px 70px -30px rgba(31,53,80,.35), 0 8px 20px -10px rgba(31,53,80,.12);
  --focus:#33507A;
  --nav-h:68px;
}
*{box-sizing:border-box}
html{overflow-x:clip;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg{display:block;max-width:100%}
a{color:var(--blue)}
h1,h2,h3{font-family:var(--serif);font-weight:600;margin:0;letter-spacing:-.015em;text-wrap:balance}
p{margin:0}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
.trust :focus-visible,.foot :focus-visible{outline-color:#9FC2EA}
.wrap{width:min(1240px,100% - 48px);margin-inline:auto}
.narrow{width:min(980px,100% - 48px)}
.center{text-align:center}
.skip{position:fixed;left:16px;top:-80px;z-index:100;padding:12px 16px;background:var(--card);border-radius:var(--r-sm);box-shadow:var(--shadow);font-weight:600}
.skip:focus{top:12px}

/* ---------- 3D layers ---------- */
#campus{position:fixed;inset:0;width:100%;height:100vh;z-index:0;pointer-events:none;display:block}
@supports (height:100lvh){#campus{height:100lvh}}
.labels{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.bl{position:absolute;left:0;top:0;padding:5px 11px;border-radius:12px;background:rgba(255,255,255,.94);color:var(--deep);font:600 12.5px/1.25 var(--sans);white-space:pre-line;text-align:center;box-shadow:0 6px 16px -6px rgba(31,53,80,.35);opacity:0;transition:opacity .35s ease;will-change:transform}
.bl.hub{background:var(--deep);color:#fff}
.bl.on{opacity:1}
main{position:relative;z-index:2}
.no-gl #campus,.no-gl .labels{display:none}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:50;height:var(--nav-h);transition:background .3s,box-shadow .3s}
.nav.scrolled{background:rgba(245,245,240,.86);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);box-shadow:0 1px 0 var(--line)}
.nav-in{height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);font-family:var(--serif);font-size:24px;font-weight:600;letter-spacing:-.01em;text-decoration:none}
.brand-mark{display:grid;place-items:center;width:32px;height:32px;padding-right:2px;border-radius:50%;background:var(--sage);color:var(--paper);font:700 18px/1 var(--sans);letter-spacing:-2px}
.brand.light{color:#fff}
.nav-links{display:flex;align-items:center;gap:26px;font-size:15px;font-weight:500}
.nav-links a:not(.btn){color:var(--muted);text-decoration:none}
.nav-links a:not(.btn):hover{color:var(--ink)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:11px 20px;border-radius:10px;font:600 15px/1.2 var(--sans);text-decoration:none;border:1px solid transparent;transition:background .15s,border-color .15s,transform .15s;cursor:pointer}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-hover)}
.btn-dark{background:var(--deep);color:#fff;min-height:40px;padding:9px 16px;font-size:14px}
.btn-dark:hover{background:#162840}
.btn-ghost{background:rgba(255,255,255,.7);color:var(--deep);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--blue)}
.btn-lg{min-height:52px;padding:14px 26px;font-size:16px}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.actions.center{justify-content:center}

/* ---------- hero ---------- */
.hero{min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:calc(var(--nav-h) + 24px) 0 48px}
.hero-in{display:grid;grid-template-columns:minmax(0,520px) 1fr;align-items:center}
.hero-copy > *{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.hero-copy > :nth-child(2){animation-delay:.12s}
.hero-copy > :nth-child(3){animation-delay:.22s}
.hero-copy > :nth-child(4){animation-delay:.32s}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
h1{font-size:clamp(42px,5.6vw,80px);line-height:1.02;letter-spacing:-.025em}
.brand-line{margin-top:22px;font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(21px,1.9vw,26px);line-height:1.3;color:var(--sage-ink);max-width:30ch}
.lede{margin-top:16px;color:var(--muted);font-size:18px;max-width:42ch}
.hero-copy > :nth-child(5){animation-delay:.42s}
.hero-copy > :nth-child(6){animation-delay:.52s}
.hero-copy > :nth-child(7){animation-delay:.62s}
.hero-qual{margin-top:10px;font-size:14px;font-weight:600;letter-spacing:.02em;color:var(--sage-ink)}
/* the five steps sit under the buttons, so the summary and the next action stay above the fold */
.hero-kicker{margin-top:40px;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sage-ink)}
.hero-steps{margin:8px 0 0;padding-left:22px;max-width:48ch;font-size:15px;line-height:1.5;color:var(--ink)}
.hero-steps li{margin-top:6px;padding-left:4px}
.hero-steps li::marker{color:var(--sage-ink);font-weight:700}
.hero-fallback{display:none}
.no-gl .hero-fallback{display:block;justify-self:center;width:min(340px,80%)}

/* ---------- video overview ---------- */
.watch-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 4px;color:var(--sage-ink);font:600 15px/1.2 var(--sans);text-decoration:none}
.watch-link svg{width:22px;height:22px;flex:none}
.watch-link svg circle{fill:var(--sage-wash);stroke:var(--sage);stroke-width:1.5}
.watch-link svg path{fill:var(--sage)}
.watch-link:hover{color:var(--deep);text-decoration:underline;text-underline-offset:4px}
.overview{position:relative;z-index:1;background:var(--paper);padding:12vh 0 4vh;scroll-margin-top:var(--nav-h)}
.nowrap{white-space:nowrap}
.overview-title{font-size:clamp(30px,3.4vw,46px);line-height:1.1;letter-spacing:-.02em;color:var(--deep);text-align:center;margin-bottom:32px}
.video-card{margin:0}
.video-frame{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow)}
.video-frame video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;background:var(--paper)}
.video-card figcaption{margin:18px auto 0;max-width:56ch;text-align:center;color:var(--muted);font-size:16px;line-height:1.5}
@media (max-width:860px){
  .overview{padding:8vh 0 2vh}
  .overview-title{margin-bottom:22px}
  .video-frame{border-radius:12px}
  .video-card figcaption{font-size:15px}
}

/* ---------- pain ---------- */
.pain{background:var(--paper);padding:18vh 0 20vh;position:relative}
.pain-intro{font-size:clamp(20px,1.8vw,24px);font-family:var(--sans);font-weight:600;color:var(--sage-ink);letter-spacing:0;margin-bottom:12vh}
.pain-line{margin-bottom:22vh}
.pain-big{font-family:var(--serif);font-weight:600;font-size:clamp(38px,6vw,86px);line-height:1.04;letter-spacing:-.025em;text-wrap:balance}
.pain-big .w{display:inline-block;white-space:pre}
.pain-small{margin-top:22px;color:var(--muted);font-size:clamp(17px,1.5vw,20px);max-width:52ch}
.pain-turn{font-family:var(--serif);font-size:clamp(26px,2.8vw,38px);line-height:1.25;color:var(--deep);max-width:28ch;font-weight:500}

/* ---------- tour ---------- */
.tour{position:relative;height:880vh}
.tour-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
/* paper scrim keeps the copy readable over the scene */
.tour-sticky::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(245,245,240,.97) 0,rgba(245,245,240,.92) calc(max(24px,(100vw - 1240px)/2) + 360px),rgba(245,245,240,0) calc(max(24px,(100vw - 1240px)/2) + 560px))}
.stops{position:absolute;inset:0;z-index:1}
.stop{position:absolute;inset:0;pointer-events:none}
.stop-copy{position:absolute;left:max(24px,calc((100vw - 1240px)/2));top:50%;width:min(400px,34vw);transform:translateY(-46%);opacity:0;transition:opacity .45s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.stop.is-active .stop-copy{opacity:1;transform:translateY(-50%);pointer-events:auto}
.stop-place{font-size:14px;font-weight:600;color:var(--sage-ink);margin-bottom:12px}
.stop-title{font-size:clamp(34px,3.7vw,56px);line-height:1.04;letter-spacing:-.025em;margin-bottom:18px}
.stop-copy p:not(.stop-place):not(.soon){color:var(--muted);font-size:17.5px;max-width:38ch}
.soon{display:inline-block;margin-top:14px;padding:4px 10px;border-radius:999px;background:var(--gold-soft);color:var(--gold-ink);font-size:13px;font-weight:600}
.soon.wide{display:block;padding:8px 12px;border-radius:10px;line-height:1.45;max-width:38ch}
.stop-card{position:absolute;right:max(24px,calc((100vw - 1240px)/2));top:50%;width:min(460px,34vw);transform:translate(48px,-50%) scale(.98);opacity:0;transition:opacity .45s ease,transform .65s cubic-bezier(.2,.7,.2,1)}
.stop.card-on .stop-card{opacity:1;transform:translate(0,-50%)}
.tour-controls{position:absolute;left:max(24px,calc((100vw - 1240px)/2));bottom:28px;width:min(440px,40vw);z-index:3}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.tchip{font:600 13px/1 var(--sans);color:var(--muted);background:rgba(255,255,255,.82);border:1px solid var(--line);border-radius:999px;padding:8px 12px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.tchip:hover{border-color:var(--blue);color:var(--ink)}
.tchip[aria-current="step"]{background:var(--deep);border-color:var(--deep);color:#fff}
.stepper{display:flex;align-items:center;gap:8px;margin-top:12px}
.round{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;display:grid;place-items:center;cursor:pointer;color:var(--deep)}
.round svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.round:hover{border-color:var(--blue)}
.round:disabled{opacity:.4;cursor:default}
.demo-note{margin-left:8px;font-size:13px;color:var(--muted)}

/* ---------- product mock (.ui) ---------- */
.ui{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:18px 20px;font-size:14px;line-height:1.45;color:var(--ink)}
.ui-top{display:flex;justify-content:space-between;align-items:center;margin:-2px 0 12px}
.pill{display:inline-block;padding:5px 12px;border-radius:999px;background:var(--sage-wash);color:var(--sage-ink);font-weight:600;font-size:12.5px}
.pill.dark{background:var(--deep);color:#fff}
.ui-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--line-2);margin-bottom:10px}
.ui-head b{font-weight:700;font-size:15px}
.muted-s{color:var(--muted);font-size:12.5px}
.chip{display:inline-block;padding:3px 9px;border-radius:7px;background:var(--line-2);color:var(--muted);font-size:12px;font-weight:600;white-space:nowrap}
.chip.ok{background:var(--sage-wash);color:var(--sage-ink);border:1px solid var(--sage-line)}
.chip.warn{background:var(--gold-soft);color:var(--gold-ink);border:1px solid var(--gold-line)}
.ui-rows{list-style:none;margin:0;padding:0}
.ui-rows li{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line-2)}
.ui-rows li:last-child{border-bottom:0}
.av{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--blue-soft);color:var(--blue);font-weight:700;font-size:13px}
.grow{flex:1;min-width:0}
.grow small,.chat small{display:block;color:var(--muted);font-size:12.5px}
.ui-foot{display:flex;align-items:center;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line-2);color:var(--muted);font-size:13px}
.bar{flex:1;height:8px;border-radius:99px;background:var(--line-2);overflow:hidden;display:block}
.bar i{display:block;height:100%;background:var(--sage);border-radius:99px}
.read-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:16px;align-items:start}
.hand{display:flex;flex-direction:column;gap:8px;padding:12px 14px;background:var(--sunk);border:1px solid var(--line-2);border-radius:10px;font-family:var(--serif);font-style:italic;font-size:17px;color:#2B3A55;transform:rotate(-1.2deg)}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.steps li{display:flex;gap:10px;align-items:baseline;padding:7px 10px;border:1px solid var(--line-2);border-radius:8px;background:#fff}
.steps li b{flex:none;width:20px;height:20px;border-radius:50%;background:var(--blue-soft);color:var(--blue);font-size:11px;display:grid;place-items:center}
.steps li.flagged{background:var(--gold-soft);border-color:var(--gold-line)}
.steps li.flagged b{background:var(--gold);color:#fff}
.note{margin-top:12px;padding:12px 14px;border-radius:10px;font-size:13.5px}
.note strong{display:block;margin-bottom:2px}
.note.gold{background:var(--gold-soft);color:var(--gold-ink);border-left:3px solid var(--gold)}
.note.sage{background:var(--sage-wash);color:var(--sage-ink);border-left:3px solid var(--sage)}
.crit-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line-2)}
.crit-row:last-child{border-bottom:0}
.mini-btns{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.mb{display:inline-block;padding:6px 10px;border-radius:8px;border:1px solid var(--line);font-size:12.5px;font-weight:600;color:var(--deep);background:#fff}
.mb.on{background:var(--blue);border-color:var(--blue);color:#fff}
.toggle{flex:none;width:34px;height:20px;border-radius:99px;background:var(--line);position:relative}
.toggle::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:left .2s}
.toggle.on{background:var(--sage)}
.toggle.on::after{left:17px}
.marked{display:grid;grid-template-columns:.9fr 1.1fr;gap:16px}
.sheet{position:relative;padding:14px;background:var(--sunk);border:1px solid var(--line-2);border-radius:10px;display:grid;grid-template-columns:1fr 22px;gap:7px 8px;align-items:center}
.ln{display:block;height:6px;border-radius:4px;background:#D9DCD3;grid-column:1}
.ln.hl{background:#E9D9AE}
.w90{width:90%}.w85{width:85%}.w80{width:80%}.w70{width:70%}.w60{width:60%}.w50{width:50%}
.tick{grid-column:2;width:22px;height:22px;border-radius:50%;background:var(--sage);color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center}
.tick.warn{background:var(--gold)}
.margin p{font-size:13px;color:var(--muted);margin-bottom:8px}
.margin strong{color:var(--ink)}
.bars{display:flex;flex-direction:column;gap:12px;padding:4px 0}
.b{display:grid;grid-template-columns:1fr auto;gap:4px 12px;font-size:13.5px}
.b i{grid-column:1 / -1;height:10px;border-radius:99px;background:linear-gradient(90deg,var(--blue) var(--w),var(--line-2) var(--w))}
.b em{font-style:normal;color:var(--muted);font-size:12.5px;grid-row:1;grid-column:2}
.chat{display:flex;flex-direction:column;gap:10px}
.chat .q{align-self:flex-end;max-width:80%;background:var(--blue);color:#fff;padding:10px 14px;border-radius:14px 14px 4px 14px}
.chat .a{max-width:88%;background:var(--sunk);border:1px solid var(--line-2);padding:10px 14px;border-radius:14px 14px 14px 4px}
.chat .a small{margin-top:6px}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tiles div{padding:14px;border-radius:12px;background:var(--sage-wash);display:flex;flex-direction:column;gap:4px}
.tiles div:nth-child(2n){background:var(--blue-soft)}
.tiles b{font-family:var(--serif);font-size:19px;font-weight:600}
.tiles span{color:var(--muted);font-size:13px}
.prog{display:grid;grid-template-columns:80px 1fr 80px;gap:12px;align-items:center;padding:9px 0;font-size:13.5px}
.prog em{font-style:normal;color:var(--muted);font-size:12.5px;text-align:right}
.table .tr{display:grid;grid-template-columns:70px 1fr auto;gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line-2);font-size:13.5px}
.table .th{color:var(--muted);font-size:12.5px;font-weight:600}
.table .tr:last-child{border-bottom:0}

/* ---------- people ---------- */
.people{background:var(--card);padding:16vh 0 14vh;border-top:1px solid var(--line)}
.section-title{font-size:clamp(36px,4.6vw,64px);line-height:1.04;letter-spacing:-.025em;max-width:18ch}
.people .section-title{margin-bottom:10vh}
.aud{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:center;margin-bottom:14vh}
.aud.flip .aud-copy{order:2}
.aud h3{font-size:clamp(30px,3vw,44px);line-height:1.08;letter-spacing:-.02em;margin-bottom:16px;max-width:16ch}
.aud p{color:var(--muted);font-size:18px;max-width:46ch}
.ticks{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-direction:column;gap:10px}
.ticks li{position:relative;padding-left:30px;font-size:16px}
.ticks li::before{content:"";position:absolute;left:0;top:3px;width:19px;height:19px;border-radius:50%;background:var(--sage-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%232F5A3D' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px no-repeat}
.together{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;padding-top:2vh}
.together-svg{width:min(640px,100%)}
.together-svg circle{fill:var(--sage-wash);stroke:var(--sage);stroke-width:2}
.together-svg circle:nth-of-type(2){fill:var(--deep);stroke:var(--deep)}
.together-svg text{font:600 14px var(--sans);text-anchor:middle;fill:var(--sage-ink)}
.together-svg text:nth-of-type(2){fill:#fff}
.together-svg .link{fill:none;stroke:var(--sage);stroke-width:2;stroke-dasharray:5 7}
.together p{font-family:var(--serif);font-size:clamp(22px,2.2vw,30px);line-height:1.3;max-width:32ch}

/* ---------- lms ---------- */
.lms{background:var(--sage-wash);padding:16vh 0}
.lms-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:center}
.lms-claim{font-family:var(--serif);font-size:clamp(22px,2.2vw,30px);line-height:1.3;color:var(--deep);margin:22px 0 16px;max-width:30ch}
.lms-copy > p:last-child{color:var(--muted);font-size:17.5px;max-width:44ch}
.gb .gr{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:8px;padding:10px 4px;border-bottom:1px solid var(--line-2);font-size:14px;font-variant-numeric:tabular-nums}
.gb .gh{color:var(--muted);font-size:12.5px;font-weight:600}
.gb .gh span:last-child{color:var(--sage-ink)}
.gb .new{color:var(--sage-ink);font-weight:700;background:var(--sage-wash);border-radius:6px;padding:0 8px;justify-self:start}

/* ---------- trust ---------- */
.trust{background:var(--deep);color:var(--deep-text);padding:16vh 0}
.trust .section-title{color:#fff}
.trust-lede{margin-top:20px;font-size:clamp(18px,1.6vw,21px);color:var(--deep-muted);max-width:46ch}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:9vh}
.t{padding-top:22px;border-top:1px solid rgba(221,229,238,.22)}
.t h3{color:#fff;font-size:24px;line-height:1.15;margin-bottom:10px}
.t p{color:var(--deep-muted);font-size:16px}

/* ---------- cta + footer ---------- */
.cta{background:var(--paper);padding:20vh 0}
.cta-title{font-size:clamp(40px,6vw,88px);line-height:1.02;letter-spacing:-.03em;margin-inline:auto;max-width:15ch}
.cta p{margin-top:20px;color:var(--muted);font-size:19px}
.foot{position:relative;z-index:2;background:var(--deep);color:var(--deep-muted);padding:56px 0}
.foot-in{display:flex;flex-direction:column;gap:12px}
.foot p{color:var(--deep-text);font-family:var(--serif);font-size:20px}
.foot .small{font-family:var(--sans);font-size:13px;color:var(--deep-muted)}

/* ---------- static list mode (reduced motion or no WebGL) ---------- */
.rm .tour,.no-gl .tour{height:auto;background:var(--paper);padding:14vh 0 8vh}
.rm .tour-sticky,.no-gl .tour-sticky{position:static;height:auto;overflow:visible}
.rm .stops,.no-gl .stops{position:static;width:min(1240px,100% - 48px);margin-inline:auto;display:flex;flex-direction:column;gap:12vh}
.rm .stop,.no-gl .stop{position:static;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:48px;align-items:center;pointer-events:auto}
.rm .stop-copy,.rm .stop-card,.no-gl .stop-copy,.no-gl .stop-card{position:static;width:auto;opacity:1;transform:none;transition:none}
.rm .tour-controls,.no-gl .tour-controls,.rm .tour-sticky::before,.no-gl .tour-sticky::before{display:none}
.rm .hero-copy > *{animation:none}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .trust-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  :root{--nav-h:60px}
  body{font-size:16px}
  .wrap,.narrow{width:calc(100% - 32px)}
  .hide-sm{display:none}
  .brand{font-size:21px}
  .hero{align-items:flex-start;padding-top:calc(var(--nav-h) + 28px)}
  .hero-in{grid-template-columns:1fr}
  .lede{font-size:16.5px}
  .actions{margin-top:22px}
  /* the longer hero copy runs into the campus on phones: give it a paper backing, then leave room below to see the campus */
  .hero{padding-bottom:46svh}
  .no-gl .hero{padding-bottom:48px}
  .hero-copy{position:relative;z-index:0}
  .hero-copy::before{content:"";position:absolute;z-index:-1;inset:-24px -16px -56px;background:linear-gradient(180deg,var(--paper) calc(100% - 56px),rgba(245,245,240,0));pointer-events:none}
  .stop[data-i="3"] .stop-card .ui-foot,.stop[data-i="6"] .stop-card .ui-foot{display:none}
  .pain{padding:12vh 0 14vh}
  .pain-line{margin-bottom:14vh}
  /* tour on phones: scene top half, card over it while a stop is held, copy below */
  .tour-sticky::before{background:linear-gradient(0deg,rgba(245,245,240,.98) 0,rgba(245,245,240,.94) 36%,rgba(245,245,240,0) 52%)}
  .stop-copy{left:16px;right:16px;width:auto;top:auto;bottom:118px;transform:translateY(12px)}
  .stop.is-active .stop-copy{transform:none}
  .stop-place{margin-bottom:6px;font-size:13px}
  .stop-title{font-size:clamp(28px,7.6vw,38px);margin-bottom:10px}
  .stop-copy p:not(.stop-place):not(.soon){font-size:15px}
  .soon{margin-top:8px}
  .stop-card{left:16px;right:16px;width:auto;top:calc(var(--nav-h) + 10px);transform:translateY(24px) scale(.98)}
  .stop.card-on .stop-card{transform:none}
  .stop-card .ui{padding:14px 16px;font-size:13px}
  .stop-card .read-grid,.stop-card .marked{grid-template-columns:1fr}
  .stop-card .hand{display:none}
  .stop-card .margin p:nth-child(3),.stop-card .mini-btns .mb:nth-child(3){display:none}
  .tour-controls{left:0;right:0;width:auto;bottom:14px;padding:0 16px}
  .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:2px 16px}
  .chips::-webkit-scrollbar{display:none}
  .tchip{flex:none}
  .stepper{margin-top:8px}
  .people{padding:12vh 0 10vh}
  .people .section-title{margin-bottom:7vh}
  .aud,.lms-in{grid-template-columns:1fr;gap:28px;margin-bottom:11vh}
  .aud.flip .aud-copy{order:0}
  .aud p{font-size:16.5px}
  .lms{padding:12vh 0}
  .trust{padding:12vh 0}
  .trust-grid{grid-template-columns:1fr;gap:18px;margin-top:6vh}
  .cta{padding:14vh 0}
  .rm .stop,.no-gl .stop{grid-template-columns:1fr;gap:24px}
  .prog{grid-template-columns:70px 1fr 70px}
}
@media (max-width:860px) and (max-height:700px){
  .stop-card .ui-foot{display:none}
  .stop-copy p:not(.stop-place):not(.soon){font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ---------- v5: short audiences block and three trust lines ---------- */
.people .section-title{margin-bottom:6vh}
.aud3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.aud3 div{padding:22px;border-radius:14px;background:var(--sage-wash);display:flex;flex-direction:column;gap:6px}
.aud3 div:nth-child(2){background:var(--blue-soft)}
.aud3 b{font-family:var(--serif);font-size:26px;font-weight:600}
.aud3 span{color:var(--muted);font-size:16.5px}
.trust-grid.three{grid-template-columns:repeat(3,1fr)}
.trust-grid.three .t h3{margin-bottom:0}
@media (max-width:860px){
  .aud3,.trust-grid.three{grid-template-columns:1fr;gap:14px}
}

/* ---- stop 3: the card reads the steps and raises its flags, in step with the scene ---- */
.scanui .steps.scan{position:relative;overflow:hidden;padding:3px 0}
.scanui .steps.scan::after{content:"";position:absolute;left:-6px;right:-6px;top:0;height:30px;pointer-events:none;border-radius:4px;
  background:linear-gradient(180deg,rgba(79,122,94,0) 0%,rgba(79,122,94,.16) 78%,rgba(79,122,94,.9) 100%);
  animation:cgSweep 7.4s linear infinite}
.scanui .steps.scan li{background:#fff;border-color:var(--line-2);animation:cgRead 7.4s var(--d) infinite}
.scanui .steps.scan li.flagged{animation-name:cgFlag}
.scanui .steps.scan li.flagged b{background:var(--blue-soft);color:var(--blue);animation:cgFlagB 7.4s var(--d) infinite}
.scanui .note{opacity:0}
.scanui .note+.note{margin-top:8px}
.scanui .note.f1{animation:cgNote 7.4s 1.0s infinite}
.scanui .note.f2{animation:cgNote 7.4s 2.0s infinite}
@keyframes cgSweep{0%{transform:translateY(-34px);opacity:0}4%{opacity:1}34%{transform:translateY(232px);opacity:1}40%,100%{transform:translateY(232px);opacity:0}}
@keyframes cgRead{0%,2%{background:#fff;border-color:var(--line-2)}9%,88%{background:var(--sage-wash);border-color:var(--sage-line)}95%,100%{background:#fff;border-color:var(--line-2)}}
@keyframes cgFlag{0%,2%{background:#fff;border-color:var(--line-2)}9%,88%{background:var(--gold-soft);border-color:var(--gold-line)}95%,100%{background:#fff;border-color:var(--line-2)}}
@keyframes cgFlagB{0%,2%{background:var(--blue-soft);color:var(--blue)}9%,88%{background:var(--gold);color:#fff}95%,100%{background:var(--blue-soft);color:var(--blue)}}
@keyframes cgNote{0%,1%{opacity:0;transform:translateY(7px)}6%,86%{opacity:1;transform:none}93%,100%{opacity:0;transform:translateY(7px)}}
@media (prefers-reduced-motion:reduce){
  .scanui .steps.scan::after{display:none}
  .scanui .steps.scan li,.scanui .steps.scan li.flagged b,.scanui .note{animation:none}
  .scanui .note{opacity:1}
  .scanui .steps.scan li.flagged{background:var(--gold-soft);border-color:var(--gold-line)}
  .scanui .steps.scan li.flagged b{background:var(--gold);color:#fff}
}
@media (max-width:860px){
  .scanui .ui-head{padding-bottom:9px;margin-bottom:8px}
  .scanui .steps.scan li{padding:4px 9px;font-size:12.5px}
  .scanui .steps.scan::after{height:22px}
  .scanui .note{padding:8px 10px;font-size:12px}
  .scanui .ui-foot{display:none}
}

/* ================= v8: seven stops, each with its own motion ================= */
:root{
  --acc:#2F8A53; --acc-wash:#E2F1E6; --acc-line:#9FCDAE; --acc-ink:#1E6339;
  --rej:#C2463B; --rej-wash:#FBE6E3; --rej-line:#E9AAA2; --rej-ink:#9A2F26;
}
/* each card arrives its own way (desktop): slide in, rise, zoom, drop */
@media (min-width:861px){
  .stop[data-i="4"] .stop-card{transform:translate(0,-38%) scale(.98)}
  .stop[data-i="5"] .stop-card{transform:translate(0,-50%) scale(.86)}
  .stop[data-i="6"] .stop-card{transform:translate(0,-62%) scale(.98)}
  .stop[data-i="4"].card-on .stop-card,.stop[data-i="5"].card-on .stop-card,.stop[data-i="6"].card-on .stop-card{transform:translate(0,-50%)}
}

/* ---- stop 4: accept is green, reject is red, and each decision pops ---- */
.mb.acc,.mb.rej{transition:background .25s,border-color .25s,color .25s}
.mb.acc{border-color:var(--acc-line);color:var(--acc-ink)}
.mb.rej{border-color:var(--rej-line);color:var(--rej-ink)}
.decide .dec-row{display:flex;align-items:center;gap:12px;padding:11px 10px;margin:0 -10px;border-radius:12px;border-bottom:1px solid var(--line-2);transition:background .3s}
.decide .dec-row small b{font-weight:700}
.decide .dec-row.acc small b{color:var(--acc-ink)}
.decide .dec-row.rej small b{color:var(--rej-ink)}
.dec-mark{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--line-2);transform:scale(.6);opacity:.35}
.dec-mark svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.dec-row.acc .dec-mark{background:var(--acc)}
.dec-row.rej .dec-mark{background:var(--rej)}
.decide .chip.score{background:var(--acc-wash);color:var(--acc-ink);border:1px solid var(--acc-line);opacity:0}
.sendback{display:flex;align-items:center;gap:12px;margin-top:12px;padding:10px 12px;border-radius:12px;background:var(--sunk);border:1px solid var(--line-2);font-size:13px;color:var(--muted);opacity:0}
.sendback b{display:block;color:var(--ink);font-size:13.5px}
.sb-page{flex:none;width:30px;height:38px;border-radius:4px;background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;gap:4px;padding:7px 5px;box-shadow:0 4px 10px -6px rgba(31,53,80,.4)}
.sb-page i{display:block;height:3px;border-radius:2px;background:#D9DCD3}
.sb-page i:nth-child(2){background:var(--acc-line);width:70%}
/* the timeline runs when the card lands, matching the stamps in the scene */
.stop.card-on .dec-row.acc{animation:rowAcc .5s .55s both}
.stop.card-on .dec-row.rej{animation:rowRej .5s 1.45s both}
.stop.card-on .dec-row.acc .mb.acc{animation:btnAcc .3s .55s both}
.stop.card-on .dec-row.rej .mb.rej{animation:btnRej .3s 1.45s both}
.stop.card-on .dec-row.acc .dec-mark{animation:stamp .7s .55s both}
.stop.card-on .dec-row.rej .dec-mark{animation:stamp .7s 1.45s both}
.stop.card-on .decide .chip.score{animation:pop .5s 2.2s both}
.stop.card-on .sendback{animation:sendIn .7s 2.5s both}
.stop.card-on .sb-page{animation:sendPage 1.2s 2.7s both}
@keyframes rowAcc{to{background:var(--acc-wash)}}
@keyframes rowRej{to{background:var(--rej-wash)}}
@keyframes btnAcc{to{background:var(--acc);border-color:var(--acc);color:#fff}}
@keyframes btnRej{to{background:var(--rej);border-color:var(--rej);color:#fff}}
@keyframes stamp{0%{transform:scale(0);opacity:0}45%{transform:scale(1.55);opacity:1}75%{transform:scale(.92)}100%{transform:scale(1);opacity:1}}
@keyframes pop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.2);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes sendIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes sendPage{0%{transform:none}40%{transform:translateX(6px) rotate(6deg)}100%{transform:none}}

/* ---- stop 5: decisions flow into the course memory, and stay there ---- */
.learn .flow{position:relative;height:166px;margin:2px 0 6px}
.dchip{position:absolute;left:16px;top:0;z-index:1;padding:5px 12px;border-radius:999px;color:#fff;font-size:12.5px;font-weight:600;white-space:nowrap;box-shadow:0 8px 18px -10px rgba(31,53,80,.6);opacity:0}
.dchip.acc{background:var(--acc)}
.learn .from{position:absolute;right:0;top:6px;font-size:12px;color:var(--muted)}
.dchip.rej{background:var(--rej);top:32px}
.vault{position:absolute;left:0;right:0;bottom:0;height:106px;border-radius:14px;background:var(--deep);color:#fff;display:flex;align-items:flex-start;justify-content:space-between;padding:12px 16px}
.vault b{font-size:14.5px}
.vcount{font-size:12.5px;color:var(--deep-muted)}
.vcount em{font-style:normal;display:inline-block;min-width:1ch;color:#fff;font-weight:700;font-size:15px}
.uses{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.uses li{display:flex;justify-content:space-between;gap:12px;padding:8px 12px;border-radius:10px;background:var(--blue-soft);font-size:13px;opacity:0}
.uses li b{color:var(--deep);white-space:nowrap}
.uses li span{color:var(--muted);text-align:right}
.stop.card-on .dchip.acc{animation:intoVault 1.2s .3s both}
.stop.card-on .dchip.rej{animation:intoVault2 1.2s .9s both}
.stop.card-on .vault{animation:vaultPulse .6s 1.4s both,vaultPulse .6s 2s both}
.stop.card-on .vcount em{animation:pop .4s 2s both}
.stop.card-on .uses li:nth-child(1){animation:sendIn .5s 2.5s both}
.stop.card-on .uses li:nth-child(2){animation:sendIn .5s 2.9s both}
.stop.card-on .uses li:nth-child(3){animation:sendIn .5s 3.3s both}
@keyframes intoVault{0%{opacity:0;transform:translateY(-14px)}20%{opacity:1;transform:none}50%{opacity:1;transform:none}100%{opacity:1;transform:translateY(98px) scale(.94)}}
@keyframes intoVault2{0%{opacity:0;transform:translateY(-14px)}20%{opacity:1;transform:none}50%{opacity:1;transform:none}100%{opacity:1;transform:translateY(98px) scale(.94)}}
@keyframes vaultPulse{0%{box-shadow:0 0 0 0 rgba(79,122,94,0)}40%{box-shadow:0 0 0 6px rgba(79,122,94,.35)}100%{box-shadow:0 0 0 0 rgba(79,122,94,0)}}

/* ---- stop 6: class insights, donut and bars fill ---- */
.ins-top{display:flex;align-items:center;gap:16px;padding:4px 0 12px;border-bottom:1px solid var(--line-2)}
.donut{position:relative;flex:none;width:84px;height:84px;display:grid;place-items:center}
.donut svg,.rg svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.donut circle,.rg circle{fill:none;stroke-width:9}
.donut .trk,.rg .trk{stroke:var(--line-2)}
.donut .val{stroke:var(--blue);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:70}
.donut b{position:relative;font-family:var(--serif);font-size:22px;color:var(--deep)}
.ins-top p{font-size:15px;line-height:1.4;color:var(--ink)}
.ins-top p b{color:var(--deep)}
.qb-t{margin:12px 0 6px;font-size:12.5px;font-weight:600;color:var(--muted)}
.qbars{display:flex;flex-direction:column;gap:7px}
.qb{display:grid;grid-template-columns:28px 1fr 40px;align-items:center;gap:10px;font-size:13px}
.qb span{font-weight:600;color:var(--deep)}
.qb i{display:block;height:12px;border-radius:99px;background:var(--line-2);position:relative;overflow:hidden}
.qb i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:99px;background:var(--sage)}
.qb.hi i::after{background:var(--blue)}
.qb em{font-style:normal;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.fb{display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding:10px 12px;border-radius:12px 12px 12px 4px;background:var(--sage-wash);border:1px solid var(--sage-line)}
.fb p{font-size:13.5px;color:var(--sage-ink)}
.fb p b{display:block;color:var(--ink);font-size:12.5px}
.stop.card-on .donut .val{animation:dash 1.4s .4s cubic-bezier(.2,.7,.2,1) both}
.stop.card-on .donut b{animation:pop .5s .5s both}
.stop.card-on .qb i::after{animation:barGrow 1s cubic-bezier(.2,.7,.2,1) both}
.stop.card-on .qb:nth-child(1) i::after{animation-delay:.6s}
.stop.card-on .qb:nth-child(2) i::after{animation-delay:.75s}
.stop.card-on .qb:nth-child(3) i::after{animation-delay:.9s}
.stop.card-on .qb:nth-child(4) i::after{animation-delay:1.05s}
.stop.card-on .fb{animation:sendIn .6s 1.9s both}
@keyframes dash{from{stroke-dashoffset:100}}
@keyframes barGrow{from{width:0}}

/* ---- stop 7: instructor view, a dark dashboard with section rings ---- */
.ui.dash{background:var(--deep);border-color:var(--deep);color:var(--deep-text)}
.dash .pill.light{background:rgba(255,255,255,.12);color:#fff}
.dash .muted-s{color:var(--deep-muted)}
.dash .ui-head{border-bottom-color:rgba(221,229,238,.16)}
.dash .ui-head b{color:#fff}
.dash .chip.ok{background:rgba(168,213,181,.16);border-color:rgba(168,213,181,.4);color:var(--sage-light)}
.rings{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:6px 0 10px}
.ring{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.rg{position:relative;width:74px;height:74px;display:grid;place-items:center;margin-bottom:6px}
.rg .trk{stroke:rgba(221,229,238,.16)}
.rg .val{stroke:var(--sage-light);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--p))}
.rg b{position:relative;color:#fff;font-size:16px}
.ring > span:not(.rg){color:#fff;font-weight:600;font-size:13px}
.ring em{font-style:normal;color:var(--deep-muted);font-size:12px}
.hard-t{margin-top:6px;padding-top:10px;border-top:1px solid rgba(221,229,238,.16);font-size:12.5px;font-weight:600;color:var(--deep-muted)}
.hard{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.hard li{display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.07);font-size:13.5px;color:#fff}
.hard li b{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#C9A35A;color:var(--deep);font-size:12px}
.hard li em{font-style:normal;color:var(--deep-muted);font-size:12.5px}
.stop.card-on .rg .val{animation:dash 1.3s cubic-bezier(.2,.7,.2,1) both}
.stop.card-on .ring:nth-child(1) .rg .val{animation-delay:.35s}
.stop.card-on .ring:nth-child(2) .rg .val{animation-delay:.6s}
.stop.card-on .ring:nth-child(3) .rg .val{animation-delay:.85s}
.stop.card-on .hard li{animation:slideL .5s both}
.stop.card-on .hard li:nth-child(1){animation-delay:1.3s}
.stop.card-on .hard li:nth-child(2){animation-delay:1.5s}
@keyframes slideL{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}

/* static list mode: show the final state of every card */
.rm .dec-mark,.no-gl .dec-mark{transform:none;opacity:1}
.rm .decide .chip.score,.no-gl .decide .chip.score,.rm .sendback,.no-gl .sendback,.rm .uses li,.no-gl .uses li{opacity:1}
.rm .dec-row.acc .mb.acc,.no-gl .dec-row.acc .mb.acc{background:var(--acc);border-color:var(--acc);color:#fff}
.rm .dec-row.rej .mb.rej,.no-gl .dec-row.rej .mb.rej{background:var(--rej);border-color:var(--rej);color:#fff}
.rm .dec-row.acc,.no-gl .dec-row.acc{background:var(--acc-wash)}
.rm .dec-row.rej,.no-gl .dec-row.rej{background:var(--rej-wash)}
.rm .learn .flow,.no-gl .learn .flow{height:auto}
.rm .dchip,.no-gl .dchip{position:static;display:inline-block;transform:none;opacity:1;margin:0 6px 8px 0}
.rm .vault,.no-gl .vault{position:static}

@media (max-width:860px){
  .stop-card .ui.decide,.stop-card .ui.learn,.stop-card .ui.insight,.stop-card .ui.dash{padding:12px 14px}
  .decide .dec-row{padding:8px 8px;margin:0 -8px;gap:10px}
  .dec-mark{width:38px;height:38px}
  .dec-mark svg{width:22px;height:22px}
  .decide .mini-btns{flex-direction:column;gap:4px}
  .decide .mb{padding:4px 8px;font-size:12px}
  .sendback{margin-top:8px;padding:8px 10px}
  .learn .flow{height:150px}
  .vault{height:96px}
  .dchip{font-size:11.5px;padding:4px 10px}
  .dchip.rej{top:30px}
  .uses li{padding:6px 10px;font-size:12px}
  .uses li:nth-child(3) span{display:none}
  .learn .ui-foot{display:none}
  @keyframes intoVault{0%{opacity:0;transform:translateY(-14px)}20%{opacity:1;transform:none}50%{opacity:1;transform:none}100%{opacity:1;transform:translateY(90px) scale(.94)}}
  @keyframes intoVault2{0%{opacity:0;transform:translateY(-14px)}20%{opacity:1;transform:none}50%{opacity:1;transform:none}100%{opacity:1;transform:translateY(94px) scale(.94)}}
  .ins-top{padding-bottom:8px;gap:12px}
  .donut{width:64px;height:64px}
  .donut b{font-size:18px}
  .ins-top p{font-size:13.5px}
  .qb-t{margin:8px 0 4px}
  .qbars{gap:5px}
  .fb{margin-top:8px;padding:8px 10px}
  .rg{width:58px;height:58px}
  .rg b{font-size:14px}
  .hard li{padding:6px 8px;font-size:12.5px}
}
@media (max-width:860px) and (max-height:700px){
  .qbars .qb:nth-child(4),.uses li:nth-child(3){display:none}
}
@media (prefers-reduced-motion:reduce){
  .dec-mark{transform:none;opacity:1}
  .decide .chip.score,.sendback,.uses li{opacity:1}
}

/* ---------- savings calculator ---------- */
.calc{position:relative;z-index:1;background:var(--paper);padding:14vh 0 12vh;border-top:1px solid var(--line)}
.calc .section-title{max-width:20ch}
.calc-sub{margin:14px 0 7vh;color:var(--muted);font-size:18px}
.calc-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;align-items:stretch}
.calc-in{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:26px 28px;display:flex;flex-direction:column;gap:22px;box-shadow:var(--shadow)}
.cf{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:6px 12px;font-size:15px;font-weight:600;color:var(--ink)}
.cf output{font:600 22px/1 var(--serif);color:var(--deep)}
.cf input[type=range]{grid-column:1/-1;width:100%;height:28px;margin:0;accent-color:var(--sage);cursor:pointer}
.cf-rate{grid-template-columns:1fr auto;align-items:center}
.rate-box{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--line);border-radius:10px;background:var(--sunk);color:var(--muted)}
.rate-box input{width:90px;border:0;background:transparent;font:600 17px/1.2 var(--sans);color:var(--ink);outline:none}
.rate-box:focus-within{border-color:var(--sage);box-shadow:0 0 0 3px var(--sage-wash)}
.calc-out{display:grid;grid-template-rows:1fr 1fr;gap:16px}
.co{border-radius:18px;padding:24px 26px;display:flex;flex-direction:column;gap:6px;justify-content:center}
.co.co-hand{background:var(--card);border:1px solid var(--line)}
.co.co-cg{background:var(--deep);color:#fff}
.co-l{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.co.co-cg .co-l{color:var(--sage-light)}
.co b{font:600 clamp(34px,3.6vw,48px)/1.05 var(--serif);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.co.co-hand b{color:var(--ink)}
.co-s{font-size:15px;color:var(--muted)}
.co.co-cg .co-s{color:var(--deep-text)}
.calc-note{margin-top:18px;font-size:14px;color:var(--muted)}
.soon{margin-top:14px;font-size:15px;color:var(--ink)}
.soon-tag{display:inline-block;margin-right:6px;padding:2px 10px;border:1px solid var(--sage);border-radius:999px;color:var(--sage-ink);font-size:12px;font-weight:700;letter-spacing:.03em}
@media (max-width:860px){.calc-grid{grid-template-columns:1fr}.calc-in{padding:20px}.calc-out{grid-template-rows:auto}}

/* ---------- video: hero button, big play, full-screen window ---------- */
.watch-btn{display:inline-flex;align-items:center;gap:10px}
.watch-btn svg{width:22px;height:22px;flex:none}
.watch-btn svg circle{fill:var(--sage)}
.watch-btn svg path{fill:#fff}
.play-big{position:absolute;left:50%;bottom:20%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:12px;padding:16px 26px 16px 20px;border:0;border-radius:999px;background:var(--deep);color:#fff;font:600 17px/1 var(--sans);cursor:pointer;box-shadow:0 18px 40px -16px rgba(31,53,80,.6);transition:transform .2s ease,background .2s ease}
.play-big svg{width:26px;height:26px;fill:#fff}
.play-big:hover{transform:translateX(-50%) scale(1.04);background:var(--deep-2)}
.play-big:focus-visible{outline:3px solid var(--sage);outline-offset:4px}
.video-card.playing .play-big{display:none}
.film{width:min(1100px,100vw - 32px);padding:0;border:0;border-radius:16px;background:#000;overflow:visible}
.film::backdrop{background:rgba(15,25,40,.82)}
.film video{display:block;width:100%;aspect-ratio:16/9;border-radius:16px;background:#000}
.film-close{position:absolute;top:-52px;right:0;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.14);cursor:pointer;display:grid;place-items:center}
.film-close svg{width:20px;height:20px;stroke:#fff;stroke-width:2.2;fill:none;stroke-linecap:round}
.film-close:hover{background:rgba(255,255,255,.26)}