/* MasteryOS site. Tokens match the in-chat card (Server/widget/app.html). No green. */
:root {
  color-scheme: light;
  --bg: #FAFAF8; --bg-2: #F3F3EF; --surface: #FFFFFF; --inset: #F3F3F0; --line: #E6E6E1;
  --ink: #16181D; --muted: #5F636E; --faint: #6B6F7A;
  --primary: #3E4BD8; --primary-soft: #E8EAFD; --primary-ink: #2F3BBF; --on-primary: #FFFFFF;
  --amber: #B7791F; --amber-ink: #8A5A12; --amber-soft: #FBF1DF;
  --slate: #A3A8B3; --mastered: #2A33A8; --on-mastered: #FFFFFF;
  --glow: rgba(62, 75, 216, .16); --glow-2: rgba(183, 121, 31, .10);
  --shadow: 0 1px 2px rgba(22, 24, 29, .04), 0 12px 32px -12px rgba(22, 24, 29, .14), 0 32px 80px -40px rgba(62, 75, 216, .28);
  --focus: #3E4BD8; --field-border: #80858F;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, system-ui, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Inter, system-ui, sans-serif;
  --sec: 72px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111318; --bg-2: #15181E; --surface: #1A1D24; --inset: #22262F; --line: #2B303A;
  --ink: #EEF0F4; --muted: #A2A8B4; --faint: #858B98;
  --primary: #8E98FF; --primary-soft: #252A4A; --primary-ink: #A9B1FF; --on-primary: #0E1030;
  --amber: #F2B860; --amber-ink: #F2B860; --amber-soft: #3A2E17;
  --slate: #5B6170; --mastered: #C9CEFF; --on-mastered: #0E1030;
  --glow: rgba(142, 152, 255, .16); --glow-2: rgba(242, 184, 96, .07);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 24px 60px -24px rgba(0, 0, 0, .7), 0 40px 100px -50px rgba(142, 152, 255, .35);
  --focus: #8E98FF; --field-border: #6E7484;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #111318; --bg-2: #15181E; --surface: #1A1D24; --inset: #22262F; --line: #2B303A;
    --ink: #EEF0F4; --muted: #A2A8B4; --faint: #858B98;
    --primary: #8E98FF; --primary-soft: #252A4A; --primary-ink: #A9B1FF; --on-primary: #0E1030;
    --amber: #F2B860; --amber-ink: #F2B860; --amber-soft: #3A2E17;
    --slate: #5B6170; --mastered: #C9CEFF; --on-mastered: #0E1030;
    --glow: rgba(142, 152, 255, .16); --glow-2: rgba(242, 184, 96, .07);
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 24px 60px -24px rgba(0, 0, 0, .7), 0 40px 100px -50px rgba(142, 152, 255, .35);
    --focus: #8E98FF; --field-border: #6E7484;
  }
}
@media (min-width: 900px) { :root { --sec: 128px; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { font: 17px/1.55 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden; font-variant-numeric: tabular-nums; }
p, h1, h2, h3, ol, ul { margin: 0; }
ol, ul { list-style: none; padding: 0; }
a { color: var(--primary-ink); }
img, svg { display: block; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: 16px; top: -48px; background: var(--surface); padding: 8px 12px; border-radius: 6px; z-index: 10; }
.skip:focus { top: 12px; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.wrap--text { max-width: 680px; }
.center { text-align: center; margin-left: auto; margin-right: auto; }
@media (min-width: 900px) { .wrap { padding: 0 40px; } .wrap--text { max-width: 720px; } }

/* Top bar */
.top { position: absolute; inset: 0 0 auto; z-index: 5; }
.top__in { max-width: 1200px; margin: 0 auto; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
@media (min-width: 900px) { .top__in { padding: 24px 40px; } }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 650; font-size: 18px; letter-spacing: -.01em; }
.brand img { border-radius: 7px; }
.brand--sm { font-size: 15px; gap: 8px; }
.brand--sm img { border-radius: 5px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; font-weight: 600; border-radius: 10px; border: 1px solid transparent; white-space: nowrap; transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease); }
.btn--lg { min-height: 54px; padding: 0 26px; font-size: 17px; }
.btn--sm { min-height: 44px; padding: 0 16px; font-size: 15px; }
.btn--primary { background: var(--primary); color: var(--on-primary); box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 8px 20px -8px var(--primary); }
.btn--primary:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 12px 28px -10px var(--primary); }
.btn--ghost { color: var(--ink); border-color: var(--line); background: var(--surface); }
.btn--ghost:hover { border-color: var(--slate); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.cta-row--center { justify-content: center; }

.kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--muted); letter-spacing: .01em; }
.kicker--plain { color: var(--primary-ink); text-transform: uppercase; letter-spacing: .08em; font-size: 13px; }
.kicker__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px var(--amber-soft); }
.fine { margin-top: 20px; font-size: 14px; color: var(--muted); }
.accent { color: var(--primary); }

