/* Homepage v5.2 (2026-10-18): painterly ember landscapes, one prompt box, a race that runs in time order.
   Palette: warm near-black #161316, chocolate #453027, ember #FF6D29, warm grey #BABABA, white. The brightest thing
   on screen is the action (a white round send / white pill). Type: Host Grotesk + Instrument Serif italic for the
   one accent phrase per heading. Spacing: an 8-pt scale (--s1 = 8px). Loaded after tape.css, ds.css, sniff.css. */
:root {
  --ink: #161316; --ink-2: #1D1719; --choc: #453027; --ember: #FF6D29; --ember-2: #FF8A52; --ember-3: #C9531E;
  --grey: #BABABA; --grey-2: #8F8888; --white: #FFFFFF; --cream: #FFE7D6;
  --hair: rgba(255, 255, 255, .12); --hair-2: rgba(255, 255, 255, .2); --glass: rgba(255, 255, 255, .05);
  --qb: #FF6D29; --qb-hi: #FF8A52; --qb-lo: #C9531E; --qb-dim: rgba(255, 109, 41, .16); --navy: #161316;
  --font: "Host Grotesk", "Inter Tight", system-ui, -apple-system, sans-serif;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 40px; --s6: 48px; --s8: 64px; --s10: 80px; --s12: 96px; --s16: 128px;
  --r: 20px; --r-lg: 28px;
}
html { background: var(--ink) !important; } body { background: var(--ink) !important; color: var(--white); font-family: var(--font) !important; }
body::before { content: none !important; } .sx-wash { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* chrome (header pill, footer) lives in ember.css, shared by every page */
.btn { font-family: var(--font) !important; }
.btn.p, .btn.w { background: var(--white) !important; color: var(--ink) !important; border: 0 !important; border-radius: 999px !important; box-shadow: none !important; }
.btn.p:hover, .btn.w:hover { background: var(--cream) !important; }
.btn.s { background: transparent !important; color: var(--white) !important; box-shadow: inset 0 0 0 1px var(--hair-2) !important; border: 0 !important; border-radius: 999px !important; }
.btn.s:hover { background: var(--glass) !important; }
:focus-visible { outline: 2px solid var(--ember-2); outline-offset: 3px; border-radius: 8px; }

/* type */
.q5 h1, .q5 h2, .q5 h3 { font-family: var(--font); color: var(--white); letter-spacing: -.035em; }
.q5 h2 { font-weight: 600; font-size: clamp(32px, 4.2vw, 56px); line-height: 1.06; margin: var(--s2) 0 0; max-width: 17ch; text-wrap: balance; }
.q5 h1 em, .q5 h2 em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; color: var(--cream);
  background: linear-gradient(95deg, #FFF3EA 0%, #FFC9A8 45%, var(--ember-2) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-right: .06em; }
.k5 { font: 500 12px/1 var(--mono, ui-monospace, monospace); text-transform: uppercase; letter-spacing: .14em; color: var(--ember-2); margin: 0; }
.lede5 { font-size: clamp(17px, 1.3vw, 19px); line-height: 1.6; color: var(--grey); max-width: 52ch; margin: var(--s3) 0 0; }
.fine5 { font-size: 13px; line-height: 1.6; color: var(--grey-2); max-width: 68ch; margin: var(--s3) 0 0; }
.c5 { text-align: center; } .c5 h2, .c5 .lede5, .c5 .fine5 { margin-left: auto; margin-right: auto; }
.narrow5 { max-width: 760px; }

/* middle sections: a quieter heading tier and a solid accent (serif italic stays in the hero and close) */
.s5 h2 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.12; }
#speed h2, #how h2 { font-size: clamp(32px, 4vw, 56px); line-height: 1.06; }
.s5 h2 em { font-family: var(--font); font-style: normal; font-weight: 600; letter-spacing: -.035em; background: none; -webkit-text-fill-color: var(--ember-2); color: var(--ember-2); padding: 0; }
/* sections: a calm ink ground; light comes from the paintings, not from blobs */
.s5 { position: relative; padding: var(--s10) 0; scroll-margin-top: 88px; }
#numbers.s5 { padding: var(--s8) 0; }
.q5 .rail { max-width: 1048px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; box-sizing: border-box; }
#how, #paper, #pricing, #faq, #speed, #problem, #safety, #numbers { scroll-margin-top: 88px; }
.s5 + .s5 { border-top: 1px solid rgba(255, 255, 255, .05); }
.split5 { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(var(--s4), 6vw, var(--s12)); align-items: center; }
.split5.rev { grid-template-columns: .9fr 1.1fr; }
.art5 { margin: 0; aspect-ratio: 3 / 2; border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .9), 0 0 0 1px var(--hair); background: var(--choc); }
.art5 img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.6s cubic-bezier(.2, .7, .2, 1); }
.art5.on img { transform: scale(1); }

