/* =====================================================================
   AfterCall home page — student-first (v2, 2026-10-06)
   Loaded only by templates/site/home.html, on top of site.css.

   Spacing system (use these, don't invent new gaps):
     --s1 4 · --s2 8 · --s3 12 · --s4 16 · --s5 24 · --s6 32 · --s7 48 · --s8 64
     section padding        --sec      (72 → 112px)
     section head → content --head     (32 → 48px)
     label → title 14px · title → lede 16px · card gaps 12/16px
   Widths: content 1200px (.hx-wrap) · reading text 600px · hero demo 1000px
   ===================================================================== */
:root {
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --sec: clamp(72px, 8vw, 112px);
  --head: clamp(32px, 3.4vw, 48px);
  --read: 600px;
  --demo: 1000px;
  --r-lg: 18px; --r-md: 12px; --r-sm: 8px;
}

.hx-wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--gut); }
.hx-sec { padding: var(--sec) 0; }
.hx-sec + .hx-sec { padding-top: 0; }
.hx-sec-record, .hx-sec-plans { background: var(--paper-2); padding-top: var(--sec) !important; }
.hx-sec-record + .hx-sec, .hx-sec-plans + .hx-sec { padding-top: var(--sec); }

/* section heads: label, title, lede — one block, tight internal spacing */
.hx-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 0 var(--s8); align-items: end; margin-bottom: var(--head); }
.hx-head .label { grid-column: 1 / -1; margin-bottom: 14px; }
.hx-head .h2 { max-width: 720px; }
.hx-head .h2 em { font-style: italic; }
.hx-head .lede { font-size: 17px; margin: 0; max-width: 420px; }
.hx-head-side { justify-self: end; }
.hx-head .cycle { margin: 0; }

.ic { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hx-tag { display: inline-flex; align-items: center; font: 500 10.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--rule); border-radius: 999px; padding: 5px 8px; white-space: nowrap; }

/* ---------- shared: window, record, transcript ---------- */
.hx-win { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-lg); box-shadow: 0 1px 2px rgba(10, 10, 12, .04), 0 24px 48px -32px rgba(10, 10, 12, .22); overflow: hidden; position: relative; }
.hx-win-bar { display: flex; align-items: center; gap: var(--s2); height: 42px; padding: 0 var(--s4); border-bottom: 1px solid var(--rule); font: 500 12px/1 var(--mono); color: var(--ink-3); }
.hx-win-bar .mk { width: 20px; height: 20px; border-radius: 6px; background: var(--ink); color: var(--sheet); display: grid; place-items: center; font: 700 10.5px/1 var(--brand); flex: none; }
.hx-win-bar b { color: var(--ink); font: 600 13px/1 var(--sans); }
.hx-win-bar .sep { color: var(--ink-4); }
.hx-win-bar .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hx-win-bar .ex { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.hx-win-bar .replay { position: static; height: 26px; margin-left: auto; }
.hx-win-bar .ex-m { display: none; }

.hx-rec { padding: var(--s4) 20px 20px; }
.hx-rec-title { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s3); }
.hx-rec-title p { margin: 0; font: 600 16.5px/1.3 var(--sans); letter-spacing: -.01em; }
.hx-rec-title span, .hx-mini-title span { font: 500 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); background: var(--paper-2); border-radius: 999px; padding: 5px 8px; white-space: nowrap; flex: none; }
.hx-band { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--rule); }
.hx-band > h4 { margin: 1px 0 0; font: italic 400 17px/1.15 var(--serif); color: var(--ink); }
.hx-band .f + .f { margin-top: var(--s2); }
.hx-band .f > span { display: block; font: 500 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 5px; }
.hx-band p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.hx-band ul { margin: 0; padding: 0; list-style: none; }
.hx-band li { position: relative; padding: 1px 0 1px 14px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.hx-band li::before { content: ""; position: absolute; left: 0; top: 10px; width: 6px; height: 1.5px; background: var(--ink-3); }
.hx-band li b { color: var(--ink); font-weight: 600; }
.hx-transcript-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--rule); font-size: 12.5px; color: var(--ink-3); }
.hx-transcript-row b { font: 500 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.hx-transcript-row u { color: var(--ink-2); text-decoration-color: var(--rule-2); text-underline-offset: 3px; }
.hx-ghost i { display: block; height: 8px; border-radius: 4px; background: var(--paper-2); margin: 5px 0 9px; }
.hx-ghost i.m { width: 82%; } .hx-ghost i.s { width: 56%; }
.hx-raw-wrap { padding: var(--s4) 20px 0; }
.hx-raw { display: flex; gap: var(--s3); align-items: center; padding: 10px var(--s3); border: 1px dashed var(--rule-2); border-radius: var(--r-md); background: var(--sheet-2); font: 400 12.5px/1.45 var(--mono); color: var(--ink-2); }
.hx-raw > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hx-raw .ic { color: var(--ink-3); }
.hx-hand { width: 84px; height: 56px; flex: none; border-radius: 6px; border: 1px solid var(--rule); background: repeating-linear-gradient(#fbfaf6 0 10px, #dedbd2 10px 11px); position: relative; overflow: hidden; }
.hx-hand span { position: absolute; inset: 3px 5px; font: 500 9.5px/11px Caveat, cursive; color: #26265a; white-space: pre; transform: rotate(-1.5deg); }
.replay { position: absolute; right: var(--s3); bottom: var(--s3); z-index: 3; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--rule); background: var(--sheet); font: 500 11.5px/1 var(--mono); color: var(--ink-3); cursor: pointer; opacity: 0; transition: opacity .3s; }
.replay .ic { width: 13px; height: 13px; }
.played > .replay, .played .replay { opacity: 1; }
.replay:hover { color: var(--ink); border-color: var(--ink); }

/* ================= 1 · HERO — centred, compact, fully visible ================= */
.hx-hero { padding: clamp(24px, 4vh, 44px) 0 clamp(24px, 3vh, 36px); }
.hx-hero-in { text-align: center; }
.hx-h1 { margin: 0 0 18px; font-weight: 400; }
.hx-h1 .kicker { display: block; font: 500 12px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 18px; }
.hx-h1 .big { display: block; font: 400 clamp(42px, 4.7vw, 66px)/.98 var(--serif); letter-spacing: -.015em; color: var(--ink); }
.hx-h1 .big em { font-style: italic; }
.hx-sub { max-width: 560px; margin: 0 auto 22px; font-size: clamp(16.5px, 1.35vw, 18.5px); line-height: 1.55; color: var(--ink-2); text-wrap: balance; }
.hx-sub b { color: var(--ink); font-weight: 600; }
.hx-cta { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: var(--s3) var(--s5); }
.hx-proof { list-style: none; margin: var(--s4) 0 0; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: var(--s2) var(--s5); }
.hx-proof li { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-3); }
.hx-proof .ic { width: 14px; height: 14px; stroke-width: 2.2; color: var(--ink); }

.hx-demo-group { margin: var(--s6) auto 0; max-width: var(--demo); }
.hx-scenario { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 10px; font-size: 13.5px; color: var(--ink-3); text-align: center; }
.hx-scenario span { font: 500 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); border: 1px solid var(--rule-2); border-radius: 999px; padding: 5px 8px; }
.hx-demo { text-align: left; }
.hx-demo.hx-win { box-shadow: 0 1px 2px rgba(10, 10, 12, .04), 0 30px 60px -40px rgba(10, 10, 12, .3); }
.hx-side-h > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hx-side-h { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); font: 500 10px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; min-height: 14px; }
.hx-done { color: var(--ok); }
.hx-tagx { color: var(--ink-4); }
/* the recording strip: recording → writing it up → ready, stacked in one row */
.hx-state { display: grid; padding: 10px 20px; border-bottom: 1px solid var(--rule); background: var(--sheet-2); }
.hx-state > * { grid-area: 1 / 1; align-self: center; }
.hx-state { position: relative; }
/* a thin progress line under the strip while it transcribes, finds and writes */
.hx-state > .hx-prog { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--rule); overflow: hidden; }
.hx-prog b { display: block; height: 100%; width: 0; background: var(--ink); }
.hx-prog:not(.is-hidden) b { animation: hx-prog 2.35s linear forwards; }
@keyframes hx-prog { to { width: 100%; } }
.hx-recbar { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.hx-recbar b { font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--rec); }
.hx-recbar .t { font: 500 17px/1 var(--mono); }
.hx-recbar .grow { flex: 1; }
.hx-recbar .levels { height: 22px; }
.hx-stop { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--r-sm); border: 1px solid var(--rule-2); background: var(--sheet); font: 500 12px/1 var(--sans); white-space: nowrap; }
.hx-stop i { width: 7px; height: 7px; border-radius: 2px; background: var(--ink); }
.hx-wait { display: flex; align-items: center; gap: var(--s2); margin: 0; font: 500 12px/1 var(--mono); color: var(--ink-3); }
.hx-donebar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px var(--s4); min-height: 28px; font: 400 12.5px/1.3 var(--mono); color: var(--ink-3); }
.hx-donebar .ok { display: inline-flex; align-items: center; gap: 6px; font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ok); }
.hx-donebar .ok .ic { width: 14px; height: 14px; stroke-width: 2.4; }
.hx-donebar .grow { flex: 1; }
.hx-donebar u { color: var(--ink-2); text-decoration-color: var(--rule-2); text-underline-offset: 3px; }
/* the record: a placeholder until you stop, then every field */
.hx-hero-body { display: grid; padding: 14px 22px 18px; }
.hx-hero-body > * { grid-area: 1 / 1; min-width: 0; }
.hx-hero-ghost > p { margin: 0 0 var(--s3); font-size: 14px; color: var(--ink-3); }
.hx-hero-rec .hx-rec-title { margin-bottom: 8px; }
/* three bands side by side, one column each */
.hx-hero-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--s5); }
.hx-hero-cols > .hx-band { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 6px; padding-bottom: 0; }
.hx-hero-cols > .hx-band > h4 { font-size: 17px; }
.hx-hero-cols .f + .f { margin-top: 10px; }
.hx-hero-cols .hx-band p, .hx-hero-cols .hx-band li { font-size: 13.5px; line-height: 1.45; }
.hx-hero-cols .hx-band li::before { top: 9px; }
.hx-hero-ghost .hx-ghost i { margin-bottom: 7px; }
.hx-dates { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px var(--s3); }
.hx-dates li { display: contents; }
.hx-dates li::before { content: none; }
.hx-dates li b { font: 500 12px/1.9 var(--mono); color: var(--ink); white-space: nowrap; }
.hx-dates li span { font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
.hx-hero-cols .hx-dates li b { font-size: 11.5px; }
.hx-kv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--rule); border-radius: var(--r-md); margin: 8px 0 4px; }
.hx-kv div { padding: 7px 10px; border-left: 1px solid var(--rule); min-width: 0; }
.hx-kv div:first-child { border-left: 0; }
.hx-kv span { display: block; font: 500 9.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.hx-kv b { font-size: 13px; font-weight: 600; }
.hx-kv-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 var(--s4); }
.hx-mini-title { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); margin-bottom: 4px; }
.hx-mini-title p { margin: 0; font: 600 15px/1.3 var(--sans); letter-spacing: -.01em; }
.hx-demo [data-step] { transition: opacity .45s var(--ease), transform .45s var(--ease); }

/* hero intro: the headline writes itself in — right after the arrival
   overlay when the page is opened or refreshed, straight away otherwise */
:root { --intro: .12s; }
html[data-arrived] { --intro: 1.3s; } /* data-arrival itself is removed when the overlay ends */
.hx-hero .hx-h1 .kicker { animation: hx-rise .7s var(--ease) var(--intro) both; }
.hx-hero .hx-h1 .big { animation: hx-rise .8s var(--ease) calc(var(--intro) + .1s) both; }
.hx-hero .hx-h1 .big em { display: inline-block; padding: 0 .06em; margin: 0 -.06em; animation: hx-write 1.05s cubic-bezier(.65, 0, .35, 1) calc(var(--intro) + .55s) both; }
.hx-hero .hx-sub { animation: hx-rise .8s var(--ease) calc(var(--intro) + .85s) both; }
.hx-hero .hx-cta { animation: hx-rise .8s var(--ease) calc(var(--intro) + .95s) both; }
.hx-hero .hx-proof { animation: hx-rise .8s var(--ease) calc(var(--intro) + 1.05s) both; }
.hx-hero .hx-demo-group { animation: hx-rise .9s var(--ease) calc(var(--intro) + 1.15s) both; }
@keyframes hx-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes hx-write { from { clip-path: inset(-15% 100% -30% 0); } to { clip-path: inset(-15% -6% -30% 0); } }
[dir="rtl"] .hx-hero .hx-h1 .big em { animation-name: hx-write-rtl; }
@keyframes hx-write-rtl { from { clip-path: inset(-15% 0 -30% 100%); } to { clip-path: inset(-15% 0 -30% -6%); } }
@media (prefers-reduced-motion: reduce) {
  .hx-hero .hx-h1 .kicker, .hx-hero .hx-h1 .big, .hx-hero .hx-h1 .big em, .hx-hero .hx-sub, .hx-hero .hx-cta, .hx-hero .hx-proof, .hx-hero .hx-demo-group { animation: hx-fade .5s ease var(--intro) both; }
}
@keyframes hx-fade { from { opacity: 0; } to { opacity: 1; } }

/* ================= 2 · EVERY WAY IN ================= */
.hx-capture { display: grid; grid-template-columns: minmax(0, 340px) 120px minmax(0, 1fr); align-items: center; }
.hx-ins { display: grid; gap: var(--s2); position: relative; z-index: 2; }
.hx-in { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 2px var(--s3); align-items: center; width: 100%; padding: 12px 14px; text-align: left; border-radius: var(--r-md); border: 1px solid transparent; background: transparent; color: var(--ink-3); cursor: pointer; transition: background .3s, border-color .3s, color .3s; }
.hx-in:hover { color: var(--ink-2); background: var(--sheet-2); }
.hx-in .ico { grid-row: span 2; width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--rule-2); background: var(--sheet); display: grid; place-items: center; color: var(--ink-2); transition: all .3s; }
.hx-in b { font: 600 15px/1.2 var(--sans); }
.hx-in small { font: 400 11.5px/1.35 var(--mono); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hx-in[aria-selected="true"] { background: var(--sheet); border-color: var(--rule-2); color: var(--ink); box-shadow: 0 10px 24px -20px rgba(10, 10, 12, .45); }
.hx-in[aria-selected="true"] .ico { background: var(--ink); border-color: var(--ink); color: var(--sheet); }
.hx-flow { position: relative; display: grid; place-items: center; height: var(--ins-h, 420px); }
.hx-node { position: relative; z-index: 2; width: 52px; height: 52px; border-radius: 15px; background: var(--ink); color: var(--paper); display: grid; place-items: center; font: 700 22px/1 var(--brand); box-shadow: 0 0 0 8px var(--paper); }
.hx-node.pulse { animation: nodepulse .8s var(--ease); }
@keyframes nodepulse { 45% { transform: scale(1.08); } }
.hx-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.hx-wires path { fill: none; stroke: var(--rule-2); stroke-width: 1.2; transition: stroke .35s; }
.hx-wires path.on { stroke: var(--ink); stroke-width: 1.4; stroke-dasharray: 4 5; animation: dash 1s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -18; } }
.hx-capture .hx-win { min-height: 486px; }
.hx-pane[hidden] { display: none !important; }
.hx-bridge { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: var(--s2) var(--s4); margin: var(--s7) 0 0; text-align: center; }
.hx-bridge > span { font: italic 400 clamp(22px, 2vw, 26px)/1.2 var(--serif); color: var(--ink); }
.hx-bridge::before, .hx-bridge::after { content: ""; flex: 1 1 40px; max-width: 160px; height: 1px; background: var(--rule-2); }
.hx-bridge .link { font-size: 15px; }

