:root {
  --violet: #4B32C8; --violet-deep: #3A25A6; --uv: #1B164B; --uv-2: #29245F;
  --lavender: #ECE9FC; --coral: #E65F45; --mustard: #F2B900; --aqua: #7CC1CA; --blush: #FCEBE7;
  --ground: #F6F4FD; --surface: #FFFFFF; --ink: #1B164B; --muted: #5E5880; --line: #E2DDF5;
  --chip: var(--blush); --chip-ink: #C4452F; --good: #1E9E78; --bad: #D8453A;
  --display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --body: "Figtree", "Segoe UI", system-ui, sans-serif;
  --mono: "DM Mono", ui-monospace, Consolas, monospace;
  --r: 22px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: #120C2E; --surface: #1E1746; --ink: #EFEBFF; --muted: #B3ABD8; --line: #342A6E;
    --lavender: #2A2160; --chip: #3A2240; --chip-ink: #FFB3A5; --violet: #8C78FF; --violet-deep: #6B55F0;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #120C2E; --surface: #1E1746; --ink: #EFEBFF; --muted: #B3ABD8; --line: #342A6E;
  --lavender: #2A2160; --chip: #3A2240; --chip-ink: #FFB3A5; --violet: #8C78FF; --violet-deep: #6B55F0;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { background: var(--ground); color: var(--ink); font: 17px/1.6 var(--body); margin: 0; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); line-height: 1.05; margin: 0; text-wrap: balance; letter-spacing: -0.02em; }
p { margin: 0; }
.wrap { width: min(1180px, 100%); margin: 0 auto; padding-inline: 20px; }
.eyebrow { font-family: var(--mono); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
:focus-visible { outline: 3px solid var(--mustard); outline-offset: 3px; border-radius: 8px; }

/* nav */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--uv) 92%, transparent); backdrop-filter: blur(10px); }
.nav .wrap { display: flex; align-items: center; gap: 22px; padding-block: 12px; width: min(1320px, 100%); }
.brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font: 800 22px var(--display); letter-spacing: -.02em; }
.nav-links { display: flex; gap: 18px; margin-left: auto; }
.nav-links a { color: #CFC7FF; text-decoration: none; font-weight: 600; font-size: 14.5px; white-space: nowrap; }
.nav-links a:hover { color: #fff; }
.btn { display: inline-flex; align-items: center; gap: 10px; font: 700 16px var(--body); text-decoration: none; border: none; cursor: pointer;
  border-radius: 16px; padding: 14px 22px; transition: transform .12s ease, box-shadow .12s ease; }
.btn-primary { background: var(--mustard); color: #2B1F00; box-shadow: 0 5px 0 #B98600; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 7px 0 #B98600; }
.btn-primary:active { transform: translateY(4px); box-shadow: 0 1px 0 #B98600; }
.btn-ghost { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.3); }
.btn-ghost:hover { border-color: #fff; }
.btn-violet { background: var(--violet); color: #fff; box-shadow: 0 5px 0 var(--violet-deep); }


/* hero */
.hero { background: var(--uv); color: #fff; position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; opacity: .5;
  background-image: radial-gradient(circle at 18% 22%, rgba(124,193,202,.22), transparent 38%), radial-gradient(circle at 82% 70%, rgba(232,99,79,.25), transparent 40%); }
.hex-field { position: absolute; inset: 0; opacity: .09; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='98' viewBox='0 0 56 98'%3E%3Cpath d='M28 66L0 50V16L28 0l28 16v34L28 66zm0 32L0 82V66l28 16 28-16v16L28 98z' fill='none' stroke='%23fff' stroke-width='1.2'/%3E%3C/svg%3E"); }
.hero .wrap { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding-block: 64px 90px; }
.hero h1 { font-size: clamp(44px, 7vw, 88px); font-weight: 800; }
.hero h1 .swash { color: var(--mustard); font-stretch: 90%; display: inline-block; }
.hero h1 .coral { color: var(--coral); }
.hero .lede { font-size: 20px; color: #D9D2FF; max-width: 34em; margin-top: 22px; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
.boards { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 30px; align-items: center; }
.boards span.lbl { font-family: var(--mono); font-size: 13px; color: #A99EF0; letter-spacing: .08em; }
.pill { background: rgba(252,235,231,.12); border: 1px solid rgba(252,235,231,.35); color: #FFD9D0; border-radius: 999px; padding: 6px 14px; font-weight: 600; font-size: 14px; }
.journey { position: absolute; left: 0; right: 0; bottom: -2px; width: 100%; height: 120px; pointer-events: none; }
@media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr; padding-block: 44px 110px; } }

/* content → course visual */
.transform { position: relative; display: grid; grid-template-columns: minmax(0, 205px) auto minmax(230px, 1fr); gap: 20px; align-items: center; min-height: 420px; }
.sources { display: grid; gap: 10px; }
.src { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px; padding: 10px 12px; font: 500 13px var(--mono); color: #E6E0FF; }
.src .ico { width: 30px; height: 36px; border-radius: 6px; display: grid; place-items: center; font: 700 10px var(--body); color: #fff; flex: none; }
.src:nth-child(1) .ico { background: var(--coral); } .src:nth-child(2) .ico { background: var(--mustard); color: #2B1F00; }
.src:nth-child(3) .ico { background: var(--aqua); color: #0B3940; } .src:nth-child(4) .ico { background: #8C78FF; } .src:nth-child(5) .ico { background: #FF8FAB; color: #3A0D1A; }
.engine-arrow { width: 54px; }
.deck { position: relative; }
.deck .sheet { position: absolute; inset: 0; border-radius: 24px; background: #fff; border: 3px solid #0E0928; }
.deck .sheet.b1 { transform: rotate(6deg) translate(16px, 8px); background: var(--mustard); }
.deck .sheet.b2 { transform: rotate(3deg) translate(8px, 4px); background: var(--aqua); }
.deck .top { position: relative; border-radius: 24px; background: #fff; border: 3px solid #0E0928; box-shadow: 8px 8px 0 #0E0928;
  padding: 14px; display: grid; gap: 10px; align-content: start; color: #1E1840; }
.mini-flow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; background: #ECE9FC; border-radius: 14px; padding: 16px 12px; }
.mini-flow span { background: #fff; border: 2px solid #4B32C8; border-radius: 10px; padding: 6px 9px; font: 700 12px var(--body); color: #4B32C8; }
.mini-flow i { color: #E8634F; font-style: normal; font-weight: 800; }
.deck .top .kick { font: 500 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #C4452F; }
.deck .top strong { font: 800 19px var(--display); line-height: 1.2; }
.deck .top .row { display: flex; gap: 6px; flex-wrap: wrap; }
.deck .top .row span { font: 500 11px var(--mono); background: #ECE9FC; color: #4B32C8; border-radius: 8px; padding: 4px 8px; }
.float { position: absolute; font-family: var(--mono); font-weight: 500; font-size: 14px; color: #2B1F00; background: var(--mustard); z-index: 4;
  padding: 10px 14px; clip-path: polygon(12% 0, 88% 0, 100% 50%, 88% 100%, 12% 100%, 0 50%); animation: bob 4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-10px); } }



/* sections */
section.block { padding-block: 96px; }
.head { display: grid; gap: 14px; max-width: 760px; margin-bottom: 44px; }
.head h2 { font-size: clamp(34px, 5vw, 56px); font-weight: 800; }
.head p:not(.eyebrow) { color: var(--muted); font-size: 19px; }
.eyebrow.v { color: var(--violet); } .eyebrow.c { color: var(--coral); }

/* any subject */
  border-radius: 22px; padding: 16px 20px; box-shadow: 0 6px 0 var(--line); }
.audiences { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 30px; }
.aud { border-radius: 24px; padding: 22px; display: grid; gap: 8px; align-content: start; border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); }
.aud h3 { font-size: 20px; } .aud p { font-size: 15px; }
.aud .eg { font: 500 12px var(--mono); opacity: .8; }
.aud:nth-child(1) { background: var(--violet); color: #fff; } .aud:nth-child(2) { background: var(--mustard); color: #2B1F00; }
.aud:nth-child(3) { background: var(--aqua); color: #0B3940; } .aud:nth-child(4) { background: var(--coral); color: #fff; }
@media (max-width: 980px) { .audiences { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .audiences { grid-template-columns: 1fr; } }

/* live card demo */
.demo { background: var(--lavender); }
.demo-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: center; }
.card-stage { position: relative; }
.demo-copy ul { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 12px; }
.demo-copy li { display: flex; gap: 12px; align-items: flex-start; font-weight: 600; }
.demo-copy li svg { flex: none; margin-top: 3px; }
.card { background: var(--surface); border-radius: 30px; padding: 26px; border: 3px solid var(--ink);
  box-shadow: 8px 8px 0 var(--violet), 0 24px 60px rgba(75,50,200,.18); position: relative; z-index: 1; }
.card-top { display: flex; align-items: center; gap: 12px; }
.bar { flex: 1; height: 12px; background: var(--line); border-radius: 99px; overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #1E9E78, #53D3A6); border-radius: 99px; transition: width .4s; }
.xp { font: 500 15px var(--mono); color: #B98600; }
.tag { display: inline-block; margin-top: 18px; background: var(--chip); color: var(--chip-ink); font: 500 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; padding: 6px 12px; border-radius: 99px; }
.card h3 { font-size: 26px; margin-top: 10px; }
.statement { margin-top: 16px; background: var(--ground); border-radius: 20px; padding: 26px 22px; font-size: 21px; font-weight: 600; text-align: center; min-height: 128px; display: grid; place-items: center; }
.timer { height: 6px; background: var(--line); border-radius: 6px; overflow: hidden; margin-top: 14px; }
.timer i { display: block; height: 100%; background: var(--coral); width: 100%; }
.tf { display: flex; gap: 12px; margin-top: 16px; }
.tf button { flex: 1; font: 700 19px var(--body); border: none; border-radius: 16px; padding: 16px; cursor: pointer; color: #fff; }
.tf .f { background: var(--bad); box-shadow: 0 5px 0 #A52E25; } .tf .t { background: var(--good); box-shadow: 0 5px 0 #13765A; }
.tf button:active { transform: translateY(4px); box-shadow: none; }
.fb { margin-top: 14px; border-radius: 16px; padding: 14px 16px; font-weight: 600; min-height: 54px; }
.fb.ok { background: #DDF5EC; color: #0E5E47; } .fb.no { background: #FDE4E1; color: #8E2A22; }
.fb:empty { background: transparent; }
.dots { display: flex; gap: 6px; margin-top: 16px; } .dots span { flex: 1; height: 8px; border-radius: 8px; background: var(--line); }
.dots .ok { background: var(--good); } .dots .no { background: var(--bad); }
.again { margin-top: 12px; }
@media (max-width: 900px) { .demo-grid { grid-template-columns: 1fr; } }

/* how it works */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: s; position: relative; }
.step { background: var(--surface); border: 3px solid var(--line); border-radius: 26px; padding: 22px 14px 22px; display: grid; gap: 10px; align-content: start;
  box-shadow: 0 6px 0 var(--line); }
.step .n { width: 46px; height: 46px; display: grid; place-items: center; font: 800 20px var(--display); color: #fff; background: var(--violet);
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); }
.step:nth-child(2) .n { background: var(--coral); } .step:nth-child(3) .n { background: #D39A00; } .step:nth-child(4) .n { background: #3E9CA8; }
.step h3 { font-size: 22px; } .step p { color: var(--muted); font-size: 16px; }
.step .io { font: 400 13px var(--mono); color: var(--violet); background: var(--lavender); border-radius: 10px; padding: 6px 10px; justify-self: start; }
@media (max-width: 980px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* features */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feat { background: var(--surface); border-radius: 26px; padding: 26px; display: grid; gap: 10px; align-content: start; border: 3px solid var(--line);
  box-shadow: 0 6px 0 var(--line); transition: transform .2s ease, box-shadow .2s ease; }
.feat:hover { transform: translateY(-4px); box-shadow: 0 10px 0 var(--line); }
.hx { width: 58px; height: 58px; display: grid; place-items: center; clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); }
.hx.v { background: var(--lavender); color: var(--violet); } .hx.c { background: var(--blush); color: #C4452F; }
.hx.m { background: #FFF1CC; color: #9A6A00; } .hx.a { background: #DDF1F3; color: #2E7C86; }
.feat h3 { font-size: 21px; } .feat p { color: var(--muted); font-size: 16px; }
.feat.wide { grid-column: span 2; display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; background: var(--uv); color: #fff; }
.feat.wide p { color: #CFC7FF; }
.games { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.games span { font: 500 13px var(--mono); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 10px; padding: 5px 10px; }
@media (max-width: 900px) { .features { grid-template-columns: 1fr 1fr; } .feat.wide { grid-column: span 2; } }
@media (max-width: 600px) { .features { grid-template-columns: 1fr; } .feat.wide { grid-column: auto; grid-template-columns: 1fr; } }

/* comparison */
.compare-wrap { overflow-x: auto; border-radius: 24px; border: 2px solid var(--line); background: var(--surface); }
table { border-collapse: collapse; width: 100%; min-width: 640px; }
th, td { padding: 16px 18px; text-align: left; border-bottom: 1px solid var(--line); font-size: 16px; }
thead th { font: 700 15px var(--display); background: var(--ground); }
thead th.us { background: var(--violet); color: #fff; }
td.us { background: color-mix(in srgb, var(--violet) 8%, transparent); font-weight: 700; }
tbody tr:last-child td { border-bottom: none; }
.yes, .no { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: 14px; font-weight: 800; }
.yes { background: #DDF5EC; color: #13765A; } .no { background: var(--ground); color: var(--muted); }

/* schools */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.panel { border-radius: 28px; padding: 34px; display: grid; gap: 16px; align-content: start; }
.panel.parents { background: var(--blush); color: #3A1812; }
.panel.makers { background: var(--aqua); color: #0B3940; }
.panel h3 { font-size: 30px; }
.panel ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-weight: 500; }
.mini-map { background: rgba(255,255,255,.7); border-radius: 18px; padding: 16px; display: grid; gap: 10px; }
.mini-map div { display: grid; grid-template-columns: 150px 1fr 44px; gap: 10px; align-items: center; font-size: 14px; font-weight: 600; }
.mini-map b { height: 10px; border-radius: 10px; background: rgba(0,0,0,.08); overflow: hidden; display: block; }
.mini-map b i { display: block; height: 100%; border-radius: 10px; }
.mini-map span { font: 500 13px var(--mono); text-align: right; }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } .mini-map div { grid-template-columns: 110px 1fr 40px; } }

/* cta */
.cta { background: var(--uv); color: #fff; border-radius: 36px; padding: 48px 44px; display: grid; grid-template-columns: 1fr auto; gap: 34px; align-items: center; position: relative; overflow: hidden;
  border: 3px solid var(--ink); box-shadow: 10px 10px 0 var(--mustard); }
.cta h2 { font-size: clamp(32px, 4.5vw, 52px); }
.cta p { color: #CFC7FF; margin-top: 10px; font-size: 18px; }
@media (max-width: 820px) { .cta { grid-template-columns: 1fr; text-align: left; padding: 30px 22px; } .cta .duo { height: 180px; margin-block: 0; } }

.face .mouth { transform-origin: 32px 42px; animation: talk 2.4s ease-in-out infinite; }
@keyframes talk { 0%, 60%, 100% { transform: scaleY(1); } 70%, 90% { transform: scaleY(2.2); } 80% { transform: scaleY(.8); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- multi-page additions ---------- */
html { scroll-padding-top: 84px; }
.brand svg { flex: none; }
.nav-links a[aria-current="page"] { color: #fff; box-shadow: inset 0 -2px 0 var(--mustard); }
.menu-btn { display: none; margin-left: auto; background: transparent; border: 2px solid rgba(255,255,255,.3); color: #fff; border-radius: 12px; padding: 8px 12px; font: 700 14px var(--body); cursor: pointer; }
@media (max-width: 1240px) {
  .nav-links { display: none; }
  .nav .nav-cta { display: none; }
  .menu-btn { display: inline-flex; }
  .nav.open .nav-links { display: grid; position: absolute; left: 0; right: 0; top: 100%; background: var(--uv); padding: 8px 20px 20px; gap: 4px; margin: 0; }
  .nav.open .nav-links a { padding: 12px 4px; font-size: 17px; border-bottom: 1px solid rgba(255,255,255,.1); box-shadow: none; }
  .nav.open .nav-links a.m-cta { color: var(--mustard); border-bottom: none; }
}
@media (min-width: 1241px) { .nav-links a.m-cta { display: none; } }

/* page header for inner pages */
.page-hero { background: var(--uv); color: #fff; position: relative; overflow: hidden; }
.page-hero .wrap { position: relative; padding-block: 64px 96px; display: grid; gap: 18px; }
.page-hero h1 { font-size: clamp(38px, 6vw, 68px); font-weight: 800; max-width: 15em; }
.page-hero .lede { font-size: 20px; color: #D9D2FF; max-width: 36em; }
.page-hero .crumbs { font: 500 13px var(--mono); letter-spacing: .08em; color: #A99EF0; }
.page-hero .crumbs a { color: #A99EF0; text-decoration: none; }
.page-hero .crumbs a:hover { color: #fff; }

/* generic layout helpers */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }
.box { background: var(--surface); border: 3px solid var(--line); border-radius: 24px; padding: 24px; box-shadow: 0 6px 0 var(--line); display: grid; gap: 10px; align-content: start; min-width: 0; }
.box h3 { font-size: 21px; }
.box p { color: var(--muted); font-size: 16px; }
.box .io { font: 400 13px var(--mono); color: var(--violet); background: var(--lavender); border-radius: 10px; padding: 6px 10px; justify-self: start; }
.prose { max-width: 720px; display: grid; gap: 16px; }
.prose h2 { font-size: 30px; margin-top: 22px; }
.prose h3 { font-size: 21px; margin-top: 8px; }
.prose p, .prose li { font-size: 17px; }
.prose ul { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.prose a { color: var(--violet); }
.note { font-size: 14px; color: var(--muted); }
.tick { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.tick li { display: flex; gap: 12px; align-items: flex-start; font-weight: 600; }
.tick li svg { flex: none; margin-top: 3px; }

/* pipeline detail (how it works) */
.stage { display: grid; grid-template-columns: 70px minmax(0, 1fr) minmax(0, 360px); gap: 26px; align-items: start; padding-block: 34px; border-top: 2px solid var(--line); }
.stage:first-child { border-top: none; }
.stage .n { width: 56px; height: 56px; display: grid; place-items: center; font: 800 24px var(--display); color: #fff; background: var(--violet);
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); }
.stage:nth-child(2) .n { background: var(--coral); }
.stage:nth-child(3) .n { background: #D39A00; }
.stage:nth-child(4) .n { background: #3E9CA8; }
.stage:nth-child(5) .n { background: var(--violet-deep); }
.stage h3 { font-size: 26px; }
.stage p { color: var(--muted); margin-top: 8px; }
.stage .sample { background: var(--surface); border: 3px solid var(--ink); border-radius: 20px; padding: 16px; box-shadow: 6px 6px 0 var(--violet); font-size: 15px; display: grid; gap: 8px; }
.stage .sample .k { font: 500 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--chip-ink); }
.stage .sample .row { display: flex; gap: 6px; flex-wrap: wrap; }
.stage .sample .row span { font: 500 12px var(--mono); background: var(--lavender); color: var(--violet); border-radius: 8px; padding: 4px 8px; }
@media (max-width: 900px) { .stage { grid-template-columns: 56px minmax(0, 1fr); } .stage .sample { grid-column: 1 / -1; } }

/* formats */
.formats { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.fmt { background: var(--surface); border: 2px solid var(--line); border-radius: 18px; padding: 14px 16px; display: grid; gap: 4px; }
.fmt b { font: 700 16px var(--display); }
.fmt span { font-size: 14px; color: var(--muted); }

/* plans */
.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.plan { background: var(--surface); border: 3px solid var(--line); border-radius: 26px; padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.plan.pop { border-color: var(--ink); box-shadow: 8px 8px 0 var(--mustard); }
.plan h3 { font-size: 24px; }
.plan .for { color: var(--muted); font-size: 15px; min-height: 3em; }
.plan .price { font: 800 24px var(--display); }
.plan .price small { font: 500 13px var(--mono); color: var(--muted); display: block; letter-spacing: .04em; }
.plan ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: 15px; }
.plan li { display: flex; gap: 8px; }
.plan li::before { content: "✓"; color: var(--good); font-weight: 800; }
.plan .btn { justify-content: center; margin-top: auto; }
.plan .badge { align-self: flex-start; }
.badge { justify-self: start; font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; background: var(--mustard); color: #2B1F00; border-radius: 99px; padding: 4px 10px; }
@media (max-width: 1080px) { .plans { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .plans { grid-template-columns: 1fr; } }
.soon { font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; background: var(--lavender); color: var(--violet); border-radius: 99px; padding: 3px 9px; vertical-align: 3px; margin-left: 6px; white-space: nowrap; }

/* faq */
.faq { display: grid; gap: 10px; max-width: 860px; }
.faq details { background: var(--surface); border: 2px solid var(--line); border-radius: 18px; padding: 4px 20px; }
.faq summary { cursor: pointer; font: 700 18px var(--display); padding: 14px 0; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--violet); font-size: 24px; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--muted); padding-bottom: 16px; }

/* solution cards */
.sol-card { text-decoration: none; color: inherit; border-radius: 26px; padding: 26px; display: grid; gap: 10px; align-content: start; border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); transition: transform .15s ease, box-shadow .15s ease; }
.sol-card:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--ink); }
.sol-card h3 { font-size: 24px; }
.sol-card .go { font-weight: 700; margin-top: 6px; }
.sol-card.v { background: var(--violet); color: #fff; }
.sol-card.m { background: var(--mustard); color: #2B1F00; }
.sol-card.a { background: var(--aqua); color: #0B3940; }
.sol-card.c { background: var(--coral); color: #fff; }
.sol-card .eg { font: 500 12px var(--mono); opacity: .85; }
.flowline { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); gap: 14px; align-items: center; }
.flowline .arrow { color: var(--coral); }
@media (max-width: 720px) { .flowline { grid-template-columns: 1fr; } .flowline .arrow { transform: rotate(90deg); justify-self: center; } }

/* demo page: order game */
.order-list { display: grid; gap: 8px; margin-top: 16px; }
.order-list button { font: 600 16px var(--body); text-align: left; background: var(--ground); color: var(--ink); border: 2px solid var(--line); border-radius: 14px; padding: 12px 14px; cursor: pointer; display: flex; gap: 10px; align-items: center; }
.order-list button:hover:not(:disabled) { border-color: var(--violet); }
.order-list button .pos { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--line); font: 700 13px var(--mono); flex: none; }
.order-list button.placed { background: var(--lavender); border-color: var(--violet); }
.order-list button.placed .pos { background: var(--violet); color: #fff; }
.order-list button.right { background: #DDF5EC; border-color: var(--good); color: #0E5E47; }
.order-list button.right .pos { background: var(--good); color: #fff; }
.order-list button.wrong { background: #FDE4E1; border-color: var(--bad); color: #8E2A22; }
.order-list button.wrong .pos { background: var(--bad); color: #fff; }
.card-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

/* contact form */
.form { display: grid; gap: 14px; }
.form label { font-weight: 700; font-size: 15px; display: grid; gap: 6px; }
.form input, .form select, .form textarea { font: 16px var(--body); color: var(--ink); background: var(--surface); border: 2px solid var(--line); border-radius: 14px; padding: 12px 14px; width: 100%; }
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--violet); outline: none; }
.form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .form .two { grid-template-columns: 1fr; } }
.form-status { border-radius: 14px; padding: 12px 14px; font-weight: 600; }
.form-status.ok { background: #DDF5EC; color: #0E5E47; }
.form-status.no { background: #FDE4E1; color: #8E2A22; }
.contact-side { background: var(--lavender); border-radius: 26px; padding: 26px; display: grid; gap: 14px; align-content: start; }
.contact-side .mail { font: 700 20px var(--display); color: var(--violet); word-break: break-all; }

/* footer, multi-column */
footer.site { background: var(--uv); color: #CFC7FF; padding-block: 56px 40px; margin-top: 0; border-top: 1px solid rgba(255,255,255,.08); }
footer.site .cols { display: grid; grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); gap: 30px; }
footer.site h4 { font: 500 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #A99EF0; margin: 0 0 12px; }
footer.site ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
footer.site a { color: #E6E0FF; text-decoration: none; }
footer.site a:hover { color: #fff; text-decoration: underline; }
footer.site .base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); font-size: 14px; color: #A99EF0; }
footer.site .brand { margin-bottom: 12px; }
footer.site p { max-width: 30em; }
@media (max-width: 980px) { footer.site .cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } footer.site .cols > div:first-child { grid-column: 1 / -1; } }
@media (max-width: 600px) { footer.site .cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { footer.site .cols { grid-template-columns: 1fr; } }
.notfound { text-align: center; padding-block: 120px; display: grid; gap: 18px; justify-items: center; }
.notfound h1 { font-size: clamp(60px, 12vw, 140px); color: var(--violet); }

/* ================= Unbox Learning: narrative sections ================= */
:root { --navy: #1B164B; --plum: #29245F; --sun: #F2B900; --sun-deep: #B98A00; --aqua-ink: #1F6E78; }

/* header buttons */
.nav-cta { display: flex; gap: 10px; flex: none; }
.btn-sm { padding: 10px 16px; font-size: 14.5px; border-radius: 13px; }
.btn-primary.btn-sm { box-shadow: 0 4px 0 #B98600; }
.btn-ghost.btn-sm { border-width: 2px; }
.btn-coral { background: var(--coral); color: #fff; box-shadow: 0 5px 0 #A93D29; }
.btn-coral:hover { transform: translateY(-2px); }
.nav.open .nav-links a.m-cta + a.m-cta { color: #fff; }

/* hero refinements */
.hero h1 { font-size: clamp(42px, 6.4vw, 82px); }
.trust-line { margin-top: 26px; font: 500 13px var(--mono); letter-spacing: .06em; color: #B9B0F5; }
.src .ico { width: 46px; font-size: 9px; letter-spacing: .02em; }
.src:nth-child(6) .ico { background: var(--sun); color: #2B1F00; }
.deck .top .row span.act { background: #FFF1C2; color: #6B4E00; }
.float { white-space: nowrap; }
.float.f1 { top: -18px; right: 4%; }
.float.f5 { top: -18px; left: 2%; background: #8C78FF; color: #fff; animation-delay: -1.5s; }
.float.f2 { bottom: 4%; right: -10px; background: var(--coral); color: #fff; animation-delay: -1s; }
.float.f3 { bottom: -26px; left: 44%; background: var(--aqua); color: #0B3940; animation-delay: -2s; }
.float.f4 { bottom: -50px; left: 2%; background: #fff; color: var(--navy); animation-delay: -3s; }
@media (max-width: 1100px) { .float.f2 { right: 0; } }
.hero .wrap { padding-block: 64px 120px; }
@media (max-width: 560px) {
  .transform { grid-template-columns: 1fr; min-height: 0; padding-top: 30px; }
  .engine-arrow { transform: rotate(90deg); justify-self: center; }
  .float.f2, .float.f3 { display: none; }
  .float.f4 { left: auto; right: 0; }
}

/* marquee */
.marquee { background: var(--sun); color: var(--navy); overflow: hidden; border-block: 3px solid var(--navy); }
.marquee-track { display: flex; width: max-content; animation: marq 28s linear infinite; }
.marquee-track span { font: 800 clamp(20px, 2.6vw, 30px) var(--display); letter-spacing: .02em; padding-block: 14px; white-space: nowrap; }
@keyframes marq { to { transform: translateX(-50%); } }

/* section shells */
.sec { padding-block: 104px; position: relative; }
.sec.soft { background: var(--lavender); }
.sec.warm { background: color-mix(in srgb, var(--blush) 70%, var(--ground)); }
.sec.plum, .sec.navy, .sec.violet { color: #fff; }
.sec.plum { background: var(--plum); }
.sec.navy { background: var(--navy); }
.sec.violet { background: var(--violet-deep); background: #4B32C8; }
.sec.sun { background: var(--sun); color: var(--navy); }
.sec .head { max-width: 820px; }
.sec .head h2 { font-size: clamp(36px, 5.2vw, 64px); font-weight: 800; }
.sec .lede { font-size: 19px; color: var(--muted); max-width: 40em; }
.sec.plum .lede, .sec.navy .lede, .sec.violet .lede { color: #D6CFFF; }
.sec.sun .lede { color: #3B2F00; }
.eyebrow { color: var(--sun); }
.eyebrow.v { color: var(--violet); } .eyebrow.c { color: var(--coral); } .eyebrow.a { color: var(--aqua-ink); }
.hl { color: var(--sun); } .hl-v { color: var(--violet); } .hl-c { color: var(--coral); } .hl-a { color: var(--aqua-ink); }
.statement-line { margin-top: 56px; font: 800 clamp(26px, 3.4vw, 42px)/1.15 var(--display); letter-spacing: -.02em; text-wrap: balance; max-width: 22em; }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.two-col > .head { margin-bottom: 0; }
@media (max-width: 920px) { .two-col { grid-template-columns: 1fr; gap: 36px; } }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.fchip { display: inline-flex; align-items: center; gap: 6px; font: 500 13px var(--mono); padding: 7px 12px; border-radius: 99px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25); color: #fff; }
.pill-tag { justify-self: start; font: 500 13px var(--mono); letter-spacing: .04em; background: var(--sun); color: var(--navy); padding: 7px 14px; border-radius: 99px; }
.center-lede { margin: 40px auto 0; text-align: center; }
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.jump a { font: 600 14px var(--body); color: #fff; text-decoration: none; border: 2px solid rgba(255,255,255,.25); border-radius: 99px; padding: 7px 14px; }
.jump a:hover { border-color: var(--sun); color: var(--sun); }
.page-hero h1 .swash { color: var(--sun); } .page-hero h1 .coral { color: var(--coral); }

/* problem */
.problems { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.prob { background: rgba(255,255,255,.06); border: 2px solid rgba(255,255,255,.14); border-radius: 22px; padding: 24px; display: grid; gap: 10px; align-content: start; }
.prob .num { font: 500 13px var(--mono); color: var(--sun); }
.prob h3 { font-size: 22px; } .prob p { color: #D6CFFF; font-size: 16px; }
@media (max-width: 980px) { .problems { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .problems { grid-template-columns: 1fr; } }

/* pipeline */
.pipe { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; position: relative; }
.pstage { background: var(--surface); border: 3px solid var(--navy); border-radius: 22px; padding: 20px 18px; display: grid; gap: 12px; align-content: start; box-shadow: 6px 6px 0 var(--navy); position: relative; }
.pstage + .pstage::before { content: "→"; position: absolute; left: -15px; top: 26px; font: 800 20px var(--display); color: var(--coral); z-index: 2; }
.pn { font: 800 30px var(--display); color: var(--violet); }
.s2 .pn { color: var(--coral); } .s3 .pn { color: #B98A00; } .s4 .pn { color: var(--aqua-ink); } .s5 .pn { color: var(--navy); }
.pstage h3 { font-size: 19px; } .pstage p { color: var(--muted); font-size: 14.5px; }
.pvis { display: flex; flex-wrap: wrap; gap: 6px; }
.pvis span { font: 500 12px var(--mono); padding: 4px 8px; border-radius: 8px; background: var(--lavender); color: var(--violet); }
.pvis.picks span { background: var(--ground); color: var(--muted); border: 1px dashed var(--line); }
.pvis.picks span.on { background: var(--sun); color: var(--navy); border-color: var(--sun); }
.pvis.graph { flex-direction: column; align-items: flex-start; gap: 2px; }
.pvis.graph span { background: #DFF1F3; color: var(--aqua-ink); } .pvis.graph i { font-style: normal; color: var(--coral); padding-left: 10px; line-height: 1; }
.pvis.verbs span { background: #FFF1C2; color: #6B4E00; }
.pvis.branch { flex-direction: column; align-items: flex-start; gap: 4px; }
.pvis.branch .b-in { background: var(--navy); color: #fff; }
.pvis.branch .ok { background: #DDF5EC; color: #0E5E47; } .pvis.branch .mid { background: #FFF1C2; color: #6B4E00; } .pvis.branch .low { background: var(--blush); color: #A93D29; }
@media (max-width: 1100px) { .pipe { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pstage + .pstage::before { display: none; } }
@media (max-width: 600px) { .pipe { grid-template-columns: 1fr; } }

/* hands-on labs */
.labs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.lab { background: var(--surface); border: 3px solid var(--navy); border-radius: 24px; padding: 20px; display: grid; gap: 12px; align-content: start; box-shadow: 6px 6px 0 var(--navy); min-width: 0; }
.lab h3 { font-size: 19px; line-height: 1.2; }
.subj { justify-self: start; font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; border-radius: 99px; }
.c-v { background: var(--lavender); color: var(--violet); } .c-g { background: #DDF5EC; color: #0E5E47; } .c-y { background: #FFF1C2; color: #6B4E00; }
.c-c { background: var(--blush); color: #A93D29; } .c-a { background: #DFF1F3; color: var(--aqua-ink); }
.lab-stage { background: var(--ground); border-radius: 16px; padding: 12px; min-height: 120px; color: var(--ink); }
.lab-ctl { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; font-weight: 700; font-size: 14px; }
.lab-ctl input[type=range] { width: 100%; accent-color: var(--violet); }
.lab-ctl output { font: 500 14px var(--mono); min-width: 3.5em; text-align: right; }
.lab-read { font-size: 15px; color: var(--muted); min-height: 1.6em; }
.lab-read b { color: var(--ink); }
.lab-hint { font: 500 12px var(--mono); color: var(--coral); }
.track { position: relative; height: 120px; overflow: hidden; background: linear-gradient(transparent 82%, var(--line) 82% 86%, transparent 86%), var(--ground); }
.cart { position: absolute; left: 6px; bottom: 22px; width: 64px; height: 40px; background: var(--violet); border-radius: 10px; color: #fff; font: 700 12px var(--mono); display: grid; place-items: center; }
.cart::before, .cart::after { content: ""; position: absolute; bottom: -10px; width: 14px; height: 14px; border-radius: 50%; background: var(--navy); }
.cart::before { left: 8px; } .cart::after { right: 8px; }
.cart.go { animation: roll var(--dur, 2s) cubic-bezier(.5, 0, 1, 1) forwards; }
@keyframes roll { to { left: calc(100% - 70px); } }
.cell-stage { display: grid; place-items: center; }
.cell { width: 100%; max-width: 260px; }
.cell .org { transition: opacity .4s; } .cell .membrane { transition: stroke-dasharray .4s; }
.org-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.org-chips button, .lab-choices button { font: 600 14px var(--body); border: 2px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 12px; padding: 8px 12px; cursor: pointer; text-align: left; }
.org-chips button:hover, .lab-choices button:hover { border-color: var(--violet); }
.org-chips button.done { background: #DDF5EC; border-color: #1E9E78; color: #0E5E47; }
.cell-stage.over { outline: 3px dashed var(--violet); outline-offset: -6px; }
.demand { width: 100%; color: var(--ink); }
.chat-mini { display: grid; gap: 8px; align-content: start; max-height: 180px; overflow: auto; }
.bub { padding: 8px 12px; border-radius: 14px; font-size: 14.5px; max-width: 92%; }
.bub small { display: block; font-size: 12px; opacity: .7; }
.bub.them { background: var(--surface); border: 2px solid var(--line); justify-self: start; border-bottom-left-radius: 4px; }
.bub.me { background: var(--violet); color: #fff; justify-self: end; border-bottom-right-radius: 4px; }
.lab-choices { display: grid; gap: 6px; }
.lab-choices button.picked-good { border-color: #1E9E78; background: #DDF5EC; color: #0E5E47; }
.lab-choices button.picked-bad { border-color: var(--bad); background: #FDE4E1; color: #8E2A22; }
.mail-mock { font-size: 14px; background: var(--surface); border-radius: 10px; padding: 8px 10px; border: 2px solid var(--line); }
.meter { height: 12px; border-radius: 99px; background: var(--line); overflow: hidden; margin-top: 12px; }
.meter i { display: block; height: 100%; width: 12%; background: #1E9E78; border-radius: 99px; transition: width .3s, background .3s; }
.meter-lbl { font-size: 14px; margin-top: 6px; }
.toggles { display: grid; gap: 4px; font-size: 14px; }
.toggles input { accent-color: var(--violet); margin-right: 6px; }
@media (max-width: 1000px) { .labs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .labs { grid-template-columns: 1fr; } }

/* tutor conversation */
.convo { background: var(--surface); color: var(--ink); border-radius: 28px; padding: 22px; border: 3px solid var(--navy); box-shadow: 10px 10px 0 var(--sun); display: grid; gap: 14px; }
.convo-top { display: flex; gap: 12px; align-items: center; padding-bottom: 12px; border-bottom: 2px solid var(--line); }
.convo-top b { display: block; font-family: var(--display); font-size: 18px; }
.convo-top small { color: var(--muted); font-size: 13px; }
.convo-log { display: grid; gap: 10px; }
.convo-log.second { padding-top: 12px; border-top: 2px dashed var(--line); }
.msg { padding: 10px 14px; border-radius: 16px; font-size: 15.5px; max-width: 88%; }
.msg .who { display: block; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; opacity: .7; margin-bottom: 2px; }
.msg.me { background: var(--lavender); justify-self: end; border-bottom-right-radius: 4px; }
.msg.ai { background: var(--navy); color: #fff; justify-self: start; border-bottom-left-radius: 4px; }
.convo-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.convo-actions button { font: 700 14px var(--body); border: 2px solid var(--violet); color: var(--violet); background: var(--surface); border-radius: 99px; padding: 7px 14px; cursor: pointer; }
.convo-actions button:hover, .convo-actions button[aria-pressed="true"] { background: var(--violet); color: #fff; }

/* voice */
.voice-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 50px; align-items: center; margin-bottom: 50px; }
.voice-grid .head { margin-bottom: 0; }
@media (max-width: 920px) { .voice-grid { grid-template-columns: 1fr; } }
.voice-card { background: var(--navy); color: #fff; border-radius: 28px; padding: 26px; display: grid; gap: 18px; box-shadow: 10px 10px 0 var(--coral); }
.vline { display: grid; gap: 8px; }
.vline .who { font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #B9B0F5; }
.vline p { font: 700 19px var(--display); }
.wave { display: flex; align-items: center; gap: 4px; height: 44px; }
.wave i { width: 6px; border-radius: 6px; background: var(--sun); height: 20%; animation: wave 1.1s ease-in-out infinite; }
.wave.alt i { background: var(--coral); }
.wave i:nth-child(2n) { animation-delay: -.2s; } .wave i:nth-child(3n) { animation-delay: -.45s; } .wave i:nth-child(4n) { animation-delay: -.7s; } .wave i:nth-child(5n) { animation-delay: -.9s; }
@keyframes wave { 0%, 100% { height: 18%; } 50% { height: 95%; } }
.speak { justify-self: start; }
.uses { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.uses article { background: var(--surface); border: 2px solid var(--line); border-radius: 20px; padding: 18px; display: grid; gap: 8px; align-content: start; }
.uses svg { color: var(--coral); }
.uses h3 { font-size: 18px; } .uses p { color: var(--muted); font-size: 15px; }
@media (max-width: 1000px) { .uses { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .uses { grid-template-columns: 1fr; } }

/* multilingual */
.lang-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 30px; align-items: center; }
@media (max-width: 920px) { .lang-grid { grid-template-columns: 1fr; } }
.lang-tree { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 18px; align-items: center; background: var(--navy); color: #fff; border-radius: 26px; padding: 26px; }
.lang-src { background: var(--surface); color: var(--navy); border-radius: 16px; padding: 14px 18px; display: grid; }
.lang-src small { font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.lang-src b { font: 800 22px var(--display); }
.lang-arrow { color: var(--sun); }
.lang-out { display: flex; flex-wrap: wrap; gap: 8px; }
.lang-out span { font-size: 17px; font-weight: 700; background: rgba(124,193,202,.18); border: 1px solid rgba(124,193,202,.5); border-radius: 12px; padding: 6px 12px; }
.lang-out .more { border-style: dashed; }
@media (max-width: 560px) { .lang-tree { grid-template-columns: 1fr; } .lang-arrow { transform: rotate(90deg); } }
.lang-modes { display: grid; gap: 12px; }
.lang-modes article { background: var(--surface); border: 2px solid var(--line); border-radius: 18px; padding: 16px 18px; display: grid; gap: 6px; }
.lang-modes p { color: var(--muted); font-size: 16px; }
.tagc { justify-self: start; font: 800 18px var(--display); padding: 2px 12px; border-radius: 10px; }
.tagc.a { background: #DFF1F3; color: var(--aqua-ink); } .tagc.v { background: var(--lavender); color: var(--violet); } .tagc.c { background: var(--blush); color: #A93D29; }

/* reach */
.reach { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.reach article { background: var(--surface); border-radius: 22px; padding: 22px; display: grid; gap: 8px; align-content: start; border: 2px solid var(--line); }
.reach svg { color: var(--violet); }
.reach h3 { font-size: 20px; } .reach p { color: var(--muted); font-size: 15.5px; }
@media (max-width: 900px) { .reach { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .reach { grid-template-columns: 1fr; } }

/* personalization */
.paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.path { border-radius: 24px; padding: 24px; display: grid; gap: 10px; align-content: start; background: rgba(255,255,255,.06); border: 2px solid rgba(255,255,255,.16); }
.path .who { font: 500 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.path.ok .who { color: #7FE0BE; } .path.mid .who { color: var(--sun); } .path.low .who { color: #FF9A86; }
.path h3 { font-size: 22px; }
.path ol { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 0; }
.path li { padding: 10px 14px; border-radius: 12px; background: rgba(255,255,255,.08); font-weight: 600; }
.path li + li { margin-top: 26px; position: relative; }
.path li + li::before { content: "↓"; position: absolute; top: -24px; left: 18px; color: var(--sun); font-weight: 800; }
@media (max-width: 860px) { .paths { grid-template-columns: 1fr; } }

/* memory timeline */
.timeline { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; position: relative; }
.timeline li { display: grid; grid-template-columns: 86px 1fr; column-gap: 16px; padding: 14px 0; position: relative; }
.timeline li b { font: 700 19px var(--display); } .timeline li small { grid-column: 2; color: var(--muted); font-size: 15px; }
.timeline .day { grid-row: span 2; align-self: center; font: 500 14px var(--mono); background: var(--violet); color: #fff; text-align: center; border-radius: 12px; padding: 10px 0; }
.timeline li:nth-child(2) .day { background: var(--aqua-ink); } .timeline li:nth-child(3) .day { background: #B98A00; } .timeline li:nth-child(4) .day { background: var(--coral); }
.timeline li + li::before { content: ""; position: absolute; left: 42px; top: -8px; height: 22px; border-left: 3px dotted var(--line); }

/* assessment */
.assess-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
@media (max-width: 920px) { .assess-grid { grid-template-columns: 1fr; } }
.score-vs { display: grid; gap: 14px; }
.old-score { display: flex; align-items: baseline; gap: 14px; background: var(--surface); border-radius: 16px; padding: 14px 18px; border: 2px dashed var(--line); color: var(--muted); }
.old-score small { font: 500 12px var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.old-score b { font: 800 34px var(--display); color: var(--muted); text-decoration: line-through; }
.loop { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; counter-reset: lp; }
.loop li { counter-increment: lp; background: var(--navy); color: #fff; border-radius: 12px; padding: 9px 12px; font-weight: 600; font-size: 15px; }
.loop li::before { content: counter(lp); font: 500 12px var(--mono); color: var(--sun); margin-right: 8px; }
.loop li:nth-child(2) { background: var(--coral); } .loop li:nth-child(2)::before { color: #fff; }
.almost { background: #FFF1C2; color: #3B2F00; border-radius: 16px; padding: 14px 18px; font-size: 15.5px; }
.mini-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.mini-cards span { display: flex; gap: 10px; align-items: center; background: var(--surface); border: 2px solid var(--line); border-radius: 14px; padding: 12px 14px; font-weight: 700; }
.mini-cards svg { color: var(--coral); flex: none; }
@media (max-width: 520px) { .mini-cards { grid-template-columns: 1fr; } }

/* educators */
.control-line { font: 800 26px var(--display); margin-top: 6px; } .control-line b { color: var(--violet); }
.workflow { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; counter-reset: wf; }
.workflow li { counter-increment: wf; display: grid; gap: 2px; padding: 16px 18px 16px 64px; background: var(--surface); border: 3px solid var(--navy); border-radius: 18px; position: relative; box-shadow: 5px 5px 0 var(--navy); }
.workflow li + li { margin-top: 26px; }
.workflow li + li::after { content: "↓"; position: absolute; top: -27px; left: 28px; font-weight: 800; color: var(--coral); }
.workflow li::before { content: counter(wf); position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; display: grid; place-items: center; font: 800 16px var(--display); color: var(--navy); background: var(--sun); clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); }
.workflow b { font: 700 19px var(--display); } .workflow small { color: var(--muted); font-size: 14.5px; }
.outs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.out-card { background: var(--surface); border-radius: 20px; padding: 18px; display: grid; gap: 8px; align-content: start; border: 2px solid var(--line); transition: transform .15s, box-shadow .15s, border-color .15s; }
.out-card:hover { transform: translateY(-4px); border-color: var(--navy); box-shadow: 5px 5px 0 var(--navy); }
.out-card svg { color: var(--violet); } .out-card:nth-child(3n+2) svg { color: var(--coral); } .out-card:nth-child(3n) svg { color: var(--aqua-ink); }
.out-card h3 { font-size: 17px; } .out-card p { color: var(--muted); font-size: 14.5px; }
@media (max-width: 1080px) { .outs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 680px) { .outs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .outs { grid-template-columns: 1fr; } }

/* audiences */
.aud-panels { display: grid; gap: 12px; }
.aud-p { border-radius: 24px; border: 3px solid var(--navy); overflow: hidden; }
.aud-p summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr) 40px; gap: 18px; align-items: center; padding: 22px 26px; }
.aud-p summary::-webkit-details-marker { display: none; }
.aud-p summary::after { content: "+"; font: 800 30px var(--display); justify-self: end; }
.aud-p[open] summary::after { content: "–"; }
.ap-name { font: 800 clamp(22px, 2.6vw, 30px) var(--display); letter-spacing: -.01em; }
.ap-line { font-size: 18px; font-weight: 600; }
.ap-body { padding: 0 26px 24px; display: flex; flex-wrap: wrap; gap: 14px 30px; align-items: center; justify-content: space-between; }
.ap-tags { font: 500 14px var(--mono); }
.ap-go { font-weight: 800; text-decoration: none; border-bottom: 2px solid currentColor; }
.aud-p.v { background: var(--violet); color: #fff; } .aud-p.y { background: var(--sun); color: var(--navy); }
.aud-p.a { background: var(--aqua); color: #0B3940; } .aud-p.c { background: var(--coral); color: #fff; } .aud-p.n { background: var(--navy); color: #fff; }
@media (max-width: 720px) { .aud-p summary { grid-template-columns: 1fr 30px; } .ap-line { grid-column: 1; grid-row: 2; font-size: 16px; } .aud-p summary::after { grid-row: 1; grid-column: 2; } }

/* integrations */
.stack-map { background: var(--surface); border: 3px solid var(--navy); border-radius: 26px; padding: 26px; display: grid; gap: 10px; justify-items: center; box-shadow: 8px 8px 0 var(--violet); color: var(--ink); }
.sm-hub { display: flex; align-items: center; gap: 10px; background: var(--navy); color: #fff; font: 800 20px var(--display); padding: 10px 18px; border-radius: 16px; }
.sm-lines { width: 80%; height: 50px; color: var(--violet); }
.sm-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; }
.sm-row span { text-align: center; font: 700 16px var(--display); background: var(--lavender); color: var(--violet); border-radius: 12px; padding: 10px 6px; }
.sm-row.std span { font: 500 14px var(--mono); background: #DFF1F3; color: var(--aqua-ink); }
.stack-map .note { text-align: center; margin-top: 6px; }

/* analytics */
.dash { background: var(--surface); border: 3px solid var(--navy); border-radius: 28px; padding: 24px; box-shadow: 10px 10px 0 var(--aqua); display: grid; gap: 20px; }
.dash-top { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-family: var(--display); font-size: 18px; }
.dash-top .ex { font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: var(--ground); border-radius: 99px; padding: 4px 10px; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kpis div { background: var(--ground); border-radius: 16px; padding: 16px; display: grid; gap: 2px; }
.kpis b { font: 800 34px var(--display); color: var(--navy); font-variant-numeric: tabular-nums; }
.kpis div:nth-child(2) b { color: var(--coral); } .kpis div:nth-child(3) b { color: var(--aqua-ink); } .kpis div:nth-child(4) b { color: var(--violet); }
.kpis span { color: var(--muted); font-size: 14px; }
.dash-body { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; }
.dl { font: 500 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.bars-list > div { display: grid; grid-template-columns: minmax(0, 170px) minmax(0, 1fr) 44px; gap: 10px; align-items: center; font-size: 14.5px; font-weight: 600; padding: 5px 0; }
.bars-list b { height: 10px; border-radius: 10px; background: var(--line); overflow: hidden; display: block; }
.bars-list b i { display: block; height: 100%; background: #1E9E78; border-radius: 10px; }
.bars-list b i.warn { background: var(--sun); } .bars-list b i.low { background: var(--coral); }
.bars-list em { font: 500 13px var(--mono); font-style: normal; text-align: right; font-variant-numeric: tabular-nums; }
.educator-view ul { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-weight: 600; }
.educator-view small { display: block; font-weight: 400; color: var(--coral); font-size: 13.5px; }
@media (max-width: 820px) { .kpis { grid-template-columns: 1fr 1fr; } .dash-body { grid-template-columns: 1fr; } }

/* trust */
.trust-flow { list-style: none; padding: 0; margin: 0; display: grid; }
.trust-flow li { background: rgba(255,255,255,.07); border: 2px solid rgba(255,255,255,.18); border-radius: 18px; padding: 14px 18px; display: grid; gap: 4px; }
.trust-flow li + li { margin-top: 28px; position: relative; }
.trust-flow li + li::before { content: "↓"; position: absolute; top: -27px; left: 24px; color: var(--sun); font-weight: 800; }
.trust-flow b { font: 700 18px var(--display); } .trust-flow small { color: #D6CFFF; font-size: 14.5px; }
.trust-flow li.check { background: var(--sun); color: var(--navy); border-color: var(--sun); } .trust-flow li.check small { color: #3B2F00; }

/* engine stack */
.engine-stack { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.engine-stack li { border-radius: 16px; padding: 14px 18px; display: grid; gap: 2px; color: #fff; }
.engine-stack li + li { margin-top: 22px; position: relative; }
.engine-stack li + li::before { content: "↓"; position: absolute; top: -22px; left: 50%; color: var(--navy); font-weight: 800; }
.engine-stack b { font: 800 15px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.engine-stack small { font-size: 15px; opacity: .9; }
.e1 { background: var(--navy); } .e2 { background: var(--violet); } .e3 { background: #6B55F0; }
.e4 { background: var(--aqua-ink); } .e5 { background: var(--coral); } .e6 { background: var(--sun); color: var(--navy) !important; }

/* impact */
.outcomes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.oc { border-radius: 24px; padding: 24px; display: grid; gap: 10px; align-content: start; border: 3px solid var(--navy); box-shadow: 6px 6px 0 var(--navy); background: var(--surface); }
.oc-k { font: 800 15px var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.oc.a .oc-k { color: var(--aqua-ink); } .oc.v .oc-k { color: var(--violet); } .oc.y .oc-k { color: #B98A00; } .oc.c .oc-k { color: var(--coral); }
.oc h3 { font-size: 21px; }
.oc ul { margin: 4px 0 0; padding-left: 18px; color: var(--muted); display: grid; gap: 4px; font-size: 15px; }
@media (max-width: 980px) { .outcomes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .outcomes { grid-template-columns: 1fr; } }

/* mission */
.mission-big { font: 800 clamp(38px, 6vw, 76px)/1.02 var(--display); letter-spacing: -.03em; text-wrap: balance; max-width: 15em; }
.mission-mid { font: 700 clamp(22px, 2.6vw, 30px) var(--display); margin-top: 22px; color: #6B1F10; }
.mission-copy { margin-top: 18px; }
.values { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.values span { font: 800 18px var(--display); background: var(--navy); color: #fff; border-radius: 14px; padding: 10px 18px; }

/* partners */
.interests { display: flex; flex-wrap: wrap; gap: 10px; }
.interests span { font-weight: 700; font-size: 16px; background: rgba(255,255,255,.12); border: 2px solid rgba(255,255,255,.3); border-radius: 14px; padding: 10px 14px; }

/* try the engine */
.try-box { background: var(--surface); border: 3px solid var(--navy); border-radius: 28px; padding: 22px; box-shadow: 10px 10px 0 var(--coral); display: grid; gap: 12px; color: var(--ink); }
.drop { display: grid; place-items: center; gap: 6px; text-align: center; border: 3px dashed var(--line); border-radius: 20px; padding: 46px 16px; cursor: pointer; transition: border-color .15s, background .15s; }
.drop b { font: 800 24px var(--display); letter-spacing: .04em; text-transform: uppercase; }
.drop span { font: 500 14px var(--mono); color: var(--muted); }
.drop:hover, .drop.over { border-color: var(--violet); background: var(--lavender); }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.try-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.try-row input { font: 16px var(--body); color: var(--ink); background: var(--surface); border: 2px solid var(--line); border-radius: 13px; padding: 10px 14px; min-width: 0; }
.link-btn { justify-self: center; background: none; border: none; color: var(--violet); font: 700 15px var(--body); text-decoration: underline; cursor: pointer; }
.try-result { border-radius: 18px; background: var(--ground); padding: 18px; display: grid; gap: 10px; }
.try-result h3 { font-size: 20px; }
.try-result ol { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.try-result .row { display: flex; flex-wrap: wrap; gap: 6px; }
.try-result .row span { font: 500 12px var(--mono); background: var(--lavender); color: var(--violet); border-radius: 8px; padding: 4px 8px; }

/* final CTA */
.final { background: var(--navy); color: #fff; position: relative; overflow: hidden; text-align: center; }
.final .wrap { position: relative; padding-block: 110px; display: grid; gap: 22px; justify-items: center; }
.final h2 { font: 800 clamp(48px, 8vw, 104px)/.98 var(--display); letter-spacing: -.03em; }
.final .hero-cta { justify-content: center; }
.for-line { font: 500 14px var(--mono); color: #B9B0F5; letter-spacing: .04em; }
.final + footer.site { margin-top: 0; }

/* inner-page extras */
.learner-day { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.learner-day article { background: var(--surface); border: 3px solid var(--navy); border-radius: 22px; padding: 22px; display: grid; gap: 8px; align-content: start; box-shadow: 5px 5px 0 var(--navy); }
.ld-n { font: 800 28px var(--display); color: var(--coral); }
.learner-day h3 { font-size: 20px; } .learner-day p { color: var(--muted); font-size: 15.5px; }
@media (max-width: 900px) { .learner-day { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .learner-day { grid-template-columns: 1fr; } }
.org-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 50px; align-items: center; }
.org-row .head { margin-bottom: 0; }
@media (max-width: 900px) { .org-row { grid-template-columns: 1fr; gap: 26px; } }
.stack-cards { display: grid; gap: 16px; align-content: start; }
.posts { display: grid; gap: 16px; max-width: 820px; }
.post-card { text-decoration: none; color: inherit; background: var(--surface); border: 3px solid var(--navy); border-radius: 24px; padding: 28px; display: grid; gap: 10px; box-shadow: 6px 6px 0 var(--sun); transition: transform .15s; }
.post-card:hover { transform: translate(-2px, -2px); }
.post-card h2 { font-size: 30px; } .post-card p { color: var(--muted); }
.post-meta { font: 500 13px var(--mono); color: var(--muted); }
.post-card .go { font-weight: 800; color: var(--violet); }
.article { margin-inline: auto; }
.docs-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 50px; align-items: start; }
.docs-toc { position: sticky; top: 90px; display: grid; gap: 4px; }
.docs-toc a { text-decoration: none; color: var(--muted); font-weight: 600; padding: 6px 10px; border-radius: 10px; }
.docs-toc a:hover { background: var(--lavender); color: var(--violet); }
.prose ol { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.prose h2[id] { scroll-margin-top: 90px; }
@media (max-width: 820px) { .docs-grid { grid-template-columns: 1fr; } .docs-toc { position: static; display: flex; flex-wrap: wrap; } }
section[id] { scroll-margin-top: 70px; }

/* dark mode: keep light sections readable */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --aqua-ink: #8FD3DC; } }
:root[data-theme="dark"] { --aqua-ink: #8FD3DC; }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } .cart.go { animation-duration: .01s; } }

/* ================= home hero v2: sources → unbox → phone ================= */
.nav-login { color: #CFC7FF; text-decoration: none; font-weight: 700; font-size: 14.5px; align-self: center; padding-inline: 6px; white-space: nowrap; }
.nav-login:hover, .nav-login[aria-current="page"] { color: #fff; }
.f-contact { display: grid; gap: 4px; margin-top: 14px; }

.hero-home .wrap { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 36px; padding-block: 56px 70px; }
.hero-home h1 { margin-top: 16px; font-size: clamp(40px, 5.6vw, 76px); }
.hero-home .lede { max-width: 30em; }

.hv { display: grid; grid-template-columns: 148px 52px 86px 42px minmax(0, 1fr); align-items: center; min-height: 420px; position: relative; }

/* sources */
.hv-src { list-style: none; margin: 0; padding: 0; display: grid; grid-template-rows: repeat(6, 50px); row-gap: 12px; }
.hv-src li { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 8px; border-radius: 12px; background: rgba(255,255,255,.07); border: 1.5px solid rgba(255,255,255,.16);
  animation: srcIn .55s cubic-bezier(.2,.8,.3,1.2) both, srcPing 4.8s ease-in-out infinite; animation-delay: calc(var(--i) * .16s), calc(1.6s + var(--i) * .8s); }
.hv-src .ico { width: 30px; height: 34px; flex: none; border-radius: 7px; display: grid; place-items: center; font: 700 9px var(--mono); color: #fff; }
.hv-src .pdf { background: var(--coral); } .hv-src .ppt { background: var(--sun); color: #2B1F00; } .hv-src .web { background: var(--aqua); color: #0B3940; }
.hv-src .vid { background: #8C78FF; font-size: 12px; } .hv-src .doc { background: #FF8FAB; color: #3A0D1A; } .hv-src .voi { background: #F2B900; color: #2B1F00; }
.hv-src b { font: 500 11px var(--mono); color: #E6E0FF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes srcIn { from { opacity: 0; transform: translateX(-18px) scale(.94); } }
@keyframes srcPing { 0%, 12%, 100% { border-color: rgba(255,255,255,.16); } 5% { border-color: var(--sun); box-shadow: 0 0 0 3px rgba(242,185,0,.18); } }

/* wires */
.hv-wires { width: 100%; height: 360px; overflow: visible; }
.hv-wires path { fill: none; stroke: var(--sun); stroke-width: 1.8; vector-effect: non-scaling-stroke; stroke-dasharray: 3 7; opacity: .75;
  animation: wireIn .5s ease both, flow .8s linear infinite; animation-delay: calc(.35s + var(--i) * .16s), 0s; }
@keyframes wireIn { from { opacity: 0; } }
@keyframes flow { to { stroke-dashoffset: -10; } }

/* the unbox core */
.hv-core { position: relative; width: 86px; height: 86px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, rgba(242,185,0,.22), rgba(242,185,0,0) 70%);
  animation: coreIn .6s cubic-bezier(.2,.8,.3,1.3) 1.2s both; }
.hv-core .ring { position: absolute; inset: 4px; border-radius: 50%; border: 2px solid var(--sun); animation: ring 2.4s ease-out infinite; opacity: 0; }
.hv-core .ring.r2 { animation-delay: 1.2s; }
.hv-core .cube { position: relative; filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)); }
.hv-core .lid { transform-box: fill-box; animation: lid 2.4s ease-in-out infinite; }
.hv-core .lid.l { transform-origin: 100% 100%; } .hv-core .lid.r { transform-origin: 0% 100%; --dir: 1; }
.hv-core .spark { transform-box: fill-box; transform-origin: center; animation: spark 2.4s ease-in-out infinite; }
.core-word { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); width: 120px; height: 16px; text-align: center; }
.core-word i { position: absolute; inset: 0; font: 500 10.5px var(--mono); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--sun); opacity: 0; animation: word 6s infinite; }
.core-word i:nth-child(2) { animation-delay: 2s; } .core-word i:nth-child(3) { animation-delay: 4s; }
@keyframes coreIn { from { opacity: 0; transform: scale(.6); } }
@keyframes ring { 0% { opacity: .7; transform: scale(.85); } 100% { opacity: 0; transform: scale(1.6); } }
@keyframes lid { 0%, 100% { transform: rotate(0); } 45%, 60% { transform: rotate(calc(-16deg * (1 - 2 * var(--dir, 0)))); } }
@keyframes spark { 0%, 100% { transform: translateY(0) scale(.8); opacity: .6; } 50% { transform: translateY(-9px) scale(1.25); opacity: 1; } }
@keyframes word { 0% { opacity: 0; transform: translateY(4px); } 4%, 31% { opacity: 1; transform: none; } 34%, 100% { opacity: 0; } }

/* beam to the phone */
.hv-beam { width: 100%; height: 20px; overflow: visible; animation: wireIn .4s ease 1.5s both; }
.hv-beam path { fill: none; stroke: var(--sun); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.hv-beam path:first-child { stroke-dasharray: 5 6; animation: flow .6s linear infinite; }

/* phone */
.hv-out { position: relative; display: grid; place-items: center; padding: 30px 8px; }
.phone { width: 212px; background: #0E0B2E; border-radius: 30px; padding: 9px; box-shadow: 8px 8px 0 var(--sun), 0 24px 50px rgba(0,0,0,.4); position: relative;
  animation: phoneIn .7s cubic-bezier(.2,.8,.3,1.2) 1.7s both; }
.phone::before { content: ""; position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 46px; height: 5px; border-radius: 5px; background: #2E2A5A; }
.ph-top { background: #fff; border-radius: 22px 22px 0 0; padding: 22px 14px 8px; display: flex; align-items: center; gap: 8px; }
.ph-bar { flex: 1; height: 7px; background: #E2DDF5; border-radius: 7px; overflow: hidden; }
.ph-bar i { display: block; height: 100%; width: 25%; background: linear-gradient(90deg, #1E9E78, #53D3A6); border-radius: 7px; transition: width .6s; }
.ph-xp { font: 500 11px var(--mono); color: #B98600; }
.ph-screens { position: relative; height: 236px; background: #fff; }
.scr { position: absolute; inset: 0; padding: 6px 14px 10px; display: grid; gap: 9px; align-content: start; color: #1B164B; opacity: 0; transform: translateY(12px); transition: opacity .45s, transform .45s; pointer-events: none; }
.scr.on { opacity: 1; transform: none; }
.scr .k { font: 500 9.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #C4452F; }
.scr .k.c { color: #4B32C8; } .scr .k.a { color: #1F6E78; } .scr .k.v { color: #4B32C8; }
.scr b { font: 800 16.5px/1.2 var(--display); letter-spacing: -.01em; }
.ph-flow { display: grid; gap: 3px; justify-items: start; background: #ECE9FC; border-radius: 12px; padding: 9px; }
.ph-flow span { font: 700 11px var(--body); color: #4B32C8; background: #fff; border: 1.5px solid #4B32C8; border-radius: 8px; padding: 3px 8px; }
.ph-flow i { font-style: normal; color: #E65F45; font-weight: 800; font-size: 11px; transform: rotate(90deg); margin-left: 10px; line-height: 1; }
.ph-listen { justify-self: start; font: 600 11px var(--body); color: #4B32C8; display: inline-flex; gap: 4px; align-items: center; }
.ph-tf { display: flex; gap: 8px; }
.ph-tf span { flex: 1; text-align: center; font: 700 13px var(--body); color: #fff; border-radius: 10px; padding: 10px 4px; }
.ph-tf .f { background: #D8453A; box-shadow: 0 3px 0 #A52E25; } .ph-tf .t { background: #1E9E78; box-shadow: 0 3px 0 #13765A; opacity: .5; }
.scr.on .ph-tf .pick { animation: tap .5s ease .6s both; }
.ph-ok { font: 600 11.5px var(--body); color: #0E5E47; background: #DDF5EC; border-radius: 9px; padding: 7px 9px; }
.scr.on .ph-ok { animation: rise .4s ease 1s both; }
.bq { font-size: 12.5px; line-height: 1.4; border-radius: 12px; padding: 8px 10px; max-width: 92%; margin: 0; }
.bq.me { justify-self: end; background: #ECE9FC; border-bottom-right-radius: 3px; }
.bq.ai { justify-self: start; background: #1B164B; color: #fff; border-bottom-left-radius: 3px; }
.scr.on .bq.ai { animation: rise .45s ease .7s both; }
.flash { position: relative; height: 112px; perspective: 600px; }
.flash span { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 12px; border-radius: 14px; font: 700 14px/1.3 var(--display); backface-visibility: hidden; transition: transform .6s; }
.flash .fr { background: #4B32C8; color: #fff; } .flash .bk { background: #FFF1C2; color: #3B2F00; transform: rotateY(180deg); }
.scr.on .flash .fr { animation: flipF 3s ease .9s both; } .scr.on .flash .bk { animation: flipB 3s ease .9s both; }
@keyframes flipF { 0% { transform: rotateY(0); } 25%, 100% { transform: rotateY(-180deg); } }
@keyframes flipB { 0% { transform: rotateY(180deg); } 25%, 100% { transform: rotateY(0); } }
@keyframes tap { 50% { transform: scale(.94); } 100% { transform: scale(1); box-shadow: 0 0 0 3px #1E9E78; } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.ph-dots { background: #fff; border-radius: 0 0 22px 22px; padding: 6px 0 14px; display: flex; justify-content: center; gap: 5px; }
.ph-dots i { width: 6px; height: 6px; border-radius: 6px; background: #E2DDF5; transition: width .3s, background .3s; }
.ph-dots i.on { width: 18px; background: #4B32C8; }
@keyframes phoneIn { from { opacity: 0; transform: translateY(20px) scale(.92); } }

/* capability tags: a column beside the phone, joined by connectors */
.hv-out { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 20px 0; position: relative; }
.hv-tags { display: grid; gap: 10px; justify-items: start; }
.hv-out .tag { position: relative; display: inline-flex; align-items: center; gap: 6px; font: 500 11.5px var(--mono); white-space: nowrap; padding: 6px 10px; border-radius: 99px;
  border: 2px solid #0E0B2E; box-shadow: 3px 3px 0 #0E0B2E; margin: 0; letter-spacing: 0; text-transform: none; opacity: .62;
  transition: transform .35s, opacity .35s, box-shadow .35s; animation: tagIn .5s cubic-bezier(.2,.8,.3,1.4) both; }
.hv-out .tag::before { content: ""; position: absolute; right: 100%; top: 50%; width: 18px; border-top: 2px dashed rgba(255,255,255,.28); margin-right: 2px; transition: border-color .35s; }
.hv-out .tag svg { flex: none; }
.hv-out .tag.lit { opacity: 1; transform: translateX(6px) scale(1.06); box-shadow: 3px 3px 0 #0E0B2E, 0 0 0 4px rgba(242,185,0,.35); }
.hv-out .tag.lit::before { border-top: 2px solid var(--sun); width: 24px; }
.tag.t1 { background: var(--sun); color: #2B1F00; animation-delay: 2.1s; }
.tag.t2 { background: #8C78FF; color: #fff; animation-delay: 2.22s; }
.tag.t3 { background: #fff; color: #1B164B; animation-delay: 2.34s; }
.tag.t4 { background: var(--coral); color: #fff; animation-delay: 2.46s; }
.tag.t5 { background: var(--aqua); color: #0B3940; animation-delay: 2.58s; }
.tag.t6 { background: #FFF1C2; color: #3B2F00; animation-delay: 2.7s; }
@keyframes tagIn { from { opacity: 0; transform: translateX(-10px) scale(.6); } }

.hero-home .wrap { grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr); }
.hero-home h1 { font-size: clamp(38px, 4.7vw, 64px); }
.hv { grid-template-columns: 140px 28px 72px 28px minmax(0, 1fr); }
.phone { width: 188px; flex: none; }
.ph-screens { height: 252px; overflow: hidden; }
@media (max-width: 1180px) { .hv { grid-template-columns: 130px 22px 66px 24px minmax(0, 1fr); } .hv-src b { font-size: 10px; } .phone { width: 176px; } .hv-out .tag { font-size: 10.5px; padding: 5px 8px; } .hv-out { gap: 14px; } }
@media (max-width: 1060px) { .hero-home .wrap { grid-template-columns: 1fr; } .hv { max-width: 720px; width: 100%; justify-self: center; grid-template-columns: 150px 50px 84px 40px minmax(0, 1fr); } .phone { width: 196px; } .hv-src b { font-size: 12px; } }
@media (max-width: 640px) {
  .hv { grid-template-columns: 1fr; justify-items: center; row-gap: 6px; min-height: 0; }
  .hv-src { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; gap: 6px; width: 100%; }
  .hv-src li { padding: 5px 6px; } .hv-src b { font-size: 10.5px; }
  .hv-wires { display: none; }
  .hv-core { margin: 6px 0 22px; }
  .hv-beam { width: 42px; transform: rotate(90deg); }
  .hv-out { flex-direction: column; gap: 14px; width: 100%; }
  .hv-tags { grid-template-columns: repeat(2, auto); justify-content: center; }
  .hv-out .tag::before { display: none; }
  .hv-out .tag.lit { transform: scale(1.05); }
}

/* ================= tapes: what goes in / what learners do ================= */
.tapes { position: relative; height: 200px; overflow: hidden; background: linear-gradient(180deg, var(--navy) 0%, var(--navy) 30%, var(--plum) 100%); }
.tape { position: absolute; left: -6%; right: -6%; overflow: hidden; border-block: 3px solid #0E0B2E; }
/* stitched edges, like real tape */
.tape::before, .tape::after { content: ""; position: absolute; left: 0; right: 0; height: 0; border-top: 2px dashed rgba(14, 11, 46, .28); pointer-events: none; z-index: 1; }
.tape::before { top: 4px; } .tape::after { bottom: 4px; }
.tape.back { top: 24%; background: var(--coral); color: #fff; transform: translateY(-50%) rotate(1.4deg); }
.tape.back::before, .tape.back::after { border-top-color: rgba(255, 255, 255, .35); }
.tape.front { top: 68%; background: var(--sun); color: var(--navy); transform: translateY(-50%) rotate(-1.2deg); filter: drop-shadow(0 10px 14px rgba(8, 6, 30, .45)); }
.tape-track { display: flex; align-items: center; gap: 20px; width: max-content; padding-block: 13px; animation: tapeL 70s linear infinite; }
.tape.back .tape-track { padding-block: 9px; gap: 16px; animation: tapeR 90s linear infinite; }
.tape span { font: 800 clamp(20px, 2.4vw, 30px)/1 var(--display); text-transform: uppercase; letter-spacing: .01em; white-space: nowrap; }
.tape.front span.inv { background: var(--navy); color: var(--sun); padding: 7px 14px 8px; border-radius: 12px; box-shadow: inset 0 0 0 2px rgba(242, 185, 0, .25); }
.tape.back span { font: 600 clamp(13px, 1.25vw, 16px) var(--mono); letter-spacing: .16em; }
/* separators: the four-point spark from the logo */
.tape b { width: 18px; height: 18px; flex: none; background: var(--navy); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.tape i { width: 7px; height: 7px; flex: none; border-radius: 50%; background: #FFE2DB; }
.tapes::before { content: ""; position: absolute; inset: 0; opacity: .09; pointer-events: none; -webkit-mask-image: linear-gradient(#000, transparent 55%); mask-image: linear-gradient(#000, transparent 55%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='98' viewBox='0 0 56 98'%3E%3Cpath d='M28 66L0 50V16L28 0l28 16v34L28 66zm0 32L0 82V66l28 16 28-16v16L28 98z' fill='none' stroke='%23fff' stroke-width='1.2'/%3E%3C/svg%3E"); }
.tapes:hover .tape-track { animation-play-state: paused; }
@keyframes tapeL { to { transform: translateX(-50%); } }
@keyframes tapeR { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (max-width: 640px) { .tapes { height: 150px; } .tape.back { top: 24%; } .tape.front { top: 68%; } .tape-track { gap: 14px; } .tape.front span.inv { padding: 5px 10px 6px; } }

@media (prefers-reduced-motion: reduce) {
  .hv-src li, .hv-wires path, .hv-core, .hv-beam, .phone, .hv-out .tag { animation: none !important; }
  .tape-track { animation: none; }
}

/* ================= log in / sign up ================= */
.auth { background: var(--navy); color: #fff; position: relative; overflow: hidden; }
.auth-grid { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 50px; align-items: center; padding-block: 64px 80px; }
.auth-side { display: grid; gap: 18px; align-content: center; }
.auth-side h1 { font-size: clamp(36px, 4.6vw, 58px); font-weight: 800; }
.auth-side h1 .swash { color: var(--sun); }
.auth-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; color: #D6CFFF; font-weight: 600; }
.auth-list li { display: flex; gap: 10px; align-items: flex-start; }
.auth-list svg { flex: none; margin-top: 3px; }
.auth-switch { color: #B9B0F5; } .auth-switch a { color: var(--sun); font-weight: 700; }
.auth-card { background: var(--surface); color: var(--ink); border-radius: 28px; padding: 30px; border: 3px solid #0E0B2E; box-shadow: 10px 10px 0 var(--sun); min-width: 0; }
.auth-card h2 { font-size: 28px; margin-bottom: 4px; }
.auth-card fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 14px; min-width: 0; }
.auth-card legend { padding: 0; margin-bottom: 6px; }
.auth-steps { list-style: none; padding: 0; margin: 0 0 22px; display: flex; gap: 8px; }
.auth-steps li { flex: 1; display: flex; align-items: center; gap: 8px; font: 700 13px var(--body); color: var(--muted); padding-bottom: 8px; border-bottom: 3px solid var(--line); }
.auth-steps span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 500 12px var(--mono); background: var(--line); color: var(--muted); }
.auth-steps li.on { color: var(--ink); border-color: var(--violet); } .auth-steps li.on span { background: var(--violet); color: #fff; }
.auth-steps li.done { color: #1E9E78; border-color: #1E9E78; } .auth-steps li.done span { background: #1E9E78; color: #fff; }
.roles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.role { position: relative; cursor: pointer; display: block !important; }
.role input { position: absolute; opacity: 0; pointer-events: none; }
.role span { display: grid; gap: 2px; border: 2px solid var(--line); border-radius: 16px; padding: 14px; height: 100%; transition: border-color .15s, background .15s, transform .15s; }
.role b { font: 700 16px var(--display); } .role small { color: var(--muted); font-weight: 500; font-size: 13px; }
.role:hover span { border-color: var(--violet); }
.role input:checked + span { border-color: var(--violet); background: var(--lavender); box-shadow: 4px 4px 0 var(--violet); transform: translate(-2px, -2px); }
.role input:focus-visible + span { outline: 3px solid var(--sun); outline-offset: 2px; }
.role:last-child { grid-column: 1 / -1; }
@media (max-width: 520px) { .roles { grid-template-columns: 1fr; } }
.phone-in, .pass-in { display: flex; align-items: stretch; border: 2px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); }
.phone-in:focus-within, .pass-in:focus-within { border-color: var(--violet); }
.phone-in > span { display: grid; place-items: center; padding-inline: 12px; background: var(--ground); font: 500 15px var(--mono); color: var(--muted); border-right: 2px solid var(--line); }
.form .phone-in input, .form .pass-in input { border: 0; border-radius: 0; flex: 1; min-width: 0; }
.form .phone-in input:focus, .form .pass-in input:focus { outline: none; }
.show-pass { border: 0; background: transparent; color: var(--violet); font: 700 13px var(--body); padding-inline: 14px; cursor: pointer; }
.meter-pass { display: block; height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; }
.meter-pass i { display: block; height: 100%; width: 0; border-radius: 6px; transition: width .25s, background .25s; }
.hint { color: var(--muted); font-weight: 500; font-size: 13px; }
.form label.check { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14.5px; }
.form label.check input { width: auto; accent-color: var(--violet); }
.form label.check a { color: var(--violet); }
.field-err { color: #B3261E; background: #FDE4E1; border-radius: 12px; padding: 10px 12px; font-weight: 600; font-size: 14.5px; }
.form input[aria-invalid="true"] { border-color: #D8453A; }
.phone-in:has(input[aria-invalid="true"]), .pass-in:has(input[aria-invalid="true"]) { border-color: #D8453A; }
.step-actions, .row-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.btn-link { background: none; border: 0; color: var(--violet); font: 700 14.5px var(--body); cursor: pointer; padding: 6px 0; }
.btn-wide { width: 100%; justify-content: center; }
.auth-alt { text-align: center; color: var(--muted); font-size: 15px; } .auth-alt a { color: var(--violet); font-weight: 700; }
.done-step { display: grid; gap: 14px; justify-items: start; }
.done-badge { width: 72px; height: 72px; border-radius: 22px; background: var(--navy); display: grid; place-items: center; animation: coreIn .6s cubic-bezier(.2,.8,.3,1.4) both; }
@media (max-width: 900px) { .auth-grid { grid-template-columns: 1fr; gap: 30px; padding-block: 44px 60px; } }
@media (max-width: 520px) { .auth-card { padding: 22px 18px; box-shadow: 6px 6px 0 var(--sun); } }
.contact-side .tel { font: 700 20px var(--display); color: var(--violet); text-decoration: none; }

/* ================= Why Unbox: problem → fix ================= */
.sec.why { padding-block: 34px 64px; }
.why-head { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 30px; align-items: center; margin-bottom: 30px; }
.why-head .head { margin-bottom: 0; }
.why-head .lede { max-width: 30em; }

/* the overwhelming pile of files */
.pile { position: relative; height: 230px; }
.pf { position: absolute; display: flex; align-items: center; gap: 10px; background: #fff; color: var(--navy); border: 2px solid #0E0B2E; border-radius: 14px; padding: 9px 12px;
  font: 500 13px var(--mono); white-space: nowrap; box-shadow: 4px 4px 0 #0E0B2E; animation: drift 7s ease-in-out infinite; }
.pf i { font-style: normal; font: 700 10px var(--mono); color: #fff; border-radius: 6px; padding: 5px 6px; }
.pf b { font-weight: 500; color: var(--coral); }
.pf .pdf { background: var(--coral); } .pf .vid { background: #8C78FF; } .pf .doc { background: #FF8FAB; color: #3A0D1A; } .pf .ppt { background: var(--sun); color: #2B1F00; } .pf .txt { background: var(--aqua); color: #0B3940; }
.pf.p1 { top: 4%; left: 6%; --r: -6deg; }
.pf.p2 { top: 22%; left: 36%; --r: 4deg; animation-delay: -1.5s; }
.pf.p3 { top: 44%; left: 0; --r: 3deg; animation-delay: -3s; }
.pf.p4 { top: 62%; left: 30%; --r: -4deg; animation-delay: -4.5s; }
.pf.p5 { top: 80%; left: 10%; --r: 7deg; animation-delay: -2.2s; opacity: .9; }
@keyframes drift { 0%, 100% { transform: rotate(var(--r)) translateY(0); } 50% { transform: rotate(calc(var(--r) * -.4)) translateY(-7px); } }

/* problem cards */
.probs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.pc { position: relative; border-radius: 26px; background: rgba(255,255,255,.06); border: 2px solid rgba(255,255,255,.14); overflow: hidden; display: grid; grid-template-rows: auto 1fr;
  transition: transform .25s, border-color .25s, box-shadow .25s; outline: none; }
.pc:hover, .pc:focus-visible { transform: translateY(-6px); border-color: var(--pc); box-shadow: 0 18px 40px rgba(0,0,0,.3); }
.pc:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }
.pc.c1 { --pc: #FF9AB0; --pcb: #F8C9D4; } .pc.c2 { --pc: #7CC1CA; --pcb: #BFE3E8; } .pc.c3 { --pc: #B9A8FF; --pcb: #DCD3FF; } .pc.c4 { --pc: #F2B900; --pcb: #FFE38A; }
.pc-stage { position: relative; height: 262px; display: grid; place-items: end center; overflow: hidden; }
.pc-stage .blob { position: absolute; width: 200px; height: 200px; bottom: -40px; left: 50%; transform: translateX(-50%); border-radius: 50%; background: var(--pcb);
  box-shadow: 0 0 0 14px color-mix(in srgb, var(--pcb) 30%, transparent); transition: transform .4s; }
.pc-stage img { position: relative; height: 214px; width: auto; max-width: 92%; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(0,0,0,.25)); transition: transform .4s cubic-bezier(.2,.8,.3,1.3); transform-origin: 50% 100%; }
.pc:hover .pc-stage img, .pc:focus-within .pc-stage img { transform: translateY(-6px) rotate(-2deg) scale(1.03); }
.pc:hover .blob, .pc:focus-within .blob { transform: translateX(-50%) scale(1.08); }
.sticker { position: absolute; top: 12px; left: 14px; right: auto; max-width: 70%; font: 500 11.5px var(--mono); line-height: 1.3; color: var(--navy); background: #fff; border: 2px solid #0E0B2E;
  border-radius: 12px; padding: 5px 9px; box-shadow: 3px 3px 0 #0E0B2E; transform: rotate(-4deg); white-space: nowrap; z-index: 2; }
.pc.c2 .sticker, .pc.c4 .sticker { left: auto; right: 14px; transform: rotate(4deg); }
.pc-body { padding: 18px 20px 64px; display: grid; gap: 8px; align-content: start; }
.pc-body .num { font: 500 13px var(--mono); color: var(--pc); }
.pc-body h3 { font-size: 22px; }
.pc-body p { color: #D6CFFF; font-size: 15.5px; }
/* the fix slides up over the card */
.pc-fix { position: absolute; left: 0; right: 0; bottom: 0; background: var(--pc); color: var(--navy); padding: 12px 20px 14px; font: 700 16px/1.3 var(--display);
  transform: translateY(calc(100% - 40px)); transition: transform .35s cubic-bezier(.2,.8,.3,1), color .25s; display: grid; gap: 4px; color: transparent; }
.pc-fix span { color: var(--navy); }
.pc-fix span { font: 500 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; display: flex; justify-content: space-between; align-items: center; height: 16px; }
.pc-fix span::after { content: "↑"; font-size: 14px; transition: transform .35s; }
.pc:hover .pc-fix, .pc:focus-within .pc-fix { transform: none; color: var(--navy); }
.pc:hover .pc-fix span::after, .pc:focus-within .pc-fix span::after { transform: rotate(180deg); }

/* the turn: from problem to change */
.why-end { display: flex; align-items: center; gap: 26px; margin-top: 40px; }
.why-end .statement-line { margin-top: 0; }
.leap { width: 128px; height: auto; flex: none; animation: leap 2.8s ease-in-out infinite; filter: drop-shadow(0 12px 14px rgba(0,0,0,.3)); }
@keyframes leap { 0%, 100% { transform: translateY(0) rotate(0); } 40% { transform: translateY(-14px) rotate(-3deg); } 60% { transform: translateY(-14px) rotate(2deg); } }

@media (max-width: 1080px) { .probs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 960px) { .why-head { grid-template-columns: 1fr; } .pile { height: 200px; max-width: 460px; } }
@media (max-width: 560px) {
  .probs { grid-template-columns: 1fr; }
  .pc-stage { height: 200px; } .pc-stage img { height: 184px; }
  .pile { height: 190px; } .pf { font-size: 11.5px; padding: 7px 10px; } .pf.p2 { left: 22%; } .pf.p4 { left: 14%; }
  .why-end { flex-direction: column; align-items: flex-start; } .leap { width: 110px; }
}
@media (prefers-reduced-motion: reduce) { .pf, .leap { animation: none; } }

/* ================= tighter rhythm between sections ================= */
.sec { padding-block: 80px; }
.statement-line { margin-top: 40px; }
.sec.why { padding-block: 34px 40px; }
.why-end { margin-top: 28px; }

/* ================= hands-on labs as a 3D card deck ================= */
#interactive .head { margin-bottom: 26px; }
.lab-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.lab-tabs button { position: relative; overflow: hidden; font: 700 14px var(--body); color: var(--navy); background: var(--surface); border: 2px solid var(--navy); border-radius: 99px;
  padding: 8px 16px 8px 30px; cursor: pointer; transition: background .2s, color .2s, transform .2s; }
.lab-tabs button::before { content: ""; position: absolute; left: 12px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--lc); }
.lab-tabs button::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--sun); }
.lab-tabs button:hover { transform: translateY(-2px); }
.lab-tabs button[aria-selected="true"] { background: var(--navy); color: #fff; box-shadow: 3px 3px 0 var(--lc); }
.lab-tabs button[aria-selected="true"]::before { background: var(--sun); }
.lab-tabs button.run::after { animation: tabrun var(--dur, 6s) linear forwards; }
@keyframes tabrun { to { width: 100%; } }

.deck-wrap { position: relative; }
#interactive { overflow-x: clip; }
.labs.deck { display: block; position: relative; height: var(--deck-h, 480px); perspective: 1600px; margin-inline: calc(50% - 50vw); overflow: hidden; }
.labs.deck .lab { position: absolute; top: 50%; left: 50%; width: min(420px, calc(100% - 64px)); transform-origin: 50% 50%;
  transition: transform .65s cubic-bezier(.2,.8,.2,1), opacity .5s, filter .5s, box-shadow .5s; will-change: transform; }
.labs.deck .lab[data-lab="physics"] { --lc: #4B32C8; } .labs.deck .lab[data-lab="biology"] { --lc: #1E9E78; } .labs.deck .lab[data-lab="economics"] { --lc: #F2B900; }
.labs.deck .lab[data-lab="language"] { --lc: #E65F45; } .labs.deck .lab[data-lab="business"] { --lc: #6B55F0; } .labs.deck .lab[data-lab="ai"] { --lc: #7CC1CA; }
.labs.deck .lab::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 8px; background: var(--lc); border-radius: 20px 20px 0 0; }
.labs.deck .lab[data-pos="0"] { transform: translateY(-50%) translateX(-50%) translateZ(0) scale(1); z-index: 5; opacity: 1; box-shadow: 10px 10px 0 var(--lc), 0 30px 60px rgba(27,22,75,.18); }
.labs.deck .lab[data-pos="1"] { transform: translateY(-50%) translateX(calc(-50% + 82%)) rotateY(-18deg) scale(.86); z-index: 4; opacity: .75; filter: saturate(.85); }
.labs.deck .lab[data-pos="-1"] { transform: translateY(-50%) translateX(calc(-50% - 82%)) rotateY(18deg) scale(.86); z-index: 4; opacity: .75; filter: saturate(.85); }
.labs.deck .lab[data-pos="2"] { transform: translateY(-50%) translateX(calc(-50% + 150%)) rotateY(-26deg) scale(.72); z-index: 3; opacity: .35; filter: saturate(.6); }
.labs.deck .lab[data-pos="-2"] { transform: translateY(-50%) translateX(calc(-50% - 150%)) rotateY(26deg) scale(.72); z-index: 3; opacity: .35; filter: saturate(.6); }
.labs.deck .lab[data-pos="3"], .labs.deck .lab[data-pos="-3"] { transform: translateY(-50%) translateX(-50%) scale(.6); z-index: 1; opacity: 0; }
.labs.deck .lab:not([data-pos="0"]) { cursor: pointer; }
.labs.deck .lab:not([data-pos="0"]) > * { pointer-events: none; }
.labs.deck .lab:not([data-pos="0"]):hover { opacity: .95; }
.labs.deck .lab-hint { display: none; }
.deck-nav { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 18px; }
.deck-btn { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--navy); background: var(--surface); color: var(--navy); font: 800 20px var(--display); cursor: pointer;
  box-shadow: 3px 3px 0 var(--navy); transition: transform .15s, background .15s; }
.deck-btn:hover { background: var(--sun); transform: translateY(-2px); }
.deck-count { font: 500 15px var(--mono); color: var(--muted); min-width: 5.5em; text-align: center; }
.deck-count b { color: var(--navy); font-weight: 500; }
@media (max-width: 760px) {
  .labs.deck .lab[data-pos="1"] { transform: translateY(-50%) translateX(calc(-50% + 92%)) scale(.88); opacity: .4; }
  .labs.deck .lab[data-pos="-1"] { transform: translateY(-50%) translateX(calc(-50% - 92%)) scale(.88); opacity: .4; }
  .labs.deck .lab[data-pos="2"], .labs.deck .lab[data-pos="-2"] { opacity: 0; }
  .lab-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; margin-inline: -4px; padding-inline: 4px; }
  .lab-tabs button { flex: none; }
}
@media (prefers-reduced-motion: reduce) { .labs.deck .lab { transition: opacity .2s; } }

/* ================= UnboxEd wordmark + tagline ================= */
.brand { gap: 10px; line-height: 1; }
.wm { display: grid; gap: 4px; }
.wm b { font: 800 23px/1 var(--display); letter-spacing: -.02em; color: #fff; }
.wm em { font-style: normal; color: var(--sun); }
.wm small { font: 500 9.5px/1 var(--mono); letter-spacing: .03em; color: #B9B0F5; white-space: nowrap; }
footer.site .wm b { font-size: 26px; } footer.site .wm small { font-size: 10.5px; }
@media (max-width: 1360px) and (min-width: 1241px) { .nav-links { gap: 14px; } .nav-links a { font-size: 14px; } }
@media (max-width: 420px) { .nav .wm small { display: none; } }

/* ================= tutor character ================= */
.tutor-av { width: 46px; height: 46px; flex: none; border-radius: 50%; background: #DFF1F3; display: grid; place-items: center; overflow: hidden; }
.tutor-av img { width: 40px; height: auto; margin-top: 6px; }
.convo-wrap { position: relative; }
.tutor-peek { position: absolute; right: -118px; bottom: -18px; width: 150px; height: auto; z-index: 2; filter: drop-shadow(0 12px 16px rgba(0,0,0,.35));
  animation: peek 3.2s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes peek { 0%, 100% { transform: rotate(0) translateY(0); } 50% { transform: rotate(-3deg) translateY(-6px); } }
@media (max-width: 1240px) { .tutor-peek { right: -40px; width: 116px; } }
@media (max-width: 920px) { .convo-wrap { padding-top: 70px; } .tutor-peek { left: auto; right: 10px; top: 0; bottom: auto; width: 96px; } }

/* ================= mission: the tutor sitting beside a learner ================= */
.mission-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 30px; align-items: center; }
.mission-grid .mission-big { font-size: clamp(34px, 4.4vw, 58px); }
.beside { position: relative; height: 380px; }
.beside-ring { position: absolute; left: 50%; bottom: 8px; width: 330px; height: 330px; transform: translateX(-50%); border-radius: 50%; background: var(--navy);
  box-shadow: 0 0 0 14px rgba(27, 22, 75, .12); }
.beside-learner { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); height: 320px; width: auto; filter: drop-shadow(0 10px 12px rgba(0,0,0,.25)); }
.beside-tutor { position: absolute; bottom: 18px; left: calc(50% + 6px); width: 160px; height: auto; filter: drop-shadow(0 10px 12px rgba(0,0,0,.3)); animation: peek 3.6s ease-in-out infinite; transform-origin: 50% 100%; }
.beside-bubble { position: absolute; top: 24px; right: 0; max-width: 200px; background: #fff; color: var(--navy); border: 2px solid var(--navy); border-radius: 16px 16px 16px 4px;
  padding: 10px 14px; font: 700 15px/1.3 var(--display); box-shadow: 4px 4px 0 var(--navy); }
@media (max-width: 920px) { .mission-grid { grid-template-columns: 1fr; } .beside { height: 330px; max-width: 420px; width: 100%; justify-self: center; } }
@media (max-width: 420px) { .beside-ring { width: 270px; height: 270px; } .beside-learner { height: 260px; } .beside-tutor { width: 130px; } .beside-bubble { right: auto; left: 0; top: 0; } }
@media (prefers-reduced-motion: reduce) { .tutor-peek, .beside-tutor { animation: none; } }

/* ================= tighter gaps where two sections share a background ================= */
.sec { padding-block: 72px; }
.sec:not(.soft):not(.plum):not(.navy):not(.violet):not(.sun):not(.warm) + .sec:not(.soft):not(.plum):not(.navy):not(.violet):not(.sun):not(.warm),
.sec.soft + .sec.soft { padding-top: 8px; }
#memory { padding-bottom: 56px; }
#assessment { padding-top: 56px; }

/* tutor notes: what the tutor noticed or did, shown under its replies */
.tnote { justify-self: start; margin: -4px 0 2px; font: 500 11.5px var(--mono); letter-spacing: .02em; color: var(--muted); background: var(--ground);
  border: 1px solid var(--line); border-radius: 99px; padding: 4px 10px; display: inline-flex; align-items: center; gap: 6px; }
.tnote::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--aqua); }
.tnote.warn { color: #A93D29; background: #FDEDEA; border-color: #F6C9C0; justify-self: end; } .tnote.warn::before { background: var(--coral); }
.tnote.ok { color: #0E5E47; background: #DDF5EC; border-color: #B8E6D4; } .tnote.ok::before { background: #1E9E78; }