/* ============ Founder Frame — styles ============ */
:root {
--bg: #FFFFFF;
--bg-tint: #F3F7FA;
--surface: #FFFFFF;
--ink: #02070A;
--ink-2: #2B333B;
--muted: #66707A;
--line: #E4E9EE;
--line-2: #D3DAE1;
--accent: #FC734D;
--accent-ink: #C2492A;
--accent-soft: #FFE7DF;
--green: #1D8A55;
--green-soft: #E3F6EC;
--dark: #02070A;
--dark-2: #071118;
--font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--font-serif: "Instrument Serif", Georgia, serif;
--font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
--r-sm: 10px;
--r: 16px;
--r-lg: 24px;
--shadow: 0 1px 2px rgba(2,7,10,.04), 0 8px 24px -8px rgba(2,7,10,.10);
--shadow-lg: 0 2px 4px rgba(2,7,10,.04), 0 24px 60px -16px rgba(2,7,10,.20);
--gutter: clamp(16px, 4vw, 32px);
--max: 1160px;
/* motion tokens */
--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--font-sans);
font-size: 16px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.025em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.container--narrow { max-width: 780px; }
.center { text-align: center; }
/* ---------- type ---------- */
em { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
.display { font-size: clamp(2.3rem, 4.6vw, 3.75rem); line-height: 1.05; letter-spacing: -0.04em; }
.display .line { display: block; white-space: nowrap; }
.display em { font-size: 1.08em; }
.h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); line-height: 1.06; letter-spacing: -0.035em; }
.h2 em { font-size: 1.08em; }
.h3 { font-size: 1.25rem; line-height: 1.25; }
.h3 em { font-size: 1.1em; }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--ink-2); max-width: 46ch; margin-top: 20px; }
.center .lead, .section__head.center .lead { margin-left: auto; margin-right: auto; }
.eyebrow { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.eyebrow--accent { color: var(--accent-ink); }
.mono { font-family: var(--font-mono); }
.muted { color: var(--muted); }
.small { font-size: .92rem; }
.xsmall { font-size: .8rem; }
.micro { font-size: .85rem; color: var(--muted); margin-top: 18px; }
/* ---------- buttons ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid transparent;
font-weight: 500; font-size: .98rem; white-space: nowrap;
transition: transform 160ms var(--ease-out), background-color 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.btn--sm { height: 38px; padding: 0 16px; font-size: .9rem; }
.btn--lg { height: 56px; padding: 0 30px; font-size: 1.05rem; }
.btn--block { width: 100%; }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #000; }
.btn--accent { background: var(--accent); color: #fff; box-shadow: 0 6px 18px -6px rgba(252,115,77,.6); }
.btn--accent:hover { background: #E8603A; }
.btn--ghost { background: var(--surface); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--ink); }
/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.8); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid transparent; transition: border-color 300ms ease; }
.nav.is-scrolled { border-bottom-color: var(--line); }
.nav__inner { display: flex; align-items: center; gap: 24px; height: 68px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: -0.02em; font-size: 1.08rem; }
.logo__mark { width: 30px; height: 30px; display: grid; place-items: center; background: var(--ink); color: var(--bg); border-radius: 8px; }
.logo__mark svg { width: 30px; height: 30px; }
.logo--light .logo__mark { background: var(--bg); color: var(--ink); }
.nav__links { display: flex; gap: 28px; margin-left: auto; font-size: .94rem; color: var(--ink-2); }
.nav__links a:hover { color: var(--ink); }
.nav__toggle { display: none; margin-left: auto; width: 40px; height: 40px; border: 0; background: transparent; position: relative; }
.nav__toggle span { position: absolute; left: 10px; right: 10px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 280ms var(--ease-out); }
.nav__toggle span:first-child { top: 15px; }
.nav__toggle span:last-child { top: 23px; }
.nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
.nav__mobile { display: flex; flex-direction: column; gap: 4px; padding: 8px var(--gutter) 20px; border-bottom: 1px solid var(--line); }
.nav__mobile[hidden] { display: none; }
.nav__mobile a:not(.btn) { padding: 12px 0; border-bottom: 1px solid var(--line); }
.nav__mobile .btn { margin-top: 12px; }
/* ---------- hero ---------- */
.hero { padding: clamp(48px, 8vw, 96px) 0 clamp(40px, 6vw, 72px); }
.hero__grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.pill { display: inline-flex; align-items: center; gap: 10px; padding: 5px 14px 5px 5px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); font-size: .86rem; color: var(--ink-2); margin-bottom: 28px; transition: border-color 200ms ease; }
.pill:hover { border-color: var(--ink); }
.pill__tag { background: var(--accent-soft); color: var(--accent-ink); font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; padding: 3px 9px; border-radius: 999px; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
/* viewfinder frame — signature element */
.frame { position: relative; padding: 28px; }
.frame__corner { position: absolute; width: 28px; height: 28px; border: 2.5px solid var(--ink); }
.frame__corner.tl { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 8px; }
.frame__corner.tr { top: 0; right: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 8px; }
.frame__corner.bl { bottom: 0; left: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 8px; }
.frame__corner.br { bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 8px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.hero__visual { position: relative; }
.engine { padding: 22px; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.engine__head { display: flex; align-items: center; gap: 12px; font-size: .74rem; margin-bottom: 18px; }
.engine__head .tc { margin-left: auto; }
.rec { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-weight: 500; color: var(--accent-ink); }
.rec i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: blink 1.2s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }
.engine__title { font-family: var(--font-serif); font-style: italic; font-size: 1.5rem; line-height: 1.2; margin-bottom: 4px; }
.steps-mini { margin: 20px 0; display: grid; gap: 4px; counter-reset: s; }
.steps-mini li { display: grid; grid-template-columns: 22px 70px 1fr; align-items: center; gap: 8px; padding: 9px 10px; border-radius: var(--r-sm); font-size: .9rem; transition: background-color 450ms var(--ease-out); }
.steps-mini li .muted { font-size: .84rem; }
.steps-mini .dot { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line-2); position: relative; transition: background-color 300ms ease, border-color 300ms ease, box-shadow 450ms var(--ease-out), transform 450ms var(--ease-out); }
.steps-mini li.is-done .dot { background: var(--ink); border-color: var(--ink); }
.steps-mini li.is-done .dot::after { content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.steps-mini li.is-active { background: var(--accent-soft); }
.steps-mini li.is-active .dot { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(252,115,77,.15); }
.engine__out { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; border-top: 1px solid var(--line); padding-top: 16px; }
.out { display: flex; flex-direction: column; }
.out__n { font-size: 1.7rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
.float-card { position: absolute; display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 14px; box-shadow: var(--shadow-lg); animation: float 6s ease-in-out infinite; max-width: 270px; }
.float-card--clip { left: -28px; bottom: -54px; }
.float-card--lead { right: -26px; top: -18px; padding-left: 14px; animation-delay: -3s; }
@keyframes float { 50% { transform: translateY(-8px); } }
.clip-thumb { width: 46px; height: 72px; border-radius: 8px; background: linear-gradient(160deg, #7A3220, #02070A); position: relative; overflow: hidden; flex: none; }
.clip-thumb__cap { position: absolute; left: 3px; right: 3px; bottom: 6px; font-size: 5px; line-height: 1.2; color: #fff; font-weight: 700; text-align: center; }
.lead-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px var(--green-soft); flex: none; }
/* ---------- marquee ---------- */
.marquee-wrap { padding: 32px 0 8px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); padding-bottom: 24px; }
.marquee__track { display: flex; gap: 56px; width: max-content; animation: marquee 32s linear infinite; }
.marquee__track span { font-size: 1.35rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ink-2); opacity: .75; white-space: nowrap; }
@keyframes marquee { to { transform: translateX(calc(-50% - 28px)); } }
/* ---------- sections ---------- */
.section { padding: clamp(72px, 10vw, 128px) 0; }
.section--tight { padding: clamp(48px, 7vw, 80px) 0; }
.section--tint { background: var(--bg-tint); }
.section__head { margin-bottom: clamp(40px, 6vw, 64px); max-width: 760px; }
.section__head.center { margin-left: auto; margin-right: auto; }
/* calculator */
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: 999px; overflow: hidden; }
.stepper button { width: 38px; height: 36px; border: 0; background: transparent; font-size: 1.1rem; }
.stepper button:hover { background: var(--bg-tint); }
.stepper output { min-width: 28px; text-align: center; font-family: var(--font-mono); }
/* how it works */
.flow { display: grid; gap: clamp(48px, 7vw, 88px); }
.flow__step { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.flow__step:nth-child(even) .flow__text { order: 2; }
.flow__n { display: inline-block; color: var(--accent-ink); font-size: .85rem; margin-bottom: 12px; }
.flow__text .h3 { font-size: clamp(1.6rem, 3vw, 2.1rem); letter-spacing: -0.03em; margin-bottom: 14px; }
.flow__text p { color: var(--ink-2); max-width: 44ch; }
.ticks { display: grid; gap: 10px; margin-top: 22px; }
.ticks li { position: relative; padding-left: 28px; font-size: .95rem; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--green-soft); }
.ticks li::after { content: ""; position: absolute; left: 7px; top: 7px; width: 4px; height: 8px; border: solid var(--green); border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }
.flow__card { padding: 24px; border-radius: var(--r-lg); }
.flow__card > .mono:first-child { margin-bottom: 16px; letter-spacing: .06em; }
.plan li, .clips li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: .94rem; }
.plan li:last-child, .clips li:last-child { border-bottom: 0; }
.tag { font-family: var(--font-mono); font-size: .7rem; padding: 3px 8px; border-radius: 6px; white-space: nowrap; }
.tag--a { background: var(--accent-soft); color: var(--accent-ink); }
.tag--b { background: #E3F3FB; color: #0277B0; }
.tag--c { background: var(--green-soft); color: var(--green); }
.qs { counter-reset: q; display: grid; gap: 12px; margin-bottom: 14px; }
.qs li { counter-increment: q; display: grid; grid-template-columns: 28px 1fr; font-size: .95rem; }
.qs li::before { content: counter(q, decimal-leading-zero); font-family: var(--font-mono); font-size: .78rem; color: var(--muted); padding-top: 2px; }
.clips li .mono { font-size: .78rem; color: var(--muted); width: 42px; flex: none; }
.clips .grade { margin-left: auto; font-family: var(--font-mono); font-size: .78rem; font-weight: 500; background: var(--green-soft); color: var(--green); padding: 2px 8px; border-radius: 6px; }
.clips .cut { opacity: .45; text-decoration: line-through; }
.clips .cut .grade { background: var(--bg-tint); color: var(--muted); }
.post__head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: .78rem; font-weight: 600; }
.post__media { margin-top: 14px; aspect-ratio: 16/9; border-radius: 12px; background: linear-gradient(135deg, #0B3A5A, #02070A); display: grid; place-items: center; }
.play { width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.92); position: relative; }
.play::after { content: ""; position: absolute; left: 18px; top: 14px; border-left: 14px solid var(--ink); border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.report { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.report > div { display: flex; flex-direction: column; }
.report__n { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.03em; }
.bars { display: flex; align-items: flex-end; gap: 8px; height: 90px; margin-bottom: 10px; }
.bars i { flex: 1; height: var(--h); background: var(--ink); border-radius: 4px 4px 0 0; opacity: .85; }
.bars i:last-child { background: var(--accent); opacity: 1; }
/* bento */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.bento__item { padding: 28px; border-radius: var(--r-lg); display: flex; flex-direction: column; gap: 10px; }
.bento__item--wide { grid-column: span 2; }
.bento__item--full { grid-column: 1 / -1; }
.hook { margin-top: 14px; display: grid; gap: 10px; }
.hook__row { display: grid; gap: 4px; padding: 14px 16px; border-radius: 12px; background: var(--bg-tint); }
.hook__row p { font-size: .98rem; }
.hook__row:first-child p { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(110,108,102,.5); }
.hook__row--after { background: var(--dark); color: #fff; }
.hook__row--after span { color: var(--accent); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .06em; }
.hook__row:first-child span { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .06em; }
/* chips */
.chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 860px; margin: 8px auto 0; }
.chip { padding: 10px 18px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); font-size: .95rem; }
.chip--hot { background: var(--ink); color: #fff; border-color: var(--ink); }
/* compare */
.compare { overflow-x: auto; border-radius: var(--r-lg); }
.compare table { width: 100%; border-collapse: collapse; min-width: 640px; font-size: .95rem; }
.compare th, .compare td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--line); }
.compare th { font-weight: 500; color: var(--muted); font-size: .88rem; }
.compare tr:last-child td { border-bottom: 0; }
.compare td:not(:first-child), .compare th:not(:first-child) { text-align: center; }
.compare td:not(:first-child):not(.us) { color: var(--muted); }
.compare .us { background: #FFF4F0; color: var(--ink); font-weight: 500; }
.compare th.us { color: var(--accent-ink); font-weight: 600; }
/* work */
.work { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 16px; align-items: end; }
.reel { margin: 0; }
.reel__frame { aspect-ratio: 9/16; border-radius: var(--r); background: linear-gradient(170deg, #0B3A5A, #02070A 70%); position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 14px; color: #fff; box-shadow: var(--shadow); }
.reel:first-child .reel__frame { aspect-ratio: 4/5; background: linear-gradient(170deg, #55606A, #1C252D); }
.reel__frame--a { background: linear-gradient(170deg, #7A3220, #02070A 70%); }
.reel__frame--b { background: linear-gradient(170deg, #0B4E7A, #02070A 70%); }
.reel__frame--c { background: linear-gradient(170deg, #123447, #02070A 70%); }
.reel__label { font-size: .7rem; letter-spacing: .06em; opacity: .85; }
.reel__cap { font-weight: 700; font-size: 1rem; line-height: 1.25; text-align: center; text-shadow: 0 2px 10px rgba(0,0,0,.4); margin-bottom: 18%; }
.reel:first-child .reel__cap { font-weight: 500; opacity: .85; margin-bottom: 0; text-align: left; }
.reel figcaption { font-size: .85rem; color: var(--muted); margin-top: 10px; }
/* pricing */
.currency { display: inline-flex; margin-top: 28px; padding: 4px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); }
.currency button { border: 0; background: transparent; padding: 7px 16px; border-radius: 999px; font-family: var(--font-mono); font-size: .8rem; color: var(--muted); }
.currency button.is-active { background: var(--ink); color: #fff; }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
.plan-card { padding: 30px; border-radius: var(--r-lg); position: relative; display: flex; flex-direction: column; gap: 8px; }
.plan-card .btn { margin: 18px 0 6px; }
.plan-card .ticks { margin-top: 14px; }
.plan-card--featured { border: 2px solid var(--ink); box-shadow: var(--shadow-lg); }
.plan-card__badge { position: absolute; top: -13px; left: 30px; background: var(--accent); color: #fff; font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; padding: 4px 12px; border-radius: 999px; }
.price { display: flex; align-items: baseline; gap: 6px; margin-top: 14px; }
.price .js-price { font-size: 2.6rem; font-weight: 600; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.founding { margin-top: 24px; padding: clamp(24px, 4vw, 36px); border-radius: var(--r-lg); display: flex; align-items: center; justify-content: space-between; gap: 32px; border: 1.5px dashed var(--accent); background: #FFF8F5; box-shadow: none; }
.founding .h3 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); margin-bottom: 10px; }
.founding .muted { max-width: 62ch; }
/* faq */
.faq { border-top: 1px solid var(--line-2); }
.faq details { border-bottom: 1px solid var(--line-2); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 44px 22px 0; font-weight: 500; font-size: 1.08rem; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 1.5rem; font-weight: 300; transition: transform 300ms var(--ease-out); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding: 0 0 24px; color: var(--ink-2); max-width: 64ch; }
/* final cta */
.final { background: var(--dark); color: #fff; padding: clamp(80px, 11vw, 140px) 0; }
.frame--cta { max-width: 820px; margin: 0 auto; padding: clamp(48px, 7vw, 80px) clamp(24px, 5vw, 64px); }
.frame--cta .frame__corner { border-color: rgba(255,255,255,.85); width: 40px; height: 40px; }
.h2--light em { color: var(--accent); }
.eyebrow--light { color: #9C9A93; }
.lead--light { color: #C9C6BD; margin: 20px auto 36px; }
.micro--light { color: #9C9A93; }
.micro--light a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
/* footer */
.footer { background: var(--dark-2); color: #fff; padding: 56px 0 28px; }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
.footer__grid > div { display: flex; flex-direction: column; gap: 10px; }
.footer__grid a:not(.logo) { color: #C9C6BD; font-size: .92rem; }
.footer__grid a:not(.logo):hover { color: #fff; }
.footer__h { font-family: var(--font-mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: #8A887F; margin-bottom: 4px; }
.muted-light { color: #8A887F; }
.footer__base { margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.08); }
/* ---------- responsive ---------- */
@media (max-width: 980px) {
.hero__grid { grid-template-columns: 1fr; }
.hero__visual { max-width: 520px; width: 100%; margin: 0 auto; }
.bento { grid-template-columns: 1fr 1fr; }
.plans { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
.plan-card--featured { order: -1; }
.work { grid-template-columns: 1fr 1fr; }
.footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
.nav__links, .nav__inner > .btn { display: none; }
.nav__toggle { display: block; }
.flow__step { grid-template-columns: 1fr; gap: 24px; }
.flow__step:nth-child(even) .flow__text { order: 0; }
.founding { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) {
.frame { padding: 16px; }
.frame__corner { width: 20px; height: 20px; }
.engine { padding: 16px; }
.steps-mini li { grid-template-columns: 22px 58px 1fr; padding: 8px 6px; }
.float-card { display: none; }
.bento { grid-template-columns: 1fr; }
.bento__item--wide { grid-column: auto; }
.hero__ctas .btn { width: 100%; }
.footer__grid { grid-template-columns: 1fr; }
}
/* fixes */
.pill__tag { white-space: nowrap; }
section[id] { scroll-margin-top: 72px; }
@media (max-width: 600px) { .display .line { white-space: normal; } }
/* =====================================================
MOTION — smooth, Apple-like. Visuals unchanged.
Curves: --ease-out (enter/exit), --ease-in-out (on-screen moves)
===================================================== */
/* Button press: instant physical feedback */
.btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
.btn:hover { transform: translateY(-1px); }
.btn:hover:active { transform: translateY(0) scale(0.97); }
.pill span[aria-hidden] { display: inline-block; transition: transform 300ms var(--ease-out); }
.pill:hover span[aria-hidden] { transform: translateX(3px); }
}
/* Hero entrance — once per visit, staggered, off the main thread */
@keyframes rise {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: none; }
}
@keyframes settle {
from { opacity: 0; transform: translateY(24px) scale(0.97); }
to { opacity: 1; transform: none; }
}
.js .hero__center > .pill,
.js .hero__center .display .line,
.js .hero__center > .lead,
.js .hero__center > .hero__ctas,
.js .hero__center > .hero__facts {
opacity: 0;
animation: rise 900ms var(--ease-out) forwards;
}
.js .hero__center > .pill { animation-delay: 80ms; }
.js .hero__center .display .line:nth-child(1) { animation-delay: 140ms; }
.js .hero__center .display .line:nth-child(2) { animation-delay: 210ms; }
.js .hero__center > .lead { animation-delay: 290ms; }
.js .hero__center > .hero__ctas { animation-delay: 360ms; }
.js .hero__center > .hero__facts { animation-delay: 420ms; }
.js .studio-wrap { opacity: 0; animation: settle 1200ms var(--ease-out) 420ms forwards; }
/* Hero visual drifts gently as you scroll away (scroll-driven, compositor only) */
@supports (animation-timeline: scroll()) {
@keyframes drift { to { transform: translateY(-48px); } }
.studio-drift-disabled {
animation: drift linear both;
animation-timeline: scroll(root block);
animation-range: 0 700px;
}
}
/* Live pipeline: active step gets a soft breathing ring */
.steps-mini li.is-done .dot { transform: scale(1); }
.steps-mini li .dot { transform: scale(0.92); }
.steps-mini li.is-active .dot { transform: scale(1); }
/* Floating cards: slower, softer bob */
.float-card { animation-duration: 7s; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
/* Scroll reveal — fire once, staggered within a group */
.js .reveal {
opacity: 0;
transform: translateY(28px);
transition:
opacity 900ms var(--ease-out),
transform 1100ms var(--ease-out);
transition-delay: calc(var(--i, 0) * 70ms);
}
.js .reveal.is-in { opacity: 1; transform: none; }
/* Section headings ease in too */
.js .section__head > * {
opacity: 0;
transform: translateY(20px);
transition: opacity 900ms var(--ease-out), transform 1100ms var(--ease-out);
transition-delay: calc(var(--i, 0) * 80ms);
}
.js .section__head.is-in > * { opacity: 1; transform: none; }
/* Mobile menu: drops in from under the bar */
.nav__mobile {
transform-origin: top center;
transition: opacity 220ms var(--ease-out), transform 280ms var(--ease-out);
}
.nav__mobile:not(.is-open) { opacity: 0; transform: translateY(-8px); }
.nav__mobile.is-open { opacity: 1; transform: none; }
/* FAQ: smooth open/close where supported (progressive enhancement) */
@supports (interpolate-size: allow-keywords) {
.faq { interpolate-size: allow-keywords; }
.faq details::details-content {
block-size: 0;
overflow: hidden;
opacity: 0;
transition:
block-size 400ms var(--ease-out),
opacity 300ms ease,
content-visibility 400ms allow-discrete;
}
.faq details[open]::details-content { block-size: auto; opacity: 1; }
}
/* Currency swap */
.js-price { display: inline-block; }
/* Reduced motion: keep gentle fades, drop movement */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
@keyframes rise { from { opacity: 0; } to { opacity: 1; } }
@keyframes settle { from { opacity: 0; } to { opacity: 1; } }
.js .hero__center > *, .js .hero__center .display .line, .js .studio-wrap { animation-duration: 400ms; }
.studio { animation: none !important; }
.js .reveal, .js .section__head > * { transform: none; transition: opacity 400ms ease; transition-delay: 0ms; }
.marquee__track, .float-card, .rec i { animation: none; }
.btn, .btn:active, .btn:hover { transform: none; }
.nav__mobile { transition: opacity 150ms ease; transform: none !important; }
.faq details::details-content { transition: opacity 150ms ease, content-visibility 150ms allow-discrete; }
}
/* =====================================================
v2 — COLOUR & SHOWCASE
===================================================== */
:root {
--night: #02070A;
--indigo: #0297DE;
--blue: #0297DE;
--violet: #39B5F0;
--amber: #FFA585;
--app: #050C12;
--app-2: #0A141C;
--app-line: #17242F;
--app-text: #EEF0F6;
--app-dim: #8395A3;
--grad-brand: linear-gradient(100deg, #0297DE 0%, #FC734D 100%);
--grad-brand: linear-gradient(100deg in oklch, #0297DE 0%, #FC734D 100%);
}
/* ---------- nav over the hero ---------- */
.nav { position: fixed; left: 0; right: 0; transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease; }
.nav__links { margin: 0 auto; padding: 8px 22px; border-radius: 999px; background: rgba(2,7,10,.04); border: 1px solid rgba(2,7,10,.06); transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease; }
.nav.on-dark { background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; color: #fff; }
.nav.on-dark .logo__mark { background: #fff; color: var(--ink); }
.nav.on-dark .nav__links { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: rgba(255,255,255,.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.nav.on-dark .nav__links a:hover { color: #fff; }
.nav.on-dark .nav__inner > .btn { background: #fff; color: var(--ink); }
.nav.on-dark .nav__toggle span { background: #fff; }
.nav.on-dark .nav__mobile { background: var(--night); }
/* ---------- hero mesh ---------- */
.hero--mesh { position: relative; padding: calc(68px + clamp(56px, 9vw, 110px)) 0 0; color: #fff; isolation: isolate; overflow: hidden; }
.mesh { position: absolute; inset: 0 0 auto 0; height: calc(100% - 200px); z-index: -1; overflow: hidden;
background: linear-gradient(180deg, #02070A 0%, #02101A 30%, #032A45 58%, #034D7C 80%, #0874AE 100%);
-webkit-mask-image: linear-gradient(180deg, #000 80%, transparent); mask-image: linear-gradient(180deg, #000 80%, transparent); }
.mesh__blob { position: absolute; border-radius: 50%; will-change: transform; }
.mesh__blob--a { width: 70vw; height: 70vw; left: -20vw; top: -25vw; background: radial-gradient(closest-side, rgba(2,151,222,.32), transparent); animation: blobA 22s var(--ease-in-out) infinite alternate; }
.mesh__blob--b { width: 60vw; height: 60vw; right: -18vw; top: -10vw; background: radial-gradient(closest-side, rgba(2,151,222,.28), transparent); animation: blobB 26s var(--ease-in-out) infinite alternate; }
.mesh__blob--c { width: 100vw; height: 60vw; left: 0; bottom: -14vw; background: radial-gradient(closest-side, rgba(252,115,77,.75), rgba(255,140,80,.25) 55%, transparent); animation: blobC 18s var(--ease-in-out) infinite alternate; }
.mesh__blob--d { width: 46vw; height: 40vw; left: 27vw; bottom: 6vw; background: radial-gradient(closest-side, rgba(255,165,133,.55), transparent); animation: blobA 20s var(--ease-in-out) -6s infinite alternate-reverse; }
@keyframes blobA { to { transform: translate3d(8vw, 6vw, 0) scale(1.08); } }
@keyframes blobB { to { transform: translate3d(-10vw, 8vw, 0) scale(0.92); } }
@keyframes blobC { to { transform: translate3d(-6vw, -4vw, 0) scale(1.06); } }
.mesh__grain { position: absolute; inset: 0; opacity: .14; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,"); }
.hero__center { text-align: center; display: flex; flex-direction: column; align-items: center; }
.pill--glass { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); color: rgba(255,255,255,.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.pill--glass:hover { border-color: rgba(255,255,255,.5); }
.pill--glass .pill__tag { background: #fff; color: var(--accent-ink); }
.display--hero { font-size: clamp(2.6rem, 7.4vw, 6rem); line-height: 1; letter-spacing: -0.045em; text-shadow: 0 2px 40px rgba(10,15,36,.25); }
.display--hero em { font-size: 1.06em; background: linear-gradient(90deg, #FFE1CF, #FFB89A); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; }
.lead--hero { color: rgba(255,255,255,.8); max-width: 40ch; margin: 26px auto 0; font-size: clamp(1.05rem, 1.7vw, 1.28rem); }
.hero--mesh .hero__ctas { justify-content: center; margin-top: 36px; }
.btn--white { background: #fff; color: var(--ink); box-shadow: 0 10px 30px -10px rgba(10,15,36,.5); }
.btn--glass { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.28); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.btn--glass:hover { border-color: rgba(255,255,255,.6); }
.play-sm { width: 18px; height: 18px; border-radius: 50%; background: #fff; position: relative; display: inline-block; flex: none; }
.play-sm::after { content: ""; position: absolute; left: 7px; top: 5px; border-left: 6px solid var(--ink); border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.play-sm--lg { width: 44px; height: 44px; }
.play-sm--lg::after { left: 18px; top: 14px; border-left-width: 12px; border-top-width: 8px; border-bottom-width: 8px; }
.hero__facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-top: 26px; font-size: .88rem; color: rgba(255,255,255,.72); }
.hero__facts li { display: inline-flex; align-items: center; gap: 8px; }
.hero__facts li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 3px rgba(255,165,133,.2); }
/* ---------- studio window ---------- */
.studio-wrap { margin-top: clamp(56px, 7vw, 88px); }
.studio { padding: 8px; border-radius: 22px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 40px 120px -30px rgba(10,15,36,.55); color: var(--app-text); text-align: left; }
.studio__chrome { display: flex; align-items: center; height: 38px; padding: 0 10px; }
.studio__dots { display: flex; gap: 7px; }
.studio__dots i { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,.55); }
.studio__url { margin: 0 auto; font-size: .76rem; padding: 4px 14px; border-radius: 8px; background: rgba(255,255,255,.55); color: #2a2d3a; }
.studio__live { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; color: #2a2d3a; }
.studio__live i { width: 7px; height: 7px; border-radius: 50%; background: #1FC77E; box-shadow: 0 0 0 3px rgba(31,199,126,.25); }
.studio__body { display: grid; grid-template-columns: 210px 1fr; background: var(--app); border-radius: 14px; overflow: hidden; border: 1px solid rgba(0,0,0,.3); }
.studio__side { background: var(--app-2); border-right: 1px solid var(--app-line); padding: 18px 14px; display: flex; flex-direction: column; gap: 14px; }
.studio__client { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--app-line); }
.avatar--grad { background: var(--grad-brand); }
.s-strong { font-weight: 600; font-size: .9rem; color: var(--app-text); }
.s-dim { color: var(--app-dim); font-size: .82rem; }
.s-xs { font-size: .74rem; }
.s-label { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: #6A7088; margin-bottom: 8px; }
.s-big { font-size: 1.6rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; color: var(--app-text); }
.studio__nav { display: grid; gap: 2px; margin-top: -6px; }
.studio__nav li { position: relative; padding: 8px 10px 8px 14px; border-radius: 8px; font-size: .86rem; color: var(--app-dim); transition: background-color 300ms ease, color 300ms ease; }
.studio__nav li::before { content: ""; position: absolute; left: 4px; top: 9px; bottom: 9px; width: 2px; border-radius: 2px; background: var(--accent); transform: scaleY(0); transition: transform 400ms var(--ease-out); }
.studio__nav li.is-on { background: rgba(255,255,255,.06); color: #fff; }
.studio__nav li.is-on::before { transform: scaleY(1); }
.studio__side-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--app-line); }
.studio__main { padding: 20px 22px 22px; min-width: 0; }
.studio__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.studio__title { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.2; margin-top: 4px; }
.chip-status { display: inline-flex; align-items: center; gap: 7px; font-size: .72rem; padding: 6px 11px; border-radius: 999px; background: rgba(31,199,126,.1); color: #6DF0B5; white-space: nowrap; }
.chip-status i { width: 6px; height: 6px; border-radius: 50%; background: #1FC77E; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 18px 0 16px; }
.tab { position: relative; text-align: left; border: 0; background: transparent; color: var(--app-dim); padding: 10px 4px 14px; font-weight: 500; font-size: .92rem; display: flex; align-items: baseline; gap: 8px; transition: color 300ms ease; }
.tab:hover, .tab[aria-selected="true"] { color: #fff; }
.tab__n { font-size: .7rem; color: #5D6379; transition: color 300ms ease; }
.tab[aria-selected="true"] .tab__n { color: var(--accent); }
.tab__bar { position: absolute; left: 4px; right: 4px; bottom: 0; height: 2px; border-radius: 2px; background: rgba(255,255,255,.1); overflow: hidden; }
.tab__bar i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--accent), var(--amber)); transform-origin: left; transform: scaleX(0); }
.tab.is-done .tab__bar i { transform: scaleX(1); opacity: .35; }
.tab[aria-selected="true"] .tab__bar i { animation: tabfill var(--tab-ms, 5600ms) linear forwards; }
.studio.is-paused .tab[aria-selected="true"] .tab__bar i { animation-play-state: paused; }
@keyframes tabfill { to { transform: scaleX(1); } }
.panels { position: relative; height: 330px; }
.panel { position: absolute; inset: 0; opacity: 0; transform: translateY(10px) scale(.99); pointer-events: none; transition: opacity 450ms var(--ease-out), transform 650ms var(--ease-out); }
.panel.is-active { opacity: 1; transform: none; pointer-events: auto; }
.js .panel[hidden] { display: block; }
@keyframes popin { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
.js .panel .pi { opacity: 0; }
.panel.is-active .pi { animation: popin 600ms var(--ease-out) forwards; animation-delay: calc(120ms + var(--k, 0) * 90ms); }
/* 01 plan */
.plan-board { display: grid; gap: 14px; height: 100%; grid-template-rows: auto 1fr; }
.plan-goal { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: 12px; background: linear-gradient(90deg, rgba(2,151,222,.25), rgba(252,115,77,.2)); border: 1px solid rgba(255,255,255,.08); }
.plan-goal .s-label { margin: 0; color: #9AD8F7; }
.plan-goal p { font-weight: 600; }
.plan-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.plan-col { background: var(--app-2); border: 1px solid var(--app-line); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.topic { display: block; font-size: .8rem; line-height: 1.35; padding: 9px 10px; border-radius: 9px; }
.t-or { background: rgba(252,115,77,.13); color: #FFB29C; }
.t-bl { background: rgba(2,151,222,.14); color: #7FD0F5; }
.t-gr { background: rgba(31,199,126,.13); color: #7FEBB8; }
.t-vi { background: rgba(2,151,222,.16); color: #9AD8F7; }
/* 02 record */
.rec-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; height: 100%; }
.rec-card { background: radial-gradient(120% 100% at 50% 100%, rgba(252,115,77,.2), transparent 60%), var(--app-2); border: 1px solid var(--app-line); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; justify-content: space-between; }
.rec-top { display: flex; align-items: center; gap: 8px; }
.rec-top .js-rec-time { margin-left: auto; }
.rec-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); animation: pulse 1.2s ease-in-out infinite; }
.wave { display: flex; align-items: center; gap: 3px; height: 150px; }
.wave i { flex: 1; height: 100%; border-radius: 3px; background: linear-gradient(180deg, var(--amber), var(--accent)); transform: scaleY(var(--s, .2)); opacity: .9; }
.panel.is-active .wave i { animation: wave var(--wd, 900ms) var(--ease-in-out) var(--wdl, 0ms) infinite alternate; }
@keyframes wave { from { transform: scaleY(.08); } to { transform: scaleY(var(--s, .6)); } }
.guide { background: var(--app-2); border: 1px solid var(--app-line); border-radius: 14px; padding: 16px; }
.guide__list { display: grid; gap: 6px; counter-reset: g; }
.guide__list li { counter-increment: g; display: grid; grid-template-columns: 26px 1fr; padding: 9px 10px; border-radius: 9px; font-size: .84rem; color: var(--app-dim); }
.guide__list li::before { content: counter(g, decimal-leading-zero); font-family: var(--font-mono); font-size: .72rem; color: #5D6379; padding-top: 2px; }
.panel.is-active .guide__list li { animation: qhl 5.6s ease both; }
.panel.is-active .guide__list li:nth-child(2) { animation-delay: 1.3s; }
.panel.is-active .guide__list li:nth-child(3) { animation-delay: 2.6s; }
.panel.is-active .guide__list li:nth-child(4) { animation-delay: 3.9s; }
@keyframes qhl { 0%, 22% { background: rgba(255,255,255,.07); color: #fff; } 30%, 100% { background: transparent; color: var(--app-dim); } }
/* 03 frame */
.frame-grid { display: grid; grid-template-rows: auto 1fr; gap: 16px; height: 100%; }
.timeline__track { position: relative; height: 46px; border-radius: 10px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 2px, transparent 2px 6px), var(--app-2); border: 1px solid var(--app-line); overflow: hidden; }
.seg { position: absolute; top: 6px; bottom: 6px; left: var(--l); width: var(--w); border-radius: 6px; background: linear-gradient(90deg, var(--accent), var(--amber)); box-shadow: 0 0 18px rgba(252,115,77,.5); transform: scaleX(0); transform-origin: left; }
.panel.is-active .seg { animation: segin 500ms var(--ease-out) var(--d) forwards; }
@keyframes segin { to { transform: scaleX(1); } }
.playhead { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: #fff; box-shadow: 0 0 10px #fff; }
.panel.is-active .playhead { animation: play 4.5s linear forwards; }
@keyframes play { to { transform: translateX(var(--track-w, 800px)); } }
.timeline__ticks { display: flex; justify-content: space-between; margin-top: 6px; }
.phones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; justify-items: center; min-height: 0; }
.phone { position: relative; height: 100%; max-height: 236px; aspect-ratio: 9/16; border-radius: 16px; padding: 10px; display: flex; flex-direction: column; justify-content: flex-end; border: 1px solid rgba(255,255,255,.12); overflow: hidden; }
.js .phone { opacity: 0; }
.panel.is-active .phone { animation: popin 650ms var(--ease-out) forwards; }
.panel.is-active .ph-a { animation-delay: .9s; }
.panel.is-active .ph-b { animation-delay: 2.1s; }
.panel.is-active .ph-c { animation-delay: 2.8s; }
.ph-a { background: linear-gradient(170deg, #0B4E7A, #02070A 75%); }
.ph-b { background: linear-gradient(170deg, #8A3A22, #02070A 75%); }
.ph-c { background: linear-gradient(170deg, #0A3550, #02070A 75%); }
.phone__tag { position: absolute; top: 9px; left: 9px; font-size: .62rem; padding: 3px 7px; border-radius: 6px; background: rgba(0,0,0,.35); color: #fff; }
.cap { font-size: .78rem; font-weight: 700; line-height: 1.35; text-align: center; margin-bottom: 18%; }
.cap b { color: rgba(255,255,255,.35); border-radius: 4px; }
.panel.is-active .cap b { animation: word 250ms ease forwards; }
.panel.is-active .ph-a .cap b { animation-delay: calc(1.4s + var(--w, 0) * 220ms); }
.panel.is-active .ph-b .cap b { animation-delay: calc(2.6s + var(--w, 0) * 220ms); }
.panel.is-active .ph-c .cap b { animation-delay: calc(3.3s + var(--w, 0) * 220ms); }
@keyframes word { to { color: #fff; } }
.cap b.hl { padding: 0 3px; }
.panel.is-active .cap b.hl { animation-name: wordhl; }
@keyframes wordhl { to { color: var(--ink); background: var(--amber); } }
/* 04 write */
.write-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 14px; height: 100%; }
.post-mock { background: #fff; color: var(--ink); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.post-mock .s-strong { color: var(--ink); }
.post-mock__head { display: flex; align-items: center; gap: 10px; }
.typed { font-size: .86rem; line-height: 1.5; white-space: pre-line; min-height: 8.5em; }
.typed::after { content: ""; display: inline-block; width: 2px; height: 1em; background: var(--accent); vertical-align: -2px; margin-left: 1px; animation: caret 1s steps(2, start) infinite; }
@keyframes caret { to { visibility: hidden; } }
.post-mock__media { flex: 1; min-height: 60px; border-radius: 10px; background: linear-gradient(135deg, #0B4E7A, #0297DE 55%, #FC734D); display: grid; place-items: center; }
.write-side { background: var(--app-2); border: 1px solid var(--app-line); border-radius: 14px; padding: 16px; }
.plat-list { display: grid; gap: 4px; }
.plat-list li { display: flex; align-items: center; gap: 10px; padding: 10px 6px; font-size: .86rem; border-bottom: 1px solid var(--app-line); }
.plat-list li:last-child { border-bottom: 0; }
.pdot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); flex: none; }
.ok { margin-left: auto; font-family: var(--font-mono); font-size: .68rem; padding: 3px 8px; border-radius: 6px; background: rgba(31,199,126,.12); color: #6DF0B5; }
.js .ok { opacity: 0; }
.panel.is-active .ok { animation: popin 400ms var(--ease-out) forwards; }
.panel.is-active .plat-list li:nth-child(1) .ok { animation-delay: 1.2s; }
.panel.is-active .plat-list li:nth-child(2) .ok { animation-delay: 1.9s; }
.panel.is-active .plat-list li:nth-child(3) .ok { animation-delay: 2.6s; }
.panel.is-active .plat-list li:nth-child(4) .ok { animation-delay: 3.3s; }
.panel.is-active .plat-list li:nth-child(5) .ok { animation-delay: 4s; }
/* 05 ship */
.ship-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; height: 100%; }
.cal { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.cal__day { background: var(--app-2); border: 1px solid var(--app-line); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.cal__post { font-size: .72rem; line-height: 1.3; padding: 8px; border-radius: 8px; background: color-mix(in srgb, var(--c) 16%, transparent); border-left: 2px solid var(--c); color: #E6E8F0; }
.report-mini { background: radial-gradient(120% 90% at 100% 100%, rgba(2,151,222,.3), transparent 60%), var(--app-2); border: 1px solid var(--app-line); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.report-mini__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.chart { flex: 1; display: flex; align-items: flex-end; gap: 6px; min-height: 80px; }
.chart i { flex: 1; height: var(--h); border-radius: 4px 4px 0 0; background: rgba(255,255,255,.18); transform-origin: bottom; }
.js .chart i { transform: scaleY(0); }
.chart i:last-child { background: linear-gradient(180deg, var(--amber), var(--accent)); }
.panel.is-active .chart i { animation: grow 700ms var(--ease-out) forwards; animation-delay: calc(900ms + var(--k, 0) * 80ms); }
@keyframes grow { to { transform: scaleY(1); } }
.studio__caption { max-width: 640px; margin: 28px auto 0; text-align: center; color: var(--ink-2); font-size: .98rem; }
.studio__caption b { color: var(--ink); }
/* ---------- proof numbers ---------- */
.proof { padding: clamp(56px, 8vw, 96px) 0 clamp(32px, 5vw, 56px); }
.proof__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.proof__item { display: flex; flex-direction: column; gap: 6px; padding: 8px 24px; border-left: 1px solid var(--line-2); }
.proof__item:first-child { border-left: 0; padding-left: 0; }
.proof__n { font-size: clamp(2.6rem, 5vw, 4rem); font-weight: 600; letter-spacing: -0.045em; line-height: 1; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.proof__l { color: var(--muted); font-size: .95rem; }
/* ---------- colour through the rest of the page ---------- */
.section--tint { background: linear-gradient(180deg, #F3F8FB 0%, #F7F9FB 100%); }
.flow__n { color: var(--indigo); }
.bento__item--wide:first-child { background: radial-gradient(90% 120% at 100% 0%, rgba(2,151,222,.35), transparent 60%), radial-gradient(80% 100% at 0% 100%, rgba(252,115,77,.28), transparent 60%), var(--night); color: #fff; border-color: transparent; }
.bento__item--wide:first-child .muted { color: rgba(255,255,255,.7); }
.bento__item--wide:first-child .hook__row:first-child { background: rgba(255,255,255,.07); }
.bento__item--wide:first-child .hook__row:first-child p { color: rgba(255,255,255,.5); }
.bento__item--wide:first-child .hook__row--after { background: #fff; color: var(--ink); }
.bento__item--full { background: linear-gradient(100deg, #EEF7FC, #FFF1EC); border-color: transparent; }
.chip--hot { background: var(--grad-brand); border-color: transparent; }
.compare .us { background: linear-gradient(180deg, #EEF7FC, #FFF2ED); }
.compare th.us { color: var(--indigo); }
.plan-card--featured { border: 2px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad-brand) border-box; }
.plan-card__badge { background: var(--grad-brand); }
.founding { border-color: var(--indigo); background: linear-gradient(100deg, #F1F8FC, #FFF4F0); }
.final { background: radial-gradient(70% 90% at 50% 120%, rgba(252,115,77,.75), transparent 60%), radial-gradient(60% 80% at 0% 0%, rgba(2,151,222,.45), transparent 60%), radial-gradient(60% 80% at 100% 10%, rgba(2,151,222,.45), transparent 60%), var(--night); }
.final .btn--accent { background: #fff; color: var(--ink); box-shadow: 0 10px 30px -10px rgba(0,0,0,.5); }
.h2--light em { background: linear-gradient(90deg, #FFE1CF, #FFB89A); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* ---------- studio scroll-in (Apple-style) ---------- */
@supports (animation-timeline: view()) {
@keyframes studio-in { from { transform: perspective(1400px) rotateX(10deg) scale(.94); } to { transform: none; } }
.studio { animation: studio-in linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; transform-origin: 50% 0%; }
}
/* ---------- responsive ---------- */
@media (max-width: 980px) {
.studio__body { grid-template-columns: 1fr; }
.studio__side { display: none; }
.proof__grid { grid-template-columns: 1fr 1fr; gap: 28px 0; }
.proof__item:nth-child(3) { border-left: 0; padding-left: 0; }
}
@media (max-width: 860px) {
.nav__links { display: none; }
}
@media (max-width: 700px) {
.studio__main { padding: 14px; }
.studio__url { display: none; }
.studio__live { margin-left: auto; }
.tabs { display: flex; overflow-x: auto; scrollbar-width: none; gap: 2px; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: 0 0 auto; padding-right: 14px; }
.panels { height: 360px; }
.plan-cols { grid-template-columns: 1fr 1fr; }
.plan-col:nth-child(n+3) { display: none; }
.rec-grid, .write-grid, .ship-grid { grid-template-columns: 1fr; }
.guide, .write-side, .report-mini { display: none; }
.cal { grid-template-columns: repeat(3, 1fr); }
.cal__day:nth-child(n+4) { display: none; }
.studio__head .chip-status { display: none; }
}
/* ---------- reduced motion for v2 ---------- */
@media (prefers-reduced-motion: reduce) {
.mesh__blob, .chip-status i, .rec-dot, .typed::after { animation: none !important; }
.studio { animation: none !important; }
.panel { transform: none !important; transition: opacity 200ms ease; }
.panel.is-active .pi, .panel.is-active .phone, .panel.is-active .ok, .panel.is-active .seg, .panel.is-active .chart i, .panel.is-active .cap b, .panel.is-active .guide__list li, .panel.is-active .playhead, .panel.is-active .wave i { animation: none !important; opacity: 1; transform: none; }
.panel.is-active .cap b { color: #fff; }
.tab__bar i { display: none; }
}
@media (max-width: 600px) {
.pill { font-size: .78rem; white-space: nowrap; gap: 8px; }
.hero__facts { font-size: .8rem; gap: 6px 14px; }
}
/* ---------- palette: Midnight Black / Electric Blue / Cantaloupe Orange ---------- */
/* vertical light beams over the hero (FluxEdit-style light rays) */
.mesh::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background:
radial-gradient(40% 55% at 50% 100%, rgba(2,151,222,.55), transparent 70%),
repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 6px);
-webkit-mask-image: radial-gradient(70% 80% at 50% 95%, #000 30%, transparent 75%);
mask-image: radial-gradient(70% 80% at 50% 95%, #000 30%, transparent 75%); }
.mesh::after { content: ""; position: absolute; left: 50%; bottom: -8%; width: 70vw; height: 46vw; transform: translateX(-50%); z-index: 1; pointer-events: none;
background: radial-gradient(closest-side, rgba(252,115,77,.85), rgba(252,115,77,.35) 45%, transparent 75%); filter: saturate(1.1); }
.mesh__grain { z-index: 2; }
.display--hero em { background: linear-gradient(90deg, #FFC2AF, #FC734D); -webkit-background-clip: text; background-clip: text; }
.h2--light em { background: linear-gradient(90deg, #FFC2AF, #FC734D); -webkit-background-clip: text; background-clip: text; }
.pill--glass .pill__tag { color: #C2492A; }
.hero__facts li::before { background: var(--accent); box-shadow: 0 0 0 3px rgba(252,115,77,.25); }
.studio { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.22); }
.studio__url, .studio__live { color: #0B1A24; }
.studio__url { background: rgba(255,255,255,.7); }
.studio__live { color: #fff; }
.tab__bar i, .seg, .wave i, .chart i:last-child { background: linear-gradient(90deg, #0297DE, #FC734D); }
.wave i { background: linear-gradient(180deg, #FC734D, #0297DE); }
.chart i:last-child { background: linear-gradient(180deg, #FC734D, #0297DE); }
.seg { box-shadow: 0 0 18px rgba(252,115,77,.45); }
.panel.is-active .cap b.hl { animation-name: wordhl; }
@keyframes wordhl { to { color: #02070A; background: #FC734D; } }
.plan-goal { background: linear-gradient(90deg, rgba(2,151,222,.25), rgba(252,115,77,.22)); }
.post-mock__media { background: linear-gradient(135deg, #034D7C, #0297DE 55%, #FC734D); }
.final { background: radial-gradient(70% 90% at 50% 120%, rgba(252,115,77,.8), transparent 60%), radial-gradient(60% 80% at 0% 0%, rgba(2,151,222,.45), transparent 60%), radial-gradient(60% 80% at 100% 10%, rgba(2,151,222,.3), transparent 60%), var(--night); }
.marquee-wrap, .proof { background: var(--bg); }
/* =====================================================
v3 — lower page matched to the hero (runads-style:
light canvas, dark product cards, one accent)
===================================================== */
/* solid accents instead of blue→orange text gradients (they read purple) */
.proof__n { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--ink); }
.proof__n .js-count { color: var(--ink); }
.proof__item { border-left-color: var(--line); }
.chip--hot { background: var(--ink); color: #fff; border-color: var(--ink); }
.plan-card--featured { border: 2px solid var(--ink); background: var(--surface); box-shadow: 0 30px 70px -30px rgba(2,7,10,.35); }
.plan-card__badge { background: var(--accent); }
.avatar--grad { background: linear-gradient(135deg, #0297DE, #034D7C); }
.flow__n { color: var(--accent); }
/* ticks: brand blue, not green */
.ticks li::before { background: #E3F3FB; }
.ticks li::after { border-color: #0297DE; }
/* "How it works" mockups become dark app cards, same as the Studio window */
.flow__card { background: var(--app); border-color: var(--app-line); color: var(--app-text);
box-shadow: 0 40px 80px -40px rgba(2,7,10,.55), 0 0 0 1px rgba(2,7,10,.04); }
.flow__card .muted, .flow__card > .mono:first-child { color: var(--app-dim); }
.flow__card .plan li, .flow__card .clips li { border-bottom-color: var(--app-line); }
.flow__card .tag--a { background: rgba(252,115,77,.14); color: #FFB29C; }
.flow__card .tag--b { background: rgba(2,151,222,.18); color: #7FD0F5; }
.flow__card .tag--c { background: rgba(31,199,126,.13); color: #7FEBB8; }
.flow__card .qs li::before { color: #5D6B77; }
.flow__card .clips li .mono { color: var(--app-dim); }
.flow__card .clips .grade { background: rgba(31,199,126,.12); color: #6DF0B5; }
.flow__card .clips .cut .grade { background: rgba(255,255,255,.06); color: var(--app-dim); }
.flow__card.post .avatar { background: linear-gradient(135deg, #0297DE, #034D7C); }
.flow__card .post__media { background: linear-gradient(135deg, #034D7C, #0297DE 55%, #FC734D); }
.flow__card .report__n { color: #fff; }
.flow__card .bars i { background: rgba(255,255,255,.16); opacity: 1; }
.flow__card .bars i:last-child { background: linear-gradient(180deg, #FC734D, #0297DE); }
/* comparison table: brand blue column */
.compare .us { background: #EEF7FC; }
.compare th.us { color: #0277B0; }
.compare td.us { color: #0277B0; font-weight: 600; }
/* bento: light cards + one dark hero card (no pastel washes) */
.bento__item--full { background: var(--surface); border: 1px solid var(--line); }
/* work reels: same midnight + light-leak look as the Studio phones */
.reel__frame { background: radial-gradient(120% 70% at 50% 0%, rgba(2,151,222,.45), transparent 65%), #050C12; }
.reel__frame--a { background: radial-gradient(120% 70% at 50% 0%, rgba(252,115,77,.5), transparent 65%), #050C12; }
.reel__frame--b { background: radial-gradient(120% 70% at 50% 0%, rgba(2,151,222,.55), transparent 65%), #050C12; }
.reel__frame--c { background: radial-gradient(90% 60% at 0% 0%, rgba(2,151,222,.4), transparent 65%), radial-gradient(90% 60% at 100% 100%, rgba(252,115,77,.35), transparent 65%), #050C12; }
.reel:first-child .reel__frame { background: repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 6px), linear-gradient(180deg, #17242F, #0A141C); }
/* founding offer: clean white card, blue dashed frame */
.founding { background: var(--surface); border-color: #0297DE; }
.founding .eyebrow--accent { color: #0277B0; }
/* calculator: keep dark result panel aligned to hero light-leak */
/* ---------- Record tab: blurred two-person podcast video ---------- */
.rec-card--video { position: relative; padding: 0; overflow: hidden; background: #05090D; }
.rec-video { position: absolute; inset: 0; width: 100%; height: 100%; transform: scale(1.06); }
.rv-person { transform-box: fill-box; transform-origin: 50% 100%; }
.panel.is-active .rv-left { animation: talkL 3.2s var(--ease-in-out) infinite alternate; }
.panel.is-active .rv-right { animation: talkR 2.7s var(--ease-in-out) -1.2s infinite alternate; }
@keyframes talkL { 0% { transform: rotate(-1.2deg) translateY(0); } 50% { transform: rotate(0.8deg) translateY(-3px); } 100% { transform: rotate(-0.4deg) translateY(1px); } }
@keyframes talkR { 0% { transform: rotate(1deg); } 60% { transform: rotate(-1.4deg) translateY(-2px); } 100% { transform: rotate(0.3deg); } }
.rec-ui { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 16px 18px;
background: linear-gradient(180deg, rgba(2,7,10,.45) 0%, transparent 28%, transparent 55%, rgba(2,7,10,.8) 100%); }
.rec-ui .rec-top { color: #fff; }
.rec-cam { margin-left: 10px; opacity: .75; }
.rec-ui .js-rec-time { margin-left: auto; color: #fff; }
.rec-bottom { display: grid; gap: 8px; }
.rec-card--video .wave { height: 46px; }
.rec-note { color: rgba(255,255,255,.75); }
.vf { position: absolute; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.7); }
.vf--tl { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.vf--tr { top: 8px; right: 8px; border-left: 0; border-bottom: 0; }
.vf--bl { bottom: 8px; left: 8px; border-right: 0; border-top: 0; }
.vf--br { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }
@media (prefers-reduced-motion: reduce) { .panel.is-active .rv-person { animation: none; } }
/* ---------- logo v2 ---------- */
.logo__mark, .logo--light .logo__mark, .nav.on-dark .logo__mark { background: none; width: 32px; height: 32px; border-radius: 9px; }
.logo__mark svg { width: 32px; height: 32px; display: block; }
.nav.on-dark .logo__mark { box-shadow: 0 0 0 1px rgba(255,255,255,.22); }
.footer .logo__mark { box-shadow: 0 0 0 1px rgba(255,255,255,.14); }
.logo__word { font-weight: 600; letter-spacing: -0.025em; font-size: 1.12rem; }
.logo__word em { font-size: 1.12em; letter-spacing: -0.01em; }
.nav.on-dark .logo__word em { color: #FFC2AF; }
.footer .logo__word em { color: #FFC2AF; }
@media (hover: hover) and (pointer: fine) {
.logo__mark svg path:last-child { transition: transform 400ms var(--ease-out); transform-origin: 23.5px 23px; }
.logo:hover .logo__mark svg path:last-child { transform: translate(1px, 1px); }
}
/* =====================================================
BOOKER — inline weekly booking calendar (final CTA)
===================================================== */
.frame--cta { max-width: 980px; }
.final .lead--light { margin-bottom: 32px; }
.booker { position: relative; text-align: left; padding: 18px; border-radius: 20px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 40px 100px -40px rgba(0,0,0,.6); }
.booker__head { display: flex; align-items: center; gap: 12px; padding: 2px 2px 16px; border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom: 16px; }
.booker__title { flex: 1; text-align: center; }
.booker__range { font-weight: 600; font-size: 1.02rem; color: #fff; }
.booker__tz { font-size: .7rem; color: rgba(255,255,255,.55); margin-top: 3px; letter-spacing: .02em; }
.booker__nav { width: 38px; height: 38px; flex: none; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: #fff; font-size: 1.3rem; line-height: 1;
transition: background-color 200ms ease, border-color 200ms ease, opacity 200ms ease, transform 160ms var(--ease-out); }
.booker__nav:active { transform: scale(.94); }
.booker__nav:disabled { opacity: .3; cursor: default; }
@media (hover: hover) and (pointer: fine) { .booker__nav:not(:disabled):hover { border-color: #0297DE; background: rgba(2,151,222,.15); } }
.booker__days { display: none; }
.booker__grid { display: grid; grid-template-columns: repeat(var(--cols, 5), 1fr); grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; position: relative; }
.bk-col { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.bk-col__head { font-size: .78rem; color: rgba(255,255,255,.6); text-align: center; padding-bottom: 4px; }
.bk-col__head span { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .08em; font-size: .68rem; margin-right: 2px; color: rgba(255,255,255,.85); }
.bk-col__slots { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent; padding-right: 2px; }
.bk-slot { border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.08); color: #fff; border-radius: 10px; padding: 9px 6px; font-size: .86rem; font-weight: 500; font-variant-numeric: tabular-nums;
transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, transform 160ms var(--ease-out);
animation: popin 500ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 30ms); }
.bk-slot:active { transform: scale(.96); }
@media (hover: hover) and (pointer: fine) { .bk-slot:hover { border-color: #0297DE; background: rgba(2,151,222,.18); } }
.bk-slot.is-picked { background: #FC734D; border-color: #FC734D; color: #02070A; font-weight: 600; }
.bk-none { text-align: center; color: rgba(255,255,255,.3); padding: 8px 0; }
.bk-empty { grid-column: 1 / -1; grid-row: 2; text-align: center; font-size: .85rem; color: rgba(255,255,255,.6); }
.bk-col--loading span { display: block; height: 36px; border-radius: 10px; background: linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.1), rgba(255,255,255,.05)); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
.bk-col--loading span:first-child { height: 16px; width: 50%; margin: 0 auto 4px; }
@keyframes shimmer { to { background-position: -200% 0; } }
/* form */
.booker__form { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.1); display: grid; gap: 14px; animation: formin 450ms var(--ease-out); }
@keyframes formin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.booker__picked { display: flex; align-items: center; gap: 10px; font-weight: 600; color: #fff; }
.booker__picked-dot { width: 8px; height: 8px; border-radius: 50%; background: #FC734D; box-shadow: 0 0 0 4px rgba(252,115,77,.2); flex: none; }
.booker__change { margin-left: auto; background: none; border: 0; color: rgba(255,255,255,.65); font-size: .85rem; text-decoration: underline; text-underline-offset: 3px; }
.booker__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.booker__fields label { display: grid; gap: 6px; font-size: .8rem; color: rgba(255,255,255,.7); }
.booker__fields label i { font-style: normal; color: rgba(255,255,255,.4); }
.booker__wide { grid-column: 1 / -1; }
.booker__fields input { height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.16); background: rgba(2,7,10,.55); color: #fff; font: inherit; font-size: 16px;
transition: border-color 200ms ease, box-shadow 200ms ease; }
.booker__fields input::placeholder { color: rgba(255,255,255,.3); }
.booker__fields input:focus { outline: none; border-color: #0297DE; box-shadow: 0 0 0 3px rgba(2,151,222,.25); }
.booker__form .btn--white { height: 50px; }
.booker__form .btn--white:disabled { opacity: .7; }
.booker__error { color: #FFB29C; font-size: .86rem; }
/* done */
.booker__done { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 28px 12px 18px; margin-top: 16px; border-top: 1px solid rgba(255,255,255,.1); animation: formin 500ms var(--ease-out); outline: none; }
.booker.is-done .booker__grid, .booker.is-done .booker__head, .booker.is-done .booker__days { display: none; }
.booker.is-done .booker__done { border-top: 0; margin-top: 0; }
.booker__check { width: 52px; height: 52px; border-radius: 50%; background: #FC734D; position: relative; animation: popcheck 500ms var(--ease-out); }
.booker__check::after { content: ""; position: absolute; left: 19px; top: 13px; width: 11px; height: 21px; border: solid #02070A; border-width: 0 3px 3px 0; transform: rotate(45deg); }
@keyframes popcheck { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.booker__done-title { font-size: 1.4rem; font-weight: 600; color: #fff; }
.booker__done-sub { color: rgba(255,255,255,.7); max-width: 44ch; }
/* offer line */
.offer { margin: 26px auto 0; max-width: 560px; font-size: 1.08rem; color: rgba(255,255,255,.85); line-height: 1.5; }
/* mobile: day chips + one column */
@media (max-width: 700px) {
.booker { padding: 14px; }
.booker__days { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-bottom: 14px; padding-bottom: 2px; }
.booker__days::-webkit-scrollbar { display: none; }
.bk-day { flex: 0 0 auto; display: grid; justify-items: center; gap: 2px; min-width: 58px; padding: 8px 10px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: #fff;
transition: background-color 200ms ease, border-color 200ms ease; }
.bk-day:disabled { opacity: .35; }
.bk-day.is-on { background: #fff; color: #02070A; border-color: #fff; }
.bk-day__wd { font-family: var(--font-mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; }
.bk-day__d { font-weight: 600; font-size: 1.05rem; }
.booker__grid { display: block; }
.bk-col { display: none; }
.bk-col.is-day { display: block; }
.bk-col__head { display: none; }
.bk-col__slots { display: grid; grid-template-columns: repeat(3, 1fr); max-height: none; }
.booker__fields { grid-template-columns: 1fr; }
.bk-empty { position: static; margin-top: 10px; }
}
@media (prefers-reduced-motion: reduce) {
.bk-slot, .booker__form, .booker__done, .booker__check { animation: none; }
.bk-col--loading span { animation: none; }
}
/* booker fixes */
.booker [hidden] { display: none !important; }
.bk-col__slots { max-height: none; overflow: visible; }
@media (max-width: 700px) {
.booker__range { font-size: .92rem; }
.booker__tz { font-size: .64rem; }
}
.lead--light.offer { margin: 20px auto 32px; max-width: 46ch; font-size: clamp(1.05rem, 1.6vw, 1.2rem); }
/* =====================================================
BOOKER v2 — bigger, airier, in the palette
===================================================== */
.frame--cta { max-width: 1180px; }
.booker { padding: clamp(18px, 3vw, 32px); border-radius: 28px;
background:
radial-gradient(80% 60% at 0% 0%, rgba(2,151,222,.22), transparent 60%),
radial-gradient(70% 60% at 100% 100%, rgba(252,115,77,.18), transparent 60%),
rgba(5,12,18,.72);
border: 1px solid rgba(127,208,245,.22);
box-shadow: 0 50px 120px -40px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.08); }
/* header */
.booker__head { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 16px; padding: 0 0 22px; margin-bottom: 24px; border-bottom: 1px solid rgba(127,208,245,.16); }
.booker__head > [data-week="-1"] { order: 0; }
.booker__title { order: 1; text-align: left; }
.booker__left { order: 2; }
.booker__head > [data-week="1"] { order: 3; }
.booker__range { font-size: clamp(1.15rem, 2vw, 1.45rem); font-weight: 600; letter-spacing: -0.02em; }
.booker__tz { font-size: .74rem; color: #7FD0F5; margin-top: 4px; }
.booker__nav { width: 46px; height: 46px; font-size: 1.5rem; border-color: rgba(127,208,245,.3); background: rgba(2,151,222,.12); }
@media (hover: hover) and (pointer: fine) { .booker__nav:not(:disabled):hover { background: rgba(2,151,222,.3); border-color: #0297DE; } }
.booker__left { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: rgba(252,115,77,.14); border: 1px solid rgba(252,115,77,.45); color: #FFD0C2; font-size: .9rem; white-space: nowrap; }
.booker__left b { color: #FC734D; font-weight: 700; }
.booker__left i { width: 8px; height: 8px; border-radius: 50%; background: #FC734D; box-shadow: 0 0 0 0 rgba(252,115,77,.6); animation: leftpulse 1.8s var(--ease-out) infinite; }
@keyframes leftpulse { 70% { box-shadow: 0 0 0 8px rgba(252,115,77,0); } 100% { box-shadow: 0 0 0 0 rgba(252,115,77,0); } }
.booker__left.is-none { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.15); color: rgba(255,255,255,.6); }
.booker__left.is-none i { background: rgba(255,255,255,.4); animation: none; }
/* day columns as cards */
.booker__grid { gap: 14px; }
.bk-col { gap: 12px; padding: 18px 14px 16px; border-radius: 20px; background: rgba(255,255,255,.035); border: 1px solid rgba(127,208,245,.12); min-height: 230px; }
.bk-col.is-empty { background: transparent; border-style: dashed; border-color: rgba(255,255,255,.1); }
.bk-col__head { display: grid; justify-items: center; gap: 0; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid rgba(127,208,245,.12); }
.bk-wd { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: #7FD0F5; }
.bk-dn { font-size: 2.1rem; font-weight: 600; letter-spacing: -0.04em; line-height: 1.05; color: #fff; }
.bk-mo { font-size: .76rem; color: rgba(255,255,255,.5); }
.bk-col.is-empty .bk-wd, .bk-col.is-empty .bk-dn { color: rgba(255,255,255,.3); }
.bk-col__slots { gap: 10px; }
.bk-slot { display: grid; gap: 2px; justify-items: center; padding: 13px 8px; border-radius: 14px;
background: linear-gradient(180deg, rgba(2,151,222,.22), rgba(2,151,222,.1)); border: 1px solid rgba(127,208,245,.32); }
.bk-slot__t { font-size: 1.08rem; font-weight: 600; letter-spacing: -0.01em; }
.bk-slot__d { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .06em; color: #9AD8F7; }
@media (hover: hover) and (pointer: fine) {
.bk-slot:hover { background: linear-gradient(180deg, rgba(2,151,222,.4), rgba(2,151,222,.2)); border-color: #7FD0F5; transform: translateY(-1px); }
}
.bk-slot.is-picked { background: #FC734D; border-color: #FC734D; color: #02070A; box-shadow: 0 10px 30px -8px rgba(252,115,77,.7); }
.bk-slot.is-picked .bk-slot__d { color: rgba(2,7,10,.7); }
.bk-none { margin: auto 0; padding: 18px 0; font-size: .82rem; color: rgba(255,255,255,.3); }
.bk-col--loading { min-height: 230px; }
.bk-col--loading span { height: 52px; border-radius: 14px; }
/* form + done in the palette */
.booker__form { margin-top: 24px; padding-top: 24px; border-top-color: rgba(127,208,245,.16); gap: 18px; }
.booker__picked { font-size: 1.1rem; }
.booker__fields { gap: 16px; }
.booker__fields label { font-size: .86rem; }
.booker__fields input { height: 52px; border-radius: 14px; border-color: rgba(127,208,245,.22); background: rgba(2,7,10,.6); }
.booker__form .btn--white { height: 56px; font-size: 1.02rem; background: #FC734D; color: #02070A; box-shadow: 0 14px 34px -12px rgba(252,115,77,.7); }
.booker__form .btn--white:hover { background: #FF8562; }
.booker__check { background: linear-gradient(135deg, #FC734D, #FF9A7B); }
@media (max-width: 980px) {
.booker__head { grid-template-columns: auto 1fr auto; }
.booker__left { grid-column: 1 / -1; order: 4; justify-self: center; }
}
@media (max-width: 700px) {
.booker { padding: 16px; border-radius: 22px; }
.booker__head { gap: 10px; padding-bottom: 16px; margin-bottom: 16px; }
.booker__title { text-align: center; }
.bk-day { min-width: 64px; padding: 10px 12px; border-color: rgba(127,208,245,.2); background: rgba(2,151,222,.08); }
.bk-day.is-on { background: #fff; color: #02070A; }
.bk-col, .bk-col.is-day { padding: 0; border: 0; background: none; min-height: 0; }
.bk-col__slots { grid-template-columns: 1fr 1fr; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) { .booker__left i { animation: none; } }
.bk-col__head .bk-wd { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: #7FD0F5; margin: 0; }
.bk-col__head .bk-dn { font-family: var(--font-sans); font-size: 2.1rem; font-weight: 600; letter-spacing: -0.04em; line-height: 1.1; color: #fff; text-transform: none; margin: 2px 0 0; }
.bk-col__head .bk-mo { font-family: var(--font-sans); font-size: .76rem; letter-spacing: 0; text-transform: none; color: rgba(255,255,255,.5); margin: 0; }
.bk-col.is-empty .bk-col__head .bk-wd, .bk-col.is-empty .bk-col__head .bk-dn { color: rgba(255,255,255,.3); }
@media (max-width: 700px) { .bk-col__head { display: none; } }
/* =====================================================
CALCULATOR v2 — smooth custom sliders + motion-blur numbers
===================================================== */
/* track */
/* thumb */
/* numbers: tabular so width never jitters while they roll */
/* warm-up curve */
/* =====================================================
HERO v3 — patterns adapted from the MotionSites library:
liquid glass, two-layer badge, sans + serif headline,
word-by-word blur reveal, icon CTA with glass ring,
viewfinder corner accents
===================================================== */
/* liquid glass: gradient hairline border via mask + inner top highlight */
.lg { position: relative; isolation: isolate; background: rgba(255,255,255,.045); backdrop-filter: blur(12px) saturate(1.4); -webkit-backdrop-filter: blur(12px) saturate(1.4);
box-shadow: inset 0 1px 1px rgba(255,255,255,.14), 0 10px 30px -12px rgba(0,0,0,.35); border-color: transparent !important; }
.lg::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.2px; pointer-events: none; z-index: -1;
background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.08) 38%, rgba(255,255,255,.04) 62%, rgba(127,208,245,.45));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.nav.on-dark .nav__links { position: relative; background: rgba(255,255,255,.045); border-color: transparent; box-shadow: inset 0 1px 1px rgba(255,255,255,.14); }
.nav.on-dark .nav__links::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.2px; pointer-events: none;
background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,.06) 45%, rgba(127,208,245,.35));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.studio { box-shadow: inset 0 1px 1px rgba(255,255,255,.2), 0 40px 120px -30px rgba(2,7,10,.6); }
/* two-layer badge: glass ring outside, solid pill inside */
.pill--duo { padding: 5px 16px 5px 5px; gap: 12px; color: rgba(255,255,255,.9); font-size: .9rem; border-radius: 999px; margin-bottom: 34px; }
.pill--duo .pill__tag { background: rgba(255,255,255,.92); color: #C2492A; box-shadow: 0 2px 10px rgba(0,0,0,.18); padding: 5px 11px; }
/* headline: sans line + big serif italic line */
.display--hero { font-size: clamp(2.5rem, 6.6vw, 5.4rem); line-height: 1; letter-spacing: -0.045em; }
.display--hero .line { display: block; }
.display--hero .line--sans { font-weight: 600; }
.display--hero .line--serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.02em; font-size: 1.22em; line-height: 1; margin-top: .06em; }
.display--hero .line--serif em { font-size: 1em; font-style: italic; background: linear-gradient(90deg, #FFC2AF, #FC734D); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .08em; }
.display--hero .w { display: inline-block; white-space: pre; }
/* viewfinder corners around headline + lead */
.hero__frame { position: relative; padding: clamp(18px, 3vw, 34px) clamp(18px, 4vw, 56px); }
.hf { position: absolute; width: 16px; height: 16px; border: 0 solid rgba(255,255,255,.75); }
.hf--tl { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.hf--tr { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.hf--bl { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.hf--br { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }
.hero__frame .lead--hero { margin-top: 22px; }
/* CTA with circular icon housing, wrapped in a glass ring */
.cta-ring { display: inline-flex; padding: 5px; border-radius: 999px; }
.btn--icon { padding: 0 6px 0 24px; gap: 14px; height: 52px; font-weight: 500; }
.btn__ico { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #FC734D, #FF9A7B); color: #02070A;
box-shadow: 0 4px 14px -4px rgba(252,115,77,.8); transition: transform 300ms var(--ease-out); }
.btn__ico svg { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) { .btn--icon:hover .btn__ico { transform: rotate(45deg); } }
.hero--mesh .hero__ctas { align-items: center; gap: 14px; }
.hero--mesh .btn--glass { height: 52px; padding: 0 22px; background: rgba(255,255,255,.045); }
/* ---------- entrance: words blur in, frame corners draw, rest rises ---------- */
.js .hero__center .display .line { opacity: 1; animation: none; }
@keyframes wordin { from { opacity: 0; filter: blur(12px); transform: translateY(18px); } to { opacity: 1; filter: blur(0); transform: none; } }
.js .display--hero .w { opacity: 0; animation: wordin 900ms var(--ease-out) forwards; animation-delay: calc(160ms + var(--wi, 0) * 70ms); }
.js .hero__center > .pill { opacity: 0; animation: rise 800ms var(--ease-out) 60ms forwards; }
.js .hero__frame .lead--hero { opacity: 0; animation: rise 900ms var(--ease-out) 820ms forwards; }
.js .hero__center > .hero__ctas { opacity: 0; animation: rise 900ms var(--ease-out) 940ms forwards; }
.js .hero__center > .hero__facts { opacity: 0; animation: rise 900ms var(--ease-out) 1040ms forwards; }
@keyframes cornerin { from { opacity: 0; transform: scale(1.6); } to { opacity: 1; transform: none; } }
.js .hf { opacity: 0; animation: cornerin 700ms var(--ease-out) 700ms forwards; }
.hf--tl { transform-origin: top left; } .hf--tr { transform-origin: top right; } .hf--bl { transform-origin: bottom left; } .hf--br { transform-origin: bottom right; }
.js .studio-wrap { animation-delay: 900ms; }
@media (max-width: 600px) {
.hero__frame { padding: 16px 14px; }
.hf { width: 12px; height: 12px; }
.cta-ring { width: 100%; }
.btn--icon { width: 100%; justify-content: space-between; }
.hero--mesh .btn--glass { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
@keyframes wordin { from { opacity: 0; } to { opacity: 1; } }
.js .display--hero .w { animation-duration: 400ms; animation-delay: 0ms; }
.js .hf { animation: none; opacity: 1; }
}
.js .js-words:not(.is-split) { opacity: 0; }
.display--hero .line { text-wrap: balance; }
/* =====================================================
SECTIONS v4 — patterns from the MotionSites library,
adapted to the light lower page
===================================================== */
/* section badges (pill + dot) instead of bare mono labels */
.section__head > .eyebrow, .marquee-wrap > .eyebrow, .section--tight .eyebrow, .badge-pill {
display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px 6px 11px; border-radius: 999px;
background: #fff; border: 1px solid var(--line-2); color: var(--ink-2); font-size: .7rem; letter-spacing: .1em;
box-shadow: 0 1px 2px rgba(2,7,10,.04), 0 6px 16px -10px rgba(2,151,222,.35); }
.section__head > .eyebrow::before, .marquee-wrap > .eyebrow::before, .section--tight .eyebrow::before, .badge-pill::before {
content: ""; width: 6px; height: 6px; border-radius: 50%; background: #FC734D; box-shadow: 0 0 0 3px rgba(252,115,77,.18); }
.marquee-wrap > .eyebrow { display: flex; width: max-content; margin: 0 auto 20px; }
.section--tight .eyebrow { margin-bottom: 18px; }
.final .eyebrow--light { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px 6px 11px; border-radius: 999px; color: rgba(255,255,255,.85);
background: rgba(255,255,255,.06); box-shadow: inset 0 1px 1px rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.16); }
.final .eyebrow--light::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #FC734D; box-shadow: 0 0 0 3px rgba(252,115,77,.25); }
/* section headings: blur-in word by word (like the hero) */
.js .section__head > .h2 { opacity: 1; transform: none; }
.h2--words .w { display: inline-block; white-space: pre; }
.js .h2--words .w { opacity: 0; filter: blur(10px); transform: translateY(16px);
transition: opacity 800ms var(--ease-out), filter 800ms var(--ease-out), transform 900ms var(--ease-out);
transition-delay: calc(80ms + var(--wi, 0) * 55ms); }
.js .section__head.is-in .h2--words .w, .js .h2--words.is-in .w { opacity: 1; filter: blur(0); transform: none; }
/* manifesto: big statement, words lit by scroll */
.manifesto { padding: clamp(80px, 12vw, 150px) 0; background: var(--bg); }
.manifesto__inner { max-width: 1040px; }
.manifesto .badge-pill { margin-bottom: 26px; }
.manifesto__text { font-size: clamp(1.9rem, 4.4vw, 3.5rem); line-height: 1.12; letter-spacing: -0.035em; font-weight: 500; color: var(--ink); }
.manifesto__text em { font-size: 1.08em; letter-spacing: -0.01em; color: #FC734D; }
.manifesto__text .w { display: inline; transition: opacity 120ms linear; }
.js .manifesto__text:not(.is-split) { opacity: .15; }
/* platforms: big serif italic names, dot separators */
.marquee__track { gap: 0; }
.marquee__track span { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(1.7rem, 3vw, 2.4rem); letter-spacing: -0.01em; color: var(--ink); opacity: .78;
display: inline-flex; align-items: center; }
.marquee__track span::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #0297DE; margin: 0 clamp(28px, 4vw, 52px); opacity: .7; }
@keyframes marquee { to { transform: translateX(-50%); } }
/* proof numbers in a gradient-hairline card */
.proof__card { border-radius: 28px; padding: clamp(24px, 4vw, 40px) clamp(20px, 4vw, 44px); border: 1px solid transparent;
background: linear-gradient(#fff, #fff) padding-box, linear-gradient(120deg, rgba(2,151,222,.55), rgba(211,218,225,.6) 45%, rgba(252,115,77,.55)) border-box;
box-shadow: 0 30px 70px -40px rgba(2,151,222,.35); }
.proof__n .js-count { font-variant-numeric: tabular-nums; }
/* cards lift on hover (desktop only). Reveal keeps its stagger on opacity/transform;
the lift uses the independent `translate` property so it reacts instantly. */
.js .bento__item.reveal, .js .plan-card.reveal, .js .flow__card.reveal, .js .reel.reveal {
transition: opacity 900ms var(--ease-out), transform 1100ms var(--ease-out), translate 450ms var(--ease-out), box-shadow 350ms ease;
transition-delay: calc(var(--i, 0) * 70ms), calc(var(--i, 0) * 70ms), 0ms, 0ms; }
.bento__item, .plan-card, .reel { transition: translate 450ms var(--ease-out), box-shadow 350ms ease; }
@media (hover: hover) and (pointer: fine) {
.bento__item:hover, .plan-card:hover { translate: 0 -4px; box-shadow: 0 30px 60px -30px rgba(2,7,10,.28); }
.reel:hover { translate: 0 -6px; }
}
/* featured plan CTA uses the hero's icon button */
.plan-card .btn--icon { justify-content: space-between; padding: 0 6px 0 22px; height: 52px; }
.plan-card .btn--dark .btn__ico { width: 40px; height: 40px; }
@media (prefers-reduced-motion: reduce) {
.js .h2--words .w { filter: none; transform: none; transition: opacity 400ms ease; transition-delay: 0ms; }
.bento__item:hover, .plan-card:hover, .reel:hover { translate: none; }
}
/* fix: hard edge under the hero — let the Studio shadow fade out naturally
(the mesh keeps its own overflow clip; the next section stays transparent) */
.hero--mesh { overflow: visible; padding-bottom: clamp(24px, 4vw, 48px); }
.proof { background: transparent; position: relative; }
.studio-wrap { position: relative; z-index: 1; }
/* no eyebrow labels outside the hero — in-card labels become plain text */
.chips__title { font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 600; letter-spacing: -0.02em; color: var(--ink); margin: 0 auto 22px; max-width: 30ch; }
.founding__tag { font-size: .92rem; font-weight: 600; color: #0277B0; margin-bottom: 8px; }
.proof__note { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); font-size: .82rem; color: var(--muted); }
.proof__n { font-size: clamp(2.2rem, 4.2vw, 3.5rem); }
@media (max-width: 600px) { .proof__n { font-size: 2rem; } .proof__item { padding: 8px 14px; } }
/* =====================================================
RECEIPTS — infinite sliding strip of real analytics screenshots
(constant motion → linear, CSS animation on transform = compositor)
===================================================== */
.receipts { margin-top: clamp(28px, 4vw, 44px); overflow: hidden; padding: 14px 0 36px;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.receipts__track { display: flex; width: max-content; animation: receipts 55s linear infinite; }
.receipt { margin: 0 22px 0 0; flex: none; display: grid; gap: 12px; justify-items: start; }
.receipt__img { height: clamp(220px, 26vw, 320px); padding: 10px; border-radius: 22px; background: #fff; border: 1px solid var(--line);
box-shadow: 0 1px 2px rgba(2,7,10,.04), 0 24px 50px -28px rgba(2,151,222,.45); transition: translate 450ms var(--ease-out), box-shadow 350ms ease; }
.receipt__img img { height: 100%; width: auto; display: block; border-radius: 14px; }
.receipt figcaption { display: inline-flex; align-items: center; gap: 8px; padding-left: 6px; font-size: .9rem; color: var(--muted); }
.receipt figcaption::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #0297DE; }
.receipt figcaption b { color: var(--ink); font-weight: 600; }
@keyframes receipts { to { transform: translate3d(-50%, 0, 0); } }
@media (hover: hover) and (pointer: fine) {
.receipts:hover .receipts__track { animation-play-state: paused; }
.receipt:hover .receipt__img { translate: 0 -6px; box-shadow: 0 1px 2px rgba(2,7,10,.04), 0 34px 60px -28px rgba(2,151,222,.55); }
}
@media (prefers-reduced-motion: reduce) {
.receipts { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-mask-image: none; mask-image: none; padding-inline: var(--gutter); }
.receipts__track { animation: none; }
.receipt { scroll-snap-align: start; }
.receipt[aria-hidden="true"] { display: none; }
}
/* =====================================================
RESULTS — dark showcase: 3D phone deck + rolling metrics
===================================================== */
.results { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: var(--night); padding: clamp(90px, 12vw, 150px) 0 clamp(80px, 11vw, 140px); }
.results__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none;
background: repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 7px);
-webkit-mask-image: radial-gradient(60% 70% at 70% 60%, #000, transparent 75%); mask-image: radial-gradient(60% 70% at 70% 60%, #000, transparent 75%); }
.results__glow { position: absolute; border-radius: 50%; }
.results__glow--a { width: 60vw; height: 60vw; right: -12vw; top: 10%; background: radial-gradient(closest-side, rgba(2,151,222,.35), transparent); }
.results__glow--b { width: 50vw; height: 40vw; right: 5vw; bottom: -18vw; background: radial-gradient(closest-side, rgba(252,115,77,.4), transparent); }
.results__head { max-width: 720px; margin-bottom: clamp(40px, 6vw, 72px); }
.results__head .h2 { font-size: clamp(2.3rem, 5vw, 4rem); }
.results__sub { color: rgba(255,255,255,.65); margin-top: 18px; max-width: 52ch; font-size: 1.05rem; }
.rs { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
/* panel */
.js-rs-fade { transition: opacity 170ms ease, transform 300ms var(--ease-out); }
.js-rs-fade.is-out { opacity: 0; transform: translateY(4px); }
.rs-big { margin-top: 0; }
.rs-big__n { display: flex; align-items: baseline; font-size: clamp(4.5rem, 11vw, 9.5rem); font-weight: 600; letter-spacing: -0.055em; line-height: .9; font-variant-numeric: tabular-nums;
background: linear-gradient(180deg, #fff 30%, #9AD8F7); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rs-big__n .js-rs-big { padding-bottom: .06em; }
.rs-big__u { font-size: .55em; margin-left: .04em; letter-spacing: -0.02em; color: #FC734D; -webkit-text-fill-color: #FC734D; }
.rs-big__l { display: block; margin-top: 10px; font-size: 1.15rem; color: rgba(255,255,255,.75); }
.rs-growth { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; padding: 8px 14px; border-radius: 999px; font-size: .92rem; font-weight: 500;
color: #C9EBFC; background: linear-gradient(100deg, rgba(2,151,222,.22), rgba(2,151,222,.10)); border: 1px solid rgba(57,181,240,.42);
box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 8px 24px -12px rgba(2,151,222,.6); }
.rs-growth__arrow { color: #39B5F0; font-size: .75em; }
.rs-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 34px; border-top: 1px solid rgba(255,255,255,.1); }
.rs-m { display: grid; gap: 4px; padding: 18px 16px 4px 0; }
.rs-m + .rs-m { padding-left: 18px; border-left: 1px solid rgba(255,255,255,.1); }
.rs-m__n { font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 600; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.rs-m__l { font-size: .85rem; color: rgba(255,255,255,.55); }
.rs-controls { display: flex; align-items: center; gap: 14px; margin-top: 34px; }
.rs-arrow { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.05); color: #fff; font-size: 1.4rem; line-height: 1;
transition: background-color 200ms ease, border-color 200ms ease, transform 160ms var(--ease-out); }
.rs-arrow:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) { .rs-arrow:hover { background: rgba(2,151,222,.25); border-color: #0297DE; } }
.rs-segs { flex: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.rs-seg { height: 24px; border: 0; padding: 0; background: none; position: relative; }
.rs-seg::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 3px; background: rgba(255,255,255,.14); }
.rs-seg i { position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 3px; background: linear-gradient(90deg, #0297DE, #FC734D); transform: scaleX(0); transform-origin: left; }
.rs-seg.is-done i { transform: scaleX(1); opacity: .35; }
.rs-seg.is-on i { animation: tabfill var(--rs-ms, 6000ms) linear forwards; }
.rs.is-paused .rs-seg.is-on i { animation-play-state: paused; }
/* deck */
.rs-deck { position: relative; height: clamp(420px, 46vw, 600px); perspective: 1600px; perspective-origin: 50% 45%; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; }
.rs-deck.is-dragging { cursor: grabbing; }
.rs-card { position: absolute; left: 50%; top: 50%; width: clamp(230px, 24vw, 310px); margin: 0; padding: 0; border: 0; background: none; transform-style: preserve-3d;
translate: -50% -50%; transition: transform 700ms var(--ease-drawer), opacity 500ms ease; will-change: transform; }
.rs-deck.is-dragging .rs-card { transition: none; }
.rs-card:focus-visible { outline: none; }
@media (max-width: 900px) {
.rs { grid-template-columns: 1fr; }
.rs-deck { order: -1; height: clamp(380px, 100vw, 470px); }
.rs-card { width: clamp(200px, 56vw, 250px); }
}
@media (prefers-reduced-motion: reduce) {
.rs-card { transition: opacity 200ms ease; }
.js-rs-fade { transition: none; }
}
/* =====================================================
PRICING v2 — segmented toggles, rolling prices,
dark featured card, founding offer with spot meter
===================================================== */
.pricing__toggles { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
.currency { display: none; }
.tgl { position: relative; display: inline-flex; padding: 4px; border-radius: 999px; background: #fff; border: 1px solid var(--line-2); box-shadow: 0 6px 18px -12px rgba(2,151,222,.4); }
.tgl button { position: relative; z-index: 1; border: 0; background: none; padding: 10px 18px; border-radius: 999px; font-size: .92rem; font-weight: 500; color: var(--muted);
display: inline-flex; align-items: center; gap: 8px; transition: color 250ms ease; }
.tgl button[aria-checked="true"] { color: #fff; }
.tgl--sm button { padding: 10px 14px; font-family: var(--font-mono); font-size: .78rem; }
.tgl__thumb { position: absolute; left: 0; top: 4px; bottom: 4px; width: 0; border-radius: 999px; background: var(--ink); box-shadow: 0 6px 14px -6px rgba(2,7,10,.5);
transition: transform 450ms var(--ease-drawer), width 450ms var(--ease-drawer); }
.tgl__save { font-size: .72rem; font-weight: 600; padding: 2px 7px; border-radius: 999px; background: rgba(252,115,77,.15); color: #C2492A; transition: background-color 250ms ease, color 250ms ease; }
.tgl button[aria-checked="true"] .tgl__save { background: #FC734D; color: #02070A; }
.plans { align-items: stretch; gap: 20px; margin-top: 8px; }
.plan-card { padding: 34px 30px 30px; border-radius: 28px; gap: 0; }
.plan-card__top { display: grid; gap: 6px; min-height: 76px; }
.plan-card .h3 { font-size: 1.35rem; }
.plan-card__for { font-size: .92rem; color: var(--muted); }
.price { display: flex; align-items: flex-start; gap: 2px; margin-top: 22px; line-height: 1; }
.price__cur { font-size: 1.5rem; font-weight: 600; margin-top: .3em; color: var(--ink-2); }
.price__n { font-size: clamp(3rem, 4.6vw, 3.8rem); font-weight: 600; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.price__per { align-self: flex-end; margin: 0 0 .5em 4px; font-size: .92rem; color: var(--muted); }
.price__sub { font-size: .84rem; color: var(--muted); margin-top: 10px; min-height: 1.3em; }
.price__value { font-size: .84rem; color: var(--muted); margin-top: 4px; }
.plan-card--featured .price__value { color: rgba(255,255,255,.65); }
.plan-card .btn { margin: 24px 0 26px; }
.plan-card__inc { font-size: .78rem; font-weight: 600; color: var(--ink); margin-bottom: 2px; padding-top: 22px; border-top: 1px solid var(--line); }
.plan-card .ticks { margin-top: 14px; gap: 12px; }
.plan-card .ticks li { font-size: .93rem; }
/* featured: dark, glowing, a step forward */
.plan-card--featured { color: #fff; border: 0 !important; transform-origin: center;
background: radial-gradient(90% 60% at 100% 0%, rgba(2,151,222,.35), transparent 60%), radial-gradient(80% 60% at 0% 100%, rgba(252,115,77,.28), transparent 60%), #050C12 !important;
box-shadow: 0 0 0 1px rgba(127,208,245,.25), 0 40px 90px -30px rgba(2,7,10,.55), 0 0 80px -30px rgba(2,151,222,.5) !important; }
@media (min-width: 981px) { .plan-card--featured { scale: 1.035; z-index: 1; } }
.plan-card--featured .h3, .plan-card--featured .price__n { color: #fff; }
.plan-card--featured .plan-card__for, .plan-card--featured .price__per, .plan-card--featured .price__sub { color: rgba(255,255,255,.65); }
.plan-card--featured .price__cur { color: #FC734D; }
.plan-card--featured .plan-card__inc { color: #fff; border-top-color: rgba(255,255,255,.12); }
.plan-card--featured .ticks li::before { background: rgba(2,151,222,.25); }
.plan-card--featured .ticks li::after { border-color: #7FD0F5; }
.plan-card--featured .plan-card__badge { background: #FC734D; color: #02070A; top: -13px; }
.plan-card--featured .btn--white { box-shadow: 0 14px 30px -14px rgba(0,0,0,.6); }
@media (hover: hover) and (pointer: fine) { .plan-card--featured:hover { box-shadow: 0 0 0 1px rgba(127,208,245,.4), 0 50px 100px -30px rgba(2,7,10,.6), 0 0 100px -30px rgba(2,151,222,.6) !important; } }
/* founding offer */
.founding { margin-top: 28px; padding: clamp(26px, 4vw, 40px); border-radius: 28px; display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; border: 1px solid transparent;
background: linear-gradient(#fff, #fff) padding-box, linear-gradient(120deg, rgba(2,151,222,.6), rgba(211,218,225,.5) 45%, rgba(252,115,77,.6)) border-box;
box-shadow: 0 30px 70px -40px rgba(2,151,222,.4); }
.founding .h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin-bottom: 10px; }
.founding__side { display: grid; justify-items: center; gap: 12px; padding-left: 32px; border-left: 1px solid var(--line); }
.spots { display: flex; gap: 8px; }
.spots__l { font-size: .88rem; color: var(--muted); }
.spots__l b { color: var(--ink); }
.founding .btn--icon { padding: 0 6px 0 22px; height: 52px; }
@media (max-width: 860px) {
.founding { grid-template-columns: 1fr; }
.founding__side { padding: 22px 0 0; border-left: 0; border-top: 1px solid var(--line); justify-items: start; }
}
@media (max-width: 600px) { .pricing__toggles { flex-direction: column; align-items: center; } }
@media (prefers-reduced-motion: reduce) { .tgl__thumb { transition: none; } }
@media (max-width: 980px) { .plan-card--featured { order: 0; } }
/* =====================================================
PERSONAS — "find yourself" selector + dynamic dark card
===================================================== */
.personas .section__head { max-width: 760px; }
.ps { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(20px, 3vw, 36px); align-items: stretch; }
/* list */
.ps-list { display: grid; gap: 10px; align-content: start; }
.ps-item { position: relative; display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 14px; text-align: left; padding: 16px 18px; border-radius: 18px;
border: 1px solid var(--line); background: #fff; color: var(--ink); overflow: hidden;
transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease, box-shadow 300ms ease, transform 160ms var(--ease-out); }
.ps-item:active { transform: scale(.985); }
@media (hover: hover) and (pointer: fine) { .ps-item:not(.is-on):hover { border-color: rgba(2,151,222,.45); box-shadow: 0 10px 30px -18px rgba(2,151,222,.5); } }
.ps-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: #EEF7FC; color: #0277B0; transition: background-color 300ms ease, color 300ms ease; }
.ps-ico svg { width: 22px; height: 22px; }
.ps-item__txt { display: grid; gap: 2px; }
.ps-item__txt b { font-size: 1.02rem; font-weight: 600; letter-spacing: -0.015em; }
.ps-item__txt span { font-size: .84rem; color: var(--muted); transition: color 300ms ease; }
.ps-item.is-on { background: #050C12; border-color: #050C12; color: #fff; box-shadow: 0 24px 50px -24px rgba(2,7,10,.55); }
.ps-item.is-on .ps-ico { background: rgba(252,115,77,.16); color: #FC734D; }
.ps-item.is-on .ps-item__txt span { color: rgba(255,255,255,.6); }
.ps-bar { position: absolute; left: 18px; right: 18px; bottom: 0; height: 2px; background: transparent; overflow: hidden; border-radius: 2px; }
.ps-bar i { position: absolute; inset: 0; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, #0297DE, #FC734D); }
.ps-item.is-on .ps-bar { background: rgba(255,255,255,.1); }
.ps-item.is-on .ps-bar i { animation: tabfill var(--ps-ms, 7000ms) linear forwards; }
.ps.is-paused .ps-item.is-on .ps-bar i { animation-play-state: paused; }
.ps-item:focus-visible { outline: 2px solid #0297DE; outline-offset: 2px; }
/* card */
.ps-card { position: relative; isolation: isolate; overflow: hidden; border-radius: 28px; padding: clamp(24px, 3.4vw, 40px); color: #fff; background: #050C12;
box-shadow: 0 0 0 1px rgba(127,208,245,.18), 0 40px 90px -40px rgba(2,7,10,.6); display: flex; flex-direction: column; }
.ps-card__glow { position: absolute; inset: 0; z-index: -1; pointer-events: none;
background: radial-gradient(70% 60% at 100% 0%, rgba(2,151,222,.32), transparent 60%), radial-gradient(60% 50% at 0% 100%, rgba(252,115,77,.25), transparent 60%),
repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 7px); }
.ps-swap { flex: 1; transition: opacity 180ms ease, transform 350ms var(--ease-out); }
.ps-swap.is-out { opacity: 0; transform: translateY(8px); }
.ps-for { font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: #7FD0F5; }
.ps-pain { font-size: clamp(1.45rem, 2.5vw, 2.05rem); line-height: 1.18; letter-spacing: -0.03em; font-weight: 500; margin-top: 12px; max-width: 30ch; }
.ps-label { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 12px; }
.ps-block { margin-top: 28px; }
.ps-phones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ps-phone { position: relative; aspect-ratio: 9 / 15; border-radius: 18px; padding: 12px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden;
border: 1px solid rgba(255,255,255,.12); box-shadow: 0 20px 40px -20px rgba(0,0,0,.7); }
.ps-phone--a { background: radial-gradient(120% 70% at 50% 0%, rgba(2,151,222,.55), transparent 65%), #0A141C; }
.ps-phone--b { background: radial-gradient(120% 70% at 50% 0%, rgba(252,115,77,.55), transparent 65%), #0A141C; }
.ps-phone--c { background: radial-gradient(90% 60% at 0% 0%, rgba(2,151,222,.45), transparent 65%), radial-gradient(90% 60% at 100% 100%, rgba(252,115,77,.4), transparent 65%), #0A141C; }
.ps-phone::before { content: ""; position: absolute; top: 34%; left: 50%; width: 46%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
background: radial-gradient(circle at 50% 38%, rgba(255,255,255,.22) 0 22%, transparent 23%), radial-gradient(ellipse at 50% 100%, rgba(255,255,255,.16) 0 45%, transparent 46%); filter: blur(3px); }
.ps-phone__tag { position: absolute; top: 10px; left: 10px; font-size: .62rem; padding: 3px 8px; border-radius: 6px; background: rgba(0,0,0,.4); color: #fff; }
.ps-cap { font-size: clamp(.78rem, 1vw, .92rem); font-weight: 700; line-height: 1.3; text-align: center; margin-bottom: 8%; }
.ps-cap b { color: rgba(255,255,255,.35); border-radius: 4px; }
.ps-cap b.hl { padding: 0 3px; }
.ps-card.is-playing .ps-phone { animation: popin 600ms var(--ease-out) both; }
.ps-card.is-playing .ps-phone--a { animation-delay: 60ms; }
.ps-card.is-playing .ps-phone--b { animation-delay: 110ms; }
.ps-card.is-playing .ps-phone--c { animation-delay: 150ms; }
.ps-card.is-playing .ps-cap b { animation: word 220ms ease forwards; }
.ps-card.is-playing .ps-phone--a .ps-cap b { animation-delay: calc(550ms + var(--w, 0) * 140ms); }
.ps-card.is-playing .ps-phone--b .ps-cap b { animation-delay: calc(1250ms + var(--w, 0) * 140ms); }
.ps-card.is-playing .ps-phone--c .ps-cap b { animation-delay: calc(1950ms + var(--w, 0) * 140ms); }
.ps-card.is-playing .ps-cap b.hl { animation-name: wordhl; }
.ps-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ps-plats { display: flex; flex-wrap: wrap; gap: 8px; }
.ps-plat { padding: 7px 12px; border-radius: 999px; font-size: .84rem; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.05); color: rgba(255,255,255,.85); }
.ps-plat.is-main { background: rgba(2,151,222,.22); border-color: rgba(127,208,245,.5); color: #fff; }
.ps-goal { font-size: 1.02rem; line-height: 1.45; color: rgba(255,255,255,.9); }
.ps-reg { display: flex; gap: 12px; align-items: flex-start; margin-top: 24px; padding: 14px 16px; border-radius: 14px; font-size: .86rem; line-height: 1.45;
color: rgba(255,255,255,.78); background: rgba(31,199,126,.08); border: 1px solid rgba(31,199,126,.3); }
.ps-reg b { color: #6DF0B5; }
.ps-reg__icon { flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: rgba(31,199,126,.2); position: relative; }
.ps-reg__icon::after { content: ""; position: absolute; left: 6px; top: 3px; width: 5px; height: 9px; border: solid #6DF0B5; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ps-reg[hidden] { display: none; }
.ps-foot { margin-top: 24px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.1); font-size: .76rem; color: rgba(255,255,255,.45); }
@media (max-width: 980px) {
.ps { grid-template-columns: 1fr; }
.ps-list { display: flex; overflow-x: auto; gap: 8px; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter) 6px; scroll-snap-type: x mandatory; }
.ps-list::-webkit-scrollbar { display: none; }
.ps-item { flex: 0 0 auto; grid-template-columns: 36px auto; padding: 10px 16px 12px 10px; border-radius: 14px; scroll-snap-align: start; }
.ps-ico { width: 36px; height: 36px; border-radius: 10px; }
.ps-ico svg { width: 18px; height: 18px; }
.ps-item__txt span { display: none; }
.ps-item__txt b { font-size: .92rem; white-space: nowrap; }
}
@media (max-width: 600px) {
.ps-row { grid-template-columns: 1fr; gap: 0; }
.ps-phones { gap: 8px; }
.ps-cap { font-size: .7rem; }
}
@media (prefers-reduced-motion: reduce) {
.ps-swap { transition: none; }
.ps-card.is-playing .ps-phone, .ps-card.is-playing .ps-cap b { animation: none; }
.ps-cap b { color: #fff; }
.ps-cap b.hl { color: #02070A; background: #FC734D; }
.ps-bar { display: none; }
}
.nowrap { white-space: nowrap; }
.results__head { max-width: 980px; }
/* problem section: "already record" / "not yet" modes */
.compare__word { font-size: 1.05rem; color: var(--ink); letter-spacing: -0.025em; white-space: nowrap; }
.compare__word em { color: #0277B0; }
/* =====================================================
v4 — section redesign after runads.ai's presentation:
split heads, clip preview rows, stacked "how" cards,
bento with live mini-UIs, founder block, 2-col FAQ.
Prefixes: pf- cs- hw- bn- fd- faq-
===================================================== */
:root {
--sky-50: #EEF8FD;
--sky-700: #0277B0;
--muted-2: #8A94A3;
--line-soft: #EDF1F5;
--shadow-1: 0 1px 2px rgba(2,7,10,.05), 0 2px 8px rgba(2,7,10,.04);
--shadow-2: 0 2px 4px rgba(2,7,10,.04), 0 24px 60px -20px rgba(6,26,79,.25);
}
.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; }
.h2 { text-wrap: balance; }
.lead { text-wrap: pretty; }
/* ---------- split section heads: title left, paragraph right ---------- */
.section__head--split { display: grid; grid-template-columns: 1.1fr 1fr; column-gap: clamp(32px, 6vw, 90px); align-items: end; max-width: none; }
.section__head--split > .h2 { grid-row: 1 / span 3; align-self: end; }
.section__head--split > :not(.h2) { grid-column: 2; }
.section__head--split > .lead { margin-top: 0; color: var(--muted); }
.section__head--split > .tgl { margin-top: 22px; justify-self: start; }
@media (max-width: 860px) {
.section__head--split { grid-template-columns: 1fr; }
.section__head--split > .h2 { grid-row: auto; }
.section__head--split > :not(.h2) { grid-column: auto; }
.section__head--split > .lead { margin-top: 20px; }
}
/* ---------- platform strip: quiet grey names, small caption ---------- */
.pf { background: transparent; border: 0; padding: clamp(36px, 5vw, 64px) 0 8px; text-align: center; }
.pf__label { font-size: .84rem; color: var(--muted-2); }
.pf .marquee { margin-top: 18px; padding-bottom: 20px; }
.pf .marquee__track { gap: 0; animation-duration: 34s; }
.pf .marquee__track span { font: 500 1.125rem/1.2 var(--font-sans); font-style: normal; letter-spacing: -0.02em; color: #9AA4B2; opacity: 1; margin-right: 48px; transition: color 200ms ease; }
.pf .marquee__track span::after { display: none; }
@media (hover: hover) and (pointer: fine) {
.pf .marquee:hover .marquee__track { animation-play-state: paused; }
.pf .marquee__track span:hover { color: var(--ink); }
}
@media (max-width: 600px) { .pf .marquee__track span { font-size: .95rem; margin-right: 32px; } }
/* ---------- clips preview ---------- */
.cs { padding: clamp(48px, 6vw, 80px) 0 clamp(40px, 5vw, 64px); background: linear-gradient(180deg, var(--bg), var(--sky-50) 55%, var(--bg)); overflow: hidden; }
.cs .section__head { margin-bottom: 32px; }
.cs-bar { display: flex; align-items: center; gap: 4px; max-width: 580px; margin: 0 auto; padding: 6px 6px 6px 20px; border-radius: 999px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-2); transition: border-color 200ms ease, box-shadow 200ms ease; }
.cs-bar:focus-within { border-color: #0297DE; box-shadow: 0 0 0 4px rgba(2,151,222,.14), var(--shadow-2); }
.cs-bar__pre { font-size: 1rem; color: var(--muted-2); }
.cs-bar input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 400 1rem/1 var(--font-mono); color: var(--ink); padding: 12px 0; }
.cs-bar input:focus-visible { outline: none; }
.cs-bar input::placeholder { color: #A9B2BD; }
.cs-bar .btn { height: 44px; }
.cs-status { margin: 16px auto 0; max-width: 560px; font-size: .9rem; color: var(--muted); }
.cs-status.is-ok { color: var(--green); }
.cs-rows { margin-top: 56px; display: flex; flex-direction: column; gap: 16px; }
.cs-rows__label { text-align: center; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }
.cs-track { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.cs-row { display: flex; width: max-content; padding: 4px 0 14px; }
.cs-row--a { animation: cs-left 50s linear infinite; }
.cs-row--b { animation: cs-right 64s linear infinite; }
@keyframes cs-left { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@keyframes cs-right { from { transform: translate3d(-50%,0,0); } to { transform: translate3d(0,0,0); } }
@media (hover: hover) and (pointer: fine) { .cs-track:hover .cs-row { animation-play-state: paused; } }
.cs-card { flex: none; width: 340px; margin-right: 16px; display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; padding: 12px 16px 12px 12px; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-1); text-align: left; }
.cs-card h3 { margin-top: 6px; font-size: .97rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; color: var(--ink); }
.cs-plat { display: inline-flex; align-items: center; gap: 6px; font: 500 .7rem/1 var(--font-mono); color: var(--muted); }
.cs-plat::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c, #0297DE); }
.cs-meta { display: block; margin-top: 6px; font-size: .68rem; color: var(--muted-2); }
.cs-thumb { position: relative; width: 64px; aspect-ratio: 9 / 16; border-radius: 10px; overflow: hidden; background: #0A141C; }
.cs-thumb i { position: absolute; left: 7px; right: 7px; bottom: 14px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.9); }
.cs-thumb i::after { content: ""; position: absolute; left: 6px; right: 14px; top: 8px; height: 5px; border-radius: 3px; background: #FC734D; }
.cs-thumb::before { content: ""; position: absolute; left: 50%; top: 38%; width: 0; height: 0; border-left: 9px solid rgba(255,255,255,.85); border-top: 6px solid transparent; border-bottom: 6px solid transparent; transform: translate(-35%, -50%); }
.cs-thumb--1 { background: radial-gradient(120% 70% at 50% 0%, rgba(252,115,77,.65), transparent 65%), linear-gradient(160deg, #3B2A20, #0A141C); }
.cs-thumb--2 { background: radial-gradient(120% 70% at 50% 0%, rgba(2,151,222,.7), transparent 65%), #050C12; }
.cs-thumb--3 { background: linear-gradient(160deg, #10324F, #2C7FB8 60%, #F3C2B3); }
.cs-thumb--4 { background: linear-gradient(135deg, #2A1C14, #7A4E33 55%, #E9C9A4); }
.cs-thumb--5 { background: radial-gradient(90% 60% at 0% 0%, rgba(2,151,222,.5), transparent 65%), radial-gradient(90% 60% at 100% 100%, rgba(252,115,77,.45), transparent 65%), #050C12; }
.cs-thumb--6 { background: linear-gradient(135deg, #F4EDE4, #D9B48F 55%, #5A3A26); }
@media (max-width: 600px) {
.cs-bar { padding-left: 16px; }
.cs-bar__pre { display: none; }
.cs-bar .btn { height: 40px; padding: 0 14px; font-size: .9rem; }
.cs-card { width: 290px; }
}
@media (prefers-reduced-motion: reduce) {
.cs-row--a, .cs-row--b { animation: none; }
.cs-track { overflow-x: auto; -webkit-mask-image: none; mask-image: none; padding-inline: var(--gutter); }
.cs-card[aria-hidden="true"] { display: none; }
}
/* ---------- proof numbers: hairline-divided columns, no card ---------- */
.proof { padding: clamp(24px, 4vw, 48px) 0 clamp(40px, 6vw, 72px); }
.proof__card { background: none; border: 0; box-shadow: none; padding: 0; border-radius: 0; }
.proof__grid { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.proof__item { padding: 30px 24px 28px; border-left: 1px solid var(--line); gap: 12px; }
.proof__item:first-child { padding-left: 0; border-left: 0; }
.proof__n { font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 500; letter-spacing: -0.05em; }
.proof__l { font-size: .9rem; line-height: 1.45; max-width: 24ch; }
.proof__note { border-top: 0; padding-top: 0; margin-top: 16px; font-size: .8rem; color: var(--muted-2); }
@media (max-width: 980px) {
.proof__grid { gap: 0; }
.proof__item:nth-child(3) { padding-left: 0; border-left: 0; }
.proof__item:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 600px) { .proof__n { font-size: 2.2rem; } .proof__item { padding: 22px 12px 20px; } .proof__item:nth-child(odd) { padding-left: 0; } }
/* ---------- how it works: stacked cards pinned to the scroll ---------- */
.hw { padding: clamp(90px, 11vw, 150px) 0 0; background: linear-gradient(180deg, var(--bg), var(--bg-tint)); }
.hw .section__head { margin-bottom: 0; }
.hw-stack { padding: 40px 0 clamp(80px, 11vw, 140px); }
.hw-cards { display: flex; flex-direction: column; gap: 16px; }
.hw-card { position: relative; display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(24px, 4vw, 52px); border-radius: 28px; background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 80px -30px rgba(6,26,79,.3), var(--shadow-1); overflow: hidden; }
.hw-card > div { min-width: 0; }
.hw-card--you { border-color: rgba(252,115,77,.5); }
.hw-card h3 { margin-top: 18px; font-weight: 500; font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1.04; letter-spacing: -0.04em; }
.hw-dots { display: none; }
@media (max-width: 860px) {
.hw-card { grid-template-columns: 1fr; padding: 24px; border-radius: 22px; }
.hw-card h3 { font-size: 1.75rem; }
.hw-vis { min-height: 0; padding: 14px; }
}
/* pinned mode: desktop, motion allowed, JS on */
@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
.js .hw-stack { height: calc(var(--n) * 90vh); padding: 0; }
.js .hw-pin { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; padding-top: 40px; overflow: hidden; }
.js .hw-cards { position: relative; display: block; height: min(70vh, 600px); }
.js .hw-slot { position: absolute; top: 0; bottom: 0; left: var(--gutter); right: var(--gutter); transform-origin: 50% 0; will-change: transform; }
.js .hw-slot:not([data-i="0"]) { transform: translate3d(0, 100vh, 0); }
.js .hw-slot .hw-card { height: 100%; }
.js .hw-slot .hw-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--ink); opacity: var(--dim, 0); pointer-events: none; }
.js .hw-dots { display: flex; gap: 8px; position: absolute; left: 50%; bottom: -34px; transform: translateX(-50%); }
.js .hw-dots i { width: 6px; height: 6px; border-radius: 999px; background: var(--line-2); transition: width 300ms var(--ease-out), background-color 300ms ease; }
.js .hw-dots i.is-on { width: 22px; background: var(--ink); }
}
/* ---------- bento with live mini-UIs ---------- */
.bn .bento__item > p.muted, .bn .bn-copy p.muted { font-size: .95rem; }
.bn-wide { display: grid; grid-template-columns: 1fr 1.15fr; gap: 28px; align-items: start; }
.bn-wide .bn-copy p { margin-top: 10px; }
.bn-wide > .bn-vis, .bn-wide > .hook { margin-top: 0; padding-top: 0; }
.bn-vis { margin-top: auto; padding-top: 18px; }
/* grades */
.bn-grades { display: flex; gap: 12px; }
.bn-grades > div { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bn-grades small { font: 500 .68rem/1 var(--font-mono); color: var(--muted-2); }
.bn-g { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 14px; font-weight: 600; font-size: 1.25rem; letter-spacing: -0.02em; }
.bn-g--a { background: var(--green-soft); color: var(--green); }
.bn-g--b { background: var(--sky-50); color: var(--sky-700); }
.bn-g--c { background: #FFF4D6; color: #8A6100; }
/* approve from phone */
.bn-chat { display: flex; flex-direction: column; gap: 10px; }
.bn-bubble { align-self: flex-start; max-width: 92%; padding: 10px 12px; border-radius: 14px 14px 14px 4px; background: var(--bg-tint); border: 1px solid var(--line-soft); font-size: .84rem; line-height: 1.45; color: var(--ink-2); }
.bn-bubble b { font-weight: 600; color: var(--ink); }
.bn-approve { border: 1px solid var(--line); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 6px; background: #fff; box-shadow: var(--shadow-1); }
.bn-approve__row { display: flex; justify-content: space-between; gap: 12px; font-size: .82rem; }
.bn-approve__row span { color: var(--muted); }
.bn-approve__row b { font-weight: 600; }
.bn-approve__btns { display: flex; gap: 8px; margin-top: 6px; }
.bn-approve__btns span { position: relative; flex: 1; text-align: center; padding: 9px 0; border-radius: 10px; font-size: .8rem; font-weight: 600; border: 1px solid var(--line); }
.bn-approve__btns .bn-ok { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.bn-approve__btns .bn-ok::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; box-shadow: 0 0 0 2px rgba(252,115,77,.55); opacity: 0; }
.is-play .bn-ok::after { animation: bn-ring 2.8s var(--ease-out) 1.2s infinite; }
@keyframes bn-ring { 0% { opacity: 1; transform: scale(1); } 45%, 100% { opacity: 0; transform: scale(1.12, 1.35); } }
/* edit log */
.bn-log { border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden; background: #fff; }
.bn-wide > .bn-log { padding-top: 0; }
.bn-log__head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line-soft); font-size: .8rem; font-weight: 600; }
.bn-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: .68rem; font-weight: 500; color: var(--green); }
.bn-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #2FBF71; animation: bn-blink 1.4s ease-in-out infinite; }
@keyframes bn-blink { 50% { opacity: .3; } }
.bn-log__row { display: grid; grid-template-columns: 64px 1fr; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--line-soft); font-size: .8rem; line-height: 1.45; }
.bn-log__row time { font-size: .7rem; line-height: 1.7; color: var(--muted-2); }
.bn-log__row b { font-weight: 600; color: var(--ink); }
.bn-log__row span { color: var(--muted); }
.bn-log__foot { padding: 8px 14px; font-size: .72rem; color: var(--muted-2); background: var(--bg-tint); }
/* voice */
.bn-voice { display: flex; flex-direction: column; gap: 8px; }
.bn-voice__row { display: grid; grid-template-columns: 58px 1fr; gap: 10px; align-items: center; }
.bn-voice__row > span { font: 500 .66rem/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); }
.bn-voice__row > div { display: flex; flex-wrap: wrap; gap: 6px; }
.bn-voice i { font-style: normal; font-size: .78rem; font-weight: 500; padding: 4px 9px; border-radius: 999px; background: var(--sky-50); color: var(--sky-700); }
.bn-voice i.x { background: var(--bg-tint); color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(102,112,122,.5); }
/* report */
.bn-report { border: 1px solid var(--line-2); border-radius: 14px; padding: 16px; }
.bn-wide > .bn-report { padding-top: 16px; }
.bn-report__nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.bn-report__nums b { display: block; font-size: 1.6rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
.bn-report__nums b.hot { color: var(--accent-ink); }
.bn-report__nums span { font-size: .75rem; color: var(--muted); }
.bn-report .bars { height: 70px; }
/* live entrances: chat (message, then card), log (rows in time order, gaps shrinking) */
@media (prefers-reduced-motion: no-preference) {
.js .js-bn-play .bn-bubble, .js .js-bn-play .bn-approve, .js .bn-log .bn-log__row, .js .bn-log .bn-log__foot {
opacity: 0; transform: translateY(8px); transition: opacity 500ms var(--ease-out), transform 600ms var(--ease-out); }
.js .js-bn-play.is-play .bn-bubble, .js .js-bn-play.is-play .bn-approve, .js .bn-log.is-play .bn-log__row, .js .bn-log.is-play .bn-log__foot { opacity: 1; transform: none; }
.js .js-bn-play.is-play .bn-approve { transition-delay: 220ms; }
.js .bn-log.is-play .bn-log__row:nth-of-type(3) { transition-delay: 160ms; }
.js .bn-log.is-play .bn-log__row:nth-of-type(4) { transition-delay: 290ms; }
.js .bn-log.is-play .bn-log__row:nth-of-type(5) { transition-delay: 390ms; }
.js .bn-log.is-play .bn-log__row:nth-of-type(6) { transition-delay: 460ms; }
.js .bn-log.is-play .bn-log__foot { transition-delay: 520ms; }
}
@media (prefers-reduced-motion: reduce) { .bn-live::before, .is-play .bn-ok::after { animation: none; } }
@media (max-width: 980px) { .bn-wide { grid-template-columns: 1fr; } }
/* ---------- founder ---------- */
.fd { padding: clamp(90px, 12vw, 160px) 0; }
.fd__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(40px, 7vw, 110px); align-items: center; }
.fd__badge { position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 1; border-radius: 32px; display: grid; place-items: center; align-content: center; gap: 14px; color: #fff; text-align: center;
background: radial-gradient(80% 55% at 50% 112%, #FFD9C9 0%, #FC734D 36%, rgba(252,115,77,0) 76%), linear-gradient(180deg, #0297DE, #034D7C); }
.fd__badge::after { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, transparent 1px 10px); }
.fd__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fd__years { display: flex; flex-direction: column; align-items: center; font-size: clamp(6rem, 12vw, 10rem); font-weight: 500; letter-spacing: -0.06em; line-height: .85; }
.fd__years small { font-size: 1.1rem; font-weight: 500; letter-spacing: -0.01em; margin-top: 10px; opacity: .9; }
.fd__cap { font-family: var(--font-serif); font-style: italic; font-size: 1.5rem; line-height: 1.1; }
.fd__chip { font-size: .72rem; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); }
.fd .section__head { margin-bottom: 0; }
.fd .lead { color: var(--muted); max-width: 52ch; }
.fd__cols { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.fd__cols h3 { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.015em; }
.fd__cols p { margin-top: 8px; color: var(--muted); font-size: .95rem; }
@media (max-width: 860px) { .fd__grid { grid-template-columns: 1fr; } .fd__badge { aspect-ratio: 16 / 10; } }
@media (max-width: 600px) { .fd__cols { grid-template-columns: 1fr; } }
/* ---------- FAQ: sticky title left, questions right ---------- */
.faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(40px, 7vw, 110px); align-items: start; }
.faq-side { align-self: stretch; }
.faq-side .section__head { position: sticky; top: 96px; margin-bottom: 0; }
.faq-side .lead { font-size: 1rem; color: var(--muted); }
.faq-side__link { color: var(--sky-700); text-decoration: underline; text-underline-offset: 3px; }
.faq { border-top-color: var(--line); }
.faq details { border-bottom-color: var(--line); }
.faq summary { font-size: 1.1rem; letter-spacing: -0.015em; }
.faq summary::after { content: ""; width: 22px; height: 22px; right: 0; border-radius: 50%; border: 1px solid var(--line-2);
background: url("data:image/svg+xml;utf8,") center/12px no-repeat; }
.faq details p { color: var(--muted); }
@media (max-width: 860px) { .faq-grid { grid-template-columns: 1fr; gap: 8px; } .faq-side .section__head { position: static; } }
/* ---------- footer tagline ---------- */
.footer__tagline { font-size: clamp(2.2rem, 5.4vw, 4.2rem); font-weight: 500; line-height: 1.02; letter-spacing: -0.045em; color: #fff; padding-bottom: clamp(40px, 6vw, 64px); margin-bottom: clamp(40px, 6vw, 56px); border-bottom: 1px solid rgba(255,255,255,.08); }
.footer__tagline em { color: #FFC2AF; }
.cs-rows.is-off .cs-row { animation-play-state: paused; }
/* ---------- calculator output: one lead result, a meter, a quiet secondary row ---------- */
/* warm-up curve: a single-hue fill reads cleaner than the blue→orange wash */
/* =====================================================
BOOKER v3 — neutral: graphite glass, white type, one
solid white state for the picked slot. No hue anywhere.
===================================================== */
.booker {
background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02)), rgba(10,11,12,.72);
border: 1px solid rgba(255,255,255,.1);
box-shadow: 0 50px 120px -40px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.07);
}
/* header */
.booker__head { border-bottom-color: rgba(255,255,255,.08); }
.booker__tz { color: rgba(255,255,255,.45); }
.booker__nav { border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.04); color: #fff; transition: transform 160ms var(--ease-out), background-color 200ms ease, border-color 200ms ease; }
@media (hover: hover) and (pointer: fine) { .booker__nav:not(:disabled):hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.32); } }
.booker__left { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); color: rgba(255,255,255,.62); }
.booker__left b { color: #fff; font-weight: 600; }
.booker__left i { background: #fff; animation-name: leftpulse-n; }
@keyframes leftpulse-n { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.45); } 70%, 100% { box-shadow: 0 0 0 7px rgba(255,255,255,0); } }
/* day columns */
.bk-col { background: rgba(255,255,255,.025); border-color: rgba(255,255,255,.07); }
.bk-col.is-empty { background: transparent; border-color: rgba(255,255,255,.07); }
.bk-col__head { border-bottom-color: rgba(255,255,255,.07); }
.bk-wd, .bk-col__head .bk-wd { color: rgba(255,255,255,.45); }
.bk-mo, .bk-col__head .bk-mo { color: rgba(255,255,255,.38); }
.bk-col.is-empty .bk-wd, .bk-col.is-empty .bk-dn, .bk-col.is-empty .bk-col__head .bk-wd, .bk-col.is-empty .bk-col__head .bk-dn { color: rgba(255,255,255,.22); }
.bk-none { color: rgba(255,255,255,.28); }
/* slots */
.bk-slot { background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.1); color: #fff;
transition: transform 160ms var(--ease-out), background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease; }
.bk-slot__d { color: rgba(255,255,255,.45); }
@media (hover: hover) and (pointer: fine) {
.bk-slot:hover { background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.28); transform: translateY(-1px); }
}
.bk-slot.is-picked { background: #fff; border-color: #fff; color: #0A0B0C; box-shadow: 0 12px 30px -12px rgba(255,255,255,.35); }
.bk-slot.is-picked .bk-slot__d { color: rgba(10,11,12,.55); }
/* mobile day chips */
.bk-day { border-color: rgba(255,255,255,.12) !important; background: rgba(255,255,255,.04) !important; }
.bk-day.is-on { background: #fff !important; border-color: #fff !important; color: #0A0B0C; }
/* form */
.booker__form { border-top-color: rgba(255,255,255,.08); }
.booker__picked-dot { background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.14); }
.booker__fields input { border-color: rgba(255,255,255,.12); background: rgba(0,0,0,.35); }
.booker__fields input:focus { border-color: rgba(255,255,255,.5); box-shadow: 0 0 0 3px rgba(255,255,255,.1); }
.booker__form .btn--white { background: #fff; color: #0A0B0C; box-shadow: 0 14px 34px -14px rgba(255,255,255,.35); }
.booker__form .btn--white:hover { background: #EDEEF0; }
.booker__done { border-top-color: rgba(255,255,255,.08); }
.booker__check { background: #fff; }
.booker__check::after { border-color: #0A0B0C; }
.bk-col--loading span { background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.09), rgba(255,255,255,.04)); background-size: 200% 100%; }
.booker__tz { font-family: var(--font-sans); font-size: .85rem; letter-spacing: 0; color: rgba(255,255,255,.5); }
.bk-slot { padding: 15px 8px; }
/* =====================================================
OFFER — "1" struck through and "2" written by hand
Timeline (on .reveal-offer.is-in):
0ms "1" fades up (lead)
1000ms strike drawn over the 1, 1 dims with it (together)
1380ms the rest of the sentence slides right (460ms) to open the slot
1720ms "2" written into the opening slot (750ms)
===================================================== */
/* slot for the 2: open in the final state; collapsed to 0 before the strike so the sentence reads naturally */
@keyframes ink-open { from { width: 0; } to { width: 1.5em; } }
@keyframes ink-in { from { opacity: 0; transform: translateY(4px); } to { opacity: .85; transform: none; } }
@keyframes ink-dim { from { opacity: .85; } to { opacity: .5; } }
@keyframes ink-draw { 0% { stroke-dashoffset: 1; opacity: 0; } 1% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
/* after the strike, the rest of the sentence slides right to make room (one-off, so a width transition is acceptable) */
}
.lead--light.offer { max-width: none; }
@media (max-width: 760px) { .offer__br { display: none; } .lead--light.offer { max-width: 46ch; } }
/* ===== Founder photo (v5) ===== */
.fd__badge--photo { margin: 0; display: block; background: #1a1a1a; }
.fd__badge--photo::after { z-index: 1; background: linear-gradient(to top, rgba(0,0,0,.55), transparent 45%); }
.fd__badge--photo .fd__photo { object-position: 50% 30%; }
.fd__tag { position: absolute; z-index: 2; left: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 2px; padding: 10px 16px; border-radius: 16px; color: #fff; text-align: left;
background: rgba(20,20,20,.38); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.fd__tag-n { font-family: var(--font-serif); font-style: italic; font-size: 1.6rem; line-height: 1; }
.fd__tag-l { font-size: .78rem; opacity: .9; }
.fd__sign { font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 18px 0 -6px; }
@media (max-width: 860px) { .fd__badge--photo { aspect-ratio: 4 / 5; max-width: 460px; } }
/* ===== Legal pages: privacy.html, terms.html (v6) ===== */
.lg-page { background: var(--bg); }
.lg-nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.85); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--line); }
.lg-nav__inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.lg-back { font-size: .92rem; color: var(--muted); transition: color 200ms ease; }
.lg-back:hover { color: var(--ink); }
.lg-main { padding: clamp(48px, 8vw, 96px) 0 clamp(64px, 10vw, 120px); }
.lg__grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: clamp(40px, 7vw, 96px); align-items: start; }
.lg__side { position: sticky; top: 108px; }
.lg__eyebrow { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); }
.lg__title { margin: 10px 0 0; font-size: clamp(2.4rem, 5vw, 3.4rem); font-weight: 500; line-height: 1; letter-spacing: -0.045em; }
.lg__title em { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.02em; }
.lg__date { margin-top: 16px; font-size: .78rem; color: var(--muted); }
.lg__toc { list-style: none; margin: 32px 0 0; padding: 20px 0 0; border-top: 1px solid var(--line); display: grid; gap: 10px; counter-reset: lg; }
.lg__toc li { counter-increment: lg; display: flex; gap: 12px; font-size: .92rem; }
.lg__toc li::before { content: counter(lg, decimal-leading-zero); font-family: var(--font-mono); font-size: .72rem; color: var(--muted); padding-top: 3px; }
.lg__toc a { color: var(--ink-2); transition: color 200ms ease; }
.lg__toc a:hover { color: var(--accent-ink); }
.lg__body { max-width: 720px; color: var(--ink-2); font-size: 1.02rem; line-height: 1.7; }
.lg__lead { margin: 0; font-size: 1.22rem; line-height: 1.55; color: var(--ink); letter-spacing: -0.01em; }
.lg__body section { padding-top: 40px; margin-top: 40px; border-top: 1px solid var(--line); scroll-margin-top: 90px; }
.lg__body h2 { margin: 0 0 14px; font-size: 1.4rem; font-weight: 600; letter-spacing: -0.025em; color: var(--ink); }
.lg__body p { margin: 0 0 14px; }
.lg__body ul { list-style: disc; margin: 0 0 14px; padding-left: 1.2em; }
.lg__body li { margin-bottom: 8px; }
.lg__body li::marker { color: var(--accent); }
.lg__body strong { color: var(--ink); font-weight: 600; }
.lg__body a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; transition: text-decoration-color 200ms ease; }
.lg__body a:hover { text-decoration-color: var(--accent); }
.lg__table { width: 100%; border-collapse: collapse; margin: 4px 0 16px; font-size: .94rem; }
.lg__table th { text-align: left; font-family: var(--font-mono); font-weight: 500; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 0 12px 10px 0; border-bottom: 1px solid var(--line-2); }
.lg__table td { vertical-align: top; padding: 14px 12px 14px 0; border-bottom: 1px solid var(--line); }
.lg__table td:first-child { color: var(--ink); width: 55%; }
.lg__other { margin-top: 48px !important; padding-top: 24px; border-top: 1px solid var(--line); font-size: .92rem; color: var(--muted); }
@media (max-width: 860px) {
.lg__grid { grid-template-columns: 1fr; }
.lg__side { position: static; }
.lg__toc { grid-template-columns: 1fr 1fr; column-gap: 20px; }
}
@media (max-width: 520px) {
.lg__toc { grid-template-columns: 1fr; }
.lg__table, .lg__table tbody, .lg__table tr, .lg__table td { display: block; width: 100% !important; }
.lg__table thead { display: none; }
.lg__table tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
.lg__table td { padding: 0; border: 0; }
.lg__table td + td { margin-top: 4px; font-size: .86rem; color: var(--muted); }
}
/* ===== How it works: card interiors (v8) =====
Copy on the left; the right side IS the dark app surface (no card-in-a-card).
Card padding 14px + panel radius 14px = concentric with the 28px card. */
.hw-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); align-items: stretch; gap: clamp(20px, 3vw, 40px); padding: 14px; }
.hw-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(14px, 3vw, 38px) 0 clamp(14px, 3vw, 38px) clamp(10px, 3vw, 38px); }
.hx-step { display: flex; align-items: center; gap: 10px; font-size: .78rem; color: var(--muted-2); }
.hx-who { font: 500 .66rem/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; background: var(--sky-50); color: var(--sky-700); }
.hx-who--you { background: var(--accent-soft); color: var(--accent-ink); }
.hw-card h3 { margin-top: 14px; }
.hx-body { margin-top: 14px; color: var(--muted); font-size: 1.02rem; line-height: 1.6; max-width: 42ch; }
.hx-gets { margin-top: 22px; display: grid; gap: 9px; }
.hx-gets li { display: flex; align-items: center; gap: 10px; font-size: .93rem; color: var(--ink-2); }
.hx-gets svg { flex: none; width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--sky-50); color: var(--sky-700); }
.hw-card--you .hx-gets svg { background: var(--accent-soft); color: var(--accent-ink); }
.hx-meta { margin: 26px 0 0; padding-top: 18px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 420px; }
.hx-meta dt { font: 400 .7rem/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); }
.hx-meta dd { margin: 7px 0 0; font-size: .98rem; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
.hw-card--you .hx-meta dd { color: var(--accent-ink); }
/* the dark panel */
.hw-vis { position: relative; isolation: isolate; overflow: hidden; min-height: 0; height: 100%; border-radius: 16px; padding: clamp(18px, 2.4vw, 28px);
display: flex; flex-direction: column; justify-content: center; gap: 14px; color: var(--app-text); font-size: .9rem;
background: radial-gradient(90% 60% at 0% 0%, rgba(2,151,222,.22), transparent 60%), radial-gradient(70% 50% at 100% 100%, rgba(2,151,222,.10), transparent 70%), var(--app);
box-shadow: inset 0 0 0 1px var(--app-line), inset 0 1px 0 rgba(255,255,255,.04); }
.hw-vis::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size: 18px 18px;
-webkit-mask-image: radial-gradient(80% 70% at 50% 40%, #000, transparent); mask-image: radial-gradient(80% 70% at 50% 40%, #000, transparent); }
.hw-card--you .hw-vis { background: radial-gradient(90% 60% at 100% 0%, rgba(252,115,77,.24), transparent 60%), radial-gradient(70% 50% at 0% 100%, rgba(252,115,77,.10), transparent 70%), var(--app); }
.hw-vis p, .hw-vis ul { margin: 0; }
.hx-k { font: 400 .66rem/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--app-dim); }
.hx-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--app-line); }
.hx-label { font: 400 .72rem/1.35 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--app-dim); }
.hx-pill { display: inline-flex; align-items: center; gap: 7px; flex: none; font: 500 .7rem/1 var(--font-mono); padding: 6px 10px; border-radius: 999px; color: #9AD8F7; background: rgba(2,151,222,.12); border: 1px solid rgba(2,151,222,.22); }
.hx-pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.hx-pill--ok { color: #6DF0B5; background: rgba(31,199,126,.10); border-color: rgba(31,199,126,.22); }
.hx-pill--rec { color: #FF8A6B; background: rgba(252,115,77,.12); border-color: rgba(252,115,77,.28); font-variant-numeric: tabular-nums; }
.hx-pill--ghost { color: var(--app-dim); background: transparent; border-color: var(--app-line); }
.hx-tag { flex: none; font: 500 .68rem/1 var(--font-mono); padding: 5px 8px; border-radius: 6px; }
.hx-tag--o { background: rgba(252,115,77,.14); color: #FFB29C; }
.hx-tag--s { background: rgba(2,151,222,.18); color: #7FD0F5; }
.hx-tag--e { background: rgba(31,199,126,.13); color: #7FEBB8; }
.hx-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hx-next { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 12px; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px dashed var(--app-line); color: var(--app-dim); font-size: .86rem; line-height: 1.45; }
/* 01 plan: offer -> topics */
.hx-offer { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 12px; background: linear-gradient(100deg, rgba(2,151,222,.20), rgba(252,115,77,.14)); border: 1px solid rgba(255,255,255,.08); }
.hx-offer b { font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; }
.hx-tree { position: relative; display: grid; gap: 8px; padding-left: 22px; }
.hx-tree::before { content: ""; position: absolute; left: 8px; top: -14px; bottom: 22px; width: 1px; background: linear-gradient(var(--app-line), rgba(255,255,255,.14)); }
.hx-tree li { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--app-2); border: 1px solid var(--app-line); }
.hx-tree li::before { content: ""; position: absolute; left: -14px; top: 50%; width: 13px; height: 1px; background: rgba(255,255,255,.14); }
.hx-wk { margin-left: auto; flex: none; font: 400 .68rem/1 var(--font-mono); color: var(--app-dim); }
/* 02 record: waveform + live prompt */
.hx-wave { position: relative; display: flex; align-items: center; gap: 3px; height: 72px; padding: 0 2px; }
.hx-wave i { flex: 1; height: var(--h); border-radius: 2px; background: rgba(255,255,255,.14); transform-origin: 50% 50%; }
.hx-wave i.is-past { background: linear-gradient(180deg, #FFB29C, #FC734D); }
.hx-head { position: absolute; top: -4px; bottom: -4px; left: 70.6%; width: 2px; border-radius: 2px; background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.08); }
.hx-q { padding: 16px 18px; border-radius: 14px; background: var(--app-2); border: 1px solid rgba(252,115,77,.28); box-shadow: 0 20px 40px -24px rgba(252,115,77,.5); }
.hx-q p { margin-top: 10px; font-family: var(--font-serif); font-style: italic; font-size: clamp(1.3rem, 1.9vw, 1.6rem); line-height: 1.2; letter-spacing: -0.01em; }
/* 03 frame: timeline + phone */
.hx-frame { display: grid; grid-template-columns: minmax(0, 1fr) 128px; gap: 16px; align-items: center; }
.hx-frame__main { display: grid; gap: 10px; min-width: 0; }
.hx-track { position: relative; height: 28px; border-radius: 8px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 2px, transparent 2px 6px), var(--app-2); border: 1px solid var(--app-line); }
.hx-track span { position: absolute; top: 3px; bottom: 3px; left: var(--l); width: var(--w); border-radius: 5px; background: #1FC77E; box-shadow: 0 0 14px rgba(31,199,126,.5); }
.hx-track span.is-b { background: #0297DE; box-shadow: 0 0 14px rgba(2,151,222,.5); }
.hx-track span.is-cut { background: rgba(255,255,255,.12); box-shadow: none; }
.hx-ticks { display: flex; justify-content: space-between; margin-top: -4px; font: 400 .62rem/1 var(--font-mono); color: var(--app-dim); }
.hx-clips { display: grid; }
.hx-clips li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--app-line); font-size: .84rem; }
.hx-clips li:last-child { border-bottom: 0; }
.hx-clips .mono { flex: none; width: 38px; font-size: .7rem; color: var(--app-dim); }
.hx-clips b { margin-left: auto; flex: none; font: 500 .68rem/1 var(--font-mono); padding: 4px 7px; border-radius: 6px; background: rgba(31,199,126,.12); color: #6DF0B5; }
.hx-clips b.is-b { background: rgba(2,151,222,.16); color: #7FD0F5; }
.hx-clips li.is-cut { color: var(--app-dim); }
.hx-clips li.is-cut .hx-t { text-decoration: line-through; text-decoration-color: rgba(255,255,255,.3); }
.hx-clips li.is-cut b { background: rgba(255,255,255,.06); color: var(--app-dim); }
.hx-phone { position: relative; aspect-ratio: 9 / 16; border-radius: 18px; padding: 10px 9px; display: flex; flex-direction: column; overflow: hidden;
background: radial-gradient(60% 40% at 50% 38%, rgba(255,255,255,.22), transparent 70%), linear-gradient(170deg, #034D7C, #0297DE 55%, #FC734D);
box-shadow: 0 0 0 4px #0d1820, 0 0 0 5px rgba(255,255,255,.08), 0 24px 40px -16px rgba(0,0,0,.8); }
.hx-phone__bar { height: 3px; border-radius: 3px; background: rgba(255,255,255,.3); overflow: hidden; }
.hx-phone__bar i { display: block; width: 28%; height: 100%; background: #fff; }
.hx-phone__hook { align-self: flex-start; margin-top: 8px; font: 500 .56rem/1 var(--font-mono); padding: 4px 6px; border-radius: 5px; background: rgba(2,7,10,.55); color: #fff; }
.hw-vis .hx-phone__cap { margin: auto 0 8px; font-weight: 700; font-size: .86rem; line-height: 1.1; letter-spacing: -0.02em; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.35); }
.hx-phone__cap em { font-family: var(--font-sans); font-weight: 700; letter-spacing: -0.02em; font-style: normal; color: #02070A; background: #FFD7CB; padding: 0 3px; border-radius: 3px; text-shadow: none; }
.hx-phone__who { font: 500 .58rem/1 var(--font-sans); color: rgba(255,255,255,.85); }
/* 04 write: platform tabs + post */
.hx-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--app-2); border: 1px solid var(--app-line); }
.hx-tabs span { flex: 1; text-align: center; padding: 7px 4px; border-radius: 8px; font-size: .76rem; font-weight: 500; color: var(--app-dim); }
.hx-tabs span.is-on { background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.hx-post { display: grid; gap: 8px; padding: 16px; border-radius: 14px; background: #fff; color: var(--ink-2); font-size: .86rem; line-height: 1.45; box-shadow: 0 24px 50px -24px rgba(0,0,0,.8); }
.hx-post__head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.hx-post__head div b { display: block; font-weight: 600; color: var(--ink); font-size: .88rem; }
.hx-post__head div span { display: block; font-size: .74rem; color: var(--muted); }
.hx-av { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: #fff; font-size: .74rem; font-weight: 600; background: linear-gradient(135deg, #0297DE, #034D7C); }
.hx-post__media { position: relative; margin-top: 4px; aspect-ratio: 16 / 7; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(135deg, #034D7C, #0297DE 55%, #FC734D); }
.hx-play { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.92); position: relative; }
.hx-play::after { content: ""; position: absolute; left: 15px; top: 12px; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent var(--ink); }
.hx-post__dur { position: absolute; right: 8px; bottom: 8px; font-size: .62rem; padding: 3px 6px; border-radius: 5px; background: rgba(2,7,10,.6); color: #fff; }
.hx-voice { display: flex; align-items: baseline; gap: 12px; font-size: .84rem; color: var(--app-dim); }
/* 05 ship & report */
.hx-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hx-kpis > div { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 12px; background: var(--app-2); border: 1px solid var(--app-line); }
.hx-kpis b { font-size: 1.7rem; font-weight: 600; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.hx-up { font: 500 .66rem/1 var(--font-mono); color: #6DF0B5; }
.hx-flat { font: 400 .66rem/1 var(--font-mono); color: var(--app-dim); }
.hx-chart { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; align-items: end; height: 110px; }
.hx-chart div { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; }
.hx-chart i { height: var(--h); border-radius: 6px 6px 3px 3px; background: rgba(255,255,255,.12); transform-origin: 50% 100%; }
.hx-chart i.is-top { background: linear-gradient(180deg, #FC734D, #0297DE); }
.hx-chart span { font: 400 .62rem/1 var(--font-mono); color: var(--app-dim); text-align: center; }
/* entrance: when a card arrives in the pinned stack, its panel content cascades in.
Pinned mode only (desktop, motion allowed, JS on); everywhere else it is simply visible.
Exit is faster than enter, so scrolling back up never feels sticky. */
@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
.js .hw-slot .hx-a { opacity: 0; transform: translateY(10px); filter: blur(3px);
transition: opacity 200ms ease, transform 200ms var(--ease-out), filter 200ms ease; }
.js .hw-slot.is-in .hx-a { opacity: 1; transform: none; filter: none;
transition-duration: 500ms, 600ms, 500ms; transition-delay: calc(120ms + var(--d, 0) * 60ms); }
.js .hw-slot .hx-wave i, .js .hw-slot .hx-chart i { transform: scaleY(.15); transition: transform 200ms var(--ease-out); }
.js .hw-slot.is-in .hx-wave i, .js .hw-slot.is-in .hx-chart i { transform: none; transition-duration: 700ms; transition-delay: 260ms; }
.js .hw-slot.is-in .hx-pill--rec i { animation: hx-rec 1.6s ease-in-out infinite; }
}
@keyframes hx-rec { 50% { opacity: .25; } }
@media (max-width: 860px) {
.hw-card { grid-template-columns: 1fr; padding: 10px; }
.hw-copy { padding: 16px 10px 4px; }
.hw-vis { padding: 16px; }
.hx-frame { grid-template-columns: minmax(0, 1fr) 104px; }
.hx-tabs span:nth-child(n+4) { display: none; }
}
@media (max-width: 420px) {
.hx-frame { grid-template-columns: 1fr; }
.hx-phone { display: none; }
.hx-kpis b { font-size: 1.35rem; }
}
/* ===== Results: original screenshots on device frames (v9) =====
The screen takes each screenshot's own ratio, so tall ones read as phones and
squarer ones as tablets; the bezel, camera and glass edge stay the same on all. */
/* every screen gets the same height; width follows the screenshot ratio (--ar set per card),
so squarer shots grow into tablets instead of shrinking */
.rs { --screen-h: clamp(300px, 31vw, 420px); }
.rs-card { width: calc(var(--screen-h) * var(--ar, .75) + 24px); }
/* the deck hugs the device (screen + 34px bezel + ~36px for shadow and 3D tilt) instead of a fixed 600px box,
and the heading sits closer, so the numbers start right under the intro */
.rs-deck { height: calc(var(--screen-h) + 70px); }
.results .results__head { margin-bottom: 72px; } /* visible gap intro → device ≈ 70px (the intro overhangs the head box by ~20px) */
.rs-proof { position: relative; display: block; padding: 22px 12px 12px; border-radius: 30px;
background: linear-gradient(160deg, #2E3A45, #0B1218 42%, #1B2630);
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.07), /* inner bezel edge */
inset 0 1px 0 rgba(255,255,255,.14), /* top light catch */
0 0 0 1px rgba(255,255,255,.10), /* outer rim */
0 50px 80px -30px rgba(0,0,0,.85),
0 0 60px -20px rgba(2,151,222,.35); }
.rs-card.is-center .rs-proof { box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.16), 0 0 0 1px rgba(255,255,255,.14),
0 60px 90px -30px rgba(0,0,0,.9), 0 0 90px -10px rgba(252,115,77,.35); }
/* front camera, centred in the top bezel */
.rs-cam { position: absolute; top: 8px; left: 50%; translate: -50% 0; width: 6px; height: 6px; border-radius: 50%;
background: radial-gradient(circle at 35% 35%, #3B5466, #05090D 70%); box-shadow: 0 0 0 1px rgba(255,255,255,.06); }
.rs-proof .rs-shot { position: relative; display: block; width: 100%; height: auto; border-radius: 16px; background: #fff; pointer-events: none;
outline: 1px solid rgba(0,0,0,.6); }
/* side-card dimming: an opaque tint over the whole device, never see-through */
.rs-proof::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
background: rgba(2,7,10, calc(var(--dim, 0) * .55)); transition: background-color 500ms ease; }
.rs-card:focus-visible .rs-proof { box-shadow: 0 0 0 3px #0297DE; }
@media (max-width: 900px) {
.rs { --screen-h: clamp(230px, 64vw, 300px); }
.rs-card { width: calc(var(--screen-h) * var(--ar, .75) + 20px); }
.rs-deck { height: calc(var(--screen-h) + 60px); }
.results .results__head { margin-bottom: 44px; }
.rs-proof { padding: 18px 10px 10px; border-radius: 26px; }
.rs-cam { top: 6px; }
}
/* ===== Reorganised page (v10): comparison folded into "What you get" ===== */
.what-compare { margin-top: clamp(72px, 9vw, 120px); }
.what-compare__h { font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
/* hero now ends in the night colour and flows straight into the dark Results section
(it used to fade to white because the studio window sat below it) */
.hero--mesh { background: var(--night); overflow: hidden; padding-bottom: clamp(64px, 8vw, 104px); }
.hero--mesh .mesh { height: 100%; }
.hero--mesh + .results { padding-top: clamp(40px, 5vw, 64px); }
.hero--mesh .mesh { -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
/* ===== Hero: real screenshots fanned out of the bottom of the hero (v11) ===== */
.hero--mesh { padding-bottom: 0; }
.hero-fan { --screen-h: clamp(300px, 30vw, 420px); position: relative; height: clamp(250px, 25vw, 350px); margin: clamp(48px, 6vw, 76px) auto 0; max-width: 1000px; pointer-events: none;
-webkit-mask-image: linear-gradient(180deg, #000 52%, transparent 97%); mask-image: linear-gradient(180deg, #000 52%, transparent 97%); }
.hero-fan__dev { position: absolute; top: 0; left: 50%; width: calc(var(--screen-h) * var(--ar) + 24px); transform: var(--to); transform-origin: 50% 100%; }
.hero-fan__dev--c { z-index: 2; --to: translateX(-50%); --from: translateX(-50%) translateY(72px); }
.hero-fan__dev--l, .hero-fan__dev--r { --screen-h: calc(clamp(300px, 30vw, 420px) * .8); z-index: 1; --dim: .38; }
.hero-fan__dev--l { --to: translate(-118%, 34px) rotate(-9deg); --from: translate(-100%, 82px) rotate(-3deg); }
.hero-fan__dev--r { --to: translate(18%, 34px) rotate(9deg); --from: translate(0%, 82px) rotate(3deg); }
.hero-fan__dev .rs-proof { box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.16), 0 0 0 1px rgba(255,255,255,.12), 0 40px 80px -20px rgba(0,0,0,.7); }
.hero-fan__dev--c .rs-proof { box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.18), 0 0 0 1px rgba(255,255,255,.16), 0 50px 90px -20px rgba(0,0,0,.8), 0 0 80px -10px rgba(252,115,77,.45); }
/* choreography: the fan's lead (centre) rises while the headline settles; the sides follow and open
the fan as they rise (-3deg -> -9deg), left 120ms after the centre, right 50ms after the left */
@keyframes fanrise { from { opacity: 0; transform: var(--from); } to { opacity: 1; transform: var(--to); } }
.js .hero-fan__dev { opacity: 0; animation: fanrise 1100ms var(--ease-out) both; }
.js .hero-fan__dev--c { animation-delay: 760ms; }
.js .hero-fan__dev--l { animation-delay: 880ms; }
.js .hero-fan__dev--r { animation-delay: 930ms; }
@media (max-width: 600px) {
.hero-fan { --screen-h: clamp(200px, 56vw, 260px); height: clamp(190px, 50vw, 240px); margin-top: 40px; }
.hero-fan__dev--l, .hero-fan__dev--r { --screen-h: calc(clamp(200px, 56vw, 260px) * .8); }
.hero-fan__dev--l { --to: translate(-104%, 26px) rotate(-9deg); --from: translate(-90%, 60px) rotate(-3deg); }
.hero-fan__dev--r { --to: translate(4%, 26px) rotate(9deg); --from: translate(-10%, 60px) rotate(3deg); }
}
/* reduced motion: collapse the choreography; the fan simply fades in, all at once, already in place */
@media (prefers-reduced-motion: reduce) {
.js .hero-fan__dev { animation: fadeonly 400ms ease both; animation-delay: 0ms; }
}
@keyframes fadeonly { from { opacity: 0; } to { opacity: 1; } }
/* first screen: tighter top so the fan's tops peek above the fold; soft fade at the hero's foot */
.hero--mesh { padding-top: calc(68px + clamp(40px, 6.5vw, 84px)); }
.hero-fan { margin-top: clamp(36px, 4.5vw, 56px); }
.hero--mesh::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; z-index: -1; pointer-events: none;
background: linear-gradient(180deg, transparent, var(--night) 85%); }
/* the fan's mask clips anything outside its box, so outer shadows/glow showed as a hard rectangle:
keep only the bezel rings here (the hero's own orange glow sits behind the fan already) */
.hero-fan__dev .rs-proof, .hero-fan__dev--c .rs-proof { box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.16), 0 0 0 1px rgba(255,255,255,.14); }
/* hero without the trust line and facts: the fan sits right under the CTAs */
.hero-fan { margin-top: clamp(40px, 5vw, 64px); }
/* ===== See your clips -> Pricing (v12) =====
the clips gradient now ends in the pricing tint (same fade as at its top), so the two sections
melt together; no pause button, so the gap to the pricing heading drops from ~244px to ~140px */
.cs { background: linear-gradient(180deg, var(--bg), var(--sky-50) 55%, #F3F8FB); padding-bottom: clamp(32px, 4vw, 48px); }
.cs + .pricing { padding-top: clamp(64px, 7vw, 92px); }
/* the moving rows still stop for anyone who wants to read a card: hover or keyboard focus pauses them */
.cs-track:hover .cs-row, .cs-track:focus-within .cs-row { animation-play-state: paused; }
/* ===== Full Presence: a crown resting on the card's top-right corner (v13) =====
Seen once per visit, marks the top tier -> a small delight budget.
1) lands once when the card reveals (drop + settle, ease-out, ~700ms)
2) a rare light sheen across the metal (first at ~3s, then every 7s)
3) lifts a touch on card hover (pointer devices only, 250ms ease-out)
No drop shadow: it rests ON the card, it doesn't float above it. */
.crown { position: absolute; top: -27px; right: 4px; z-index: 3; width: 56px; pointer-events: none;
transform: rotate(16deg); transform-origin: 50% 100%; }
.crown__tilt { display: block; transform-origin: 50% 100%; transition: transform 250ms var(--ease-out); }
.crown svg { display: block; width: 100%; height: auto; overflow: visible; }
.crown__sheen { transform-box: view-box; }
@media (prefers-reduced-motion: no-preference) {
.js .plan-card--crown .crown { opacity: 0; }
.js .plan-card--crown.is-in .crown { animation: crown-land 720ms var(--ease-out) 520ms both; }
.js .plan-card--crown.is-in .crown__sheen { animation: crown-sheen 7s var(--ease-in-out) 3s infinite; }
}
@keyframes crown-land {
0% { opacity: 0; transform: translateY(-16px) rotate(28deg); }
55% { opacity: 1; transform: translateY(1px) rotate(14deg); }
100% { opacity: 1; transform: translateY(0) rotate(16deg); }
}
@keyframes crown-sheen {
0%, 82% { transform: skewX(-18deg) translateX(0); }
100% { transform: skewX(-18deg) translateX(120px); }
}
@media (hover: hover) and (pointer: fine) {
.plan-card--crown:hover .crown__tilt { transform: translateY(-3px) rotate(-4deg); }
}
/* ============ v12: review fixes ============ */
/* nav: solid dark glass once scrolled over the dark hero + results block */
.nav.on-dark.is-scrolled { background: rgba(2,7,10,.74); backdrop-filter: saturate(1.3) blur(14px); -webkit-backdrop-filter: saturate(1.3) blur(14px); border-bottom-color: rgba(255,255,255,.06); }
/* problem section without the calculator */
/* fewer tiny mono labels */
.hx-step { font-size: .85rem; }
.hx-who { font-size: .78rem; letter-spacing: 0; text-transform: none; }
.hx-meta dt { font: 400 .82rem/1.2 var(--font-sans); letter-spacing: 0; text-transform: none; }
.hx-label { font: 500 .86rem/1.35 var(--font-sans); letter-spacing: -0.005em; text-transform: none; }
.hx-k { font: 400 .78rem/1.2 var(--font-sans); letter-spacing: 0; text-transform: none; }
.cs-plat { font: 500 .78rem/1 var(--font-sans); }
.footer__h { font: 500 .9rem/1.2 var(--font-sans); letter-spacing: 0; text-transform: none; color: #fff; }
/* guarantee under the pricing cards */
.guarantee { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 48px auto 0; max-width: 720px; text-align: left; font-size: .98rem; color: var(--ink-2, #3B4350); }
.guarantee svg { flex: none; width: 24px; height: 24px; color: #0297DE; }
.guarantee b { color: var(--ink); font-weight: 600; }
/* founding box: one quiet line instead of the spot meter */
.spots__l { font-size: .95rem; }
/* sticky mobile CTA */
.m-cta { display: none; }
@media (max-width: 860px) {
.m-cta { position: fixed; z-index: 60; left: 16px; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 22px; min-height: 56px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 500; font-size: 1rem; box-shadow: 0 10px 30px rgba(2,7,10,.28), inset 0 1px 0 rgba(255,255,255,.08); transform: translateY(calc(100% + 24px)); opacity: 0; pointer-events: none; transition: transform 320ms cubic-bezier(.23,1,.32,1), opacity 200ms ease; -webkit-tap-highlight-color: transparent; }
.m-cta.is-on { transform: none; opacity: 1; pointer-events: auto; }
.m-cta__ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: var(--ink); }
.m-cta__ico svg { width: 16px; height: 16px; }
.m-cta:active { transform: scale(.98); }
}
@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
.m-cta { transition: opacity 150ms ease; transform: none; }
}
/* hero without the "Open" pill: pull the rest up a little */
.hero--mesh { padding-top: calc(68px + clamp(32px, 5vw, 64px)); }
/* founder bio as a pull quote: big Instrument Serif marks in brand blue */
.fd .fd-quote { position: relative; }
.fd-q { font-family: var(--font-serif); font-size: clamp(5rem, 7vw, 6.5rem); line-height: 1; pointer-events: none; font-style: italic; font-weight: 400; color: #0297DE; user-select: none; }
/* opening mark sits above the text, optically aligned to its left edge */
.fd-q--open { position: absolute; left: -0.5em; top: -0.16em; }
/* closing mark hangs off the last word, a step larger than the text */
.fd-q--close { position: absolute; right: -0.42em; bottom: -0.64em; }
/* quotes hang outside the text block; the bio column leaves room for them */
.fd .fd-quote { max-width: 50ch; }
@media (max-width: 1100px) { .fd .fd-quote { padding: 0 52px; } .fd-q--open { left: -0.08em; } .fd-q--close { right: -0.08em; } }
/* desktop: closing mark sits right after "…you." without affecting the line */
@media (min-width: 1101px) {
.fd-last { position: relative; white-space: nowrap; }
.fd-q--close { right: auto; bottom: auto; left: 100%; top: 0.02em; margin-left: .08em; }
}
/* mobile: smaller marks, narrower indent */
@media (max-width: 1100px) {
.fd-q { font-size: 3.6rem; }
.fd .fd-quote { padding: 0 38px; }
}
/* tighter gap between the founder section and "What you get" */
.fd { padding-bottom: clamp(56px, 7vw, 96px); }
.fd + #what { padding-top: clamp(64px, 8vw, 112px); }
/* November plan: rows stay inside the panel on narrow screens */
.hx-tree { grid-template-columns: minmax(0, 1fr); }
.hx-tree li { min-width: 0; }
.hx-tree .hx-t { min-width: 0; }
@media (max-width: 600px) {
.hx-tree { padding-left: 18px; }
.hx-tree li { gap: 8px; padding: 9px 10px; }
.hx-tree .hx-t { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; }
}
/* ============ v13: "What you get" trimmed to four cards ============ */
/* card copy in the ink, not small grey */
.bn .bento__item .muted { color: var(--ink-2, #3B4350); font-size: 1rem; line-height: 1.5; }
.bento__item--wide:first-child .muted { color: rgba(255,255,255,.78); }
/* labels in plain text, no uppercase mono */
.hook__row span, .hook__row:first-child span, .hook__row--after span { font-family: var(--font-sans); text-transform: none; letter-spacing: 0; font-size: .8rem; font-weight: 500; }
.bn-voice__row > span { font: 500 .82rem/1.2 var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--muted-2); }
.bn-grades small { font: 500 .78rem/1 var(--font-sans); }
/* these cards are not links: no hover lift */
.bento__item:hover { translate: none; box-shadow: none; }
/* report: what it covers, as plain rows (no nested card) */
.bn-rep { list-style: none; margin: 0; padding: 0; display: grid; align-content: center; }
.bn-rep li { display: grid; grid-template-columns: 9.5rem 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.bn-rep li:last-child { border-bottom: 1px solid var(--line); }
.bn-rep b { font-weight: 600; font-size: .98rem; }
.bn-rep span { color: var(--ink-2, #3B4350); font-size: .95rem; line-height: 1.45; }
@media (max-width: 600px) { .bn-rep li { grid-template-columns: 1fr; gap: 4px; } }
.hook__row--after span { color: #C2492A; }
.bento__item--wide:first-child .hook__row--after span { color: #C2492A; }
.bn-voice, .bn-grades { margin-top: 0; padding-top: 22px; }
.bn-rep li { grid-template-columns: 8rem 1fr; }
/* ============ v14: accessibility fixes from the tasteskill checker ============ */
/* small labels: darker grey so they pass 4.5:1 on white */
:root { --muted-2: #66707A; }
.hx-who--you { color: #A33B1E; }
/* phone tap targets: 44px */
.nav__toggle { width: 44px; height: 44px; }
@media (max-width: 600px) { .cs-bar .btn { height: 44px; } }
.rs-seg { height: 44px; }
.rs-segs { align-items: center; }
/* reduced motion: show the finished page at once, nothing waits for a scroll */
@media (prefers-reduced-motion: reduce) {
.js .reveal, .js .section__head > *, .js .h2--words .w, .js .fd__badge, .js .fd__photo,
.js .bento__item.reveal, .js .plan-card.reveal, .js .reel.reveal {
opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; animation: none !important; }
}
/* ============ v15: booking section fixes ============ */
.booker__sub { margin-top: 6px; font-size: .95rem; line-height: 1.45; color: rgba(255,255,255,.72); max-width: 46ch; }
.booker__tz { margin-top: 14px; font-size: .88rem; color: rgba(255,255,255,.66); text-align: left; }
/* the count is a plain fact: no pulsing dot */
/* (pulsing dot kept, per user) */
/* tighter gap after the FAQ */
#faq { padding-bottom: clamp(48px, 6vw, 88px); }
@media (max-width: 600px) { .booker__sub { font-size: .9rem; } .booker__tz { text-align: center; } }
/* phone: title and line on their own row, then ‹ count › underneath */
@media (max-width: 700px) {
.booker__head { grid-template-columns: auto 1fr auto; row-gap: 14px; }
.booker__title { grid-column: 1 / -1; grid-row: 1; order: 0; text-align: center; }
.booker__sub { margin-inline: auto; }
.booker__head > [data-week="-1"] { grid-column: 1; grid-row: 2; }
.booker__left { grid-column: 2; grid-row: 2; justify-self: center; order: 0; }
.booker__head > [data-week="1"] { grid-column: 3; grid-row: 2; }
}
/* weekday labels in the body face, not uppercase mono */
.bk-wd, .bk-day__wd { font-family: var(--font-sans) !important; letter-spacing: 0 !important; text-transform: none !important; font-size: .82rem !important; }
/* ============ restored: offer "1" struck through, "2" written by hand ============ */
.ink { display: inline-flex; align-items: flex-end; margin: 0; vertical-align: -0.24em; white-space: nowrap; }
.ink__one { position: relative; display: inline-block; font-size: 1.15em; font-weight: 500; line-height: 1; color: #fff; opacity: .5; }
/* slot for the 2: open in the final state; collapsed to 0 before the strike so the sentence reads naturally */
.ink__slot { display: inline-flex; justify-content: flex-end; width: 1.5em; overflow: hidden; }
@keyframes ink-open { from { width: 0; } to { width: 1.5em; } }
.ink__x { position: relative; top: -0.16em; display: inline-block; line-height: 1; }
.ink__strike { position: absolute; left: -0.08em; top: .02em; width: calc(100% + .16em); height: 1.25em; overflow: visible; pointer-events: none; }
.ink__two { flex: none; width: 1.3em; height: 1.65em; overflow: visible; }
.ink__strike path, .ink__two path { fill: none; stroke: #FC734D; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; vector-effect: non-scaling-stroke; }
.ink__strike path { stroke-width: 3.4px; }
.ink__two path { stroke-width: 3.6px; }
@keyframes ink-in { from { opacity: 0; transform: translateY(4px); } to { opacity: .85; transform: none; } }
@keyframes ink-dim { from { opacity: .85; } to { opacity: .5; } }
@keyframes ink-draw { 0% { stroke-dashoffset: 1; opacity: 0; } 1% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
.js .reveal-offer .ink__one { opacity: 0; }
.js .reveal-offer .ink path { stroke-dashoffset: 1; opacity: 0; }
.js .reveal-offer .ink__slot { width: 0; }
/* after the strike, the rest of the sentence slides right to make room (one-off, so a width transition is acceptable) */
.js .reveal-offer.is-in .ink__slot { animation: ink-open 460ms var(--ease-in-out) 1380ms both; }
.js .reveal-offer.is-in .ink__one { animation: ink-in 400ms var(--ease-out) both, ink-dim 380ms var(--ease-in-out) 1000ms forwards; }
.js .reveal-offer.is-in .ink__strike path { animation: ink-draw 380ms var(--ease-in-out) 1000ms both; }
.js .reveal-offer.is-in .ink__two path { animation: ink-draw 750ms var(--ease-in-out) 1720ms both; }
}
/* ============ v16: Results panel — the number as a headline sentence ============ */
.rs-head { margin: 0; font-size: clamp(2.6rem, 4.6vw, 4.3rem); font-weight: 600; line-height: 1.02; letter-spacing: -0.042em; color: #fff; max-width: 11ch; min-height: 3.06em; }
.rs-head__n, .rs-head__t { display: block; }
.rs-head__n .js-rs-big { font-variant-numeric: tabular-nums; background: linear-gradient(180deg, #fff 30%, #9AD8F7); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-bottom: .04em; }
.rs-head__u { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 1.1em; letter-spacing: -0.01em; color: #FF9A7B; -webkit-text-fill-color: #FF9A7B; }
.rs-head__t { color: rgba(255,255,255,.86); }
/* growth: a plain sentence, no pill */
.rs-growth { display: block; margin: 22px 0 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
font-size: 1.12rem; font-weight: 400; line-height: 1.45; color: rgba(255,255,255,.7); max-width: 34ch; }
.rs-growth::before, .rs-growth::after { content: none; }
.rs-growth b { font-weight: 600; color: #7FD0F5; }
.rs-head__t, .rs-growth { transition: opacity 170ms ease, transform 260ms var(--ease-out); }
.rs-head__t.is-out, .rs-growth.is-out { opacity: 0; transform: translateY(4px); }
/* metrics: quieter so the headline leads */
.rs-metrics { margin-top: 30px; }
.rs-m__n { font-size: clamp(1.35rem, 2vw, 1.6rem); }
@media (max-width: 600px) {
.rs-head { font-size: clamp(2.3rem, 10vw, 2.8rem); max-width: none; min-height: 2.06em; }
.rs-growth { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .rs-head__t, .rs-growth { transition: none; } }
/* v16b: proportions — the number leads, the rest reads as its caption line */
.rs-head { font-size: clamp(1.5rem, 2.2vw, 2rem); max-width: none; min-height: 0; line-height: 1.15; letter-spacing: -0.025em; }
.rs-head__n { font-size: clamp(4.2rem, 7.4vw, 6.6rem); line-height: .95; letter-spacing: -0.05em; white-space: nowrap; }
.rs-head__u { font-size: .78em; margin-left: .04em; }
.rs-head__t { margin-top: 14px; font-weight: 500; color: rgba(255,255,255,.78); }
.rs-growth { margin-top: 10px; }
@media (max-width: 600px) {
.rs-head { font-size: 1.35rem; min-height: 0; }
.rs-head__n { font-size: clamp(3.4rem, 15vw, 4.2rem); }
.rs-head__t { margin-top: 10px; }
}
/* ============ v17: hand-written note + arrow pointing at the number; bigger deck ============ */
.rs-head__t { padding-left: 64px; }
.rs-growth { position: relative; padding-left: 64px; margin-top: 14px; max-width: none; }
.rs-growth__t { display: block; max-width: 22ch; font-family: var(--font-serif); font-style: italic; font-size: clamp(1.35rem, 1.9vw, 1.6rem); line-height: 1.2; letter-spacing: -0.005em; color: #9AD8F7; }
.rs-growth b { font-weight: 400; color: #fff; }
.rs-scribble { position: absolute; left: 2px; top: calc(.55em - 104px); width: 56px; height: 100px; overflow: visible; pointer-events: none; }
.rs-scribble path { fill: none; stroke: #9AD8F7; stroke-width: 2.2px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
@keyframes rs-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: no-preference) {
.rs-growth.is-draw .rs-scribble__body { animation: rs-draw 650ms cubic-bezier(0.23, 1, 0.32, 1) both; }
.rs-growth.is-draw .rs-scribble__head { animation: rs-draw 240ms cubic-bezier(0.23, 1, 0.32, 1) 520ms both; }
}
/* bigger devices; on wide screens the deck runs further right */
.rs { --screen-h: clamp(340px, 37vw, 520px); }
@media (min-width: 1100px) {
.rs { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); }
.rs-deck { margin-right: calc(-1 * clamp(0px, (100vw - 1280px) / 2 + 40px, 160px)); }
}
@media (max-width: 860px) { .rs { --screen-h: clamp(250px, 70vw, 330px); } }
@media (max-width: 600px) {
.rs-head__t, .rs-growth { padding-left: 52px; }
.rs-growth__t { font-size: 1.25rem; }
.rs-scribble { width: 46px; height: 84px; top: calc(.55em - 88px); }
}
/* arrow tip stops just under the number instead of touching it */
.rs-scribble { translate: 0 12px; }
@media (max-width: 600px) { .rs-scribble { translate: 0 10px; } }
/* progress bars in plain white */
.rs-seg i { background: #fff; }
/* "edit bay" in a blue gradient (Results only) */
.results__head .h2 em { background: linear-gradient(90deg, #9AD8F7, #39B5F0 55%, #0297DE); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.results__head .h2 em .w { background: inherit; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
/* founder: what you get / what I won't do as short lists */
.fd-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.fd-list li { display: flex; align-items: flex-start; gap: 10px; color: var(--muted); font-size: .95rem; line-height: 1.4; }
.fd-list svg { flex: none; width: 20px; height: 20px; padding: 3px; margin-top: 0; border-radius: 50%; }
.fd-list--yes svg { background: var(--sky-50); color: var(--sky-700); }
.fd-list--no svg { background: rgba(2,7,10,.05); color: var(--muted-2); }
/* "views in one month." as a small caption under the number */
.rs-head { font-size: 1.2rem; letter-spacing: -0.01em; }
.rs-head__t { margin-top: 12px; font-weight: 400; color: rgba(255,255,255,.7); }
@media (max-width: 600px) { .rs-head { font-size: 1.05rem; } }
/* shorter arrow now that the caption is small */
@media (min-width: 601px) and (max-width: 860px) { .rs-scribble:not(.rs-scribble--side) { height: 74px; width: 44px; top: calc(.55em - 76px); } }
@media (max-width: 600px) { .rs-scribble:not(.rs-scribble--side) { height: 62px; width: 38px; top: calc(.55em - 64px); } }
/* ============ v20: Results tightened ============ */
.results .results__head { margin-bottom: 40px; }
.results { padding-bottom: clamp(56px, 7vw, 96px); }
@media (min-width: 861px) {
.rs { align-items: start; }
.rs-panel { padding-top: clamp(28px, 3vw, 44px); }
}
/* the controls sit right under the note now that the metric row is gone */
.rs-controls { margin-top: 36px; }
/* once autoplay has stopped, the current bar reads as full, not frozen half-way */
.rs.is-stopped .rs-seg.is-on i { animation: none; transform: scaleX(1); }
/* ============ v21: controls under the devices; note lower with a long arrow up to the number ============ */
.rs-scribble--tall { display: none; }
@media (min-width: 861px) {
.rs { grid-template-areas: "panel deck" "panel ctrl"; row-gap: 0; }
.rs-panel { grid-area: panel; }
.rs-deck { grid-area: deck; }
.rs-controls { grid-area: ctrl; justify-self: center; width: min(440px, 100%); margin-top: 22px; }
.rs-growth { margin-top: 118px; }
.rs-growth > .rs-scribble:not(.rs-scribble--tall) { display: none; }
.rs-scribble--tall { display: block; width: 60px; height: 170px; top: calc(.55em - 172px); }
}
@media (min-width: 1100px) {
/* the deck bleeds right; keep the controls centred under the devices */
.rs-controls { translate: calc(clamp(0px, (100vw - 1280px) / 2 + 40px, 160px) / 2) 0; }
}
@media (min-width: 861px) {
.rs-growth { margin-top: 178px; }
.rs-scribble--tall { height: 230px; top: calc(.55em - 232px); }
}
/* no manual controls: the devices advance on their own (pause on hover/focus), drag or tap a device to switch */
.rs-controls { display: none !important; }
/* ============ v26: growth note in white with a hand-drawn underline under the figure ============ */
.rs-growth__t, .rs-growth__t .js-rs-vs { color: #fff; }
.rs-growth b { color: #fff; }
.rs-ul { position: relative; display: inline-block; white-space: nowrap; }
.rs-ul__line { position: absolute; left: -3%; width: 106%; bottom: -0.22em; height: .42em; overflow: visible; pointer-events: none; }
.rs-ul__line path { fill: none; stroke: #39B5F0; stroke-width: 2.4px; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
@keyframes rs-ul-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: no-preference) {
.rs-ul.is-draw .rs-ul__line path { animation: rs-ul-draw 450ms var(--ease-out) 140ms both; }
}
.rs-ul__line { height: auto; aspect-ratio: 140 / 12; bottom: -0.3em; }
.rs-ul__line path { vector-effect: none; stroke-width: 3; }
/* room for the underline between the two lines of the note */
.rs-growth__t { line-height: 1.5; }
.rs-ul__line { bottom: -0.16em; }
/* keep the note on as few lines as possible */
.rs-growth__t { max-width: none; }
/* ============ v27: platforms strip as a real band — the step from the dark Results to the light page ============ */
.pf { background: #F2F4F7; border-top: 1px solid #DCE1E7; border-bottom: 1px solid #DCE1E7; padding: 0; text-align: left; }
.pf > * { position: relative; }
@media (min-width: 861px) {
.pf { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: stretch; }
.pf__label { display: flex; align-items: center; margin: 0; padding: 0 28px 0 max(24px, calc((100vw - 1096px) / 2)); border-right: 1px solid #DCE1E7; font-size: .86rem; line-height: 1.35; color: #5B6572; max-width: calc(16ch + max(24px, calc((100vw - 1096px) / 2)) + 28px); }
.pf .marquee { margin: 0; padding: 26px 0; }
}
@media (max-width: 860px) {
.pf { padding: 18px 0 2px; text-align: center; }
.pf .marquee { margin-top: 10px; padding-bottom: 18px; }
}
.pf .marquee__track span { color: #7F8A97; }
/* ============ v28: shorter Results — smaller devices, note and arrow higher ============ */
.rs { --screen-h: clamp(300px, 29vw, 420px); }
@media (min-width: 861px) {
.rs-growth { margin-top: 96px; }
.rs-scribble--tall { height: 150px; width: 44px; top: calc(.55em - 152px); }
}
/* softer fade at the bottom of the hero devices */
.hero-fan { -webkit-mask-image: linear-gradient(180deg, #000 45%, rgba(0,0,0,.95) 55%, rgba(0,0,0,.84) 64%, rgba(0,0,0,.66) 73%, rgba(0,0,0,.44) 82%, rgba(0,0,0,.22) 91%, transparent 100%); mask-image: linear-gradient(180deg, #000 45%, rgba(0,0,0,.95) 55%, rgba(0,0,0,.84) 64%, rgba(0,0,0,.66) 73%, rgba(0,0,0,.44) 82%, rgba(0,0,0,.22) 91%, transparent 100%); }
/* v29: the moving strip runs the full width of the screen; the label sits over its left end */
@media (min-width: 861px) {
.pf { display: block; position: relative; }
.pf .marquee { padding: 26px 0; -webkit-mask-image: none; mask-image: none; }
.pf .marquee__track { animation-duration: 56s; }
.pf__label { position: absolute; z-index: 2; top: 0; bottom: 0; left: 0; max-width: none; width: auto;
padding: 0 56px 0 max(24px, calc((100vw - 1096px) / 2)); border-right: 0;
background: linear-gradient(90deg, #F2F4F7 0%, #F2F4F7 calc(100% - 56px), rgba(242,244,247,0) 100%); }
.pf__label { white-space: normal; }
.pf__label::after { content: ""; position: absolute; top: 18px; bottom: 18px; right: 56px; width: 1px; background: #DCE1E7; }
.pf::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 80px; pointer-events: none; background: linear-gradient(90deg, rgba(242,244,247,0), #F2F4F7); }
}
/* label is for screen readers only; the moving strip spans the whole screen with soft fades at both edges */
.pf__label.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; background: none; }
.pf__label.sr-only::after { display: none; }
.pf { padding: 0; }
.pf .marquee { margin: 0; padding: 26px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.pf::after { display: none; }
@media (max-width: 860px) { .pf .marquee { padding: 20px 0; } }
/* ============ v30: "14.3 million" — display typography ============ */
/* lighter weight + tighter tracking read more premium at display size; a soft blue glow lifts it off the dark */
.rs-head__n { font-weight: 500; letter-spacing: -0.065em; filter: drop-shadow(0 10px 40px rgba(57,181,240,.22)); }
.rs-head__n .js-rs-big { background: linear-gradient(180deg, #FFFFFF 18%, #DDF1FC 58%, #8FD3F6 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
/* "million": same orange gradient as the other serif accents, sat a touch closer to the figure */
.rs-head__u { margin-left: .12em; padding-right: .06em; background: linear-gradient(90deg, #FFC9B5, #FC734D); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
/* growth note in the same face as "Numbers from the" (sans, tight), not the serif italic */
.rs-growth__t { font-family: var(--font-sans); font-style: normal; font-weight: 500; font-size: clamp(1.2rem, 1.6vw, 1.4rem); letter-spacing: -0.025em; }
.rs-growth b { font-weight: 600; }
/* "million" in the same face as "Numbers from the" (sans, semibold, tight) */
.rs-head__u { font-family: var(--font-sans); font-style: normal; font-weight: 600; font-size: .62em; letter-spacing: -0.04em; margin-left: .18em; padding-right: 0; }
/* the figure uses the heading weight too, so "14" and "million" read as one line of the same face */
.rs-head__n { font-weight: 600; letter-spacing: -0.05em; }
/* ============ v31: the stat as one plain sentence — one face, one size, one colour ============ */
.rs-head { font-family: var(--font-sans); font-size: clamp(2.4rem, 4.2vw, 3.6rem); font-weight: 600; line-height: 1.08; letter-spacing: -0.04em; color: #fff; max-width: 13ch; min-height: 0; }
.rs-head__n, .rs-head__t { display: inline; font-size: inherit; font-weight: inherit; letter-spacing: inherit; line-height: inherit; white-space: normal; margin: 0; padding: 0; filter: none; color: #fff; }
.rs-head__n .js-rs-big, .rs-head__u { background: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: #fff; color: #fff;
font-family: inherit; font-style: normal; font-weight: inherit; font-size: inherit; letter-spacing: inherit; margin: 0; padding: 0; }
.rs-head__t { padding-left: 0 !important; }
/* note under the sentence; the arrow leaves its left side and curls up to the sentence */
.rs-growth { margin-top: 64px !important; }
.rs-growth > .rs-scribble--tall { display: none !important; }
.rs-growth > .rs-scribble:not(.rs-scribble--tall) { display: block !important; width: 44px; height: 76px; top: calc(.55em - 78px); translate: none; }
@media (max-width: 600px) {
.rs-head { font-size: clamp(2rem, 9vw, 2.5rem); max-width: none; }
.rs-growth { margin-top: 52px !important; }
.rs-growth > .rs-scribble:not(.rs-scribble--tall) { width: 38px; height: 62px; top: calc(.55em - 64px); }
}
.rs-growth > .rs-scribble:not(.rs-scribble--tall) { translate: 0 8px !important; }
/* arrow and underline in the brand orange */
.rs-scribble path, .rs-ul__line path { stroke: #FC734D; }
/* "14 million views" in the brand orange, the rest of the sentence stays white */
.rs-head__n .js-rs-big, .rs-head__u { -webkit-text-fill-color: #FC734D !important; color: #FC734D !important; }
/* ============ v32: scroll story — the section pins and the devices slide sideways with the scroll ============ */
@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
.rs-pin-track { height: calc(100vh + 4 * 55vh); }
.rs-pin { position: sticky; top: calc(68px + max(24px, (100vh - 68px - var(--pin-h, 620px)) / 2)); }
.rs.is-story .rs-card { transition: transform 160ms linear, opacity 160ms linear; }
.rs.is-story .rs-deck { cursor: default; }
}
/* sticky needs a non-scrolling clip on the section (overflow:hidden would break position:sticky) */
.results { overflow: clip; }
/* v33: the whole Results block (title + figures + devices) pins together, right under the nav */
@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
.rs-pin { top: 68px; padding-top: clamp(28px, 4vh, 56px); }
.hero--mesh + .results { padding-top: 0; }
.rs-pin-track { height: calc(var(--pin-h, 100vh) + 4 * 50vh); }
}
@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
.rs-pin { min-height: calc(100vh - 68px); box-sizing: border-box; }
.rs-pin-track { height: calc(100vh - 68px + 4 * 50vh); }
}
/* v34: the spring in JS does the easing, so no CSS transition on the devices during the scroll story */
@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
.rs.is-story .rs-card { transition: none; }
.rs-pin { display: flex; flex-direction: column; justify-content: center; }
.results { padding-bottom: 0; }
}
@media (min-width: 861px) and (prefers-reduced-motion: no-preference) { .rs.is-story .rs-deck { cursor: grab; } }
/* soft hand-off from the tinted "How it works" into the white founder section (no hard line) */
.fd { background: linear-gradient(180deg, var(--bg-tint) 0%, var(--bg) 360px); }