/* ================= 3 · A RECORD, NOT A TRANSCRIPT (numbered pairs, one screen) ================= */
.hx-pairs { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
.hx-pairs-l, .hx-pairs-r { padding: 14px 22px 14px; min-width: 0; }
.hx-pairs .hx-side-h { margin-bottom: 10px; }
.hx-pairs .hx-mini-title { margin-bottom: 2px; }
.hx-pairs .hx-band li, .hx-pairs .hx-band p { font-size: 13.5px; line-height: 1.45; }
.hx-pairs-l { border-right: 1px solid var(--rule); background: var(--sheet-2); }
.hx-tl { display: grid; grid-template-columns: minmax(0, 1fr) 20px; column-gap: 14px; align-items: center; padding: 7px 0; border-top: 1px solid var(--rule); }
.hx-tl:first-child { border-top: 0; padding-top: 2px; }
.hx-tl .who { grid-column: 1 / -1; font: 500 9.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 3px; }
.hx-tl .txt { font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.hx-tl .txt .marking { color: var(--ink); }
.hx-tl .hx-n { justify-self: end; margin: 0; }
.hx-tl:has(.marking.on) .hx-n { background: var(--ink); color: var(--sheet); }
.hx-pairs .hx-band p b { color: var(--ink); font-weight: 600; }
.hx-pairs .f > span + p, .hx-pairs .f > span + ul { margin-top: 2px; }
.hx-head-tight { margin-bottom: var(--s6); }
.hx-head-tight .h2 { font-size: clamp(34px, 3.6vw, 50px); }
.hx-pairs .hx-band { grid-template-columns: 104px minmax(0, 1fr); padding: 6px 0; }
.hx-pairs .f { margin: 0 -8px; padding: 2px 8px; border-radius: var(--r-sm); transition: background .5s var(--ease); }
.hx-pairs .f + .f { margin-top: 2px; }
.hx-pairs .f.lit { background: var(--mark-soft); }
.hx-pairs .f { display: grid; grid-template-columns: minmax(0, 1fr) 20px; column-gap: 12px; align-items: start; }
.hx-pairs .f > span { grid-column: 1; }
.hx-pairs .f > p, .hx-pairs .f > ul { grid-column: 1; }
.hx-pairs .f > .hx-n { grid-column: 2; grid-row: 1 / span 2; align-self: center; justify-self: end; }
.hx-n { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--paper-2); color: var(--ink-3); font: 600 9.5px/1 var(--mono); font-style: normal; vertical-align: 2px; margin: 0 2px 0 4px; transition: background .4s, color .4s; }
.marking.on + .hx-n, .hx-pairs .f.lit .hx-n { background: var(--ink); color: var(--sheet); }
.hx-pairs .hx-transcript-row { margin-top: 4px; }

/* ================= 4 · THE WEEK ================= */
.hx-days { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--rule); margin-bottom: var(--s6); }
.hx-days::before { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: var(--wk, 20%); background: var(--ink); transition: width .6s var(--ease); }
.hx-day { text-align: left; background: none; border: 0; padding: 14px 12px 0 0; cursor: pointer; color: var(--ink-4); transition: color .3s; }
.hx-day b { display: block; font: italic 400 30px/1 var(--serif); margin-bottom: 6px; }
.hx-day small { font: 500 11px/1.3 var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.hx-day[aria-selected="true"], .hx-day.done { color: var(--ink); }
.hx-day.done small { color: var(--ink-3); }
.hx-weekstage { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: var(--s8); align-items: center; min-height: 470px; }
.hx-weekcopy .h3 { margin: 12px 0 14px; }
.hx-weekcopy p { margin: 0 0 var(--s5); color: var(--ink-2); max-width: 420px; }
.hx-from { display: inline-flex; align-items: center; gap: var(--s2); padding-top: var(--s4); border-top: 1px solid var(--rule); font: 500 12px/1.3 var(--mono); color: var(--ink-3); }
.hx-from .ic { width: 14px; height: 14px; }
.hx-search { display: flex; align-items: center; gap: var(--s3); border: 1px solid var(--rule-2); border-radius: var(--r-md); padding: 10px 12px; margin-bottom: var(--s2); font: 400 13.5px/1 var(--mono); }
.hx-search .ic { color: var(--ink-3); }
.hx-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s3); align-items: center; padding: var(--s3) 0; border-top: 1px solid var(--rule); }
.hx-row b { display: block; font-size: 14px; font-weight: 600; }
.hx-row span { font-size: 12.5px; color: var(--ink-3); }
.hx-due { display: flex; align-items: center; gap: var(--s4); padding: var(--s4); border: 1px solid var(--ink); border-radius: var(--r-md); margin-bottom: var(--s3); }
.hx-due .d { text-align: center; min-width: 50px; }
.hx-due .d small { display: block; font: 500 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--rec); margin-bottom: 4px; }
.hx-due .d b { font: 400 28px/1 var(--serif); }
.hx-check { display: flex; gap: var(--s3); align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--rule); font-size: 14px; color: var(--ink-2); }
.hx-check i { width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--rule-2); flex: none; margin-top: 2px; }

/* ================= 5 · TRUST & SECURITY (quiet strip) ================= */
.hx-trust { padding: 0 0 var(--sec); }
.hx-trust-in { border-top: 1px solid var(--rule); padding-top: var(--s5); }
.hx-trust-h { display: flex; justify-content: center; text-align: center; margin-bottom: var(--s5); }
.hx-trust ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); }
.hx-trust li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }
.hx-trust li b { color: var(--ink); font-weight: 600; }
.hx-trust li .ic { width: 16px; height: 16px; margin-top: 2px; color: var(--ink-2); }

/* ================= 6 · PLANS (Free quiet · Pro recommended · Business no limits) ================= */
.hx-head-c { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.hx-head-c .h2 { max-width: 820px; }
.hx-head-c .lede { max-width: 560px; margin-top: var(--s4); }
.hx-head-c .cycle { margin-top: var(--s5); }
.hx-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); align-items: stretch; max-width: 1080px; margin: 0 auto; }
.hx-plan { position: relative; display: flex; flex-direction: column; padding: 28px 26px 26px; border-radius: var(--r-lg); }
.hx-plan-top h3 { margin: 0; font: 400 30px/1 var(--serif); }
.hx-plan-top .who { display: block; margin-top: 8px; font-size: 14px; color: var(--ink-3); }
.hx-plan .amt { margin: var(--s5) 0 0; font: 400 50px/1 var(--serif); letter-spacing: -.01em; }
.hx-plan .amt small { margin-left: 6px; font: 400 14px/1 var(--sans); color: var(--ink-3); letter-spacing: 0; }
.hx-plan-lead { margin: var(--s5) 0 var(--s2); font: 500 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.hx-plan ul { list-style: none; margin: 0 0 var(--s5); padding: 0; flex: 1; }
.hx-plan li { display: flex; gap: 10px; padding: 8px 0; font-size: 14.5px; line-height: 1.4; color: var(--ink-2); }
.hx-plan li .ic { width: 15px; height: 15px; margin-top: 2px; stroke-width: 2.2; }
.hx-plan .btn { justify-content: center; }
.hx-badge { position: absolute; top: 22px; right: 22px; font: 500 10.5px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; padding: 6px 9px; border-radius: 999px; background: var(--sheet); color: var(--ink); }
.hx-badge-line { background: transparent; border: 1px solid var(--ink); }
.hx-plan-free { border: 1px solid var(--rule); background: transparent; }
.hx-plan-free li .ic { color: var(--ink-4); }
.hx-plan-free .amt, .hx-plan-free h3 { color: var(--ink-2); }
.hx-plan-pro { background: var(--ink); color: var(--paper); box-shadow: 0 30px 60px -30px rgba(10, 10, 12, .55); transform: translateY(-12px); }
.hx-plan-pro .who, .hx-plan-pro .amt small, .hx-plan-pro .hx-plan-lead { color: color-mix(in srgb, var(--paper) 62%, var(--ink)); }
.hx-plan-pro li { color: color-mix(in srgb, var(--paper) 88%, var(--ink)); }
.hx-plan-pro li .ic { color: var(--paper); }
.btn-pro { background: var(--paper); color: var(--ink); }
.btn-pro:hover { background: color-mix(in srgb, var(--paper) 88%, var(--ink)); }
.hx-plan-biz { background: linear-gradient(var(--sheet), var(--sheet)) padding-box, linear-gradient(155deg, var(--ink) 0%, color-mix(in srgb, var(--ink) 22%, transparent) 42%, color-mix(in srgb, var(--ink) 22%, transparent) 62%, var(--ink) 100%) border-box; border: 1.5px solid transparent; box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .6); }
/* Max (2026-10-16): the top tier reads as one, not an afterthought -- a fine
   metallic edge and a soft light falling on the top of the card, in ink, so
   it stays black and white in both themes */
.hx-plan-biz > :not(.hx-badge) { position: relative; }
.hx-plan-biz::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(90% 46% at 50% 0%, color-mix(in srgb, var(--ink) 9%, transparent), transparent 72%); }
.hx-plan-biz li .ic { color: var(--ink); }
.hx-plan-note { margin: calc(var(--s3) * -1) 0 var(--s4); padding-top: var(--s3); border-top: 1px solid var(--rule); font-size: 13px; line-height: 1.45; color: var(--ink-3); }
.hx-plans-foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--s3); max-width: 1080px; margin: var(--s5) auto 0; font-size: 14px; color: var(--ink-3); }

/* ---------- /pricing ---------- */
.hx-price-hero { padding: clamp(28px, 4vw, 48px) 0 var(--s6); text-align: center; }
.hx-price-hero .h1 { max-width: 900px; margin: 0 auto var(--s4); font-size: clamp(36px, 4.2vw, 56px); }
.hx-price-hero .h1 em { font-style: italic; }
.hx-price-sub { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: var(--s3) var(--s5); }
.hx-price-sub p { margin: 0; font-size: 16px; color: var(--ink-2); }
.hx-price-sub .cycle { margin: 0; }
.hx-price-plans { padding: var(--s5) 0 var(--sec); }
.hx-compare { background: var(--paper-2); padding-top: var(--sec) !important; scroll-margin-top: 68px; }
.hx-table-wrap { max-width: 1080px; margin: 0 auto; overflow-x: auto; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-lg); }
.hx-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14.5px; min-width: 640px; }
.hx-table th, .hx-table td { padding: 14px 18px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: middle; }
.hx-table thead th { position: sticky; top: 68px; z-index: 2; background: var(--sheet); padding-top: 20px; padding-bottom: 16px; vertical-align: bottom; }
.hx-table thead th b { display: block; font: 400 24px/1 var(--serif); font-weight: 400; color: var(--ink); }
.hx-table thead th span { display: block; margin-top: 6px; font: 500 13px/1.2 var(--sans); color: var(--ink-3); }
.hx-table thead th:first-child { width: 40%; }
.hx-table tbody th { font-weight: 500; color: var(--ink); }
.hx-table td { color: var(--ink-2); }
.hx-table .pro { background: color-mix(in srgb, var(--ink) 4%, var(--sheet)); }
.hx-table tr.grp th { padding-top: 26px; font: italic 400 19px/1.2 var(--serif); color: var(--ink); background: var(--sheet); }
.hx-table tr:last-child td, .hx-table tr:last-child th { border-bottom: 0; }
.hx-yes .ic { width: 17px; height: 17px; stroke-width: 2.2; color: var(--ink); }
.hx-no { color: var(--ink-4); }
.hx-table tr.cta td { padding-top: 18px; padding-bottom: 20px; }

/* ================= 7 · QUESTIONS (centred) ================= */
.hx-qa { max-width: 820px; }
.hx-qa .faq { max-width: none; }
.hx-qa .faq summary { padding: 20px 0; font-size: clamp(19px, 1.7vw, 22px); }

/* ================= 8 · FINAL (light) ================= */
.hx-final { background: var(--paper); color: var(--ink); padding: var(--sec) 0; border-top: 1px solid var(--rule); }
.hx-final-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s8); align-items: center; }
.hx-final h2 { margin: 14px 0 var(--s4); font: 400 clamp(44px, 5vw, 72px)/1 var(--serif); letter-spacing: -.01em; }
.hx-final h2 em { font-style: italic; }
.hx-final-sub { margin: 0 0 var(--s5); max-width: 440px; font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.hx-final .micro { margin-top: var(--s4); }
.hx-blank { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 1px 2px rgba(10, 10, 12, .04), 0 30px 60px -40px rgba(10, 10, 12, .3); }
.hx-blank .caret { margin-left: 4px; }
.hx-final-sm { padding: clamp(64px, 8vw, 96px) 0; }
.hx-final-sm h2 { margin: 0 0 var(--s5) !important; }

/* ================= week: Monday's recording screen, Thursday's checklist ================= */
.hx-listen { padding: var(--s6) 28px var(--s5); }
.hx-listen-h { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hx-listen-h b { font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--rec); }
.hx-listen-h span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: var(--ink-2); }
.hx-listen-t { display: flex; align-items: center; gap: var(--s5); margin: var(--s5) 0; }
.hx-listen-t .t { font: 400 clamp(44px, 5vw, 60px)/1 var(--mono); letter-spacing: -.02em; }
.hx-listen-t .levels { flex: 1; height: 44px; justify-content: flex-end; }
.hx-listen-t .levels i { animation: lv 1.1s ease-in-out infinite alternate; }
.hx-listen-t .levels i:nth-child(3n) { animation-duration: .8s; } .hx-listen-t .levels i:nth-child(4n+1) { animation-duration: 1.4s; animation-delay: -.3s; } .hx-listen-t .levels i:nth-child(5n+2) { animation-duration: .95s; animation-delay: -.6s; }
@keyframes lv { from { height: 18%; } to { height: 92%; } }
@media (prefers-reduced-motion: reduce) { .hx-listen-t .levels i { animation: none; height: 40%; } }
.hx-listen-f { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); flex-wrap: wrap; padding-top: var(--s4); border-top: 1px solid var(--rule); font-size: 13px; color: var(--ink-3); }
.hx-listen-f > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.hx-listen-n { margin: var(--s4) 0 0; font-size: 13px; color: var(--ink-3); }
.hx-due-t { display: block; font-size: 15px; }
.hx-due-s { font-size: 13px; color: var(--ink-3); }
.hx-check.done { color: var(--ink-3); }
.hx-check.done span { text-decoration: line-through; text-decoration-color: var(--ink-4); }
.hx-check.done i { display: grid; place-items: center; background: var(--ink); border-color: var(--ink); color: var(--sheet); }
.hx-check.done i .ic { width: 11px; height: 11px; stroke-width: 3; }

/* ================= client work ================= */
.hx-cl { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); }
.hx-cl-l, .hx-cl-r { padding: 18px 22px 22px; min-width: 0; }
.hx-cl-l { background: var(--sheet-2); border-right: 1px solid var(--rule); }
.hx-raw-lines { margin: 0; font: 400 13px/1.5 var(--mono); color: var(--ink-2); }
.hx-raw-lines .marking { color: var(--ink); }
.hx-raw-lines p { margin: 0 0 9px; }
.hx-wait-s { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-3); }
.hx-stack { display: grid; }
.hx-stack > * { grid-area: 1 / 1; min-width: 0; }
.hx-cl-rec .hx-band { grid-template-columns: 104px minmax(0, 1fr); padding: 9px 0; }
.hx-cl-rec .hx-band > h4 { font-size: 15.5px; }
.hx-cl-rec .hx-kv { margin: 10px 0 12px; }
.hx-sec-calls { padding-bottom: var(--sec) !important; }
.hx-setups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); }
.hx-setups > div { padding: 22px 20px 20px; border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--sheet); }
.hx-setups .ok { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--sheet); margin-bottom: var(--s4); }
.hx-setups .ok .ic { width: 14px; height: 14px; stroke-width: 2.6; }
.hx-setups b { display: block; font: 400 24px/1.1 var(--serif); margin-bottom: var(--s2); }
.hx-setups p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.hx-setups-no { list-style: none; margin: var(--s5) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); font-size: 14px; color: var(--ink-3); }
.hx-setups-no li { display: flex; gap: 8px; }
.hx-setups-no .no { color: var(--ink-4); }
/* home (2026-10-07): the three notes under the setups are good news, not caveats */
.hx-setups-good { font-size: 15px; color: var(--ink-2); }
.hx-setups-good .no { color: var(--ok); }
.hx-setups-good .no .ic { width: 16px; height: 16px; margin-top: 2px; stroke-width: 2.2; }

/* ---------- use cases (home, under "Five ways in. One record out.") ----------
   A tab row, then one situation at a time set either side of an orb,
   then previous / next. The orb is ink with paper-white and highlighter
   light drifting inside it (so it turns to pearl in the dark theme); its
   light swings round and the glyph changes with the selected use case
   ([data-on] on .hx-uc, set by site.js). All panels share one grid cell,
   so the block never changes height between use cases. */
