/* Ditto — scroll-driven hero → product camera scene. Vanilla CSS. */
:root{
  --u-ui:   clamp(0.93px, calc(100vw / 1644), 1.15px);
  --u-hero: clamp(0.74px, calc(100vw / 1644), 1.3px);
  --u-shot: clamp(0.62px, min(calc(100vw / 1644), calc(100svh / 1033)), 1.45px);

  --gutter-start: clamp(24px, 2.129vw, 56px);
  --gutter-end:   clamp(26px, 2.311vw, 60px);
  --scene-travel: 300svh;

  --color-void:            #050705;
  --color-white:           #FFFFFF;
  --color-ink:             #0A0A0A;
  /* accent is swappable: ?accent=mint|ivory|sky|green */
  --accent:      #A9CCFF;  --accent-rgb: 169,204,255;  --accent-text: #D3E4FF;
  --glow-rgb:    169,204,255; --glow-a1:.04; --glow-a2:.12;
  --color-green: var(--accent);
  --color-button-solid:    #E9E9E9;
  --color-nav-surface:     rgba(6, 8, 6, 0.38);
  --color-actions-surface: rgba(0, 0, 0, 0.35);
  --color-badge-surface:   rgba(0, 0, 0, 0.3);
  --color-card:            rgba(10, 12, 10, 0.42);
  --color-text-muted:      rgba(255, 255, 255, 0.8);

  --glow: radial-gradient(109.987% 112.486% at 50% 0%,
    rgba(var(--glow-rgb), 0) 62%, rgba(var(--glow-rgb), var(--glow-a1)) 84%, rgba(var(--glow-rgb), var(--glow-a2)) 100%);

  --font-display: 'Geist', 'Helvetica Neue', Arial, sans-serif;
  --font-accent:  'Instrument Serif', 'Times New Roman', serif;
  --font-ui:      'Geist', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-ui-mono: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}

