/* MEDFYE landing page. Self-contained: its own tokens, fonts and assets.
   Flat, solid colour only: no gradients, glows, glass or dot grids. Lime and ink blocks, real app screens,
   crisp floating cards. */

@font-face { font-family: 'Bricolage Grotesque'; src: url(../assets/fonts/BricolageGrotesque-Regular.woff2) format('woff2'), url(../assets/fonts/BricolageGrotesque-Regular.ttf) format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Bricolage Grotesque'; src: url(../assets/fonts/BricolageGrotesque-Medium.woff2) format('woff2'), url(../assets/fonts/BricolageGrotesque-Medium.ttf) format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Bricolage Grotesque'; src: url(../assets/fonts/BricolageGrotesque-SemiBold.woff2) format('woff2'), url(../assets/fonts/BricolageGrotesque-SemiBold.ttf) format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Bricolage Grotesque'; src: url(../assets/fonts/BricolageGrotesque-Bold.woff2) format('woff2'), url(../assets/fonts/BricolageGrotesque-Bold.ttf) format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Onest'; src: url(../assets/fonts/Onest-Regular.woff2) format('woff2'), url(../assets/fonts/Onest-Regular.ttf) format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Onest'; src: url(../assets/fonts/Onest-Medium.woff2) format('woff2'), url(../assets/fonts/Onest-Medium.ttf) format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Onest'; src: url(../assets/fonts/Onest-SemiBold.woff2) format('woff2'), url(../assets/fonts/Onest-SemiBold.ttf) format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Onest'; src: url(../assets/fonts/Onest-Bold.woff2) format('woff2'), url(../assets/fonts/Onest-Bold.ttf) format('truetype'); font-weight: 700; font-display: swap; }

:root {
  --lime: #D5FF85; --lime-2: #C4F266; --lime-ink: #213B0B;
  --ink: #0B1714; --ink-2: #16332F; --muted: #56706B; --line: #E1E9E6;
  --bg: #FFFFFF; --soft: #F3F6F5; --soft-2: #EAF0EE;
  --green: #087F5B; --mint: #70E5B4;
  --night: #07131A; --night-2: #0D202A; --night-3: #153240; --night-text: #E8F3EF; --night-muted: #9DB5AE; --night-line: rgba(255,255,255,.09);
  --mint-soft: #DDF5EA;
  --violet: #6A53C9; --violet-soft: #EEEBFF; --violet-light: #B7ABFF;
  --coral: #FF8A65; --coral-ink: #A8461F; --coral-soft: #FFE9E1;
  --f-inc: #D5FF85; --f-gap: #FF8A65; --f-urg: #B7ABFF;
  --r-sm: 12px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-2xl: 40px;
  --shadow-1: 0 1px 2px rgba(11,23,20,.06);
  --shadow-2: 0 2px 6px rgba(11,23,20,.05), 0 12px 32px rgba(11,23,20,.08);
  --shadow-3: 0 2px 4px rgba(11,23,20,.06), 0 18px 40px -16px rgba(11,23,20,.22);
  --ease: cubic-bezier(.16,1,.3,1); --ease-in-out: cubic-bezier(.65,0,.35,1);
  --display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --text: 'Onest', 'Segoe UI', system-ui, sans-serif;
  --gutter: 20px;
  --nav-h: 88px;
}
@media (min-width: 900px) { :root { --gutter: 32px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink-2); font: 400 16px/1.6 var(--text); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 6px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 12px 16px; border-radius: 999px; background: var(--ink); color: #fff; text-decoration: none; }
.skip:focus { top: 12px; }
.wrap { width: min(1240px, 100% - 2 * var(--gutter)); margin-inline: auto; }

/* Scroll progress: a thin line along the bottom edge of the floating nav */
.progress { position: absolute; left: 32px; right: 32px; bottom: -1px; height: 2px; overflow: hidden; border-radius: 999px; pointer-events: none; }
.progress span { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: var(--green); }

/* Type */
h2 { font: 700 clamp(28px, 3.2vw, 40px)/1.12 var(--display); letter-spacing: -.03em; color: var(--ink); text-wrap: balance; }
.lead { margin-top: 16px; max-width: 52ch; color: var(--muted); font-size: 18px; line-height: 1.55; text-wrap: pretty; }
.bank h2, .formula h2, .metrics h2, .faq h2 { max-width: 20ch; }
.section-head { max-width: 760px; margin-bottom: clamp(40px, 6vw, 72px); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .lead { margin-inline: auto; }
.hl { white-space: nowrap; box-shadow: inset 0 -.32em 0 var(--lime); }

/* Buttons */
.btn { --bh: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: var(--bh); padding: 0 24px; border: 1px solid transparent; border-radius: 999px; font: 600 16px/1 var(--text); text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform .25s var(--ease), background-color .2s, box-shadow .25s var(--ease); will-change: transform; }
.btn .i { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.btn:hover .i { transform: translateX(3px); }
.btn:active { transform: scale(.97); }
.btn-sm { --bh: 42px; padding: 0 20px; font-size: 14px; }
.btn-lg { --bh: 56px; padding: 0 28px; font-size: 16px; }
.btn-block { width: 100%; }
.btn-dark { background: var(--ink); color: #fff; box-shadow: 0 10px 24px -10px rgba(11,23,20,.6); }
.btn-dark:hover { background: #000; }
.btn-ghost { border-color: rgba(11,23,20,.18); background: rgba(255,255,255,.6); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-white { background: #fff; color: var(--ink); }
.btn-white .i { fill: currentColor; stroke: none; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; text-decoration: none; }
.link-arrow .i { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.link-arrow:hover .i { transform: translateY(3px); }

/* Chips and tags */
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 999px; font: 600 12px/1.2 var(--text); white-space: nowrap; }
.tag .i { width: 14px; height: 14px; }
.tag-lime { background: var(--lime); color: var(--lime-ink); }
.tag-ink { background: var(--ink); color: #fff; }

/* Header: a floating pill, centred, that tightens a little on scroll. A white highlight slides behind the links. */
.nav { position: fixed; inset: 12px 0 auto; z-index: 50; pointer-events: none; }
.nav-row { position: relative; display: flex; align-items: center; gap: 16px; width: min(1120px, 100% - 2 * var(--gutter)); height: 64px; margin: 0 auto; padding: 0 8px 0 20px; border: 1px solid var(--line); border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(11,23,20,.04), 0 10px 30px -14px rgba(11,23,20,.22); pointer-events: auto; transition: width .6s var(--ease), height .6s var(--ease), box-shadow .4s var(--ease); }
.nav.is-scrolled .nav-row { width: min(1064px, 100% - 2 * var(--gutter)); height: 58px; box-shadow: 0 1px 2px rgba(11,23,20,.06), 0 16px 40px -16px rgba(11,23,20,.3); }
.brand { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 700 20px/1 var(--display); letter-spacing: -.02em; text-decoration: none; color: var(--ink); }
.brand.is-light { color: #fff; }
.brand img { width: 30px; height: 30px; border-radius: 8px; }
.nav-links { position: relative; display: flex; gap: 2px; margin-inline: auto; padding: 4px; border-radius: 999px; background: var(--soft); }
.nav-links a { position: relative; z-index: 1; padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 500; line-height: 1.5; text-decoration: none; color: var(--muted); white-space: nowrap; transition: color .25s; }
.nav-links a:hover, .nav-links a.is-active { color: var(--ink); }
.nav-indicator { position: absolute; top: 4px; bottom: 4px; left: 0; width: var(--w, 0); border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(11,23,20,.08), 0 0 0 1px var(--line); opacity: 0; transform: translateX(var(--x, 0)); transition: transform .5s var(--ease), width .5s var(--ease), opacity .3s; }
.nav-indicator.is-on { opacity: 1; }
.nav-actions { display: flex; align-items: center; gap: 4px; }
.nav .btn-ghost { border-color: transparent; background: none; }
.nav .btn-ghost:hover { background: var(--soft); }
.nav-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: var(--ink); color: #fff; cursor: pointer; }
.menu { position: absolute; top: calc(100% + 8px); left: 0; right: 0; display: grid; gap: 2px; width: min(1120px, 100% - 2 * var(--gutter)); margin: 0 auto; padding: 8px; border: 1px solid var(--line); border-radius: 28px; background: #fff; box-shadow: var(--shadow-3); pointer-events: auto; transform-origin: top center; animation: menu-in .35s var(--ease); }
.menu[hidden] { display: none; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
.menu a:not(.btn) { display: flex; align-items: center; min-height: 52px; padding: 0 16px; border-radius: 20px; font: 600 17px/1.3 var(--display); color: var(--ink); text-decoration: none; transition: background-color .2s; }
.menu a:not(.btn):hover { background: var(--soft); }
.menu .btn { margin-top: 6px; }
@media (max-width: 1240px) { .nav-links a { padding-inline: 11px; } }
@media (max-width: 1120px) {
  .nav-links, .nav-actions .btn-ghost { display: none; }
  .nav-actions { margin-left: auto; }
  .nav-toggle { display: inline-flex; }
}
@media (max-width: 640px) {
  .nav { top: 10px; }
  .nav-row, .nav.is-scrolled .nav-row { height: 56px; padding: 0 6px 0 16px; }
  .progress { left: 24px; right: 24px; }
}
@media (max-width: 420px) { .nav-actions .btn-dark { display: none; } }

/* Reveal on scroll (only with JS; without it everything is visible) */
/* translate (not transform) so tilted cards keep their own transform */
.js .reveal { opacity: 0; translate: 0 28px; transition: opacity .9s var(--ease), translate .9s var(--ease), transform .5s var(--ease); transition-delay: calc(var(--d, 0) * 90ms), calc(var(--d, 0) * 90ms), 0s; }
.js .reveal[data-delay="1"] { --d: 1; } .js .reveal[data-delay="2"] { --d: 2; } .js .reveal[data-delay="3"] { --d: 3; } .js .reveal[data-delay="4"] { --d: 4; }
.js .reveal.is-in { opacity: 1; translate: none; }

/* Phones (iPhone 17 proportions): --pw sets the width, everything scales from it */
.phone { --pw: 260px; position: absolute; width: var(--pw); padding: calc(var(--pw) * .034); border-radius: calc(var(--pw) * .17); background: #0A0C0F; box-shadow: inset 0 0 0 1.5px #2C3137, 0 50px 90px -30px rgba(7,19,26,.5), 0 16px 32px -14px rgba(7,19,26,.3); transform: translate3d(var(--tx, 0), var(--ty, 0), 0) rotate(var(--rot, 0deg)); transition: transform .6s var(--ease); }
.phone .island { position: absolute; z-index: 3; top: calc(var(--pw) * .06); left: 50%; width: 31%; height: calc(var(--pw) * .092); transform: translateX(-50%); border-radius: 999px; background: #000; }
.phone .screen { position: relative; overflow: hidden; border-radius: calc(var(--pw) * .138); background: #F3F7F8; }
.phone .screen img { display: block; width: 100%; height: auto; }
.statusbar { display: flex; align-items: center; justify-content: space-between; height: calc(var(--pw) * .13); padding: 0 11%; color: var(--ink); font: 600 calc(var(--pw) * .05)/1 var(--text); }
.statusbar.is-light { color: #fff; }
.sb-icons { width: calc(var(--pw) * .19); height: calc(var(--pw) * .045); background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 12'%3E%3Cpath d='M1 11h2.6V8H1zM5.2 11h2.6V6H5.2zM9.4 11H12V3.5H9.4zM13.6 11h2.6V1h-2.6z'/%3E%3Cpath d='M24 3.2a8 8 0 0 1 10 0l-1.3 1.6a6 6 0 0 0-7.4 0zM26.2 6a4.5 4.5 0 0 1 5.6 0L29 9.6z'/%3E%3Crect x='38' y='1.5' width='14.5' height='9' rx='2.6' fill='none' stroke='black'/%3E%3Crect x='39.6' y='3.1' width='10.4' height='5.8' rx='1.4'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 12'%3E%3Cpath d='M1 11h2.6V8H1zM5.2 11h2.6V6H5.2zM9.4 11H12V3.5H9.4zM13.6 11h2.6V1h-2.6z'/%3E%3Cpath d='M24 3.2a8 8 0 0 1 10 0l-1.3 1.6a6 6 0 0 0-7.4 0zM26.2 6a4.5 4.5 0 0 1 5.6 0L29 9.6z'/%3E%3Crect x='38' y='1.5' width='14.5' height='9' rx='2.6' fill='none' stroke='black'/%3E%3Crect x='39.6' y='3.1' width='10.4' height='5.8' rx='1.4'/%3E%3C/svg%3E") center/contain no-repeat; }

/* HERO */
.hero { padding: calc(var(--nav-h) + 56px) 0 clamp(56px, 8vw, 96px); }
.hero-block { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 24px; min-height: 620px; padding: clamp(40px, 5vw, 72px) clamp(28px, 4.5vw, 64px); border-radius: var(--r-2xl); background: var(--lime); }
.hero-copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.hero-title { font: 700 clamp(40px, 5.2vw, 64px)/1 var(--display); letter-spacing: -.04em; color: var(--ink); text-wrap: balance; }
.mark { position: relative; display: inline-block; }
.scribble { position: absolute; left: -4%; bottom: -.12em; width: 108%; height: .38em; overflow: visible; fill: none; stroke: var(--ink); stroke-width: 3.2; stroke-linecap: round; }
.scribble path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--ease) .6s; }
.scribble path + path { transition-delay: .95s; stroke-width: 2.4; }
.hero-title.is-in .scribble path, .no-js .scribble path { stroke-dashoffset: 0; }
.hero-lead { margin-top: 20px; max-width: 42ch; color: #24403A; font-size: 18px; line-height: 1.55; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 32px; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 12px 20px; margin-top: 32px; font-size: 14px; font-weight: 600; color: var(--ink); }
.hero-proof li { display: inline-flex; align-items: center; gap: 8px; }
.hero-proof .i { width: 18px; height: 18px; padding: 4px; border-radius: 999px; background: var(--ink); color: var(--lime); stroke-width: 3; }
.hero-doodle { position: absolute; right: -6px; bottom: 112px; width: 132px; fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.hero-doodle path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.6s var(--ease) 1.2s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.hero-visual { position: relative; z-index: 1; min-height: 560px; }
.hero-phone-a { --pw: 250px; left: 2%; top: -118px; --rot: -4deg; }
.hero-phone-b { --pw: 262px; right: 0; top: -40px; --rot: 5deg; }

/* Dark metrics screen built in HTML */
.phone .screen.dui { display: flex; flex-direction: column; aspect-ratio: 1 / 2.294; padding-bottom: 6%; background: #0B1A21; color: #fff; font-size: calc(var(--pw) * .046); }
.dui > *:not(.statusbar) { margin-inline: 8%; }
.dui-top { display: flex; align-items: center; justify-content: space-between; margin-top: 6%; color: var(--night-muted); font-size: .9em; }
.dui-pill { padding: .3em .7em; border-radius: 999px; background: rgba(255,255,255,.08); color: #fff; font-size: .82em; }
.dui-kpi { display: flex; align-items: baseline; gap: .1em; margin-top: .4em; }
.dui-kpi strong { font: 700 3.4em/1 var(--display); letter-spacing: -.04em; }
.dui-kpi span { font-size: 1.4em; color: var(--night-muted); }
.dui-trend { display: inline-flex; align-items: center; gap: .35em; margin-top: .5em; color: var(--lime); font-size: .82em; font-weight: 600; }
.dui-trend .i { width: 1.2em; height: 1.2em; }
.dui-chart { width: 84%; margin-top: 7%; overflow: visible; }
.dui-grid line { stroke: rgba(255,255,255,.08); stroke-dasharray: 3 5; }
.dui-area { fill: var(--lime); fill-opacity: .14; }
.dui-line { fill: none; stroke: var(--lime); stroke-width: 3; stroke-linecap: round; }
.dui-dot { fill: var(--lime); stroke: #0B1A21; stroke-width: 3; animation: pulse 2s ease-in-out infinite; transform-origin: 280px 22px; }
@keyframes pulse { 50% { transform: scale(1.35); } }
.dui-seg { display: flex; justify-content: space-between; margin-top: 6%; padding: .25em; border-radius: .9em; background: rgba(255,255,255,.06); font-size: .8em; color: var(--night-muted); }
.dui-seg span { flex: 1; padding: .45em 0; border-radius: .7em; text-align: center; }
.dui-seg .on { background: rgba(255,255,255,.12); color: #fff; font-weight: 600; }
.dui-areas { display: grid; gap: .75em; margin-top: 8%; }
.dui-areas div { display: grid; grid-template-columns: 1fr auto; gap: .35em; font-size: .8em; }
.dui-areas span { color: var(--night-muted); }
.dui-areas i { position: relative; grid-column: 1 / -1; height: .38em; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.08); }
.dui-areas i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 100%); border-radius: inherit; background: var(--mint); }
.dui-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6em; margin-top: auto; }
.dui-btn { padding: .85em 0; border-radius: .9em; text-align: center; font-size: .82em; font-weight: 700; }
.dui-btn.is-coral { background: var(--coral); color: #3A1206; }
.dui-btn.is-lime { background: var(--lime); color: var(--lime-ink); }

/* Floating chips (reference: Nurture360) */
.float { position: absolute; z-index: 4; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-2); color: var(--ink); transform: translate3d(var(--tx, 0), var(--ty, 0), 0); transition: transform .6s var(--ease); }
.float b { display: block; font: 700 16px/1.25 var(--display); }
.float small { display: block; color: var(--muted); font-size: 12px; line-height: 1.3; }
.float > .i { width: 22px; height: 22px; color: var(--violet); }
.js .float { animation: bob 6s ease-in-out infinite; }
.float:nth-of-type(2n) { animation-delay: -3s; }
@keyframes bob { 50% { translate: 0 -10px; } }
.float-queue { display: block; left: 6%; bottom: -8px; width: 250px; padding: 16px; }
.float-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; font-size: 14px; font-weight: 700; }
.float-queue ol { display: grid; gap: 8px; }
.float-queue li { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 12px; padding: 8px 8px; border-radius: 12px; background: var(--soft); font-size: 14px; font-weight: 600; }
.float-queue li b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: #fff; font: 700 14px/1 var(--display); }
.float-queue li:first-child { background: var(--ink); color: #fff; }
.float-queue li:first-child b { background: var(--lime); color: var(--lime-ink); }
.float-queue em { font-style: normal; font-variant-numeric: tabular-nums; color: inherit; opacity: .8; }
.float-ok { right: -6%; top: -64px; }
.dot-ok { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; background: var(--green); color: #fff; }
.dot-ok .i { width: 18px; height: 18px; stroke-width: 3; }
.float-review { left: 46%; bottom: -56px; }
.float-goal { right: -4%; bottom: 150px; }
.ring { width: 44px; height: 44px; transform: rotate(-90deg); fill: none; stroke-width: 5; }
.ring circle { stroke: var(--soft-2); }
.ring .ring-fill { stroke: var(--green); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s var(--ease) .8s; }
.is-ready .ring .ring-fill { stroke-dashoffset: calc(1 - var(--p)); }

/* Marquee */
.strip { padding: 8px 0 clamp(56px, 8vw, 96px); overflow: hidden; }
.strip-label { margin-bottom: 24px; text-align: center; color: var(--muted); font-size: 14px; font-weight: 500; }
.marquee { --gap: 56px; display: flex; overflow: hidden; }
.marquee + .marquee { margin-top: 20px; }
.marquee-track { display: flex; flex: none; gap: var(--gap); padding-right: var(--gap); animation: marquee var(--dur, 32s) linear infinite; }
.marquee.is-reverse .marquee-track { animation-direction: reverse; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee span { font: 700 clamp(20px, 2.2vw, 28px)/1 var(--display); letter-spacing: -.02em; color: #9DB0AA; white-space: nowrap; transition: color .2s; }
.marquee span:hover { color: var(--ink); }
.marquee.is-soft span { font: 500 16px/1 var(--text); letter-spacing: 0; color: var(--muted); padding: 12px 20px; border: 1px solid var(--line); border-radius: 999px; }
@keyframes marquee { to { transform: translateX(-100%); } }



/* PAIN: lock screen after a shift, notifications arrive one by one */
.pain { padding: clamp(24px, 4vw, 48px) 0 clamp(96px, 12vw, 150px); }
.pain-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.pain-list { display: grid; max-width: 480px; margin-top: 32px; border-top: 1px solid var(--line); }
.pain-list li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 2px 16px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--line); }
.pain-list .i { grid-row: span 2; width: 32px; height: 32px; padding: 8px; border-radius: 999px; background: var(--coral-soft); color: var(--coral-ink); stroke-width: 2.8; }
.pain-list b { font: 700 18px/1.3 var(--display); color: var(--ink); }
.pain-list span { color: var(--muted); }
.pain-visual { display: grid; justify-items: center; }
.pain-phone { --pw: 312px; position: relative; }
.phone .screen.lock { display: flex; flex-direction: column; aspect-ratio: 780 / 1688; background: var(--night-2); color: #fff; font-size: calc(var(--pw) * .04); }
.lock-date { margin-top: 5%; text-align: center; color: var(--night-text); font-weight: 500; font-size: 1.05em; }
.lock-time { text-align: center; font: 700 calc(var(--pw) * .24)/1.05 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.lock-stack { display: grid; gap: .55em; margin: auto 4.5% 0; }
.note { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .8em; align-items: center; padding: .85em .9em; border-radius: 1.25em; background: #183744; }
.note-app { display: grid; place-items: center; width: 2.5em; height: 2.5em; border-radius: .7em; background: var(--c); color: var(--ink); }
.note-app .i { width: 1.35em; height: 1.35em; stroke-width: 2.2; }
.note-app.is-coral { --c: var(--coral); } .note-app.is-violet { --c: var(--violet-light); } .note-app.is-lime { --c: var(--lime); }
.note-app.is-soft { --c: var(--coral-soft); color: var(--coral-ink); } .note-app.is-mint { --c: var(--mint); }
.note p { display: flex; align-items: baseline; justify-content: space-between; gap: .5em; font-size: .95em; line-height: 1.3; }
.note time { color: var(--night-muted); font-size: .9em; }
.note div > span { display: block; font-size: .95em; line-height: 1.3; color: #D2E2DD; }
.note em { display: inline-block; margin-top: .35em; padding: .15em .6em; border-radius: 999px; background: var(--coral); color: var(--ink); font-size: .8em; font-style: normal; font-weight: 700; }
.note.is-stack { box-shadow: 0 .5em 0 -.2em #12303B, 0 1em 0 -.45em #0F2832; }
.lock-more { margin-top: 1.5em; text-align: center; color: var(--night-muted); font-size: .85em; }
.lock-foot { display: flex; justify-content: space-between; padding: 6% 10% 9%; }
.lock-foot span { display: grid; place-items: center; width: 2.9em; height: 2.9em; border-radius: 999px; background: #183744; }
.lock-foot .i { width: 1.25em; height: 1.25em; }
.js .note { opacity: 0; transform: translateY(-14px) scale(.96); transition: opacity .6s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--n) * 380ms + 200ms); }
.js .lock.is-live .note { opacity: 1; transform: none; }
.js .lock-more { opacity: 0; transition: opacity .6s var(--ease) 2.2s; }
.js .lock.is-live .lock-more { opacity: 1; }

.pivot { margin-top: clamp(64px, 8vw, 96px); text-align: center; font: 700 clamp(28px, 3.2vw, 40px)/1.2 var(--display); letter-spacing: -.03em; color: var(--ink); text-wrap: balance; }
.pivot mark { color: inherit; background: none; box-shadow: inset 0 -.3em 0 var(--lime); }

/* QUEUE: formula chips */
.formula { padding: clamp(96px, 12vw, 150px) 0; }
.formula-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.equation { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 32px; }
.eq-chip { display: grid; gap: 2px; padding: 12px 16px; border-radius: var(--r-md); color: var(--ink); }
.eq-chip b { font: 700 18px/1.2 var(--display); }
.eq-chip small { color: #34504A; font-size: 14px; }
.eq-chip.is-inc { background: var(--lime); }
.eq-chip.is-gap { background: var(--coral-soft); }
.eq-chip.is-urg { background: var(--violet-soft); }
.eq-x { color: var(--muted); font: 600 20px/1 var(--display); }

/* FINAL: flat lime block */
.final { padding: 0 0 clamp(64px, 8vw, 96px); }
.final-block { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 32px; min-height: 440px; overflow: hidden; padding: clamp(40px, 5vw, 72px); border-radius: var(--r-2xl); background: var(--lime); }
.final-copy { position: relative; z-index: 1; align-self: center; }
.final-copy h2 { max-width: 16ch; }
.final-sub { margin-top: 12px; color: #2E4A1B; font-size: 18px; }
.final-copy .btn { margin-top: 32px; }
.final-visual { position: relative; }
.final-phone { --pw: 280px; left: 50%; top: 8px; margin-left: -140px; }

/* FOOTER */
.footer { padding: 56px 0 32px; background: var(--ink); color: var(--night-text); }

/* NUMBERS */
.numbers { padding: clamp(56px, 8vw, 96px) 0; border-bottom: 1px solid var(--line); }
.numbers-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.num { padding: 8px 28px; border-left: 1px solid var(--line); }
.num:first-child { border-left: 0; padding-left: 0; }
.num strong { display: block; font: 700 clamp(32px, 3.2vw, 40px)/1 var(--display); letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.num p { margin-top: 8px; color: var(--muted); font-size: 16px; line-height: 1.5; }

/* Dot grid backgrounds (reference: Nurture360) */

/* QUESTION BANK */
.bank { padding: clamp(96px, 12vw, 152px) 0; }
.bank-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(40px, 6vw, 88px); align-items: center; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 28px; }
.crumbs span { padding: 8px 12px; border-radius: 999px; background: var(--soft); font-size: 14px; font-weight: 600; color: var(--muted); }
.crumbs span.on { background: var(--ink); color: var(--lime); }
.crumbs .i { width: 14px; height: 14px; color: #A9B9B4; }
.pills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 28px; max-width: 520px; }
.pills li { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 12px 16px; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-1); font-size: 14px; font-weight: 600; color: var(--ink); }
.pills .i { width: 30px; height: 30px; padding: 8px; border-radius: 12px; background: var(--ink); color: var(--lime); }
.feature-list { display: grid; gap: 24px; margin-top: 40px; }
.feature-list li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; }
.fl-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--ink); color: var(--lime); }
.feature-list h3 { font: 700 18px/1.3 var(--display); color: var(--ink); }
.feature-list p { margin-top: 4px; color: var(--muted); font-size: 16px; }
.bank-demo { position: relative; min-height: 640px; }
.bank-phone { --pw: 280px; right: 0; top: 0; --rot: 6deg; }
.qcard { position: absolute; z-index: 3; left: 0; top: 70px; width: min(440px, 88%); padding: 24px; border-radius: 24px; background: #fff; box-shadow: var(--shadow-3); border: 1px solid rgba(11,23,20,.06); transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.qcard-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 16px; }
.qcard-meta { color: var(--muted); font-size: 12px; font-weight: 600; }
.qcard-stem { color: var(--ink); font: 600 18px/1.45 var(--display); }
.qcard-options { display: grid; gap: 8px; margin-top: 16px; }
.qcard-options button { display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 8px 12px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; text-align: left; cursor: pointer; transition: border-color .2s, background-color .2s, transform .2s var(--ease); }
.qcard-options button:hover:not(:disabled) { border-color: var(--ink); transform: translateX(3px); }
.qcard-options button:disabled { cursor: default; }
.letter { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--soft); font: 700 14px/1 var(--display); color: var(--ink); transition: background-color .2s, color .2s; }
.opt { font-size: 14px; font-weight: 500; color: var(--ink); }
.why { max-height: 0; margin: 0 4px; padding-left: 44px; overflow: hidden; color: var(--muted); font-size: 14px; line-height: 1.45; opacity: 0; transition: max-height .5s var(--ease), opacity .4s, margin .4s var(--ease); }
.qcard-options li.is-shown .why { max-height: 80px; opacity: 1; margin-top: 8px; }
.qcard-options li.is-correct button { border-color: var(--green); background: #E6F7EF; }
.qcard-options li.is-correct .letter { background: var(--green); color: #fff; }
.qcard-options li.is-wrong button { border-color: var(--coral); background: var(--coral-soft); }
.qcard-options li.is-wrong .letter { background: var(--coral); color: #fff; }
.qcard-result { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--line); animation: rise .5s var(--ease); }
.qcard-result[hidden] { display: none; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.qcard-verdict { font: 700 18px/1.3 var(--display); color: var(--ink); }
.qcard-key { margin-top: 8px; color: var(--muted); font-size: 14px; }
.qcard-key b { color: var(--ink); }
.qcard-reset { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin-top: 12px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 14px; font-weight: 600; cursor: pointer; }
.qcard-reset .i { width: 16px; height: 16px; }

/* STORY: sticky phone */
.story { padding: clamp(96px, 12vw, 150px) 0; background: var(--soft); }
.story-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); }
.story-step { display: flex; flex-direction: column; justify-content: center; min-height: 62vh; padding: 24px 0; opacity: .28; transition: opacity .5s var(--ease); }
.story-step.is-active { opacity: 1; }
.step-num { display: inline-grid; place-items: center; width: 48px; height: 48px; margin-bottom: 20px; border-radius: 16px; background: var(--ink); color: var(--lime); font: 700 16px/1 var(--display); }
.story-step h3 { font: 700 24px/1.25 var(--display); letter-spacing: -.02em; color: var(--ink); }
.story-step p { margin-top: 8px; max-width: 40ch; color: var(--muted); font-size: 18px; }
.step-shot { display: none; }
.story-device { position: relative; }
.story-sticky { --sh: min(660px, calc(100vh - var(--nav-h) - 40px)); position: sticky; top: calc(var(--nav-h) + (100vh - var(--nav-h) - var(--sh)) / 2); display: grid; justify-items: center; height: var(--sh); }
.story-backdrop { position: absolute; inset: 60px 0 40px; border-radius: 40px; background: var(--lime); transform: rotate(-3deg); }
.story-phone { --pw: calc(var(--sh) * .445); position: relative; margin-top: 12px; --rot: 2deg; }
.story-screens { position: relative; }
.story-screens img { transition: opacity .6s var(--ease), transform .8s var(--ease); }
.story-screens img:not(:first-child) { position: absolute; inset: 0; }
.story-screens img:not(.is-on) { opacity: 0; transform: scale(1.04); }
.story-rail { position: absolute; left: 8px; top: 120px; bottom: 120px; width: 3px; border-radius: 3px; background: rgba(11,23,20,.1); overflow: hidden; }
.story-rail-fill { display: block; width: 100%; height: 100%; transform-origin: 50% 0; transform: scaleY(var(--sp, 0)); background: var(--ink); }
.story-caption { position: absolute; right: 0; bottom: 8px; font: 700 14px/1 var(--display); color: var(--muted); }
.story-count { color: var(--ink); }

/* FORMULA */
.formula { padding: clamp(96px, 12vw, 152px) 0; }

/* CYCLE */
.cycle { padding: clamp(96px, 12vw, 152px) 0; }
.arc { position: relative; max-width: 760px; margin: 0 auto 8px; }
.arc svg { display: block; width: 100%; overflow: visible; }
.arc-path { fill: none; stroke: #BFCFCA; stroke-width: 2.5; stroke-dasharray: 10 12; stroke-linecap: round; }
.arc-start { fill: #CBD7D3; } .arc-end { fill: var(--green); }
.arc-marker circle:first-child { fill: var(--lime); stroke: var(--ink); stroke-width: 2.5; }
.arc-marker circle:last-child { fill: var(--ink); }
.arc-label { position: absolute; bottom: -2px; color: var(--muted); font-size: 14px; font-weight: 600; }
.arc-label.is-start { left: 0; } .arc-label.is-end { right: 0; }
.cycle-head { margin-top: 20px; }
.cycle-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.cycle-steps li { padding: 28px; border-radius: var(--r-lg); background: var(--soft); transition: background-color .4s, color .4s; }
.cycle-steps li.is-lit { background: var(--ink); color: #fff; }
.cycle-steps li span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: #fff; font: 700 16px/1 var(--display); color: var(--ink); transition: background-color .4s; }
.cycle-steps li.is-lit span { background: var(--lime); }
.cycle-steps h3 { margin-top: 24px; font: 700 20px/1.3 var(--display); letter-spacing: -.01em; }
.cycle-steps p { margin-top: 8px; color: var(--muted); font-size: 16px; transition: color .4s; }
.cycle-steps li.is-lit p { color: var(--night-muted); }

/* TOOLS: bento */
.tools { padding: clamp(96px, 12vw, 152px) 0 clamp(64px, 8vw, 112px); }
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.card { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; min-height: 300px; padding: 28px; overflow: hidden; border-radius: 24px; background: var(--soft); transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.card:hover { box-shadow: var(--shadow-2); }
.span-2 { grid-column: span 2; }
.span-4 { grid-column: 1 / -1; min-height: 260px; flex-direction: row; align-items: center; }
.span-4 .card-copy { flex: 1; }
.card h3 { font: 700 20px/1.3 var(--display); letter-spacing: -.01em; color: var(--ink); }
.card p { margin-top: 8px; max-width: 36ch; color: var(--muted); font-size: 16px; }
.card-lime { background: var(--lime); }
.card-lime p { color: #2E4A1B; }
.card-dark { background: var(--night-2); }
.card-dark h3 { color: #fff; } .card-dark p { color: var(--night-muted); }
.card-soft { background: var(--soft-2); }
.card-lime-soft { background: #EDFBCB; }
.mini-focus { display: flex; align-items: center; gap: 16px; }
.focus-play { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 999px; background: var(--ink); color: var(--lime); }
.focus-play .i { width: 26px; height: 26px; fill: currentColor; stroke: none; margin-left: 4px; }
.card.is-in .focus-play { animation: ping 2.4s var(--ease) infinite; }
@keyframes ping { 0%, 100% { box-shadow: 0 0 0 0 rgba(11,23,20,.18); } 60% { box-shadow: 0 0 0 16px rgba(11,23,20,0); } }
.mini-focus b { display: block; font: 700 32px/1 var(--display); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.mini-focus small { color: var(--muted); font-size: 14px; }
.span-2 { flex-direction: row; align-items: flex-end; }
.span-2 .card-copy { flex: 1; align-self: flex-start; }
.mini-errors { display: grid; gap: 8px; width: min(320px, 55%); }
.mini-errors div { display: grid; grid-template-columns: 1fr auto; padding: 12px 12px; border-radius: 12px; background: rgba(255,255,255,.85); box-shadow: var(--shadow-1); }
.mini-errors b { font-size: 14px; color: var(--ink); } .mini-errors small { grid-row: 2; color: var(--muted); font-size: 12px; }
.mini-errors em { grid-row: 1 / 3; grid-column: 2; align-self: center; padding: 4px 12px; border-radius: 999px; background: var(--coral-soft); color: var(--coral-ink); font-size: 12px; font-style: normal; font-weight: 700; }
.js .card.is-in .mini-errors div { animation: slidein .7s var(--ease) both; }
.js .card.is-in .mini-errors div:nth-child(2) { animation-delay: .12s; } .js .card.is-in .mini-errors div:nth-child(3) { animation-delay: .24s; }
@keyframes slidein { from { opacity: 0; transform: translateX(30px); } }
.mini-timeline { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; row-gap: 12px; }
.mini-timeline::before { content: ""; position: absolute; left: 10%; right: 10%; top: 9px; height: 2px; height: 0; border-top: 2px dashed #BFCFCA; }
.mini-timeline i { position: relative; justify-self: center; width: 18px; height: 18px; border-radius: 999px; background: #fff; border: 2px solid var(--ink); transition: background-color .3s; }
.card.is-in .mini-timeline i { animation: fillDot .4s var(--ease) both; }
.card.is-in .mini-timeline i:nth-child(2) { animation-delay: .25s; } .card.is-in .mini-timeline i:nth-child(3) { animation-delay: .5s; } .card.is-in .mini-timeline i:nth-child(4) { animation-delay: .75s; } .card.is-in .mini-timeline i:nth-child(5) { animation-delay: 1s; }
@keyframes fillDot { to { background: var(--lime); } }
.mini-timeline span { justify-self: center; font: 700 14px/1 var(--display); color: var(--ink); }
.mini-flash { position: relative; height: 130px; border: 0; padding: 0; background: none; cursor: pointer; perspective: 800px; }
.flash-face { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; border-radius: 16px; background: #fff; box-shadow: var(--shadow-2); font: 600 16px/1.35 var(--display); color: var(--ink); text-align: center; backface-visibility: hidden; transition: transform .7s var(--ease); }
.flash-face.is-back { background: var(--ink); color: var(--lime); transform: rotateY(180deg); }
.mini-flash.is-flipped .flash-face:not(.is-back) { transform: rotateY(-180deg); }
.mini-flash.is-flipped .flash-face.is-back { transform: rotateY(0); }
.mini-bars { display: flex; align-items: flex-end; gap: 12px; height: 120px; }
.mini-bars i { flex: 1; height: calc(var(--h) * 100%); border-radius: 12px 12px 4px 4px; background: var(--mint); transform-origin: bottom; transform: scaleY(.05); transition: transform 1s var(--ease); }
.mini-bars i:last-child { background: var(--lime); }
.card.is-in .mini-bars i { transform: none; }
.card.is-in .mini-bars i:nth-child(2) { transition-delay: .08s; } .card.is-in .mini-bars i:nth-child(3) { transition-delay: .16s; } .card.is-in .mini-bars i:nth-child(4) { transition-delay: .24s; } .card.is-in .mini-bars i:nth-child(5) { transition-delay: .32s; } .card.is-in .mini-bars i:nth-child(6) { transition-delay: .4s; }
.mini-timer { display: flex; align-items: center; gap: 16px; }
.mini-timer svg { width: 76px; height: 76px; transform: rotate(-90deg); fill: none; stroke-width: 6; }
.mini-timer circle { stroke: var(--soft-2); }
.mini-timer .t-fill { stroke: var(--ink); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: .7; transition: stroke-dashoffset 1s linear; }
.mini-timer b { font: 700 24px/1 var(--display); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.mini-podium { display: flex; align-items: flex-end; justify-content: center; gap: 8px; height: 120px; }
.mini-podium div { display: flex; align-items: flex-start; justify-content: center; width: 30%; height: calc(var(--h) * 100%); padding-top: 12px; border-radius: 12px 12px 4px 4px; background: #fff; box-shadow: var(--shadow-1); transform-origin: bottom; transform: scaleY(.1); transition: transform .9s var(--ease); }
.mini-podium div.is-first { background: var(--lime); }
.mini-podium span { display: grid; place-items: center; min-width: 32px; height: 32px; padding: 0 8px; border-radius: 999px; background: var(--violet-soft); color: var(--violet); font: 700 12px/1 var(--display); }
.mini-podium div:last-child span { background: var(--violet); color: #fff; }
.card.is-in .mini-podium div { transform: none; }
.card.is-in .mini-podium div:nth-child(1) { transition-delay: .15s; } .card.is-in .mini-podium div:nth-child(3) { transition-delay: .3s; }
.mini-devices { position: relative; width: min(460px, 52%); height: 210px; }
.laptop { position: absolute; left: 0; bottom: 0; width: 88%; }
.laptop-screen { height: 170px; padding: 8px 8px 0; border-radius: 12px 12px 0 0; background: #0A0C0F; overflow: hidden; }
.laptop-screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 6px 6px 0 0; }
.laptop-base { height: 12px; margin: 0 -8%; border-radius: 0 0 12px 12px; background: #C9D4D0; }
.mini-phone { --pw: 96px; right: 0; bottom: 0; }

/* METRICS */
.draw { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2s var(--ease-in-out); }
.is-in .draw, .is-in.draw, .is-ready .draw { stroke-dashoffset: 0; }
.checks { display: grid; gap: 12px; margin-top: 28px; }
.checks li { display: flex; align-items: center; gap: 12px; font-weight: 500; color: var(--ink); }
.checks .i { width: 22px; height: 22px; padding: 4px; border-radius: 999px; background: var(--lime); color: var(--ink); stroke-width: 3; }

/* Real chart cards from the platform. A white mask over each plot pulls away on entry:
   lines and maps draw left to right, bars grow from the bottom, the donut opens from the centre. */
.shot { position: relative; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-2); transform: translate3d(var(--tx, 0), var(--ty, 0), 0); }
.shot img { display: block; width: 100%; height: auto; }
.shot-mask { display: none; }
.js .shot-mask { display: block; position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); background: #fff; transform-origin: right center; transition: transform 1.8s var(--ease-in-out) .35s, clip-path 1.4s var(--ease-in-out) .35s; }
.js .shot[data-anim="bars"] .shot-mask { transform-origin: center top; }
.js .shot[data-anim="donut"] .shot-mask { clip-path: circle(72% at 50% 50%); }
.js .shot.is-in[data-anim="line"] .shot-mask { transform: scaleX(0); }
.js .shot.is-in[data-anim="bars"] .shot-mask { transform: scaleY(0); }
.js .shot.is-in[data-anim="donut"] .shot-mask { clip-path: circle(0% at 50% 50%); }
/* QUEUE: real app screen and two flat cards */
.queue-visual { --qpw: 290px; --qcw: 280px; position: relative; container-type: inline-size; }
.queue-phone { --pw: var(--qpw); position: relative; margin: 0 auto 88px; }
.why-card { display: block; left: 50%; bottom: 0; width: var(--qcw); margin-left: calc(var(--qcw) / -2); padding: 16px; }
.why-head { display: flex; align-items: center; gap: 12px; }
.why-head div { flex: 1; min-width: 0; }
.why-head em { font: 700 20px/1 var(--display); font-style: normal; color: var(--ink); font-variant-numeric: tabular-nums; }
.why-rank { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--ink); color: var(--lime); font: 700 14px/1 var(--display); }
.why-bars { display: grid; gap: 12px; margin-top: 16px; }
.why-bars li { display: grid; grid-template-columns: 80px 1fr auto; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--ink); }
.why-bars i { position: relative; height: 8px; overflow: hidden; border-radius: 999px; background: var(--soft-2); }
.why-bars i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 100%); border-radius: inherit; background: var(--c); transform-origin: left; transform: scaleX(0); transition: transform 1.2s var(--ease) .5s; }
.why-card.is-in .why-bars i::after, .no-js .why-bars i::after { transform: none; }
.why-bars small { color: var(--muted); font-size: 12px; font-weight: 500; min-width: 88px; }
.why-bars .is-inc { --c: #9CCB3B; } .why-bars .is-gap { --c: var(--coral); } .why-bars .is-urg { --c: var(--violet); }
.week-chip { display: none; right: 0; bottom: 64px; }
/* Wide column: the card sits beside the phone, level with the first subject, touching only the frame */
@container (min-width: 560px) {
  .queue-phone { --mr: max(24px, calc((100cqw - var(--qpw) - var(--qcw) + 8px) / 2)); margin: 0 var(--mr) 0 auto; }
  .why-card { --mr: max(24px, calc((100cqw - var(--qpw) - var(--qcw) + 8px) / 2)); left: auto; right: calc(var(--mr) + var(--qpw) - 8px); bottom: auto; top: 132px; margin-left: 0; }
  .week-chip { display: flex; }
}

/* METRICS: alternating rows, text on one side and real charts on the other */
.metrics { padding: clamp(64px, 8vw, 110px) 0 clamp(96px, 12vw, 150px); }
.metrics-row { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.metrics-row + .metrics-row { margin-top: clamp(80px, 10vw, 140px); }
.metrics-row.is-reverse { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.metrics-row.is-reverse .metrics-copy { order: 2; }
.metrics-visual { position: relative; padding-bottom: clamp(88px, 10vw, 136px); }
.shot-main { width: 100%; }
.shot-float { position: absolute; bottom: 0; width: 40%; box-shadow: var(--shadow-3); }
.shot-float.is-left { left: -48px; }
.shot-float.is-right { right: -48px; }
.js .shot-float { animation: bob 6s ease-in-out infinite; }

.switch { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin-top: 28px; padding: 4px; border-radius: 999px; background: #fff; box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line); }
.switch button { position: relative; z-index: 1; min-height: 44px; padding: 0 24px; border: 0; border-radius: 999px; background: none; font-size: 16px; font-weight: 600; color: var(--muted); cursor: pointer; transition: color .3s; white-space: nowrap; }
.switch button[aria-pressed="true"] { color: #fff; }
.switch em { margin-left: 4px; padding: 2px 8px; border-radius: 999px; background: var(--lime); color: var(--lime-ink); font-size: 12px; font-style: normal; }
.switch-thumb { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc((100% - 10px) / 2); border-radius: 999px; background: var(--ink); transition: transform .45s var(--ease); }
.switch.is-second .switch-thumb { transform: translateX(100%); }

/* A SHIFT DAY: stacked cards by default; JS pins it on wide screens and drives background, clock and track */
.day { position: relative; background: #E4EDE9; --day-fg: var(--ink); --day-muted: var(--muted); }
.day.is-night { --day-fg: #F3F7F5; --day-muted: var(--night-muted); }
.day-pin { padding: clamp(96px, 12vw, 152px) 0; }
.day-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: clamp(32px, 4vw, 48px); }
.day-head h2 { color: var(--day-fg); transition: color .4s; }
.day-head .lead { color: var(--day-muted); transition: color .4s; }
.day-clock { display: none; align-items: center; gap: 12px; color: var(--day-fg); font: 700 56px/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; transition: color .4s; }
.day-clock .i { width: 32px; height: 32px; stroke-width: 1.8; }
.day-track { position: relative; display: grid; gap: 16px; width: min(1240px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.moment { position: relative; min-height: 460px; overflow: hidden; padding: 28px; border-radius: var(--r-xl); background: #fff; box-shadow: var(--shadow-2); }
.moment-time { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font: 700 40px/1 var(--display); letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.moment-time span { font: 500 14px/1.3 var(--text); letter-spacing: 0; color: var(--muted); }
.moment h3 { max-width: 20ch; margin-top: 20px; font: 700 22px/1.2 var(--display); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.moment-text { max-width: 34ch; margin-top: 8px; color: var(--muted); }
.moment-phone { --pw: 230px; --ty: 28px; left: 50%; top: max(236px, calc(100% - 330px)); margin-left: -115px; }
.moment.is-active .moment-phone { --ty: 0px; }
.moment.is-sum { display: flex; flex-direction: column; justify-content: center; background: var(--lime); box-shadow: none; }
.sum-num { font: 700 clamp(72px, 7vw, 104px)/.95 var(--display); letter-spacing: -.05em; color: var(--ink); font-variant-numeric: tabular-nums; }
.sum-text { max-width: 16ch; margin-top: 12px; font: 700 22px/1.25 var(--display); letter-spacing: -.02em; color: var(--ink); }
.moment.is-sum .moment-text { color: #2E4A1B; }
.moment.is-sum .btn { align-self: flex-start; margin-top: 32px; }
.day-foot { display: none; }
.day-rail { display: block; height: 3px; overflow: hidden; border-radius: 999px; background: rgba(11,23,20,.1); }
.day-rail span { display: block; height: 100%; background: var(--day-fg); transform-origin: left; transform: scaleX(var(--dp, 0)); }
.day.is-night .day-rail { background: rgba(255,255,255,.16); }
.day.is-pinned .day-pin { position: sticky; top: 0; display: flex; flex-direction: column; justify-content: center; height: 100vh; height: 100svh; padding: calc(var(--nav-h) + 16px) 0 32px; overflow: hidden; }
.day.is-pinned .day-clock { display: flex; }
.day.is-pinned .day-track { display: flex; gap: 24px; width: max-content; margin: 0; will-change: transform; }
.day.is-pinned .moment { flex: none; width: 380px; height: clamp(380px, calc(100svh - 340px), 560px); min-height: 0; }
@media (max-height: 800px) { .day.is-pinned .day-head { margin-bottom: 24px; } }
.day.is-pinned .day-foot { display: block; margin-top: 28px; }
@media (min-width: 641px) {
  .day:not(.is-pinned) .moment { min-height: 380px; padding: 40px 50% 40px 40px; }
  .day:not(.is-pinned) .moment-phone { left: auto; right: 14%; top: 40px; margin-left: 0; }
  .day:not(.is-pinned) .moment.is-sum { min-height: 0; padding: 48px 40px; }
}

/* FAQ / objections */
.faq { padding: clamp(96px, 12vw, 152px) 0; }
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.faq-head { position: sticky; top: 110px; }
.faq-head .btn { margin-top: 32px; }
.qa { border-bottom: 1px solid var(--line); }
.qa summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; padding: 16px 0; cursor: pointer; list-style: none; font: 600 18px/1.4 var(--display); color: var(--ink); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary .i { display: grid; width: 36px; height: 36px; padding: 8px; border-radius: 999px; background: var(--soft); transition: transform .35s var(--ease), background-color .2s; }
.qa[open] summary .i { transform: rotate(180deg); background: var(--lime); }
.qa-body { overflow: hidden; }
.qa-body p { padding-bottom: 20px; max-width: 58ch; color: var(--muted); font-size: 16px; }

/* PRICING */
.pricing { padding: clamp(96px, 12vw, 152px) 0; }
.plan-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; max-width: 980px; margin: 0 auto; }
.plan { display: flex; flex-direction: column; padding: 36px; border-radius: 32px; background: var(--lime); box-shadow: var(--shadow-3); }
.plan-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.plan h3, .plan-includes h3 { font: 700 20px/1.3 var(--display); color: var(--ink); }
.plan .tag-lime { background: var(--ink); color: var(--lime); }
.price { display: flex; align-items: baseline; gap: 8px; margin-top: 40px; color: var(--ink); }
.price small { font: 600 20px/1 var(--display); }
.price strong { font: 700 64px/1 var(--display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.price span { font-size: 18px; font-weight: 600; color: #2E4A1B; }
.price-note { margin-top: 12px; color: #2E4A1B; font-size: 16px; }
.plan .btn { margin-top: auto; }
.guarantee { display: flex; align-items: center; gap: 12px; margin-top: 20px; color: var(--ink); font-size: 14px; font-weight: 600; }
.guarantee .i { color: var(--green); }
.plan-includes { padding: 36px; border-radius: 32px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-2); }
.plan-includes ul { display: grid; gap: 16px; margin-top: 24px; }
.plan-includes li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; color: var(--ink); font-weight: 500; }
.plan-includes .i { width: 24px; height: 24px; padding: 4px; border-radius: 999px; background: var(--ink); color: var(--lime); stroke-width: 3; }

/* FINAL */
 .gw-list small { color: var(--night-muted); font-size: 12px; }

/* FOOTER */
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(4, minmax(0, 1fr)); gap: 32px; }
.footer-brand p { margin-top: 12px; color: var(--night-muted); font-size: 14px; }
.footer-links-col { display: grid; align-content: start; justify-items: start; }
.footer-links-heading { margin-bottom: 8px; color: #fff; font: 600 14px/1.4 var(--display); }
.footer-link { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; color: var(--night-muted); font-size: 14px; text-decoration: none; transition: color .2s; }
.footer-link:hover { color: #fff; }
.footer-link .i { width: 14px; height: 14px; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--night-line); }
.footer-bottom small { color: #6E8A82; font-size: 13px; }

/* Toast */
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 70; max-width: min(92vw, 420px); padding: 12px 20px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 500; box-shadow: var(--shadow-3); opacity: 0; transform: translate(-50%, 16px); pointer-events: none; transition: opacity .3s, transform .4s var(--ease); }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* PROOF: one reel of student videos and chat screenshots, running right to left (js: "Testimonials") */
.proof { padding: clamp(96px, 12vw, 152px) 0; overflow: hidden; }
.proof-head { margin-bottom: clamp(16px, 2vw, 24px); }
.proof-head h2 { max-width: 18ch; }
.reel { --rh: 440px; --gap: 20px; position: relative; padding-block: 28px; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.reel img, .reel video { pointer-events: none; -webkit-user-drag: none; }
.reel.is-dragging { cursor: grabbing; }
.reel-track { position: relative; display: flex; gap: var(--gap); width: max-content; will-change: transform; }
.reel-item { flex: none; margin: 0; transition: opacity .4s var(--ease), transform .5s var(--ease); }
.reel-item.is-video { width: calc(var(--rh) * 9 / 16); }
.reel-item.is-chat { width: calc(var(--rh) * .64); }
.reel-media { position: relative; display: block; width: 100%; height: var(--rh); overflow: hidden; padding: 0; border: 0; border-radius: var(--r-lg); background: var(--night-2); cursor: pointer; transition: box-shadow .5s var(--ease); }
.is-chat .reel-media { border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow-1); }
.reel-media video, .reel-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.is-chat .reel-media img { object-position: var(--foco, top); }
.is-empty .reel-media { cursor: default; }
.reel-item figcaption { display: grid; align-content: start; gap: 4px; min-height: 44px; margin-top: 14px; }
.reel-item figcaption b { font: 700 16px/1.3 var(--display); color: var(--ink); }
.reel-item figcaption small { color: var(--muted); font-size: 14px; line-height: 1.35; }
.src-line { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; font-weight: 600; }
.src-line .i { width: 15px; height: 15px; }
.is-chat[data-origem="whatsapp"] .src-line .i { color: var(--green); }
.is-chat[data-origem="instagram"] .src-line .i { color: var(--violet); }
.reel.is-holding .reel-item { opacity: .4; }
.reel.is-holding .reel-item.is-hot { opacity: 1; transform: scale(1.05); }
.reel-item.is-hot .reel-media { box-shadow: var(--shadow-3); }

.vcard-play { position: absolute; z-index: 1; left: 50%; top: 50%; display: grid; place-items: center; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 999px; background: var(--lime); color: var(--ink); box-shadow: 0 8px 24px -8px rgba(7,19,26,.5); transition: transform .35s var(--ease), opacity .35s var(--ease); }
.vcard-play .i { width: 24px; height: 24px; margin-left: 3px; fill: currentColor; stroke: none; }
.reel-item.is-hot .vcard-play { transform: scale(1.1); }
.reel-item.is-previewing .vcard-play { opacity: 0; transform: scale(.8); }
.vcard-time { position: absolute; z-index: 1; right: 12px; top: 12px; padding: 4px 10px; border-radius: 999px; background: var(--night); color: #fff; font: 600 12px/1.3 var(--text); font-variant-numeric: tabular-nums; }
.is-empty .vcard-play { background: var(--night-3); color: var(--night-muted); box-shadow: none; }
.vcard-bar { position: absolute; left: 16px; right: 16px; bottom: 20px; height: 4px; border-radius: 999px; background: var(--night-3); }
.vcard-bar::before { content: ""; display: block; width: 28%; height: 100%; border-radius: inherit; background: #2E5363; }
.chat-zoom { position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; background: #fff; color: var(--ink); box-shadow: var(--shadow-2); opacity: 0; transition: opacity .25s; }
.chat-zoom .i { width: 18px; height: 18px; }
.reel-item.is-hot .chat-zoom, .reel-media:focus-visible .chat-zoom { opacity: 1; }
.sk { display: block; width: var(--w, 60%); height: 12px; border-radius: 999px; background: var(--soft-2); }
.sk.is-sm { height: 10px; background: var(--soft); }
.chat-skel { display: grid; align-content: start; gap: 10px; height: 100%; padding: 16px; }
.chat-skel-top { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.chat-skel .av { flex: none; width: 34px; height: 34px; border-radius: 999px; background: var(--soft-2); }
.bub { display: block; width: var(--w); height: 36px; border-radius: 16px 16px 16px 6px; background: var(--soft); }
.bub.is-tall { height: 56px; }
.bub.is-out { justify-self: end; border-radius: 16px 16px 6px 16px; background: var(--mint-soft); }
.is-chat[data-origem="instagram"] .bub.is-out { background: var(--violet-soft); }
.proof-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 24px; color: var(--muted); font-size: 14px; text-align: center; }
.proof-note .i { width: 18px; height: 18px; color: var(--green); }

/* Lightbox for videos and screenshots */
.lightbox { width: min(1040px, 100% - 32px); max-width: none; max-height: none; padding: 0; border: 0; background: none; color: var(--night-text); overflow: visible; }
.lightbox::backdrop { background: rgba(7,19,26,.9); }
.lightbox[open] { animation: lb-in .4s var(--ease); }
@keyframes lb-in { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.lightbox-stage { display: grid; place-items: center; }
.lightbox-stage video, .lightbox-stage img { display: block; max-width: 100%; max-height: calc(100dvh - 128px); border-radius: var(--r-md); background: #000; }
.lightbox-stage iframe { display: block; width: min(100%, calc((100dvh - 128px) * var(--ar))); aspect-ratio: var(--ar); border: 0; border-radius: var(--r-md); background: #000; }
.lightbox-caption { margin-top: 16px; text-align: center; font-size: 14px; }
.lightbox-caption:empty { display: none; }
.lightbox-close { position: fixed; z-index: 2; top: 16px; right: 16px; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 999px; background: #fff; color: var(--ink); cursor: pointer; }

/* Section CTAs: one contextual button after each argument, all leading to the plans */
.section-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 40px; }
.section-cta.is-center { justify-content: center; margin-top: clamp(40px, 5vw, 56px); }
.section-cta.is-far { margin-top: clamp(64px, 8vw, 104px); }
.proof .section-cta { margin-top: 24px; }
.cta-note { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; font-weight: 500; }
.cta-note .i { width: 18px; height: 18px; color: var(--green); }

/* 404 */
.notfound { display: grid; align-content: center; justify-items: start; gap: 40px; width: min(1240px, 100% - 2 * var(--gutter)); min-height: 100vh; min-height: 100svh; margin: 0 auto; padding: 32px 0; }
.notfound-block { width: 100%; padding: clamp(32px, 6vw, 72px); border-radius: var(--r-2xl); background: var(--lime); }
.notfound-code { font: 700 clamp(72px, 12vw, 160px)/.9 var(--display); letter-spacing: -.05em; color: var(--ink); }
.notfound h1 { margin-top: 16px; font: 700 clamp(28px, 4vw, 48px)/1.1 var(--display); letter-spacing: -.03em; color: var(--ink); text-wrap: balance; }
.notfound .lead { color: #24403A; }
.notfound .btn { margin-top: 32px; }

/* FAQ link to the comparison page */
.qa-link { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--lime-2); text-decoration-thickness: 3px; text-underline-offset: 3px; display: inline-block; padding-block: 10px; margin-block: -10px; }

/* VS PAGE: MEDFYE × the traditional prep course (no names). Grey is the traditional model, lime is MEDFYE. */
.vs-hero { padding: calc(var(--nav-h) + 48px) 0 clamp(64px, 8vw, 104px); }
.vs-head { display: grid; justify-items: center; max-width: 900px; margin: 0 auto; text-align: center; }
.vs-title { font: 700 clamp(40px, 5.8vw, 76px)/1.02 var(--display); letter-spacing: -.045em; color: var(--ink); text-wrap: balance; }
.vs-mark { box-shadow: inset 0 -.26em 0 var(--lime); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.vs-head .hero-lead { max-width: 58ch; margin: 24px auto 0; color: var(--muted); }
.vs-head .hero-actions { justify-content: center; }
.vs-split { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: clamp(40px, 5vw, 64px); overflow: hidden; border-radius: var(--r-2xl); }
.vs-side { position: relative; height: 580px; overflow: hidden; padding: 40px 40px 0; }
.vs-side.is-trad { background: #E3E8E6; }
.vs-side.is-medfye { background: var(--lime); }
.vs-side-copy { position: relative; z-index: 2; text-align: center; }
.vs-side-copy h2 { font: 700 clamp(22px, 2.4vw, 30px)/1.15 var(--display); letter-spacing: -.02em; color: var(--ink); }
.vs-side-copy p { margin-top: 6px; color: #4B5E5A; font-size: 17px; }
.vs-side.is-medfye .vs-side-copy p { color: #2E4A1B; }
.vs-phone { --pw: 260px; left: 50%; top: 150px; margin-left: -130px; }
.vs-side.is-trad .vs-phone { --rot: -3deg; }
.vs-side.is-medfye .vs-phone { --rot: 3deg; }
.vs-float { z-index: 4; }
.vs-float.is-trad { left: 6%; bottom: 96px; }
.vs-float.is-trad > .i { color: var(--muted); }
.vs-float.is-medfye { right: 6%; bottom: 128px; }
.vs-badge { position: absolute; z-index: 5; left: 50%; top: 50%; display: grid; place-items: center; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 999px; background: var(--ink); color: #fff; font: 700 22px/1 var(--display); letter-spacing: -.02em; box-shadow: 0 0 0 8px #fff; }

/* Illustrated lesson app (traditional side): built in HTML, no real product */
.phone .screen.trad { display: flex; flex-direction: column; aspect-ratio: 780 / 1688; background: #0F1A1E; color: #E6EEEC; font-size: calc(var(--pw) * .042); }
.trad-top { margin: 4% 7% 0; color: #8FA39E; font-size: .85em; }
.trad-video { position: relative; display: grid; place-items: center; margin: 4% 5% 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: .8em; background: #1C2A2F; }
.trad-play { display: grid; place-items: center; width: 3em; height: 3em; border-radius: 999px; background: #33454B; }
.trad-play .i { width: 1.3em; height: 1.3em; margin-left: .15em; fill: #fff; stroke: none; }
.trad-time { position: absolute; right: .6em; bottom: .8em; padding: .1em .45em; border-radius: .4em; background: #0F1A1E; font-size: .75em; font-variant-numeric: tabular-nums; }
.trad-bar { position: absolute; left: 0; right: 0; bottom: 0; height: .3em; background: #33454B; }
.trad-bar i { display: block; width: 13%; height: 100%; background: var(--coral); }
.trad-title { margin: 5% 7% 0; font: 700 1.2em/1.25 var(--display); }
.trad-sub { margin: 2% 7% 0; color: #8FA39E; font-size: .85em; }
.trad-next { margin: 8% 7% 3%; color: #8FA39E; font-size: .78em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.trad-list { display: grid; gap: .5em; margin: 0 5%; }
.trad-list li { display: grid; grid-template-columns: 3.6em minmax(0, 1fr); gap: .7em; align-items: center; padding: .5em; border-radius: .7em; background: #16252A; }
.trad-list .thumb { aspect-ratio: 16 / 9; border-radius: .4em; background: #2A3B40; }
.trad-list b { display: block; font-size: .85em; line-height: 1.3; }
.trad-list span:not(.thumb) { display: block; color: #8FA39E; font-size: .75em; font-variant-numeric: tabular-nums; }

/* One night, 45 minutes: bars fill on entry */
.vs-night { padding: clamp(96px, 12vw, 150px) 0; background: var(--soft); }
.night-card { max-width: 1000px; margin: 0 auto; padding: clamp(24px, 4vw, 48px); border-radius: var(--r-xl); background: #fff; box-shadow: var(--shadow-2); }
.night-axis { display: flex; justify-content: space-between; margin: 0 0 12px 204px; color: var(--muted); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.night-row { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 12px 24px; align-items: center; }
.night-row + .night-row { margin-top: 36px; }
.night-name { grid-row: span 3; align-self: start; padding-top: 18px; font: 700 20px/1.2 var(--display); letter-spacing: -.01em; color: var(--muted); }
.night-row.is-medfye .night-name { color: var(--ink); }
.night-bar { display: flex; gap: 4px; height: 64px; }
.seg { display: flex; flex: var(--w) 1 0; align-items: center; min-width: 0; padding: 0 16px; overflow: hidden; border-radius: 14px; font: 700 16px/1 var(--display); color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; transform: scaleX(0); transform-origin: left center; transition: transform 1s var(--ease); }
.seg + .seg { transition-delay: .45s; } .seg + .seg + .seg { transition-delay: .9s; }
.night-card.is-in .seg { transform: none; }
.seg.is-grey, .night-legend .is-grey { background: #D9E0DE; color: #4B5E5A; }
.seg.is-lime, .night-legend .is-lime { background: var(--lime); }
.seg.is-coral, .night-legend .is-coral { background: var(--coral); }
.seg.is-violet, .night-legend .is-violet { background: var(--violet-light); }
.night-legend { display: flex; flex-wrap: wrap; gap: 6px 20px; color: var(--ink); font-size: 15px; }
.night-legend li { display: inline-flex; align-items: center; gap: 8px; }
.night-legend i { width: 12px; height: 12px; border-radius: 4px; }
.night-note { color: var(--muted); font-size: 15px; }

/* Side by side: sticky column heads, winner marked in each row */
.vs-duel { padding: clamp(96px, 12vw, 150px) 0; }
.duel { max-width: 1120px; margin: 0 auto; }
.duel-head { position: sticky; top: calc(var(--nav-h) + 4px); z-index: 3; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding: 8px 0 12px; background: #fff; }
.duel-head span { display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 999px; font: 700 15px/1 var(--display); }
.duel-head span:first-child { visibility: hidden; }
.duel-head span:nth-child(2) { background: #E3E8E6; color: #4B5E5A; }
.duel-head span:nth-child(3) { background: var(--ink); color: var(--lime); }
.duel-row { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.duel-q { display: flex; align-items: flex-start; gap: 14px; padding: 20px 8px 20px 0; }
.duel-q .i { flex: none; width: 40px; height: 40px; padding: 10px; border-radius: 12px; background: var(--soft); color: var(--ink); }
.duel-q h3 { font: 700 19px/1.3 var(--display); letter-spacing: -.01em; color: var(--ink); }
.duel-cell { position: relative; padding: 20px 22px; border-radius: 20px; background: var(--soft); color: var(--muted); font-size: 16px; line-height: 1.5; }
.duel-cell.is-medfye { background: #F4F8EC; color: #2E4A1B; }
.duel-cell.is-win { padding-right: 52px; background: var(--lime); color: var(--ink); }
.duel-cell small { display: none; }
.duel-check { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; background: var(--ink); color: var(--lime); transform: scale(0); transition: transform .5s var(--ease) .35s; }
.duel-check .i { width: 15px; height: 15px; stroke-width: 3; }
.duel-row.is-in .duel-check { transform: none; }
.vs-duel .pivot { margin-top: clamp(48px, 6vw, 80px); }

/* Which one, now */
.vs-fit { padding: 0 0 clamp(96px, 12vw, 150px); }
.fit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 1040px; margin: 0 auto; }
.fit-card { padding: clamp(28px, 4vw, 44px); border-radius: var(--r-xl); background: #E3E8E6; }
.fit-card.is-medfye { background: var(--lime); }
.fit-card h3 { font: 700 24px/1.2 var(--display); letter-spacing: -.02em; color: var(--ink); }
.fit-card ul { display: grid; gap: 14px; margin-top: 24px; }
.fit-card li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; color: var(--ink); font-size: 17px; line-height: 1.45; }
.fit-card li .i { width: 28px; height: 28px; padding: 6px; border-radius: 999px; background: #fff; color: #4B5E5A; stroke-width: 2.6; }
.fit-card.is-medfye li .i { background: var(--ink); color: var(--lime); }

/* Together */
.vs-combo { padding: clamp(96px, 12vw, 150px) 0; background: var(--soft); }
.combo-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.combo-copy h2 { max-width: 18ch; }
.combo-steps { position: relative; display: grid; gap: 16px; margin-top: 32px; }
.combo-steps::before { content: ""; position: absolute; left: 44px; top: 40px; bottom: 40px; border-left: 2px dashed #BFCFCA; }
.combo-steps li { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 20px; align-items: center; padding: 16px; border-radius: 24px; background: #fff; box-shadow: var(--shadow-1); }
.combo-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: var(--ink); color: var(--lime); }
.combo-icon.is-trad { background: #E3E8E6; color: #4B5E5A; }
.combo-icon .i { width: 24px; height: 24px; }
.combo-steps h3 { font: 700 20px/1.25 var(--display); letter-spacing: -.01em; color: var(--ink); }
.combo-steps p { margin-top: 4px; color: var(--muted); }
.combo-visual { position: relative; min-height: 640px; }
.combo-phone { --pw: 280px; --rot: 3deg; left: 50%; top: 0; margin-left: -140px; }
.combo-float { left: 0; bottom: 96px; }
.combo-float-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; background: var(--coral-soft); color: var(--coral-ink); }
.combo-float-icon .i { width: 18px; height: 18px; }
.vs-note { max-width: 760px; margin: 32px auto 0; color: var(--muted); font-size: 13px; line-height: 1.6; text-align: center; }

/* METHOD PAGE: how the queue decides the week */
.section-cta .link-arrow { justify-content: center; }
.m-hero { padding: calc(var(--nav-h) + 48px) 0 clamp(80px, 10vw, 128px); }
.m-hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.m-hero-copy .vs-title { font-size: clamp(40px, 5vw, 64px); }
.m-hero-copy .hero-lead { max-width: 52ch; color: var(--muted); }
.m-equation { margin-top: 32px; }
.m-hero-visual { position: relative; min-height: 640px; }
.m-hero-phone { --pw: 290px; --rot: 3deg; left: 50%; top: 0; margin-left: -120px; }
.m-why { display: block; left: 0; bottom: 72px; width: 280px; padding: 16px; }
.m-why.is-in .why-bars i::after, .no-js .m-why .why-bars i::after { transform: none; }

.m-signals { padding: clamp(96px, 12vw, 150px) 0; background: var(--soft); }
.m-signal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.m-signal { display: flex; flex-direction: column; padding: clamp(28px, 3vw, 36px); border-radius: var(--r-xl); background: #fff; box-shadow: var(--shadow-1); }
.m-signal-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; background: var(--c); color: var(--ink); }
.m-signal.is-inc { --c: var(--lime); --bar: #9CCB3B; }
.m-signal.is-gap { --c: var(--coral-soft); --bar: var(--coral); }
.m-signal.is-urg { --c: var(--violet-soft); --bar: var(--violet); }
.m-signal h3 { margin-top: 24px; font: 700 28px/1.1 var(--display); letter-spacing: -.03em; color: var(--ink); }
.m-signal-q { margin-top: 8px; font: 600 17px/1.35 var(--display); color: var(--ink); }
.m-signal-body { flex: 1; margin-top: 12px; color: var(--muted); font-size: 15px; line-height: 1.55; }
.m-scale { position: relative; height: 10px; margin-top: 24px; overflow: hidden; border-radius: 999px; background: var(--soft-2); }
.m-scale i { position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 100%); border-radius: inherit; background: var(--bar); transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease) .3s; }
.m-signal.is-in .m-scale i { transform: none; }
.m-scale-labels { display: flex; justify-content: space-between; margin-top: 8px; color: var(--muted); font-size: 13px; font-weight: 600; }

.m-example { padding: clamp(96px, 12vw, 150px) 0; }
.m-example-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.m-example-note { margin-top: 20px; max-width: 46ch; color: var(--ink); font-size: 17px; line-height: 1.55; }
.m-toggle { margin-top: 28px; }
.m-toggle[aria-pressed="true"] { background: var(--lime); color: var(--ink); box-shadow: none; }
.m-queue { position: relative; padding: 24px; border-radius: var(--r-xl); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-2); }
.mq-head { display: grid; grid-template-columns: minmax(0, 1fr) auto 64px; gap: 16px; padding: 0 16px 12px 60px; color: var(--muted); font-size: 13px; font-weight: 600; }
.mq-head span:last-child { text-align: right; }
.mq-list { display: grid; gap: 8px; }
.mq-row { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto 64px; gap: 12px 16px; align-items: center; padding: 14px 16px; border-radius: 18px; background: var(--soft); transition: background-color .4s, opacity .4s; }
.mq-row.is-in-week { background: var(--lime); }
.mq-row.is-out { opacity: .55; }
.mq-rank { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: #fff; font: 700 14px/1 var(--display); color: var(--ink); }
.mq-row.is-in-week .mq-rank { background: var(--ink); color: var(--lime); }
.mq-name b { display: block; font: 700 17px/1.25 var(--display); color: var(--ink); }
.mq-name small { display: block; margin-top: 2px; color: #4B5E5A; font-size: 13px; }
.mq-calc { display: flex; gap: 6px; color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mq-calc span { color: var(--ink); font-weight: 600; }
.mq-u.is-changed { padding: 0 6px; border-radius: 6px; background: var(--ink); color: var(--lime); }
.mq-score { font: 700 22px/1 var(--display); color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.mq-row.is-cut { margin-bottom: 30px; }
.mq-row.is-cut::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -20px; border-top: 2px dashed var(--ink); }
.mq-cut-label { position: absolute; right: 32px; padding: 2px 10px; border-radius: 999px; background: #fff; color: var(--ink); font-size: 12px; font-weight: 700; transform: translateY(-50%); transition: top .6s var(--ease); pointer-events: none; }

.m-cycle { padding: clamp(96px, 12vw, 150px) 0; background: var(--soft); }
.m-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.m-step { position: relative; display: flex; flex-direction: column; align-items: flex-start; height: 480px; overflow: hidden; padding: 28px 24px 0; border-radius: var(--r-xl); background: #fff; box-shadow: var(--shadow-1); }
.m-step .step-num { margin-bottom: 16px; }
.m-step h3 { font: 700 22px/1.2 var(--display); letter-spacing: -.02em; color: var(--ink); }
.m-step p { margin-top: 6px; color: var(--muted); font-size: 15px; line-height: 1.5; }
.m-step-phone { --pw: 200px; left: 50%; top: 214px; margin-left: -100px; }

.m-review { padding: clamp(96px, 12vw, 150px) 0; }
.m-review-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.m-review-card { padding: clamp(24px, 3vw, 36px); border-radius: var(--r-xl); background: var(--ink); color: #fff; }
.m-review-title { color: var(--night-muted); font-size: 14px; font-weight: 600; }
.m-bars { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; align-items: end; height: 300px; margin-top: 24px; }
.m-bars li { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; gap: 10px; }
.m-bar { position: relative; display: flex; align-items: flex-start; justify-content: center; height: calc(var(--h) * 100% - 28px); min-height: 44px; padding-top: 10px; border-radius: 14px; background: var(--lime); color: var(--ink); transform: scaleY(0); transform-origin: bottom; transition: transform 1s var(--ease); }
.m-bars li:nth-child(2) .m-bar { transition-delay: .12s; } .m-bars li:nth-child(3) .m-bar { transition-delay: .24s; } .m-bars li:nth-child(4) .m-bar { transition-delay: .36s; } .m-bars li:nth-child(5) .m-bar { transition-delay: .48s; }
.m-review-card.is-in .m-bar { transform: none; }
.m-bar b { font: 700 18px/1 var(--display); text-align: center; font-variant-numeric: tabular-nums; }
.m-bars small { color: var(--night-muted); font-size: 12px; text-align: center; }

.m-rules { padding: 0 0 clamp(96px, 12vw, 150px); }
.m-rule-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 1040px; margin: 0 auto; }
.m-rule-grid.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; }
.m-rule { padding: clamp(24px, 3vw, 36px); border-radius: var(--r-xl); background: var(--soft); }
.m-rule-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--ink); color: var(--lime); }
.m-rule-icon .i { width: 20px; height: 20px; }
.m-rule h3 { margin-top: 20px; font: 700 21px/1.25 var(--display); letter-spacing: -.02em; color: var(--ink); }
.m-rule p { margin-top: 8px; color: var(--muted); line-height: 1.55; }

/* WEEKS PAGE: how many weeks until the exam */
.qf-hero { padding: calc(var(--nav-h) + 48px) 0 clamp(80px, 10vw, 128px); }
.qf-hero-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.qf-copy .vs-title { font-size: clamp(40px, 5vw, 64px); }
.qf-copy .hero-lead { max-width: 46ch; color: var(--muted); }
.qf-sunday { display: inline-flex; align-items: center; gap: 10px; margin-top: 28px; padding: 12px 18px; border-radius: 999px; background: var(--soft); color: var(--ink); font-weight: 600; }
.qf-sunday .i { color: var(--green); }
.qf-card { padding: clamp(24px, 3vw, 36px); border-radius: var(--r-2xl); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-3); }
.qf-fields { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: end; }
.qf-field { display: grid; gap: 8px; color: var(--ink); font-size: 14px; font-weight: 600; }
.qf-input { width: 100%; height: 52px; padding: 0 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--soft); color: var(--ink); font: 600 16px/1 var(--text); }
.qf-input:focus { outline: 2px solid var(--green); outline-offset: 2px; }
.qf-stepper { display: grid; grid-template-columns: 44px 48px 44px; align-items: center; height: 52px; padding: 4px; border: 1px solid var(--line); border-radius: 16px; background: var(--soft); }
.qf-stepper button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; background: #fff; color: var(--ink); cursor: pointer; box-shadow: var(--shadow-1); }
.qf-stepper button:disabled { opacity: .4; cursor: default; }
.qf-stepper output { font: 700 20px/1 var(--display); text-align: center; font-variant-numeric: tabular-nums; }
.qf-hint { margin-top: 10px; color: var(--muted); font-size: 13px; }
.qf-result { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.qf-big { display: flex; align-items: baseline; gap: 12px; color: var(--ink); }
.qf-big strong { font: 700 clamp(64px, 7vw, 96px)/.9 var(--display); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.qf-big span { font: 700 24px/1 var(--display); }
.qf-until { margin-top: 8px; color: var(--muted); }
.qf-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.qf-stats p { padding: 16px; border-radius: 18px; background: var(--soft); }
.qf-stats strong { display: block; font: 700 28px/1 var(--display); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.qf-stats span { display: block; margin-top: 6px; color: var(--muted); font-size: 14px; }
.qf-weeks { display: grid; grid-template-columns: repeat(auto-fill, minmax(18px, 1fr)); gap: 6px; margin-top: 20px; }
.qf-weeks i { aspect-ratio: 1; border-radius: 5px; background: var(--soft-2); animation: qf-pop .45s var(--ease) both; animation-delay: calc(min(var(--i), 60) * 12ms); }
.qf-weeks i.is-now { background: var(--ink); }
.qf-weeks i.is-final { background: var(--lime); box-shadow: inset 0 0 0 1px #B7E35E; }
@keyframes qf-pop { from { opacity: 0; transform: scale(.4); } }
.qf-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; color: var(--muted); font-size: 13px; }
.qf-legend li { display: inline-flex; align-items: center; gap: 6px; }
.qf-legend i { width: 12px; height: 12px; border-radius: 4px; background: var(--soft-2); }
.qf-legend i.is-now { background: var(--ink); }
.qf-legend i.is-final { background: var(--lime); }
.qf-message { margin: 16px 0 20px; color: var(--ink); font-weight: 500; line-height: 1.5; }
.qf-message:empty { display: none; }
.qf-result + .btn { margin-top: 8px; }

.qf-plan { padding: clamp(96px, 12vw, 150px) 0; background: var(--soft); }
.qf-track { position: relative; display: flex; height: 16px; max-width: 1040px; margin: 0 auto 72px; }
.qf-track-main { flex: 3; border-radius: 999px 0 0 999px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease); }
.qf-track-final { flex: 1; border-radius: 0 999px 999px 0; background: var(--lime); box-shadow: inset 0 0 0 1px #B7E35E; transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease) 1.1s; }
.qf-track.is-in span { transform: none; }
.qf-track b { position: absolute; top: 28px; display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font: 700 15px/1 var(--display); white-space: nowrap; }
.qf-track-start { left: 0; } .qf-track-mid { left: 75%; transform: translateX(-50%); } .qf-track-end { right: 0; }
.qf-track-end .i { width: 16px; height: 16px; }
.qf-phases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; max-width: 1040px; margin: 0 auto; }
.qf-phase { padding: clamp(24px, 3vw, 32px); border-radius: var(--r-xl); background: #fff; box-shadow: var(--shadow-1); }
.qf-phase.is-final { background: var(--lime); box-shadow: none; }
.qf-phase h3 { font: 700 22px/1.2 var(--display); letter-spacing: -.02em; color: var(--ink); }
.qf-phase ul { display: grid; gap: 12px; margin-top: 18px; }
.qf-phase li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; color: var(--ink); line-height: 1.45; }
.qf-phase li .i { width: 24px; height: 24px; padding: 5px; border-radius: 999px; background: var(--ink); color: var(--lime); stroke-width: 3; }
.qf-facts { padding: clamp(96px, 12vw, 150px) 0; }
.qf-more { margin-top: 40px; color: var(--muted); text-align: center; }

/* BANK PAGE: the question bank, inside and out */
.b-hero { padding: calc(var(--nav-h) + 48px) 0 clamp(72px, 9vw, 112px); }
.b-hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.b-hero-copy .vs-title { font-size: clamp(40px, 5.4vw, 70px); }
.b-hero-copy .hero-lead { max-width: 52ch; color: var(--muted); }
.b-hero-visual { position: relative; min-height: 620px; }
.b-hero-phone { --pw: 290px; --rot: 3deg; left: 50%; top: 0; margin-left: -130px; }
.b-float.is-comment { left: 0; top: 120px; }
.b-float.is-level { right: 0; bottom: 110px; }
.b-float-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--lime); color: var(--ink); }
.b-float-icon .i { width: 18px; height: 18px; }
.b-level { display: inline-flex; align-items: flex-end; gap: 3px; height: 22px; }
.b-level i { width: 7px; border-radius: 3px; background: var(--soft-2); }
.b-level i:nth-child(1) { height: 40%; } .b-level i:nth-child(2) { height: 70%; } .b-level i:nth-child(3) { height: 100%; }
.b-level i.on { background: var(--coral); }
.b-numbers { margin-top: clamp(56px, 7vw, 88px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--line); }

.b-anatomy { padding: clamp(96px, 12vw, 150px) 0; background: var(--soft); }
.b-anatomy-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.b-q { position: relative; padding: clamp(24px, 3vw, 36px) clamp(24px, 3vw, 36px) clamp(24px, 3vw, 36px) clamp(28px, 3.4vw, 40px); border-radius: var(--r-xl); background: #fff; box-shadow: var(--shadow-2); }
.b-pin { position: absolute; z-index: 2; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; background: var(--ink); color: var(--lime); font: 700 13px/1 var(--display); box-shadow: 0 0 0 4px #fff; }
.b-q-meta { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 13px; font-weight: 600; }
.b-q-meta .b-pin { left: -30px; top: -4px; }
.b-q-path { color: var(--ink); }
.b-q-facts { display: inline-flex; align-items: center; gap: 10px; }
.b-q-facts .b-level { height: 16px; }
.b-q-facts .b-level i { width: 5px; }
.b-q-stem { position: relative; margin-top: 18px; color: var(--ink); font: 600 18px/1.55 var(--display); }
.b-q-stem .b-pin { left: -30px; top: 0; }
.b-q-stem mark { padding: 0 2px; border-radius: 4px; color: inherit; }
.mk-yellow { background: #FFF0A3; } .mk-green { background: #CFF3DA; }
.b-q-options { display: grid; gap: 8px; margin-top: 18px; }
.b-q-options li { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 16px; }
.b-q-options li .b-pin { left: -30px; top: 12px; }
.b-letter { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--soft); color: var(--ink); font: 700 14px/1 var(--display); }
.b-opt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--ink); }
.b-opt b { font-weight: 600; }
.b-opt em { padding: 2px 8px; border-radius: 999px; font-size: 12px; font-style: normal; font-weight: 700; }
.b-why { margin-top: 4px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.b-q-options .is-right { border-color: #9BD9B4; background: #EEF9F2; }
.b-q-options .is-right .b-letter { background: var(--green); color: #fff; }
.b-q-options .is-right em { background: var(--green); color: #fff; }
.b-q-options .is-picked { border-color: #F5B8A3; background: #FFF4EF; }
.b-q-options .is-picked .b-letter { background: var(--coral); color: var(--ink); }
.b-q-options .is-picked em { background: var(--coral-soft); color: var(--coral-ink); }
.b-q-options .is-eliminated .b-opt b { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 2px; }
.b-q-options .is-eliminated .b-letter { opacity: .5; }
.b-q-take { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; margin-top: 16px; padding: 16px; border-radius: 16px; background: var(--lime); color: var(--ink); }
.b-q-take .b-pin { left: -30px; top: 14px; }
.b-q-take .i { width: 24px; height: 24px; }
.b-q-take strong { font: 700 15px/1.3 var(--display); }
.b-q-take p { margin-top: 2px; font-size: 15px; line-height: 1.5; }
.b-q-refs { position: relative; margin-top: 12px; padding: 14px 16px; border-radius: 16px; background: var(--soft); }
.b-q-refs .b-pin { left: -30px; top: 12px; }
.b-q-refs strong { display: block; color: var(--ink); font: 700 14px/1.3 var(--display); }
.b-q-refs p { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--green); font-size: 14px; font-weight: 600; }
.b-q-refs .i { width: 14px; height: 14px; }
.b-callouts { display: grid; gap: 18px; }
.b-callouts li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; }
.b-pin-n { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; background: var(--ink); color: var(--lime); font: 700 14px/1 var(--display); }
.b-callouts h3 { font: 700 18px/1.3 var(--display); letter-spacing: -.01em; color: var(--ink); }
.b-callouts p { margin-top: 2px; color: var(--muted); font-size: 15px; line-height: 1.5; }

.b-filters { padding: clamp(96px, 12vw, 150px) 0; }
.b-filters-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.b-panel { display: grid; gap: 16px; padding: clamp(24px, 3vw, 32px); border-radius: var(--r-xl); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-3); }
.b-panel-title { display: flex; align-items: center; gap: 10px; color: var(--ink); font: 700 20px/1.2 var(--display); }
.b-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: center; }
.b-row > p { color: var(--muted); font-size: 14px; font-weight: 600; }
.b-row .crumbs { margin-top: 0; }
.b-field { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--soft); color: var(--muted); font-size: 15px; }
.b-field .i { width: 18px; height: 18px; color: var(--ink); }
.b-seg { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--soft); }
.b-seg.is-wrap { flex-wrap: wrap; }
.b-seg button { flex: 1 0 auto; min-height: 40px; padding: 0 14px; border: 0; border-radius: 10px; background: none; color: var(--muted); font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color .2s, color .2s; }
.b-seg button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.b-panel .btn { margin-top: 8px; }

.b-modes { padding: clamp(96px, 12vw, 150px) 0; background: var(--soft); }
.b-mode-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 1040px; margin: 0 auto; }
.b-mode { display: flex; flex-direction: column; padding: clamp(28px, 4vw, 44px); border-radius: var(--r-xl); background: #fff; box-shadow: var(--shadow-1); }
.b-mode.is-dark { background: var(--ink); color: #fff; }
.b-mode-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--lime); color: var(--ink); }
.b-mode h3 { margin-top: 24px; font: 700 30px/1.1 var(--display); letter-spacing: -.03em; color: var(--ink); }
.b-mode.is-dark h3 { color: #fff; }
.b-mode > p { flex: 1; margin-top: 10px; color: var(--muted); font-size: 17px; line-height: 1.55; }
.b-mode.is-dark > p { color: var(--night-muted); }
.b-mode-visual { margin-top: 28px; }
.b-mode-visual.is-train { display: grid; gap: 8px; }
.b-verdict { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--coral-soft); color: var(--coral-ink); }
.b-verdict.is-ok { background: #EEF9F2; color: var(--green); }
.b-verdict b { color: var(--ink); font-size: 15px; }
.b-mode.is-dark .mini-timer circle { stroke: #22343A; }
.b-mode.is-dark .mini-timer .t-fill { stroke: var(--lime); }
.b-mode.is-dark .mini-timer b { color: #fff; font-size: 32px; }

.b-tools { padding: clamp(96px, 12vw, 150px) 0; }
.b-tool-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.b-tool { padding: 24px; border-radius: var(--r-lg); background: var(--soft); transition: transform .3s var(--ease), background-color .3s; }
.b-tool:hover { transform: translateY(-4px); background: var(--lime); }
.b-tool-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: #fff; color: var(--ink); box-shadow: var(--shadow-1); }
.b-tool h3 { margin-top: 18px; font: 700 19px/1.25 var(--display); letter-spacing: -.01em; color: var(--ink); }
.b-tool p { margin-top: 4px; color: var(--muted); font-size: 15px; line-height: 1.5; }
.b-tool:hover p { color: #2E4A1B; }
.b-loop { padding: 0 0 clamp(96px, 12vw, 150px); }

/* FLASHCARDS PAGE: forgetting, recall and spacing, then how MEDFYE turns an error into a card (js/flashcards.js).
   Charts are HTML boxes with stretched SVG layers (non-scaling strokes); dots, points and labels are HTML on top. */
.fx-page .btn:disabled { opacity: .45; cursor: default; }
.fx-page .btn:disabled:active { transform: none; }
.btn-lime { background: var(--lime); color: var(--ink); }
.btn-lime:hover { background: var(--lime-2); }
.fx-source { color: var(--muted); font-size: 13px; line-height: 1.5; }

.fx-hero { padding: calc(var(--nav-h) + 48px) 0 clamp(80px, 10vw, 128px); }
.fx-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 88px); align-items: center; }
.fx-hero-copy .vs-title { font-size: clamp(40px, 5vw, 64px); }
.fx-hero-copy .hero-lead { max-width: 50ch; color: var(--muted); }
.fx-cites { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 36px; }
.fx-cites p { color: var(--muted); font-size: 13px; font-weight: 600; }
.fx-cites ul { display: flex; flex-wrap: wrap; gap: 8px; }
.fx-cites li { padding: 6px 12px; border-radius: 999px; background: var(--soft); color: var(--ink); font-size: 13px; font-weight: 600; }
.fx-hero-visual { position: relative; padding: 44px 32px 160px 0; }
.fx-hero-card { position: absolute; z-index: 3; right: 0; bottom: 0; width: 280px; transform: rotate(3deg); }
.fx-hero-float { left: -24px; top: 0; }
.fx-float-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--lime); color: var(--ink); }
.fx-float-icon .i { width: 18px; height: 18px; }

/* Charts */
.fx-chart { position: relative; margin: 0; padding: clamp(20px, 2.6vw, 28px); border-radius: var(--r-xl); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-3); }
.fx-chart-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.fx-chart-head .qcard-reset { margin-top: 0; }
.fx-chart-title { font: 700 18px/1.3 var(--display); letter-spacing: -.01em; color: var(--ink); }
.fx-chart-note { margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.fx-chart-note.is-top { margin-top: 8px; }
.fx-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--muted); font-size: 13px; font-weight: 600; }
.fx-legend li { display: inline-flex; align-items: center; gap: 8px; }
.fx-legend i { width: 16px; height: 4px; border-radius: 999px; background: var(--ink); }
.fx-legend i.is-ghost { background: var(--coral); }
.fx-legend i.is-kept, .fx-legend i.is-lost { width: 12px; height: 12px; border-radius: 4px; background: #E3F7B8; }
.fx-legend i.is-lost { background: var(--coral-soft); }
.fx-plot { position: relative; height: clamp(200px, 20vw, 260px); margin: 28px 8px 36px 40px; }
.fx-layer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fx-grid line { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.fx-line { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.fx-line.is-ghost { stroke: var(--coral); stroke-width: 2.5; }
.fx-area, .fx-kept { fill: #EDFBCB; }
.fx-kept { fill: #E3F7B8; }
.fx-lost { fill: var(--coral-soft); }
.js .fx-draw { clip-path: inset(-12px 100% -12px -12px); transition: clip-path 1.6s var(--ease-in-out); }
.js .is-drawn .fx-draw, .js .is-in .fx-draw { clip-path: inset(-12px -12px -12px -12px); }
.js .is-drawn .fx-draw.is-late { transition-duration: 2.2s; transition-delay: .7s; }
.fx-ylab { position: absolute; left: -40px; top: var(--y); width: 32px; transform: translateY(-50%); color: var(--muted); font-size: 12px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.fx-xlab { position: absolute; top: calc(100% + 12px); left: var(--x); transform: translateX(-50%); color: var(--muted); font-size: 12px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fx-xlab.is-first { transform: none; }
.fx-xlab.is-last { transform: translateX(-100%); }
.fx-dot { position: absolute; z-index: 2; left: var(--x); top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 999px; background: #fff; border: 3px solid #C6D3CF; transition: background-color .3s, border-color .3s, transform .4s var(--ease); }
.fx-dot.is-on { background: var(--lime); border-color: var(--ink); }
.js [data-hero-chart] .fx-dot { transform: scale(0); transition-delay: calc(1.1s + var(--i) * .42s); }
.js [data-hero-chart].is-drawn .fx-dot { transform: none; }

/* Flashcards: two faces stacked in one grid cell; .is-flipped turns them */
.fx-card3d { display: grid; perspective: 1200px; }
.fx-flip { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.fx-flip:focus-visible { outline-offset: 4px; border-radius: 20px; }
.fx-face { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 10px; min-height: 176px; padding: 20px; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: var(--shadow-2); color: var(--ink); text-align: left; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: transform .7s var(--ease); }
.fx-face.is-back { border-color: var(--ink); background: var(--ink); color: #fff; transform: rotateY(180deg); }
.fx-card3d.is-flipped .fx-face:not(.is-back) { transform: rotateY(-180deg); }
.fx-card3d.is-flipped .fx-face.is-back { transform: none; }
.fx-face-tag { align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: var(--soft); color: var(--muted); font-size: 12px; font-weight: 700; }
.fx-face-tag.is-coral { background: var(--coral-soft); color: var(--coral-ink); }
.is-back .fx-face-tag { background: var(--lime); color: var(--ink); }
.fx-face-text { flex: 1; font: 600 18px/1.4 var(--display); letter-spacing: -.01em; }
.fx-face-text.is-long { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 5; font: 400 14px/1.5 var(--text); letter-spacing: 0; color: var(--night-muted); }
.fx-face-foot { color: var(--muted); font-size: 13px; font-weight: 500; }
.is-back .fx-face-foot { color: var(--lime); }

/* Memory test and recall: dark blocks at the top and near the end of the page */
.fx-test-sec { padding: 0 0 clamp(96px, 12vw, 150px); }
.fx-test { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 72px); align-items: center; padding: clamp(32px, 5vw, 64px); border-radius: var(--r-2xl); background: var(--night-2); color: var(--night-text); }
.fx-test h2, .fx-recall h2 { max-width: 18ch; color: #fff; }
.fx-test .lead, .fx-recall .lead { color: var(--night-muted); }
.fx-test-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 32px; }
.fx-count { font: 700 24px/1 var(--display); color: var(--lime); font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .3s; }
.fx-drain { max-width: 360px; height: 4px; margin-top: 24px; overflow: hidden; border-radius: 999px; background: var(--night-3); opacity: 0; transition: opacity .3s; }
.fx-drain i { display: block; height: 100%; background: var(--lime); transform-origin: left; }
.fx-test[data-state="showing"] .fx-count, .fx-test[data-state="showing"] .fx-drain { opacity: 1; }
.fx-test[data-state="showing"] .fx-drain i { animation: fx-drain 10s linear forwards; }
@keyframes fx-drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.fx-test-status { min-height: 1.6em; margin-top: 16px; color: var(--night-text); font-size: 15px; line-height: 1.5; }
.fx-test-status:empty { min-height: 0; margin-top: 0; }
.fx-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.fx-tile { display: grid; perspective: 800px; }
.fx-tile-face { grid-area: 1 / 1; display: grid; place-items: center; aspect-ratio: 1 / .82; border-radius: 20px; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: transform .6s var(--ease); transition-delay: calc(var(--i) * 60ms); }
.fx-tile-face.is-front { background: var(--night-3); color: #5E7C84; }
.fx-tile-face.is-front .i { width: 28px; height: 28px; }
.fx-tile-face.is-back { background: var(--lime); color: var(--ink); font: 700 clamp(24px, 2.6vw, 34px)/1 var(--display); letter-spacing: .06em; transform: rotateY(180deg); }
.fx-test[data-state="showing"] .fx-tile-face.is-front { transform: rotateY(-180deg); }
.fx-test[data-state="showing"] .fx-tile-face.is-back { transform: none; }

.fx-recall-sec { padding: clamp(96px, 12vw, 150px) 0; }
.fx-recall { max-width: 960px; margin: 0 auto; padding: clamp(32px, 5vw, 64px); border-radius: var(--r-2xl); background: var(--night-2); color: var(--night-text); text-align: center; }
.fx-recall h2, .fx-recall .lead { margin-inline: auto; }
.fx-chips { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; max-width: 720px; margin: 32px auto 0; }
.fx-chip { min-height: 56px; padding: 0; border: 2px solid transparent; border-radius: 16px; background: var(--night-3); color: #fff; font: 700 18px/1 var(--display); letter-spacing: .06em; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s, transform .2s var(--ease), opacity .3s; }
.fx-chip:hover:not(:disabled) { transform: translateY(-2px); }
.fx-chip:disabled { cursor: default; }
.fx-chip[aria-pressed="true"] { background: #fff; color: var(--ink); }
.fx-recall[data-state="locked"] .fx-chip { opacity: .4; }
.fx-chip.is-hit { background: var(--lime); color: var(--ink); }
.fx-chip.is-miss { border-color: var(--lime); border-style: dashed; background: none; color: var(--lime); }
.fx-chip.is-wrong { background: var(--coral); color: var(--ink); }
.fx-recall[data-state="done"] .fx-chip:not(.is-hit):not(.is-miss):not(.is-wrong) { opacity: .35; }
.fx-recall-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 24px; margin-top: 28px; }
.fx-recall .link-arrow { color: var(--lime); }
.fx-recall .link-arrow[hidden] { display: none; }
.fx-recall .link-arrow:hover .i { transform: translateY(-3px); }
.fx-recall-status { max-width: 58ch; min-height: 1.6em; margin: 20px auto 0; color: #fff; font-size: 17px; line-height: 1.55; }
.fx-recall-legend { display: none; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin-top: 16px; color: var(--night-muted); font-size: 13px; font-weight: 600; }
.fx-recall[data-state="done"] .fx-recall-legend { display: flex; }
.fx-recall-legend li { display: inline-flex; align-items: center; gap: 8px; }
.fx-recall-legend i { width: 14px; height: 14px; border-radius: 4px; }
.fx-recall-legend .is-hit { background: var(--lime); }
.fx-recall-legend .is-miss { border: 2px dashed var(--lime); }
.fx-recall-legend .is-wrong { background: var(--coral); }

/* Ebbinghaus explorer */
.fx-ebb-sec { padding: clamp(96px, 12vw, 150px) 0; background: var(--soft); }
.fx-ebb { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 20px; }
.fx-ebb-chart { border: 0; box-shadow: var(--shadow-1); }
.fx-plot.is-ebb { height: clamp(240px, 24vw, 320px); margin-left: 54px; }
.fx-plot.is-ebb .fx-ylab { left: -54px; }
.fx-guide { position: absolute; top: 0; bottom: 0; left: var(--gx, 0%); border-left: 2px dashed var(--ink); opacity: .3; transition: left .5s var(--ease); pointer-events: none; }
.fx-point { position: absolute; z-index: 2; left: var(--x); top: var(--y); width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0; border: 0; border-radius: 999px; background: none; cursor: pointer; }
.fx-point::before { content: ""; position: absolute; inset: 14px; border: 3px solid var(--ink); border-radius: 999px; background: #fff; transition: transform .3s var(--ease), background-color .2s; }
.fx-point:hover::before { transform: scale(1.2); }
.fx-point[aria-pressed="true"]::before { background: var(--lime); transform: scale(1.45); }
.fx-point:focus-visible { outline-offset: -4px; border-radius: 999px; }
.fx-ebb-read { display: flex; flex-direction: column; padding: clamp(24px, 3vw, 36px); border-radius: var(--r-xl); background: var(--ink); color: #fff; }
.fx-ebb-when { color: var(--lime); font: 700 17px/1.3 var(--display); }
.fx-ebb-value { margin-top: 16px; font: 700 clamp(72px, 8vw, 112px)/.9 var(--display); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.fx-ebb-label { margin-top: 10px; color: var(--night-muted); font-size: 15px; }
.fx-ebb-text { min-height: 3.2em; margin: 24px 0; color: var(--night-text); font-size: 18px; line-height: 1.5; }
.fx-ebb-how { margin-top: auto; padding-top: 24px; border-top: 1px solid var(--night-line); color: var(--night-muted); font-size: 14px; line-height: 1.55; }
.fx-ebb-how b { color: #fff; }
.fx-insights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
.fx-insight { padding: clamp(24px, 3vw, 32px); border-radius: var(--r-xl); background: #fff; box-shadow: var(--shadow-1); }
.fx-insight-num { font: 700 clamp(36px, 3.6vw, 48px)/1 var(--display); letter-spacing: -.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.fx-insight h3 { margin-top: 20px; font: 700 20px/1.25 var(--display); letter-spacing: -.02em; color: var(--ink); }
.fx-insight p:not(.fx-insight-num) { margin-top: 6px; color: var(--muted); line-height: 1.55; }

/* Reread x recall */
.fx-race-sec { padding: clamp(96px, 12vw, 150px) 0; }
.fx-race-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.fx-race-copy h2 { max-width: 16ch; }
.fx-race-hint { margin-top: 20px; color: var(--ink); font-weight: 600; }
.fx-race { padding: clamp(24px, 3vw, 36px); border-radius: var(--r-xl); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-3); }
.fx-race .b-seg button { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 8px; line-height: 1.2; }
.fx-race-rows { display: grid; gap: 24px; margin-top: 28px; }
.fx-race-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px 16px; }
.fx-race[data-at="soon"] .fx-race-row { --v: var(--soon); }
.fx-race[data-at="week"] .fx-race-row { --v: var(--week); }
.fx-race-row b { display: block; font: 700 17px/1.3 var(--display); color: var(--ink); }
.fx-seq { display: flex; gap: 4px; margin-top: 8px; }
.fx-seq i, .fx-seq-legend i { width: 22px; height: 8px; border-radius: 999px; background: #C6D3CF; }
.fx-seq i.is-t, .fx-seq-legend i.is-t { background: var(--lime-2); }
.fx-race-val { font: 700 32px/1 var(--display); letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.fx-race-bar { grid-column: 1 / -1; height: 14px; overflow: hidden; border-radius: 999px; background: var(--soft); }
.fx-race-bar i { display: block; width: calc(var(--v) * 100%); height: 100%; border-radius: inherit; background: #C6D3CF; transform: scaleX(0); transform-origin: left; transition: width .9s var(--ease), transform 1s var(--ease), background-color .4s; }
.fx-race.is-in .fx-race-bar i { transform: none; }
.fx-race[data-at="soon"] .is-read .fx-race-bar i, .fx-race[data-at="week"] .is-test .fx-race-bar i { background: var(--ink); }
.fx-seq-legend { display: flex; gap: 16px; margin-top: 20px; color: var(--muted); font-size: 13px; font-weight: 600; }
.fx-seq-legend li { display: inline-flex; align-items: center; gap: 8px; }
.fx-race-caption { min-height: 3.2em; margin-top: 20px; padding-top: 20px; border-top: 1px dashed var(--line); color: var(--ink); font-weight: 500; line-height: 1.55; }
.fx-race .fx-source { margin-top: 8px; }
.fx-duo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px clamp(32px, 5vw, 72px); align-items: center; margin-top: clamp(56px, 7vw, 88px); padding: clamp(28px, 4vw, 48px); border-radius: var(--r-2xl); background: var(--ink); color: #fff; }
.fx-duo h3 { font: 700 clamp(24px, 2.4vw, 30px)/1.15 var(--display); letter-spacing: -.02em; }
.fx-duo-copy p { max-width: 56ch; margin-top: 10px; color: var(--night-muted); line-height: 1.55; }
.fx-duo-nums { display: flex; gap: 12px; }
.fx-duo-nums p { display: grid; align-content: start; gap: 8px; min-width: 160px; padding: 20px; border-radius: 20px; background: var(--night-3); }
.fx-duo-nums p.is-win { background: var(--lime); color: var(--ink); }
.fx-duo-nums strong { font: 700 56px/1 var(--display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.fx-duo-nums p > span { color: var(--night-muted); font-size: 14px; font-weight: 600; line-height: 1.35; }
.fx-duo-nums p.is-win > span { color: #2E4A1B; }
.fx-duo-foot { grid-column: 1 / -1; padding-top: 20px; border-top: 1px solid var(--night-line); font-weight: 600; }
.fx-duo-foot .fx-source { display: block; margin-top: 4px; color: var(--night-muted); font-weight: 400; }

/* Why errors */
.fx-why-sec { padding: clamp(96px, 12vw, 150px) 0; background: var(--soft); }
.fx-why-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.fx-why { display: flex; flex-direction: column; padding: clamp(20px, 2.6vw, 28px); border-radius: var(--r-xl); background: #fff; box-shadow: var(--shadow-1); }
.fx-why-visual { display: grid; place-items: center; height: 172px; margin-bottom: 24px; padding: 16px; border-radius: 20px; background: var(--soft); }
.fx-why h3 { font: 700 22px/1.2 var(--display); letter-spacing: -.02em; color: var(--ink); }
.fx-why > p:not(.fx-source) { margin-top: 8px; color: var(--muted); line-height: 1.55; }
.fx-why .fx-source { margin-top: auto; padding-top: 16px; }
.fx-mini-opts { display: grid; gap: 8px; width: 100%; max-width: 290px; }
.fx-mini-opts li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid; border-radius: 14px; font: 600 15px/1.2 var(--display); color: var(--ink); }
.fx-mini-opts span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; font-size: 13px; }
.fx-mini-opts em { padding: 2px 8px; border-radius: 999px; font: 700 11px/1.4 var(--text); font-style: normal; }
.fx-mini-opts .is-picked { border-color: #F5B8A3; background: #FFF4EF; }
.fx-mini-opts .is-picked span { background: var(--coral); }
.fx-mini-opts .is-picked em { background: var(--coral-soft); color: var(--coral-ink); }
.fx-mini-opts .is-right { border-color: #9BD9B4; background: #EEF9F2; }
.fx-mini-opts .is-right span, .fx-mini-opts .is-right em { background: var(--green); color: #fff; }
.fx-sure { display: grid; gap: 12px; width: 100%; max-width: 270px; }
.fx-sure > p { color: var(--muted); font-size: 13px; font-weight: 600; }
.fx-sure-bars { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.fx-sure-bars i { height: 12px; border-radius: 999px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.fx-why.is-in .fx-sure-bars i { transform: none; }
.fx-sure-bars i:nth-child(2) { transition-delay: .1s; } .fx-sure-bars i:nth-child(3) { transition-delay: .2s; } .fx-sure-bars i:nth-child(4) { transition-delay: .3s; } .fx-sure-bars i:nth-child(5) { transition-delay: .4s; }
.fx-sure-flow { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.fx-sure-flow em { flex: 1; padding: 10px 12px; border-radius: 14px; text-align: center; font: 700 15px/1 var(--display); font-style: normal; }
.fx-sure-flow .is-miss { background: var(--coral-soft); color: var(--coral-ink); }
.fx-sure-flow .is-fix { background: var(--lime); color: var(--ink); }
.fx-sure-flow .i { color: var(--muted); }
.fx-try { display: grid; gap: 8px; width: 100%; max-width: 270px; }
.fx-try p { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; font: 600 15px/1.3 var(--display); }
.fx-try small { font: 600 12px/1.3 var(--text); }
.fx-try .is-guess { background: #fff; color: var(--muted); }
.fx-try s { text-decoration-color: var(--coral); text-decoration-thickness: 2px; }
.fx-try .is-answer { background: var(--ink); color: #fff; }
.fx-try .is-answer small { color: var(--lime); }
.js .fx-try .is-answer { opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease) .6s, transform .6s var(--ease) .6s; }
.js .fx-why.is-in .fx-try .is-answer { opacity: 1; transform: none; }

/* Spacing simulator */
.fx-sim-sec { padding: clamp(96px, 12vw, 150px) 0; }
.fx-sim-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.fx-sim-copy h2 { max-width: 18ch; }
.fx-note { margin-top: 32px; padding: 20px 24px; border-radius: var(--r-lg); background: var(--soft); }
.fx-note h3 { font: 700 18px/1.3 var(--display); color: var(--ink); }
.fx-note p:not(.fx-source) { margin-top: 6px; color: var(--ink-2); font-size: 15px; line-height: 1.55; }
.fx-note .fx-source { margin-top: 8px; }
.fx-plot.is-sim { height: clamp(210px, 22vw, 280px); }
.fx-marker { position: absolute; z-index: 1; top: 0; bottom: 0; left: var(--x); border-left: 2px dashed var(--green); transition: left .6s var(--ease); }
.fx-marker[hidden] { display: none; }
.fx-marker.is-end span { transform: translateX(calc(-100% + 12px)); }
.fx-marker span { position: absolute; top: -26px; left: 0; transform: translateX(-50%); transition: transform .4s var(--ease); padding: 3px 10px; border-radius: 999px; background: var(--green); color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; }
.fx-range-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; }
.fx-range-row label { color: var(--ink); font-size: 14px; font-weight: 600; }
.fx-range { width: 100%; height: 44px; margin: 0; background: none; cursor: pointer; -webkit-appearance: none; appearance: none; }
.fx-range:focus-visible { outline: none; }
.fx-range::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: var(--soft-2); }
.fx-range::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: -10px; border: 4px solid var(--lime); border-radius: 999px; background: var(--ink); box-shadow: var(--shadow-2); -webkit-appearance: none; appearance: none; }
.fx-range:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--green); outline-offset: 3px; }
.fx-range::-moz-range-track { height: 8px; border-radius: 999px; background: var(--soft-2); }
.fx-range::-moz-range-progress { height: 8px; border-radius: 999px; background: var(--ink); }
.fx-range::-moz-range-thumb { width: 20px; height: 20px; border: 4px solid var(--lime); border-radius: 999px; background: var(--ink); }
.fx-range:focus-visible::-moz-range-thumb { outline: 2px solid var(--green); outline-offset: 3px; }
.fx-sim-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.fx-sim-stats p { padding: 14px 16px; border-radius: 18px; background: var(--soft); }
.fx-sim-stats strong { display: block; font: 700 26px/1 var(--display); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fx-sim-stats span { display: block; margin-top: 6px; color: var(--muted); font-size: 13px; line-height: 1.35; }
.fx-sim-stats .is-key { background: var(--lime); }
.fx-sim-stats .is-key span { color: #2E4A1B; }
.fx-days { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.fx-days li { padding: 6px 12px; border-radius: 999px; background: var(--soft); color: var(--muted); font-size: 13px; font-weight: 600; transition: background-color .3s, color .3s; }
.fx-days li.is-done { background: var(--ink); color: var(--lime); }
.fx-sim .fx-chart-note { margin-top: 16px; }

/* Medicine */
.fx-med-sec { padding: clamp(96px, 12vw, 150px) 0; background: var(--soft); }
.fx-med-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.fx-study { display: flex; flex-direction: column; padding: clamp(24px, 3vw, 32px); border-radius: var(--r-xl); background: #fff; box-shadow: var(--shadow-1); }
.fx-study-top { display: flex; flex-wrap: wrap; gap: 6px; }
.fx-tag-soft { background: var(--soft); color: var(--ink); }
.fx-study-stat { margin-top: 28px; font: 700 clamp(40px, 4vw, 52px)/1 var(--display); letter-spacing: -.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.fx-study-stat small { font-size: .46em; letter-spacing: -.01em; color: var(--muted); }
.fx-study-cap { margin-top: 8px; color: var(--muted); font-size: 14px; font-weight: 600; line-height: 1.4; }
.fx-study h3 { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); font: 700 20px/1.25 var(--display); letter-spacing: -.02em; color: var(--ink); }
.fx-study > p:not([class]) { margin-top: 8px; color: var(--muted); font-size: 15px; line-height: 1.55; }
.fx-study .fx-source { margin-top: auto; padding-top: 16px; }

/* Science timeline: the rail fills with the scroll (--tp) and each year lights up */
.fx-sci-sec { padding: clamp(96px, 12vw, 150px) 0; }
.fx-timeline { position: relative; max-width: 880px; margin: 0 auto; }
.fx-timeline::before, .fx-timeline::after { content: ""; position: absolute; left: 118px; top: 40px; bottom: 40px; width: 4px; border-radius: 999px; background: var(--soft-2); }
.fx-timeline::after { background: var(--lime-2); transform: scaleY(var(--tp, 0)); transform-origin: top; }
.fx-timeline li { position: relative; display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 60px; padding: 14px 0; }
.fx-timeline li::before { content: ""; position: absolute; z-index: 1; left: 112px; top: 32px; width: 16px; height: 16px; border: 3px solid var(--soft-2); border-radius: 999px; background: #fff; transition: background-color .4s, border-color .4s; }
.fx-timeline li.is-lit::before { border-color: var(--ink); background: var(--lime); }
.fx-year { padding-top: 12px; text-align: right; font: 700 28px/1 var(--display); letter-spacing: -.03em; color: #B3C2BD; font-variant-numeric: tabular-nums; transition: color .4s; }
.fx-timeline li.is-lit .fx-year { color: var(--ink); }
.fx-tl-body { padding: 16px 20px; border-radius: 20px; background: var(--soft); transition: background-color .4s, box-shadow .4s; }
.fx-timeline li.is-lit .fx-tl-body { background: #fff; box-shadow: var(--shadow-2); }
.fx-tl-body h3 { font: 700 18px/1.3 var(--display); color: var(--ink); }
.fx-tl-body p { margin-top: 4px; color: var(--muted); font-size: 15px; line-height: 1.5; }
.fx-tl-body cite { display: block; margin-top: 8px; color: var(--green); font-size: 13px; font-style: normal; font-weight: 600; }
.fx-refs { max-width: 880px; margin: 48px auto 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fx-refs summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; cursor: pointer; list-style: none; font: 600 18px/1.4 var(--display); color: var(--ink); }
.fx-refs summary::-webkit-details-marker { display: none; }
.fx-refs summary .i { width: 36px; height: 36px; padding: 8px; border-radius: 999px; background: var(--soft); transition: transform .35s var(--ease), background-color .2s; }
.fx-refs[open] summary .i { transform: rotate(180deg); background: var(--lime); }
.fx-refs ol { display: grid; gap: 12px; padding: 0 0 28px 20px; list-style: decimal; color: var(--muted); font-size: 14px; line-height: 1.55; }
.fx-refs a { color: var(--green); font-weight: 600; overflow-wrap: anywhere; }

/* In MEDFYE: tabs on one side, a lime stage with one scene per step on the other */
.fx-lab-sec { padding: clamp(96px, 12vw, 150px) 0; background: var(--soft); }
.fx-lab { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.fx-lab-tabs { display: grid; gap: 8px; }
.fx-lab-tab { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 4px 16px; width: 100%; padding: 16px 20px; overflow: hidden; border: 0; border-radius: 20px; background: none; text-align: left; cursor: pointer; transition: background-color .3s, box-shadow .3s; }
.fx-lab-tab:hover { background: var(--soft-2); }
.fx-lab-tab[aria-selected="true"] { background: #fff; box-shadow: var(--shadow-1); }
.fx-lab-num { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #fff; color: var(--ink); font: 700 15px/1 var(--display); transition: background-color .3s, color .3s; }
.fx-lab-tab[aria-selected="true"] .fx-lab-num { grid-row: span 2; align-self: start; background: var(--ink); color: var(--lime); }
.fx-lab-tab b { font: 700 18px/1.3 var(--display); color: var(--ink); }
.fx-lab-desc { grid-column: 2; color: var(--muted); font-size: 15px; line-height: 1.5; }
.fx-lab-tab:not([aria-selected="true"]) .fx-lab-desc { display: none; }
.fx-lab-bar { position: absolute; left: 20px; right: 20px; bottom: 0; height: 3px; overflow: hidden; border-radius: 999px; }
.fx-lab-bar i { display: block; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.fx-lab-tab.is-timing .fx-lab-bar i { animation: fx-fill 4.2s linear forwards; }
@keyframes fx-fill { to { transform: none; } }
.fx-lab-stage { display: grid; min-height: 540px; overflow: hidden; border-radius: var(--r-2xl); background: var(--lime); }
.fx-scene { grid-area: 1 / 1; display: grid; place-items: center; padding: clamp(20px, 4vw, 48px); opacity: 0; visibility: hidden; transform: translateY(18px) scale(.98); transition: opacity .45s var(--ease), transform .6s var(--ease), visibility 0s linear .6s; }
.fx-lab[data-step="1"] .is-q, .fx-lab[data-step="2"] .is-book, .fx-lab[data-step="3"] .is-card, .fx-lab[data-step="4"] .is-card { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.fx-panel { width: 100%; max-width: 460px; padding: 24px; border-radius: 24px; background: #fff; box-shadow: var(--shadow-3); }
.fx-panel-meta { color: var(--muted); font-size: 13px; font-weight: 600; }
.fx-panel-stem { margin-top: 10px; color: var(--ink); font: 600 17px/1.5 var(--display); }
.fx-panel .b-q-options { margin-top: 16px; }
.fx-panel .b-q-options li { padding: 10px 12px; }
.fx-book-head { display: grid; gap: 2px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.fx-book-head b { font: 700 20px/1.2 var(--display); color: var(--ink); }
.fx-book-head span { color: var(--muted); font-size: 13px; }
.fx-book ul { display: grid; gap: 8px; margin-top: 14px; }
.fx-book li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--soft); }
.fx-book li b { display: block; font: 700 16px/1.3 var(--display); color: var(--ink); }
.fx-book li small { color: var(--muted); font-size: 13px; }
.fx-book li em { padding: 4px 12px; border-radius: 999px; background: var(--coral-soft); color: var(--coral-ink); font-size: 12px; font-style: normal; font-weight: 700; }
.fx-book li.is-new { background: var(--ink); }
.fx-book li.is-new b { color: #fff; }
.fx-book li.is-new small { color: var(--night-muted); }
.fx-book li.is-new em { background: var(--lime); color: var(--ink); }
.fx-lab[data-step="2"] .fx-book li { animation: fx-push .6s var(--ease) both .15s; }
.fx-lab[data-step="2"] .fx-book li.is-new { animation: fx-drop .6s var(--ease) both .45s; }
@keyframes fx-push { from { transform: translateY(-68px); } }
@keyframes fx-drop { from { opacity: 0; transform: translateY(-24px) scale(.96); } }
.fx-scene-card { display: grid; justify-items: center; gap: 16px; width: 100%; max-width: 440px; }
.fx-new-card { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 600; transition: opacity .4s, transform .4s var(--ease); }
.fx-new-card .i { width: 16px; height: 16px; color: var(--lime); stroke-width: 3; }
.fx-lab[data-step="3"] .fx-new-card { animation: rise .5s var(--ease) both .5s; }
.fx-lab[data-step="3"] .fx-lab-card { animation: fx-pop .6s var(--ease) both .1s; }
@keyframes fx-pop { from { opacity: 0; transform: scale(.92) rotate(-3deg); } }
.fx-lab[data-step="4"] .fx-new-card { opacity: 0; transform: translateY(-6px); }
.fx-lab-card { width: 100%; }
.fx-lab-card .fx-face { min-height: 210px; padding: 24px; box-shadow: var(--shadow-3); }
.fx-lab-card .fx-face-text { font-size: 20px; }
.fx-rates { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: 100%; transition: opacity .4s var(--ease), transform .5s var(--ease); }
.fx-lab:not([data-step="4"]) .fx-rates { opacity: 0; visibility: hidden; transform: translateY(8px); }
.fx-lab:not([data-step="4"]) .fx-rate-result { visibility: hidden; }
.fx-rates button { display: grid; gap: 2px; min-height: 56px; padding: 8px 6px; border: 0; border-radius: 14px; background: #fff; color: var(--ink); cursor: pointer; transition: background-color .2s, color .2s, transform .2s var(--ease); }
.fx-rates button:hover { transform: translateY(-2px); }
.fx-rates b { font: 700 15px/1.2 var(--display); }
.fx-rates small { color: var(--muted); font-size: 12px; font-weight: 600; }
.fx-rates button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.fx-rates button[aria-pressed="true"] small { color: var(--lime); }
.fx-rate-result { min-height: 1.5em; color: var(--ink); font-size: 15px; font-weight: 600; text-align: center; }

/* How to study: five rules and two cards side by side */
.fx-how-sec { padding: clamp(96px, 12vw, 150px) 0; background: var(--soft); }
.fx-how-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.fx-how-copy h2 { max-width: 18ch; }
.fx-rules { display: grid; margin-top: 32px; }
.fx-rules li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 20px; padding: 20px 0; border-top: 1px solid var(--line); }
.fx-rules .step-num { margin: 0; }
.fx-rules h3 { font: 700 20px/1.3 var(--display); letter-spacing: -.01em; color: var(--ink); }
.fx-rules p { margin-top: 4px; color: var(--muted); line-height: 1.55; }
.fx-compare { position: sticky; top: calc(var(--nav-h) + 24px); display: grid; gap: 16px; }
.fx-compare-item { padding: 24px; border-radius: var(--r-xl); background: #fff; box-shadow: var(--shadow-1); }
.fx-compare-item.is-good { background: var(--lime); box-shadow: none; }
.fx-compare-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font: 700 17px/1.3 var(--display); color: var(--ink); }
.fx-compare-head .i { width: 28px; height: 28px; padding: 6px; border-radius: 999px; background: var(--coral-soft); color: var(--coral-ink); stroke-width: 2.8; }
.is-good .fx-compare-head .i { background: var(--ink); color: var(--lime); }
.fx-small-card { width: 100%; }
.fx-small-card .fx-face { min-height: 164px; }
.fx-compare-note { margin-top: 14px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.is-good .fx-compare-note { color: #2E4A1B; }

@media (max-width: 960px) {
  .fx-hero-grid, .fx-test, .fx-ebb, .fx-race-grid, .fx-sim-grid, .fx-lab, .fx-how-grid, .fx-duo { grid-template-columns: minmax(0, 1fr); }
  .fx-hero-copy, .fx-test-copy, .fx-race-copy, .fx-sim-copy, .fx-how-copy { text-align: center; }
  .fx-hero-copy .hero-lead, .fx-test h2, .fx-test .lead, .fx-race-copy h2, .fx-race-copy .lead, .fx-sim-copy h2, .fx-sim-copy .lead, .fx-how-copy h2, .fx-how-copy .lead, .fx-drain { margin-inline: auto; }
  .fx-hero-copy .hero-actions, .fx-cites, .fx-test-actions { justify-content: center; }
  .fx-hero-visual { width: 100%; max-width: 620px; margin: 24px auto 0; }
  .fx-tiles { width: 100%; max-width: 460px; margin: 0 auto; }
  .fx-note, .fx-rules { text-align: left; }
  .fx-ebb { max-width: 680px; margin-inline: auto; }
  .fx-insights, .fx-why-grid, .fx-med-grid { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; }
  .fx-race, .fx-sim, .fx-lab { width: 100%; max-width: 620px; margin-inline: auto; }
  .fx-lab-stage { order: -1; min-height: 0; }
  .fx-compare { position: static; width: 100%; max-width: 560px; margin-inline: auto; }
  .fx-rules { max-width: 560px; margin-inline: auto; }
}
@media (max-width: 640px) {
  .fx-hero-visual { padding: 52px 0 196px; }
  .fx-hero-card { right: 4px; width: min(250px, 78%); }
  .fx-hero-float { left: auto; right: -4px; top: 0; }
  .fx-plot.is-ebb { margin-left: 46px; }
  .fx-plot.is-ebb .fx-ylab { left: -46px; }
  .fx-plot { margin: 24px 4px 32px 34px; }
  .fx-ylab { left: -34px; width: 28px; font-size: 11px; }
  .fx-xlab { font-size: 11px; }
  .fx-xlab.is-minor { display: none; }
  .fx-test, .fx-recall, .fx-duo { padding: 28px 20px; border-radius: 32px; }
  .fx-tiles { gap: 8px; }
  .fx-tile-face { border-radius: 16px; }
  .fx-test-actions .btn, .fx-recall-actions .btn { width: 100%; }
  .fx-chips { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .fx-chip { min-height: 52px; font-size: 16px; }
  .fx-race-val { font-size: 26px; }
  .fx-duo-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fx-duo-nums p { min-width: 0; padding: 16px; }
  .fx-duo-nums strong { font-size: 44px; }
  .fx-sim-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fx-sim-stats .is-key { grid-column: 1 / -1; }
  .fx-lab-stage { border-radius: 32px; }
  .fx-scene { padding: 16px; }
  .fx-panel { padding: 18px; }
  .fx-panel-stem { font-size: 15px; }
  .fx-lab-card .fx-face-text { font-size: 18px; }
  .fx-rates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fx-timeline::before, .fx-timeline::after { left: 6px; top: 24px; }
  .fx-timeline li { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px 0 12px 36px; }
  .fx-timeline li::before { left: 0; top: 16px; }
  .fx-year { padding-top: 0; text-align: left; font-size: 24px; }
  .fx-rules li { grid-template-columns: 40px minmax(0, 1fr); gap: 16px; }
  .fx-rules .step-num { width: 40px; height: 40px; border-radius: 12px; font-size: 14px; }
}

/* GUIDES AND COMPARISONS (js/guias.js): vs. banco de questões (bq-), cronograma com IA (ia-), quando começar (qc-)
   and Revalida (rv-). They reuse the vs, method, bank, weeks and flashcards page blocks; only what is new lives here. */

/* vs. banco de questões: an illustrated common bank (no real product) */
.phone .screen.gq { display: flex; flex-direction: column; aspect-ratio: 780 / 1688; background: #F3F6F5; color: var(--ink); font-size: calc(var(--pw) * .042); }
.gq-title { margin: 4% 7% 0; font: 700 1.25em/1.2 var(--display); }
.gq-search { display: flex; align-items: center; gap: .5em; margin: 4% 6% 0; padding: .7em .9em; border: 1px solid var(--line); border-radius: .9em; background: #fff; color: var(--muted); font-size: .85em; }
.gq-search .i { width: 1.1em; height: 1.1em; }
.gq-chips { display: flex; flex-wrap: wrap; gap: .35em; margin: 3% 6% 0; }
.gq-chips span { padding: .3em .7em; border-radius: 999px; background: #E3E8E6; color: #4B5E5A; font-size: .75em; font-weight: 600; }
.gq-count { margin: 5% 7% 2%; color: var(--muted); font-size: .8em; font-weight: 600; }
.gq-list { display: grid; gap: .45em; margin: 0 5%; }
.gq-list li { display: grid; gap: .15em; padding: .7em .8em; border-radius: .8em; background: #fff; }
.gq-list b { font-size: .85em; }
.gq-list span { color: var(--muted); font-size: .72em; }

.bq-feedback-sec { padding: clamp(96px, 12vw, 150px) 0; background: var(--soft); }
.bq-feedback-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.bq-feedback-copy h2 { max-width: 16ch; }
.bq-toggle { max-width: 360px; margin-top: 28px; background: #fff; }
.bq-toggle button { min-height: 44px; }
.bq-science { display: grid; gap: 16px; margin-top: 32px; }
.bq-science li { padding: 18px 20px; border-radius: var(--r-lg); background: #fff; color: var(--ink-2); font-size: 15px; line-height: 1.55; }
.bq-science b { display: block; margin-bottom: 4px; color: var(--ink); font: 700 17px/1.3 var(--display); }
.bq-science .fx-source { display: block; margin-top: 6px; }
.bq-q { padding: clamp(20px, 3vw, 32px); border-radius: var(--r-xl); background: #fff; box-shadow: var(--shadow-3); }
.bq-q .b-q-options { margin-top: 16px; }
.bq-q .b-why, .bq-take, .bq-after, .bq-key { transition: opacity .4s var(--ease); }
.bq-feedback-grid[data-mode="comum"] .bq-q .b-why, .bq-feedback-grid[data-mode="comum"] .bq-take, .bq-feedback-grid[data-mode="comum"] .bq-after { display: none; }
.bq-feedback-grid[data-mode="medfye"] .bq-key { display: none; }
.bq-feedback-grid[data-mode="medfye"] .bq-q .b-why, .bq-feedback-grid[data-mode="medfye"] .bq-take, .bq-feedback-grid[data-mode="medfye"] .bq-after { animation: rise .5s var(--ease) both; }
.bq-key { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 14px 16px; border-radius: 16px; background: var(--soft); color: var(--ink); font-weight: 600; }
.bq-key .i { color: var(--green); }
.bq-after { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.bq-after span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 600; }
.bq-after .i { width: 16px; height: 16px; color: var(--lime); }
.bq-asks-sec { padding: clamp(96px, 12vw, 150px) 0; background: var(--soft); }
.bq-asks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; max-width: 1040px; margin: 0 auto; }
.bq-asks-sec + .vs-fit { padding-top: clamp(96px, 12vw, 150px); }

/* Cronograma com IA: an illustrated chat (no real product) and the week-3 queue */
.ia-hero-visual { position: relative; padding: 24px 0 72px 24px; }
.ia-chat { position: relative; max-width: 460px; margin-left: auto; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-xl); background: #fff; box-shadow: var(--shadow-3); }
.ia-chat-head { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--line); color: var(--ink); }
.ia-chat-head b { font: 700 16px/1.2 var(--display); }
.ia-chat-head small { margin-left: auto; padding: 3px 10px; border-radius: 999px; background: var(--soft); color: var(--muted); font-size: 12px; font-weight: 600; }
.ia-bot { display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 10px; background: var(--soft-2); color: var(--ink); }
.ia-bot .i { width: 18px; height: 18px; }
.ia-msg { max-width: 88%; margin-top: 14px; padding: 12px 14px; border-radius: 18px; font-size: 15px; line-height: 1.5; }
.ia-msg.is-me { margin-left: auto; border-bottom-right-radius: 6px; background: var(--ink); color: #fff; }
.ia-msg.is-ai { border-bottom-left-radius: 6px; background: var(--soft); color: var(--ink); }
.ia-plan-mini { display: grid; gap: 6px; margin: 10px 0; }
.ia-plan-mini li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 8px; padding: 8px 10px; border-radius: 12px; background: #fff; font-size: 14px; }
.ia-plan-mini b { color: var(--muted); font-size: 13px; }
.ia-typing { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 14px; flex-direction: row-reverse; }
.ia-typing .i { width: 18px; height: 18px; }
.js .ia-chat .ia-msg { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.js .ia-chat .ia-msg.is-ai { transition-delay: .7s; }
.js .ia-chat.is-in .ia-msg { opacity: 1; transform: none; }
.ia-float.is-err { left: 0; bottom: 96px; }
.ia-float.is-same { right: 12px; bottom: 8px; }
.ia-float.is-same > .i { color: var(--muted); }

.ia-adapt-sec { padding: clamp(96px, 12vw, 150px) 0; background: var(--soft); }
.ia-adapt { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 20px; align-items: start; max-width: 1120px; margin: 0 auto; }
.ia-col-title { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; color: var(--ink); font: 700 17px/1.3 var(--display); }
.ia-col-title img { width: 22px; height: 22px; border-radius: 6px; }
.ia-static { position: relative; padding: 24px; border-radius: var(--r-xl); background: #fff; box-shadow: var(--shadow-1); }
.ia-static-list { display: grid; gap: 8px; }
.ia-static-list li { display: grid; grid-template-columns: 90px minmax(0, 1fr); align-items: center; gap: 12px; padding: 14px 16px; border-radius: 18px; background: var(--soft); }
.ia-static-list b { color: var(--muted); font-size: 14px; }
.ia-static-list span { color: var(--ink); font: 700 17px/1.25 var(--display); }
.ia-stamp { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; padding: 14px 16px; border-radius: 16px; background: var(--coral-soft); color: var(--coral-ink); font-size: 14px; font-weight: 600; line-height: 1.45; opacity: 0; transform: translateY(8px); transition: opacity .45s var(--ease), transform .5s var(--ease); }
.ia-stamp .i { width: 18px; height: 18px; margin-top: 1px; }
.ia-adapt[data-state="after"] .ia-stamp { opacity: 1; transform: none; transition-delay: .3s; }
.ia-adapt[data-state="after"] .ia-static-list li { animation: ia-hold .5s var(--ease) both; }
@keyframes ia-hold { 40% { transform: translateX(-4px); } 70% { transform: translateX(3px); } }
.ia-queue .mq-head { padding-left: 60px; }
.ia-adapt-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 24px; max-width: 1120px; margin: 28px auto 0; }
.ia-adapt-foot .m-toggle { margin-top: 0; }
.ia-adapt-foot .m-example-note { max-width: 60ch; margin-top: 0; }
.ia-note { max-width: 760px; margin: 24px auto 0; color: var(--muted); font-size: 14px; line-height: 1.55; text-align: center; }

.ia-gaps-sec { padding: clamp(96px, 12vw, 150px) 0; }
.ia-gaps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 1040px; margin: 0 auto; }
.ia-gap { display: flex; flex-direction: column; padding: clamp(24px, 3vw, 32px); border-radius: var(--r-xl); background: var(--soft); }
.ia-gap h3 { font: 700 22px/1.2 var(--display); letter-spacing: -.02em; color: var(--ink); }
.ia-type { position: relative; margin-top: 16px; padding: 14px 16px; border-radius: 18px 18px 18px 6px; background: #fff; color: var(--muted); font-size: 15px; font-style: italic; line-height: 1.5; }
.ia-auto { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; margin-top: auto; padding-top: 16px; color: var(--ink); font-size: 15px; font-weight: 500; line-height: 1.5; }
.ia-auto .i { width: 24px; height: 24px; padding: 5px; border-radius: 999px; background: var(--ink); color: var(--lime); stroke-width: 3; }

.ia-refs-sec { padding: clamp(96px, 12vw, 150px) 0; background: var(--soft); }
.ia-refs-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.ia-refs-copy h2 { max-width: 16ch; }
.ia-bar-card { margin: 0; padding: clamp(24px, 3vw, 36px); border-radius: var(--r-xl); background: #fff; box-shadow: var(--shadow-2); }
.ia-bar { display: flex; gap: 4px; height: 64px; margin-top: 20px; }
.ia-bar span { display: flex; align-items: center; flex: var(--w) 1 0; min-width: 0; padding: 0 14px; border-radius: 14px; overflow: hidden; transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease); }
.ia-bar span + span { transition-delay: .35s; } .ia-bar span + span + span { transition-delay: .7s; padding: 0; justify-content: center; }
.ia-bar-card.is-in .ia-bar span { transform: none; }
.ia-bar b { font: 700 18px/1 var(--display); white-space: nowrap; }
.ia-bar .is-fake, .ia-bar-legend i.is-fake { background: var(--coral); color: var(--ink); }
.ia-bar .is-wrong, .ia-bar-legend i.is-wrong { background: var(--coral-soft); color: var(--coral-ink); }
.ia-bar .is-ok, .ia-bar-legend i.is-ok { background: var(--lime); color: var(--ink); }
.ia-bar .is-ok b { font-size: 14px; }
.ia-bar-legend { display: grid; gap: 12px; margin: 24px 0 16px; }
.ia-bar-legend li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 12px; align-items: start; }
.ia-bar-legend i { width: 14px; height: 14px; margin-top: 3px; border-radius: 4px; }
.ia-bar-legend b { display: block; color: var(--ink); font: 700 16px/1.3 var(--display); }
.ia-bar-legend small { color: var(--muted); font-size: 14px; }

/* Quando começar: how many times one subject comes back before the exam */
.qc-horizon { padding-bottom: 24px; }
.qc-months { color: var(--ink); font: 700 16px/1.3 var(--display); }
.qc-presets { margin-top: 16px; }
.qc-presets button { min-height: 40px; }
.qc-track { position: relative; height: 96px; margin: 28px 10px 8px; }
.qc-line { position: absolute; left: 0; right: 0; top: 40px; height: 4px; border-radius: 999px; background: var(--soft-2); }
.qc-end { position: absolute; top: 0; color: var(--muted); font-size: 12px; font-weight: 700; }
.qc-end.is-now { left: 0; } .qc-end.is-exam { right: 0; color: var(--ink); }
.qc-end.is-exam::after { content: ""; position: absolute; right: 0; top: 30px; width: 4px; height: 28px; border-radius: 999px; background: var(--ink); }
.qc-dot { position: absolute; top: 42px; left: var(--x); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 999px; background: var(--lime); border: 2.5px solid var(--ink); }
.qc-dot.is-early { background: #fff; }
.qc-track:not(.is-static) .qc-dot { animation: qc-pop .45s var(--ease) both; animation-delay: calc(min(var(--i), 30) * 45ms); }
@keyframes qc-pop { from { opacity: 0; transform: scale(.3); } }
.qc-tick { position: absolute; top: 62px; left: var(--x); transform: translateX(-50%); color: var(--muted); font-size: 12px; font-weight: 600; white-space: nowrap; }
.qc-tick::before { content: ""; position: absolute; left: 50%; top: -18px; height: 10px; border-left: 1px dashed #BFCFCA; }
.qc-horizon .fx-range-row { margin-top: 4px; }
.qc-horizon .fx-sim-stats { margin-top: 8px; }

.qc-sci-sec { padding: clamp(96px, 12vw, 150px) 0; background: var(--soft); }
.qc-sci-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.qc-sci-copy h2 { max-width: 18ch; }
.qc-sci-point { margin-top: 20px; color: var(--ink); font-size: 18px; line-height: 1.55; }
.qc-sci-copy .fx-source { margin-top: 12px; }
.qc-bahrick { box-shadow: var(--shadow-2); border: 0; }
.qc-b-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; align-items: center; margin-top: 24px; }
.qc-b-row p b { display: block; color: var(--ink); font: 700 18px/1.2 var(--display); }
.qc-b-row p small { color: var(--muted); font-size: 13px; }
.qc-b-track { position: relative; height: 28px; border-radius: 999px; background: var(--soft); }
.qc-b-track i { position: absolute; top: 50%; left: calc(8px + (100% - 16px) * var(--x) / 100%); width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 999px; background: #8FA39E; }
.qc-b-row.is-spaced .qc-b-track i { width: 14px; height: 14px; margin: -7px 0 0 -7px; background: var(--ink); box-shadow: 0 0 0 3px var(--lime); }
.js .qc-b-track i { opacity: 0; transform: scale(.3); transition: opacity .3s, transform .4s var(--ease); transition-delay: calc(var(--i) * 45ms); }
.js .qc-b-row.is-spaced .qc-b-track i { transition-delay: calc(.4s + var(--i) * 90ms); }
.js .qc-bahrick.is-in .qc-b-track i { opacity: 1; transform: none; }
.qc-b-axis { display: flex; justify-content: space-between; margin: 10px 0 0 126px; color: var(--muted); font-size: 12px; font-weight: 600; }
.qc-b-result { display: flex; align-items: center; gap: 10px; margin-top: 20px; padding: 12px 16px; border-radius: 16px; background: var(--lime); color: var(--ink); font-weight: 600; }
.qc-b-result .i { width: 22px; height: 22px; padding: 4px; border-radius: 999px; background: var(--ink); color: var(--lime); stroke-width: 3; }
.qc-bahrick .fx-chart-note { margin-top: 12px; }
.qc-cepeda { max-width: 760px; margin: clamp(40px, 5vw, 64px) auto 0; background: #fff; }

.qc-light-sec { padding: clamp(96px, 12vw, 150px) 0; }
.qc-light-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.qc-light-copy h2 { max-width: 16ch; }
.qc-week { padding: clamp(24px, 3vw, 36px); border-radius: var(--r-xl); background: var(--ink); color: #fff; }
.qc-week .fx-chart-title { color: #fff; }
.qc-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-top: 20px; }
.qc-days li { display: grid; justify-items: center; align-content: start; gap: 6px; padding: 12px 4px; border-radius: 16px; background: var(--night-3); }
.qc-days b { margin-bottom: 4px; color: var(--night-muted); font-size: 12px; }
.qc-days i { width: 16px; height: 16px; border-radius: 5px; background: var(--lime); transform: scale(0); transition: transform .4s var(--ease); }
.qc-week.is-in .qc-days i { transform: none; }
.qc-days li:nth-child(2) i { transition-delay: .06s; } .qc-days li:nth-child(3) i { transition-delay: .12s; } .qc-days li:nth-child(4) i { transition-delay: .18s; } .qc-days li:nth-child(5) i { transition-delay: .24s; } .qc-days li:nth-child(6) i { transition-delay: .3s; } .qc-days li:nth-child(7) i { transition-delay: .36s; }
.qc-week-sum { display: grid; gap: 4px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--night-line); }
.qc-week-sum strong { font: 700 32px/1 var(--display); letter-spacing: -.02em; }
.qc-week-sum span { color: var(--night-muted); font-size: 14px; }
.qc-phase-tag { display: inline-block; margin-bottom: 12px; padding: 4px 12px; border-radius: 999px; background: var(--soft); color: var(--ink); font-size: 13px; font-weight: 700; }
.qf-phase.is-final .qc-phase-tag { background: var(--ink); color: var(--lime); }

/* Revalida */
.rv-float.is-goal { left: 0; top: 96px; }
.rv-float.is-count { right: 0; bottom: 96px; }
.rv-exam-sec { padding: clamp(96px, 12vw, 150px) 0; background: var(--soft); }
.rv-stages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 1040px; margin: 0 auto; }
.rv-stage { display: flex; flex-direction: column; padding: clamp(28px, 4vw, 40px); border-radius: var(--r-xl); background: var(--lime); }
.rv-stage.is-practice { background: #fff; box-shadow: var(--shadow-1); }
.rv-stage-num { color: #2E4A1B; font-size: 14px; font-weight: 700; }
.rv-stage.is-practice .rv-stage-num { color: var(--muted); }
.rv-stage h3 { margin-top: 6px; font: 700 30px/1.1 var(--display); letter-spacing: -.03em; color: var(--ink); }
.rv-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 24px 0 20px; }
.rv-facts li { display: grid; gap: 6px; align-content: start; padding: 14px; border-radius: 18px; background: rgba(255,255,255,.55); }
.rv-stage.is-practice .rv-facts li { background: var(--soft); }
.rv-facts strong { color: var(--ink); font: 700 32px/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.rv-facts span { color: #2E4A1B; font-size: 13px; line-height: 1.35; }
.rv-stage.is-practice .rv-facts span { color: var(--muted); }
.rv-stage > p:not([class]) { flex: 1; color: #2E4A1B; line-height: 1.55; }
.rv-stage.is-practice > p:not([class]) { color: var(--muted); }
.rv-stage-medfye { display: flex; align-items: center; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(11,23,20,.12); color: var(--ink); font-weight: 600; }
.rv-stage-medfye .i { width: 24px; height: 24px; padding: 5px; border-radius: 999px; background: var(--ink); color: var(--lime); stroke-width: 3; }
.rv-stage-medfye.is-out { border-top-color: var(--line); }
.rv-stage-medfye.is-out .i { padding: 3px; background: var(--coral-soft); color: var(--coral-ink); stroke-width: 2.2; }
.rv-areas { max-width: 1040px; margin: 20px auto 0; padding: 24px; border-radius: var(--r-xl); background: #fff; box-shadow: var(--shadow-1); text-align: center; }
.rv-areas-title { color: var(--muted); font-size: 14px; font-weight: 600; }
.rv-areas ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.rv-areas li { padding: 10px 16px; border-radius: 999px; background: var(--ink); color: #fff; font: 600 15px/1.2 var(--display); }
.rv-areas-note { margin-top: 12px; color: var(--muted); font-size: 14px; }

.rv-cut-sec { padding: clamp(96px, 12vw, 150px) 0; }
.rv-cut-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.rv-cut-copy h2 { max-width: 16ch; }
.rv-score { display: flex; align-items: baseline; gap: 6px; padding: 6px 14px; border-radius: 999px; background: var(--coral-soft); color: var(--coral-ink); transition: background-color .3s, color .3s; }
.rv-score strong { font: 700 24px/1 var(--display); font-variant-numeric: tabular-nums; }
.rv-score span { font-size: 13px; font-weight: 600; }
.rv-cut.is-pass .rv-score { background: var(--lime); color: var(--ink); }
.rv-grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 5px; margin-top: 20px; }
.rv-grid i { position: relative; aspect-ratio: 1; border-radius: 5px; background: var(--soft-2); transition: background-color .25s; }
.rv-grid i.is-hit { background: #B9C8C3; }
.rv-cut.is-pass .rv-grid i.is-hit { background: var(--lime-2); }
.rv-grid i.is-cut { box-shadow: 0 0 0 2px var(--ink); }
.rv-grid i.is-cut::after { content: "59"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink); font: 700 10px/1 var(--display); }
.rv-cut .fx-range-row { margin-top: 16px; }
.rv-verdict { min-height: 1.6em; margin-top: 4px; color: var(--ink); font-weight: 600; line-height: 1.5; }
.rv-fit-sec { padding-top: clamp(96px, 12vw, 150px); }

/* Narrow phones: long button labels wrap instead of overflowing */
@media (max-width: 400px) {
  .hero-actions .btn, .section-cta .btn { white-space: normal; text-align: center; line-height: 1.3; padding-block: 12px; }
}
@media (max-width: 1100px) {
  .rv-facts strong { font-size: 28px; }
}
@media (max-width: 960px) {
  .bq-feedback-grid, .ia-adapt, .ia-refs-grid, .qc-sci-grid, .qc-light-grid, .rv-cut-grid, .rv-stages { grid-template-columns: minmax(0, 1fr); }
  .bq-feedback-copy, .ia-refs-copy, .qc-sci-copy, .qc-light-copy, .rv-cut-copy { text-align: center; }
  .bq-feedback-copy h2, .bq-feedback-copy .lead, .ia-refs-copy h2, .ia-refs-copy .lead, .qc-sci-copy h2, .qc-sci-copy .lead, .qc-light-copy h2, .qc-light-copy .lead, .rv-cut-copy h2, .rv-cut-copy .lead, .bq-toggle { margin-inline: auto; }
  .bq-science, .qc-sci-point { text-align: left; }
  .bq-feedback-grid { display: flex; flex-direction: column; gap: 0; }
  .bq-feedback-copy { display: contents; }
  .bq-feedback-copy h2 { order: 1; } .bq-feedback-copy .lead { order: 2; } .bq-toggle { order: 3; width: 100%; } .bq-q { order: 4; margin-top: 28px; } .bq-science { order: 5; }
  .bq-science, .bq-q, .ia-static, .ia-queue, .ia-bar-card, .qc-bahrick, .qc-week, .rv-cut, .qc-horizon { width: 100%; max-width: 620px; margin-inline: auto; }
  .ia-hero-visual { width: 100%; max-width: 560px; margin: 16px auto 0; padding-left: 0; }
  .ia-chat { margin-inline: auto; }
  .bq-asks { grid-template-columns: minmax(0, 1fr); max-width: 420px; }
  .ia-gaps { grid-template-columns: minmax(0, 1fr); max-width: 620px; }
  .rv-stages { max-width: 620px; }
  .qc-light-grid .qc-week { order: 1; }
}
@media (max-width: 640px) {
  .bq-asks .m-step { height: 440px; align-items: center; text-align: center; }
  .ia-float.is-err { left: -4px; bottom: 112px; }
  .ia-float.is-same { right: -4px; bottom: 16px; }
  .ia-hero-visual { padding-bottom: 96px; }
  .ia-msg { font-size: 14px; }
  .ia-plan-mini li { grid-template-columns: 68px minmax(0, 1fr); font-size: 13px; }
  .ia-static, .ia-queue { padding: 16px; }
  .ia-static-list li { grid-template-columns: 76px minmax(0, 1fr); padding: 12px; }
  .ia-static-list span { font-size: 15px; }
  .ia-bar { height: 52px; }
  .ia-bar b { font-size: 15px; }
  .ia-bar span { padding: 0 8px; }
  .ia-bar .is-ok b { display: none; }
  .qc-horizon .fx-sim-stats .is-key { order: -1; }
  .qc-dot { width: 10px; height: 10px; margin: -5px 0 0 -5px; border-width: 2px; }
  .qc-b-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .qc-b-axis { margin-left: 0; }
  .qc-days { gap: 4px; }
  .qc-days li { padding: 10px 2px; border-radius: 12px; }
  .qc-days i { width: 12px; height: 12px; border-radius: 4px; }
  .qc-tick { font-size: 11px; }
  .rv-facts { grid-template-columns: minmax(0, 1fr); }
  .rv-facts li { grid-template-columns: 64px minmax(0, 1fr); align-items: center; }
  .rv-facts strong { font-size: 26px; }
  .rv-stage h3 { font-size: 26px; }
  .rv-grid { gap: 4px; }
  .rv-float.is-goal { top: 40px; }
  .rv-float.is-count { bottom: 40px; }
}

/* Consent (LGPD): floating card, shown only when a tracking ID is set (or with ?cookies=preview) */
.consent { position: fixed; z-index: 80; left: 16px; right: 16px; bottom: 16px; display: flex; justify-content: center; pointer-events: none; }
.consent[hidden] { display: none; }
.consent-card { width: min(560px, 100%); padding: 20px; border: 1px solid var(--line); border-radius: 24px; background: #fff; box-shadow: var(--shadow-3); pointer-events: auto; animation: menu-in .35s var(--ease); }
.consent-title { font: 700 18px/1.3 var(--display); color: var(--ink); }
.consent-text { margin-top: 6px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.consent-text a { color: var(--ink); font-weight: 600; }
.consent-options { display: grid; gap: 8px; margin-top: 14px; }
.consent-options[hidden] { display: none; }
.consent-options label { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 2px 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--soft); color: var(--ink); font-size: 14px; font-weight: 600; cursor: pointer; }
.consent-options input { width: 18px; height: 18px; margin: 0; accent-color: var(--green); }
.consent-options small { grid-column: 2; color: var(--muted); font-weight: 500; }
.consent-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.footer-cookie { min-height: 40px; padding: 0; border: 0; background: none; color: #6E8A82; font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; }

/* Legal page (privacy policy draft) */
.legal { padding: calc(var(--nav-h) + 48px) 0 clamp(64px, 8vw, 104px); }
.legal-wrap { max-width: 760px; }
.legal-draft { margin-bottom: 32px; padding: 16px 20px; border-radius: 16px; background: var(--coral-soft); color: var(--coral-ink); font-size: 15px; line-height: 1.5; }
.legal h1 { font: 700 clamp(32px, 4vw, 48px)/1.1 var(--display); letter-spacing: -.03em; color: var(--ink); }
.legal-updated { margin-top: 8px; color: var(--muted); font-size: 14px; }
.legal h2 { margin-top: 40px; font: 700 22px/1.25 var(--display); letter-spacing: -.02em; color: var(--ink); }
.legal p, .legal li { margin-top: 12px; color: var(--ink-2); font-size: 16px; line-height: 1.65; }
.legal ul { display: grid; gap: 4px; margin-top: 8px; padding-left: 20px; list-style: disc; }

/* Responsive */
@media (max-width: 1100px) {
  .float-queue { left: -4%; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cycle-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .hero { padding-top: calc(var(--nav-h) + 24px); }
  .hero-block { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-bottom: 40px; }
  .hero-doodle { display: none; }
  .hero-visual { min-height: 520px; margin-top: 40px; }
  .hero-phone-a { --pw: 220px; left: 6%; top: 0; }
  .hero-phone-b { --pw: 230px; right: 6%; top: 50px; }
  .float-queue { left: 0; bottom: -10px; }
  .float-ok { right: 0; top: -20px; }
  .float-goal { right: 0; bottom: 60px; }
  .float-review { display: none; }
      .numbers-row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .num:nth-child(3) { border-left: 0; padding-left: 0; }
  .bank-grid, .formula-grid, .metrics-row, .faq-grid, .pain-grid, .final-block { grid-template-columns: minmax(0, 1fr); }
  .final-block { min-height: 0; padding-bottom: 0; }
  .final-visual { height: 320px; }
  .bank-demo { min-height: 720px; }
  .bank-phone { right: 32px; }
  .story-grid { grid-template-columns: minmax(0, 1fr); }
  .story-device { display: none; }
  .story-steps { display: grid; gap: 20px; max-width: 560px; margin-inline: auto; }
  .story-step { position: sticky; top: calc(var(--nav-h) + 8px + var(--i, 0) * 10px); align-items: center; justify-content: flex-start; height: clamp(360px, calc(100svh - var(--nav-h) - 110px), 560px); min-height: 0; overflow: hidden; padding: 28px 24px 0; border-radius: 32px; background: #fff; box-shadow: var(--shadow-2), 0 0 0 1px var(--line); text-align: center; opacity: 1; transform-origin: 50% 0; transform: scale(calc(1 - var(--cover, 0) * .06)); }
  .story-step > * { flex-shrink: 0; }
  .story-step::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--night); opacity: calc(var(--cover, 0) * .22); pointer-events: none; }
  .story-step p { margin-inline: auto; font-size: 16px; }
  .step-shot { display: block; flex: none; width: min(230px, 64%); margin-top: 24px; border-radius: 32px; border: 8px solid #0A0C0F; box-shadow: var(--shadow-3); }

    .faq-head { position: static; }
  .metrics-row, .metrics-row.is-reverse { grid-template-columns: minmax(0, 1fr); }
  .metrics-row.is-reverse .metrics-copy { order: 0; }
  .shot-float.is-left { left: -8px; } .shot-float.is-right { right: -8px; }
  .shot-float { width: 46%; }
  .reel { --rh: 380px; --gap: 16px; }
  .vs-split, .fit-grid, .combo-grid { grid-template-columns: minmax(0, 1fr); }
  .vs-side { height: 540px; }
  .night-axis { margin-left: 0; }
  .night-row { grid-template-columns: minmax(0, 1fr); }
  .night-name { grid-row: auto; padding-top: 0; }
  .combo-copy { text-align: center; }
  .combo-copy h2, .combo-copy .lead { margin-inline: auto; }
  .combo-steps { max-width: 560px; margin-inline: auto; text-align: left; }
  .combo-visual { min-height: 600px; }
  .m-hero-grid, .m-example-grid, .m-review-grid, .qf-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .m-hero-copy, .qf-copy, .m-example-copy, .m-review-copy { text-align: center; }
  .m-hero-copy .hero-lead, .qf-copy .hero-lead, .m-example-copy .lead, .m-example-note, .m-review-copy .lead, .m-review-copy h2, .m-example-copy h2 { margin-inline: auto; }
  .m-hero-copy .hero-actions { justify-content: center; }
  .m-hero-visual { min-height: 600px; }
  .m-signal-grid, .qf-phases { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; }
  .m-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m-rule-grid.is-three { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; }
  .m-queue, .qf-card, .m-review-card { width: 100%; max-width: 620px; margin-inline: auto; }
  .b-hero-grid, .b-anatomy-grid, .b-filters-grid { grid-template-columns: minmax(0, 1fr); }
  .b-hero-copy, .b-filters-copy { text-align: center; }
  .b-hero-copy .hero-lead, .b-filters-copy .lead, .b-filters-copy h2 { margin-inline: auto; }
  .b-hero-copy .hero-actions { justify-content: center; }
  .b-hero-visual { min-height: 600px; }
  .b-q, .b-panel, .b-callouts { width: 100%; max-width: 620px; margin-inline: auto; }
  .b-tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
        .plan-grid { grid-template-columns: minmax(0, 1fr); }
  }
/* Mobile and tablet: single-column intros are centred (headline, lead, actions); lists stay left-aligned inside a centred block */
@media (max-width: 960px) {
  .hero-copy { align-items: center; text-align: center; }
  .hero-lead { margin-inline: auto; }
  .hero-actions, .hero-proof { justify-content: center; }
  .pain-copy, .bank-copy, .formula-copy, .metrics-copy, .faq-head, .final-copy, .proof-head, .tools .section-head { text-align: center; }
  .pain-copy h2, .bank-copy h2, .formula-copy h2, .metrics-copy h2, .faq-head h2, .final-copy h2, .proof-head h2, .tools .section-head { margin-inline: auto; }
  .pain-copy .lead, .bank-copy .lead, .metrics-copy .lead, .final-sub { margin-inline: auto; }
  .pain-list { margin-inline: auto; text-align: left; }
  .crumbs, .equation, .section-cta { justify-content: center; }
  .pills { margin-inline: auto; text-align: left; }
  .checks { justify-content: center; text-align: left; }
  .day:not(.is-pinned) .day-head { justify-content: center; text-align: center; }
  .day:not(.is-pinned) .day-head .lead { margin-inline: auto; }
}
@media (max-width: 640px) {
  :root { --nav-h: 76px; }
  .hero-block { padding: 32px 24px 28px; border-radius: 32px; }
  .hero-title { font-size: clamp(36px, 10vw, 48px); }
  .hero-actions .btn { width: 100%; }
  .hero-visual { min-height: 440px; }
  .hero-phone-a { --pw: 172px; left: -2%; }
  .hero-phone-b { --pw: 182px; right: -2%; top: 36px; }
  .float { padding: 12px 12px; border-radius: 12px; }
  .float b { font-size: 14px; }
  .float-queue { width: 210px; left: 0; bottom: -20px; padding: 12px; }
  .float-goal { display: none; }
  .float-ok { top: -30px; }
  .numbers-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; }
  .num, .num:nth-child(3) { border-left: 0; padding: 0; }
  .bank-demo { min-height: 0; display: grid; }
  .bank-phone { display: none; }
  .qcard { position: relative; top: 0; width: 100%; padding: 20px; }
  .bento { grid-template-columns: minmax(0, 1fr); }
  .span-2, .span-4 { grid-column: auto; flex-direction: column; align-items: stretch; }
  .pills { grid-template-columns: minmax(0, 1fr); }
    .mini-errors, .mini-devices { width: 100%; }
  .cycle-steps { grid-template-columns: minmax(0, 1fr); }
  .moment { min-height: 500px; padding: 24px; }
  .moment-time { font-size: 36px; }
  .moment-phone { --pw: 220px; top: max(252px, calc(100% - 290px)); margin-left: -110px; }
  .moment.is-sum { min-height: 0; padding: 32px 24px; align-items: center; }
  .moment { text-align: center; }
  .moment-time { justify-content: center; }
  .moment h3, .moment-text, .sum-text { margin-inline: auto; }
  .moment.is-sum .btn { align-self: stretch; }
  .num { text-align: center; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; text-align: center; }
  .footer-brand { display: grid; justify-items: center; }
  .footer-links-col { justify-items: center; }
  .footer-bottom { justify-content: center; text-align: center; }
  .plan, .plan-includes { padding: 28px; border-radius: 24px; }
  .switch button { padding: 0 16px; }
  .final-block { padding: 28px 24px; border-radius: 32px; }
  .pain-phone { --pw: 272px; }
    .final-block { padding-bottom: 0; }
  .queue-visual { --qpw: 256px; --qcw: 272px; }
  .reel { --rh: 330px; --gap: 12px; }
  .vs-side { height: 500px; padding: 28px 20px 0; }
  .vs-phone { --pw: 220px; top: 128px; margin-left: -110px; }
  .vs-float.is-trad { left: 4%; bottom: 72px; }
  .vs-float.is-medfye { right: 4%; bottom: 96px; }
  .vs-badge { width: 56px; height: 56px; margin: -28px 0 0 -28px; font-size: 18px; box-shadow: 0 0 0 6px #fff; }
  .night-bar { height: 52px; }
  .seg { padding: 0 10px; font-size: 14px; }
  .duel-head { display: none; }
  .duel-row { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 16px 0; }
  .duel-q { padding: 0 0 4px; }
  .duel-cell small { display: block; margin-bottom: 6px; font: 700 14px/1.3 var(--display); opacity: .75; }
  .fit-card li { font-size: 16px; }
  .combo-phone { --pw: 240px; margin-left: -120px; }
  .combo-visual { min-height: 540px; }
  .combo-float { left: 0; bottom: 40px; }
  .m-hero-phone { --pw: 240px; margin-left: -120px; }
  .m-hero-visual { min-height: 540px; }
  .m-why { width: 250px; bottom: 32px; }
  .m-steps, .m-rule-grid { grid-template-columns: minmax(0, 1fr); }
  .m-step { height: 440px; align-items: center; text-align: center; }
  .m-queue { padding: 16px; }
  .mq-head { display: none; }
  .mq-row { grid-template-columns: 32px minmax(0, 1fr) auto; padding: 12px; }
  .mq-calc { grid-column: 2 / -1; grid-row: 2; }
  .mq-score { grid-column: 3; grid-row: 1; }
  .mq-cut-label { right: 16px; }
  .m-bars { height: 240px; gap: 8px; }
  .m-bar b { font-size: 16px; }
  .m-toggle { width: 100%; white-space: normal; }
  .qf-fields { grid-template-columns: minmax(0, 1fr); }
  .qf-stepper { justify-self: start; }
  .qf-big { justify-content: center; }
  .qf-until, .qf-message { text-align: center; }
  .qf-legend { justify-content: center; }
  .qf-track b { font-size: 13px; }
  .qf-sunday { font-size: 14px; }
  .consent { left: 12px; right: 12px; bottom: 12px; }
  .consent-actions .btn { flex: 1 1 auto; }
  .b-hero-phone { --pw: 240px; margin-left: -120px; }
  .b-hero-visual { min-height: 540px; }
  .b-float.is-comment { top: 60px; }
  .b-float.is-level { bottom: 60px; }
  .b-numbers { text-align: center; }
  .b-q { padding: 20px 16px 20px 30px; }
  .b-pin { width: 22px; height: 22px; font-size: 12px; }
  .b-q-meta .b-pin, .b-q-stem .b-pin, .b-q-options li .b-pin, .b-q-take .b-pin, .b-q-refs .b-pin { left: -26px; }
  .b-q-stem { font-size: 16px; }
  .b-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .b-mode-grid, .b-tool-grid { grid-template-columns: minmax(0, 1fr); }
  .b-mode { text-align: center; align-items: center; }
  .b-mode-visual.is-train { justify-items: stretch; width: 100%; }
  .vcard-play { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
  .reel-item figcaption b { font-size: 15px; }
  .chat-skel { padding: 12px; gap: 8px; }
  .equation { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 6px; }
  .eq-x { align-self: center; }
  .eq-chip { padding: 10px; }
  .eq-chip b { font-size: 15px; }
  .eq-chip small { font-size: 12px; line-height: 1.3; }
  .final-visual { height: 280px; }
  .final-phone { --pw: 240px; margin-left: -120px; }
  .section-cta { flex-direction: column; align-items: stretch; gap: 12px; }
  .section-cta .btn { width: 100%; }
  .cta-note { justify-content: center; }
}
@media (max-width: 380px) {
  .price { flex-wrap: wrap; row-gap: 0; }
  .price strong { font-size: 52px; }
  .equation { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .eq-x { justify-self: center; }
  .eq-chip { grid-template-columns: auto 1fr; align-items: baseline; gap: 12px; padding: 12px 16px; }
  .eq-chip b { font-size: 16px; }
  .eq-chip small { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js .reveal { opacity: 1; translate: none; }
  .draw, .scribble path, .hero-doodle path { stroke-dashoffset: 0 !important; }
    .marquee-track { transform: none; }
  .mini-bars i, .mini-podium div { transform: none; }
  .shot-mask { display: none !important; }
  .js .fx-draw { clip-path: none; }
  .js [data-hero-chart] .fx-dot, .fx-race-bar i, .fx-sure-bars i { transform: none; }
  .js .fx-try .is-answer { opacity: 1; transform: none; }
  .js .ia-chat .ia-msg, .js .qc-b-track i { opacity: 1; transform: none; }
  .ia-bar span, .qc-days i { transform: none; }
}