/* CalDefiq website. Brand: charcoal #101214, electric lime #B8F34B, warm white #E9E9E4.
   System fonts only. App imagery = real CalDefiq screens (assets/app). Motion is timeline/scroll based,
   never pointer-driven, and is switched off for prefers-reduced-motion. */
:root {
  --ink: #07080a;
  --bg: #0a0b0d;
  --charcoal: #101214;
  --graphite: #15181b;
  --graphite-2: #1b1f23;
  --line: #20252a;
  --line-2: #2d3339;
  --lime: #b8f34b;
  --lime-soft: #c9f77a;
  --lime-ink: #101214;
  --white: #f4f5f2;
  --warm: #e9e9e4;
  --text: #c2c8cd;
  --muted: #8a939a;
  --faint: #5a636a;
  --warn: #f2c46b;
  --radius: 22px;
  --max: 1240px;
  --sans: "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: "Inter Display", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
@supports (overflow: clip) { body { overflow-x: clip; } }
img, svg { max-width: 100%; }
a { color: var(--lime-soft); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: #e4ffb4; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--lime); color: var(--lime-ink); }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 32px; }
.lime { color: var(--lime); }
.outline { color: transparent; -webkit-text-stroke: 1.5px #5d666e; }
.center { text-align: center; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--lime); color: var(--lime-ink); padding: 10px 16px; border-radius: 10px; font-weight: 800; z-index: 50; text-decoration: none; }
.skip:focus { left: 12px; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 40; background: rgba(10, 11, 13, .6); backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px); border-bottom: 1px solid transparent; transition: border-color .3s, background .3s; }
.site-header.scrolled { background: rgba(10, 11, 13, .86); border-bottom-color: var(--line); }
.header-inner { display: flex; align-items: center; gap: 20px; min-height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--white); text-decoration: none; font: 800 1.12rem/1 var(--display); letter-spacing: -.01em; }
.brand:hover { color: #fff; }
.logo-mark { width: 34px; height: auto; display: block; flex: none; }
.nav { display: flex; gap: 2px; margin-left: auto; }
.nav a { color: #b3bac0; text-decoration: none; font-size: .92rem; font-weight: 600; padding: 8px 14px; border-radius: 999px; transition: color .2s, background .2s; }
.nav a:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.nav a[aria-current="page"] { color: var(--white); background: rgba(255, 255, 255, .08); }
.status-pill { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-size: .78rem; font-weight: 700; letter-spacing: .02em; color: var(--lime); border: 1px solid rgba(184, 243, 75, .35); border-radius: 999px; padding: 7px 13px; }
.status-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); }
.menu { display: none; margin-left: auto; position: relative; }
.menu summary { list-style: none; cursor: pointer; width: 46px; height: 46px; border-radius: 14px; display: grid; place-content: center; gap: 6px; border: 1px solid var(--line-2); }
.menu summary::-webkit-details-marker { display: none; }
.menu summary span { display: block; width: 18px; height: 2px; background: var(--warm); border-radius: 2px; transition: transform .25s var(--ease); }
.menu[open] summary span:first-child { transform: translateY(4px) rotate(45deg); }
.menu[open] summary span:last-child { transform: translateY(-4px) rotate(-45deg); }
.menu-panel { position: absolute; right: 0; top: 58px; width: min(300px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 2px; padding: 10px; background: var(--graphite); border: 1px solid var(--line-2); border-radius: 18px; box-shadow: 0 24px 60px rgba(0, 0, 0, .5); }
.menu-panel a { color: var(--warm); text-decoration: none; font-weight: 650; padding: 13px 14px; border-radius: 12px; }
.menu-panel a:hover, .menu-panel a[aria-current="page"] { background: rgba(255, 255, 255, .06); }
.menu-panel .status-pill { align-self: flex-start; margin: 8px 6px 4px; }
.read-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; }
.read-progress i { display: block; height: 100%; width: 100%; background: var(--lime); transform-origin: 0 50%; transform: scaleX(var(--read, 0)); }

/* ---------- Buttons & small type ---------- */
.btn { display: inline-flex; align-items: center; gap: 10px; justify-content: center; min-height: 54px; padding: 0 26px; border-radius: 999px; font: 800 1rem/1 var(--sans); text-decoration: none; transition: transform .3s var(--ease), background .25s, border-color .25s, color .25s; }
.btn span { transition: transform .3s var(--ease); }
.btn:hover span { transform: translateX(3px); }
.btn-lime { background: var(--lime); color: var(--lime-ink); box-shadow: 0 10px 30px -10px rgba(184, 243, 75, .45); }
.btn-lime:hover { background: #c8fb68; color: var(--lime-ink); transform: translateY(-1px); }
.btn-ghost { color: var(--white); border: 1px solid var(--line-2); background: rgba(255, 255, 255, .02); }
.btn-ghost:hover { color: #fff; border-color: #4a535b; background: rgba(255, 255, 255, .05); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.cta-row.center { justify-content: center; }
.eyebrow-pill { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 26px; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--warm); padding: 8px 15px 8px 12px; border: 1px solid var(--line-2); border-radius: 999px; background: rgba(255, 255, 255, .03); backdrop-filter: blur(8px); }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); flex: none; box-shadow: 0 0 0 0 rgba(184, 243, 75, .5); animation: pulse 2.6s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(184, 243, 75, .5); } 70%, 100% { box-shadow: 0 0 0 10px rgba(184, 243, 75, 0); } }
.kicker { margin: 0 0 22px; font: 800 .8rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--lime); display: flex; align-items: center; gap: 14px; }
.kicker::before { content: ""; width: 28px; height: 2px; background: var(--lime); border-radius: 2px; }
.lead { font-size: 1.14rem; line-height: 1.65; color: var(--text); max-width: 32em; margin: 26px 0 0; }
.fine { font-size: .84rem; line-height: 1.6; color: var(--muted); max-width: 64ch; margin: 26px 0 0; }
.fine a { color: var(--warm); }
.fine a:hover { color: var(--lime); }