.hx-uc { --dir: 1; --orb: 240px; }
.hx-uc-tabs { display: flex; gap: 4px; width: max-content; max-width: 100%; margin: 0 auto; padding: 4px; border: 1px solid var(--rule); border-radius: 999px; background: var(--sheet); overflow-x: auto; scrollbar-width: none; }
.hx-uc-tabs::-webkit-scrollbar { display: none; }
.hx-uc-tabs button { flex: none; height: 36px; padding: 0 15px; border: 0; border-radius: 999px; background: transparent; font: 500 14px/1 var(--sans); color: var(--ink-2); white-space: nowrap; cursor: pointer; transition: background .25s var(--ease), color .25s var(--ease); }
.hx-uc-tabs button:hover { color: var(--ink); }
.hx-uc-tabs button[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.hx-uc-tabs button:focus-visible { outline-offset: -2px; }
.hx-uc-stage { position: relative; margin-top: var(--s7); }
.hx-uc-panels { display: grid; }
.hx-uc-panel { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--orb) + 120px) minmax(0, 1fr); align-items: center; min-height: calc(var(--orb) + 110px); }
.hx-uc-panel[hidden] { display: grid; visibility: hidden; }
.hx-uc-txt { grid-column: 1; justify-self: end; width: 100%; max-width: 380px; }
.hx-uc-txt .label { display: block; margin-bottom: 14px; }
.hx-uc-txt .h3 { font-size: clamp(28px, 2.8vw, 36px); }
.hx-uc-txt p { margin: var(--s3) 0 var(--s4); font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.hx-uc-facts { grid-column: 3; justify-self: start; width: 100%; max-width: 340px; list-style: none; margin: 0; padding: 0; counter-reset: f; }
.hx-uc-facts li { counter-increment: f; display: flex; gap: 14px; align-items: baseline; padding: 15px 0; border-top: 1px solid var(--rule); font-size: 15px; line-height: 1.45; }
.hx-uc-facts li:first-child { border-top: 0; }
.hx-uc-facts li::before { content: counter(f, decimal-leading-zero); flex: none; font: 500 11px/1 var(--mono); letter-spacing: .06em; color: var(--ink-4); }
.hx-uc-panel:not([hidden]) .hx-uc-txt, .hx-uc-panel:not([hidden]) .hx-uc-facts li { animation: hx-uc-in .6s var(--ease) both; }
.hx-uc-panel:not([hidden]) .hx-uc-facts li:nth-child(2) { animation-delay: .07s; }
.hx-uc-panel:not([hidden]) .hx-uc-facts li:nth-child(3) { animation-delay: .14s; }
@keyframes hx-uc-in { from { opacity: 0; transform: translateX(calc(var(--dir) * 16px)); } }
.hx-uc-orb { position: absolute; left: 50%; top: 50%; width: var(--orb); height: var(--orb); margin: calc(var(--orb) / -2) 0 0 calc(var(--orb) / -2); isolation: isolate; }
.hx-uc-orb::before { content: ""; position: absolute; inset: -30%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--tint) 34%, transparent), transparent 74%); }
.hx-uc-ring { position: absolute; inset: -36px; border-radius: 50%; border: 1px solid var(--rule-2); }
.hx-uc-ring i { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px; border-radius: 50%; border: 1px solid var(--ink-4); background: var(--paper); transform: rotate(calc(var(--n) * 72deg)) translateY(calc(var(--orb) / -2 - 36px)); transition: background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease); }
.hx-uc-ring i.on { background: var(--ink); border-color: var(--ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ink) 10%, transparent); }
.hx-orb { position: absolute; inset: 0; overflow: hidden; border-radius: 50%; background: radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--ink) 72%, var(--paper)), var(--ink) 68%); box-shadow: 0 44px 70px -34px rgba(10, 10, 12, .6); transform: translateZ(0); }
.hx-orb-spin { position: absolute; inset: 0; transform: rotate(var(--tilt, 0deg)); transition: transform 1.6s var(--ease); }
.hx-orb-spin i { position: absolute; border-radius: 50%; filter: blur(22px); }
.hx-orb-spin .a { inset: -6% 40% 46% -8%; background: var(--paper); opacity: .5; transform-origin: 80% 84%; animation: hx-orb-a 19s linear infinite; }
.hx-orb-spin .b { inset: 58% -4% -6% 48%; background: color-mix(in srgb, var(--tint) 70%, #fff); opacity: var(--warm, .8); transform-origin: 28% 20%; animation: hx-orb-a 27s linear infinite reverse; transition: opacity 1.2s var(--ease); }
.hx-orb-spin .c { inset: 34%; background: var(--ink-3); opacity: .4; animation: hx-orb-b 13s ease-in-out infinite alternate; }
.hx-orb::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 30% 22%, rgba(255, 255, 255, .3), transparent 38%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), inset -16px -20px 30px -18px color-mix(in srgb, var(--tint) 90%, transparent), inset 14px 18px 40px -20px rgba(255, 255, 255, .25); }
@keyframes hx-orb-a { to { transform: rotate(360deg); } }
@keyframes hx-orb-b { from { transform: translate(-14%, -10%); } to { transform: translate(16%, 12%) scale(1.25); } }
.hx-orb-ic { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; color: var(--paper); opacity: 0; transform: scale(.8); transition: opacity .45s var(--ease), transform .7s var(--ease); }
.hx-orb-ic.on { opacity: .96; transform: none; }
.hx-orb-ic .ic { width: 44px; height: 44px; stroke-width: 1.35; }
.hx-uc[data-on="1"] { --tilt: 72deg; --warm: .6; }
.hx-uc[data-on="2"] { --tilt: 144deg; --warm: .9; }
.hx-uc[data-on="3"] { --tilt: 216deg; --warm: .55; }
.hx-uc[data-on="4"] { --tilt: 288deg; --warm: .75; }
.hx-uc-nav { display: flex; align-items: center; justify-content: center; gap: var(--s4); margin-top: var(--s6); }
.hx-uc-nav button { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid var(--rule-2); border-radius: 50%; background: var(--sheet); color: var(--ink); cursor: pointer; transition: border-color .2s, transform .2s var(--ease); }
.hx-uc-nav button:hover { border-color: var(--ink); }
.hx-uc-nav button:active { transform: scale(.94); }
.hx-uc-nav .ic { width: 18px; height: 18px; }
.hx-uc-nav [data-uc-prev] .ic { transform: rotate(180deg); }
.hx-uc-count { min-width: 56px; text-align: center; font: 500 12px/1 var(--mono); letter-spacing: .08em; color: var(--ink-3); }
.hm .hx-sec-uc { padding: 64px 0; }

/* ---------- how recording works (home, above the week) ----------
   A wide tinted plate: three tiles, an arrow, one record. Under 700px
   the tiles become rows and the arrow points down. */
.hx-rw { display: flex; align-items: flex-start; justify-content: center; gap: 20px; margin: 0; padding: 88px 40px 80px; border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--paper-2); }
.hx-rw-from { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; }
.hx-rw li, .hx-rw-to { width: 200px; text-align: center; }
.hx-rw-tile { display: grid; place-items: center; width: 132px; height: 132px; margin: 0 auto 18px; border-radius: 28px; background: var(--sheet); color: var(--ink); box-shadow: 0 0 0 1px rgba(10, 10, 12, .05), 0 1px 2px rgba(10, 10, 12, .05), 0 20px 36px -24px rgba(10, 10, 12, .3); }
.hx-rw-tile svg { width: 44px; height: 44px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hx-rw-a { background: var(--ink); color: var(--paper); font: 700 54px/1 var(--brand); }
.hx-rw b { display: block; font: 600 15px/1.3 var(--sans); letter-spacing: -.005em; }
.hx-rw small { display: block; margin-top: 5px; font-size: 13px; line-height: 1.4; color: var(--ink-3); }
.hx-rw-arrow { display: grid; place-items: center; height: 132px; color: var(--ink-3); }
.hx-rw-arrow .ic { width: 26px; height: 26px; }
.hm .hx-sec-rw { padding: 64px 0; }
@media (max-width: 900px) {
  .hx-rw { gap: 12px; padding: 56px 20px 52px; }
  .hx-rw-from { gap: 12px; }
  .hx-rw li, .hx-rw-to { width: 132px; }
  .hx-rw-tile { width: 104px; height: 104px; border-radius: 24px; }
  .hx-rw-tile svg { width: 36px; height: 36px; }
  .hx-rw-a { font-size: 44px; }
  .hx-rw-arrow { height: 104px; }
}
@media (max-width: 700px) {
  .hx-rw, .hm .hx-rw { flex-direction: column; align-items: stretch; gap: 0; padding: 12px 20px; } /* .hm resets figure padding (home-m.css) */
  .hx-rw-from { flex-direction: column; gap: 0; }
  .hx-rw li, .hx-rw-to { display: grid; grid-template-columns: 60px minmax(0, 1fr); column-gap: 16px; align-content: center; width: auto; padding: 12px 0; text-align: left; }
  .hx-rw-tile { grid-row: span 2; width: 60px; height: 60px; margin: 0; border-radius: 16px; }
  .hx-rw-tile svg { width: 26px; height: 26px; }
  .hx-rw-a { font-size: 26px; }
  .hx-rw b { align-self: end; }
  .hx-rw small { align-self: start; margin-top: 3px; }
  .hx-rw-arrow { width: 60px; height: 28px; }
  .hx-rw-arrow .ic { transform: rotate(90deg); }
}

/* ---------- what a recording gives back (home, above the week section) ----------
   The trust strip's layout (.hx-trust), without its bottom padding: the
   section after it brings its own space. */
.hx-days-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hx-quote { margin: 0 0 var(--s4); font: 400 13px/1.5 var(--mono); color: var(--ink-2); }
.hx-quote .marking { color: var(--ink); }
.hx-board { grid-template-columns: repeat(6, 168px); scrollbar-width: none; }
.hx-board::-webkit-scrollbar { display: none; }
.hx-board .col { min-height: 132px; padding: 8px; }
.hx-board .col-h span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hx-board .card { padding: 8px; }
.hx-board .card b { font-size: 12.5px; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; }
.hx-board .card b i { flex: none; }
.hx-board .card span { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-advisor-ctx { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s4) 0; }
.hx-advisor-ctx span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--rule); border-radius: 999px; font-size: 12.5px; color: var(--ink-2); }
.hx-advisor-ctx .ic { width: 14px; height: 14px; }
.hx-draft { margin: 0 0 var(--s4); padding: 4px 0 4px 14px; border-left: 2px solid var(--ink); }
.hx-draft-h { display: block; font: 500 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ok); margin-bottom: 6px; }
.hx-draft p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink); }
.hx-row-btns { margin-top: var(--s3); }
.hx-sec-after .hx-weekstage { min-height: 380px; }

/* ================= student examples (_testimonials.html) =================
   The same as the phone page (2026-10-16): one quote at a time in large
   serif type, the name and place under it, and a thin bar that fills while
   it's shown. The quotes share one grid cell, so the box keeps the height
   of the longest and nothing below jumps. site.js [data-hxv]. */
.hx-sec-voices { overflow: hidden; }
.hx-sec-voices .hx-head { margin-bottom: clamp(26px, 4vh, 40px); }
.hx-vq { display: grid; max-width: 1040px; margin: 0 auto; cursor: grab; touch-action: pan-y; outline: none; }
.hx-vq:active { cursor: grabbing; }
.hx-vq:focus-visible { outline: 2px solid var(--ink); outline-offset: 12px; border-radius: 12px; }
.hx-q { grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: center; margin: 0; text-align: center; opacity: 0; transform: translateX(28px); transition: opacity .5s var(--ease), transform .8s var(--ease); pointer-events: none; user-select: none; }
.hx-q.on { opacity: 1; transform: none; pointer-events: auto; }
.hx-q.gone { transform: translateX(-28px); }
.hx-q blockquote { margin: 0; font: 400 clamp(34px, 3.5vw, 52px)/1.14 var(--serif); letter-spacing: -.012em; color: var(--ink); text-wrap: balance; }
.hx-q figcaption { margin-top: clamp(20px, 3vh, 28px); font-size: 16px; line-height: 1.45; }
.hx-q figcaption b { display: block; font-weight: 600; color: var(--ink); }
.hx-q figcaption span { color: var(--ink-3); }
.hx-qbar { display: block; width: 160px; height: 2px; margin: clamp(28px, 4.5vh, 44px) auto 0; border-radius: 2px; background: var(--rule); overflow: hidden; }
.hx-qbar i { display: block; height: 100%; background: var(--ink); transform-origin: left; transform: scaleX(0); }
[dir="rtl"] .hx-qbar i { transform-origin: right; }
.hx-qbar i.run { animation: hx-qprog var(--dur, 5.6s) linear forwards; }
@keyframes hx-qprog { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .hx-q { transition: none; }
}

/* ================= inner pages (trust) ================= */
.hx-page-hero { padding: clamp(40px, 6vw, 80px) 0 var(--s7); text-align: center; }
.hx-page-hero .label { display: block; margin-bottom: 18px; }
.hx-page-hero .h1 { max-width: 900px; margin: 0 auto 18px; font-size: clamp(40px, 5vw, 68px); }
.hx-page-hero .lede { margin: 0 auto; max-width: 620px; }
.hx-sec-flow { padding-top: 0 !important; }
.hx-flowtable { border-top: 1px solid var(--ink); }
.hx-ft-head { display: grid; grid-template-columns: 260px minmax(0, 1fr) minmax(0, 1fr); gap: var(--s6); padding: var(--s3) 0; border-bottom: 1px solid var(--rule); font: 500 11px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.hx-ft-row { display: grid; grid-template-columns: 260px minmax(0, 1fr) minmax(0, 1fr); gap: var(--s6); padding: var(--s5) 0; border-bottom: 1px solid var(--rule); }
.hx-ft-row h3 { display: flex; gap: 10px; align-items: flex-start; margin: 0; font: 400 24px/1.15 var(--serif); }
.hx-ft-row h3 .ic { width: 18px; height: 18px; margin-top: 4px; color: var(--ink-3); }
.hx-ft-row p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.hx-ft-k { display: none; }
.hx-trust-page { padding-bottom: var(--sec); }
.hx-sec-two { background: var(--paper-2); padding-top: var(--sec) !important; }
.hx-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s8); }
.hx-two .label { display: block; margin-bottom: 14px; }
.hx-two .h3 { margin-bottom: var(--s3); }
.hx-two p { margin: 0; color: var(--ink-2); max-width: 520px; }
.hx-docs { padding: var(--s7) 0; border-top: 1px solid var(--rule); }
.hx-docs-in { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--s5); }
.hx-docs p { margin: 6px 0 0; font-size: 15px; color: var(--ink-3); }

/* questions now follow the closing section */
.hx-final + .hx-sec-faq { padding-top: 0; }

/* ================= sticky phone CTA ================= */

/* ================= TABLET ================= */
@media (max-width: 1100px) {
  .hx-capture { grid-template-columns: minmax(0, 300px) 80px minmax(0, 1fr); }
  .hx-weekstage { gap: var(--s6); }
  .hx-trust ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hx-setups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hx-ft-head, .hx-ft-row { grid-template-columns: 200px minmax(0, 1fr) minmax(0, 1fr); gap: var(--s5); }
}