.h2 { font-family: var(--display); font-size: clamp(32px, 1.6rem + 1.6vw, 48px); line-height: 1.1; letter-spacing: -.025em; font-weight: 700; margin-top: 16px; text-wrap: balance; }
.h2--xl { font-size: clamp(38px, 1.8rem + 2.6vw, 64px); }
.lede { margin-top: 20px; font-size: 19px; color: var(--muted); text-wrap: pretty; }

/* Hero */
.hero { position: relative; padding: 112px 0 var(--sec); overflow: hidden; }
.hero__glow { position: absolute; inset: -20% -10% auto; height: 120%; pointer-events: none;
  background: radial-gradient(40% 45% at 72% 42%, var(--glow), transparent 70%), radial-gradient(30% 35% at 18% 20%, var(--glow-2), transparent 70%); }
.hero__in { position: relative; max-width: 1200px; margin: 0 auto; padding: 0 20px; display: grid; gap: 56px; }
@media (min-width: 900px) {
  .hero { padding-top: 104px; min-height: 860px; }
  .hero__in { grid-template-columns: 1.08fr .92fr; align-items: center; gap: 64px; padding: 0 40px; }
}
.hero__title { font-family: var(--display); font-size: clamp(42px, 1.4rem + 4vw, 72px); line-height: 1.02; letter-spacing: -.035em; font-weight: 750; margin-top: 24px; text-wrap: balance; }
.hero__title .accent { display: inline-block; }
.hero__sub { margin-top: 24px; font-size: clamp(19px, 1rem + .5vw, 23px); line-height: 1.45; color: var(--muted); max-width: 30ch; }

/* Chat frame */
/* MasteryOS card (widget visual language) */
.mcard { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 22px; font-size: 15px; line-height: 1.5; }
.mcard--solo { box-shadow: var(--shadow); max-width: 460px; margin: 0 auto; padding: 26px; }
.mcard__head { display: flex; align-items: center; gap: 18px; }
.eyebrow, .label { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.eyebrow { margin-bottom: 6px; }
.mcard__title { font-size: 19px; font-weight: 650; line-height: 1.25; }
.mcard__sub { margin-top: 6px; font-size: 14px; color: var(--muted); }
.mcard__skill { margin-top: 24px; }
.mcard__skillname { margin-top: 10px; font-size: 17px; font-weight: 600; }
.label { display: block; margin-top: 20px; margin-bottom: 10px; }
.label--gap { margin-top: 24px; }
.chip { display: inline-block; vertical-align: middle; font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 6px; line-height: 1.4; white-space: nowrap; }
.chip--pass { background: var(--primary-soft); color: var(--primary-ink); }
.chip--mastered { background: var(--mastered); color: var(--on-mastered); }

.ring { position: relative; width: 84px; height: 84px; flex: none; }
.ring svg { transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 8; }
.ring__track { stroke: var(--line); }
.ring__val { stroke: var(--primary); stroke-linecap: round; stroke-dasharray: 226.2; stroke-dashoffset: var(--off, 56.55); }
.ring[data-ring="100"] .ring__val { --off: 0; stroke: var(--mastered); }
.ring__num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.ring__num b { font-size: 21px; font-weight: 700; min-width: 2ch; text-align: center; }
.ring__num span { font-size: 11px; color: var(--muted); }

.diff { display: flex; gap: 6px; }
.diff i { flex: 1; height: 8px; border-radius: 3px; background: var(--line); position: relative; overflow: hidden; }
.diff i::after { content: ""; position: absolute; inset: 0; background: var(--primary); transform-origin: left; transform: scaleX(1); }
.diff i.off::after { display: none; }

.path { position: relative; margin-top: 2px; }
.path__rail { position: absolute; left: 10px; top: 18px; bottom: 18px; width: 2px; background: var(--line); }
.path__rail i { position: absolute; inset: 0; background: var(--primary); transform-origin: top; transform: scaleY(var(--fill, .67)); }
.path--done .path__rail i { --fill: 1; background: var(--mastered); }
.node { position: relative; display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 14px; padding: 7px 0; }
.dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--slate); background: var(--surface); position: relative; z-index: 1; transition: background-color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease); }
.node__t { font-weight: 600; font-size: 15px; min-width: 0; overflow-wrap: anywhere; }
.node__s { font-size: 13px; color: var(--muted); text-align: right; }
.node[data-state="m"] .dot { background: var(--mastered); border-color: var(--mastered); }
.node[data-state="s"] .dot { background: var(--primary); border-color: var(--primary); }
.node[data-state="l"] .dot { border-color: var(--amber); background: conic-gradient(var(--amber) 0 50%, var(--surface) 50%); box-shadow: 0 0 0 6px var(--amber-soft); }
.node[data-state="l"] .node__s { color: var(--amber-ink); font-weight: 600; }
.path--done .node__s { color: var(--primary-ink); }