/* Display type with masked line reveals */
.hero-title, .h-xl, .h-xxl, .mega { font-family: var(--display); font-weight: 800; color: var(--white); margin: 0; letter-spacing: -.045em; line-height: .95; }
.hero-title { font-size: clamp(3.1rem, 7vw, 7.4rem); letter-spacing: -.055em; line-height: .9; }
.h-xl { font-size: clamp(2.6rem, 5.6vw, 5.4rem); }
.h-xxl { font-size: clamp(3rem, 8vw, 8rem); letter-spacing: -.055em; line-height: .9; }
.mega { font-size: clamp(4.6rem, 15vw, 15rem); letter-spacing: -.065em; line-height: .84; }
.line { display: block; overflow: hidden; padding: 0 .04em .08em; margin: 0 -.04em -.08em; }
.line > span { display: inline-block; }
.js .hero-title .line > span, .js [data-split] .line > span { transform: translate3d(0, 108%, 0); }
.js .play .hero-title .line > span, .js [data-split].in .line > span { animation: lineUp 1.15s var(--ease) forwards; }
.js .play .hero-title .line:nth-child(2) > span, .js [data-split].in .line:nth-child(2) > span { animation-delay: .1s; }
.js [data-split].in .line:nth-child(3) > span { animation-delay: .2s; }
@keyframes lineUp { to { transform: translate3d(0, 0, 0); } }
.js [data-anim] { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.js [data-anim="rise"] { transform: translate3d(0, 46px, 0) scale(.98); }
.js [data-anim].in { opacity: 1; transform: none; }
.js .hero [data-anim] { transition-delay: .55s; }
.js .hero .hero-sub[data-anim] { transition-delay: .7s; }
.js .hero .cta-row[data-anim] { transition-delay: .85s; }
.js .hero.play [data-anim] { opacity: 1; transform: none; }

/* ---------- Device frame around real app screenshots ---------- */
.device {
  --w: 290px;
  position: relative; width: var(--w); flex: none;
  padding: calc(var(--w) * .03); border-radius: calc(var(--w) * .175);
  background: linear-gradient(145deg, #6b7178 0%, #2a2e33 14%, #101215 42%, #0b0d0f 60%, #2c3136 86%, #7a8087 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), inset 0 0 0 calc(var(--w) * .008) #050607,
    0 calc(var(--w) * .2) calc(var(--w) * .34) calc(var(--w) * -.12) rgba(0, 0, 0, .85),
    0 calc(var(--w) * .06) calc(var(--w) * .12) calc(var(--w) * -.04) rgba(0, 0, 0, .55);
}
.device::before, .device::after { content: ""; position: absolute; width: calc(var(--w) * .012); border-radius: 2px; background: linear-gradient(90deg, #3c4248, #5f666d); }
.device::before { left: calc(var(--w) * -.01); top: 22%; height: 7%; box-shadow: 0 calc(var(--w) * .2) 0 #4b5157; }
.device::after { right: calc(var(--w) * -.01); top: 28%; height: 11%; }
.device-xl { --w: 340px; }
.screen { position: relative; aspect-ratio: 393 / 852; border-radius: calc(var(--w) * .145); overflow: hidden; background: #101214; isolation: isolate; }
.sb { position: absolute; left: 0; right: 0; top: 0; height: 6.34%; z-index: 3; display: flex; align-items: center; justify-content: space-between; padding: 0 9% 0 10.5%; color: #f4f5f2; font: 700 calc(var(--w) * .043)/1 var(--sans); background: #101214; }
.sb i { position: absolute; left: 50%; top: 22%; width: 31%; height: 56%; transform: translateX(-50%); border-radius: 99px; background: #000; }
.sb span { width: 7.5%; height: 34%; border-radius: 3px; border: 1px solid rgba(244, 245, 242, .7); position: relative; }
.sb span::after { content: ""; position: absolute; inset: 1px 25% 1px 1px; background: #f4f5f2; border-radius: 1px; }
.layer, .sheet { position: absolute; left: 0; top: 6.34%; width: 100%; height: 93.66%; object-fit: cover; display: block; }
.layer { opacity: 0; transform: translate3d(0, 3%, 0) scale(1.015); transition: opacity .9s var(--ease), transform 1.1s var(--ease); }
.layer.is-on { opacity: 1; transform: none; z-index: 1; }
.screen::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .07) 47%, rgba(255, 255, 255, .02) 53%, transparent 62%); transform: translateX(-120%); }
.js .screen::after { animation: sheen 9s var(--ease-io) 2.6s infinite; }
@keyframes sheen { 0% { transform: translateX(-120%); } 22%, 100% { transform: translateX(120%); } }
.scanline { position: absolute; z-index: 2; left: 14%; right: 14%; top: 19%; height: 2px; border-radius: 2px; background: var(--lime); box-shadow: 0 0 18px 4px rgba(184, 243, 75, .55); opacity: 0; transition: opacity .4s; }
.device[data-idx="0"] .scanline { opacity: 1; animation: scan 1.5s var(--ease-io) infinite alternate; }
@keyframes scan { from { top: 18%; } to { top: 52%; } }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; padding: 0; background: var(--bg); }
.hero-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: center; gap: 24px; min-height: calc(100svh - 72px); padding-top: 24px; padding-bottom: 24px; }
/* Cinematic gym photograph (owner-supplied). Dark left side carries the headline; the lit
   equipment sits behind the phones. Overlays are only where text needs contrast. */
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10, 11, 13, .55) 0%, rgba(10, 11, 13, 0) 16%, rgba(10, 11, 13, 0) 78%, var(--bg) 100%),
    linear-gradient(90deg, rgba(10, 11, 13, .82) 0%, rgba(10, 11, 13, .55) 30%, rgba(10, 11, 13, .1) 58%, rgba(10, 11, 13, .2) 100%),
    url("hero/gym.webp") 68% 50% / cover no-repeat, var(--bg); }
.hero-head { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; }
.hero-sub { font-size: clamp(1.05rem, 1.4vw, 1.22rem); line-height: 1.6; max-width: 27em; margin: 28px 0 0; color: var(--text); }

.stage { position: relative; display: flex; justify-content: center; perspective: 2000px; perspective-origin: 50% 40%; }
.stage .device-xl { --w: min(310px, calc((100svh - 140px) / 2.3)); }
.rig { transform-style: preserve-3d; will-change: transform; }
.rig-center { position: relative; z-index: 3; }
.rig-left, .rig-right { position: absolute; top: 8%; z-index: 2; }
.rig-left { right: calc(50% + 70px); transform: rotateY(16deg) rotateZ(-3deg); }
.rig-right { left: calc(50% + 70px); transform: rotateY(-16deg) rotateZ(3deg); }
.rig-left .device, .rig-right .device { --w: min(250px, calc((100svh - 220px) / 2.3)); filter: brightness(.78); }
.js .rig { opacity: 0; }
.js .play .rig-center { animation: riseCenter 1.8s var(--ease) .35s both; }
.js .play .rig-left { animation: inLeft 1.9s var(--ease) .75s both; }
.js .play .rig-right { animation: inRight 1.9s var(--ease) .9s both; }
@keyframes riseCenter { from { opacity: 0; transform: translate3d(0, 34%, -200px) rotateX(34deg) scale(.9); filter: blur(10px); } 60% { filter: blur(0); } to { opacity: 1; transform: none; filter: none; } }
@keyframes inLeft { from { opacity: 0; transform: translate3d(-34%, 24%, -300px) rotateY(48deg) rotateZ(-10deg); } to { opacity: 1; transform: rotateY(16deg) rotateZ(-3deg); } }
@keyframes inRight { from { opacity: 0; transform: translate3d(34%, 24%, -300px) rotateY(-48deg) rotateZ(10deg); } to { opacity: 1; transform: rotateY(-16deg) rotateZ(3deg); } }
.js .play .float { animation: bob 7s ease-in-out 2.4s infinite alternate; }
.js .play .float.f2 { animation-duration: 8.5s; animation-delay: 2.7s; }
.js .play .float.f3 { animation-duration: 6.4s; animation-delay: 3s; }
@keyframes bob { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -14px, 0); } }
.chip { position: absolute; z-index: 5; display: flex; flex-direction: column; gap: 3px; padding: 14px 18px; border-radius: 18px; background: rgba(20, 23, 26, .74); border: 1px solid rgba(255, 255, 255, .1); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .8); }
.chip b { font: 800 1.5rem/1 var(--display); letter-spacing: -.03em; color: var(--white); }
.chip span { font-size: .76rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.chip b { white-space: nowrap; }
.chip-1 b { color: var(--lime); }
.chip-1 { left: calc(50% + 140px); top: 22%; }
.chip-2 { right: calc(50% + 150px); top: 62%; }
.chip-3 { left: calc(50% + 140px); top: 70%; }
.js .chip { opacity: 0; }
.js .play .chip { animation: chipIn 1s var(--ease) both; }
.js .play .chip-1 { animation-delay: 2.1s; }
.js .play .chip-2 { animation-delay: 2.4s; }
.js .play .chip-3 { animation-delay: 2.7s; }
@keyframes chipIn { from { opacity: 0; transform: translate3d(0, 16px, 0) scale(.94); } to { opacity: 1; transform: none; } }

/* ---------- Feature strip (white marquee between hero and scan) ----------
   Four identical groups; the track moves by exactly half its width, so the loop point is seamless
   and every half is wider than the widest screen (no empty gap). */
.marquee { position: relative; z-index: 2; background: #fbfbf8; color: #0c0d0f; border-block: 1px solid #e6e7e1; overflow: hidden; box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .9), 0 -18px 40px -24px rgba(0, 0, 0, .9); }
.marquee-viewport { overflow: hidden; }
.marquee-track { display: flex; width: max-content; }
.js .marquee-track { animation: marquee 46s linear infinite; }
@keyframes marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.marquee-group { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; flex: none; }
.marquee-group li { display: flex; align-items: center; gap: 14px; padding: 22px 26px 22px 0; white-space: nowrap; }
.marquee-group li::after { content: ""; width: 7px; height: 7px; margin-left: 12px; background: #0c0d0f; transform: rotate(45deg); opacity: .85; }
.mq-icon { width: 34px; height: 34px; border-radius: 10px; background: var(--lime); color: #0c0d0f; display: grid; place-items: center; flex: none; box-shadow: inset 0 0 0 1px rgba(12, 13, 15, .08); }
.mq-icon svg { width: 19px; height: 19px; }
.mq-text { font: 800 1.12rem/1 var(--display); letter-spacing: .02em; text-transform: uppercase; }
.mq-text em { font-style: normal; color: #0c0d0f; background: linear-gradient(transparent 58%, rgba(184, 243, 75, .9) 58%, rgba(184, 243, 75, .9) 92%, transparent 92%); padding: 0 2px; }
@media (max-width: 720px) {
  .marquee-group li { gap: 10px; padding: 15px 18px 15px 0; }
  .marquee-group li::after { margin-left: 8px; width: 6px; height: 6px; }
  .mq-icon { width: 28px; height: 28px; border-radius: 8px; }
  .mq-icon svg { width: 16px; height: 16px; }
  .mq-text { font-size: .92rem; }
  .js .marquee-track { animation-duration: 36s; }
}

/* ---------- AI scan demo (autoplay timeline inside the real app screens) ----------
   Positions come from the real 393 x 798 pt app captures, written as percentages. */
.scan { position: relative; overflow: hidden; padding: clamp(96px, 12vw, 170px) 0; background: linear-gradient(180deg, var(--bg), var(--charcoal) 18%, var(--charcoal) 82%, var(--bg)); }
.scan-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.steps-rail { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 4px; max-width: 30em; }
.steps-rail li { position: relative; padding: 16px 0 16px 64px; border-top: 1px solid var(--line); opacity: .38; transition: opacity .5s var(--ease); }
.steps-rail li::before { content: attr(data-n); position: absolute; left: 0; top: 17px; font: 800 .85rem/1 var(--sans); color: var(--faint); letter-spacing: .06em; transition: color .4s; }
.steps-rail li::after { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 0; background: var(--lime); transition: width .7s var(--ease); }
.steps-rail b { display: block; font: 800 1.5rem/1.1 var(--display); letter-spacing: -.02em; color: var(--white); }
.steps-rail span { display: block; color: var(--text); font-size: .98rem; margin-top: 6px; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .6s var(--ease), opacity .5s; }
.steps-rail li.on { opacity: 1; }
.steps-rail li.on::before { color: var(--lime); }
.steps-rail li.on::after { width: 100%; }
.steps-rail li.on span { max-height: 4em; opacity: 1; }
html:not(.js) .steps-rail li { opacity: 1; }
html:not(.js) .steps-rail li span { max-height: none; opacity: 1; }
html:not(.js) .steps-rail li::after { width: 0; }
.step-caption { display: none; }
.scan-visual { margin: 0; display: flex; flex-direction: column; align-items: center; }
.scan-visual .device { --w: min(340px, calc((100svh - 190px) / 2.3)); }

.app { position: absolute; left: 0; top: 6.34%; width: 100%; height: 93.66%; overflow: hidden; background: #101214; transition: opacity .7s var(--ease); }
.app img { display: block; width: 100%; }
.pane { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .7s var(--ease), transform .9s var(--ease); }
img.pane { object-fit: cover; }
.pane-scan { opacity: 1; z-index: 1; }
.vf { position: absolute; z-index: 2; left: 5.09%; top: 19.3%; width: 89.82%; height: 37.59%; border-radius: calc(var(--w) * .052); overflow: hidden; background: #1b1f23; opacity: 0; transition: opacity .6s var(--ease); }
.vf-photo { position: absolute; inset: 0; height: 100%; object-fit: cover; transform: scale(1.12); filter: brightness(.7); transition: transform 1.6s var(--ease), filter 1.2s var(--ease); }
.vf-c { position: absolute; width: 9.6%; height: 11.3%; border: 0 solid var(--lime); z-index: 3; }
.vf-c.tl { left: 6.8%; top: 8%; border-width: calc(var(--w) * .0072) 0 0 calc(var(--w) * .0072); border-top-left-radius: calc(var(--w) * .02); }
.vf-c.tr { right: 6.9%; top: 8%; border-width: calc(var(--w) * .0072) calc(var(--w) * .0072) 0 0; border-top-right-radius: calc(var(--w) * .02); }
.vf-c.bl { left: 6.8%; bottom: 8.2%; border-width: 0 0 calc(var(--w) * .0072) calc(var(--w) * .0072); border-bottom-left-radius: calc(var(--w) * .02); }
.vf-c.br { right: 6.9%; bottom: 8.2%; border-width: 0 calc(var(--w) * .0072) calc(var(--w) * .0072) 0; border-bottom-right-radius: calc(var(--w) * .02); }
.vf-sweep { position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 46%; transform: translateY(-105%); opacity: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(184, 243, 75, 0) 0%, rgba(184, 243, 75, .06) 45%, rgba(184, 243, 75, .24) 88%, rgba(184, 243, 75, .42) 98%, rgba(184, 243, 75, 0) 100%); }
.vf-sweep::after { content: ""; position: absolute; left: -2%; right: -2%; bottom: 0; height: 3px; border-radius: 3px; background: #dcff9a; box-shadow: 0 0 10px 2px rgba(184, 243, 75, .9), 0 0 34px 8px rgba(184, 243, 75, .45); }
.pane-analysing { z-index: 3; }
.pane-review { z-index: 4; background: #101214; transform: translate3d(0, 7%, 0); }
.pane-diary { z-index: 5; background: #101214; transform: translate3d(0, 2%, 0) scale(1.02); }
.rv-win { position: absolute; left: 0; top: 9.02%; width: 100%; height: 80.45%; overflow: hidden; }
.dy-win { position: absolute; left: 0; top: 0; width: 100%; height: 87.72%; overflow: hidden; }
.rv-scroll img, .dy-scroll img { height: auto; }
.rv-scroll, .dy-scroll { position: relative; transform: translate3d(0, 0, 0); transition: transform 1.25s cubic-bezier(.65, 0, .35, 1); will-change: transform; }
.rv-head { position: absolute; left: 0; top: 0; height: 9.02%; }
.rv-foot { position: absolute; left: 0; bottom: 0; height: 10.53%; transition: transform .25s var(--ease); }
.dy-foot { position: absolute; left: 0; bottom: 0; height: 12.28%; }
.focus { position: absolute; left: 5.09%; width: 89.82%; border-radius: calc(var(--w) * .048); box-shadow: inset 0 0 0 1.5px rgba(184, 243, 75, .85), 0 0 26px rgba(184, 243, 75, .18); opacity: 0; transition: opacity .6s var(--ease); pointer-events: none; }
.focus.f-1 { top: 12.88%; height: 25%; }
.focus.f-2 { top: 38.9%; height: 25%; }
.focus.f-3 { top: 64.92%; height: 20.54%; box-shadow: inset 0 0 0 1.5px rgba(242, 184, 75, .85), 0 0 26px rgba(242, 184, 75, .16); }
.focus.f-lunch { top: 47.55%; height: 26.64%; }
.press { position: absolute; z-index: 2; left: 50%; top: 94.7%; width: 18%; aspect-ratio: 1; margin: -9% 0 0 -9%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0)); opacity: 0; transform: scale(.2); pointer-events: none; }

/* Timeline states, set by site.js */
.scan-demo.is-photo .vf { opacity: 1; }
.scan-demo.is-photo .vf-photo { transform: none; filter: none; }
.scan-demo.is-sweep .vf-sweep { opacity: 1; animation: sweep 1.3s cubic-bezier(.45, 0, .4, 1) 2 alternate both; }
@keyframes sweep { from { transform: translateY(-100%); } to { transform: translateY(218%); } }
.scan-demo.is-analysing .pane-analysing { opacity: 1; }
.scan-demo.is-review .pane-review { opacity: 1; transform: none; }
.scan-demo.rv-1 .rv-scroll { transform: translate3d(0, -33.16%, 0); }
.scan-demo.rv-2 .rv-scroll { transform: translate3d(0, -55.68%, 0); }
.scan-demo[data-focus="1"] .f-1, .scan-demo[data-focus="2"] .f-2, .scan-demo[data-focus="3"] .f-3, .scan-demo[data-focus="lunch"] .f-lunch { opacity: 1; }
.scan-demo.is-press .rv-foot { transform: scale(.975); }
.scan-demo.is-press .press { animation: press .7s var(--ease) forwards; }
@keyframes press { 0% { opacity: .9; transform: scale(.2); } 100% { opacity: 0; transform: scale(3.2); } }
.scan-demo.is-diary .pane-diary { opacity: 1; transform: none; }
.scan-demo.dy-1 .dy-scroll { transform: translate3d(0, -27.27%, 0); }
.scan-demo.is-out .app { opacity: 0; }
.scan-demo.snap .app *, .scan-demo.snap .app *::after { transition: none !important; animation: none !important; }
/* Without motion (or without JavaScript): one still frame of the real review screen. */
html:not(.js) .scan-demo .pane-review { opacity: 1; transform: none; }

/* ---------- CalDefiq AI ---------- */
.ai { position: relative; overflow: hidden; padding: clamp(96px, 12vw, 180px) 0; background: var(--bg); }
.ai-glow { position: absolute; right: -10%; top: 50%; width: 900px; height: 900px; transform: translateY(-50%) scale(.7); opacity: 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(184, 243, 75, .12), transparent); transition: transform 2s var(--ease), opacity 2s var(--ease); pointer-events: none; }
.ai-glow.in, html:not(.js) .ai-glow { transform: translateY(-50%) scale(1); opacity: 1; }
.ai-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.ai-visual { display: flex; justify-content: center; }
.type-line { margin: 34px 0 0; min-height: 3.4em; font: 650 clamp(1.15rem, 1.8vw, 1.45rem)/1.4 var(--sans); color: var(--white); max-width: 26em; padding: 18px 22px; border-radius: 22px 22px 6px 22px; background: rgba(184, 243, 75, .08); border: 1px solid rgba(184, 243, 75, .22); }
.caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 3px; vertical-align: -.15em; background: var(--lime); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
html:not(.js) .type-line span::before { content: attr(data-type); }
.allow { display: flex; margin: 30px 0 0; max-width: 30em; border-top: 1px solid var(--line-2); }
.allow div { flex: 1; padding: 16px 18px 0 0; }
.allow div + div { padding-left: 18px; border-left: 1px solid var(--line-2); }
.allow dt { font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.allow div:last-child dt { color: var(--lime); }
.allow dd { margin: 6px 0 0; color: var(--white); font-weight: 700; line-height: 1.35; }
.sheet { z-index: 2; transform: translate3d(0, 102%, 0); transition: transform 1.1s var(--ease); box-shadow: 0 -30px 60px rgba(0, 0, 0, .6); border-radius: 14px 14px 0 0; }
.device.sheet-up .sheet { transform: none; }
.ai .device .layer.is-on { transition: transform 1.1s var(--ease), filter 1.1s; }
.ai .device.sheet-up .layer.is-on { transform: scale(.94); filter: brightness(.5); }

/* ---------- Daily tracking: coverflow carousel ----------
   Every phone that is shown sits fully inside the section: the spacing and scale of each
   position are chosen per breakpoint so the outermost frame, its shadow and its caption
   stay inside the viewport. Phones beyond the visible positions are hidden, not clipped. */
.reel { position: relative; overflow: hidden; padding: clamp(96px, 12vw, 170px) 0 clamp(64px, 7vw, 110px); background: radial-gradient(80% 60% at 50% 70%, rgba(184, 243, 75, .07), transparent 70%), var(--charcoal); border-block: 1px solid var(--line); }
.reel-head { text-align: center; display: flex; flex-direction: column; align-items: center; }
.reel-head .kicker::after { content: ""; width: 28px; height: 2px; background: var(--lime); border-radius: 2px; }
.reel-carousel { --w: 270px; --s1: 330px; --s2: 590px; --k1: .84; --k2: .7; margin-top: clamp(44px, 5vw, 72px); }
.reel-stage { position: relative; margin: 0 auto; list-style: none; padding: 0; perspective: 1700px; }
/* Fallback without JavaScript: a centred, wrapping row of every phone. */
.reel-stage:not(.is-ready) { display: flex; flex-wrap: wrap; justify-content: center; gap: 48px 40px; padding: 0 20px; }
.reel-item { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.reel-item .device { --w: inherit; }
.reel-stage:not(.is-ready) .reel-item .device { --w: 220px; }
.reel-item figcaption { font: 700 .95rem/1.25 var(--sans); color: var(--warm); text-align: center; white-space: nowrap; }
.reel-stage.is-ready { height: calc(var(--w) * 2.1 + 70px); }
.reel-item.snap { transition: none !important; }
.reel-stage.is-ready .reel-item { position: absolute; left: 50%; top: 0; width: var(--w); margin-left: calc(var(--w) / -2); transform-origin: 50% 40%;
  transition: transform .55s cubic-bezier(.22, .8, .24, 1), opacity .55s ease, filter .55s ease; }
.reel-item[data-pos="0"] { z-index: 3; transform: none; }
.reel-item[data-pos="-1"] { z-index: 2; transform: translateX(calc(var(--s1) * -1)) scale(var(--k1)) rotateY(18deg); opacity: .62; filter: saturate(.8); }
.reel-item[data-pos="1"] { z-index: 2; transform: translateX(var(--s1)) scale(var(--k1)) rotateY(-18deg); opacity: .62; filter: saturate(.8); }
.reel-item[data-pos="-2"] { z-index: 1; transform: translateX(calc(var(--s2) * -1)) scale(var(--k2)) rotateY(26deg); opacity: .32; filter: saturate(.6); }
.reel-item[data-pos="2"] { z-index: 1; transform: translateX(var(--s2)) scale(var(--k2)) rotateY(-26deg); opacity: .32; filter: saturate(.6); }
.reel-item[data-pos="hide-l"], .reel-item[data-pos="hide-r"] { z-index: 0; opacity: 0; pointer-events: none; }
.reel-item[data-pos="hide-l"] { transform: translateX(calc(var(--s1) * -1.45)) scale(calc(var(--k1) * .85)) rotateY(24deg); }
.reel-item[data-pos="hide-r"] { transform: translateX(calc(var(--s1) * 1.45)) scale(calc(var(--k1) * .85)) rotateY(-24deg); }
.reel-carousel.five .reel-item[data-pos="hide-l"] { transform: translateX(calc(var(--s2) * -1.25)) scale(calc(var(--k2) * .85)) rotateY(30deg); }
.reel-carousel.five .reel-item[data-pos="hide-r"] { transform: translateX(calc(var(--s2) * 1.25)) scale(calc(var(--k2) * .85)) rotateY(-30deg); }
.reel-item[data-pos="1"], .reel-item[data-pos="-1"], .reel-item[data-pos="2"], .reel-item[data-pos="-2"] { cursor: pointer; }
.reel-item:not([data-pos="0"]) figcaption { color: var(--muted); }

.reel-controls { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 30px; }
.reel-controls button { appearance: none; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03); color: var(--white); border-radius: 99px; cursor: pointer; transition: background .25s, border-color .25s, color .25s; }
.reel-controls button:hover { border-color: var(--lime); }
.reel-controls button:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.reel-arrow { width: 44px; height: 44px; display: grid; place-items: center; }
.reel-arrow svg { width: 18px; height: 18px; }
.reel-dots { display: flex; gap: 4px; }
.reel-dots button { width: 32px; height: 44px; border: 0; background: none; border-radius: 8px; position: relative; }
.reel-dots button::before { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 99px; background: var(--line-2); transition: width .4s var(--ease), margin .4s var(--ease), background .3s; }
.reel-dots button[aria-current="true"]::before { width: 24px; margin-left: -12px; background: var(--lime); }

/* ---------- Coach ---------- */
.coach { position: relative; overflow: hidden; padding: clamp(96px, 12vw, 180px) 0; background: var(--bg); }
.coach-word { position: absolute; left: 0; top: 50%; transform: translateY(-50%); font: 800 clamp(10rem, 30vw, 30rem)/.8 var(--display); letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1px #1b1f23; white-space: nowrap; pointer-events: none; user-select: none; }
.js .coach-word { animation: wordDrift 40s linear infinite alternate; }
@keyframes wordDrift { from { transform: translate3d(-4%, -50%, 0); } to { transform: translate3d(-24%, -50%, 0); } }
.coach-grid { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.coach-visual { display: flex; justify-content: center; }
.goal-reel { list-style: none; margin: 34px 0 0; padding: 0; }
.goal-reel li { font: 800 clamp(1.35rem, 2.4vw, 2.1rem)/1.15 var(--display); letter-spacing: -.03em; color: #3d454c; padding: 10px 0; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 14px; transition: color .6s var(--ease), padding .6s var(--ease); }
.goal-reel li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--lime); transform: scale(0); transition: transform .5s var(--ease); flex: none; }
.goal-reel li.on { color: var(--white); padding-left: 4px; }
.goal-reel li.on::before { transform: scale(1); }

/* ---------- Manifesto ---------- */
.manifesto { background: var(--lime); color: var(--lime-ink); padding: clamp(90px, 11vw, 160px) 0; overflow: hidden; }
.manifesto .mega { color: var(--lime-ink); }
.manifesto .stroke { color: transparent; -webkit-text-stroke: 2px var(--lime-ink); }
.manifesto-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(44px, 6vw, 80px); border-top: 2px solid var(--lime-ink); }
.manifesto-row p { margin: 0; padding: 22px 28px 0 0; font-size: 1rem; line-height: 1.6; color: #1d2410; }
.manifesto-row p + p { padding-left: 28px; border-left: 1px solid rgba(16, 18, 20, .25); }
.manifesto-row b { display: block; font: 800 1.25rem/1.25 var(--display); letter-spacing: -.02em; color: var(--lime-ink); margin-bottom: 6px; }
.manifesto a { color: var(--lime-ink); font-weight: 700; }

/* ---------- Pricing ---------- */
.pricing { background: var(--bg); padding: clamp(96px, 12vw, 170px) 0; }
.price-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 20px; margin-top: clamp(44px, 6vw, 72px); }
.price-card { border: 1px solid var(--line-2); border-radius: 30px; padding: clamp(26px, 3.4vw, 44px); background: var(--charcoal); position: relative; overflow: hidden; }
.price-card h3 { margin: 0; font: 800 1.5rem/1 var(--display); letter-spacing: -.02em; color: var(--white); }
.price-card .price { margin: 26px 0 0; display: flex; align-items: baseline; gap: 8px; }
.price-card .amt { font: 800 clamp(3rem, 5.4vw, 4.6rem)/.9 var(--display); letter-spacing: -.05em; color: var(--white); }
.price-card .per { color: var(--muted); font-weight: 600; }
.price-note { margin: 12px 0 0; color: var(--muted); font-size: .94rem; }
.price-card ul { list-style: none; padding: 0; margin: 30px 0 0; display: grid; }
.price-card li { position: relative; padding: 12px 0 12px 30px; border-top: 1px solid var(--line); color: var(--text); font-size: .98rem; }
.price-card li::before { content: ""; position: absolute; left: 4px; top: 19px; width: 9px; height: 5px; border-left: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); }
.price-card.premium { background: linear-gradient(160deg, #1a2012 0%, var(--graphite) 42%); border-color: rgba(184, 243, 75, .45); }
.price-card.premium::before { content: ""; position: absolute; right: -160px; top: -160px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(closest-side, rgba(184, 243, 75, .14), transparent); pointer-events: none; }
.price-card.premium li::before { border-color: var(--lime); }
.price-card.premium li { color: var(--white); }
.pc-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; position: relative; }
.price-card.premium h3 { color: var(--lime); }
.billing { display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(0, 0, 0, .35); border: 1px solid var(--line-2); }
.billing button { all: unset; cursor: pointer; font-size: .86rem; font-weight: 700; color: var(--muted); padding: 8px 16px; border-radius: 999px; }
.billing button[aria-pressed="true"] { background: var(--lime); color: var(--lime-ink); }
.billing button:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.price-card [hidden] { display: none !important; }

/* ---------- Finale ---------- */
.finale { position: relative; overflow: hidden; padding: clamp(120px, 15vw, 220px) 0; text-align: center; background: radial-gradient(ellipse at 50% 120%, rgba(184, 243, 75, .14), transparent 60%), var(--charcoal); border-top: 1px solid var(--line); }
.finale-ring { position: absolute; left: 50%; top: 50%; width: min(900px, 130vw); transform: translate(-50%, -50%) rotate(-90deg); pointer-events: none; }
.ring-track { fill: none; stroke: rgba(255, 255, 255, .045); stroke-width: .7; }
.ring-arc { fill: none; stroke: var(--lime); stroke-width: 1.1; stroke-linecap: round; stroke-dasharray: 1194; stroke-dashoffset: 470; opacity: .7; }
.finale-ring .ring-arc { stroke-dashoffset: 300; }
.js .finale-ring .ring-arc { stroke-dashoffset: 1194; transition: stroke-dashoffset 3s var(--ease); }
.js .finale-ring.in .ring-arc { stroke-dashoffset: 300; }
.finale-inner { position: relative; display: flex; flex-direction: column; align-items: center; }
.finale .lead { margin-left: auto; margin-right: auto; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--muted); padding: 72px 0 36px; border-top: 1px solid var(--line); font-size: .93rem; }
.foot-top { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.foot-brand p { margin: 16px 0 0; max-width: 28em; line-height: 1.6; }
.foot-status { display: flex; align-items: center; gap: 10px; color: var(--warm); }
.foot-status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); flex: none; }
.foot-col { display: flex; flex-direction: column; gap: 10px; }
.foot-col h2 { margin: 0 0 6px; font: 800 .74rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--white); }
.foot-col a { color: var(--muted); text-decoration: none; width: fit-content; }
.foot-col a:hover, .foot-col a[aria-current="page"] { color: var(--lime); }
.foot-base { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); font-size: .82rem; color: var(--faint); }
.foot-base p { margin: 0; }

/* ---------- Legal & support pages ---------- */
.page-hero { position: relative; overflow: hidden; padding: clamp(56px, 8vw, 104px) 0 clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--line); background: var(--charcoal); }
.page-hero-glow { position: absolute; right: -200px; top: -320px; width: 760px; height: 760px; border-radius: 50%; background: radial-gradient(closest-side, rgba(184, 243, 75, .11), transparent); pointer-events: none; }
.page-hero-glow::after { content: ""; position: absolute; inset: 22%; border-radius: 50%; border: 1px solid rgba(184, 243, 75, .18); }
.page-hero .wrap { position: relative; }
.crumbs { margin: 0 0 26px; font-size: .86rem; color: var(--muted); display: flex; gap: 10px; align-items: center; }
.crumbs a { color: var(--warm); text-decoration: none; }
.crumbs a:hover { color: var(--lime); }
.eyebrow { margin: 0 0 14px; color: var(--lime); font-weight: 800; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; }
.page-hero h1 { margin: 0; font: 800 clamp(2.5rem, 5.6vw, 4.6rem)/.98 var(--display); letter-spacing: -.045em; color: var(--white); max-width: 16em; text-wrap: balance; }
.lede { max-width: 44em; margin: 22px 0 0; color: var(--text); font-size: 1.12rem; }
.updated { margin: 22px 0 0; color: var(--muted); font-size: .86rem; display: inline-flex; gap: 8px; align-items: center; padding: 6px 12px; border: 1px solid var(--line-2); border-radius: 999px; }
.with-toc { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 64px; align-items: start; padding-top: 56px; padding-bottom: 96px; }
.no-toc { padding-top: 56px; padding-bottom: 96px; }
.toc { position: sticky; top: 100px; max-height: calc(100vh - 124px); overflow: auto; scrollbar-width: thin; }
.toc details { border-left: 1px solid var(--line-2); padding: 2px 0 2px 20px; }
.toc summary { font-weight: 800; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--white); cursor: pointer; list-style: none; }
.toc summary::-webkit-details-marker { display: none; }
.toc ol { margin: 14px 0 0; padding: 0; list-style: none; font-size: .88rem; line-height: 1.4; }
.toc a { display: block; padding: 7px 0 7px 12px; margin-left: -21px; border-left: 2px solid transparent; color: var(--muted); text-decoration: none; transition: color .2s, border-color .2s; }
.toc a:hover { color: var(--white); }
.toc a.active { color: var(--lime); border-left-color: var(--lime); }
.doc { min-width: 0; overflow-wrap: anywhere; max-width: 820px; font-size: 1.02rem; }
.no-toc .doc { margin: 0 auto 0 0; }
.doc > section, .card { background: var(--charcoal); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(24px, 3.2vw, 40px) clamp(20px, 3.4vw, 44px); margin: 0 0 16px; }
.doc h2 { font: 800 clamp(1.4rem, 2.3vw, 1.8rem)/1.2 var(--display); letter-spacing: -.025em; color: var(--white); margin: 0 0 18px; }
.doc h3 { font-size: 1.08rem; color: var(--white); margin: 28px 0 8px; }
.doc p, .doc li { color: var(--text); line-height: 1.75; }
.doc p { margin: 0 0 16px; max-width: 70ch; }
.doc ul, .doc ol { padding-left: 22px; margin: 6px 0 18px; max-width: 70ch; }
.doc li { margin: 7px 0; }
.doc li::marker { color: var(--faint); }
.doc strong { color: var(--white); }
.doc code { font-size: .88em; background: var(--graphite-2); border: 1px solid var(--line-2); border-radius: 6px; padding: 1px 6px; }
.path { font-weight: 700; color: var(--white); }
.table-wrap { overflow-x: auto; margin: 12px 0 18px; border: 1px solid var(--line-2); border-radius: 14px; }
table { width: 100%; border-collapse: collapse; font-size: .93rem; }
th, td { text-align: left; vertical-align: top; padding: 12px 16px; border-bottom: 1px solid var(--line); line-height: 1.55; }
th { background: var(--graphite-2); color: var(--white); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }
tr:last-child td { border-bottom: 0; }
td { color: var(--text); }
.callout { background: rgba(184, 243, 75, .06); border: 1px solid rgba(184, 243, 75, .24); border-left: 3px solid var(--lime); border-radius: 12px; padding: 16px 18px; margin: 14px 0 18px; }
.callout.warn { background: rgba(242, 196, 107, .06); border-color: rgba(242, 196, 107, .28); border-left-color: var(--warn); }
.callout p:last-child, .callout ul:last-child { margin-bottom: 0; }
.summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 10px 0 6px; }
.summary-grid div { background: var(--graphite); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.summary-grid strong { display: block; margin-bottom: 4px; }
.summary-grid p { margin: 0; font-size: .93rem; }
mark.owner { background: rgba(242, 196, 107, .14); color: var(--warn); border-radius: 6px; padding: 1px 6px; font-weight: 700; border: 1px dashed currentColor; }
.doc .price { font: 800 1.8rem/1.1 var(--display); color: var(--white); letter-spacing: -.03em; margin: 6px 0 0; }
.doc .muted { color: var(--muted); font-size: .55em; font-weight: 600; letter-spacing: 0; }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 12px 0 18px; }
.plan { border: 1px solid var(--line-2); border-radius: 16px; padding: 20px; background: var(--graphite); }
.plan.featured { border-color: rgba(184, 243, 75, .5); background: linear-gradient(160deg, rgba(184, 243, 75, .08), var(--graphite) 60%); }
.plan h3 { margin: 0 0 4px; }
.plan p { margin: 4px 0 0; }
.steps { counter-reset: s; list-style: none; padding-left: 0 !important; }
.steps li { counter-increment: s; position: relative; padding-left: 44px; margin: 12px 0; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--lime); color: var(--lime-ink); font-weight: 800; font-size: .82rem; display: grid; place-items: center; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.cards a { display: block; background: var(--graphite); border: 1px solid var(--line); border-radius: 16px; padding: 20px; text-decoration: none; color: var(--white); transition: border-color .2s; }
.cards a:hover { border-color: rgba(184, 243, 75, .5); }
.cards h3 { margin: 0 0 6px; font-size: 1.06rem; }
.cards p { margin: 0; color: var(--text); font-size: .93rem; }
.legal-index { list-style: none; margin: 0; padding: 0 !important; border-top: 1px solid var(--line-2); max-width: none !important; }
.legal-index li { margin: 0; border-bottom: 1px solid var(--line-2); }
.legal-index a { display: grid; grid-template-columns: 64px minmax(0, 1fr) 48px; align-items: center; gap: 16px; padding: 26px 8px; text-decoration: none; transition: background .25s, padding .3s var(--ease); border-radius: 4px; }
.legal-index a:hover { background: rgba(255, 255, 255, .025); padding-left: 18px; }
.li-num { font: 700 .82rem/1 var(--sans); color: var(--faint); letter-spacing: .08em; }
.li-text { display: flex; flex-direction: column; gap: 6px; }
.li-title { font: 800 clamp(1.4rem, 2.6vw, 2.1rem)/1.1 var(--display); letter-spacing: -.03em; color: var(--white); }
.li-desc { color: var(--muted); font-size: .96rem; }
.li-arrow { justify-self: end; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--white); transition: background .25s, color .25s, border-color .25s; }
.legal-index a:hover .li-arrow { background: var(--lime); color: var(--lime-ink); border-color: var(--lime); }
.legal-index a:hover .li-title { color: var(--lime); }
.notfound { padding: 40px 0; }
.notfound h2 { font: 800 2rem/1.1 var(--display); color: var(--white); margin: 0 0 12px; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .chip-2, .chip-3 { display: none; }
  .rig-left { right: calc(50% + 40px); }
  .rig-right { left: calc(50% + 40px); }
  .rig-left .device, .rig-right .device { --w: 196px; }
}
@media (max-width: 1020px) {
  .nav, .header-inner > .status-pill { display: none; }
  .menu { display: block; }
  .ai-grid, .coach-grid { grid-template-columns: 1fr; }
  .ai-visual, .coach-visual { order: 2; }
  .chip-2, .chip-3 { display: none; }
  .hero-grid { grid-template-columns: 1fr; min-height: 0; padding-top: 56px; padding-bottom: 72px; gap: 48px; }
  .hero::before { background:
    linear-gradient(180deg, rgba(10, 11, 13, .86) 0%, rgba(10, 11, 13, .62) 34%, rgba(10, 11, 13, .12) 58%, rgba(10, 11, 13, .2) 86%, var(--bg) 100%),
    url("hero/gym-1100.webp") 74% 50% / cover no-repeat, var(--bg); }
  .hero-head { align-items: center; text-align: center; }
  .hero-title { font-size: clamp(3rem, 11vw, 6rem); }
  .cta-row { justify-content: center; }
  .stage .device-xl { --w: 300px; }
  .rig-left .device, .rig-right .device { --w: 236px; }
  .rig-left { right: calc(50% + 60px); }
  .rig-right { left: calc(50% + 60px); }
  .scan-grid { grid-template-columns: 1fr; gap: 40px; }
  .scan-copy { text-align: center; display: flex; flex-direction: column; align-items: center; }
  .js .steps-rail { margin-top: 28px; width: 100%; max-width: 520px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .js .steps-rail li { padding: 14px 0 0; text-align: left; }
  .js .steps-rail li::before { position: static; display: block; margin-bottom: 6px; }
  .js .steps-rail b { font-size: 1.05rem; }
  .js .steps-rail span { display: none; }
  .js .step-caption { display: block; margin: 16px 0 0; min-height: 3.2em; max-width: 30em; color: var(--text); font-size: 1rem; }
  .scan-visual .device { --w: 280px; }
  .price-grid { grid-template-columns: 1fr; }
  .manifesto-row { grid-template-columns: 1fr; }
  .manifesto-row p + p { padding-left: 0; border-left: 0; border-top: 1px solid rgba(16, 18, 20, .25); margin-top: 22px; }
  .foot-top { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
  .with-toc { grid-template-columns: 1fr; gap: 24px; padding-top: 32px; }
  .toc { position: static; max-height: none; }
  .toc details { border: 1px solid var(--line-2); border-radius: 16px; padding: 14px 18px; background: var(--charcoal); }
  .toc a { margin-left: 0; padding-left: 0; border-left: 0; }
  .toc summary { display: flex; justify-content: space-between; align-items: center; }
  .toc summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .25s; }
  .toc details[open] summary::after { transform: rotate(-135deg); }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .wrap { padding: 0 20px; }
  .header-inner { min-height: 64px; }
  .hero-title { font-size: clamp(2.9rem, 14.5vw, 4.6rem); }
  .h-xl { font-size: clamp(2.3rem, 11vw, 3.4rem); }
  .h-xxl { font-size: clamp(2.8rem, 14vw, 4.4rem); }
  .cta-row .btn { flex: 1 1 100%; }
  .hero-grid { padding-top: 26px; gap: 30px; }
  .eyebrow-pill { margin-bottom: 18px; }
  .hero-sub { margin-top: 18px; font-size: 1rem; }
  .hero .cta-row { margin-top: 24px; gap: 10px; }
  .hero .btn { min-height: 50px; }
  .hero-title { font-size: clamp(3rem, 15vw, 4.6rem); }
  .device-xl, .stage .device-xl { --w: 236px; }
  .rig-left .device, .rig-right .device { --w: min(176px, calc(50vw - 50px)); }
  .rig-left { right: calc(50% + 34px); top: 12%; }
  .rig-right { left: calc(50% + 34px); top: 12%; }
  .chip { padding: 10px 13px; border-radius: 14px; }
  .chip b { font-size: 1.15rem; }
  .chip-1 { left: auto; right: 4px; top: 2%; }
  .ai-visual .device, .coach-visual .device { --w: 260px; }
  .scan-visual .device { --w: 264px; }
  .goal-reel li { font-size: 1.3rem; }
  .allow { flex-direction: column; }
  .allow div + div { padding-left: 0; border-left: 0; }
  .foot-top { grid-template-columns: 1fr; gap: 32px; }
  .legal-index a { grid-template-columns: 40px minmax(0, 1fr) 36px; gap: 10px; padding: 20px 2px; }
  .li-arrow { width: 36px; height: 36px; }
  .doc { font-size: 1rem; }
  .doc > section, .card { border-radius: 18px; }
  th, td { padding: 10px 12px; }
}
@media (max-width: 400px) {
  .device-xl, .stage .device-xl { --w: 214px; }
  .scan-visual .device { --w: 240px; }
  .rig-left .device, .rig-right .device { --w: calc(50vw - 54px); }
  .rig-left { right: calc(50% + 40px); }
  .rig-right { left: calc(50% + 40px); }
}

/* Coverflow sizes per width: 5 phones on wide screens, 3 on laptops/tablets, 1 on phones. */
@media (min-width: 1700px) { .reel-carousel { --w: 300px; --s1: 370px; --s2: 655px; } }
@media (max-width: 1399px) { .reel-carousel { --w: 270px; --s1: 340px; } }
@media (max-width: 1099px) { .reel-carousel { --w: 240px; --s1: 272px; --k1: .8; } }
@media (max-width: 720px) { .reel-carousel { --w: 250px; } .reel-stage { touch-action: pan-y; } .reel-controls { gap: 8px; margin-top: 22px; } .reel-dots button { width: 26px; } }
@media (max-width: 400px) { .reel-carousel { --w: 244px; } }

/* ---------- Platforms: hero line, launch section, footer trademarks ---------- */
.pi { width: 20px; height: 20px; display: block; flex: none; }
.platform-line { display: flex; align-items: center; gap: 14px; margin: 26px 0 0; max-width: 31em; font-size: .92rem; line-height: 1.45; color: var(--muted); }
.platform-line b { color: var(--warm); font-weight: 700; }
.pi-pair { display: inline-flex; gap: 6px; flex: none; }
.pi-pair .pi { width: 34px; height: 34px; padding: 7px; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .04); }
.pi-pair .pi-android, .pi-pair .pi-phone { color: var(--lime); }