/* ---- the hero: a painted ember sunset over mountains, slowly alive ---- */
.h5 { position: relative; min-height: max(720px, 100svh); display: flex; align-items: flex-start; overflow: hidden; isolation: isolate; margin-top: -64px; }
.h5-sky { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: #1A120F; }
.h5-scene { position: absolute; left: 50%; bottom: 0; width: max(100%, calc(100svh * 1.5)); aspect-ratio: 3 / 2; transform: translateX(-50%);
  animation: h5drift 46s ease-in-out infinite alternate; transform-origin: 66% 58%; }
.h5-img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.h5-sun { position: absolute; left: 66.4%; top: 52.8%; width: 15%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 196, 120, .55) 0%, rgba(255, 140, 70, .25) 35%, transparent 68%); mix-blend-mode: screen; animation: h5pulse 7s ease-in-out infinite; }
.h5-spark { position: absolute; left: var(--x); top: var(--y); width: 1.5%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 220, 170, .95) 0%, rgba(255, 150, 80, .4) 40%, transparent 70%); mix-blend-mode: screen; animation: h5twinkle 4.8s ease-in-out var(--d) infinite; }
.h5-mist { position: absolute; left: 0; right: 0; top: 46%; height: 54%; overflow: hidden; mix-blend-mode: screen; opacity: .5; pointer-events: none; }
.h5-mist i { position: absolute; top: 0; width: 100%; height: 100%; background: url(/q5-mist.webp) center / 100% 100% no-repeat; animation: h5mist 70s linear infinite; }
.h5-mist i:nth-child(2) { left: -100%; animation-delay: 0s; }
.h5-mist i:nth-child(1) { left: 0; }
.h5-loop { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 66% bottom; }
.h5-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22, 19, 22, .72) 0%, rgba(22, 19, 22, .25) 38%, rgba(22, 19, 22, 0) 58%, rgba(22, 19, 22, .55) 88%, var(--ink) 100%); }
@keyframes h5drift { from { transform: translateX(-50%) scale(1); } to { transform: translateX(-50%) scale(1.045); } }
@keyframes h5pulse { 0%, 100% { opacity: .75; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } }
@keyframes h5twinkle { 0%, 100% { opacity: .35; } 45% { opacity: 1; } 60% { opacity: .55; } }
@keyframes h5mist { from { transform: translateX(0); } to { transform: translateX(100%); } }

.h5-copy { position: relative; padding-top: clamp(120px, 15vh, 168px); padding-bottom: var(--s10); display: flex; flex-direction: column; align-items: center; text-align: center; }
.h5-live { display: inline-flex; align-items: center; gap: var(--s1); padding: 8px 14px; border-radius: 999px; font: 500 12px/1 var(--mono, ui-monospace, monospace);
  letter-spacing: .06em; text-transform: uppercase; color: var(--grey); background: rgba(22, 19, 22, .45); box-shadow: inset 0 0 0 1px var(--hair); backdrop-filter: blur(10px); }