/* Problem */
.problem { padding: var(--sec) 0; background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.problem .wrap--text { display: grid; gap: 28px; max-width: 860px; }
.problem__line { font-family: var(--display); font-size: clamp(30px, 1.2rem + 2.6vw, 52px); line-height: 1.12; letter-spacing: -.028em; font-weight: 700; color: var(--faint); text-wrap: balance; }
.problem__line:nth-child(2) { color: var(--muted); }
.problem__line--em { color: var(--ink); }

/* Guide */
.guide { padding: var(--sec) 0; }
.proofs { display: grid; gap: 20px; margin-top: 56px; }
@media (min-width: 900px) { .proofs { grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 72px; } }
.proof { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 28px; }
.proof__icon { display: inline-flex; width: 44px; height: 44px; border-radius: 6px; background: var(--primary-soft); align-items: center; justify-content: center; }
.proof__icon svg { width: 22px; height: 22px; fill: none; stroke: var(--primary); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.proof__t { margin-top: 20px; font-size: 20px; font-weight: 650; line-height: 1.3; letter-spacing: -.01em; }
.proof__d { margin-top: 8px; color: var(--muted); font-size: 16px; }

/* Plan */
.plan { padding: var(--sec) 0; background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); scroll-margin-top: 0; }
.steps { position: relative; display: grid; gap: 40px; margin-top: 56px; }
.steps__line { position: absolute; left: 27px; top: 28px; bottom: 28px; width: 2px; background: var(--line); }
.steps__line i { position: absolute; inset: 0; background: var(--primary); transform-origin: top; transform: scale(1); }
.step { position: relative; display: grid; grid-template-columns: 56px 1fr; column-gap: 20px; row-gap: 6px; }
.step__icon { grid-row: span 2; position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 50%; background: var(--surface); border: 2px solid var(--primary); display: flex; align-items: center; justify-content: center; }
.step__icon svg { width: 24px; height: 24px; fill: none; stroke: var(--primary); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.step__icon b { position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; border-radius: 50%; background: var(--primary); color: var(--on-primary); font-size: 13px; display: flex; align-items: center; justify-content: center; }
.step__t { font-size: 21px; line-height: 1.25; font-weight: 650; letter-spacing: -.01em; padding-top: 4px; }
.step__d { color: var(--muted); font-size: 16px; margin-top: 6px; }
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 80px; }
  .steps__line { left: calc(100% / 6); right: calc(100% / 6); top: 27px; bottom: auto; width: auto; height: 2px; }
  .steps__line i { transform-origin: left; }
  .step { grid-template-columns: 1fr; justify-items: center; text-align: center; row-gap: 8px; }
  .step__icon { grid-row: auto; margin-bottom: 16px; }
  .step__t { max-width: 24ch; }
  .step__d { max-width: 28ch; }
}

/* CTA band */
.band { padding: var(--sec) 0 calc(var(--sec) * .75); }

/* Stakes */
.stakes { padding: calc(var(--sec) * .5) 0 var(--sec); }
.almost { position: relative; max-width: 360px; margin: 0 auto; height: 10px; border-radius: 5px; background: var(--line); }
.almost i { position: absolute; inset: 0; border-radius: 5px; background: var(--amber); transform-origin: left; transform: scaleX(.88); }
.almost span { position: absolute; left: 88%; top: 20px; transform: translateX(-50%); font-size: 13px; font-weight: 600; color: var(--amber-ink); }
.stakes__line { margin-top: 56px; font-size: clamp(21px, 1rem + 1vw, 28px); line-height: 1.35; color: var(--muted); font-weight: 500; letter-spacing: -.01em; text-wrap: balance; }