html[data-accent="green"]{--accent:#00C805; --accent-rgb:0,200,5; --accent-text:var(--accent-text); --glow-rgb:0,200,5; --glow-a1:.08; --glow-a2:.2}
html[data-accent="ivory"]{--accent:#F1E6CF; --accent-rgb:241,230,207; --accent-text:#F1E6CF; --glow-rgb:241,230,207; --glow-a1:.04; --glow-a2:.12}
html[data-accent="mint"]{--accent:#A8F0C6; --accent-rgb:168,240,198; --accent-text:#D2F7E1; --glow-rgb:168,240,198; --glow-a1:.04; --glow-a2:.12}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; background:var(--color-void)}
body{margin:0; background:var(--color-void); color:#fff; font-family:var(--font-ui); font-weight:450;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden}
h1,h2,p,ul{margin:0} ul{padding:0; list-style:none} a{color:inherit; text-decoration:none}
img,svg{display:block} button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
:focus-visible{outline:2px solid rgba(255,255,255,.85); outline-offset:3px; border-radius:4px}

/* =================== HEADER =================== */
.site-header{position:fixed; z-index:10; top:calc(29 * var(--u-ui)); left:0; right:0}
.site-header__inner{position:relative; display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--gutter-end) 0 var(--gutter-start)}
.brand{display:inline-flex; align-items:center; gap:calc(11.57 * var(--u-ui)); margin-top:calc(4 * var(--u-ui))}
.brand__mark{inline-size:calc(30 * var(--u-ui)); block-size:calc(30 * var(--u-ui))} .brand__mark svg{width:100%; height:100%}
.brand__name{font-family:var(--font-display); font-weight:600; font-size:calc(26 * var(--u-ui)); line-height:.95; letter-spacing:-0.04em}
.nav{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; align-items:center;
  height:calc(52 * var(--u-ui)); min-width:calc(343 * var(--u-ui)); padding:0 calc(24 * var(--u-ui)); gap:calc(30 * var(--u-ui));
  justify-content:center; border-radius:calc(11 * var(--u-ui)); background:var(--color-nav-surface);
  backdrop-filter:blur(calc(14.6 * var(--u-ui))); -webkit-backdrop-filter:blur(calc(14.6 * var(--u-ui)))}
.nav__link{font-size:calc(14 * var(--u-ui)); letter-spacing:-0.02em; color:var(--color-text-muted); transition:color .18s ease; white-space:nowrap}
.nav__link:hover{color:#fff}
.header-actions{display:flex; align-items:center; height:calc(52 * var(--u-ui)); padding:calc(3 * var(--u-ui)); gap:calc(5 * var(--u-ui));
  border-radius:calc(13 * var(--u-ui)); background:var(--color-actions-surface);
  backdrop-filter:blur(calc(14.6 * var(--u-ui))); -webkit-backdrop-filter:blur(calc(14.6 * var(--u-ui)))}
.button{display:inline-flex; align-items:center; justify-content:center; height:calc(46 * var(--u-ui)); padding:0 calc(24 * var(--u-ui));
  border-radius:calc(11 * var(--u-ui)); font-size:calc(14 * var(--u-ui)); letter-spacing:-0.02em; white-space:nowrap; transition:background .18s ease, color .18s ease, border-color .18s ease}
.button--ghost{min-width:calc(84 * var(--u-ui)); background:transparent} .button--ghost:hover{background:rgba(255,255,255,.1)}
.button--solid{min-width:calc(131 * var(--u-ui)); background:var(--color-button-solid); color:var(--color-ink)} .button--solid:hover{background:#fff}
.button--lg{height:calc(56 * var(--u-hero)); padding:0 calc(28 * var(--u-hero)); font-size:calc(16 * var(--u-hero)); border-radius:calc(11 * var(--u-hero))}
.button--outline{border:1px solid rgba(255,255,255,.18)} .button--outline:hover{border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.06)}
.menu-toggle{display:none; flex-direction:column; justify-content:center; gap:5px; width:44px; height:44px; padding:10px; border-radius:11px; background:var(--color-actions-surface)}
.menu-toggle__bar{display:block; width:20px; height:1.5px; background:#fff; border-radius:1px; transition:transform .2s ease, opacity .2s ease}
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:first-child{transform:translateY(3.25px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:last-child{transform:translateY(-3.25px) rotate(-45deg)}
.mobile-menu{display:none}

/* =================== SCENE =================== */
.scene{position:relative; height:calc(100svh + var(--scene-travel)); background:var(--color-void)}
.scene__viewport{position:sticky; top:0; height:100svh; overflow:hidden; isolation:isolate;
  display:flex; flex-direction:column; justify-content:flex-end; align-items:center;
  padding-bottom:calc(78 * var(--u-hero))}
.scene__backdrop{position:absolute; inset:0; z-index:-1; overflow:hidden; background:var(--color-void)}
.scene__camera{position:absolute; inset:0; transform:scale(var(--cam-z, 1)); transform-origin:50% 50%}
.scene__photo{position:absolute; left:50%; top:50%; width:max(108.699%, 172.95svh); height:auto; max-width:none;
  transform:translate(var(--cam-x, -50%), var(--cam-y, -32%))}
.scene__glow{position:absolute; inset:0; background:var(--glow); opacity:var(--glow-o, 1)}
.scene__backdrop::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(5,7,5,.35) 0%, rgba(5,7,5,0) 25%, rgba(5,7,5,0) 70%, rgba(5,7,5,.45) 100%); pointer-events:none}
.is-moving .scene__camera, .is-moving .scene__photo{will-change:transform}
.is-moving .hero__content{will-change:transform}
.is-moving .hero__badge, .is-moving .hero__title, .is-moving .hero__subtitle, .is-moving .hero__actions{will-change:opacity, filter}

/* =================== HERO FRAME =================== */
.hero__content{position:relative; display:flex; flex-direction:column; align-items:center; gap:calc(30 * var(--u-hero));
  width:calc(763 * var(--u-hero)); max-width:100%;
  transform:translateY(calc(var(--hero-out, 0) * -163 * var(--u-hero))); visibility:var(--hero-vis, visible)}
.hero__badge, .hero__title, .hero__subtitle, .hero__actions{opacity:var(--hero-o, 1); filter:var(--hero-filter, none)}
.hero__badge{padding:calc(9.86 * var(--u-ui)) calc(14.03 * var(--u-ui)); border-radius:calc(5 * var(--u-ui)); background:var(--color-badge-surface);
  backdrop-filter:var(--badge-backdrop, blur(calc(14.6 * var(--u-ui)))); -webkit-backdrop-filter:var(--badge-backdrop, blur(calc(14.6 * var(--u-ui))))}
.hero__badge-row{display:flex; align-items:center; min-height:calc(24 * var(--u-ui)); gap:calc(8.18 * var(--u-ui))}
.hero__badge-label{font-size:calc(12 * var(--u-ui)); letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.55); white-space:nowrap}
.hero__badge-partners{font-size:calc(14 * var(--u-ui)); letter-spacing:-0.01em; white-space:nowrap}
.hero__title{width:100%; transform:translateX(-0.03em); font-family:var(--font-display); font-weight:400; font-size:calc(90 * var(--u-hero));
  line-height:.9444; letter-spacing:-0.05em; text-align:center; color:#fff}
.hero__title .line{display:block; clip-path:inset(-0.35em -0.6em -0.05em -0.6em)}
.hero__title .line__in{display:block}
.hero__title em{font-family:var(--font-accent); font-style:italic; font-weight:400; font-size:1.06em; letter-spacing:-0.02em;
  color:var(--accent)}
.hero__subtitle{width:calc(423 * var(--u-hero)); max-width:100%; font-size:calc(20 * var(--u-hero)); line-height:1.2; letter-spacing:-0.02em; text-align:center; color:var(--color-text-muted)}
.hero__actions{display:flex; gap:calc(12 * var(--u-hero)); margin-top:calc(6 * var(--u-hero))}

/* intro */
.js:not(.is-open) .hero__title .line__in{transform:translateY(100%); opacity:0}
.js:not(.is-open) .site-header, .js:not(.is-open) .hero__badge, .js:not(.is-open) .hero__subtitle, .js:not(.is-open) .hero__actions{opacity:0}
@keyframes line-reveal{0%{transform:translateY(100%); opacity:0} 25%{opacity:1} 100%{transform:translateY(0); opacity:1}}
@keyframes fade-in{to{opacity:1}}
.is-ready .site-header{animation:fade-in .35s linear forwards}
.is-ready .hero__title .line__in{animation:line-reveal .9s cubic-bezier(.16,1,.3,1) forwards}
.is-ready .hero__title .line:nth-child(1) .line__in{animation-delay:.08s}
.is-ready .hero__title .line:nth-child(2) .line__in{animation-delay:.21s}
.is-ready .hero__title .line:nth-child(3) .line__in{animation-delay:.34s}
.is-ready .hero__badge, .is-ready .hero__subtitle, .is-ready .hero__actions{animation:fade-in .35s linear .95s forwards}
.is-instant .site-header, .is-instant .hero__badge, .is-instant .hero__subtitle, .is-instant .hero__actions, .is-instant .hero__title .line__in{opacity:1 !important; transform:none !important; animation:none !important}
.is-open .site-header, .is-open .hero__badge, .is-open .hero__subtitle, .is-open .hero__actions, .is-open .hero__title .line__in{animation:none}
.is-open .hero__title .line{clip-path:none}
.is-open .site-header{opacity:1}
.is-open .hero__title .line__in{transform:none; opacity:1}

/* =================== PRODUCT FRAME =================== */
.platform__content{position:absolute; left:50%; top:20.813%; width:calc(901 * var(--u-shot)); transform:translateX(-50%);
  opacity:var(--plat-o, 1); visibility:var(--plat-vis, hidden); display:flex; flex-direction:column; align-items:center}
.pill, .platform__title{transform:translateX(calc(-8.25 * var(--u-shot))) translateY(calc((1 - var(--plat-text-p, 1)) * 638 * var(--u-shot)))}
.shot{transform:translateY(calc((1 - var(--plat-shot-p, 1)) * 555 * var(--u-shot)))}
.is-moving .pill, .is-moving .platform__title, .is-moving .shot{will-change:transform}

.pill{display:inline-flex; align-items:center; min-width:calc(138 * var(--u-shot)); gap:calc(10 * var(--u-shot)); padding:calc(12 * var(--u-shot)) calc(16 * var(--u-shot));
  border-radius:calc(6 * var(--u-shot)); background:rgba(6,8,6,.38); font-size:calc(12 * var(--u-shot)); letter-spacing:-0.01em; justify-content:center;
  backdrop-filter:blur(calc(14.6 * var(--u-shot))); -webkit-backdrop-filter:blur(calc(14.6 * var(--u-shot)))}
.pill__dot{width:calc(5 * var(--u-shot)); height:calc(5 * var(--u-shot)); border-radius:50%; background:var(--color-green); box-shadow:0 0 0 calc(3 * var(--u-shot)) rgba(var(--accent-rgb),.18)}
.platform__title{width:calc(700 * var(--u-shot)); margin-top:calc(39 * var(--u-shot)); font-family:var(--font-display); font-weight:400;
  font-size:calc(48 * var(--u-shot)); line-height:.9583; letter-spacing:-0.05em; text-align:center}

.shot{position:relative; width:calc(901 * var(--u-shot)); height:calc(680 * var(--u-shot)); margin-top:calc(50 * var(--u-shot))}
.shot__window{position:relative; width:100%; height:100%; font-size:calc(10 * var(--u-shot))}
.shot__window::before{content:''; position:absolute; left:0; top:0; width:calc(900 * var(--u-shot)); height:100%; border-radius:calc(7 * var(--u-shot));
  background:rgba(12,13,12,.42); backdrop-filter:blur(calc(49.25 * var(--u-shot))); -webkit-backdrop-filter:blur(calc(49.25 * var(--u-shot)))}
.shot__window::after{content:''; position:absolute; inset:0; width:calc(900 * var(--u-shot)); border-radius:calc(7 * var(--u-shot)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); pointer-events:none}

/* toolbar */
.shot__toolbar{position:absolute; left:0; top:0; width:calc(899.24 * var(--u-shot)); height:calc(37.23 * var(--u-shot));
  border-radius:calc(7.025 * var(--u-shot)) calc(7.025 * var(--u-shot)) 0 0; background:#151716}
.shot__toolbar svg{position:absolute; fill:none; stroke:#fff; stroke-width:1; stroke-linecap:round; stroke-linejoin:round; opacity:.5}
.tl{position:absolute; top:calc(14.05 * var(--u-shot)); width:calc(8.43 * var(--u-shot)); height:calc(8.43 * var(--u-shot)); border-radius:50%}
.tl--r{left:calc(14.75 * var(--u-shot)); background:#EE6A5F} .tl--y{left:calc(28.8 * var(--u-shot)); background:#F5BD4F} .tl--g{left:calc(42.85 * var(--u-shot)); background:#61C454}
.tb-sidebar{left:calc(69.35 * var(--u-shot)); top:calc(12.91 * var(--u-shot)); width:calc(13.75 * var(--u-shot)); height:calc(10.74 * var(--u-shot))}
.tb-history{position:absolute; left:calc(94.14 * var(--u-shot)); top:calc(8.43 * var(--u-shot)); display:flex; gap:calc(4 * var(--u-shot))}
.tb-history svg{position:static; width:calc(23.18 * var(--u-shot)); height:calc(19.67 * var(--u-shot))}
.tb-address{position:absolute; left:calc(238.86 * var(--u-shot)); top:calc(8.43 * var(--u-shot)); width:calc(421.52 * var(--u-shot)); height:calc(19.67 * var(--u-shot))}
.tb-shield{left:calc(6.75 * var(--u-shot)); top:calc(4.11 * var(--u-shot)); width:calc(9.69 * var(--u-shot)); height:calc(11.78 * var(--u-shot))}
.tb-url{position:absolute; left:calc(29.51 * var(--u-shot)); top:0; width:calc(362.99 * var(--u-shot)); height:calc(19.67 * var(--u-shot)); border-radius:calc(4.215 * var(--u-shot)); background:#0C0F0C}
.tb-url__inner{position:absolute; left:calc(155.14 * var(--u-shot)); top:calc(4.5 * var(--u-shot)); display:flex; align-items:center; gap:calc(4 * var(--u-shot))}
.tb-lock{position:static !important; width:calc(5.5 * var(--u-shot)); height:calc(8.03 * var(--u-shot))}
.tb-url__text{font-family:var(--font-ui-mono); font-weight:400; font-size:calc(9.13 * var(--u-shot)); letter-spacing:-0.004em; line-height:1; color:rgba(255,255,255,.85)}
.tb-reload{left:calc(351.28 * var(--u-shot)); top:calc(5.62 * var(--u-shot)); width:calc(7.27 * var(--u-shot)); height:calc(8.86 * var(--u-shot))}
.tb-tools{position:absolute; left:calc(780.97 * var(--u-shot)); top:calc(12.5 * var(--u-shot)); display:flex; gap:calc(5.62 * var(--u-shot))}
.tb-tools svg{position:static; width:calc(12 * var(--u-shot)); height:calc(12 * var(--u-shot))}

/* product nav */
.dash-nav{position:absolute; left:0; top:calc(48 * var(--u-shot)); width:calc(901 * var(--u-shot)); height:calc(29 * var(--u-shot)); padding:0 calc(20 * var(--u-shot));
  background:linear-gradient(to right, #fff calc(20 * var(--u-shot)), #fff calc(78 * var(--u-shot)), transparent calc(78 * var(--u-shot))) bottom left/100% 1px no-repeat,
             linear-gradient(rgba(255,255,255,.18), rgba(255,255,255,.18)) bottom left/100% 1px no-repeat}
.dash-nav__item{position:absolute; left:calc(20 * var(--u-shot) + var(--x) * var(--u-shot)); top:0; display:inline-flex; align-items:center; gap:calc(5 * var(--u-shot)); font-size:calc(10 * var(--u-shot)); opacity:.5; white-space:nowrap}
.dash-nav__item.is-active{opacity:1}
.dash-nav__item svg{width:calc(13 * var(--u-shot)); height:calc(13 * var(--u-shot)); fill:none; stroke:#fff; stroke-width:1; stroke-linecap:round; stroke-linejoin:round}
.dash-nav__user{position:absolute; left:calc(820 * var(--u-shot)); top:0; display:inline-flex; align-items:center; gap:calc(6 * var(--u-shot)); font-size:calc(10 * var(--u-shot))}
.dash-nav__avatar{position:relative; width:calc(18.69 * var(--u-shot)); height:calc(18.69 * var(--u-shot)); border-radius:50%; background:linear-gradient(135deg,#3a3f3a,#151715)}
.dash-nav__status{position:absolute; left:calc(15.57 * var(--u-shot)); top:calc(1.56 * var(--u-shot)); width:calc(3.43 * var(--u-shot)); height:calc(3.43 * var(--u-shot)); border-radius:50%; background:#A6FB89}

/* tabs */
.tabs{position:absolute; left:calc(22 * var(--u-shot)); top:calc(110 * var(--u-shot)); display:flex; gap:calc(40 * var(--u-shot)); align-items:baseline; white-space:nowrap}
.tabs__item{font-size:calc(40 * var(--u-shot)); letter-spacing:-0.04em; line-height:1; opacity:.4; font-weight:450; background:none; border:0; padding:0; margin:0; color:inherit; font-family:inherit; cursor:pointer; transition:opacity .25s}
.tabs__item:hover{opacity:.7}
.tabs__item.is-active{opacity:1}
.tabs__item.is-active:hover{opacity:1}

/* cards */
.card{position:absolute; border-radius:calc(23 * var(--u-shot)); background:var(--color-card); box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.card--sentence{left:calc(20 * var(--u-shot)); top:calc(177 * var(--u-shot)); width:calc(282 * var(--u-shot)); height:calc(247 * var(--u-shot))}
.card--strategy{left:calc(310 * var(--u-shot)); top:calc(177 * var(--u-shot)); width:calc(282 * var(--u-shot)); height:calc(247 * var(--u-shot))}
.card--value{left:calc(600 * var(--u-shot)); top:calc(177 * var(--u-shot)); width:calc(282 * var(--u-shot)); height:calc(247 * var(--u-shot))}
.card--log{left:calc(21 * var(--u-shot)); top:calc(433 * var(--u-shot)); width:calc(426 * var(--u-shot)); height:calc(247 * var(--u-shot))}
.card--copiers{left:calc(456 * var(--u-shot)); top:calc(433 * var(--u-shot)); width:calc(426 * var(--u-shot)); height:calc(247 * var(--u-shot))}
.card__title{position:absolute; left:calc(20 * var(--u-shot)); top:calc(21 * var(--u-shot)); font-size:calc(14 * var(--u-shot)); letter-spacing:-0.01em}

.card__sentence{position:absolute; left:calc(20 * var(--u-shot)); top:calc(58 * var(--u-shot)); width:calc(236 * var(--u-shot)); font-size:calc(19 * var(--u-shot)); line-height:1.28; letter-spacing:-0.02em; color:#fff; min-height:calc(72 * var(--u-shot))}
.card__sentence{outline:none; cursor:text; border-radius:calc(6 * var(--u-shot)); transition:box-shadow .2s}
.card__sentence:empty::before{content:attr(data-placeholder); color:rgba(255,255,255,.28)}
.card__sentence.is-editing{box-shadow:0 0 0 1px rgba(var(--accent-rgb),.35); padding:calc(6 * var(--u-shot)); margin:calc(-6 * var(--u-shot))}
.card__sentence.is-typing::after{content:''; display:inline-block; width:calc(1.6 * var(--u-shot)); height:1em; margin-left:2px; vertical-align:-0.12em; background:#fff; animation:blink 1s steps(1) infinite}
.card__hint{position:absolute; right:calc(20 * var(--u-shot)); top:calc(21 * var(--u-shot)); font-size:calc(10 * var(--u-shot)); color:rgba(255,255,255,.4); letter-spacing:-0.01em}
.card__hint kbd{font-family:inherit; display:inline-block; min-width:calc(16 * var(--u-shot)); text-align:center; padding:0 calc(3 * var(--u-shot)); border-radius:calc(3 * var(--u-shot)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); color:rgba(255,255,255,.7)}
.btn-copy{position:absolute; right:calc(18 * var(--u-shot)); top:calc(15 * var(--u-shot)); height:calc(24 * var(--u-shot)); padding:0 calc(10 * var(--u-shot)); border:0; border-radius:calc(6 * var(--u-shot)); background:rgba(255,255,255,.1); color:#fff; font:inherit; font-size:calc(10 * var(--u-shot)); letter-spacing:-0.01em; cursor:pointer; transition:background .2s, color .2s}
.btn-copy:hover{background:rgba(255,255,255,.2)}
.btn-copy.is-done{background:rgba(var(--accent-rgb),.22); color:var(--accent-text); cursor:default}
.stat__value.is-bump{animation:bump .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes bump{40%{transform:translateY(-3px) scale(1.12); color:var(--accent-text)}}
.log__row.is-new{animation:row-in .45s cubic-bezier(0.16,1,0.3,1) both}
@keyframes row-in{from{opacity:0; transform:translateY(-8px)}}
.matrix circle.is-new{animation:dot-pop .45s cubic-bezier(.34,1.56,.64,1) both; transform-box:fill-box; transform-origin:center}
@keyframes dot-pop{from{transform:scale(0)} 60%{transform:scale(1.5)}}
@keyframes blink{50%{opacity:0}}
.chip{position:absolute; left:calc(20 * var(--u-shot)); top:calc(190 * var(--u-shot)); display:inline-flex; align-items:center; gap:calc(8 * var(--u-shot));
  padding:calc(9 * var(--u-shot)) calc(12 * var(--u-shot)); border-radius:calc(6 * var(--u-shot)); font-size:calc(11 * var(--u-shot)); letter-spacing:.06em; text-transform:uppercase;
  opacity:0; transform:translateY(calc(6 * var(--u-shot))); transition:opacity .4s ease, transform .5s cubic-bezier(.16,1,.3,1)}
.chip.is-on{opacity:1; transform:none}
.chip--ok{background:linear-gradient(90deg, rgba(var(--accent-rgb),.14), rgba(var(--accent-rgb),.26) 45%, rgba(var(--accent-rgb),.14)); color:var(--accent-text); box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.35)}
.chip__dot{width:calc(5 * var(--u-shot)); height:calc(5 * var(--u-shot)); border-radius:50%; background:var(--color-green)}

.flow__line{position:absolute; left:calc(27 * var(--u-shot)); top:calc(66 * var(--u-shot)); width:1px; height:calc(132 * var(--u-shot)); transform:scaleY(0); transform-origin:top; transition:transform .9s cubic-bezier(0.16,1,0.3,1);
  background-image:repeating-linear-gradient(to bottom, rgba(255,255,255,.55) 0 2px, transparent 2px 7px)}
.flow__step{opacity:0; transform:translateY(calc(5 * var(--u-shot))); transition:opacity .4s cubic-bezier(0.16,1,0.3,1), transform .4s cubic-bezier(0.16,1,0.3,1)}
.flow__step.is-in{opacity:1; transform:none}
.flow__step{position:absolute; left:calc(20 * var(--u-shot)); top:calc(var(--y) * var(--u-shot)); display:grid; grid-template-columns:calc(15 * var(--u-shot)) auto; grid-template-rows:auto auto; column-gap:calc(12 * var(--u-shot)); row-gap:calc(3 * var(--u-shot)); align-items:center; white-space:nowrap}
.flow__dot{grid-row:1 / span 2; width:calc(15 * var(--u-shot)); height:calc(15 * var(--u-shot)); border-radius:50%; background:#0b0d0b; box-shadow:inset 0 0 0 1px rgba(255,255,255,.2); position:relative}
.flow__dot::after{content:''; position:absolute; left:calc(5 * var(--u-shot)); top:calc(5 * var(--u-shot)); width:calc(5 * var(--u-shot)); height:calc(5 * var(--u-shot)); border-radius:50%; background:rgba(255,255,255,.7)}
.flow__dot--live{background:rgba(var(--accent-rgb),.18); box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.5)} .flow__dot--live::after{background:var(--color-green); animation:live-pulse 2.2s ease-out infinite}
@keyframes live-pulse{0%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),.55)} 70%{box-shadow:0 0 0 calc(6 * var(--u-shot)) rgba(var(--accent-rgb),0)} 100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),0)}}
.flow__line.is-in{transform:scaleY(1)}
.flow__name{font-size:calc(14 * var(--u-shot)); line-height:1; letter-spacing:-0.01em}
.flow__meta{font-size:calc(10 * var(--u-shot)); line-height:1; color:rgba(255,255,255,.45)}

.card__figure{position:absolute; left:calc(20 * var(--u-shot)); top:calc(55 * var(--u-shot)); font-size:calc(32 * var(--u-shot)); line-height:1; letter-spacing:-0.03em; font-weight:450}
.card__figure-dec{color:rgba(255,255,255,.25)}
.card__delta{position:absolute; left:calc(20 * var(--u-shot)); top:calc(98 * var(--u-shot)); display:flex; align-items:center; gap:calc(7 * var(--u-shot))}
.tag{padding:calc(5 * var(--u-shot)) calc(4 * var(--u-shot)); border-radius:calc(4 * var(--u-shot)); background:rgba(255,255,255,.2); font-size:calc(10 * var(--u-shot)); line-height:1}
.tag--up{background:rgba(var(--accent-rgb),.18); color:var(--accent-text)}
.card__note{font-size:calc(10 * var(--u-shot)); color:rgba(255,255,255,.56)}
.chart{position:absolute; left:calc(19 * var(--u-shot)); top:calc(148 * var(--u-shot)); width:calc(245.5 * var(--u-shot)); height:calc(69.5 * var(--u-shot)); overflow:visible}
.chart__grid path{stroke:rgba(255,255,255,.1); stroke-width:1; vector-effect:non-scaling-stroke}
.chart__tick{stroke:rgba(255,255,255,.18); stroke-width:1; stroke-dasharray:1 4; vector-effect:non-scaling-stroke}
.chart__area{fill:url(#chartFill)}
.chart__line{fill:none; stroke:#fff; stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; stroke-dasharray:700; stroke-dashoffset:700; transition:stroke-dashoffset 1.3s cubic-bezier(0.16,1,0.3,1)}
.chart__line.is-in{stroke-dashoffset:0}
.chart__area{opacity:0; transition:opacity .8s ease .5s}
.chart__area.is-in{opacity:1}
.chart__axis{position:absolute; left:calc(19 * var(--u-shot)); top:calc(223 * var(--u-shot)); width:calc(245.5 * var(--u-shot)); height:calc(9 * var(--u-shot)); font-size:calc(7 * var(--u-shot)); color:rgba(255,255,255,.8)}
.chart__axis span{position:absolute; left:calc(var(--x) * var(--u-shot)); top:0; line-height:1}

.log{position:absolute; left:calc(20 * var(--u-shot)); top:calc(54 * var(--u-shot)); width:calc(391 * var(--u-shot)); display:flex; flex-direction:column; gap:calc(7 * var(--u-shot))}
.log__row{display:flex; align-items:center; gap:calc(8 * var(--u-shot)); height:calc(20 * var(--u-shot)); font-size:calc(10 * var(--u-shot)); white-space:nowrap}
.log__tag{display:inline-flex; align-items:center; height:100%; padding:0 calc(5 * var(--u-shot)); background:rgba(255,255,255,.07); color:rgba(255,255,255,.4); letter-spacing:.04em}
.log__msg{color:rgba(255,255,255,.85)} .log__status{margin-left:auto; color:var(--accent-text); letter-spacing:.06em}

.stats{position:absolute; left:calc(20 * var(--u-shot)); top:calc(57 * var(--u-shot)); height:calc(40 * var(--u-shot)); width:calc(390 * var(--u-shot))}
.stat{position:absolute; left:calc(var(--x) * var(--u-shot)); top:0; display:flex; flex-direction:column; gap:calc(6 * var(--u-shot)); white-space:nowrap}
.stat__label{font-size:calc(10 * var(--u-shot)); color:rgba(255,255,255,.4)} .stat__value{font-size:calc(14 * var(--u-shot)); color:#fff}
.matrix{position:absolute; left:calc(21 * var(--u-shot)); top:calc(120 * var(--u-shot)); width:calc(238 * var(--u-shot)); height:calc(109 * var(--u-shot))}
.matrix circle{fill:#fff}
.matrix circle.is-copier{fill:var(--accent)}
.chart__stop{stop-color:var(--accent)}
.brand__accent{fill:var(--accent)}
.brand__name{letter-spacing:-0.05em}

/* =================== RESPONSIVE =================== */
@media (max-width:900px){
  :root{--u-ui:1px; --tablet-gutter:clamp(24px, 4vw, 36px); --gutter-start:var(--tablet-gutter); --gutter-end:var(--tablet-gutter);
    --u-shot:calc(min(calc(100vw - 2 * var(--tablet-gutter)), calc((100svh - 330px) * 1.325)) / 901)}
  .site-header{top:20px}
  .nav, .header-actions{display:none}
  .menu-toggle{display:flex}
  .mobile-menu{display:flex; flex-direction:column; gap:4px; width:min(360px, calc(100% - 2 * var(--tablet-gutter))); margin:10px var(--tablet-gutter) 0 auto; padding:14px; border-radius:13px;
    border:1px solid rgba(255,255,255,.1); background:rgba(5,7,5,.82); backdrop-filter:blur(14.6px); -webkit-backdrop-filter:blur(14.6px); box-shadow:0 18px 48px rgba(0,0,0,.28);
    transform-origin:top right; animation:tablet-menu-in .2s ease-out both}
  .mobile-menu[hidden]{display:none}
  @keyframes tablet-menu-in{from{opacity:0; transform:translateY(-8px) scale(.98)} to{opacity:1; transform:none}}
  .mobile-menu__link{display:flex; align-items:center; min-height:44px; padding:10px 12px; border-radius:9px; font-size:16px}
  .mobile-menu__link:hover{background:rgba(255,255,255,.08)}
  .mobile-menu__actions{display:flex; gap:6px; margin-top:8px} .mobile-menu__actions .button{flex:1}
  .hero__content{width:100%; gap:clamp(20px, 3svh, 26px)}
  .hero__title{font-size:clamp(38px, 10.2vw, 68px)}
  .hero__subtitle{width:100%; max-width:423px; font-size:clamp(15px, 4.2vw, 20px)}
  .hero__actions{flex-direction:column; width:100%; max-width:360px} .hero__actions .button{width:100%}
  .platform__content{top:clamp(88px, 11svh, 132px); width:calc(100% - 2 * var(--tablet-gutter))}
  .pill, .platform__title{transform:translateX(0) translateY(calc((1 - var(--plat-text-p, 1)) * 638 * var(--u-shot)))}
  .pill{min-width:138px; padding:11px 16px; border-radius:6px; font-size:12px}
  .platform__title{width:min(500px, 100%); margin-top:clamp(22px, 3svh, 30px); font-size:clamp(31px, 5.2vw, 42px)}
  .shot{margin-top:clamp(28px, 4svh, 42px)}
  .scene__viewport{padding-inline:var(--tablet-gutter); padding-bottom:clamp(32px, 6.5svh, 64px)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms !important; animation-duration:.01ms !important}
  :root{--scene-travel:120svh}
  .scene__camera{transform:none !important}
}

/* =============================== sections below the scene =============================== */
.sr-only{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.sec{position:relative; padding:clamp(72px, 9vw, 136px) 0; background:var(--color-void)}
.sec--feed{padding-top:clamp(56px, 7vw, 104px)}
.sec + .sec{padding-top:0}
.sec__inner{width:min(1180px, calc(100% - 2 * var(--gutter-start))); margin:0 auto}
.sec__inner--narrow{width:min(620px, calc(100% - 2 * var(--gutter-start))); text-align:center; display:flex; flex-direction:column; align-items:center; gap:18px}
.sec__head{display:flex; flex-direction:column; gap:14px; margin-bottom:clamp(30px, 4vw, 52px); max-width:760px}
.sec__eyebrow{margin:0; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.45)}
.sec__eyebrow--center{text-align:center}
.sec__title{margin:0; font-family:var(--font-display); font-weight:400; font-size:clamp(32px, 4.2vw, 56px); line-height:1.02; letter-spacing:-0.045em; text-wrap:balance}
.sec__title em{font-family:var(--font-accent); font-style:italic; font-weight:400; color:var(--accent); font-size:1.06em; letter-spacing:-0.02em}
.sec__lead{margin:0; max-width:46ch; font-size:clamp(15px, 1.25vw, 18px); line-height:1.45; letter-spacing:-0.01em; color:var(--color-text-muted)}

/* reveal: visible at rest without JS, gentle fade-up with it */
.js .sec [data-reveal], .js .foot [data-reveal]{opacity:0; transform:translateY(16px); transition:opacity .8s cubic-bezier(0.16,1,0.3,1), transform .8s cubic-bezier(0.16,1,0.3,1); transition-delay:calc(var(--i, 0) * 90ms)}
.js .sec [data-reveal].is-in, .js .foot [data-reveal].is-in{opacity:1; transform:none}

/* strategy feed */
.feed{display:grid; grid-template-columns:repeat(3, 1fr); gap:14px}
.scard{display:flex; flex-direction:column; gap:16px; padding:24px; border-radius:22px; background:rgba(255,255,255,.035); box-shadow:inset 0 0 0 1px rgba(255,255,255,.07); transition:background .25s}
.scard:hover{background:rgba(255,255,255,.05)}
.scard__head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.scard__name{margin:0; font-size:20px; font-weight:500; letter-spacing:-0.03em; line-height:1.1}
.scard__by{margin:6px 0 0; font-size:12px; color:rgba(255,255,255,.45)} .scard__by span{color:rgba(255,255,255,.7)}
.scard__delta{padding:6px 8px; border-radius:6px; font-size:12px; white-space:nowrap}
.scard__sentence{margin:0; font-size:17px; line-height:1.35; letter-spacing:-0.015em; color:#fff; min-height:2.7em}
.scard__spark{width:100%; height:64px; overflow:visible}
.scard__line{fill:none; stroke:#fff; stroke-width:1.2; vector-effect:non-scaling-stroke; stroke-linecap:round}
.scard__foot{display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:14px; border-top:1px solid rgba(255,255,255,.07)}
.scard__copiers{font-size:13px; color:rgba(255,255,255,.55)} .scard__copiers b{color:#fff; font-weight:500; display:inline-block}
.scard__copiers.is-bump b{animation:bump .5s cubic-bezier(.34,1.56,.64,1)}
.scard__copy{height:34px; padding:0 14px; border:0; border-radius:9px; background:#fff; color:var(--color-ink); font:inherit; font-size:13px; font-weight:500; letter-spacing:-0.01em; cursor:pointer; transition:background .2s, color .2s}
.scard__copy:hover{background:#e9e9e9}
.scard__copy.is-done{background:rgba(var(--accent-rgb),.22); color:var(--accent-text); cursor:default}

/* how it works */
.how{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:14px}
.how__step{display:flex; flex-direction:column; gap:12px; padding:22px; border-radius:22px; background:rgba(255,255,255,.035); box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.how__widget{position:relative; height:164px; border-radius:14px; background:rgba(0,0,0,.35); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); overflow:hidden; margin-bottom:8px}
.how__title{margin:0; font-size:20px; font-weight:500; letter-spacing:-0.03em}
.how__text{margin:0; font-size:14.5px; line-height:1.5; color:rgba(255,255,255,.6)}
.how__widget--say{display:flex; align-items:center; padding:0 22px}
.how__sentence{font-size:18px; line-height:1.3; letter-spacing:-0.02em; color:#fff}
.how__sentence.is-typing::after{content:''; display:inline-block; width:1.5px; height:1em; margin-left:2px; vertical-align:-0.12em; background:#fff; animation:blink 1s steps(1) infinite}
.how__widget--build{display:flex; flex-direction:column; justify-content:center; gap:8px; padding:0 22px}
.mini__step{display:flex; align-items:center; gap:10px; font-size:13px; opacity:.3; transform:translateX(-4px); transition:opacity .35s, transform .35s}
.mini__step.is-on{opacity:1; transform:none}
.mini__step i{width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.25); box-shadow:inset 0 0 0 1px rgba(255,255,255,.3); transition:background .35s}
.mini__step.is-on i{background:var(--accent)}
.mini__step b{font-weight:500} .mini__step em{font-style:normal; color:rgba(255,255,255,.45); font-size:12px}
.how__widget--copy{display:grid; grid-template-columns:repeat(8, 1fr); gap:9px; align-content:center; padding:0 26px}
.how__widget--copy i{aspect-ratio:1; border-radius:50%; background:rgba(255,255,255,.12); transition:background .25s, transform .25s}
.how__widget--copy i.is-on{background:var(--accent); transform:scale(1.15)}
.mini__count{position:absolute; right:14px; bottom:12px; font-size:12px; color:rgba(255,255,255,.55)}

/* footer */
.foot{border-top:1px solid rgba(255,255,255,.08); background:var(--color-void)}
.foot__inner{width:min(1180px, calc(100% - 2 * var(--gutter-start))); margin:0 auto; padding:34px 0 40px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap}
.brand--foot .brand__name{font-size:22px}
.foot__nav{display:flex; gap:22px; flex-wrap:wrap} .foot__nav a{font-size:13.5px; color:rgba(255,255,255,.6); text-decoration:none} .foot__nav a:hover{color:#fff}
.foot__legal{margin:0; font-size:12.5px; color:rgba(255,255,255,.4)}

@media (max-width:900px){
  .feed, .how{grid-template-columns:1fr}
  .strip{flex-direction:column; align-items:flex-start; gap:14px}
  .access{background-position:50% 22%; background-size:auto 150%}
  .access::before{background:linear-gradient(180deg, rgba(7,9,10,.94) 0%, rgba(7,9,10,.9) 55%, rgba(7,9,10,.55) 100%)}
  .access__grid{grid-template-columns:1fr; padding:28px 22px 30px; gap:26px}
  .pass{width:100%; aspect-ratio:auto; gap:18px}
  .pass__perks li{font-size:12.5px}
  .signup__btn{flex:1 1 100%}
  .foot__inner{flex-direction:column; align-items:flex-start}
}
@media (prefers-reduced-motion: reduce){
  .js .sec [data-reveal], .js .foot [data-reveal]{opacity:1; transform:none; transition:none}
  .mini__step, .how__widget--copy i{transition:none}
}

/* built on: one strip */
.sec--partners{padding-top:0; padding-bottom:clamp(56px, 7vw, 96px)}
.strip{display:flex; align-items:baseline; gap:40px; flex-wrap:wrap; padding-top:clamp(28px, 3vw, 40px); border-top:1px solid rgba(255,255,255,.08)}
.strip__lead{margin:0; font-size:14px; color:rgba(255,255,255,.45); white-space:nowrap}
.strip__list{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:14px 36px}
.strip__list li{display:flex; align-items:baseline; gap:8px; white-space:nowrap}
.strip__list b{font-size:22px; font-weight:500; letter-spacing:-0.03em}
.strip__list span{font-size:12px; color:rgba(255,255,255,.4)}

/* early access band */
.sec--access{padding-top:0; padding-bottom:clamp(64px, 8vw, 120px)}
.access{position:relative; width:min(1180px, calc(100% - 2 * var(--gutter-start))); margin:0 auto; border-radius:30px; overflow:hidden; isolation:isolate;
  background:#07090a url('../assets/backdrop.jpg') 82% 60% / auto 205% no-repeat; box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
.access::before{content:''; position:absolute; inset:0; z-index:0;
  background:linear-gradient(90deg, rgba(7,9,10,.97) 0%, rgba(7,9,10,.92) 42%, rgba(7,9,10,.45) 68%, rgba(7,9,10,.25) 100%),
             linear-gradient(180deg, rgba(7,9,10,.35) 0%, rgba(7,9,10,0) 28%, rgba(7,9,10,0) 72%, rgba(7,9,10,.55) 100%)}
.access__grid{position:relative; z-index:1; display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr); gap:clamp(28px, 4vw, 64px); align-items:center; padding:clamp(40px, 5vw, 72px)}
.access__copy{display:flex; flex-direction:column; gap:18px; max-width:520px}
.access__copy .sec__title{font-size:clamp(34px, 4vw, 54px)}
.access__copy .signup{margin-top:8px}
.access__side{display:flex; justify-content:center}

/* the invite pass */
.pass{position:relative; width:min(440px, 100%); aspect-ratio:1.586; border-radius:22px; padding:clamp(18px, 2.4vw, 28px); display:flex; flex-direction:column; justify-content:space-between; overflow:hidden;
  background:linear-gradient(135deg, rgba(20,24,26,.72), rgba(8,10,11,.72)); -webkit-backdrop-filter:blur(28px); backdrop-filter:blur(28px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.18), 0 40px 90px rgba(0,0,0,.55); transition:box-shadow .6s, transform .6s cubic-bezier(0.16,1,0.3,1)}
.pass__sheen{position:absolute; inset:-40% -20%; background:linear-gradient(115deg, transparent 38%, rgba(255,255,255,.07) 50%, transparent 62%); transform:translateX(-30%); pointer-events:none; transition:transform 1.4s cubic-bezier(0.16,1,0.3,1)}
.pass.is-live .pass__sheen{transform:translateX(30%)}
.pass__top{display:flex; align-items:center; gap:10px}
.pass__mark{display:inline-flex; width:26px; height:26px} .pass__mark svg{width:100%; height:100%}
.pass__label{font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.6)}
.pass__state{margin-left:auto; font-size:11.5px; letter-spacing:.02em; padding:6px 9px; border-radius:6px; background:rgba(255,255,255,.08); color:rgba(255,255,255,.55); transition:background .4s, color .4s}
.pass__email{margin:0; font-size:clamp(20px, 2.2vw, 28px); font-weight:500; letter-spacing:-0.035em; color:rgba(255,255,255,.35); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:color .3s}
.pass.is-live .pass__email{color:#fff}
.pass__perks{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px}
.pass__perks li{display:flex; align-items:center; gap:9px; font-size:13px; color:rgba(255,255,255,.7)}
.pass__perks i{width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.25); flex:none; transition:background .4s}
.pass__bottom{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.pass__no{font-size:clamp(22px, 2.4vw, 30px); letter-spacing:-0.04em; font-variant-numeric:tabular-nums; color:rgba(255,255,255,.4); transition:color .4s}
.pass__hint{font-size:11.5px; color:rgba(255,255,255,.4)}
.pass.is-reserved{box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.65), inset 0 1px 0 rgba(255,255,255,.2), 0 40px 90px rgba(0,0,0,.55), 0 0 80px rgba(var(--accent-rgb),.16); transform:translateY(-4px)}
.pass.is-reserved .pass__state{background:rgba(var(--accent-rgb),.2); color:var(--accent-text)}
.pass.is-reserved .pass__no{color:var(--accent)} .pass.is-reserved .pass__perks i{background:var(--accent)}
.pass.is-reserved .pass__hint{color:rgba(255,255,255,.6)}

/* signup form (used inside the access band) */
.signup{position:relative; display:flex; flex-wrap:wrap; gap:10px; width:100%; max-width:520px}
.signup__input{flex:1 1 220px; min-width:0; height:54px; padding:0 18px; border:0; border-radius:12px; background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); color:#fff; font:inherit; font-size:16px; letter-spacing:-0.01em; outline:none; transition:box-shadow .2s, background .2s}
.signup__input::placeholder{color:rgba(255,255,255,.35)}
.signup__input:focus{background:rgba(255,255,255,.1); box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.75)}
.signup__btn{height:54px; padding:0 22px; border-radius:12px; font-size:15px; min-width:0; border:0; cursor:pointer}
.signup__btn:disabled{opacity:.7; cursor:progress}
.signup__hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
.signup__msg{flex-basis:100%; margin:0; min-height:1.2em; font-size:13.5px; color:rgba(255,255,255,.6)}
.signup__msg--err{color:#ffb4a8}
.signup__fine{margin:0; font-size:12.5px; color:rgba(255,255,255,.4)}
.signup__done{display:flex; flex-direction:column; align-items:flex-start; gap:10px; width:100%; max-width:520px; padding:22px; border-radius:14px; background:rgba(var(--accent-rgb),.10); box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.3); animation:row-in .5s cubic-bezier(0.16,1,0.3,1) both}
.signup__done-title{margin:0; font-size:20px; letter-spacing:-0.03em} .signup__done-title b{font-weight:500; color:var(--accent)}
.signup__done-sub{margin:0; font-size:14px; line-height:1.45; color:rgba(255,255,255,.65); max-width:42ch}
.signup__share{margin-top:6px; display:inline-flex; align-items:center; height:40px; padding:0 16px; border-radius:10px; background:#fff; color:var(--color-ink); text-decoration:none; font-size:14px; font-weight:500}
.signup__share:hover{background:#e9e9e9}
@media (max-width:600px){ .signup__btn{flex:1 1 100%} }

@media (max-width:900px){
  .access{background-position:50% 22%; background-size:auto 150%}
  .access::before{background:linear-gradient(180deg, rgba(7,9,10,.94) 0%, rgba(7,9,10,.9) 55%, rgba(7,9,10,.55) 100%)}
  .access__grid{grid-template-columns:1fr; padding:28px 22px 30px; gap:26px}
  .access__copy{max-width:none}
  .pass{width:100%; aspect-ratio:auto; gap:18px}
  .pass__perks li{font-size:12.5px}
}

/* X handle */
.button--icon{min-width:0; width:calc(46 * var(--u-ui)); padding:0}
.button--icon svg{width:calc(16 * var(--u-ui)); height:calc(16 * var(--u-ui)); fill:currentColor}
.foot__x{display:inline-flex; align-items:center; gap:7px} .foot__x svg{width:14px; height:14px; fill:currentColor}