.h5-live b { color: var(--white); font-weight: 600; }
.h5-live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 0 4px rgba(255, 109, 41, .2); animation: h5twinkle 2.4s ease-in-out infinite; }
.h5 h1 { font-weight: 600; font-size: clamp(42px, 6.6vw, 92px); line-height: 1; margin: var(--s3) 0 0; max-width: 13ch; text-wrap: balance; text-shadow: 0 2px 30px rgba(0, 0, 0, .35); }
.h5 h1 em { display: inline; }
.h5-sub { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.7; color: #F1E7E0; max-width: 46ch; margin: var(--s3) 0 0; }
.h5-sub span { text-shadow: 0 1px 2px rgba(0, 0, 0, .6), 0 0 24px rgba(22, 19, 22, .9); }
.h5-copy::before { content: ""; position: absolute; left: 50%; top: 120px; width: min(980px, 110%); height: 560px; transform: translateX(-50%); z-index: -1; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 45%, rgba(22, 19, 22, .62) 0%, rgba(22, 19, 22, .35) 55%, transparent 100%); }

/* the prompt box (refs: meku / helixa) */
.h5-ask { width: min(720px, 100%); margin: var(--s5) 0 0; padding: var(--s2) var(--s2) var(--s2) var(--s3); text-align: left; border-radius: var(--r-lg);
  background: rgba(31, 23, 21, .92); backdrop-filter: blur(20px) saturate(1.2); -webkit-backdrop-filter: blur(20px) saturate(1.2);
  box-shadow: inset 0 0 0 1px var(--hair-2), 0 30px 80px -30px rgba(0, 0, 0, .85); transition: box-shadow .2s; }
.h5-ask:focus-within { box-shadow: inset 0 0 0 1px rgba(255, 160, 110, .55), 0 0 0 6px rgba(255, 109, 41, .12), 0 30px 80px -30px rgba(0, 0, 0, .85); }
.h5-ask textarea { width: 100%; resize: none; border: 0; outline: none; background: transparent; color: var(--white); font: 400 17px/1.55 var(--font); padding: var(--s1) 0 0; min-height: 64px; }
.h5-ask textarea::placeholder { color: #9E9290; }
.h5-ask-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin-top: var(--s2); }
.h5-tools { display: flex; flex-wrap: wrap; gap: var(--s1); }
.tool5 { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 999px; border: 0; cursor: pointer;
  font: 500 13px/1 var(--font); color: #E9DDD6; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--hair); transition: background .15s, color .15s; }
.tool5::before { content: "+"; color: var(--ember-2); font-weight: 600; }
.tool5:hover { background: rgba(255, 109, 41, .14); color: var(--white); }
.tool5.on { background: rgba(255, 109, 41, .2); box-shadow: inset 0 0 0 1px rgba(255, 140, 90, .5); }
.h5-send { flex: none; width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer; background: var(--white); color: var(--ink);
  display: grid; place-items: center; box-shadow: 0 10px 30px -10px rgba(255, 140, 90, .7); transition: transform .15s, background .15s; }
.h5-send:hover { transform: translateY(-1px); background: var(--cream); }
.h5-send svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.h5-go { flex: none; display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 22px 0 24px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--white); color: var(--ink); font: 600 15px/1 var(--font); box-shadow: 0 10px 30px -10px rgba(255, 140, 90, .7); transition: background .15s, transform .15s; }
.h5-go:hover { background: var(--cream); transform: translateY(-1px); }
.h5-go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.h5-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s1); margin-top: var(--s3); }
.pill5 { height: 36px; padding: 0 var(--s2); border-radius: 999px; border: 0; cursor: pointer; font: 500 14px/1 var(--font); color: #EADFD8;
  background: rgba(22, 19, 22, .45); box-shadow: inset 0 0 0 1px var(--hair-2); backdrop-filter: blur(10px); transition: background .15s; }