/* Success */
.success { padding: var(--sec) 0; position: relative; overflow: hidden; background: linear-gradient(180deg, var(--bg), var(--bg-2)); border-top: 1px solid var(--line); }
.success__in { display: grid; gap: 48px; align-items: center; }
@media (min-width: 900px) { .success__in { grid-template-columns: 1fr 1fr; gap: 72px; } }
.success__copy .lede { max-width: 34ch; }
.skills { margin-top: 96px; }
@media (min-width: 900px) { .skills { margin-top: 128px; } }
.skills__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }
.skills__list li { padding: 12px 18px; border: 1px solid var(--line); background: var(--surface); border-radius: 6px; font-weight: 600; font-size: 16px; }
.skills__list .skills__more { background: transparent; border-style: dashed; color: var(--muted); font-weight: 500; }

/* FAQ */
.faq { padding: var(--sec) 0; }
.faq__list { margin-top: 48px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 24px 0; font-size: 19px; font-weight: 600; min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 10px; height: 10px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translate(-2px, -2px); transition: transform .25s var(--ease); flex: none; }
.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq details p { padding: 0 0 24px; color: var(--muted); max-width: 60ch; }
.privacy { margin-top: 40px; text-align: center; color: var(--muted); font-size: 16px; }

/* Final */
.final { padding: var(--sec) 0; background: var(--bg-2); border-top: 1px solid var(--line); }
.final__mark { margin: 0 auto; border-radius: 14px; }
.final .h2 { margin-top: 32px; }

.foot { padding: 40px 0 48px; }
.foot__in { max-width: 1120px; margin: 0 auto; padding: 0 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; font-size: 14px; color: var(--muted); }
.foot__in a { color: var(--muted); min-height: 44px; display: inline-flex; align-items: center; }
.foot__maker { margin-left: auto; }
@media (min-width: 900px) { .foot__in { padding: 0 40px; } }