/* ================= PHONE (redesigned, not shrunk) ================= */
@media (max-width: 900px) {
  :root { --sec: 64px; --head: 28px; }
  .hx-head { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hx-head .h2 { font-size: clamp(32px, 8.4vw, 40px); }
  .hx-head .lede { margin-top: var(--s3); font-size: 16px; }
  .hx-head-side { justify-self: start; margin-top: var(--s4); }

  .hx-hero { padding: var(--s5) 0 0; }
  .hx-h1 .kicker { font-size: 11px; margin-bottom: 14px; }
  .hx-h1 .big { font-size: clamp(38px, 10.6vw, 50px); }
  .hx-sub { font-size: 16px; margin-bottom: var(--s5); }
  .hx-cta { flex-direction: column; gap: var(--s3); }
  .hx-cta .btn { width: 100%; justify-content: center; }
  .hx-proof { gap: 6px 14px; }
  .hx-proof li { font-size: 12.5px; }
  .hx-demo-group { margin-top: var(--s6); }
  .hx-state { padding: 10px 14px; }
  .hx-recbar .levels { display: none; }
  .hx-donebar { gap: 4px 12px; font-size: 12px; }
  .hx-donebar u { display: none; }
  .hx-hero-body { padding: var(--s3) 16px 18px; }
  .hx-hero-ghost .hx-band { grid-template-columns: minmax(0, 1fr); }
  .hx-demo .replay { display: none; }

  .hx-capture { grid-template-columns: minmax(0, 1fr); }
  .hx-ins { display: flex; gap: var(--s2); overflow-x: auto; margin: 0 calc(var(--gut) * -1); padding: 2px var(--gut) var(--s2); scrollbar-width: none; scroll-snap-type: x proximity; }
  .hx-ins::-webkit-scrollbar { display: none; }
  .hx-in { flex: none; width: auto; grid-template-columns: 26px auto; padding: 8px 12px 8px 8px; border-color: var(--rule); scroll-snap-align: start; }
  .hx-in .ico { width: 26px; height: 26px; border-radius: 7px; grid-row: auto; }
  .hx-in .ico .ic { width: 14px; height: 14px; }
  .hx-in small { display: none; }
  .hx-in b { font-size: 14px; }
  .hx-flow { height: 44px !important; }
  .hx-flow::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--rule-2); }
  .hx-wires { display: none; }
  .hx-node { width: 32px; height: 32px; border-radius: 9px; font-size: 14px; box-shadow: 0 0 0 6px var(--paper); }
  .hx-capture .hx-win { min-height: 0; }
  .hx-bridge { margin-top: var(--s6); }
  .hx-bridge::before, .hx-bridge::after { display: none; }

  .hx-band { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .hx-pairs { grid-template-columns: minmax(0, 1fr); }
  .hx-pairs-l { border-right: 0; border-bottom: 1px solid var(--rule); }
  .hx-pairs .hx-band { grid-template-columns: minmax(0, 1fr); gap: 4px; }

  .hx-days { grid-template-columns: repeat(5, minmax(60px, 1fr)); margin-bottom: var(--s5); }
  .hx-days-4 { grid-template-columns: repeat(4, minmax(60px, 1fr)); }
  .hx-day { padding-top: 12px; }
  .hx-day b { font-size: 21px; margin-bottom: 4px; }
  .hx-day small { font-size: 9.5px; letter-spacing: .03em; }
  .hx-weekstage, .hx-sec-after .hx-weekstage { grid-template-columns: minmax(0, 1fr); gap: var(--s5); min-height: 0; }
  .hx-weekcopy p { margin-bottom: var(--s4); }
  .hx-listen { padding: var(--s5) 18px var(--s4); }
  .hx-listen-t .levels { display: none; }

  .hx-cl { grid-template-columns: minmax(0, 1fr); }
  .hx-cl-l { border-right: 0; border-bottom: 1px solid var(--rule); }
  .hx-cl-l, .hx-cl-r { padding: 14px 16px 16px; }
  .hx-raw-lines { font-size: 12px; }
  .hx-raw-lines p { margin-bottom: 5px; }
  .hx-cl-rec .hx-band { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .hx-setups { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  .hx-setups > div { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 4px var(--s3); padding: 16px; }
  .hx-setups .ok { grid-row: span 2; margin: 0; }
  .hx-setups b { font-size: 21px; margin: 0; }
  .hx-setups-no { flex-direction: column; gap: var(--s2); }

  .hx-trust ul { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  .hx-plans { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  .hx-plan-pro { transform: none; }
  .hx-plan { padding: 24px 20px 22px; }
  .hx-badge { top: 20px; right: 18px; }

  .hx-table-wrap { overflow: visible; background: transparent; border: 0; border-radius: 0; }
  .hx-table { min-width: 0; font-size: 14px; }
  .hx-table, .hx-table thead, .hx-table tbody { display: block; }
  .hx-table thead { position: sticky; top: 60px; z-index: 3; }
  .hx-table thead tr, .hx-table tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hx-table thead th:first-child { display: none; }
  .hx-table thead th { position: static; padding: 12px 8px 10px; text-align: center; background: var(--paper); border-bottom: 1px solid var(--ink); }
  .hx-table thead th b { font-size: 20px; }
  .hx-table thead th span { font-size: 12px; }
  .hx-table tbody tr { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-md); margin-top: var(--s2); overflow: hidden; }
  .hx-table tbody th[scope="row"] { grid-column: 1 / -1; padding: 12px 14px 4px; border: 0; font-size: 14.5px; }
  .hx-table tbody td { padding: 6px 8px 12px; border: 0; text-align: center; font-size: 13.5px; }
  .hx-table tbody td.pro { background: transparent; color: var(--ink); font-weight: 500; }
  .hx-table tr.grp { background: transparent; border: 0; margin-top: var(--s5); }
  .hx-table tr.grp th { grid-column: 1 / -1; padding: 0; background: transparent; font-size: 21px; }
  .hx-table tr.cta { background: transparent; border: 0; }
  .hx-table tr.cta td:first-child { display: none; }
  .hx-table tr.cta td { padding: 12px 2px 0; }
  .hx-table tr.cta .btn { width: 100%; justify-content: center; padding: 0 8px; font-size: 13px; }
  .hx-price-sub p { font-size: 15px; }
  .hx-ft-head { display: none; }
  .hx-ft-row { grid-template-columns: minmax(0, 1fr); gap: var(--s2); padding: var(--s4) 0; }
  .hx-ft-row h3 { font-size: 22px; margin-bottom: 4px; }
  .hx-ft-k { display: block; font: 500 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
  .hx-two { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }

  .hx-final-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
  .hx-final h2 { font-size: 44px; }
  .hx-final .btn { width: 100%; justify-content: center; }

}
@media (prefers-reduced-motion: reduce) { .hx-wires path.on { animation: none; } }

/* phones: the hero demo is the short version — key points and dates — so the
   headline, the buttons and the demo still fit the first screen */
@media (max-width: 700px) {
  .hx-h1 .kicker { margin-bottom: 10px; }
  .hx-h1 .big { font-size: clamp(33px, 9.3vw, 44px); }
  .hx-h1 { margin-bottom: 12px; }
  .hx-sub { font-size: 15px; margin-bottom: 16px; }
  .hx-cta { flex-direction: row; justify-content: center; gap: var(--s4); }
  .hx-cta .btn { width: auto; height: 46px; padding: 0 20px; }
  .hx-cta .link { font-size: 15px; }
  .hx-proof { margin-top: var(--s3); }
  .hx-proof li:nth-child(n+3) { display: none; }
  .hx-demo-group { margin-top: var(--s5); }
  .hx-scenario { display: none; }
  .hx-win-bar .ex-m { display: inline; }
  .hx-win-bar .replay { display: none; }
  .hx-state { padding: 8px 14px; }
  .hx-donebar span:nth-child(4) { display: none; }
  .hx-hero-body { padding: 10px 14px 14px; }
  .hx-hero-rec .hx-rec-title p { font-size: 15px; }
  .hx-hero-cols { grid-template-columns: minmax(0, 1fr); }
  .hx-hero-cols .hx-c1, .hx-hero-cols .hx-next, .hx-hero-ghost .hx-band:first-child { display: none; }
  .hx-hero-cols > .hx-band { padding: 8px 0 0; }
  .hx-hero-cols .hx-c2 li:nth-child(4) { display: none; }
  .hx-hero-cols .hx-band p, .hx-hero-cols .hx-band li { font-size: 13px; }
}

/* short laptop screens: keep "a record, not a transcript" on one screen */
@media (min-width: 901px) and (max-height: 820px) { .hx-sec-record .hx-wrap { zoom: .88; } }
@media (min-width: 901px) and (max-height: 740px) { .hx-sec-record .hx-wrap { zoom: .8; } }

/* ---------- hero: your AI study companion (2026-10-13, home/_hero.html) ----------
   One short promise, then a phone you can press. .hxc-stage carries the
   stage as data-phase (idle → rec → back → done, set by site.js) and
   everything below reads it: the rings while it records, the sweep while it
   listens back, the four labels and their hairlines when the record is in.
   Every rule is scoped under .hxc so the phone page's resets (.hm :where)
   don't win. */
.hxc { position: relative; padding: clamp(16px, 3vh, 32px) 0 clamp(24px, 4vh, 48px); text-align: center; overflow-x: clip; }
.hxc .hxc-top { padding: 0 var(--gut); }
.hxc .hxc-top > * { animation: hx-rise .8s var(--ease) var(--intro) both; }
.hxc .hxc-top > :nth-child(2) { animation-delay: calc(var(--intro) + .08s); }
.hxc .hxc-top > :nth-child(3) { animation-delay: calc(var(--intro) + .16s); }
.hxc .hxc-top > :nth-child(n+4) { animation-delay: calc(var(--intro) + .24s); }
.hxc .hxc-h1 { margin: 0; font: 600 clamp(32px, 3.9vw, 54px)/1.02 var(--sans); letter-spacing: -.045em; color: var(--ink); }
.hxc .hxc-sub { max-width: 640px; margin: 14px auto 0; font-size: clamp(16.5px, 1.4vw, 19px); line-height: 1.45; letter-spacing: -.01em; color: var(--ink-3); text-wrap: balance; }
/* two lines on laptops; the Arabic line is shorter, so it gets a narrower box */
[dir="rtl"] .hxc .hxc-sub { max-width: 440px; }
.hxc .hxc-sub b { font-weight: 500; color: var(--ink); }
.hxc .hxc-cta { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 12px 22px; margin: 24px 0 0; }
.hxc .hxc-fine { margin: 0; font-size: 14px; color: var(--ink-3); }

.hxc .hxc-stage { position: relative; max-width: 1120px; margin: clamp(22px, 3.4vh, 34px) auto 0; padding: 0 var(--gut); animation: hx-rise .9s var(--ease) calc(var(--intro) + .34s) both; }
.hxc .hxc-stage::before { content: ""; position: absolute; inset: -30px 0 0; pointer-events: none; background-image: radial-gradient(var(--rule-2) 1px, transparent 1.3px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(50% 56% at 50% 48%, #000 12%, transparent 74%); mask-image: radial-gradient(50% 56% at 50% 48%, #000 12%, transparent 74%); }
.hxc .hxc-steps, .hxc .hxc-row { position: relative; }

/* 1 Record · 2 Listen · 3 Your notes: where you are, and a way to jump */
.hxc .hxc-steps { display: inline-flex; align-items: center; margin: 0; padding: 4px; list-style: none; border-radius: 999px; background: var(--sheet); box-shadow: 0 0 0 1px var(--rule); }
.hxc .hxc-steps li { display: flex; align-items: center; }
.hxc .hxc-steps li + li::before { content: ""; width: 16px; height: 1px; margin: 0 3px; background: var(--rule-2); }
.hxc .hxc-steps button { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 6px; border: 0; border-radius: 999px; background: none; font: 500 14px/1 var(--sans); color: var(--ink-3); white-space: nowrap; cursor: pointer; transition: background .35s var(--ease), color .35s var(--ease); }
.hxc .hxc-steps b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; box-shadow: 0 0 0 1px var(--rule-2); font: 500 11px/1 var(--mono); transition: background .35s var(--ease), color .35s var(--ease), box-shadow .35s; }
.hxc .hxc-steps button:hover, .hxc .hxc-steps button.was { color: var(--ink); }
.hxc .hxc-steps button[aria-current] { background: var(--ink); color: var(--paper); }
.hxc .hxc-steps button[aria-current] b { background: var(--paper); color: var(--ink); box-shadow: none; }

.hxc .hxc-row { display: grid; grid-template-columns: minmax(0, 1fr) 280px minmax(0, 1fr); gap: 64px; align-items: start; margin-top: 22px; perspective: 1400px; }
.hxc .hxc-side { display: grid; gap: 14px; padding-top: 138px; }
.hxc .hxc-l { justify-items: end; }
.hxc .hxc-r { justify-items: start; }

/* the four parts of the record: quiet until the record is in, then each
   one is wired to the phone and opens its part there */
.hxc .hxc-chip { position: relative; display: block; width: min(100%, 250px); padding: 15px 18px 16px; border: 0; border-radius: 18px; background: color-mix(in srgb, var(--sheet) 80%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 0 0 1px var(--rule); font: inherit; color: inherit; text-align: start; cursor: pointer; opacity: .5; transition: opacity .7s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), transform .3s var(--ease); }
.hxc .hxc-chip b { display: block; font: 600 15.5px/1.2 var(--sans); letter-spacing: -.01em; color: var(--ink); }
.hxc .hxc-chip span { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.3; color: var(--ink-3); }
.hxc .hxc-chip::before { content: ""; position: absolute; top: 50%; width: 64px; height: 1px; background: var(--rule-2); transform: scaleX(0); transition: transform .7s var(--ease), background .3s var(--ease); }
.hxc .hxc-chip::after { content: ""; position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--sheet); box-shadow: 0 0 0 1px var(--rule-2); opacity: 0; transition: opacity .4s var(--ease) .5s, background .3s var(--ease), box-shadow .3s var(--ease); }
.hxc .hxc-l .hxc-chip::before { inset-inline-start: 100%; transform-origin: right; }
.hxc .hxc-r .hxc-chip::before { inset-inline-end: 100%; transform-origin: left; }
[dir="rtl"] .hxc .hxc-l .hxc-chip::before { transform-origin: left; }
[dir="rtl"] .hxc .hxc-r .hxc-chip::before { transform-origin: right; }
.hxc .hxc-l .hxc-chip::after { inset-inline-start: calc(100% + 60px); }
.hxc .hxc-r .hxc-chip::after { inset-inline-end: calc(100% + 60px); }
.hxc .hxc-chip:hover { opacity: 1; transform: translateY(-1px); }
.hxc [data-phase="done"] .hxc-chip { opacity: 1; }
.hxc [data-phase="done"] .hxc-chip::before { transform: none; }
.hxc [data-phase="done"] .hxc-chip::after { opacity: 1; }
.hxc [data-phase="done"] .hxc-side .hxc-chip:nth-child(2), .hxc [data-phase="done"] .hxc-side .hxc-chip:nth-child(2)::before { transition-delay: .18s; }
.hxc [data-phase="done"] .hxc-r .hxc-chip, .hxc [data-phase="done"] .hxc-r .hxc-chip::before { transition-delay: .09s; }
.hxc [data-phase="done"] .hxc-r .hxc-chip:nth-child(2), .hxc [data-phase="done"] .hxc-r .hxc-chip:nth-child(2)::before { transition-delay: .27s; }
.hxc [data-phase="done"] .hxc-chip[aria-pressed="true"] { background: var(--sheet); box-shadow: 0 0 0 1.5px var(--ink), 0 18px 30px -22px rgba(10, 10, 12, .45); }
.hxc [data-phase="done"] .hxc-chip[aria-pressed="true"]::before { background: var(--ink); }
.hxc [data-phase="done"] .hxc-chip[aria-pressed="true"]::after { background: var(--tint); box-shadow: 0 0 0 1px var(--ink), 0 0 0 5px var(--glow); }

/* the phone: leans a little toward the pointer (--rx / --ry from site.js) */
.hxc .hxc-phone { position: relative; z-index: 2; width: 280px; height: 570px; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease); }
.hxc .hxc-body { position: relative; height: 100%; padding: 9px; border-radius: 48px; background: #0b0b0c; box-shadow: 0 0 0 1px rgba(128, 128, 128, .28), 0 50px 70px -40px rgba(10, 10, 12, .45); transition: box-shadow 1s var(--ease); }
.hxc [data-phase="done"] .hxc-body { box-shadow: 0 0 0 1px rgba(128, 128, 128, .28), 0 50px 70px -40px rgba(10, 10, 12, .45), 0 0 120px -6px var(--glow); }
.hxc .hxc-island { position: absolute; top: 19px; left: 50%; z-index: 3; width: 82px; height: 23px; margin-left: -41px; border-radius: 20px; background: #0b0b0c; }
.hxc .hxc-screen { position: relative; display: grid; height: 100%; overflow: hidden; border-radius: 39px; background: var(--paper); color: var(--ink); text-align: start; }
:root[data-theme="dark"] .hxc .hxc-body { background: #2a2a2e; }
:root[data-theme="dark"] .hxc .hxc-island { background: #000; }
.hxc .hxc-rings i { position: absolute; inset: 0; border-radius: 48px; box-shadow: 0 0 0 1px var(--ink); opacity: 0; }
.hxc [data-phase="rec"] .hxc-rings i { animation: hxc-ring 2.4s cubic-bezier(.2, .6, .3, 1) infinite; }
.hxc [data-phase="rec"] .hxc-rings i:nth-child(2) { animation-delay: .8s; }
.hxc [data-phase="rec"] .hxc-rings i:nth-child(3) { animation-delay: 1.6s; }
.hxc .hxc-scan { position: absolute; inset: 0 0 auto; height: 90px; pointer-events: none; background: linear-gradient(to bottom, transparent, var(--glow)); border-bottom: 1.5px solid var(--tint); opacity: 0; transform: translateY(-100%); }
.hxc [data-phase="back"] .hxc-scan { opacity: 1; animation: hxc-scan 1.3s cubic-bezier(.5, 0, .5, 1) infinite; }

.hxc [data-ph] { opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility 0s .4s; }
.hxc [data-ph].on { opacity: 1; visibility: visible; transition: opacity .6s var(--ease) .1s, visibility 0s; }
.hxc .hxc-scr { grid-area: 1 / 1; display: flex; flex-direction: column; min-width: 0; padding: 56px 16px 16px; }
.hxc .hxc-app-h { margin: 0; font: 600 22px/1.2 var(--sans); letter-spacing: -.02em; }
.hxc .hxc-app-d { margin: 6px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--ink-3); }
.hxc .hxc-pad { flex: 1; display: grid; align-items: center; margin-top: 16px; border-radius: 22px; background: var(--sheet); box-shadow: 0 0 0 1px var(--rule); text-align: center; }
.hxc .hxc-pad > div { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; padding: 20px 16px; }
.hxc .hxc-pad b { margin-top: 12px; font-size: 14px; font-weight: 600; }
.hxc .hxc-pad small { margin-top: 8px; font-size: 11.5px; line-height: 1.4; color: var(--ink-3); }
.hxc .hxc-disc { position: relative; display: grid; place-items: center; width: 84px; height: 84px; padding: 0; border: 0; border-radius: 50%; background: var(--sheet); box-shadow: 0 0 0 1.5px var(--rule-2), 0 14px 22px -14px rgba(10, 10, 12, .35); cursor: pointer; transition: transform .25s var(--ease); }
.hxc .hxc-disc:hover { transform: scale(1.05); }
.hxc .hxc-disc:active { transform: scale(.96); }
.hxc .hxc-disc i { width: 31px; height: 31px; border-radius: 50%; background: var(--rec); }
.hxc .hxc-disc::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 1px var(--rec); opacity: 0; animation: hxc-halo 2.2s ease-out infinite; }
.hxc .hxc-stop i { width: 24px; height: 24px; border-radius: 7px; }
.hxc .hxc-stop::after { animation: none; }
.hxc .hxc-live { display: inline-flex; align-items: center; gap: 7px; font: 500 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--rec); }
.hxc .hxc-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--rec); animation: hxc-blink 1.4s ease-in-out infinite; }
.hxc .hxc-tm { margin: 12px 0 14px; font: 500 36px/1 var(--mono); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.hxc .hxc-lv { display: flex; align-items: center; gap: 3px; height: 30px; margin-bottom: 22px; }
.hxc .hxc-lv i { width: 3px; height: 100%; border-radius: 2px; background: var(--ink-2); transform: scaleY(.2); animation: hxc-lv 1s ease-in-out infinite alternate; }
.hxc .hxc-spin { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--rule-2); border-top-color: var(--ink); animation: hxc-spin .8s linear infinite; }
.hxc .hxc-tick { display: grid; }
.hxc .hxc-tick small { grid-area: 1 / 1; opacity: 0; }
.hxc .on > .hxc-tick small { animation: hxc-tick 1.5s linear both; }
.hxc .on > .hxc-tick small:nth-child(2) { animation-delay: .5s; }
.hxc .on > .hxc-tick small:nth-child(3) { animation-delay: 1s; animation-name: hxc-tick-last; }
.hxc .hxc-parts + .hxc-keep { margin-top: auto; padding-top: 14px; }
.hxc .hxc-keep { margin: 14px 0 0; text-align: center; font-size: 11px; line-height: 1.4; color: var(--ink-3); }
.hxc .hxc-lab { display: block; font: 500 9.5px/1.2 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); }
.hxc .hxc-title { margin: 8px 0 0; font: 600 18px/1.25 var(--sans); letter-spacing: -.015em; }
.hxc .hxc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 9px; margin: 8px 0 0; font: 500 10px/1.4 var(--mono); color: var(--ink-3); }
.hxc .hxc-ok { display: inline-flex; align-items: center; gap: 4px; color: var(--ok); }
.hxc .hxc-ok .ic { width: 11px; height: 11px; }
.hxc .hxc-parts { display: grid; margin-top: 14px; }
.hxc .hxc-part { grid-area: 1 / 1; align-self: start; padding: 15px 15px 17px; border-radius: 18px; background: var(--sheet); box-shadow: 0 0 0 1px var(--rule); font-size: 13px; line-height: 1.5; color: var(--ink-2); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .3s var(--ease), transform .45s var(--ease), visibility 0s .3s; }
.hxc .hxc-part.sel { opacity: 1; visibility: visible; transform: none; transition: opacity .45s var(--ease) .08s, transform .5s var(--ease) .08s, visibility 0s; }
.hxc .hxc-part .hxc-lab { margin-bottom: 9px; }
.hxc .hxc-part p, .hxc .hxc-part ul { margin: 0; padding: 0; list-style: none; }
.hxc .hxc-part li { position: relative; padding-inline-start: 14px; }
.hxc .hxc-part li + li { margin-top: 7px; }
.hxc .hxc-part li::before { content: ""; position: absolute; inset-inline-start: 0; top: .72em; width: 6px; height: 1.5px; background: var(--ink-4); }
.hxc .hxc-dates li { display: flex; gap: 10px; padding: 0; }
.hxc .hxc-dates li::before { display: none; }
.hxc .hxc-dates b { flex: none; width: 66px; font: 500 11px/1.75 var(--mono); color: var(--ink); }

/* laptop: like a product page that opens on its promise. The title holds
   in the middle of the first screen with the AI Tutor (home/_tutor.html,
   since 2026-10-16; it was the phone) coming up from the bottom edge; as
   you start to scroll, the title fades where it stands. site.js adds
   .is-live and sets --t (the title's opacity) from the scroll position;
   without it the hero is simply stacked, as on phones. */
@media (min-width: 901px) {
  .hxc.is-live { padding-top: 0; }
  .hxc.is-live .hxc-top { position: sticky; top: 60px; z-index: 0; display: flex; flex-direction: column; justify-content: center; min-height: calc(100vh - 60px - 30vh); min-height: calc(100svh - 60px - 30svh); opacity: var(--t, 1); transform: scale(calc(.95 + .05 * var(--t, 1))); filter: blur(calc((1 - var(--t, 1)) * 8px)); will-change: opacity, transform; }
  .hxc.is-live.is-past .hxc-top { visibility: hidden; }
  .hxc.is-live .hxc-h1 { font-size: clamp(40px, 4.6vw, 66px); }
  .hxc.is-live .hxc-sub { margin-top: 18px; font-size: clamp(17px, 1.45vw, 20px); }
  .hxc.is-live .hxc-cta { margin-top: 28px; }
}

@keyframes hxc-ring { 0% { opacity: .26; transform: scale(1); } 100% { opacity: 0; transform: scale(1.26, 1.13); } }
@keyframes hxc-scan { from { transform: translateY(-100%); } to { transform: translateY(600px); } }
@keyframes hxc-halo { 0% { opacity: .55; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes hxc-blink { 50% { opacity: .35; } }
@keyframes hxc-lv { to { transform: scaleY(1); } }
@keyframes hxc-spin { to { transform: rotate(360deg); } }
@keyframes hxc-tick { 0%, 33% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes hxc-tick-last { 0%, 100% { opacity: 1; } }

@media (max-width: 900px) {
  .hxc .hxc-row { grid-template-columns: 1fr 1fr; gap: 10px; justify-items: stretch; margin-top: 22px; perspective: none; }
  .hxc .hxc-side { display: contents; }
  .hxc .hxc-phone { grid-column: 1 / -1; justify-self: center; order: -1; width: 264px; height: 538px; margin-bottom: 12px; }
  .hxc .hxc-scr { padding: 54px 15px 15px; }
  .hxc .hxc-chip { width: 100%; padding: 13px 14px 14px; border-radius: 16px; }
  .hxc .hxc-chip b { font-size: 14.5px; }
  .hxc .hxc-chip span { font-size: 12.5px; }
  .hxc .hxc-chip::before, .hxc .hxc-chip::after { display: none; }
  .hxc .hxc-steps button { height: 32px; padding: 0 11px 0 5px; font-size: 13px; gap: 6px; }
  .hxc .hxc-steps li + li::before { width: 8px; margin: 0 2px; }
}
@media (max-width: 700px) {
  .hxc { padding: 20px 0 48px; }
  .hxc .hxc-top, .hxc .hxc-stage { padding: 0 20px; }
  .hxc .hxc-h1 { font-size: clamp(32px, 9.4vw, 40px); }
  .hxc .hxc-cta { flex-direction: column; margin-top: 24px; }
  .hxc .hxc-stage { max-width: 420px; }
  /* phones (2026-10-14): like the laptop hero. The title sits lower, centred in the first screen
     with room above it, and fades where it stands as you scroll, as the AI Tutor comes up.
     site.js adds .is-live-m and sets --t (the title's opacity) from the scroll position. */
  .hxc.is-live-m { padding-top: 0; }
  .hxc.is-live-m .hxc-top { position: sticky; top: 72px; z-index: 0; display: flex; flex-direction: column; justify-content: center; min-height: calc(100svh - 72px - 16svh); padding-bottom: 4svh;
    opacity: var(--t, 1); transform: translateY(calc((1 - var(--t, 1)) * -18px)) scale(calc(.95 + .05 * var(--t, 1))); filter: blur(calc((1 - var(--t, 1)) * 8px)); will-change: opacity, transform; }
  .hxc.is-live-m.is-past .hxc-top { visibility: hidden; }
  .hxc.is-live-m .hxc-h1 { font-size: clamp(36px, 10.6vw, 46px); }
  .hxc.is-live-m .hxc-sub { margin-top: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .hxc .hxc-top > *, .hxc .hxc-stage, .hxc .hxc-disc::after, .hxc .hxc-rings i, .hxc .hxc-scan, .hxc .hxc-lv i, .hxc .hxc-live i { animation: none !important; }
  .hxc .hxc-phone { transform: none; }
  .hxc .hxc-tick small:last-child { opacity: 1; }
}

/* ---------- AI Tutor (2026-10-16, home/_tutor.html) ----------
   The first thing under the title: what the tutor does and its three-step
   loop beside its own screen, which plays one example lesson. On laptops it
   rises into the first screen as the title fades (the place the phone used
   to take; .is-live above); the phone follows below. Phones stack: copy,
   the screen, then the buttons. site.js [data-hxt] drives the lesson. */
.hxc .hxt { position: relative; z-index: 1; padding: clamp(28px, 5vh, 56px) var(--gut) 0; text-align: start; }
.hxc .hxt-in { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-areas: "copy win" "cta win"; column-gap: clamp(32px, 5vw, 72px); align-items: center; }
.hxc .hxt-copy { grid-area: copy; align-self: end; }
.hxc .hxt-win { grid-area: win; }
.hxc .hxt-cta { grid-area: cta; align-self: start; margin-top: 26px; }
.hxc .hxt-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0; font: 500 12px/1.2 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.hxc .hxt-mark { position: relative; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; box-shadow: 0 0 0 1px var(--rule-2); }
.hxc .hxt-mark i { width: 10px; height: 10px; border-radius: 50%; background: var(--ink); animation: hxt-breathe 3.6s ease-in-out infinite; }
.hxc .hxt-mark::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border-top: 1.5px solid var(--ink); animation: hxt-spin 4.5s linear infinite; }
.hxc .hxt-h { margin: 16px 0 0; }
.hxc .hxt-lede { max-width: 460px; margin: 18px 0 0; font-size: 18px; line-height: 1.55; color: var(--ink-2); }
.hxc .hxt-loop { display: grid; gap: 4px; max-width: 420px; margin: 26px 0 0; padding: 0; list-style: none; }
.hxc .hxt-loop li { display: flex; align-items: center; gap: 14px; padding: 11px 14px; border-radius: 14px; color: var(--ink-3); transition: background .45s var(--ease), color .45s var(--ease), box-shadow .45s var(--ease); }
.hxc .hxt-loop b { font: 500 12px/1 var(--mono); letter-spacing: .06em; color: var(--ink-4); transition: color .45s var(--ease); }
.hxc .hxt-loop li.on { background: var(--sheet); color: var(--ink); box-shadow: 0 0 0 1px var(--rule); }
.hxc .hxt-loop li.on b { color: var(--ink); }
.hxc .hxt-loop li.was { color: var(--ink-2); }
.hxc .hxt-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.hxc .hxt-fine { margin: 14px 0 0; font-size: 14px; color: var(--ink-3); }

/* the tutor's own screen */
.hxc .hxt-win { position: relative; overflow: hidden; border-radius: 26px; background: var(--sheet); box-shadow: var(--shadow-sheet); }
.hxc .hxt-win::before { content: ""; position: absolute; inset: 56px 0 0; pointer-events: none; background-image: radial-gradient(var(--rule-2) 1px, transparent 1.3px); background-size: 22px 22px; opacity: .55; -webkit-mask-image: radial-gradient(60% 50% at 50% 40%, #000, transparent 75%); mask-image: radial-gradient(60% 50% at 50% 40%, #000, transparent 75%); }
.hxc .hxt-bar { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--rule); }
.hxc .hxt-new { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; box-shadow: 0 0 0 1px var(--rule-2); color: var(--ink-3); }
.hxc .hxt-new svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.hxc .hxt-bar b { overflow: hidden; font: 600 15px/1.2 var(--brand); letter-spacing: -.01em; text-align: center; white-space: nowrap; text-overflow: ellipsis; }
.hxc .hxt-prog { display: inline-flex; gap: 4px; }
.hxc .hxt-prog i { width: 16px; height: 4px; border-radius: 4px; background: var(--rule-2); transition: background .4s var(--ease); }
.hxc .hxt-prog[data-prog="1"] i:nth-child(1), .hxc .hxt-prog[data-prog="2"] i:nth-child(-n+2), .hxc .hxt-prog[data-prog="3"] i { background: var(--ink); }
.hxc .hxt-body { position: relative; height: 520px; }
/* the start screen: the orb and the greeting above the box, both in the middle */
.hxc .hxt-start { position: absolute; left: 20px; right: 20px; bottom: calc(50% + 34px); display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 0 20px; transition: opacity .45s var(--ease), transform .55s var(--ease); }
.hxc .hxt-body:not(.is-start) .hxt-start { opacity: 0; transform: translateY(-16px); pointer-events: none; }
.hxc .hxt-orb { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; box-shadow: 0 0 0 1px var(--rule-2); }
.hxc .hxt-orb i { width: 18px; height: 18px; border-radius: 50%; background: var(--ink); animation: hxt-breathe 3.6s ease-in-out infinite; }
.hxc .hxt-greet { margin: 0; font: 600 26px/1.2 var(--sans); letter-spacing: -.03em; text-align: center; text-wrap: balance; }
.hxc .hxt-thread { position: absolute; left: 20px; right: 20px; top: 0; bottom: 150px; display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; overflow: hidden; padding: 30px 2px 2px; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 56px); mask-image: linear-gradient(to bottom, transparent 0, #000 56px); transition: opacity .4s var(--ease); }
.hxc .hxt-thread.fade { opacity: 0; }
.hxc .hxt-me { align-self: flex-end; max-width: 80%; padding: 9px 15px; border-radius: 18px 18px 6px 18px; background: var(--paper-2); box-shadow: 0 0 0 1px var(--rule); font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
[dir="rtl"] .hxc .hxt-me { border-radius: 18px 18px 18px 6px; }
.hxc .hxt-ai { max-width: 560px; font-size: 15.5px; line-height: 1.6; color: var(--ink); }
.hxc .hxt-ai p { margin: 0; }
.hxc .hxt-ai strong { font-weight: 600; }
.hxc .hxt-ask { margin-top: 6px; font-weight: 600; }
.hxc .hxt-msg { animation: hxt-in .45s var(--ease) both; }
.hxc .hxt-tag { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; padding: 3px 10px 3px 8px; border-radius: 999px; background: var(--ink); color: var(--paper); font: 500 11px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.hxc .hxt-tag svg, .hxc .hxt-got svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.hxc .hxt-tag svg { width: 12px; height: 12px; stroke-width: 2.4; }
.hxc .hxt-typing { display: inline-flex; gap: 5px; padding: 8px 0; }
.hxc .hxt-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); opacity: .3; animation: hxt-dot 1.1s infinite ease-in-out; }
.hxc .hxt-typing i:nth-child(2) { animation-delay: .15s; }
.hxc .hxt-typing i:nth-child(3) { animation-delay: .3s; }
.hxc .hxt-got { display: inline-flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 16px 10px 10px; border-radius: 999px; background: var(--sheet); box-shadow: var(--shadow-sheet); font-weight: 600; animation: hxt-in .5s var(--ease) both; }
.hxc .hxt-got b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--paper); }
.hxc .hxt-got svg { width: 15px; height: 15px; stroke-width: 2.6; }
.hxc .hxt-go { margin-top: 12px; height: 42px; padding: 0 18px; font-size: 14.5px; }

/* the laptop page (2026-10-21): the screen is labelled "Example lesson",
   lit along its top edge, and sits on a soft light and faint squared
   paper; the tags for a wrong answer are outlined, "Correct" is solid */
.hx-desk .hxc .hxt { isolation: isolate; }
.hxc .hxt-bg { position: absolute; inset: -40px 0 0; z-index: -1; pointer-events: none; background: radial-gradient(52% 50% at 64% 48%, color-mix(in srgb, var(--ink) 7%, transparent), transparent 72%); }
.hxc .hxt-bg i { position: absolute; inset: 0; background-image: linear-gradient(color-mix(in srgb, var(--ink) 5.5%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--ink) 5.5%, transparent) 1px, transparent 1px); background-size: 28px 28px; background-position: center; -webkit-mask-image: radial-gradient(46% 52% at 64% 50%, #000, rgba(0, 0, 0, .35) 55%, transparent 82%); mask-image: radial-gradient(46% 52% at 64% 50%, #000, rgba(0, 0, 0, .35) 55%, transparent 82%); }
.hx-desk .hxc .hxt-win::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; padding: 1px; background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 22%, transparent), transparent 30%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; }
:root[data-theme="dark"] .hx-desk .hxc .hxt-win { background: linear-gradient(180deg, #19191c, #141416 70%); box-shadow: 0 0 0 1px rgba(255, 255, 255, .07), 0 60px 120px -50px #000; }
.hxc .hxt-label { padding: 4px 10px; border-radius: 999px; box-shadow: 0 0 0 1px var(--rule-2); font: 500 11px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.hxc .hxt-tags, .hxc .hxt-ai .hxt-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 9px; }
.hxc .hxt-tags .hxt-tag { margin: 0; }
.hxc .hxt-tag-soft { background: transparent; box-shadow: 0 0 0 1px var(--rule-2); color: var(--ink-2); }

/* the box: big in the middle of the start screen, then it glides to the
   bottom when the question is sent (.is-start comes off). It's a real
   field; the example text is typed into a layer over it (.hxt-ghost). A
   thin light runs round its edge while it types. */
@property --hxt-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.hxc .hxt-wrap { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 2; transition: bottom .85s cubic-bezier(.65, 0, .25, 1); }
.hxc .hxt-body.is-start .hxt-wrap { bottom: calc(50% - 112px); }
.hxc .hxt-wrap::before { content: ""; position: absolute; inset: 18% 8% -14%; border-radius: 48px; background: radial-gradient(closest-side, color-mix(in srgb, var(--ink) 16%, transparent), transparent); filter: blur(26px); opacity: 0; transition: opacity .7s var(--ease); pointer-events: none; }
.hxc .hxt-wrap.is-live::before { opacity: 1; }
.hxc .hxt-box { position: relative; display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 18px 14px 14px 22px; border-radius: 28px; background: var(--sheet); box-shadow: 0 0 0 1px var(--rule-2), 0 1px 2px rgba(10, 10, 12, .04), 0 26px 50px -30px rgba(10, 10, 12, .32); cursor: text; transition: box-shadow .3s var(--ease); }
:root[data-theme="dark"] .hxc .hxt-box { box-shadow: 0 0 0 1px var(--rule-2), 0 30px 70px -30px rgba(0, 0, 0, .95); }
.hxc .hxt-box:focus-within { box-shadow: 0 0 0 1.5px var(--ink), 0 26px 50px -30px rgba(10, 10, 12, .32); }
.hxc .hxt-box::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: conic-gradient(from var(--hxt-a), transparent 0deg 190deg, color-mix(in srgb, var(--ink) 75%, transparent) 300deg, transparent 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: 0; transition: opacity .5s var(--ease); animation: hxt-turn 2.6s linear infinite; pointer-events: none; }
.hxc .hxt-box.is-typing::before { opacity: 1; }
.hxc .hxt-field { display: grid; }
.hxc .hxt-field > * { grid-area: 1 / 1; }
.hxc .hxt-field textarea { display: block; width: 100%; height: 30px; min-height: 0; max-height: 120px; margin: 0; padding: 0; border: 0; border-radius: 0; outline: 0; background: transparent; box-shadow: none; resize: none; overflow: hidden; font: 400 19px/1.55 var(--sans); letter-spacing: -.012em; color: var(--ink); }
.hxc .hxt-field textarea::placeholder { color: var(--ink-4); opacity: 1; }
.hxc .hxt-box.has-ghost textarea::placeholder { color: transparent; }
.hxc .hxt-ghost { pointer-events: none; font: 400 19px/1.55 var(--sans); letter-spacing: -.012em; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.hxc .hxt-caret::after { content: ""; display: inline-block; width: 2px; height: 1.12em; margin-inline-start: 1px; vertical-align: -.19em; border-radius: 1px; background: var(--ink); animation: hxt-blink 1.05s steps(2) infinite; }
.hxc .hxt-box-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hxc .hxt-styles { display: flex; gap: 6px; min-width: 0; overflow: hidden; padding: 1px; }
.hxc .hxt-styles button { display: inline-flex; align-items: center; gap: 6px; height: 32px; margin: 0; padding: 0 12px 0 10px; border: 0; border-radius: 999px; background: transparent; box-shadow: 0 0 0 1px var(--rule-2); font: 500 13px/1 var(--sans); color: var(--ink-3); white-space: nowrap; cursor: pointer; transition: color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease); }
.hxc .hxt-styles svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hxc .hxt-styles button:hover { color: var(--ink); box-shadow: 0 0 0 1px var(--ink-4); }
.hxc .hxt-styles button[aria-pressed="true"] { background: var(--ink); color: var(--paper); box-shadow: 0 0 0 1px var(--ink); }
.hxc .hxt-send { flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: var(--ink); color: var(--paper); opacity: .16; cursor: pointer; transition: opacity .25s var(--ease), transform .2s var(--ease); }
.hxc .hxt-send svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hxc .hxt-box.has-text .hxt-send { opacity: 1; }
.hxc .hxt-box.sent .hxt-send { transform: scale(.86); }

@keyframes hxt-breathe { 50% { transform: scale(1.18); } }
@keyframes hxt-spin { to { transform: rotate(360deg); } }
@keyframes hxt-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes hxt-dot { 40% { opacity: .9; transform: translateY(-3px); } }
@keyframes hxt-blink { 50% { opacity: 0; } }
@keyframes hxt-turn { to { --hxt-a: 360deg; } }

@media (max-width: 900px) {
  .hxc .hxt-in { grid-template-columns: 1fr; grid-template-areas: "copy" "win" "cta"; row-gap: 26px; }
  .hxc .hxt-copy { align-self: auto; }
  .hxc .hxt-cta { margin-top: 0; }
}
@media (max-width: 700px) {
  .hxc .hxt { padding: 40px 20px 0; text-align: center; }
  .hxc .hxt-copy { display: flex; flex-direction: column; align-items: center; }
  .hxc .hxt-lede { font-size: 16.5px; }
  .hxc .hxt-loop { display: none; }
  .hxc .hxt-win { text-align: start; }
  .hxc .hxt-body { height: 470px; }
  .hxc .hxt-wrap { left: 12px; right: 12px; bottom: 12px; }
  .hxc .hxt-body.is-start .hxt-wrap { bottom: calc(50% - 104px); }
  .hxc .hxt-start { bottom: calc(50% + 30px); }
  .hxc .hxt-greet { font-size: 22px; }
  .hxc .hxt-thread { left: 14px; right: 14px; bottom: 130px; }
  .hxc .hxt-box { gap: 12px; padding: 15px 10px 10px 16px; border-radius: 24px; }
  .hxc .hxt-field textarea, .hxc .hxt-ghost { font-size: 17px; }
  .hxc .hxt-field textarea { height: 26px; }
  .hxc .hxt-styles button { height: 30px; padding: 0 10px 0 9px; font-size: 12.5px; }
  .hxc .hxt-send { width: 36px; height: 36px; }
  .hxc .hxt-styles { flex-wrap: nowrap; overflow: hidden; -webkit-mask-image: linear-gradient(to right, #000 75%, transparent); mask-image: linear-gradient(to right, #000 75%, transparent); }
  [dir="rtl"] .hxc .hxt-styles { -webkit-mask-image: linear-gradient(to left, #000 75%, transparent); mask-image: linear-gradient(to left, #000 75%, transparent); }
  .hxc .hxt-btns { justify-content: center; }
  .hxc .hxt-btns .btn { flex: 1 1 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .hxc .hxt-mark i, .hxc .hxt-mark::after, .hxc .hxt-orb i, .hxc .hxt-msg, .hxc .hxt-got, .hxc .hxt-caret::after, .hxc .hxt-box::before, .hxc .hxt-typing i { animation: none !important; }
  .hxc .hxt-wrap, .hxc .hxt-start { transition: none; }
}

/* ---------- the dark page: pitch black, small soft lights (2026-10-21, laptop, dark theme) ----------
   After Vercel, kept minimal: the page is pitch black, and here and there
   a small, soft pool of white light sits behind a section, with no rim.
   Each section's ::before covers it, behind its content (the section
   isolates it), and draws two lights: --glow1-at/--glow1-r (the main one, behind the
   visual) and --glow2-at/--glow2-r (a smaller one off to the side).
   (Not --s1/--s2: those are the site's spacing steps.) */
.hx-desk { overflow-x: clip; }
:root[data-theme="dark"]:has(.hx-desk), :root[data-theme="dark"] .hx-desk .hxd { --paper: #000; }
:root[data-theme="dark"] .hx-desk :is(.hx-sec-record, .hx-sec-plans) { background: transparent; }
:root[data-theme="dark"] .hx-desk :is(.hxc, .hxc .hxt, .hxr, .hxq, .hxe, .hx-sec-uc, .hx-sec-calls, .hx-sec-voices, .hx-sec-plans, .hx-final) { position: relative; isolation: isolate; }
:root[data-theme="dark"] .hx-desk :is(.hxc, .hxc .hxt, .hxr, .hxq, .hxe, .hx-sec-uc, .hx-sec-calls, .hx-sec-voices, .hx-sec-plans, .hx-final)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle var(--glow1-r, 340px) at var(--glow1-at, 70% 50%), rgba(255, 255, 255, .085), rgba(255, 255, 255, .036) 38%, rgba(255, 255, 255, .01) 72%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(circle var(--glow2-r, 170px) at var(--glow2-at, 14% 24%), rgba(255, 255, 255, .06), rgba(255, 255, 255, .02) 46%, rgba(255, 255, 255, 0) 100%);
  /* fade out at the section's top and bottom, so a light never ends in a line */
  -webkit-mask-image: linear-gradient(transparent, #000 140px, #000 calc(100% - 140px), transparent);
  mask-image: linear-gradient(transparent, #000 140px, #000 calc(100% - 140px), transparent);
}
:root[data-theme="dark"] .hx-desk .hxc { --glow1-at: 50% 250px; --glow1-r: 420px; --glow2-at: 88% 560px; --glow2-r: 160px; }
:root[data-theme="dark"] .hx-desk .hxc .hxt { --glow1-at: 72% 56%; --glow1-r: 380px; --glow2-at: 10% 18%; --glow2-r: 170px; }
:root[data-theme="dark"] .hx-desk .hxr { --glow1-at: 70% 50%; --glow1-r: 340px; --glow2-at: 14% 86%; --glow2-r: 160px; }
:root[data-theme="dark"] .hx-desk .hxq { --glow1-at: 24% 62%; --glow1-r: 320px; --glow2-at: 86% 18%; --glow2-r: 170px; }
:root[data-theme="dark"] .hx-desk .hxe { --glow1-at: 60% 60%; --glow1-r: 400px; --glow2-at: 8% 30%; --glow2-r: 160px; }
:root[data-theme="dark"] .hx-desk .hx-sec-uc { --glow1-at: 50% 62%; --glow1-r: 340px; --glow2-at: 90% 24%; --glow2-r: 150px; }
:root[data-theme="dark"] .hx-desk .hx-sec-calls { --glow1-at: 70% 52%; --glow1-r: 320px; --glow2-at: 10% 72%; --glow2-r: 170px; }
:root[data-theme="dark"] .hx-desk .hx-sec-voices { --glow1-at: 50% 56%; --glow1-r: 360px; --glow2-at: 88% 20%; --glow2-r: 150px; }
:root[data-theme="dark"] .hx-desk .hx-sec-plans { --glow1-at: 50% 56%; --glow1-r: 420px; --glow2-at: 10% 14%; --glow2-r: 170px; }
:root[data-theme="dark"] .hx-desk .hx-final { --glow1-at: 50% 50%; --glow1-r: 380px; --glow2-at: 86% 82%; --glow2-r: 150px; }
/* the AI Tutor's own light is the glow now; the squared paper stays */
:root[data-theme="dark"] .hx-desk .hxc .hxt-bg { background: none; }

/* The record agent's phone glows bright white in the dark theme, not gold:
   its halo, the scan line and the dot on the open part (laptop and phone pages). */
:root[data-theme="dark"] .hxr { --tint: #ffffff; --glow: rgba(255, 255, 255, .34); }

/* ---------- record agent (2026-10-16, home/_recorder.html) ----------
   The phone you can press, as its own section under "But wait, there's
   more.": a short header and the four parts of the record on the left,
   the phone on the right. It reuses the hero's .hxc phone styles; the
   section carries data-phase too (site.js), because the four labels sit
   outside the stage now. Phones stack: header, phone, the four labels. */
.hxc.hxr { padding: clamp(40px, 7vh, 80px) var(--gut) clamp(64px, 10vh, 112px); text-align: start; }
.hxr .hxr-in { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "copy stage" "parts stage"; column-gap: clamp(32px, 6vw, 96px); align-items: center; }
.hxr .hxr-copy { grid-area: copy; align-self: end; }
.hxr .hxr-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 6px 13px 6px 10px; border-radius: 999px; background: var(--sheet); box-shadow: 0 0 0 1px var(--rule); font: 500 12px/1.2 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); }
.hxr .hxr-eyebrow .ic { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hxr .hxr-h { margin: 18px 0 0; }
.hxr .hxr-sub { max-width: 460px; margin: 16px 0 0; font-size: 18px; line-height: 1.55; color: var(--ink-2); }
.hxr .hxr-parts { grid-area: parts; align-self: start; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 460px; margin-top: 30px; }
.hxr .hxc-chip { width: 100%; }
.hxr .hxc-chip::before, .hxr .hxc-chip::after { display: none; }
.hxr[data-phase="done"] .hxc-chip { opacity: 1; }
.hxr[data-phase="done"] .hxc-chip[aria-pressed="true"] { background: var(--sheet); box-shadow: 0 0 0 1.5px var(--ink), 0 18px 30px -22px rgba(10, 10, 12, .45); }
.hxc.hxr .hxc-stage { grid-area: stage; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; animation: none; }
.hxr .hxc-row { display: block; margin-top: 22px; }
.hxr .hxc-phone { margin: 0 auto; }

/* ---------- what AfterCall does (2026-10-16, home/_pillars.html) ----------
   One line, then the AI Tutor, the record agent and Exam Coach in three
   quiet boxes: a big phrase, a short line. */
.hxq { padding: clamp(24px, 4vh, 48px) var(--gut) clamp(72px, 11vh, 128px); }
.hxq .hxq-in { max-width: 1120px; margin: 0 auto; }
.hxq .hxq-head { max-width: 760px; margin: 0 auto; text-align: center; }
.hxq .hxq-head .h2 { margin-top: 14px; }
.hxq .hxq-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 44px; }
.hxq .hxq-box { display: flex; flex-direction: column; padding: 26px 26px 28px; border-radius: 22px; background: var(--sheet); box-shadow: 0 0 0 1px var(--rule); }
.hxq .hxq-big { margin: 22px 0 0; font: 400 clamp(40px, 4vw, 54px)/1 var(--serif); letter-spacing: -.01em; color: var(--ink); }
.hxq .hxq-p { margin: 12px 0 0; font-size: 16px; line-height: 1.55; color: var(--ink-2); }

@media (max-width: 900px) {
  .hxr .hxr-in { grid-template-columns: 1fr; grid-template-areas: "copy" "stage" "parts"; row-gap: 24px; }
  .hxr .hxr-copy { align-self: auto; text-align: center; display: flex; flex-direction: column; align-items: center; }
  .hxr .hxr-sub { font-size: 16.5px; }
  .hxr .hxr-parts { max-width: 420px; width: 100%; margin: 0 auto; }
  .hxq .hxq-grid { grid-template-columns: 1fr; gap: 10px; margin-top: 30px; max-width: 520px; margin-inline: auto; }
  .hxq .hxq-box { padding: 22px 22px 24px; }
  .hxq .hxq-big { margin-top: 14px; font-size: 42px; }
}
@media (max-width: 700px) {
  .hxc.hxr { padding: 40px 20px 64px; }
  .hxc.hxr .hxc-stage { padding: 0; max-width: none; }
  .hxq { padding: 16px 20px 72px; }
}

/* ---------- the dark band: how it records, and the week after (2026-10-13, home/_works.html) ----------
   One dark block in both themes: the tokens are redefined on .hxd, so
   everything inside reads them as usual. Top to bottom: the promise over a
   horizon line, five facts, then what a record catches, three lines that
   play in turn beside a line drawing (canvas, site.js). --a is how far the band
   has scrolled into view (site.js); it lifts the title and the horizon. */
.hxd { --paper: #0a0a0b; --sheet: #161618; --ink: #f4f4f5; --ink-2: #c7c7cc; --ink-3: #8e8e96; --ink-4: #5c5c64; --rule: rgba(255, 255, 255, .09); --rule-2: rgba(255, 255, 255, .16); position: relative; overflow: clip; background: var(--paper); color: var(--ink); color-scheme: dark; text-align: start; }
.hxd::before { content: ""; position: absolute; inset: 0 0 auto; height: 760px; pointer-events: none; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 7px); -webkit-mask-image: radial-gradient(46% 62% at 50% 46%, #000, transparent 78%); mask-image: radial-gradient(46% 62% at 50% 46%, #000, transparent 78%); }
.hxd .hxd-wrap { position: relative; max-width: 1200px; margin: 0 auto; padding: 0 var(--gut); }

.hxd .hxd-head { position: relative; padding: clamp(88px, 11vw, 150px) 0 clamp(150px, 17vw, 240px); text-align: center; }
.hxd .hxd-title { margin: 0; font: 400 clamp(15px, 1.25vw, 17px)/1.4 var(--sans); color: var(--ink-3); opacity: calc(var(--a, 1) * 1.5 - .5); transform: translateY(calc((1 - var(--a, 1)) * 36px)); }
.hxd .hxd-title em { display: block; margin-top: 12px; font: 600 clamp(36px, 5.4vw, 78px)/1 var(--sans); font-style: normal; letter-spacing: -.045em; color: var(--ink); text-wrap: balance; }
/* the horizon: the top of a very large circle, lit along its edge */
.hxd .hxd-arcbox { position: absolute; left: 50%; bottom: 0; width: min(1560px, 134vw); height: clamp(116px, 13.5vw, 196px); overflow: hidden; pointer-events: none; transform: translateX(-50%); -webkit-mask-image: radial-gradient(50% 100% at 50% 0, #000 52%, transparent 100%); mask-image: radial-gradient(50% 100% at 50% 0, #000 52%, transparent 100%); }
.hxd .hxd-arc { position: absolute; left: 0; top: 2px; width: 100%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(50% 9% at 50% 0, rgba(255, 255, 255, .1), transparent 70%); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .95), inset 0 0 0 1px rgba(255, 255, 255, .22), inset 0 26px 44px -26px rgba(255, 255, 255, .4), inset 0 80px 120px -64px rgba(255, 255, 255, .42); opacity: var(--a, 1); transform: translateY(calc((1 - var(--a, 1)) * 90px)); }

.hxd .hxd-facts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0 0 clamp(56px, 7vw, 96px); list-style: none; border-bottom: 1px solid var(--rule); }
.hxd .hxd-facts li { padding: 0 22px; }
.hxd .hxd-facts li:nth-child(2) { transition-delay: .07s; }
.hxd .hxd-facts li:nth-child(3) { transition-delay: .14s; }
.hxd .hxd-facts li:nth-child(4) { transition-delay: .21s; }
.hxd .hxd-facts li:nth-child(5) { transition-delay: .28s; }
.hxd .hxd-facts .ic { display: block; width: 20px; height: 20px; margin-bottom: clamp(28px, 3.6vw, 48px); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; color: var(--ink-3); }
.hxd .hxd-facts b { display: block; font: 600 15px/1.35 var(--sans); letter-spacing: -.005em; color: var(--ink); }
.hxd .hxd-facts span { display: block; margin-top: 5px; font-size: 14px; line-height: 1.45; color: var(--ink-3); }

.hxd .hxd-week { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: min(700px, 88vh); }
.hxd .hxd-copy { display: flex; flex-direction: column; justify-content: space-between; gap: 56px; padding: clamp(56px, 7vw, 100px) clamp(24px, 4vw, 56px) clamp(40px, 5vw, 64px) 22px; border-inline-end: 1px solid var(--rule); }
.hxd .hxd-tag { display: inline-block; padding: 5px 9px; border-radius: 6px; background: rgba(255, 255, 255, .06); box-shadow: 0 0 0 1px var(--rule-2); font: 500 11px/1.2 var(--mono); letter-spacing: .06em; color: var(--ink-2); }
.hxd .hxd-h3 { max-width: 15em; margin: 20px 0 0; font: 500 clamp(25px, 2.7vw, 40px)/1.12 var(--sans); letter-spacing: -.03em; color: var(--ink); text-wrap: balance; }
.hxd .hxd-h3 em { font-style: normal; }
.hxd .hxd-h3 span { color: var(--ink-3); }
.hxd .hxd-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; font: 500 14.5px/1 var(--sans); color: var(--ink); text-decoration: none; }
.hxd .hxd-more .ic { width: 14px; height: 14px; transition: transform .25s var(--ease); }
.hxd .hxd-more:hover .ic { transform: translateX(3px); }
[dir="rtl"] .hxd .hxd-more .ic { transform: scaleX(-1); }

/* the three moments: the open one shows its line and fills a hairline
   underneath; when that is full the next one opens (site.js) */
.hxd .hxd-list { display: grid; }
.hxd .hxd-item { position: relative; display: block; width: 100%; padding: 15px 0; border: 0; border-top: 1px solid var(--rule); background: none; font: inherit; color: var(--ink-3); text-align: start; cursor: pointer; transition: color .3s var(--ease); }
.hxd .hxd-item:hover, .hxd .hxd-item[aria-selected="true"] { color: var(--ink); }
.hxd .hxd-item-h { display: flex; align-items: baseline; gap: 14px; font: 500 15.5px/1.35 var(--sans); letter-spacing: -.005em; }
.hxd .hxd-item-h i { flex: none; width: 26px; font: 500 11px/1 var(--mono); font-style: normal; letter-spacing: .04em; color: var(--ink-4); transition: color .3s var(--ease); }
.hxd .hxd-item[aria-selected="true"] .hxd-item-h i { color: var(--ink-2); }
.hxd .hxd-item-p { display: grid; grid-template-rows: 0fr; padding-inline-start: 40px; font-size: 14px; line-height: 1.5; color: var(--ink-3); opacity: 0; transition: grid-template-rows .5s var(--ease), opacity .4s var(--ease); }
.hxd .hxd-item-p > span { min-height: 0; overflow: hidden; }
.hxd .hxd-item[aria-selected="true"] .hxd-item-p { grid-template-rows: 1fr; opacity: 1; }
.hxd .hxd-item[aria-selected="true"] .hxd-item-p > span { padding-top: 6px; }
.hxd .hxd-bar { position: absolute; inset: auto 0 -1px; height: 1px; }
.hxd .hxd-bar i { display: block; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left; }
[dir="rtl"] .hxd .hxd-bar i { transform-origin: right; }
.hxd .hxd-item.run .hxd-bar i { animation: hxd-fill 5s linear forwards; }
.hxd:not(.live) .hxd-item.run .hxd-bar i { animation-play-state: paused; }

.hxd .hxd-vis { position: relative; min-height: 420px; margin: 0; }
.hxd .hxd-vis canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hxd .hxd-vis figcaption { position: absolute; inset: auto 0 clamp(30px, 4.4vw, 56px); display: grid; justify-items: center; padding: 0 20px; }
.hxd .hxd-cap { grid-area: 1 / 1; max-width: 46em; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; font: 500 11.5px/1.4 var(--mono); letter-spacing: .05em; text-align: center; color: var(--ink-3); opacity: 0; transform: translateY(6px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.hxd .hxd-cap b { font-weight: 500; text-transform: uppercase; letter-spacing: .1em; color: var(--ink); }
.hxd .hxd-cap.on { opacity: 1; transform: none; transition-delay: .2s; }
/* while the band is under the header, the header goes dark with it (site.js) */
.nav[data-over="dark"] { --paper: #0a0a0b; --paper-2: #131315; --sheet: #161618; --sheet-2: #1c1c1f; --ink: #f4f4f5; --ink-2: #c7c7cc; --ink-3: #93939b; --ink-4: #5e5e66; --rule: #26262a; --rule-2: #34343a; color: var(--ink); color-scheme: dark; }
.hxd + .hx-trust { padding-top: var(--sec); }
.hxd + .hx-trust .hx-trust-in { border-top: 0; padding-top: 0; }

@keyframes hxd-fill { to { transform: none; } }

@media (max-width: 900px) {
  .hxd .hxd-head { padding: 72px 0 132px; }
  .hxd .hxd-arcbox { width: 190vw; height: 104px; }
  .hxd .hxd-facts { grid-template-columns: 1fr; padding-bottom: 8px; border-bottom: 0; }
  .hxd .hxd-facts li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 3px 16px; padding: 17px 0; border-top: 1px solid var(--rule); }
  .hxd .hxd-facts .ic { grid-row: span 2; margin: 1px 0 0; }
  .hxd .hxd-facts span { margin-top: 0; }
  .hxd .hxd-week { display: flex; flex-direction: column; min-height: 0; padding: 64px 0 48px; border-top: 1px solid var(--rule); }
  .hxd .hxd-copy { display: contents; }
  .hxd .hxd-lead { order: 1; }
  .hxd .hxd-vis { order: 2; min-height: 0; height: min(86vw, 380px); margin-top: 12px; }
  .hxd .hxd-vis figcaption { bottom: 14px; }
  .hxd .hxd-list { order: 3; margin-top: 8px; }
}
@media (max-width: 700px) {
  .hxd .hxd-wrap { padding: 0 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .hxd .hxd-item.run .hxd-bar i { animation: none; }
  .hxd .hxd-title, .hxd .hxd-arc { opacity: 1; transform: none; }
}

/* ---------- your AI exam coach (2026-10-14, home/_examcoach.html) ----------
   Right under the hero: a short demo the visitor uses. Three numbered pills
   over one card; each pane is a step, and site.js eases the card's height
   when the step or the content changes. The level tiles breathe until the
   first tap (.used). In the dark theme the syllabus tag and the breathing
   ring are white (2026-10-21); light stays black. */
.hxe { --hxe-syl: var(--ink); --hxe-mat: var(--ink-3); }
:root[data-theme="dark"] .hxe { --hxe-syl: #ffffff; --hxe-mat: var(--ink); --glow: rgba(255, 255, 255, .26); }
.hxe .hxe-head { text-align: center; }
.hxe .hxe-head .label { display: block; margin-bottom: 16px; }
.hxe .hxe-h2 { margin: 0; font: 600 clamp(32px, 4.2vw, 56px)/1.04 var(--sans); letter-spacing: -.045em; color: var(--ink); text-wrap: balance; }
.hxe .hxe-head p { max-width: 520px; margin: 14px auto 0; font-size: clamp(16px, 1.3vw, 18.5px); line-height: 1.45; color: var(--ink-3); }
.hxe button { font: inherit; color: inherit; cursor: pointer; }

.hxe .hxe-steps { display: flex; justify-content: center; gap: 6px; width: max-content; max-width: 100%; margin: clamp(32px, 4vw, 44px) auto 0; padding: 5px; border-radius: 999px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--rule); }
.hxe .hxe-steps button { display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 18px 0 8px; border: 0; border-radius: 999px; background: none; font: 500 14.5px/1 var(--sans); color: var(--ink-3); white-space: nowrap; transition: background .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease), opacity .35s var(--ease); }
.hxe .hxe-steps b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--rule-2); font: 500 12px/1 var(--mono); transition: background .35s var(--ease), color .35s var(--ease); }
.hxe .hxe-steps button:not([disabled]):hover { color: var(--ink); }
.hxe .hxe-steps button[disabled] { opacity: .45; cursor: default; }
.hxe .hxe-steps [aria-selected="true"] { background: var(--sheet); color: var(--ink); box-shadow: 0 1px 2px rgba(10, 10, 12, .1), 0 0 0 1px var(--rule-2); }
.hxe .hxe-steps [aria-selected="true"] b { background: var(--ink); color: var(--paper); box-shadow: none; }

.hxe .hxe-card { position: relative; max-width: 780px; margin: 24px auto 0; padding: 26px 30px 28px; border-radius: 24px; background: var(--sheet); box-shadow: var(--shadow-sheet); text-align: start; overflow: hidden; transition: height .45s var(--ease); }
.hxe .hxe-ex { position: absolute; top: 24px; inset-inline-end: 26px; z-index: 1; padding: 5px 9px; border-radius: 999px; background: var(--paper-2); font: 500 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.hxe .hxe-pane { display: none; }
.hxe .hxe-pane.sel { display: block; animation: hx-rise .5s var(--ease) both; }
.hxe .hxe-q { margin: 0 0 18px; padding-inline-end: 96px; font: 600 19px/1.3 var(--sans); letter-spacing: -.02em; color: var(--ink); }
.hxe .hxe-sub { margin: -10px 0 18px; font-size: 14px; line-height: 1.5; color: var(--ink-3); }
@keyframes hxe-press { 35% { transform: scale(.96); } }

/* controls: level tiles, chips, the main button */
.hxe .hxe-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hxe .hxe-opt { position: relative; display: grid; align-content: start; gap: 4px; min-width: 0; padding: 12px 38px 13px 14px; border: 0; border-radius: 14px; background: none; box-shadow: inset 0 0 0 1px var(--rule-2); text-align: start; transition: background .3s var(--ease), box-shadow .3s var(--ease); }
.hxe .hxe-opt:hover { box-shadow: inset 0 0 0 1px var(--ink-4); }
.hxe .hxe-opt b { font: 600 14.5px/1.25 var(--sans); color: var(--ink); }
.hxe .hxe-opt small { font-size: 12.5px; line-height: 1.35; color: var(--ink-3); }
.hxe .hxe-opt i { position: absolute; top: 13px; inset-inline-end: 13px; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--rule-2); transition: box-shadow .3s var(--ease); }
.hxe .hxe-opt[aria-checked="true"] { background: var(--paper-2); box-shadow: inset 0 0 0 1.5px var(--ink); animation: hxe-press .4s var(--ease); }
.hxe .hxe-opt[aria-checked="true"] i { box-shadow: inset 0 0 0 5px var(--ink); }
.hxe .hxe-hint { margin: -10px 0 14px; font-size: 14px; color: var(--ink-3); transition: opacity .3s var(--ease); }
.hxe.used .hxe-hint { display: none; }
.hxe:not(.used) .hxe-opt { animation: hxe-breathe 2.6s var(--ease) infinite; }
.hxe:not(.used) .hxe-opt:nth-child(2) { animation-delay: .25s; }
.hxe:not(.used) .hxe-opt:nth-child(3) { animation-delay: .5s; }
@keyframes hxe-breathe { 0%, 70%, 100% { box-shadow: inset 0 0 0 1px var(--rule-2), 0 0 0 0 var(--glow); } 30% { box-shadow: inset 0 0 0 1px var(--ink-4), 0 0 0 5px var(--glow); } }
.hxe .hxe-more { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rule); }
.hxe .hxe-k { margin: 0 0 10px; font: 500 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.hxe .hxe-k2 { margin-top: 18px; }
/* the level's other subjects: in the app, not in this demo */
.hxe .hxe-app { gap: 6px; }
.hxe .hxe-app .hxe-chip { height: 30px; padding: 0 12px; border: 1px dashed var(--rule-2); box-shadow: none; font-size: 13px; color: var(--ink-3); }
.hxe .hxe-app .hxe-chip:hover { color: var(--ink); border-color: var(--ink-4); box-shadow: none; }
.hxe .hxe-app .hxe-chip[aria-pressed="true"] { background: none; color: var(--ink); border-style: solid; border-color: var(--ink-4); }
.hxe .hxe-note { margin: 12px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); animation: hx-rise .45s var(--ease) both; }
.hxe .hxe-note a { color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 4px; }
.hxe .hxe-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hxe .hxe-chip { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: none; box-shadow: inset 0 0 0 1px var(--rule-2); font: 500 14px/1 var(--sans); color: var(--ink-2); white-space: nowrap; transition: background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease); }
.hxe .hxe-chip:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink-4); }
.hxe .hxe-chip[aria-checked="true"], .hxe .hxe-chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); box-shadow: none; }
.hxe .hxe-chip .ic { width: 14px; height: 14px; }
.hxe .hxe-chip[aria-pressed="false"] .ic { display: none; }
.hxe .hxe-topics { gap: 8px; }
.hxe .hxe-topics .hxe-chip { height: 38px; padding: 0 16px; }
.hxe .hxe-act { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin-top: 20px; }
.hxe .hxe-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--ink); color: var(--paper); font: 600 14.5px/1 var(--sans); transition: opacity .25s var(--ease), transform .2s var(--ease); }
.hxe .hxe-btn:active { transform: scale(.97); }
.hxe .hxe-btn[disabled] { opacity: .35; cursor: default; }
.hxe .hxe-btn .ic { width: 15px; height: 15px; }
.hxe .hxe-gen b { transition: opacity .25s var(--ease); }
.hxe .hxe-gen .hxe-spin { position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--paper) 30%, transparent); border-top-color: var(--paper); opacity: 0; transition: opacity .25s var(--ease); animation: spin .8s linear infinite; }
.hxe .hxe-gen.busy { pointer-events: none; }
.hxe .hxe-gen.busy b { opacity: 0; }
.hxe .hxe-gen.busy .hxe-spin { opacity: 1; }
.hxe .hxe-stage { display: grid; }
.hxe .hxe-stage span { grid-area: 1 / 1; font-size: 14px; color: var(--ink-3); white-space: nowrap; opacity: 0; transform: translateY(6px); transition: opacity .3s var(--ease), transform .45s var(--ease); }
.hxe .hxe-stage span.on { opacity: 1; transform: none; }

/* 3 · the plan: one bar of activities, one view that steps through the topics */
.hxe .hxe-plan-h { padding-inline-end: 96px; margin-bottom: 16px; }
.hxe .hxe-plan-h .hxe-q { margin-bottom: 4px; padding: 0; }
.hxe .hxe-plan-h .hxe-sub { margin: 0; }
.hxe .hxe-seg { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--rule); }
.hxe .hxe-seg button { flex: 1 1 auto; height: 38px; padding: 0 14px; border: 0; border-radius: 999px; background: none; font: 500 14px/1 var(--sans); color: var(--ink-3); white-space: nowrap; transition: background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease); }
.hxe .hxe-seg button:hover { color: var(--ink); }
.hxe .hxe-seg [aria-selected="true"] { background: var(--sheet); color: var(--ink); box-shadow: 0 1px 2px rgba(10, 10, 12, .1), 0 0 0 1px var(--rule-2); }
.hxe .hxe-tag { display: inline-flex; flex: none; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 6px; font: 500 11px/1 var(--mono); letter-spacing: .02em; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--rule-2); white-space: nowrap; }
.hxe .hxe-tag i { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--ink-4); }
.hxe .hxe-tag[data-src="syllabus"] { color: var(--hxe-syl); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hxe-syl) 40%, transparent); }
.hxe .hxe-tag[data-src="syllabus"] i { background: var(--hxe-syl); }
.hxe .hxe-tag[data-src="materials"] i { background: var(--hxe-mat); }
.hxe .hxe-tag[data-src="suggested"] i { background: transparent; box-shadow: inset 0 0 0 1.2px var(--ink-4); }