.pill5:hover { background: rgba(255, 255, 255, .1); color: var(--white); }
.h5-micro { font: 500 11.5px/1.4 var(--mono, ui-monospace, monospace); letter-spacing: .08em; text-transform: uppercase; color: #B7A9A2; margin: var(--s3) 0 0; }
.h5-ask .h5-micro { margin: 0; text-transform: none; letter-spacing: 0; font: 400 13px/1.4 var(--font); }

/* the live belt under the hero */
.belt5 { padding: var(--s6) 0 var(--s8); }
.belt5 .k5 { margin-bottom: var(--s3); color: var(--grey-2); }
.belt5 .sx-track { position: relative !important; top: auto !important; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.belt5 .sx-coin { background: rgba(255, 255, 255, .05) !important; box-shadow: inset 0 0 0 1px var(--hair) !important; border: 0 !important; }
.belt5 .sx-coin b { color: var(--white) !important; } .belt5 .sx-coin i { color: var(--grey) !important; }
.belt5 .sx-coin .k { background: rgba(255, 109, 41, .14) !important; color: var(--cream) !important; border: 0 !important; }
.belt5 .k5 { display: block; margin-bottom: var(--s3) !important; }

/* problem / paper / control */
.pains5, .checks5 { list-style: none; padding: 0; margin: var(--s4) 0 0; display: grid; gap: var(--s2); }
.pains5 li, .checks5 li { position: relative; padding-left: var(--s4); font-size: 17px; line-height: 1.55; color: var(--grey); }
.pains5 li b, .checks5 li b { color: var(--white); font-weight: 600; }
.pains5 li::before { content: ""; position: absolute; left: 0; top: .45em; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255, 140, 90, .7); }
.checks5 li::before { content: ""; position: absolute; left: 0; top: .35em; width: 18px; height: 18px; border-radius: 50%; background: var(--ember)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23161316' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; }

/* ---- the race: the person's minute first, then Sniff on the same clock ---- */
.race5 { margin: var(--s5) auto 0; max-width: none; padding: var(--s4); border-radius: var(--r-lg); background: linear-gradient(180deg, #211A1A, #1A1416);
  box-shadow: inset 0 0 0 1px var(--hair), 0 40px 90px -50px rgba(0, 0, 0, .9); }
.race5-top { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s2); margin-bottom: var(--s3); }
.race5-who { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.tag5 { display: inline-flex; align-items: center; gap: var(--s1); height: 32px; padding: 0 14px; border-radius: 999px; font: 600 14px/1 var(--font);
  color: var(--white); background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px var(--hair-2); }
.tag5::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--grey); }
.race5.sniff .tag5 { background: rgba(255, 109, 41, .18); box-shadow: inset 0 0 0 1px rgba(255, 140, 90, .55); }
.race5.sniff .tag5::before { background: var(--ember); }
.race5-note { font: 500 12px/1 var(--mono, ui-monospace, monospace); letter-spacing: .08em; text-transform: uppercase; color: var(--grey-2); }
.race5-clock { font: 600 clamp(36px, 4.4vw, 56px)/1 var(--font); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--white); }
.race5-clock small { font-size: .45em; color: var(--grey-2); margin-left: 4px; font-weight: 500; }
.race5.sniff .race5-clock { color: var(--ember-2); }
.race5-chart { display: block; width: 100%; height: clamp(180px, 26vw, 300px); overflow: visible; }
.race5-grid line { stroke: rgba(255, 255, 255, .06); stroke-width: 1; vector-effect: non-scaling-stroke; }
.race5-ghost { fill: none; stroke: rgba(255, 255, 255, .16); stroke-width: 2; stroke-dasharray: 2 6; vector-effect: non-scaling-stroke; }
.race5-line { fill: none; stroke: var(--ember); stroke-width: 3; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 10px rgba(255, 109, 41, .55)); }
.race5-area { fill: url(#r5fill); }
.race5-head { stroke: rgba(255, 255, 255, .85); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.race5 .ev line { stroke: rgba(255, 255, 255, .25); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.race5 .ev circle { fill: var(--white); stroke: var(--ink); stroke-width: 2; vector-effect: non-scaling-stroke; }
.race5 .ev.buy circle { fill: var(--grey); }
.race5 .ev.sniff circle { fill: var(--ember); }
.race5-axis { position: relative; height: 20px; margin-top: var(--s1); font: 500 11.5px/1 var(--mono, ui-monospace, monospace); color: var(--grey-2); }
.race5-axis span { position: absolute; left: var(--at); transform: translateX(-50%); white-space: nowrap; }
.race5-plot { position: relative; overflow-x: clip; overflow-y: visible; }
.lab5 { position: absolute; transform: translate(-50%, calc(-100% - 14px)); white-space: nowrap; padding: 6px 10px; border-radius: 999px; font: 600 12.5px/1 var(--font);
  color: var(--ink); background: var(--white); box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .7); pointer-events: none; animation: arrive5 .4s ease forwards; }
.lab5.sniff { background: var(--ember); color: #1B0F0A; transform: translate(-6px, calc(-100% - 14px)); }
.lab5.buy { background: #CFC6C1; transform: translate(6px, calc(-100% - 14px)); }
.race5-sum { margin: var(--s3) 0 0; font-size: 16px; line-height: 1.55; color: var(--grey); }
.race5-sum b { color: var(--white); font-weight: 600; } .race5-sum b.hot { color: var(--ember-2); }
.race5-axis span:first-child { transform: none; } .race5-axis span:last-child { transform: translateX(-100%); }
.race5-rows { display: grid; gap: var(--s2); margin-top: var(--s3); }
.race5-row { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: var(--s2); align-items: stretch; }

.race5-lane { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding-left: var(--s2); border-left: 3px solid var(--grey-2); }
.race5-row.sniff .race5-lane { border-left-color: var(--ember); }
.race5-lane b { font: 600 15px/1.2 var(--font); color: var(--white); }
.race5-lane span { font: 600 24px/1 var(--font); letter-spacing: -.02em; color: var(--grey); font-variant-numeric: tabular-nums; }
.race5-row.sniff .race5-lane span { color: var(--ember-2); }
.race5-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s1); }
.race5-row.sniff .race5-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.race5-steps li { padding: 12px 14px; border-radius: 16px; background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); transition: background .35s, box-shadow .35s; }
.race5-steps li.on { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--hair-2); }
.race5-steps li b { display: block; font: 600 15px/1.2 var(--font); color: var(--white); font-variant-numeric: tabular-nums; }
.race5-steps li span { display: block; font-size: 13px; line-height: 1.35; color: var(--grey); margin-top: 4px; }
.race5-row.sniff .race5-steps li.on { background: rgba(255, 109, 41, .12); box-shadow: inset 0 0 0 1px rgba(255, 140, 90, .45); }
.race5-foot { display: flex; align-items: flex-start; gap: var(--s2); margin-top: var(--s3); }
.race5-src { font-size: 12.5px; line-height: 1.55; color: var(--grey-2); }
.facts5 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); max-width: none; margin: var(--s3) auto 0; }
.facts5 > div { padding: var(--s3); border-radius: var(--r); background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px var(--hair); }
.facts5 b { display: block; font: 600 clamp(32px, 3.4vw, 46px)/1 var(--font); letter-spacing: -.03em; color: var(--grey); }
.facts5 .hot b { color: var(--white); }
.facts5 .hot { background: linear-gradient(180deg, rgba(255, 109, 41, .12), rgba(255, 109, 41, .03)); box-shadow: inset 0 0 0 1px rgba(255, 140, 90, .35); }
.facts5 span { display: block; margin-top: var(--s1); font-size: 14.5px; line-height: 1.45; color: var(--grey); }