/* Policy page */
.doc__main { max-width: 760px; margin: 0 auto; padding: 32px 20px 96px; }
.prose { font-size: 17px; line-height: 1.65; }
.prose h1 { font-family: var(--display); font-size: clamp(34px, 1.6rem + 2vw, 52px); line-height: 1.1; letter-spacing: -.025em; margin: 24px 0 24px; }
.prose h2 { font-size: 24px; line-height: 1.25; letter-spacing: -.01em; margin: 56px 0 16px; }
.prose p, .prose ul { margin: 0 0 16px; }
.prose ul { list-style: disc; padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.prose table { width: 100%; border-collapse: collapse; margin: 8px 0 24px; font-size: 15px; display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.prose th { color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .05em; }
.prose a { overflow-wrap: anywhere; }

/* Phone refinements */
@media (max-width: 899px) {
  .hero { padding-top: 96px; }
  .hero__in { gap: 48px; }
  .hero .cta-row { flex-wrap: nowrap; gap: 10px; margin-top: 32px; }
  .hero .btn--lg { padding: 0 18px; font-size: 16px; min-height: 52px; }
}
@media (max-width: 479px) {
  .mcard { padding: 20px 18px; }
  .node { grid-template-columns: 22px 1fr; row-gap: 4px; column-gap: 14px; padding: 6px 0; }
  .node .dot { grid-row: span 2; }
  .node__s { text-align: left; font-size: 12.5px; line-height: 1.3; }
  .path__rail { top: 20px; bottom: 20px; }
}
@media (max-width: 899px) {
  .proof { display: grid; grid-template-columns: 44px 1fr; column-gap: 18px; padding: 24px 22px; }
  .proof__icon { grid-row: span 2; }
  .proof__t { margin-top: 0; font-size: 18px; }
  .proof__d { font-size: 15px; }
}

/* ---------- Copy additions (same tokens and motion as the visual system) ---------- */
.hero__sub { max-width: 44ch; }
sup { font-size: .6em; line-height: 0; vertical-align: super; margin-left: 2px; }
sup a { display: inline-block; padding: 0 3px; color: var(--primary-ink); text-decoration: none; font-weight: 700; }
sup a:hover { text-decoration: underline; }
.fine a { color: var(--primary-ink); }
.plan .lede { max-width: 56ch; margin-left: auto; margin-right: auto; }
.explain { margin-top: 72px; }
.explain__p { font-size: 17px; color: var(--muted); text-wrap: pretty; }
.calm { display: grid; grid-template-columns: 44px 1fr; column-gap: 18px; row-gap: 6px; max-width: 560px; margin: 56px auto 0; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 24px 22px; }
.calm .proof__icon { grid-row: span 2; }
.calm__t { font-size: 18px; font-weight: 650; line-height: 1.3; }
.calm__d { color: var(--muted); font-size: 16px; }
.identity { max-width: 720px; margin: 64px auto 0; text-align: center; font-family: var(--display); font-size: clamp(21px, 1rem + 1vw, 28px); line-height: 1.35; letter-spacing: -.01em; font-weight: 600; text-wrap: balance; }
.magnet { padding: var(--sec) 0; background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); scroll-margin-top: 0; }
.magnet__form { margin-top: 40px; text-align: left; }
.magnet__form .label { margin-top: 0; }
.magnet__row { display: grid; gap: 12px; }
.field { width: 100%; min-height: 54px; padding: 0 16px; font: inherit; font-size: 17px; color: var(--ink); background: var(--surface); border: 1px solid var(--field-border); border-radius: 10px; }
.field:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.magnet .fine { text-align: center; margin-top: 16px; }
@media (min-width: 640px) { .magnet__row { grid-template-columns: 1fr auto; } }
.research { padding: calc(var(--sec) * .6) 0; border-top: 1px solid var(--line); scroll-margin-top: 0; }
.research__h { font-size: 14px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 650; }
.research__list { margin-top: 28px; display: grid; gap: 20px; counter-reset: r; }
.research__list li { counter-increment: r; position: relative; padding-left: 36px; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.research__list li::before { content: counter(r); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--ink); }
.research__list a { color: var(--ink); text-decoration-color: var(--slate); text-underline-offset: 3px; overflow-wrap: anywhere; }
.research__note { margin-top: 32px; font-size: 14.5px; color: var(--muted); }
.foot__maker { text-align: right; }
@media (max-width: 899px) { .foot__maker { margin-left: 0; text-align: left; flex-basis: 100%; } }
.js .magnet [data-reveal], .js .research [data-reveal] { transition-duration: .8s; }
.almost span { white-space: nowrap; }
.step { align-content: start; }
/* Release gates: html[data-gates="hide"] hides claims for features not shipped yet */
[data-gate-alt] { display: none; }
html[data-gates="hide"] [data-gate] { display: none; }
html[data-gates="hide"] [data-gate-alt] { display: inline; }
.hero__sub { max-width: 34ch; }
.explain { margin-top: 64px; text-align: center; }
.explain__p { font-family: var(--display); font-size: clamp(22px, 1rem + 1vw, 28px); font-weight: 650; letter-spacing: -.01em; color: var(--ink); }
.rows { display: grid; gap: 12px; margin: 32px auto 0; max-width: 760px; }
@media (min-width: 640px) { .rows { grid-template-columns: repeat(4, 1fr); } }
.row { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; font-weight: 600; font-size: 16px; text-align: left; }
.row .proof__icon { flex: none; }
@media (min-width: 640px) { .row { flex-direction: column; align-items: flex-start; padding: 22px 18px; gap: 16px; } }
.explain__note { margin-top: 24px; font-size: 15px; color: var(--muted); }

/* ---------- Chat conversation frame (generic AI chat, no third-party marks) ---------- */
.float { will-change: transform; }
.chat { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); max-width: 480px; margin: 0 auto; width: 100%; overflow: hidden; }
@media (min-width: 900px) { .chat { margin: 0 0 0 auto; } }
.chat__top { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--surface); }
.chat__who { display: flex; flex-direction: column; gap: 4px; line-height: 1.25; }
.chat__who b { font-size: 15px; font-weight: 650; }
.chat__who span { font-size: 12.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.chat__who span i { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); }
.chat__dots { margin-left: auto; display: flex; gap: 4px; }
.chat__dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--muted); }
.chat__body { padding: 20px 16px 8px; background: var(--bg-2); display: grid; gap: 16px; }
@media (min-width: 900px) { .chat__body { padding: 22px 20px 10px; } }
.av { flex: none; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.av svg { width: 18px; height: 18px; }
.av--ai { background: linear-gradient(135deg, var(--primary), var(--mastered) 60%, var(--amber)); }
.av--ai svg { fill: #fff; }
.av--sm { width: 28px; height: 28px; }
.av--sm svg { width: 15px; height: 15px; }
.av--me { background: var(--inset); border: 1px solid var(--line); }
.av--me svg { fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; }
.msg { display: flex; align-items: flex-end; gap: 8px; }
.msg--me { justify-content: flex-end; }
.msg--ai { align-items: flex-start; }
.msg__stack { position: relative; flex: 1; min-width: 0; display: grid; gap: 10px; }
.bubble { font-size: 15px; line-height: 1.45; }
.bubble--me { max-width: 82%; background: var(--primary); color: var(--on-primary); padding: 10px 14px; border-radius: 14px 14px 4px 14px; }
.bubble--ai { justify-self: start; background: var(--surface); border: 1px solid var(--line); padding: 9px 14px; border-radius: 4px 14px 14px 14px; }
.typing { position: absolute; left: 0; top: 0; display: inline-flex; gap: 5px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 4px 12px 12px 12px; opacity: 0; transition: opacity .35s var(--ease), transform .35s var(--ease); transform: translateY(6px); }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.appcard { border-radius: 18px; background: var(--surface); border: 1px solid var(--line); padding: 16px 14px; }
.appcard .mcard { border: 0; padding: 12px 10px 8px; }
.appcard__label { display: flex; align-items: center; gap: 8px; padding: 2px 6px 8px; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.appcard__label img { border-radius: 4px; }
.appcard__label b { color: var(--ink); font-weight: 650; }
.appcard__label span { border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; font-size: 11px; line-height: 16px; }
.appcard__label--solo { margin: -6px -4px 18px; padding: 0 2px 12px; }
.chat__input { display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 14px 14px; background: var(--bg-2); }
.chat__input > span:first-child { flex: 1; min-height: 44px; display: flex; align-items: center; padding: 0 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--muted); font-size: 15px; }
.chat__send { width: 40px; height: 40px; border-radius: 10px; background: var(--primary); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.chat__send svg { width: 18px; height: 18px; fill: none; stroke: var(--on-primary); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 479px) { .appcard .mcard { padding: 12px 6px 6px; } .chat__body { padding: 18px 12px 6px; } }

/* Ring sweep layer + glow */
.ring__sweep { stroke: var(--sweep, #fff); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 0 999; opacity: 0; filter: drop-shadow(0 0 4px var(--sweep, #fff)); }
.ring svg { transition: filter .6s ease; }
.ring.is-sweeping svg { filter: drop-shadow(0 0 7px var(--glow-ring, rgba(62, 75, 216, .45))); }
:root { --glow-ring: rgba(62, 75, 216, .45); }

/* Four guide proofs */
@media (min-width: 700px) { .proofs--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .proofs--4 { max-width: 920px; margin-left: auto; margin-right: auto; gap: 20px; } }
.nowrap { white-space: nowrap; }
.proof__d sup a { color: var(--primary-ink); }

/* Skills marquee */
.marquee { margin-top: 12px; display: grid; gap: 14px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__row { display: flex; width: max-content; }
.marquee__track { display: flex; gap: 12px; padding-right: 12px; }
.sk { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; padding: 12px 16px; border: 1px solid var(--line); background: var(--surface); border-radius: 6px; font-weight: 600; font-size: 16px; }
.sk i { width: 8px; height: 8px; border-radius: 2px; background: var(--c, var(--primary)); }
.sk span { font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: .02em; }
.sk--lang, .sk--mind, .sk--work { --c: var(--primary); }
.sk--music, .sk--make, .sk--body { --c: var(--amber); }
.sk--sport, .sk--sci { --c: var(--mastered); }
.skills__more { text-align: center; margin-top: 24px; color: var(--muted); font-size: 16px; }
/* Without motion: a wrapped chip cloud, no duplicate copies */
.marquee__dup { display: none; }
.marquee__row, .marquee__track { flex-wrap: wrap; justify-content: center; width: auto; }
.marquee { -webkit-mask-image: none; mask-image: none; }

/* ---------- Motion (only when JS runs and motion is allowed) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js .problem__line[data-reveal] { transform: translateY(26px); transition-duration: 1s; }

  /* Idle float on the hero chat */
  .js .float { animation: float 7s ease-in-out 3.8s infinite; }

  /* Chat build */
  .js #hero-chat { opacity: 0; transform: translateY(18px) scale(.985); }
  .js #hero-chat.play { animation: frameIn .9s var(--ease) .1s forwards; }
  .js #hero-chat .msg--me { opacity: 0; transform: translateX(16px); }
  .js #hero-chat.play .msg--me { animation: slideIn .7s var(--ease) .4s forwards; }
  .js #hero-chat .msg--ai .av { opacity: 0; transform: scale(.6); }
  .js #hero-chat.play .msg--ai .av { animation: popIn .5s var(--ease) .7s forwards; }
  .js #hero-chat.typing-on .typing { opacity: 1; transform: none; }
  .js #hero-chat.replied .typing { opacity: 0; transform: none; }
  .js #hero-chat.play .typing i { animation: typingDot 1s ease-in-out infinite; }
  .js #hero-chat.play .typing i:nth-child(2) { animation-delay: .15s; }
  .js #hero-chat.play .typing i:nth-child(3) { animation-delay: .3s; }
  .js #hero-chat .bubble--ai { opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
  .js #hero-chat.replied .bubble--ai { opacity: 1; transform: none; }
  .js #hero-chat .appcard { opacity: 0; transform: translateY(16px) scale(.98); transform-origin: top left; transition: opacity .7s var(--ease), transform .8s var(--ease); }
  .js #hero-chat.built .appcard { opacity: 1; transform: none; }
  .js [data-anim] [data-build] { opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
  .js [data-anim].built [data-build] { opacity: 1; transform: none; }
  .js [data-anim].built [data-build]:nth-child(1) { transition-delay: .15s; }
  .js [data-anim].built [data-build]:nth-child(2) { transition-delay: .27s; }
  .js [data-anim].built [data-build]:nth-child(3) { transition-delay: .39s; }
  .js [data-anim].built [data-build]:nth-child(4) { transition-delay: .51s; }

  /* Ring, bars, path */
  .js [data-anim] .ring__val { stroke-dashoffset: 226.2; }
  .js [data-anim] .diff i::after { transform: scaleX(0); transition: transform .55s var(--ease); }
  .js #hero-chat.built .diff i:nth-child(1)::after { transform: scaleX(1); transition-delay: .7s; }
  .js #hero-chat.built .diff i:nth-child(2)::after { transform: scaleX(1); transition-delay: .82s; }
  .js #hero-chat.built .diff i:nth-child(3)::after { transform: scaleX(1); transition-delay: .94s; }
  .js #hero-chat.built .diff i:nth-child(4)::after { transform: scaleX(1); transition-delay: 1.06s; }
  .js [data-anim] .path__rail i { transform: scaleY(0); }
  .js [data-anim] .node:not(.lit) .dot { background: var(--surface); border-color: var(--slate); box-shadow: none; }
  .js [data-anim] .node .node__t { transition: color .4s var(--ease); }
  .js [data-anim] .node:not(.lit) .node__t { color: var(--muted); }
  .js [data-anim] .node .node__s { transition: opacity .45s var(--ease), transform .45s var(--ease); }
  .js [data-anim] .node:not(.lit) .node__s { opacity: 0; transform: translateX(-6px); }
  .js [data-anim] .node.lit .dot { animation: nodeLit .7s var(--ease); }
  .js [data-anim] .node.lit .dot::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--primary); animation: nodeRing .8s var(--ease) forwards; }
  .js [data-anim] .node.lit[data-state="n"] .dot { animation: none; }
  .js [data-anim] .node.lit[data-state="n"] .dot::after { display: none; }
  .js #hero-chat .node.lit[data-state="l"] .dot { animation: nodeLit .7s var(--ease), halo 3s ease-in-out 1s infinite; }

  .js [data-anim] [data-pass] { opacity: 0; transform: scale(.85); }
  .js [data-anim] [data-pass].lit { animation: pass 1.1s var(--ease) forwards; }
  .js [data-anim] [data-badge] { opacity: 0; transform: scale(.6); }

  /* Plan + stakes */
  .js [data-steps] .steps__line i { transform: scale(0, 0); transition: transform 1.6s var(--ease) .2s; }
  .js [data-steps].is-in .steps__line i { transform: scale(1); }
  .js [data-steps] .step { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
  .js [data-steps].is-in .step:nth-child(2) { opacity: 1; transform: none; transition-delay: .1s; }
  .js [data-steps].is-in .step:nth-child(3) { opacity: 1; transform: none; transition-delay: .7s; }
  .js [data-steps].is-in .step:nth-child(4) { opacity: 1; transform: none; transition-delay: 1.3s; }
  .js [data-steps] .step__icon { transition: box-shadow .6s var(--ease); }
  .js [data-steps].is-in .step:nth-child(2) .step__icon { animation: stepGlow 1.2s var(--ease) .3s both; }
  .js [data-steps].is-in .step:nth-child(3) .step__icon { animation: stepGlow 1.2s var(--ease) .9s both; }
  .js [data-steps].is-in .step:nth-child(4) .step__icon { animation: stepGlow 1.2s var(--ease) 1.5s both; }
  .js [data-almost] i { transform: scaleX(0); transition: transform 2.2s cubic-bezier(.2, .9, .1, 1); }
  .js .is-in [data-almost] i { transform: scaleX(.88); }
  .js [data-almost] span { opacity: 0; transition: opacity .6s var(--ease) 1.8s; }
  .js .is-in [data-almost] span { opacity: 1; }

  /* Marquee */
  .marquee__dup { display: flex; }
  .marquee__row, .marquee__track { flex-wrap: nowrap; justify-content: flex-start; width: max-content; }
  .marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
  .marquee__row { animation: marquee 60s linear infinite; }
  .marquee__row--rev { animation-direction: reverse; animation-duration: 68s; }
  .marquee:hover .marquee__row { animation-play-state: paused; }
  .marquee .sk { transition: border-color .3s var(--ease), transform .3s var(--ease); }
  .marquee .sk:hover { border-color: var(--primary); transform: translateY(-2px); }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
  .js [data-steps] .steps__line i { transform: scale(0, 1); }
  .js [data-steps].is-in .steps__line i { transform: scale(1, 1); }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 899px) {
  .js [data-steps] .steps__line i { transform: scale(1, 0); }
}
/* Reduced motion: static end states, a quiet glow on the mastered ring */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  #finish .ring svg { filter: drop-shadow(0 0 10px var(--glow-ring)); }
  #finish [data-badge] { box-shadow: 0 0 0 4px var(--primary-soft); }
}

@keyframes frameIn { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes slideIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes popIn { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes typingIn { 0% { opacity: 0; transform: translateY(6px); } 15%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes typingDot { 0%, 100% { opacity: .35; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes nodeLit { 0% { transform: scale(.8); } 45% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes nodeRing { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.9); } }
@keyframes stepGlow { 0% { box-shadow: 0 0 0 0 var(--primary-soft); } 40% { box-shadow: 0 0 0 10px var(--primary-soft); } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes pass {
  0% { opacity: 0; transform: scale(.85); box-shadow: 0 0 0 0 var(--primary-soft); }
  35% { opacity: 1; transform: scale(1.06); box-shadow: 0 0 0 6px var(--primary-soft); }
  100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 transparent; }
}
@keyframes halo { 0%, 100% { box-shadow: 0 0 0 6px var(--amber-soft); } 50% { box-shadow: 0 0 0 10px var(--amber-soft); } }
:root[data-theme="dark"] { --glow-ring: rgba(142, 152, 255, .55); --sweep: #FFD58A; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --glow-ring: rgba(142, 152, 255, .55); --sweep: #FFD58A; } }

/* ---------- Round 5 ---------- */
.btn__ic { width: 18px; height: 18px; margin-right: 8px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn--sm .btn__ic { width: 16px; height: 16px; margin-right: 6px; }
@media (min-width: 900px) { .proofs--2 { grid-template-columns: repeat(2, 1fr); max-width: 880px; margin-left: auto; margin-right: auto; } }
.creds { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 40px auto 0; max-width: 640px; text-align: center; font-size: 15px; font-weight: 600; color: var(--muted); text-wrap: balance; }
.creds img { flex: none; border-radius: 5px; }
@media (max-width: 599px) { .creds { flex-direction: column; gap: 12px; padding: 0 20px; } }
/* Plan: compact icon row */
.rows--icons { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; margin-top: 20px; }
.rows--icons .row { background: none; border: 0; padding: 0; flex-direction: row; align-items: center; gap: 10px; font-size: 15px; color: var(--muted); }
.rows--icons .proof__icon { width: 32px; height: 32px; }
.rows--icons .proof__icon svg { width: 18px; height: 18px; }
.explain { margin-top: 56px; }
.explain__p { font-size: clamp(19px, 1rem + .6vw, 24px); }
/* Lead magnet note */
.magnet__note b { color: var(--ink); font-weight: 600; }
/* Mastered message (space reserved, revealed by the celebration) */
.mastered-msg { display: flex; align-items: center; gap: 10px; margin-top: 20px; padding: 12px 14px; border-radius: 10px; background: var(--primary-soft); color: var(--primary-ink); font-family: var(--display); font-size: 20px; font-weight: 700; letter-spacing: -.01em; position: relative; overflow: hidden; }
.mastered-msg svg { width: 22px; height: 22px; fill: var(--amber); flex: none; }
.mastered-msg::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 30%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .7), transparent); transform: translateX(-140%) skewX(-18deg); opacity: 0; will-change: transform; }
@media (prefers-reduced-motion: no-preference) {
  .js [data-anim] [data-mastered-msg] { opacity: 0; transform: translateY(8px) scale(.97); }
  .js [data-anim] [data-mastered-msg].is-on { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .7s cubic-bezier(.2, .9, .25, 1.1); }
  .js [data-anim] [data-mastered-msg].is-on::after { animation: msgShine 1.1s ease-out .35s forwards; }
}
@keyframes msgShine { 0% { transform: translateX(-140%) skewX(-18deg); opacity: 1; } 100% { transform: translateX(440%) skewX(-18deg); opacity: 1; } }
/* Held achieved state on the card */
#finish.mcel-achieved { border-color: var(--primary); }
@media (prefers-reduced-motion: reduce) { #finish { box-shadow: 0 0 0 1px var(--primary), 0 0 40px -8px var(--glow-ring), var(--shadow); border-color: var(--primary); } }
.success__demo { position: relative; }