.hxe .hxe-view { margin-top: 12px; padding: 16px 20px 20px; border-radius: 16px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--rule); }
.hxe .hxe-view > * { animation: hx-rise .45s var(--ease) both; }
.hxe .hxe-view-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 14px; }
.hxe .hxe-view-h b { font: 600 15px/1.3 var(--sans); color: var(--ink); }
.hxe .hxe-score { font: 500 12px/1 var(--mono); color: var(--ink-2); }
.hxe .hxe-nav { display: inline-flex; align-items: center; gap: 8px; margin-inline-start: auto; }
.hxe .hxe-nav em { min-width: 34px; font: 500 12px/1 var(--mono); font-style: normal; color: var(--ink-3); text-align: center; }
.hxe .hxe-nav button { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: var(--sheet); box-shadow: inset 0 0 0 1px var(--rule-2); color: var(--ink); transition: box-shadow .25s var(--ease), opacity .25s var(--ease); }
.hxe .hxe-nav button:hover:not([disabled]) { box-shadow: inset 0 0 0 1px var(--ink-4); }
.hxe .hxe-nav button[disabled] { opacity: .3; cursor: default; }
.hxe .hxe-nav button:first-child .ic { transform: scaleX(-1); }
[dir="rtl"] .hxe .hxe-nav button:first-child .ic { transform: none; }
[dir="rtl"] .hxe .hxe-nav button:last-child .ic { transform: scaleX(-1); }
.hxe .hxe-nav .ic { width: 14px; height: 14px; }
.hxe .hxe-view p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.hxe .hxe-view .hxe-qq { margin-bottom: 14px; font: 600 16.5px/1.4 var(--sans); letter-spacing: -.01em; color: var(--ink); }
.hxe .hxe-view .hxe-qq span { margin-inline-start: 6px; font: 500 12px/1 var(--mono); letter-spacing: 0; color: var(--ink-3); white-space: nowrap; }
.hxe .hxe-flash { position: relative; display: block; width: 100%; height: 150px; padding: 0; border: 0; background: none; perspective: 1200px; text-align: start; }
.hxe .hxe-flash > span { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; border-radius: 14px; background: var(--sheet); box-shadow: inset 0 0 0 1px var(--rule-2); backface-visibility: hidden; transition: transform .6s var(--ease); }
.hxe .hxe-flash .b { transform: rotateY(180deg); }
.hxe .hxe-flash[aria-pressed="true"] .f { transform: rotateY(-180deg); }
.hxe .hxe-flash[aria-pressed="true"] .b { transform: none; }
.hxe .hxe-flash small { font: 500 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.hxe .hxe-flash b { font: 600 17px/1.4 var(--sans); letter-spacing: -.01em; color: var(--ink); }
.hxe .hxe-flash em { margin-top: auto; font: 400 12.5px/1 var(--sans); font-style: normal; color: var(--ink-4); }
.hxe .hxe-quiz { display: grid; gap: 6px; }
.hxe .hxe-quiz button { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 0; border-radius: 12px; background: var(--sheet); box-shadow: inset 0 0 0 1px var(--rule-2); font-size: 15px; color: var(--ink-2); text-align: start; transition: box-shadow .25s var(--ease), color .25s var(--ease); }
.hxe .hxe-quiz button:hover:not([disabled]) { box-shadow: inset 0 0 0 1px var(--ink-4); color: var(--ink); }
.hxe .hxe-quiz button[disabled] { cursor: default; }
.hxe .hxe-quiz i { display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--rule-2); font: 500 11px/1 var(--mono); font-style: normal; }
.hxe .hxe-quiz .ok { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.hxe .hxe-quiz .ok i { background: var(--ink); color: var(--paper); box-shadow: none; }
.hxe .hxe-quiz .no { color: var(--ink-3); box-shadow: inset 0 0 0 1.5px var(--rec); }
.hxe .hxe-quiz .no i { color: var(--rec); box-shadow: inset 0 0 0 1px var(--rec); }
.hxe .hxe-why { margin-top: 12px !important; font-size: 14px !important; }
.hxe .hxe-why b { color: var(--ink); font-weight: 600; }
.hxe .hxe-guide { padding: 14px 16px; border-radius: 12px; background: var(--sheet); box-shadow: inset 0 0 0 1px var(--rule-2); }
.hxe .hxe-guide .label { display: block; margin-bottom: 10px; font-size: 10.5px; }
.hxe .hxe-guide ol { margin: 0; padding: 0; list-style: none; counter-reset: g; }
.hxe .hxe-guide li { position: relative; padding: 3px 0 3px 28px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); counter-increment: g; }
.hxe .hxe-guide li::before { content: counter(g); position: absolute; inset-inline-start: 0; top: 5px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--rule-2); font: 500 10px/1 var(--mono); color: var(--ink-3); }
.hxe .hxe-guide small { display: block; margin-top: 10px; font: 400 12px/1.5 var(--sans); color: var(--ink-3); }