/* how it works */
.how5 { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(var(--s4), 5vw, var(--s10)); align-items: start; margin-top: var(--s5); }
.steps5 { display: grid; gap: 0; margin: 0; }
.steps5 article { padding: var(--s3) 0; border-top: 1px solid var(--hair); }
.steps5 article:last-child { border-bottom: 1px solid var(--hair); }
.proof5 { margin: 0; }
.proof5 img { display: block; width: 100%; height: auto; border-radius: var(--r-lg); box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .9), 0 0 0 1px var(--hair); }
.proof5 figcaption { margin-top: var(--s2); font-size: 14px; line-height: 1.5; color: var(--grey-2); }
.n5 { font: 500 13px/1 var(--mono, ui-monospace, monospace); color: var(--ember-2); letter-spacing: .1em; }
.steps5 h3 { font-weight: 600; font-size: 22px; margin: var(--s2) 0 0; letter-spacing: -.02em; }
.steps5 p { font-size: 15.5px; line-height: 1.55; color: var(--grey); margin: var(--s1) 0 0; }
.viz5 { margin-top: var(--s2); height: 64px; border-radius: 16px; background: rgba(0, 0, 0, .22); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
  display: flex; align-items: center; padding: 0 var(--s2); gap: var(--s1); font: 500 12.5px/1.5 var(--mono, ui-monospace, monospace); color: #E7DAD2; }
.viz5.watch i { width: 14px; height: 14px; border-radius: 50%; background: rgba(255, 255, 255, .12); animation: v5on 3s ease-in-out infinite; animation-delay: calc(var(--n, 0) * .3s); }
.viz5.watch i:nth-child(2) { --n: 1; } .viz5.watch i:nth-child(3) { --n: 2; } .viz5.watch i:nth-child(4) { --n: 3; } .viz5.watch i:nth-child(5) { --n: 4; } .viz5.watch i:nth-child(6) { --n: 5; }
.viz5.check, .viz5.rule { flex-direction: column; align-items: flex-start; justify-content: center; }
.viz5 .ok { padding: 4px 10px; border-radius: 999px; background: var(--white); color: var(--ink); font-weight: 600; }
@keyframes v5on { 0%, 100% { background: rgba(255, 255, 255, .12); } 30% { background: var(--ember); box-shadow: 0 0 12px rgba(255, 109, 41, .7); } }

/* numbers */
.stats5 { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: var(--s5); }
.stats5 { gap: var(--s4) !important; } .stats5 > div { padding: var(--s2) 0 0; border-top: 1px solid var(--hair-2); }
.stats5 b { display: block; font: 600 clamp(36px, 4vw, 56px)/1 var(--font); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.stats5 span { display: block; margin-top: var(--s1); font-size: 15px; color: var(--grey); }

/* pricing */
.plans5 { margin-top: var(--s5) !important; gap: var(--s2) !important; }
.plans5 .sx-plan { border-radius: var(--r-lg) !important; padding: var(--s4) !important; background: rgba(255, 255, 255, .03) !important; box-shadow: inset 0 0 0 1px var(--hair) !important; border: 0 !important; backdrop-filter: none !important; }
.plans5 .sx-plan.hl { background: linear-gradient(180deg, rgba(255, 109, 41, .14), rgba(255, 109, 41, .03)) !important; box-shadow: inset 0 0 0 1px rgba(255, 140, 90, .45) !important; }
.plans5 .sx-plan h3, .plans5 .sx-plan .price b { color: var(--white) !important; }
.plans5 .sx-plan p, .plans5 .sx-plan li, .plans5 .sx-plan .price span, .plans5 .sx-plan .cred { color: var(--grey) !important; }
.plans5 .sx-plan .cred b { color: var(--white) !important; font-weight: 600; }
.plans5 .sx-plan .tag { background: rgba(255, 109, 41, .18) !important; color: var(--cream) !important; border: 0 !important; font: 500 12.5px/1 var(--font) !important; padding: 6px 10px !important; border-radius: 999px !important; }
.plans5 .pl-head { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: var(--s1) !important; min-height: 64px; }

/* faq */
.faq5 details { background: transparent !important; box-shadow: none !important; border-radius: 0 !important; margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; border-left: 0 !important; border-right: 0 !important; border-top: 0 !important; }
.faq5 details summary { padding: 0 !important; background: none !important; }
.faq5 { margin-top: var(--s6); }
.faq5 details { border-bottom: 1px solid var(--hair); padding: var(--s3) 0; }
.faq5 summary { cursor: pointer; font: 600 18px/1.4 var(--font); color: var(--white); list-style: none; display: flex; justify-content: space-between; gap: var(--s2); }
.faq5 summary::after { content: "+"; color: var(--ember-2); font-weight: 400; font-size: 22px; line-height: 1; transition: transform .2s; }
.faq5 details[open] summary::after { transform: rotate(45deg); }
.faq5 summary::-webkit-details-marker { display: none; }
.faq5 p { color: var(--grey); font-size: 16px; line-height: 1.6; margin: var(--s2) 0 0; max-width: 62ch; }

/* close: the dawn painting under the last ask */
.close5 { position: relative; overflow: hidden; padding: clamp(var(--s12), 14vw, 180px) 0; isolation: isolate; }
.close5-bg { position: absolute; inset: 0; z-index: -1; }
.close5-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.close5::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--ink) 0%, rgba(22, 19, 22, .45) 30%, rgba(22, 19, 22, .2) 60%, rgba(22, 19, 22, .7) 100%); }
.close5 h2 { max-width: 20ch; text-shadow: 0 2px 30px rgba(0, 0, 0, .5); }
.close5-copy { display: flex; flex-direction: column; align-items: center; }
.h5-ask.small { width: min(640px, 100%); }
.h5-ask.small textarea { min-height: 56px; }