.launch { position: relative; padding: clamp(80px, 9vw, 130px) 0; background: radial-gradient(60% 90% at 85% 50%, rgba(184, 243, 75, .07), transparent 70%), var(--bg); border-top: 1px solid var(--line); }
.launch-inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.h-lg { font: 800 clamp(2.1rem, 4.2vw, 3.6rem)/1.02 var(--display); letter-spacing: -.035em; margin: 0; color: var(--white); }
.launch-copy .lead { margin: 22px 0 30px; max-width: 32em; }
.launch-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; position: relative; }
.launch-steps li { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 20px 22px 20px 16px; border-radius: 20px; border: 1px solid rgba(184, 243, 75, .28); background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01)); }
.ls-icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--lime); border: 1px solid var(--lime); color: var(--lime-ink); position: relative; z-index: 1; }
.ls-icon .pi { width: 24px; height: 24px; }
.ls-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ls-name { font: 800 1.3rem/1.1 var(--display); letter-spacing: -.02em; color: var(--white); }
.ls-name small { font: 600 .85rem/1 var(--sans); color: var(--muted); letter-spacing: 0; }
.ls-note { font-size: .88rem; color: var(--muted); }
.ls-tag { font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 7px 11px; border-radius: 99px; border: 1px solid rgba(184, 243, 75, .4); background: rgba(184, 243, 75, .12); color: var(--lime); white-space: nowrap; }
.foot-tm { margin: 14px 0 0; font-size: .74rem; line-height: 1.55; color: var(--faint); max-width: 70em; }
@media (max-width: 1020px) {
  .platform-line { justify-content: center; text-align: left; margin-left: auto; margin-right: auto; }
  .launch-inner { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .platform-line { font-size: .86rem; gap: 10px; margin-top: 22px; flex-direction: column; text-align: center; }
  .pi-pair .pi { width: 30px; height: 30px; padding: 6px; }
  .launch-steps li { gap: 14px; padding: 16px 14px 16px 12px; }
  .ls-icon { width: 46px; height: 46px; }
  .ls-name { font-size: 1.12rem; }
  .ls-tag { font-size: .66rem; padding: 6px 9px; letter-spacing: .06em; }
}
@media (max-width: 400px) {
  .launch-steps li { grid-template-columns: auto minmax(0, 1fr); }
  .ls-tag { grid-column: 2; justify-self: start; }
}

/* ---------- Reduced motion & print ---------- */
@media (prefers-reduced-motion: reduce) {
  .marquee-track { width: auto; flex-wrap: wrap; justify-content: center; }
  .marquee-group { flex: 1 1 100%; flex-wrap: wrap; justify-content: center; row-gap: 0; padding: 8px 16px; }
  .marquee-group li { padding-top: 10px; padding-bottom: 10px; }
  .marquee-group li::after { display: none; }
  .marquee-group[aria-hidden="true"] { display: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .site-header, .toc, .site-footer, .skip, .page-hero-glow { display: none !important; }
  body { background: #fff; color: #000; }
  .page-hero { background: none; border: 0; padding: 0 0 12px; }
  .page-hero h1, .lede, .updated, .eyebrow, .doc h2, .doc h3, .doc p, .doc li, .doc strong, td, th { color: #000 !important; }
  .with-toc { display: block; }
  .doc > section { background: none; border: 0; padding: 0; break-inside: avoid-page; }
  a { color: #000; }
}