.hxe .hxe-end { display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; margin-top: 18px; }
.hxe .hxe-end p { max-width: 460px; margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.hxe .hxe-end .btn { flex: none; }
.hxe .hxe-foot { max-width: 620px; margin: 20px auto 0; text-align: center; font-size: 14.5px; line-height: 1.55; color: var(--ink-3); text-wrap: balance; }
.hxe .hxe-foot b { font-weight: 600; color: var(--ink); }
.hxe .hxe-foot a { display: inline-flex; align-items: center; gap: 6px; margin-inline-start: 4px; color: var(--ink); font-weight: 500; white-space: nowrap; text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 4px; }
.hxe .hxe-foot .ic { width: 14px; height: 14px; }

@media (max-width: 700px) {
  .hxe .hx-wrap { padding: 0 20px; }
  .hxe .hxe-h2 { font-size: clamp(30px, 8.6vw, 38px); }
  .hxe .hxe-head p { margin-top: 12px; font-size: 16px; }
  .hxe .hxe-steps { width: 100%; gap: 2px; margin-top: 28px; }
  .hxe .hxe-steps button { flex: 1; justify-content: center; gap: 6px; height: 40px; padding: 0 6px; font-size: 12.5px; }
  .hxe .hxe-steps b { width: 22px; height: 22px; font-size: 11px; }
  .hxe .hxe-card { margin-top: 16px; padding: 20px 18px 22px; border-radius: 20px; }
  .hxe .hxe-ex { top: 19px; inset-inline-end: 16px; }
  .hxe .hxe-q { margin-bottom: 14px; font-size: 17px; }
  .hxe .hxe-sub, .hxe .hxe-hint { margin: -6px 0 14px; font-size: 13.5px; }
  .hxe .hxe-opts { grid-template-columns: 1fr; gap: 6px; }
  .hxe .hxe-opt { padding: 11px 38px 11px 14px; }
  .hxe .hxe-opt small { display: none; }
  .hxe .hxe-opt i { top: 50%; margin-top: -8px; }
  .hxe .hxe-chip { height: 34px; padding: 0 13px; font-size: 13.5px; }
  .hxe .hxe-app .hxe-chip { height: 29px; padding: 0 10px; font-size: 12.5px; }
  .hxe .hxe-note { font-size: 13.5px; }
  .hxe .hxe-foot { margin-top: 16px; font-size: 14px; }
  .hxe .hxe-plan-h { padding-inline-end: 84px; }
  .hxe .hxe-seg { gap: 0; padding: 3px; }
  .hxe .hxe-seg button { height: 34px; padding: 0 8px; font-size: 12.5px; }
  .hxe .hxe-view { padding: 14px 14px 16px; }
  .hxe .hxe-view-h { margin-bottom: 12px; }
  .hxe .hxe-flash { height: 168px; }
  .hxe .hxe-end { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .hxe .hxe-card { transition: none; }
  .hxe .hxe-pane.sel, .hxe .hxe-view > *, .hxe .hxe-opt[aria-checked="true"], .hxe:not(.used) .hxe-opt { animation: none; }
  .hxe .hxe-flash > span { transition: none; }
}

/* ---------- but wait, there's more (2026-10-14, home/_more.html) ----------
   A short beat between the hero and the Exam Coach: two lines, then a
   hairline that draws down with a dot running along it into the next
   section, which sits close beneath. site.js adds .in once it's in view. */
/* 40% of the screen (2026-10-21, was 62%, which left a big gap under the AI Tutor): still enough that the line lights up before the record agent comes into view */
.hxb { display: flex; flex-direction: column; justify-content: center; min-height: 40vh; min-height: 40svh; padding: clamp(28px, 3.5vw, 48px) var(--gut) clamp(28px, 5vh, 56px); text-align: center; }
.hxb .hxb-line { margin: 0; font: 600 clamp(28px, 3.2vw, 42px)/1.1 var(--sans); letter-spacing: -.04em; color: var(--ink); text-wrap: balance; }
.hxb .hxb-line span, .hxb .hxb-line b { display: inline-block; font-weight: inherit; opacity: .1; filter: blur(5px); transform: translateY(.3em); transition: opacity .55s var(--ease), filter .55s var(--ease), transform .7s var(--ease); }
.hxb .hxb-line span { color: var(--ink-3); }
.hxb .hxb-line .on, .hxb.in .hxb-line span, .hxb.in .hxb-line b { opacity: 1; filter: none; transform: none; }
.hxb .hxb-sub { max-width: 440px; margin: 12px auto 0; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.5; color: var(--ink-3); opacity: 0; transform: translateY(8px); transition: opacity .7s var(--ease) .15s, transform .85s var(--ease) .15s; }
.hxb.in .hxb-sub { opacity: 1; transform: none; }
.hxb .hxb-rail { position: relative; display: block; width: 1px; height: 52px; margin: 26px auto 0; background: linear-gradient(var(--rule-2), transparent); transform: scaleY(0); transform-origin: top; transition: transform 1s var(--ease) .45s; }
.hxb.in .hxb-rail { transform: none; }
.hxb .hxb-rail i { position: absolute; top: 0; left: -2px; width: 5px; height: 5px; border-radius: 50%; background: var(--ink); opacity: 0; }
.hxb.in .hxb-rail i { animation: hxb-drop 3.2s var(--ease) 1.2s infinite; }
@keyframes hxb-drop { 0% { opacity: 0; transform: translateY(0); } 12% { opacity: 1; } 55% { opacity: 0; transform: translateY(46px); } 100% { opacity: 0; transform: translateY(46px); } }
.hxb + .hxe { padding-top: 22px; }
@media (max-width: 700px) {
  .hxb { min-height: 56vh; min-height: 56svh; padding: 48px 20px 40px; }
  .hxb .hxb-line { font-size: clamp(27px, 7.6vw, 32px); }
  .hxb .hxb-sub { max-width: 300px; margin-top: 10px; font-size: 15px; }
  .hxb .hxb-rail { height: 40px; margin-top: 20px; }
  .hxb + .hxe { padding-top: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .hxb .hxb-line span, .hxb .hxb-line b, .hxb .hxb-sub, .hxb .hxb-rail { opacity: 1; filter: none; transform: none; transition: none; }
  .hxb.in .hxb-rail i { animation: none; }
}