/* reveals */
.q-reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.q-reveal.on { opacity: 1; transform: none; }
.qb-arrive { opacity: 0; transform: translateY(14px); animation: arrive5 .9s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: calc(var(--i, 0) * .09s + .1s); }
@keyframes arrive5 { to { opacity: 1; transform: none; } }

/* consent */
.sx-consent { background: rgba(26, 20, 20, .9) !important; backdrop-filter: blur(16px); box-shadow: inset 0 0 0 1px var(--hair-2), 0 20px 60px -20px #000 !important; border: 0 !important; border-radius: 18px !important; color: var(--white) !important; }

/* phones */
@media (max-width: 900px) {
  .split5, .split5.rev { grid-template-columns: 1fr; }
  .split5.rev .art5 { order: -1; }
  .steps5, .stats5, .facts5, .how5 { grid-template-columns: 1fr; }
  .race5-row { grid-template-columns: 1fr; }
  .race5-lane { flex-direction: row; align-items: baseline; justify-content: space-between; padding: 0 0 0 12px; }
  .race5-row.you .race5-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .h5 { min-height: 760px; }
  .h5-scene { width: max(100%, calc(760px * 1.5)); }
  .h5-copy { padding-top: 112px; }
  .h5-live { font-size: 10.5px; padding: 7px 12px; letter-spacing: .04em; white-space: nowrap; }
  .h5 h1 { font-size: 44px; }
  .h5-ask { padding: var(--s2); border-radius: 22px; }
  .h5-ask textarea { font-size: 16px; min-height: 96px; }
  .h5-ask-row { align-items: flex-end; }
  .tool5 { height: 32px; padding: 0 12px; font-size: 12.5px; }
  .race5 { padding: var(--s3) var(--s2); }
  .race5-top { flex-direction: column; align-items: flex-start; }
  .race5-foot { flex-direction: column; }
  .q5 h2 { font-size: 34px; }
  .s5 { padding: var(--s8) 0; }
  .h5-pills { display: none; }
  .h5-go { height: 44px; padding: 0 16px 0 18px; font-size: 14px; }
  .h5-ask-row { flex-direction: column; align-items: stretch; }
  .h5-go { justify-content: center; }
  .race5-row.you .race5-steps, .race5-row.sniff .race5-steps { grid-template-columns: 1fr; gap: 0; }
  .race5-steps li { display: flex; gap: 12px; align-items: baseline; padding: 6px 0; border-radius: 0; box-shadow: none !important; background: none !important; border-bottom: 1px solid rgba(255, 255, 255, .06); }
  .race5-steps li b { min-width: 58px; font-size: 14px; } .race5-steps li span { margin: 0; }
  .race5-steps li.on b { color: var(--ember-2); }
  .how5 .proof5 { order: -1; }
  .s5 { padding: var(--s7, 56px) 0; }
  .lab5 { font-size: 11px; padding: 5px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .h5-scene, .h5-sun, .h5-spark, .h5-mist i, .h5-live .dot, .viz5.watch i { animation: none !important; }
  .q-reveal, .qb-arrive { opacity: 1; transform: none; animation: none; transition: none; }
  .art5 img { transform: none; }
}