@font-face {
  font-family: "Inter";
  src: url("fonts/inter-var.woff2") format("woff2-variations"), url("fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}


:root {
  color-scheme: dark;

    --bg: oklch(0.156 0.004 49.25);            --fg: oklch(0.95 0.004 49.25);
  --surface: oklch(0.19 0.005 49.25);        --muted: oklch(0.70 0.008 49.25);          --stroke: oklch(0.52 0.008 49.25);         --separator: oklch(0.31 0.006 49.25);
  --primary: oklch(0.965 0.192 110.19);     --on-primary: oklch(0.156 0.004 49.25);    --primary-line: var(--primary);            --primary-edge: color-mix(in oklab, var(--on-primary) 15%, transparent);     --accent: var(--primary);
  --press: oklch(1 0 0 / 0.08);              --success: oklch(0.72 0.15 155);
  --destructive: oklch(0.66 0.19 29.21);
  --field: color-mix(in oklab, var(--fg) 5%, transparent);
  --field-edge: var(--stroke);

    --glow: oklch(1 0 0 / 0.06);
  --edge: var(--separator);                  --bezel: oklch(0.1 0.004 49.25);           --bezel-button: oklch(0.3 0.003 49.25);
  --ink: oklch(0.156 0.004 49.25);
  --case-body: oklch(0.93 0 0);              --case-side: oklch(0.8 0 0);
  --case-window: oklch(0.88 0 0);
  --case-edge: var(--stroke);
  --sticker-old: oklch(0.9 0 0);

  --r-sm: 4px;
  --r-lg: 8px;
  --r-xl: 12px;
  --r-tile: 24px;

  --press-time: 100ms;
  --state-time: 150ms;
  --ease-move: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-enter: cubic-bezier(0.32, 0.72, 0, 1);
  --reveal-time: 400ms;

  --gutter: max(20px, env(safe-area-inset-left), env(safe-area-inset-right));
  --font: "Inter", "Inter Variable", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.logo { filter: none; }


*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  overflow-x: clip;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01";
}

img { display: block; max-width: 100%; height: auto; }
svg { display: block; }
h1, h2, h3 { margin: 0; color: var(--fg); text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
figure { margin: 0; }

:focus-visible { outline: 2px solid var(--primary-line); outline-offset: 3px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.wrap { width: 100%; max-width: 1160px; margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: 800px; }
.center { text-align: center; }

.skip {
  position: absolute; left: var(--gutter); top: -100px; z-index: 100;
  padding: 12px 16px; border-radius: var(--r-xl);
  background: var(--primary); color: var(--on-primary);
  font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; }


h1 {
  font-size: clamp(2.25rem, 1.2rem + 4.4vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  font-weight: 700;
}
.tick { display: inline-block; text-align: left; font-variant-numeric: tabular-nums; user-select: none; -webkit-user-select: none; }  
.h1-stack > span { display: block; }
h2 {
  font-size: clamp(2rem, 1.35rem + 2.9vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -0.033em;
  font-weight: 700;
}
h3 { font-size: 1.25rem; line-height: 1.3; letter-spacing: -0.015em; font-weight: 600; }

.eyebrow, .kicker { font-size: 0.9375rem; line-height: 1.33; font-weight: 600; letter-spacing: -0.005em; }
.eyebrow { color: var(--muted); }
.kicker { display: inline-flex; align-items: center; gap: 8px; color: var(--fg); }
.kicker::before {
  content: ""; width: 10px; height: 10px; border-radius: 3px;
  background: var(--primary); box-shadow: inset 0 0 0 1px var(--primary-edge);
}

.lead { font-size: 1.1875rem; line-height: 1.45; color: var(--muted); letter-spacing: -0.01em; }
.fine { font-size: 0.875rem; line-height: 1.43; color: var(--muted); }

.cta-note { font-size: 0.875rem; line-height: 1.43; color: var(--muted); text-align: center; }

.money-in { color: var(--success); }

.tbd {
  font-variant-numeric: tabular-nums;
  padding: 0 6px;
  border-radius: var(--r-sm);
  background: var(--separator);
  box-shadow: inset 0 0 0 1px var(--stroke);
  color: var(--fg);
  font-weight: 600;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;   }
.tbd-sm { font-size: 0.8125rem; line-height: 1.4; font-weight: 600; padding: 1px 6px; }


.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 18px;
  border: 1px solid transparent; border-radius: var(--r-xl);
  font: inherit; font-size: 1rem; font-weight: 600; line-height: 1; letter-spacing: -0.01em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
  transition:
    background-color var(--state-time) var(--ease-move),
    border-color var(--state-time) var(--ease-move),
    scale var(--state-time) var(--ease-move);
}
.btn:active { scale: 0.97; transition-duration: var(--press-time); }
.btn-lg { min-height: 52px; padding: 0 28px; font-size: 1.0625rem; border-radius: var(--r-xl); }
.btn-sm { min-height: 44px; padding: 0 14px; font-size: 0.9375rem; }

.btn-primary { background: var(--primary); border-color: var(--primary-edge); color: var(--on-primary); }
.btn-primary:hover { background: color-mix(in oklab, var(--primary) 90%, var(--on-primary)); }
.btn-primary:active { background: color-mix(in oklab, var(--primary) 82%, var(--on-primary)); }
.btn-ghost { color: var(--fg); }
.btn-ghost:hover, .btn-ghost:active { background: var(--press); }
.btn-wide { width: 100%; }


.site-header { position: sticky; top: 0; z-index: 50; padding-top: env(safe-area-inset-top); isolation: isolate; }
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.8) blur(20px);
  backdrop-filter: saturate(1.8) blur(20px);
  border-bottom: 1px solid var(--separator);
  opacity: 0;
  transition: opacity 200ms var(--ease-move);
}
.site-header.is-scrolled::before,
html:not(.js) .site-header::before { opacity: 1; }

.bar { display: flex; align-items: center; justify-content: space-between; min-height: 60px; gap: 12px; }
.brand { display: inline-flex; align-items: center; min-height: 44px; border-radius: var(--r-lg); }
.brand .logo { height: 32px; width: auto; }
.bar-actions { display: flex; align-items: center; gap: 4px; margin-right: -8px; }

.header-cta {
  max-width: 0; padding-inline: 0; border-width: 0; margin-left: -4px; overflow: hidden;
  opacity: 0; visibility: hidden;
  transition: max-width 240ms var(--ease-move), padding 240ms var(--ease-move), margin 240ms var(--ease-move),
    opacity 160ms var(--ease-move), visibility 0s linear 240ms;
}
.show-cta .header-cta {
  max-width: 8em; padding-inline: 14px; border-width: 1px; margin-left: 0;
  opacity: 1; visibility: visible;
  transition-delay: 0s, 0s, 0s, 80ms, 0s;
}

.in-app [data-app], .in-app .dock { display: none !important; }
.in-app .brand { pointer-events: none; }
.in-app .web-only { display: none !important; }
html:not(.in-app) .app-only { display: none !important; }
.in-app .faq details { border-top: 0; }
.in-app .faq details:not(.web-only) ~ details:not(.web-only) { border-top: 1px solid var(--separator); }


:root { --story-pw: min(280px, 74vw); }
.phone {
  --pw: var(--story-pw);
  position: relative; justify-self: center;
  width: var(--pw); max-width: 100%;
  padding: calc(var(--pw) * 0.034);
  border-radius: calc(var(--pw) * 0.16);
  background: var(--bezel);
}
.phone::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(150deg, oklch(1 0 0 / 0.5) 0%, oklch(1 0 0 / 0.12) 18%, oklch(1 0 0 / 0.04) 50%, oklch(1 0 0 / 0.12) 82%, oklch(1 0 0 / 0.36) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.phone::after {
  content: ""; position: absolute; right: -2px; top: 24%;
  width: 3px; height: 11%; border-radius: 0 2px 2px 0; background: var(--bezel-button);
}
.screen {
  position: relative;
  display: flex; flex-direction: column;
  container-type: inline-size;
    aspect-ratio: 1000 / 2165.3;
  border-radius: calc(var(--pw) * (0.16 - 0.034));
  overflow: hidden;
  background: var(--bg);
}
.screen img { flex: 1 1 0; min-height: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.screen img.is-short { object-fit: contain; }

.screen::before {
  content: "9:41";
  content: "9:41" / "";
  flex: none;
  display: block;
  height: 13.43cqw;
  padding: 3.4cqw 0 0 9.6cqw;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", var(--font);
  font-size: 3.85cqw; line-height: 7.8cqw; font-weight: 600; letter-spacing: -0.01em;
  color: var(--fg);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 71 13.5'%3E%3Cg fill='%23202020'%3E%3Crect x='0' y='8' width='3' height='4.5' rx='1'/%3E%3Crect x='4.5' y='6' width='3' height='6.5' rx='1'/%3E%3Crect x='9' y='3.5' width='3' height='9' rx='1'/%3E%3Crect x='13.5' y='1' width='3' height='11.5' rx='1'/%3E%3Ccircle cx='27' cy='11' r='1.6'/%3E%3Crect x='44.5' y='3.5' width='21' height='7' rx='2'/%3E%3Crect x='68.6' y='5' width='1.6' height='4' rx='.8' opacity='.4'/%3E%3C/g%3E%3Cg fill='none' stroke='%23202020' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M19.9 4.9A10 10 0 0 1 34.1 4.9'/%3E%3Cpath d='M22.4 7.6A6.5 6.5 0 0 1 31.6 7.6'/%3E%3C/g%3E%3Crect x='42.5' y='1.5' width='25' height='11' rx='3.5' fill='none' stroke='%23202020' stroke-opacity='.4'/%3E%3C/svg%3E")
      no-repeat right 7.2cqw top 5.5cqw / 17.6cqw auto,
    var(--bg);
  white-space: nowrap;
  user-select: none;
}
.screen::after {
  content: "";
  position: absolute; top: 2.74cqw; left: 50%;
  width: 31.1cqw; height: 9.2cqw;
  translate: -50% 0;
  border-radius: 999px;
  background: #000;
}


.hero { padding: 12px 0 56px; }
.hero-grid { display: grid; gap: 36px; }
.hero-text { display: grid; gap: 14px; justify-items: start; }
.hero-text .eyebrow { margin-bottom: -2px; }

.actions { display: grid; gap: 10px; width: 100%; margin-top: 6px; }

.title-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 14px;
  width: 100%;
}

.hero-visual {
  --pw: min(296px, 76vw);
  position: relative; isolation: isolate;
  display: grid; justify-items: center;
  width: 100%;
}
.hero-visual .phone { --pw: inherit; }
.glow {
  position: absolute; z-index: -1; inset: -10% -25%;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, var(--glow), transparent 72%);
  pointer-events: none;
}


.spin {
  --sw: 132px;                               --sh: calc(var(--sw) * 691 / 428);         --t: calc(var(--sw) * 0.06);               position: relative; z-index: 3;
  width: var(--sw); height: var(--sh);
  margin: 16px 4px 16px 0;
  perspective: calc(var(--sw) * 7);
  touch-action: pan-y;                       cursor: grab;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  border-radius: 6px;
}
.spin.is-dragging { cursor: grabbing; }
.spin:focus-visible { outline: 2px solid var(--primary-line); outline-offset: 8px; }

.spin-card {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform: rotateY(-24deg);
  will-change: transform;
}
.face {
  position: absolute; inset: 0;
  container-type: inline-size;
  border-radius: 4.2% / 2.6%;
  background: var(--case-body);
  box-shadow: inset 0 0 0 1px var(--case-edge);   overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transform: translateZ(calc(var(--t) / 2));
}
.face-back { transform: rotateY(180deg) translateZ(calc(var(--t) / 2)); }

.case-label {
  position: absolute; left: 8%; right: 8%; top: 4%; height: 13%;
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: 4cqw;
  border-radius: 2cqw;
  background: var(--primary);
  box-shadow: inset 0 0 0 1px var(--primary-edge);
  color: var(--ink);
  font-size: 11cqw; font-weight: 700; line-height: 1; letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}
.case-window {
  position: absolute; left: 7%; right: 7%; top: 20%; bottom: 4%;
  display: grid; place-items: center;
  border-radius: 1.5cqw;
  background: var(--case-window);
  box-shadow: inset 0 0 0 1px oklch(0 0 0 / 0.12);
}
.case-window > * { grid-area: 1 / 1; width: 100%; height: 100%; }
.case-placeholder { color: var(--fg); }
.case-art { object-fit: contain; border-radius: 4.5cqw; -webkit-user-drag: none; pointer-events: none; }
.case-art.is-missing { visibility: hidden; }

.case-label-back { height: auto; aspect-ratio: 720 / 198; padding: 0; overflow: hidden; background: none; box-shadow: none; }
.case-label-back img { display: block; width: 100%; height: 100%; -webkit-user-drag: none; pointer-events: none; }
.card-back { width: 100%; height: 100%; }

.sheen { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.sheen-band {
  position: absolute; top: -10%; bottom: -10%; left: -50%; width: 200%;
  background: linear-gradient(105deg, transparent 36%, oklch(1 0 0 / 0.42) 47%, oklch(1 0 0 / 0.12) 53%, transparent 62%);
  transform: translateX(-12%);
}

.side { position: absolute; background: var(--case-side); }
.side-l, .side-r { top: 2.6%; bottom: 2.6%; left: 50%; width: var(--t); margin-left: calc(var(--t) / -2); }
.side-l { transform: rotateY(-90deg) translateZ(calc(var(--sw) / 2)); }
.side-r { transform: rotateY(90deg) translateZ(calc(var(--sw) / 2)); }
.side-t, .side-b { left: 4.2%; right: 4.2%; top: 50%; height: var(--t); margin-top: calc(var(--t) / -2); }
.side-t { transform: rotateX(90deg) translateZ(calc(var(--sh) / 2)); }
.side-b { transform: rotateX(-90deg) translateZ(calc(var(--sh) / 2)); }



.ticker { position: relative; display: flex; align-items: center; border-block: 1px solid var(--separator); background: var(--surface); }
.ticker-mask {
  flex: 1; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}
.ticker-track { display: flex; width: max-content; }
.ticker-list { display: flex; list-style: none; margin: 0; padding: 0; }
.ticker-list li {
  position: relative; display: flex; align-items: baseline; gap: 8px;
  padding: 18px 26px; white-space: nowrap;
  font-size: 0.9375rem; line-height: 1.33; font-variant-numeric: tabular-nums;
}
.ticker-list li::after {
  content: ""; position: absolute; right: -2px; top: 50%;
  width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: var(--stroke);
}
.t-kind { color: var(--muted); }
.t-name { font-weight: 600; }
.t-amt { color: var(--muted); font-weight: 600; }
.t-amt.is-plus { color: var(--success); }
.t-amt.is-minus { color: var(--destructive); }

.ticker-toggle {
  flex: none; display: grid; place-items: center;
  width: 44px; height: 44px; margin-right: calc(var(--gutter) - 12px); padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--muted);
  cursor: pointer; touch-action: manipulation;
  transition: background-color var(--state-time) var(--ease-move);
}
.ticker-toggle:hover { background: var(--press); color: var(--fg); }
.ticker-toggle svg { width: 16px; height: 16px; fill: currentColor; }
.ticker-toggle .i-play { display: none; }
.ticker.is-paused .ticker-toggle .i-play { display: block; }
.ticker.is-paused .ticker-toggle .i-pause { display: none; }


.section { padding: 96px 0 0; }
.section-head { display: grid; gap: 14px; margin-bottom: 56px; max-width: 44rem; }
.section-head.center { margin-inline: auto; justify-items: center; }

.chapter { display: grid; gap: 40px; align-items: center; margin-top: 112px; }
.section-head + .chapter { margin-top: 0; }

.chapter-text { display: grid; gap: 14px; max-width: 32rem; justify-items: start; }
.chapter-text h3,
.payoff-head h3 {
  font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem);
  line-height: 1.08; letter-spacing: -0.032em; font-weight: 700;
  margin-bottom: 4px;
}
.chapter-text .kicker { margin-bottom: -2px; }
.chapter-text p:not(.kicker) { color: var(--muted); }

.band { margin-top: 120px; padding: 80px 0; background: var(--surface); border-block: 1px solid var(--separator); }
.band-inner { display: grid; gap: 44px; align-items: center; }


.proof { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stat {
  display: grid; gap: 8px; align-content: start;
  padding: 20px 18px;
  border-radius: var(--r-tile);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--edge);
}
.stat-figure {
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.5rem);
  line-height: 1; font-weight: 700; letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.stat-label { font-size: 0.9375rem; line-height: 1.4; color: var(--muted); }


.payoff { display: grid; gap: 40px; margin-top: 120px; }
.payoff-head { display: grid; gap: 14px; justify-items: center; text-align: center; max-width: 36rem; margin-inline: auto; }
.payoff-head p:not(.kicker) { color: var(--muted); }

.profit {
  display: grid; gap: 22px;
  width: min(100%, 760px); justify-self: center;
  padding: 24px;
  border-radius: var(--r-tile);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--edge);
}
.profit-main { container-type: inline-size; min-width: 0; }
.profit-label { font-size: 0.9375rem; line-height: 1.33; color: var(--muted); }
.profit-figure {
  margin: 6px 0 10px;
  font-size: min(8.5rem, 20cqi);
  line-height: 0.95; font-weight: 700; letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.profit-parts { font-size: 0.9375rem; line-height: 1.45; color: var(--muted); font-variant-numeric: tabular-nums; }
.profit-parts > span { white-space: nowrap; }   .profit-tin { padding-top: 18px; border-top: 1px solid var(--separator); }
.tin-figure { margin-top: 2px; font-size: 2rem; line-height: 1.2; font-weight: 650; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }

.pair {
  display: grid; grid-auto-flow: column; grid-auto-columns: var(--story-pw);
  gap: 20px;
  margin-inline: calc(var(--gutter) * -1);
  padding: 4px var(--gutter) 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.pair::-webkit-scrollbar { display: none; }
.pair:focus-visible { outline-offset: -2px; border-radius: var(--r-xl); }
.pair-item { display: grid; gap: 16px; justify-items: center; scroll-snap-align: start; }
.pair-item figcaption { font-size: 0.9375rem; line-height: 1.4; color: var(--muted); text-align: center; max-width: 30ch; }
.pair-item figcaption strong { color: var(--fg); font-weight: 600; }


.sticker { --cut: 20px; position: relative; display: inline-flex; rotate: -2deg; }
.sticker-shape {
  position: absolute; inset: 0;
  border-radius: var(--r-sm);
  background: var(--primary);
  box-shadow: inset 0 0 0 1px var(--primary-edge);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
}
.flap { position: absolute; right: 0; bottom: 0; width: var(--cut); height: var(--cut); overflow: visible; }
.flap-fill { fill: color-mix(in oklab, var(--on-primary) 15%, transparent); }
.flap-cut { fill: none; stroke: var(--primary-edge); stroke-width: 2; vector-effect: non-scaling-stroke; }
.flap-line { fill: none; stroke: color-mix(in oklab, var(--on-primary) 25%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.sticker-figure {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  height: 56px; min-width: 128px; padding: 0 24px 0 16px;
  font-size: 1.25rem; font-weight: 600; line-height: 1; white-space: nowrap;
  font-variant-numeric: tabular-nums; color: var(--on-primary);
}
.sticker-old { rotate: 4deg; }
.sticker-old .sticker-shape { background: var(--sticker-old); box-shadow: inset 0 0 0 1px oklch(0 0 0 / 0.12); }
.sticker-old .flap-fill { fill: oklch(0 0 0 / 0.08); }
.sticker-old .flap-cut { stroke: oklch(0 0 0 / 0.12); }
.sticker-old .sticker-figure { color: var(--muted); font-weight: 500; }
.sticker-old s { text-decoration-thickness: 1px; }

.cp-body { fill: currentColor; fill-opacity: 0.08; }
.cp-window { fill: currentColor; fill-opacity: 0.03; }
.cp-print { fill: currentColor; fill-opacity: 0.11; }
.cp-text { fill: currentColor; fill-opacity: 0.06; }
.cp-edge { fill: none; stroke: currentColor; stroke-opacity: 0.3; stroke-width: 1; vector-effect: non-scaling-stroke; }

.tag {
  flex: none;
  display: inline-flex; align-items: center;
  height: 20px; padding: 0 6px;
  border: 1px solid var(--stroke); border-radius: 999px;
  font-size: 0.75rem; line-height: 1; font-weight: 600; letter-spacing: 0.01em;
  color: var(--fg);
}
.tag-nm { border-color: var(--success); }



.steps { list-style: none; margin: 0; padding: 0; display: grid; }
.step {
  position: relative;
  display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 18px; row-gap: 6px;
  padding-bottom: 32px;
}
.step:last-child { padding-bottom: 0; }
.step::before { content: ""; position: absolute; left: 21.5px; top: 52px; bottom: 8px; width: 1px; background: var(--separator); }
.step:last-child::before { display: none; }
.step-num {
  grid-row: 1 / span 2;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: inset 0 0 0 1px var(--primary-edge);
  color: var(--on-primary);
  font-size: 1.0625rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.step h3 { font-size: 1.1875rem; line-height: 1.27; padding-top: 10px; }
.step p { color: var(--muted); font-size: 1rem; line-height: 1.5; }


.plan {
  display: grid; gap: 18px;
  max-width: 460px; margin-inline: auto;
  padding: 24px;
  border-radius: var(--r-tile);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--edge);
}
.seg {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  margin: 0; padding: 4px; min-width: 0;
  border: 0; border-radius: var(--r-xl);
  background: var(--bg);
}
.seg-option {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 6px;
  min-height: 44px; padding: 6px 8px;
  border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px transparent;
  font-size: 0.9375rem; font-weight: 500; color: var(--muted);
  cursor: pointer; touch-action: manipulation;
  user-select: none; -webkit-user-select: none;
  transition: background-color var(--state-time) var(--ease-move), color var(--state-time) var(--ease-move);
}
.seg-option input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.seg-option:has(input:checked) {
  background: var(--accent);
  box-shadow: inset 0 0 0 1px var(--primary-line);
  color: var(--fg); font-weight: 600;
}
.seg-option:has(input:focus-visible) { outline: 2px solid var(--primary-line); outline-offset: 2px; }

.price {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px;
  font-size: 2.75rem; line-height: 1.09; font-weight: 700; letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}
.price .per { font-size: 1rem; line-height: 1.375; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.price-block { display: grid; gap: 4px; }
.price-alt { font-size: 0.9375rem; line-height: 1.4; color: var(--muted); font-variant-numeric: tabular-nums; }
.plan .per-week { display: none; }
.plan:has(input[value="week"]:checked) .per-month { display: none; }
.plan:has(input[value="week"]:checked) .per-week { display: inline; }

.ticks { list-style: none; margin: 0; padding: 18px 0 0; border-top: 1px solid var(--separator); display: grid; gap: 10px; font-size: 1rem; }
.plan-cta { display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 28px; }
.ticks li::before {
  content: ""; position: absolute; left: 2px; top: 6px;
  width: 14px; height: 7px;
  border-left: 2px solid currentColor; border-bottom: 2px solid currentColor;
  rotate: -45deg;
}


.faq { padding: 0 24px; border-radius: var(--r-tile); background: var(--surface); box-shadow: inset 0 0 0 1px var(--edge); }
.faq details + details { border-top: 1px solid var(--separator); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 60px; padding: 16px 0;
  font-size: 1.0625rem; line-height: 1.41; font-weight: 600;
  cursor: pointer; list-style: none;
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 9px; height: 9px; margin-right: 4px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: translateY(-3px) rotate(45deg);
  transition: transform var(--state-time) var(--ease-move);
}
.faq details[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.faq summary:focus-visible { outline-offset: -2px; border-radius: var(--r-lg); }
.faq details p { max-width: 60ch; padding: 0 0 20px; color: var(--muted); }


.cta { padding: 120px 0 128px; text-align: center; }
.cta-inner { display: grid; gap: 28px; justify-items: center; }
.cta-inner h2 { max-width: 20ch; }

.swap { display: inline-grid; }
.swap > .sticker { grid-area: 1 / 1; }
.swap > .sticker-old { align-self: start; justify-self: start; margin: 0 24px 48px 0; }
.swap > .sticker-new { z-index: 1; align-self: end; justify-self: end; margin: 48px 0 0 24px; }


.site-footer { padding: 48px 0 calc(40px + env(safe-area-inset-bottom)); border-top: 1px solid var(--separator); background: var(--bg); }
.foot { display: grid; gap: 16px; }
.logo-small { height: 32px; width: auto; }
.foot-links { list-style: none; margin: 0 0 0 -12px; padding: 0; display: flex; flex-wrap: wrap; }
.foot-links a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  border-radius: var(--r-lg); font-size: 1rem; font-weight: 600;
  text-decoration: underline; text-decoration-color: var(--stroke); text-underline-offset: 4px;
}
.foot-links a:hover { text-decoration-color: currentColor; }
.foot-links a[aria-current="page"] { text-decoration-color: currentColor; }
.tm { max-width: 62ch; font-size: 0.8125rem; line-height: 1.4; }


.dock { display: none; }

@media (max-width: 719px) {
  .dock {
    display: block;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
    isolation: isolate;
    translate: 0 110%; visibility: hidden;
    transition: translate 200ms var(--ease-move), visibility 0s linear 200ms;
  }
  .dock::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: color-mix(in oklab, var(--bg) 88%, transparent);
    -webkit-backdrop-filter: saturate(1.8) blur(20px);
    backdrop-filter: saturate(1.8) blur(20px);
    border-top: 1px solid var(--separator);
  }
  .dock.is-shown {
    translate: 0 0; visibility: visible;
    transition: translate 280ms var(--ease-enter), visibility 0s;
  }
    .has-dock .header-cta { display: none; }
    html.has-dock { scroll-padding-bottom: 88px; }
}


@media (max-width: 359px) {
  .spin { --sw: 104px; margin-right: 0; }
  .title-row { gap: 8px; }
  .h1-stack { font-size: 1.875rem; }          .proof { gap: 10px; }
  .stat { padding: 16px 14px; }
}


@media (max-width: 299px) {
  .proof { grid-template-columns: 1fr; }
  .title-row { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 4px; }
  .spin { --sw: 96px; margin: 8px 0; }
  .h1-stack { font-size: 1.625rem; }           .header-cta { display: none; }               .bar { gap: 8px; }
  .plan, .profit, .doc-card { padding: 16px; }
  .doc-body h2 { font-size: 1.25rem; hyphens: auto; -webkit-hyphens: auto; }
  .doc-head h1 { font-size: 1.75rem; hyphens: auto; -webkit-hyphens: auto; }
  .seg { grid-template-columns: minmax(0, 1fr); }     .faq { padding-inline: 16px; }
  .step { grid-template-columns: minmax(0, 1fr); }    .step-num { grid-row: auto; }
  .step h3 { padding-top: 4px; }
  .step::before { display: none; }
}


@media (min-width: 480px) {
  .actions { width: auto; }
  .actions .btn { min-width: 200px; }
  .actions-center { justify-items: center; }
  .btn-wide { min-width: 0; }
}

@media (min-width: 720px) {
  .section { padding-top: 144px; }
  .chapter { grid-template-columns: 1fr 1fr; gap: 64px; }
  .chapter-flip .chapter-text { order: 2; }
  :root { --story-pw: 300px; }
  .spin { --sw: 176px; }

  .band-inner { grid-template-columns: 1fr auto; gap: 72px; }

  .proof { grid-template-columns: repeat(4, 1fr); }

  .profit { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 40px; padding: 36px 40px; }
  .profit-tin { padding: 0 0 6px 32px; border-top: 0; border-left: 1px solid var(--separator); }
  .pair { grid-auto-flow: row; grid-template-columns: repeat(2, var(--story-pw)); justify-content: center; gap: 48px; margin-inline: 0; padding: 0; overflow: visible; }

  .steps { grid-template-columns: repeat(3, 1fr); column-gap: 40px; }
  .step { grid-template-columns: 1fr; padding-bottom: 0; row-gap: 10px; }
  .step-num { grid-row: auto; margin-bottom: 8px; }
  .step h3 { padding-top: 0; }
  .step::before { display: block; left: 56px; right: -40px; top: 21.5px; bottom: auto; width: auto; height: 1px; }
  .step:last-child::before { display: none; }
}

@media (min-width: 960px) {
  .bar { min-height: 68px; }
  .brand .logo { height: 36px; }

    .hero { padding: 40px 0 104px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 64px; }
  .hero-text { gap: 22px; }
  .hero-text .lead { font-size: 1.375rem; }
  .title-row { gap: 28px; }
  .hero-visual { --pw: 356px; width: auto; }
  .spin { --sw: 248px; margin: 24px 8px 24px 0; }
  .stat { padding: 28px 26px; }

  .lead { font-size: 1.25rem; }
  .section { padding-top: 176px; }
  .section-head { margin-bottom: 96px; }

  .chapter { gap: 96px; margin-top: 168px; }
  .chapter-text p:not(.kicker) { font-size: 1.125rem; }
  :root { --story-pw: 320px; }

    .step h3 { font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.02em; }
  .step p { font-size: 1.125rem; line-height: 1.5; max-width: 30ch; }

  .band { margin-top: 176px; padding: 128px 0; }

  .payoff { margin-top: 176px; gap: 56px; }
  .profit { padding: 44px 52px; }
  .pair { gap: 72px; }

  .cta { padding: 176px 0 184px; }

  .foot { grid-template-columns: auto 1fr auto; align-items: center; }
  .foot-links { justify-content: center; margin: 0; }
  .tm { grid-column: 1 / -1; }
}


.doc { padding: 40px 0 96px; }
.doc-body { max-width: 44rem; margin-inline: auto; }
.doc-head { display: grid; gap: 14px; justify-items: center; text-align: center; margin-bottom: 48px; }
.doc-head h1 { font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem); }
.doc-head .lead { max-width: 36rem; }
.draft-note {
  margin-bottom: 40px; padding: 14px 16px;
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--stroke);
  font-size: 0.9375rem; line-height: 1.45; font-weight: 600;
}
.doc-body h2 {
  margin: 48px 0 14px;
  font-size: clamp(1.5rem, 1.25rem + 1vw, 1.875rem);
  line-height: 1.15; letter-spacing: -0.025em;
}
.doc-body h3 { margin: 28px 0 8px; font-size: 1.125rem; line-height: 1.35; }
.doc-body p, .doc-body li { max-width: 65ch; }
.doc-body p + p, .doc-body p + ul, .doc-body ul + p, .doc-body h3 + p { margin-top: 12px; }
.doc-body ul { margin: 12px 0 0; padding-left: 1.25em; display: grid; gap: 8px; }
.doc-body a:not(.btn) { text-decoration-color: var(--stroke); text-underline-offset: 3px; font-weight: 600; }
.doc-body a:not(.btn):hover { text-decoration-color: currentColor; }
.doc-body .muted { color: var(--muted); }
.doc-card {
  display: grid; gap: 12px; justify-items: start;
  margin-top: 16px; padding: 24px;
  border-radius: var(--r-tile);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--edge);
}
.doc-card { grid-template-columns: minmax(0, 1fr); }
.doc-body .doc-card > * { margin: 0; }      .doc-card .btn { margin-top: 4px; max-width: 100%; white-space: normal; text-align: center; line-height: 1.25; padding-block: 12px; }
.doc-card .cta-note { text-align: left; }
.doc-steps { margin: 0; padding-left: 1.25em; display: grid; gap: 8px; }
.doc-body .doc-step-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.doc-body .doc-step-list > li { max-width: none; }
.doc-card h2 { display: flex; align-items: flex-start; gap: 12px; }
.step-n {
  flex: none; display: inline-grid; place-items: center; margin-top: -2px;     width: 32px; height: 32px; border-radius: 50%;
  background: var(--primary); box-shadow: inset 0 0 0 1px var(--primary-edge);
  color: var(--on-primary); font-size: 1rem; font-weight: 700; letter-spacing: 0; font-variant-numeric: tabular-nums;
}
.btn-outline { background: var(--surface); border-color: var(--stroke); color: var(--fg); }
.btn-outline:hover, .btn-outline:active { background: var(--press); }
.table-scroll {
  margin-top: 16px; overflow-x: auto;
  border-radius: var(--r-xl); box-shadow: inset 0 0 0 1px var(--edge); background: var(--surface);
}
.table-scroll:focus-visible { outline-offset: 2px; }
.table-scroll table { width: 100%; min-width: 36rem; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.45; }
.table-scroll th, .table-scroll td { padding: 12px 14px; text-align: left; vertical-align: top; }
.table-scroll th { font-weight: 600; }
.table-scroll tr + tr > * { border-top: 1px solid var(--separator); }
.table-scroll thead th { color: var(--muted); }
address { font-style: normal; }


@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    translate: 0 16px;
    transition:
      opacity var(--reveal-time) var(--ease-enter) var(--d, 0ms),
      translate var(--reveal-time) var(--ease-enter) var(--d, 0ms);
  }
  .js .reveal.is-in { opacity: 1; translate: 0 0; }

  .ticker-track { animation: ticker 64s linear infinite; }
  .ticker:hover .ticker-track,
  .ticker.is-paused .ticker-track { animation-play-state: paused; }
  @keyframes ticker { to { transform: translateX(-50%); } }

    .swap > .sticker {
    transition:
      translate 520ms var(--ease-enter),
      rotate 520ms var(--ease-enter),
      scale 420ms var(--ease-enter),
      opacity 260ms var(--ease-move);
  }
  .swap > .sticker-new { transition-delay: 240ms; }
  .js .swap:not(.is-in) > .sticker-old { translate: 24px 48px; rotate: -2deg; }
  .js .swap:not(.is-in) > .sticker-new { translate: 0 -44px; scale: 1.08; opacity: 0; }

    .js [data-depth] { will-change: transform; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  [data-depth] { transform: none !important; }     .btn:active { scale: 1; }
  .ticker-toggle { display: none; }
}