/* =========================================================
   28 — design system
   Light editorial layout, Satoshi, blue accent.
   ========================================================= */

/* ---------- fonts ---------- */
@font-face{font-family:"Satoshi";src:url("../fonts/Satoshi-Variable.woff2") format("woff2");font-weight:300 900;font-style:normal;font-display:swap}

/* ---------- tokens ---------- */
:root{
  --bg:#F5F5F3;
  --bg-soft:#EBEBE8;
  --surface:#FFFFFF;
  --ink:#111111;
  --ink-2:#5C5C58;
  --ink-3:#8C8C87;
  --line:rgba(17,17,17,.09);
  --line-2:rgba(17,17,17,.15);

  --accent:#111111;
  --accent-2:#000000;
  --accent-soft:rgba(17,17,17,.06);
  --dark:#111111;

  --r-sm:14px;
  --r-md:22px;
  --r-lg:32px;
  --r-xl:44px;

  --shadow-sm:0 1px 2px rgba(17,17,17,.05), 0 4px 14px rgba(17,17,17,.05);
  --shadow-md:0 2px 6px rgba(17,17,17,.05), 0 14px 34px rgba(17,17,17,.08);
  --shadow-lg:0 4px 10px rgba(17,17,17,.05), 0 28px 64px rgba(17,17,17,.12);
  --shadow-cta:0 8px 22px rgba(17,17,17,.18);

  --shell:1180px;
  --ease:cubic-bezier(.22,1,.36,1);

  /* ---- redesign: day/night + brand pink ----
     Sampled directly from the real logo reference (28_logo.png) — the
     one confirmed brand color in the project. --red/--red-deep used to be
     an unverified placeholder; both now derive from the real brand pink
     and are propagated site-wide instead of being intro-only. */
  --paper:var(--bg);
  --night:#08070B;
  --night-2:#111016;
  --brand-pink:#FF005D;
  --red:var(--brand-pink);
  --red-deep:#C40048;
  --on-night:#F5F5F3;
  --on-night-2:rgba(245,245,243,.6);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
/* The canvas behind the document — what shows when a scroll is dragged
   past the top or the bottom. It takes html's background, and both ends
   of this page are dark (hero above, footer below), so the rubber-band
   area has to be dark too; left to body it was the light page colour and
   flashed white. body keeps painting the page itself over it. */
/* Dragging past either end of the page shows the canvas, and both ends
   of this page are dark. Setting it on html alone was not enough on iOS —
   it kept painting the light body colour there — so html and body are
   both dark and the light page base moves to #main, which is what every
   section actually sits on. Whichever of the two the engine picks for the
   overscroll area, it is dark. */
html{
  -webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:110px;
  background:var(--night);
}
/* the legal pages open light at the top, so a dark canvas would show as a
   band when they are dragged past their start — they keep the page colour */
html.page-light,html.page-light body{background:var(--bg)}
#main{background:var(--bg)}
body{
  margin:0;
  background:var(--night);
  color:var(--ink);
  font-family:"Satoshi",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px;
  line-height:1.6;
  letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  /* clip, not hidden. overflow:hidden makes this a scroll container, and
     WebKit then refuses to pin position:sticky descendants — which is why
     the Other Side panel held on desktop Chrome but scrolled away on
     iOS, in Safari and Chrome alike (both are WebKit there). overflow:clip
     does the same clipping without becoming a scroll container. Measured
     across 21 viewports, nothing actually overflows sideways, so on an
     engine too old for clip the dropped declaration costs nothing. */
  overflow-x:clip;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
h1,h2,h3,h4{
  font-family:"Satoshi",-apple-system,BlinkMacSystemFont,sans-serif;
  margin:0;
  font-weight:700;
  letter-spacing:-.035em;
  line-height:1.06;
}
p{margin:0}
::selection{background:var(--accent);color:#fff}

.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}
.skip-link{
  position:absolute;top:-60px;left:20px;z-index:200;background:var(--ink);color:#fff;
  padding:10px 18px;border-radius:99px;transition:top .25s var(--ease);
}
.skip-link:focus{top:16px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:24px}
.muted{color:var(--ink-3)}
/* V2: second hero headline line must read as strong secondary ink, not
   disabled/greyed-out — ink-2 rather than the much lighter ink-3. */
.ink-accent{color:var(--ink-2)}
.text-red{color:var(--red)}
/* The pink 28 mark standing in for the digits inside a headline. The image
   is cropped tight to the numerals, so its height is the numeral height —
   about Satoshi's cap height — and it sits on the baseline like the words
   around it, apostrophe suffix and all ("28’i"). */
.logo-inline{display:inline-block;height:.72em;width:auto;vertical-align:baseline;margin:0 .03em}
.eyebrow{
  display:inline-block;font-family:"Satoshi",sans-serif;font-weight:700;
  font-size:13px;letter-spacing:.28em;text-transform:uppercase;color:var(--red);
  margin-bottom:18px;
}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease) var(--d,0s),transform .8s var(--ease) var(--d,0s)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* =========================================================
   Buttons / pills
   ========================================================= */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 24px;border-radius:99px;border:1px solid transparent;
  font-family:"Satoshi",sans-serif;font-weight:600;font-size:15.5px;letter-spacing:-.012em;
  cursor:pointer;white-space:nowrap;
  transition:transform .35s var(--ease),background .3s var(--ease),box-shadow .35s var(--ease),color .3s;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn__ico{width:19px;height:19px;flex:0 0 19px;display:block}
.btn__ico svg{width:100%;height:100%;display:block}

.btn--primary{background:var(--ink);color:#fff;box-shadow:var(--shadow-cta)}
.btn--primary:hover{background:var(--accent-2);box-shadow:0 14px 30px rgba(17,17,17,.24)}
.btn--dark{background:var(--surface);color:var(--ink);border-color:var(--line-2);box-shadow:var(--shadow-sm)}
.btn--dark:hover{background:var(--bg-soft);box-shadow:var(--shadow-md)}
.btn--sm{padding:11px 20px;font-size:14.5px}
.btn--lg{padding:17px 32px;font-size:16.5px}

.link-arrow{
  display:inline-flex;align-items:center;gap:9px;margin-top:26px;
  font-weight:600;color:var(--accent);
}
.link-arrow svg{width:19px;height:19px;transition:transform .35s var(--ease)}
.link-arrow:hover svg{transform:translateX(5px)}

/* =========================================================
   INTRO — brand entrance prologue (17_INTRO_EXPERIENCE_SPEC.md, revised)
   Default display:none — main.js flips .is-active as the very first thing
   it does. Plays on every load, no skip logic. Uses the real logo asset
   directly (no reconstructed numerals). The exit is a dissolve: the page
   is unlocked underneath while the black overlay fades off it.
   ========================================================= */
.intro{
  position:fixed;inset:0;z-index:600;display:none;
  align-items:center;justify-content:center;overflow:hidden;
  background:#000;
  opacity:1;transition:opacity 1s var(--ease);
}
.intro.is-active{display:flex}

/* the whole prologue dissolves and the page is simply there behind it —
   no scaled layer, so nothing for a browser to rasterise at size */
.intro.is-leaving{opacity:0;pointer-events:none}

.intro__stage{
  position:relative;display:flex;flex-direction:column;align-items:center;
  padding:0 24px;
}

.intro__logo{
  width:clamp(220px,32vw,420px);height:auto;display:block;user-select:none;
  opacity:0;transform:scale(.94);
  transition:opacity 1.1s var(--ease),transform 1.1s var(--ease);
  will-change:transform,opacity;
}
.intro.is-visible .intro__logo{opacity:1;transform:scale(1)}

.intro__copy{
  margin:26px 0 0;text-align:center;max-width:360px;
  font-family:"Satoshi",sans-serif;font-weight:500;
  font-size:clamp(15px,1.8vw,19px);line-height:1.4;letter-spacing:-.008em;
  color:rgba(255,255,255,.7);
  opacity:0;transform:translateY(8px);
  transition:opacity 1.05s var(--ease) .95s,transform 1.05s var(--ease) .95s;
}
.intro.is-visible .intro__copy{opacity:1;transform:none}

/* the lockup lifts a touch as it goes — a step forward into the page,
   not a zoom through it. Deliberately tiny: a big scale on the 2400px
   logo forces the browser to rasterise a huge layer, which is what broke
   this in Safari while Chrome absorbed it. */
.intro.is-leaving .intro__logo{
  opacity:0;transform:scale(1.04);
  transition:opacity .65s var(--ease),transform 1.05s var(--ease);
}
.intro.is-leaving .intro__copy{
  opacity:0;transition:opacity .45s var(--ease);
}

/* reduced-motion: quick reveal, then straight out */
@media (prefers-reduced-motion:reduce){
  .intro .intro__logo,.intro .intro__copy{transition-duration:.22s;transition-delay:0s}
  .intro.is-leaving .intro__logo{transform:none}
}
.intro.is-reduced .intro__logo,
.intro.is-reduced .intro__copy{transition-duration:.22s;transition-delay:0s}

@media (max-width:760px){
  .intro__logo{width:clamp(170px,54vw,260px)}
  .intro__copy{font-size:14px;margin-top:20px}
}

/* Hero/nav stay fully hidden — not just faded — until the intro hands off,
   so nothing can leak through during the portal push. Additive override,
   not a rewrite of .reveal, so scroll-reveal elsewhere is untouched. */
html.intro-lock{overflow:hidden}
/* The hero is held back by opacity alone, not visibility. Safari does not
   reliably start an opacity transition on an element that was
   visibility:hidden a frame earlier — the headline stayed blank until
   something else forced a repaint, then snapped in. Nothing leaks either
   way: .reveal is already fully transparent. */
html.intro-lock .hero .reveal{
  opacity:0;transform:translateY(22px);transition:none;pointer-events:none;
}
html.intro-lock #nav{
  opacity:0;visibility:hidden;pointer-events:none;
}
#nav{transition:opacity .5s var(--ease) .05s}

/* =========================================================
   Nav — 26_NAVBAR_MINIMAL_SHELL_PROMPT.md: navigation without a heavy
   container. No floating rounded capsule, no glass card, no filled pill
   CTA — over the hero it's transparent, just typography on the image;
   scrolled, it gains only a thin flat surface + hairline bottom border,
   full-bleed rather than an inset card, so it reads as a page header
   and not a UI component.
   ========================================================= */
.nav{
  position:fixed;inset:0 0 auto;z-index:100;
  background:transparent;border-bottom:1px solid transparent;
  transition:background .4s var(--ease),border-color .4s var(--ease);
}
.nav.is-scrolled{background:rgba(255,255,255,.92);border-bottom-color:rgba(17,17,17,.08)}
.nav.nav--night.is-scrolled{background:rgba(8,7,11,.92);border-bottom-color:rgba(255,255,255,.08)}

/* spacing, not a container, sets the hierarchy — and the bar stays short
   (~56px) rather than tall-to-feel-premium */
.nav__inner{
  position:relative;
  width:100%;max-width:var(--shell);margin-inline:auto;
  padding:16px clamp(24px,4vw,64px);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}

/* legibility over a busy photo with no card behind the text — a soft
   drop shadow instead of a background, only while actually transparent */
.nav.nav--night:not(.is-scrolled) .brand__mark{filter:drop-shadow(0 1px 3px rgba(0,0,0,.4))}
.nav.nav--night:not(.is-scrolled) .nav__links a,
.nav.nav--night:not(.is-scrolled) .nav-cta{text-shadow:0 1px 3px rgba(0,0,0,.4)}

.nav.nav--night .nav__links a{color:var(--on-night-2)}
.nav.nav--night .nav__links a:hover{color:#fff}
.nav.nav--night .nav__links a.is-active{color:#fff}
.nav.nav--night .nav__burger span{background:#fff}
.nav__links a,.nav-cta{transition:color .25s}

.brand{display:inline-flex;align-items:center}
.brand__mark{height:22px;width:auto;display:block}
.brand--lg .brand__mark{height:36px}

.apple-glyph{display:inline-block;width:11px;height:14px;vertical-align:-2px;margin-right:2px}
.apple-glyph svg{width:100%;height:100%;fill:currentColor;display:block}

/* absolutely centred on nav__inner rather than left to flex
   space-between: with the brand mark and the CTA+burger cluster on either
   side at different widths, space-between put this group off-centre from
   the page's own content — it visibly didn't line up under a centred
   headline like the hero's */
.nav__links{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:8px;
}
.nav__links a{
  position:relative;padding:8px 14px;font-size:14.5px;font-weight:500;color:var(--ink-2);
}
.nav__links a:hover{color:var(--ink)}
.nav__links a.is-active{color:var(--ink)}
.nav__links a.is-active::after{
  content:'';position:absolute;left:14px;right:14px;bottom:1px;height:2px;border-radius:2px;
  background:var(--brand-pink);
}

/* CTA — text + arrow, not a button: spec item 5 calls out the filled-pill
   CTA as part of the "generic SaaS navbar" feeling this pass removes */
.nav-cta{
  display:inline-flex;align-items:center;gap:5px;
  font-family:"Satoshi",sans-serif;font-size:14.5px;font-weight:500;color:var(--ink);
}
.nav-cta:hover{color:var(--brand-pink)}
.nav-cta__arrow{display:inline-block;transition:transform .25s var(--ease)}
.nav-cta:hover .nav-cta__arrow{transform:translate(2px,-2px)}
.nav.nav--night .nav-cta{color:#fff}
.nav.nav--night .nav-cta:hover{color:var(--brand-pink)}

.nav__right{display:flex;align-items:center;gap:18px}
/* no circle chip around the burger — that was another small container */
.nav__burger{
  display:none;width:32px;height:32px;border:0;border-radius:0;
  background:transparent;cursor:pointer;position:relative;padding:0;
}
.nav__burger span{
  position:absolute;left:7px;width:18px;height:1.8px;background:var(--ink);border-radius:2px;
  transition:transform .35s var(--ease),opacity .25s;
}
.nav__burger span:nth-child(1){top:13px}
.nav__burger span:nth-child(2){top:18px}
.nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(2.5px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-2.5px) rotate(-45deg)}

.mobile-menu{
  /* the bar is full-bleed from the top now (was inset 16px), so the
     panel sits closer up to keep the same small gap under it */
  position:fixed;inset:72px 16px auto;z-index:99;
  display:flex;flex-direction:column;gap:4px;padding:16px;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  animation:menuIn .4s var(--ease);
}
.mobile-menu[hidden]{display:none}
.mobile-menu a{padding:13px 14px;border-radius:var(--r-sm);font-weight:500;color:var(--ink-2)}
.mobile-menu a:hover{background:rgba(11,14,26,.05);color:var(--ink)}
.mobile-menu a.is-active{background:var(--ink);color:#fff}
.mobile-menu .btn{justify-content:center;margin-top:8px;color:#fff}
@keyframes menuIn{from{opacity:0;transform:translateY(-10px)}}

/* =========================================================
   Hero
   ========================================================= */
/* background-color matters even though the photo covers it. iOS 26 Safari
   tints its floating toolbars from the background colour of whatever sits
   under them, not from the rendered pixels — and a transparent hero let it
   read #main's light paper, so a dark page opened with a light grey band
   behind the bottom toolbar until the first scroll. Also stops a light
   flash before the photo decodes. */
.hero{
  background-color:var(--night);
  position:relative;min-height:100vh;min-height:100lvh;padding:150px 24px 96px;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:var(--on-night);
}
/* controlled background visual (20_HERO_EXPANSION_REVISION_PLAN.md §4) —
   mood/atmosphere only, the playing video lives in its own section below */
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;display:block}
.hero__bg::after{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(62% 48% at 50% 44%,rgba(8,7,11,.74) 0%,rgba(8,7,11,.5) 55%,rgba(8,7,11,.26) 100%),
    linear-gradient(180deg,rgba(8,7,11,.55) 0%,rgba(8,7,11,.28) 28%,rgba(8,7,11,.32) 72%,rgba(8,7,11,.62) 100%);
}
.hero__head{position:relative;z-index:1;text-align:center;max-width:900px}
.hero__title{
  margin:22px 0 0;
  font-size:clamp(36px,6vw,56px);
  font-weight:700;
  letter-spacing:-.045em;
}
.hero__title .ink-accent{color:var(--on-night-2)}
.hero__sub{
  margin:22px auto 0;max-width:600px;
  color:var(--on-night-2);font-size:clamp(16px,1.6vw,18.5px);line-height:1.62;
}

.media{
  position:relative;margin:0;border-radius:var(--r-xl);overflow:hidden;
  background:
    radial-gradient(120% 90% at 15% 8%,rgba(255,255,255,.16),transparent 55%),
    radial-gradient(90% 80% at 92% 18%,rgba(255,255,255,.10),transparent 55%),
    linear-gradient(150deg,#3A3A38 0%,#111111 100%);
  box-shadow:var(--shadow-lg);
}
.media img,.media video{width:100%;height:100%;object-fit:cover;display:block}
.media--split{aspect-ratio:4/5}

.media__badge{
  position:absolute;left:18px;bottom:18px;
  display:inline-flex;align-items:center;gap:9px;
  padding:10px 16px;border-radius:99px;
  background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  font-size:13.5px;font-weight:600;color:var(--ink);
}
.media__badge .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}

/* floating cards */
.float{
  position:absolute;z-index:2;
  background:var(--surface);border-radius:var(--r-md);
  box-shadow:var(--shadow-lg);
  will-change:transform;
}
.stat__num{
  font-family:"Satoshi",sans-serif;font-weight:700;letter-spacing:-.05em;
  font-size:40px;line-height:1;
}
.stat__num--sm{font-size:34px}
.stat__label{margin-top:10px;font-size:12.5px;line-height:1.45;color:var(--ink-2)}

.float--stat-dark{
  left:0;top:12%;width:225px;padding:22px 22px 24px;
  background:var(--dark);color:#fff;border-radius:var(--r-lg);
}
.float--stat-dark .stat__label{color:rgba(255,255,255,.6)}

.float--rating{right:0;top:26%;width:186px;padding:20px}
.rating__top{display:flex;align-items:center;gap:10px}
.rating__num{font-family:"Satoshi",sans-serif;font-weight:700;font-size:34px;letter-spacing:-.05em;line-height:1}
.rating__dot{width:16px;height:16px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 3px rgba(11,14,26,.08)}

.float--users{left:2%;bottom:6%;width:190px;padding:20px}

.float--tags{
  right:-18px;bottom:12%;max-width:290px;padding:14px;
  display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;
  background:transparent;box-shadow:none;
}
.tag{
  padding:9px 16px;border-radius:99px;background:var(--surface);
  font-size:13px;font-weight:500;color:var(--ink-2);box-shadow:var(--shadow-md);
}

.hero__cta{position:relative;z-index:1;margin-top:40px;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.hero .btn--primary{background:var(--brand-pink);color:#fff;box-shadow:0 10px 26px rgba(255,0,93,.34)}
.hero .btn--primary:hover{background:var(--red-deep);box-shadow:0 14px 32px rgba(255,0,93,.4)}
.hero__note{font-size:13.5px;color:var(--on-night-2)}

/* =========================================================
   Marquee
   ========================================================= */
.marquee{padding:14px 0 34px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee__track{display:flex;width:max-content;animation:slide 34s linear infinite}
.marquee__group{display:flex;align-items:center;gap:34px;padding-right:34px}
.marquee__group span{
  font-family:"Satoshi",sans-serif;font-weight:600;font-size:19px;
  letter-spacing:-.03em;color:var(--ink-3);
}
.marquee__group i{width:5px;height:5px;border-radius:50%;background:var(--line-2)}
@keyframes slide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none}}

/* =========================================================
   NIGHT FRAGMENTS — "you can ___" auto-flowing word stack
   The verbs sit in a tight column (--line is barely more than the
   line-box) so several read at once, and the track steps upward on its
   own clock in main.js. The centre line is the only fully-lit one; a
   mask falls the rest away toward the edges, which is both the look of
   the reference and far cheaper than restyling twelve elements on every
   step. --line is declared where the word font-size lives, so its em
   resolves against the words and not the 17px body text.
   ========================================================= */
/* Sized to its content, not a forced full screen. At 100lvh the video and
   the verbs filled about half of a laptop screen and flex centring left
   the rest as empty paper above and below — on a MacBook Air, 586px of
   white between the bottom of the video and "Artık,". The section also
   runs wider than the page shell, so the video and the type can be larger
   and carry the space themselves. section.night-fragments so the generic
   .section padding does not override it. */
/* the top padding carries the fixed bar's 56px on top of the breathing
   room, since that much of it sits behind the bar — without it the video
   read as glued to the underside of the nav (19px above, 75px below) */
section.night-fragments{background:var(--paper);display:flex;align-items:center;padding:calc(56px + clamp(56px,9vh,104px)) 0 clamp(56px,9vh,104px)}
.night-fragments .shell{max-width:1440px}
/* the gap scales with the viewport: at a fixed 56px the verb column sat
   almost against the video on a wide screen */
.night-fragments__grid{
  display:grid;grid-template-columns:1.15fr .85fr;
  gap:clamp(56px,7vw,112px);align-items:center;width:100%;
}
.night-fragments__frame{
  position:relative;aspect-ratio:16/9;border-radius:var(--r-xl);
  /* no drop shadow: its 64px blur spread a grey halo into the paper
     (#D8D8D6 right under the frame, fading out over ~70px), which is why
     this section read as a different, greyer white than Other Side */
  overflow:hidden;background:#000;
}
.night-fragments__media{position:absolute;inset:0;margin:0}
.night-fragments__media video,.night-fragments__fallback{width:100%;height:100%;object-fit:cover;display:block}
.night-fragments__fallback{display:none;position:absolute;inset:0}
.night-fragments__media.is-fallback video{display:none}
.night-fragments__media.is-fallback .night-fragments__fallback{display:block}
.night-fragments__meta{
  position:absolute;left:18px;bottom:18px;z-index:3;
  font-family:"Satoshi",sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.75);
  text-shadow:0 1px 3px rgba(0,0,0,.4);
}

.nf-words{
  font-family:"Satoshi",sans-serif;font-weight:700;letter-spacing:-.03em;
  font-size:clamp(28px,3.4vw,58px);line-height:1.1;
  --line:1.14em;   /* tight: the stack should read as one block */
  --lines:5;       /* visible at once, centre one lit */
  /* resting offset that puts the active word on the centre line —
     derived from --lines so the mobile override lands on its own centre */
  --rest:calc((var(--lines) - 1) / 2);
  display:flex;align-items:center;gap:.34em;
}
/* the label does not move — the verbs run past it */
.nf-words__prefix{margin:0;color:var(--ink)}
.nf-words__stream{
  position:relative;overflow:hidden;opacity:1;
  height:calc(var(--line) * var(--lines));
  /* full strength on the centre line, greying away above and below: this
     is the climbing-and-fading the reference does, and as a mask it costs
     nothing while the track is moving */
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.13) 21%,#000 50%,rgba(0,0,0,.13) 79%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.13) 21%,#000 50%,rgba(0,0,0,.13) 79%,transparent 100%);
}
.nf-words__track{transform:translateY(calc(var(--line) * var(--rest)));will-change:transform}
.nf-words__list{list-style:none;margin:0;padding:0}
.nf-words__word{
  height:var(--line);display:flex;align-items:center;
  color:var(--brand-pink);white-space:nowrap;
}

/* no motion: the stack still reads, it just doesn't move */
@media (prefers-reduced-motion:reduce){
  .nf-words__track{transition:none !important}
}

/* =========================================================
   STORY — OTHER SIDE (signature motion #1)
   Sticky section; JS sets --p 0..1 as the section scrolls through the
   viewport. The night panel clips in from the left; the day copy fades
   and drifts out. Reduced motion collapses this to a static stack.
   ========================================================= */
/* lvh, not svh. svh is the viewport with the browser chrome showing —
   the SMALL one. On iOS the address bar hides as you scroll and the
   visible area grows to lvh, so a pin sized in svh ends up shorter than
   the screen and a band of whatever is behind it shows below: the white
   strip that kept appearing under the wipe. lvh is the tall state, so
   the panel is never shorter than what is on screen, and section and pin
   share the unit so the scrub maths stays consistent. */
.other-side{position:relative;height:220vh;height:220lvh;--p:0}
.other-side__sticky{
  position:sticky;top:0;height:100vh;height:100lvh;overflow:hidden;
  /* keeps the per-frame --p updates from invalidating layout or paint
     outside the pinned box */
  contain:layout paint;
  display:flex;align-items:center;justify-content:center;background:var(--paper);
}
.other-side__day{
  position:absolute;inset:0;display:flex;flex-direction:column;
  /* Centred in the part of the screen below the fixed bar: the top
     padding is the bar's height, so the line sits in the middle of what
     is actually visible rather than the middle of a box the bar covers.
     The night layer carries the identical padding below — set it on one
     and not the other and the copy jumps mid-wipe. */
  align-items:center;justify-content:center;text-align:center;padding:56px 24px 0;
  opacity:calc(1 - var(--p) * 1.4);
  transform:translate3d(calc(var(--p) * -6%),0,0);
  /* its own layer, like the night panel: the fade and drift change every
     scroll frame, and unpromoted they repainted the full-screen headline
     each time, which is what phones stuttered on */
  will-change:transform,opacity;
}
.other-side__headline{
  font-size:clamp(38px,6.9vw,96px);letter-spacing:-.04em;line-height:1.02;color:var(--ink);
}

/* "Now" leads, always visible; the rest of the sentence fades in just
   after scrolling starts, so the section opens on that one word first. */
/* kicker is its own block-level line above the headline — as an inline
   span it reflowed into the headline and the two-line structure was lost */
.other-side__kicker{
  display:block;margin-bottom:.40em;color:var(--brand-pink);
  font-family:"Satoshi",sans-serif;font-weight:700;letter-spacing:-.03em;
  font-size:clamp(28px,5.6vw,78px);line-height:1.1;
}
/* the wipe: panel slides in from the left, inner layer counter-slides by
   the same distance so the copy holds its place on screen. Both are pure
   transforms, so the whole reveal stays on the compositor — the previous
   animated clip-path repainted the full panel on every scroll frame and
   visibly stuttered on anything but a fast machine. */
.other-side__night{
  position:absolute;inset:0;overflow:hidden;background:var(--night);
  transform:translate3d(calc((var(--p) - 1) * 100%),0,0);
  will-change:transform;
}
.other-side__night-inner{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:56px 24px 0;
  transform:translate3d(calc((1 - var(--p)) * 100%),0,0);
  will-change:transform;
}
.other-side__headline--night{color:#fff}

/* Where the browser can run scroll-driven animations (iOS 26 Safari,
   Chrome), the same three transforms come from a view timeline instead of
   the --p variable. The JS scrub runs on the main thread and trails the
   compositor's scroll, which on phones read as the wipe stuttering behind
   the finger; a view timeline is advanced in the same frame as the scroll
   itself. The keyframes are the --p formulas above, unchanged: the
   "contain" range runs from the section's top reaching the top of the
   screen to its bottom reaching the bottom, exactly main.js's
   scrolled / (section height - pin height). Other browsers keep --p. */
@supports (animation-timeline:view()) and (view-timeline-name:--x){
  @media (prefers-reduced-motion:no-preference){
    /* inset 0: the default (auto) takes html's 110px scroll-padding-top and
       would start the wipe ~110px early */
    .other-side{view-timeline:--other-side block;view-timeline-inset:0}
    .other-side__day,.other-side__night,.other-side__night-inner{
      animation-timing-function:linear;animation-fill-mode:both;
      animation-timeline:--other-side;animation-range:contain 0% contain 100%;
    }
    .other-side__day{animation-name:os-day}
    .other-side__night{animation-name:os-night}
    .other-side__night-inner{animation-name:os-night-inner}
  }
}
/* opacity is 1 - p*1.4, so it reaches 0 at p = 1/1.4 = 71.43% */
@keyframes os-day{
  0%{opacity:1;transform:translate3d(0,0,0)}
  71.43%{opacity:0}
  100%{opacity:0;transform:translate3d(-6%,0,0)}
}
@keyframes os-night{
  from{transform:translate3d(-100%,0,0)}
  to{transform:translate3d(0,0,0)}
}
@keyframes os-night-inner{
  from{transform:translate3d(100%,0,0)}
  to{transform:translate3d(0,0,0)}
}

@media (prefers-reduced-motion:reduce){
  .other-side{height:auto}
  /* no bottom padding: it would leave a strip of paper between the night
     block and the dark section that follows */
  .other-side__sticky{position:static;height:auto;display:block;padding:88px 0 0}
  .other-side__day{position:static;opacity:1;transform:none;padding-top:0;padding-bottom:48px}
  .other-side__night{position:static;transform:none;overflow:visible;padding:64px 24px}
  .other-side__night-inner{position:static;transform:none;padding:0}
}
/* =========================================================
   APP REVEAL — first product moment, night theme begins
   ========================================================= */
/* The dark run, sealed at the top.

   Sections are laid out at fractional pixel positions (vh paddings,
   clamp()s, a 220lvh pinned section), so the seam between two dark
   sections can land mid-pixel and let #main's paper canvas through as a
   bright hairline — visible right under the nav when you jump to a dark
   section. A 1px shadow in the section's own colour covers the seam
   without touching the layout. */
.app-reveal,.experience--tonight,.experience--showup,.footer{
  box-shadow:0 -1px 0 0 var(--night);
}
.app-reveal{background:var(--night);color:#fff}
/* App Reveal and Tonight are the same composition: identical column
   ratio, identical stage alignment and identical heading scale, so the
   two phones sit on the same vertical line as you scroll from one to the
   other. They used to differ on all three. */
.app-reveal__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.app-reveal__body{
  font-family:"Satoshi",sans-serif;font-weight:700;
  font-size:clamp(30px,4.4vw,48px);line-height:1.2;letter-spacing:-.04em;color:#fff;
}
.app-reveal .link-arrow{color:var(--red)}
.app-reveal__stage{position:relative;display:flex;justify-content:flex-end}

/* =========================================================
   DEVICE — lightweight generic phone shell reused by App Reveal,
   Tonight and Show Up. Deliberately separate from .phone (Persona)
   so the working Persona interaction is never at risk.
   ========================================================= */
.device{
  position:relative;width:240px;height:490px;border-radius:40px;
  background:linear-gradient(160deg,#2E2E2C 0%,#1D1D1B 18%,#121211 42%,#0B0B0A 58%,#161615 78%,#2B2B29 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.10),0 0 0 2px rgba(0,0,0,.85),0 40px 70px rgba(0,0,0,.5);
  padding:8px;
}
.device__notch{
  position:absolute;top:18px;left:50%;transform:translateX(-50%);
  width:66px;height:18px;background:#000;border-radius:10px;z-index:2;
}
.device__screen{
  position:relative;width:100%;height:100%;border-radius:34px;overflow:hidden;
  background:linear-gradient(170deg,#141413 0%,#0C0C0B 40%,#080807 100%);
  display:flex;flex-direction:column;padding:40px 16px 20px;color:#fff;
}
.device__label{
  font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.5);margin-bottom:14px;
}

/* App Reveal phone mock — a small realistic-feeling event card instead
   of an abstract centred glow. Still not a real screenshot. */
.device__screen--app{padding:20px 14px 16px}
.app-mock{flex:1;display:flex;flex-direction:column;min-height:0}
.app-mock__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.app-mock__badge{
  padding:5px 12px;border-radius:99px;background:var(--brand-pink);color:#fff;
  font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}
.app-mock__time{font-size:12px;color:rgba(255,255,255,.5)}
.app-mock__card{
  border-radius:20px;overflow:hidden;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
}
.app-mock__cover{
  height:96px;
  background:
    radial-gradient(120% 140% at 20% 0%,rgba(255,0,93,.35),transparent 60%),
    linear-gradient(160deg,#2E2E2C 0%,#111 100%);
}
.app-mock__card-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:4px}
.app-mock__title{font-family:"Satoshi",sans-serif;font-size:15px;font-weight:700;color:#fff}
.app-mock__meta{font-size:11.5px;color:rgba(255,255,255,.5)}
.app-mock__avatars{display:flex;margin-top:16px}
.app-mock__avatars span{
  width:26px;height:26px;border-radius:50%;margin-left:-8px;
  background:linear-gradient(160deg,#3A3A38,#111);border:2px solid #0C0C0B;
}
.app-mock__avatars span:first-child{margin-left:0}

/* =========================================================
   EXPERIENCE — TONIGHT
   ========================================================= */
.experience--tonight{background:var(--night);color:#fff;overflow:hidden}
/* Matched to App Reveal above — the phone is no longer scaled down,
   pushed right and clipped by the column's overflow. */
.tonight__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.tonight__title{font-size:clamp(30px,4.4vw,48px);line-height:1.2;letter-spacing:-.04em;color:#fff}
.tonight__small{
  display:block;margin-top:10px;
  font-size:clamp(17px,2vw,22px);font-weight:500;letter-spacing:-.02em;
  color:var(--on-night-2);
}
.tonight__copy p{
  color:var(--brand-pink);margin-top:22px;font-weight:600;
  font-size:14px;letter-spacing:.01em;
}
.tonight__stage{position:relative;display:flex;justify-content:flex-end;align-items:center}

.device__cards{display:flex;flex-direction:column;gap:10px;flex:1}
.device__card{
  padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.1);
  display:flex;flex-direction:column;gap:2px;justify-content:center;
}
.device__card--dim{background:rgba(255,255,255,.04)}
.device__card--dim .device__card-meta{opacity:.7}
.device__card-title{font-family:"Satoshi",sans-serif;font-size:13.5px;font-weight:600;color:#fff}
.device__card-meta{font-size:11px;color:rgba(255,255,255,.5)}
.device__dice{
  align-self:flex-end;width:34px;height:34px;border-radius:12px;
  background:var(--red);display:grid;place-items:center;color:#fff;margin-top:14px;
}
.device__dice svg{width:19px;height:19px}

/* Real app screenshots (simulator, 1206x2622). The frame takes its height
   from the screenshot's own ratio so nothing gets cropped at any size. */
.device:has(.device__screen--shot){height:auto}
.device__screen--shot{padding:0;height:auto;aspect-ratio:1206/2622;background:#000}
.device__screen--shot img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:top;display:block;
}
/* Tonight: For You and Dice take turns, like tapping the segment control. */
/* Paused until the phone is on screen (main.js adds .is-playing): a
   running infinite animation ticked style every frame for the whole page,
   Other Side's scrub included, which was part of what phones stuttered on. */
@media (prefers-reduced-motion:no-preference){
  .device__screen--swap img:last-child{animation:device-swap 9s ease-in-out infinite paused}
  .device__screen--swap.is-playing img:last-child{animation-play-state:running}
}
@media (prefers-reduced-motion:reduce){
  .device__screen--swap img:last-child{display:none}
}
@keyframes device-swap{
  0%,42%{opacity:0}
  50%,92%{opacity:1}
  100%{opacity:0}
}

/* =========================================================
   EXPERIENCE — SHOW UP
   3 lightweight states cycled while the section is in view
   (Discover → Confirmed → Countdown).
   ========================================================= */
.experience--showup{background:var(--night);color:#fff}
.showup__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.showup__stage{display:flex;justify-content:center}
.showup__title{font-size:clamp(34px,4.6vw,58px);color:#fff}
.showup__copy p{color:var(--on-night-2);margin-top:18px}
.showup__note{font-size:14px;color:rgba(255,255,255,.4)}

/* a plan-detail feel: cover image area up top, then the description
   text a real "view plan" screen would show */
.showup__cover{
  height:110px;border-radius:18px;margin:-8px -4px 16px;
  background:
    radial-gradient(120% 140% at 80% 0%,rgba(255,0,93,.3),transparent 60%),
    linear-gradient(160deg,#2E2E2C 0%,#111 100%);
}
.showup__mock{flex:1;display:flex;flex-direction:column;justify-content:flex-start;gap:8px}
/* V2: product truths live as a small tertiary label on the phone itself,
   not a dominant checklist in the copy column. */
.showup__tertiary{
  font-size:10.5px;letter-spacing:.04em;color:rgba(255,255,255,.4);
  margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.08);
}
.showup__time{font-family:"Satoshi",sans-serif;font-size:34px;font-weight:700;letter-spacing:-.03em}
.showup__event{font-size:15px;color:rgba(255,255,255,.8)}
.showup__desc{margin-top:6px;font-size:12px;color:rgba(255,255,255,.5);line-height:1.5}
.showup__status{
  display:inline-flex;align-self:flex-start;margin-top:10px;padding:6px 14px;border-radius:99px;
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:rgba(255,255,255,.08);color:rgba(255,255,255,.6);
  transition:background .4s var(--ease),color .4s var(--ease);
}
#showupScreen[data-state="confirmed"] .showup__status{background:rgba(255,0,93,.16);color:var(--red)}
#showupScreen[data-state="countdown"] .showup__status{background:#fff;color:var(--night)}

.phone-wrap{position:relative}

/* =========================================================
   COMMUNITY
   ========================================================= */
.community{background:var(--paper)}
.community__grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.community__stream{height:40px;overflow:hidden;margin-top:20px}
.community__word{
  display:block;font-family:"Satoshi",sans-serif;font-weight:600;line-height:1.2;
  font-size:clamp(20px,2.4vw,28px);letter-spacing:-.02em;color:var(--ink-2);
  opacity:0;transform:translateY(14px);
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.community__word.is-active{opacity:1;transform:none}
.community__final{
  margin-top:26px;font-family:"Satoshi",sans-serif;font-weight:700;
  font-size:clamp(20px,2.4vw,26px);letter-spacing:-.03em;
}
.community__hosts{margin-top:16px;color:var(--ink-2);max-width:440px}
.community__media{position:relative;display:flex;flex-direction:column;gap:12px}
/* Honest placeholders, not a landmark photo standing in as final art —
   see TODO_REAL_COMMUNITY_PHOTO_* markers in the HTML. Semantically
   labelled so future photography can be matched: gallery / rooftop / dinner. */
.community-tile{
  position:relative;aspect-ratio:16/9;border-radius:var(--r-lg);
  background:repeating-linear-gradient(135deg,var(--bg-soft),var(--bg-soft) 12px,var(--surface) 12px,var(--surface) 24px);
  border:1px dashed var(--line-2);display:flex;align-items:flex-end;padding:16px;
}
.community-tile--lg{aspect-ratio:16/10}
.community-tile-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.community-tile__tag{
  position:relative;z-index:1;
  font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--ink-3);
  background:var(--surface);padding:6px 12px;border-radius:99px;box-shadow:var(--shadow-sm);
}
/* the one real photo we have — everything else stays an honest placeholder */
.community-tile--photo{background:none;border:none;overflow:hidden}
.community-tile--photo img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  border-radius:inherit;
}
.community-tile--photo::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(to top,rgba(0,0,0,.5),transparent 55%);
}
.community-tile--photo .community-tile__tag{background:rgba(255,255,255,.92)}

/* =========================================================
   SAFETY — deliberately calm, no signature motion
   ========================================================= */
.safety{background:var(--paper)}
.safety__inner{max-width:680px}
.safety__body{margin-top:20px;color:var(--ink-2);font-size:17px;line-height:1.6}

/* =========================================================
   FINAL CTA — full-bleed night scene (V2)
   Was a rounded black card on a white page; now the section itself
   is the night world, flowing directly into the footer below.
   ========================================================= */
.join-scene{
  position:relative;overflow:hidden;
  background:
    radial-gradient(80% 90% at 15% 0%,rgba(255,0,93,.14),transparent 55%),
    radial-gradient(70% 80% at 90% 100%,rgba(255,255,255,.05),transparent 55%),
    var(--night);
  color:#fff;
  padding:140px 0 120px;
  border-top-left-radius:var(--r-xl);border-top-right-radius:var(--r-xl);
}
/* compound selector, not just .cta--scene — the base .cta rule (further
   down the file) sets background/radius/shadow with equal specificity,
   so a bare .cta--scene would lose to source order */
.cta.cta--scene{
  position:relative;text-align:center;max-width:600px;margin-inline:auto;
  padding:0;border-radius:0;box-shadow:none;background:none;color:inherit;
}
/* .cta.cta--scene, not .cta--scene: the generic .cta .btn--primary rule
   further down has the same weight and, coming later, was painting this
   button white */
.cta.cta--scene .btn--primary{background:var(--brand-pink);color:#fff;box-shadow:0 10px 24px rgba(255,0,93,.32)}
.cta.cta--scene .btn--primary:hover{background:var(--red-deep);box-shadow:0 14px 30px rgba(255,0,93,.35)}
.cta__meta{margin-top:14px;font-size:13px;color:rgba(255,255,255,.4)}

@media (max-width:960px){
  .night-fragments__grid,.app-reveal__grid,.tonight__grid,.showup__grid,.community__grid{grid-template-columns:1fr;gap:40px}
  .showup__stage,.app-reveal__stage,.night-fragments__frame{order:-1}
  /* single column: the phones go back to centre, there is no second
     column left to sit against */
  .tonight__stage,.app-reveal__stage{justify-content:center}
  /* Same five lines as the desktop, centred under the full-width video.
     Three put the neighbouring verbs right at the edges of the mask, where
     the gradient is steepest, and ate the top of the one above and the
     bottom of the one below — on a phone they were visibly clipped rather
     than faded. The stream is sized to the widest verb, so centring does
     not make it shift as the word changes. */
  .nf-words{gap:.3em;justify-content:center;font-size:clamp(28px,7.4vw,44px)}
  /* no forced full screen here: the video and three lines of type come to
     about a third of it, and flex centring turned the rest into a large
     empty band above and below */
  /* section.night-fragments, not .night-fragments: a later .section rule
     in the 760px block resets the padding otherwise */
  /* 100px on top: at 44, and still at 72, the video read as butting
     straight up against the dark hero above it */
  section.night-fragments{min-height:0;padding:100px 0 16px}
  .night-fragments__grid{gap:28px}
  /* 1.15x quicker: the scrub range is the section height minus the pin,
     so 204 - 100 = 104lvh of travel where it was 120. */
  .other-side{height:204vh;height:204lvh}
}
/* Motion on only: under reduced motion Other Side is a static stack, and a
   screen-tall layer each would break it. */
@media (max-width:960px) and (prefers-reduced-motion:no-preference){
  /* On a phone the line sits a little above centre, at about 36% of the
     screen below the 64px bar. The paper that shows above it as the
     section arrives is exactly how far down the pinned line sits, so dead
     centre meant ~460px of empty paper between the verbs and "Artık," on
     an iPhone 11. The layers are sized to svh — the visible screen with
     Safari's toolbars showing — so the line is placed against what is
     actually on screen rather than the taller lvh box behind the
     toolbars. Day and night share every value, so nothing jumps mid-wipe. */
  .other-side__day,.other-side__night-inner{
    bottom:auto;height:100vh;height:100svh;
    padding-top:64px;
    padding-bottom:calc((100vh - 64px) * .28);
    padding-bottom:calc((100svh - 64px) * .28);
  }
}
@media (max-width:760px){
  .device{width:210px;height:430px}
  /* phones: a slightly taller frame and a narrower gutter so the video
     reads bigger than a 16:9 strip across a narrow screen */
  .night-fragments .shell{padding-inline:14px}
  .night-fragments__frame{aspect-ratio:3/2}
}

/* =========================================================
   Sections
   ========================================================= */
.section{padding:104px 0}
.section--tight{padding:64px 0}
.section--soft{background:var(--bg-soft)}

.sec-head{max-width:760px;margin-bottom:56px}
.sec-head--center{margin-inline:auto;text-align:center}
.sec-title{font-size:clamp(34px,4.6vw,58px)}
.sec-sub{margin-top:18px;color:var(--ink-2);font-size:17px}
.sec-head--center .sec-sub{margin-inline:auto;max-width:520px}

/* manifesto */
.manifesto__grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.manifesto__lead{
  font-family:"Satoshi",sans-serif;font-weight:500;
  font-size:clamp(21px,2.3vw,27px);line-height:1.32;letter-spacing:-.03em;
}
.manifesto__body{color:var(--ink-2);display:flex;flex-direction:column;gap:18px;align-items:flex-start}

/* feature cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{
  background:var(--surface);border-radius:var(--r-lg);padding:30px 28px 32px;
  border:1px solid rgba(255,255,255,.9);box-shadow:var(--shadow-sm);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.card__ico{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent);margin-bottom:22px;
}
.card__ico svg{width:23px;height:23px}
.card h3{font-size:20px;letter-spacing:-.03em}
.card p{margin-top:11px;color:var(--ink-2);font-size:15.5px;line-height:1.55}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
#how .steps{margin-bottom:80px}
.step{padding:32px 30px 34px;border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-sm)}
.step__n{
  font-family:"Satoshi",sans-serif;font-weight:700;font-size:14px;
  letter-spacing:.02em;color:var(--accent);
}
.step h3{margin-top:20px;font-size:22px}
.step p{margin-top:12px;color:var(--ink-2);font-size:15.5px;line-height:1.55}

/* split */
.split{display:grid;grid-template-columns:.85fr 1fr;gap:56px;align-items:center}
.split__title{font-size:clamp(26px,3vw,38px);margin-bottom:20px}
.split__body p{color:var(--ink-2)}
.ticks{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.ticks li{position:relative;padding-left:30px;font-weight:500;font-size:15.5px}
.ticks li::before{
  content:"";position:absolute;left:0;top:7px;width:17px;height:17px;border-radius:50%;
  background:var(--accent-soft);
  box-shadow:inset 0 0 0 1.5px var(--accent);
}
.ticks li::after{
  content:"";position:absolute;left:5px;top:12px;width:7px;height:4px;
  border-left:1.8px solid var(--accent);border-bottom:1.8px solid var(--accent);
  transform:rotate(-45deg);
}

/* =========================================================
   Persona section + iPhone demo
   ========================================================= */
.persona-grid{display:grid;grid-template-columns:1fr 340px;gap:72px;align-items:center}
.persona-copy p{margin-top:20px;color:var(--ink-2)}
.persona-copy .ticks{margin-top:30px}
.persona-hint{font-size:14px;color:var(--ink-3)}

/* tight and faint, just enough to lift the edge — the old 60px, 28% drop
   shadow tinted a wide band of the section grey around the phone */
.phone-wrap{width:320px;margin:0 auto;filter:drop-shadow(0 2px 6px rgba(17,17,17,.10))}
/* V2: continuous idle float removed — an interactive target should feel
   stable, not in constant motion. Movement now lives in the surrounding
   interest tokens and in the selection/reveal states instead. */
.phone{
  position:relative;width:320px;height:660px;border-radius:52px;
  background:linear-gradient(160deg,#2E2E2C 0%,#1D1D1B 18%,#121211 42%,#0B0B0A 58%,#161615 78%,#2B2B29 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.10),0 0 0 2.5px rgba(0,0,0,.85),inset 0 0 0 1px rgba(255,255,255,.05);
}
.phone::before{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:3;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.05) 22%,transparent 50%,rgba(0,0,0,.04) 75%,rgba(255,255,255,.08) 100%);
}
.side-btn{position:absolute;z-index:2;background:linear-gradient(to right,#111,#242422,#111)}
.btn-action{left:-4px;top:112px;width:5px;height:30px;border-radius:3px 2px 2px 3px}
.btn-vol-up{left:-4px;top:158px;width:5px;height:38px;border-radius:3px 2px 2px 3px}
.btn-vol-dn{left:-4px;top:208px;width:5px;height:38px;border-radius:3px 2px 2px 3px}
.btn-power{right:-4px;top:172px;width:5px;height:68px;border-radius:2px 3px 3px 2px;background:linear-gradient(to left,#111,#242422,#111)}

.phone-screen{
  position:absolute;inset:10px;border-radius:44px;overflow:hidden;z-index:1;
  background:
    radial-gradient(ellipse 80% 45% at 50% 16%,rgba(255,255,255,.09) 0%,transparent 70%),
    linear-gradient(170deg,#141413 0%,#0C0C0B 40%,#080807 100%);
  display:flex;flex-direction:column;padding:0 16px;color:#fff;
}
.dynamic-island{position:absolute;top:13px;left:50%;transform:translateX(-50%);width:92px;height:26px;background:#000;border-radius:13px;z-index:20}
.home-indicator{position:absolute;bottom:9px;left:50%;transform:translateX(-50%);width:124px;height:5px;background:rgba(255,255,255,.28);border-radius:3px;z-index:20}
.status-bar{height:58px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 8px;margin-bottom:10px}
.status-time{font-size:15px;font-weight:600;letter-spacing:-.02em}
.status-icons{display:flex;align-items:center;gap:5px}

/* in-phone app */
.app{flex:1;min-height:0;position:relative}
.app-screen{
  position:absolute;inset:0;display:flex;flex-direction:column;
  opacity:0;transform:translateX(16px);pointer-events:none;
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.app-screen.is-active{opacity:1;transform:none;pointer-events:auto}
.app-top{display:flex;justify-content:flex-end;flex-shrink:0;padding:0 2px 10px}
.app-count{font-size:10px;letter-spacing:.08em;color:rgba(255,255,255,.42)}
.app-h{
  font-family:"Satoshi",sans-serif;font-size:27px;font-weight:700;
  letter-spacing:-.035em;line-height:1.04;margin-bottom:8px;color:#fff;
}
.app-sub{font-size:11px;color:rgba(255,255,255,.45);line-height:1.55;margin-bottom:12px}
.app-cats{flex:1;min-height:0;overflow-y:auto;padding-bottom:10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.app-cats::-webkit-scrollbar{display:none}
.cat-label{
  font-size:9px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(255,255,255,.35);margin:14px 0 9px;
}
.app-cats .cat-label:first-child{margin-top:2px}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{
  display:inline-flex;align-items:center;gap:6px;font-family:inherit;text-align:left;
  padding:7px 13px;border-radius:100px;cursor:pointer;user-select:none;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);
  font-size:11px;font-weight:500;color:rgba(255,255,255,.7);
  transition:background .3s var(--ease),color .3s,border-color .3s;
}
.chip:hover{background:rgba(255,255,255,.13)}
.chip.is-sel{background:#fff;border-color:#fff;color:#111;box-shadow:0 0 18px rgba(255,255,255,.22)}
@keyframes chipPop{0%{transform:scale(1)}45%{transform:scale(1.13)}100%{transform:scale(1)}}
.chip.pop{animation:chipPop .32s var(--ease)}

.app-cta{
  flex-shrink:0;margin:10px 2px 26px;padding:14px;border-radius:100px;border:none;cursor:pointer;
  font-family:inherit;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  background:#fff;color:#111;text-align:center;display:block;width:calc(100% - 4px);
  transition:opacity .3s,background .3s;
}
.app-cta:hover:not(:disabled){background:rgba(255,255,255,.85)}
.app-cta:disabled{background:rgba(255,255,255,.08);color:rgba(255,255,255,.35);cursor:default}

.per-item{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
#perScreen.is-active .per-item{opacity:1;transform:none}
#perScreen.is-active .p1{transition-delay:.15s}
#perScreen.is-active .p2{transition-delay:.5s}
#perScreen.is-active .p3{transition-delay:.9s}
#perScreen.is-active .p4{transition-delay:1.3s}
#perScreen.is-active .p5{transition-delay:1.7s}
#perScreen::before{
  content:"";position:absolute;top:32%;left:50%;transform:translate(-50%,-50%);
  width:280px;height:280px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.16),transparent 70%);filter:blur(42px);
}
.persona-body{
  flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:0 4px;position:relative;
}
.persona-label{font-size:9px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:10px}
.persona-title{font-family:"Satoshi",sans-serif;font-size:24px;font-weight:700;letter-spacing:-.035em;margin-bottom:10px;color:#fff}
.persona-desc{font-size:11.5px;color:rgba(255,255,255,.55);line-height:1.65;margin-bottom:24px}
.user-card{
  width:100%;border-radius:18px;padding:16px;text-align:left;position:relative;
  background:rgba(255,255,255,.07);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.12),0 10px 30px rgba(0,0,0,.35);
  display:flex;flex-direction:column;gap:11px;
}
.user-row{display:flex;justify-content:space-between;align-items:flex-start}
.user-name{font-family:"Satoshi",sans-serif;font-size:15px;font-weight:600;color:#fff}
.user-handle{font-size:10px;color:rgba(255,255,255,.4)}
.user-score{text-align:right;color:#fff}
.user-score b{font-family:"Satoshi",sans-serif;font-size:24px;font-weight:700;line-height:1;display:block}
.user-score small{font-size:8px;font-weight:600;letter-spacing:.25em;text-transform:uppercase;opacity:.5}
.user-tags{display:flex;flex-wrap:wrap;gap:6px}
.user-tags span{
  font-size:9.5px;padding:5px 11px;border-radius:100px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.85);
}
@media (prefers-reduced-motion:reduce){
  .per-item{opacity:1;transform:none}
}

/* stat band */
.statband{
  display:grid;grid-template-columns:repeat(4,1fr);
  background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-sm);
  padding:44px 20px;
}
.statband__item{text-align:center;padding:6px 12px;border-right:1px solid var(--line)}
.statband__item:last-child{border-right:0}
.statband__n{
  display:block;font-family:"Satoshi",sans-serif;font-weight:700;
  font-size:clamp(32px,3.6vw,46px);letter-spacing:-.05em;line-height:1;
}
.statband__l{display:block;margin-top:10px;font-size:13.5px;color:var(--ink-2)}
.statband--beta .statband__n{font-size:clamp(22px,2.4vw,30px);letter-spacing:-.04em}

/* persona section spacing */
/* overflow:hidden as a defensive clip — decorative persona tokens are
   intentionally offset beyond the phone's own box and must never bleed
   into the section that follows */
.persona-sec{padding-bottom:120px;overflow:hidden}

/* cta */
.cta{
  position:relative;overflow:hidden;
  border-radius:var(--r-xl);padding:76px 56px 82px;text-align:center;
  background:
    radial-gradient(80% 120% at 10% 0%,rgba(255,255,255,.13),transparent 55%),
    radial-gradient(70% 100% at 95% 100%,rgba(255,255,255,.08),transparent 55%),
    var(--dark);
  color:#fff;box-shadow:var(--shadow-lg);
}
.cta__title{font-size:clamp(32px,4.4vw,54px)}
.cta__sub{margin:20px auto 0;max-width:440px;color:rgba(255,255,255,.62);font-size:16.5px}
.cta__form{
  display:flex;gap:8px;margin:36px auto 0;max-width:520px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  padding:8px;border-radius:99px;
}
.cta__form input{
  flex:1;min-width:0;background:transparent;border:0;outline:0;
  padding:0 18px;font-size:16px;color:#fff;
}
.cta__form input::placeholder{color:rgba(255,255,255,.42)}
.cta__form .btn{flex:0 0 auto}
.cta .btn--primary{background:#fff;color:var(--ink);box-shadow:none}
.cta .btn--primary:hover{background:rgba(255,255,255,.86);box-shadow:0 12px 26px rgba(0,0,0,.32)}
.cta__msg{margin-top:18px;min-height:22px;font-size:14.5px;color:rgba(255,255,255,.86)}
.cta__msg.is-error{color:rgba(255,255,255,.55)}
.cta__alt{margin-top:6px;font-size:14.5px;color:rgba(255,255,255,.5)}
.cta__alt[hidden]{display:none}
.cta__alt a{color:#fff;font-weight:600;border-bottom:1px solid rgba(255,255,255,.3)}
.cta__alt a:hover{border-color:#fff}
.cta__req{margin-top:26px;font-size:12.5px;color:rgba(255,255,255,.34)}

/* KVKK consent, under the pill. Left-aligned on purpose: the rest of the
   block is centred, but a two-line sentence with a link in it is read, not
   glanced at, and centred body text is harder to read. */
.cta__consent{margin:16px auto 0;max-width:520px;display:grid;gap:9px;text-align:left}
.cta__consent label{
  display:flex;gap:10px;align-items:flex-start;cursor:pointer;
  font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.42);
}
.cta__consent input{
  flex:0 0 auto;margin:1px 0 0;width:15px;height:15px;
  accent-color:#fff;cursor:pointer;
}
.cta__consent a{color:rgba(255,255,255,.72);border-bottom:1px solid rgba(255,255,255,.22)}
.cta__consent a:hover{color:#fff;border-color:#fff}
/* Set by main.js when the required box is submitted unticked. */
.cta__consent label.is-error{color:rgba(255,255,255,.82)}
.cta__consent label.is-error input{outline:1px solid rgba(255,255,255,.55);outline-offset:2px}
.cta__form .btn[disabled]{opacity:.55;cursor:default}

/* =========================================================
   Footer
   ========================================================= */
/* V2: the light→dark "cap" now belongs to .join-scene above (the section
   that actually transitions from paper to night) — footer follows directly
   in the same night world, so it stays flat/seamless and matches its tone. */
.footer{
  background:var(--night);color:#fff;padding:80px 0 40px;
}
.footer__grid{
  display:grid;grid-template-columns:1.5fr repeat(3,minmax(0,1fr));
  gap:48px;padding-bottom:88px;
}
.footer__brand .brand{color:#fff}
.footer__brand p{
  margin-top:22px;color:rgba(255,255,255,.42);
  font-size:16px;line-height:1.45;letter-spacing:-.02em;
}

.footer__col{display:flex;flex-direction:column;align-items:flex-start}
.footer__col h4{
  font-size:15.5px;font-weight:400;letter-spacing:-.015em;
  color:rgba(255,255,255,.38);margin-bottom:14px;
}
.footer__col a{
  padding:8px 0;font-size:15.5px;font-weight:500;color:#fff;
  transition:color .25s;
}
.footer__col a:hover{color:rgba(255,255,255,.55)}
.footer__contact{display:flex;align-items:center;gap:14px}
.footer__ico{width:19px;height:19px;padding:0;color:#fff;opacity:.85;transition:opacity .25s}
.footer__ico:hover{opacity:.5}
.footer__ico svg{width:100%;height:100%;display:block}

.footer__bottom{
  display:flex;align-items:center;gap:30px;flex-wrap:wrap;
  padding-top:30px;border-top:1px solid rgba(255,255,255,.12);
  font-size:14px;color:rgba(255,255,255,.38);
}
.footer__sign{display:inline-flex;align-items:center;gap:7px;margin-left:auto}

/* language picker */
.langpick{position:relative;display:inline-flex;align-items:center;gap:8px;color:#fff}
.langpick__ico{width:15px;height:15px;flex:0 0 15px;opacity:.6}
.langpick__ico svg{width:100%;height:100%;display:block}
.langpick select{
  appearance:none;-webkit-appearance:none;
  background:transparent;border:0;outline:0;cursor:pointer;
  padding:6px 22px 6px 0;font-size:14px;font-weight:600;color:#fff;letter-spacing:-.01em;
}
.langpick select option{background:#1b1b19;color:#fff}
.langpick__caret{
  position:absolute;right:0;width:14px;height:14px;pointer-events:none;opacity:.55;
}
.langpick__caret svg{width:100%;height:100%;display:block}
.langpick:hover .langpick__caret{opacity:.9}
/* =========================================================
   Legal pages
   A quiet, text-first layout modelled on apple.com/legal:
   one narrow column, breadcrumb, dateline, hairline rules,
   no cards or shadows. Each document is its own page under
   /legal/; legal.html is the index that links to them.
   ========================================================= */
.legal-page{scroll-padding-top:120px;background:var(--bg)}

/* the legal pages carry the whole document set in the nav pill itself, so a
   reader (or an App Store reviewer) can move between the seven documents
   from anywhere. The row scrolls sideways rather than wrapping or hiding. */
.nav--legal .nav__inner{gap:12px;padding-left:18px}
/* the marketing nav centres this group absolutely; the legal set is a
   different shape — a scrollable row that has to flex in the normal flow
   next to the brand and the language switch — so it opts back out. */
.nav--legal .nav__links{
  position:static;transform:none;
  display:flex;flex:1 1 auto;min-width:0;gap:2px;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
/* the pink CTA rule lived on .nav and went with the pill; legal pages
   still use a real button there, so keep their colour unchanged */
.nav--legal .btn--primary{background:var(--brand-pink);box-shadow:0 8px 20px rgba(255,0,93,.28)}
.nav--legal .btn--primary:hover{background:var(--red-deep)}
.nav--legal .nav__links::-webkit-scrollbar{display:none}
.nav--legal .nav__links a{
  flex:0 0 auto;padding:8px 12px;font-size:13.5px;white-space:nowrap;
}
.nav--legal .nav__links a[aria-current="page"]{
  color:var(--ink);background:var(--bg-soft);font-weight:600;
}
.nav__lang{
  flex:0 0 auto;padding:9px 14px;border-radius:99px;border:1px solid var(--line-2);
  font-size:13px;font-weight:600;color:var(--ink-2);white-space:nowrap;
  transition:color .2s,border-color .2s;
}
.nav__lang:hover{color:var(--ink);border-color:var(--ink)}

.lg-shell{width:100%;max-width:860px;margin-inline:auto;padding-inline:24px}
.lg-doc{padding:150px 0 40px}
.lg-doc--index{padding-bottom:20px}

.lg-crumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-size:13.5px;color:var(--ink-3);margin-bottom:26px;
}
.lg-crumb a{border-bottom:1px solid transparent;transition:border-color .2s}
.lg-crumb a:hover{border-bottom-color:var(--line-2)}
.lg-crumb span[aria-current]{color:var(--ink-2)}

.lg-title{font-size:clamp(30px,4.4vw,46px);letter-spacing:-.032em;line-height:1.08}
.lg-title__en{margin-top:10px;font-size:15px;color:var(--ink-3)}
.lg-updated{margin-top:18px;font-size:13.5px;color:var(--ink-3)}

.lg-intro{
  margin-top:26px;padding-top:22px;border-top:1px solid var(--line);
  font-size:14.5px;line-height:1.65;color:var(--ink-3);
}
.lg-intro--lead{
  border-top:0;padding-top:0;margin-top:20px;
  font-size:18px;line-height:1.6;color:var(--ink-2);max-width:640px;
}
.lg-intro a{border-bottom:1px solid var(--line-2)}

.lg-notice{
  margin-top:34px;padding:20px 0 20px 20px;border-left:2px solid var(--red);
  font-size:14.5px;line-height:1.65;color:var(--ink-2);
}
.lg-notice strong{color:var(--ink);font-weight:600}

/* index ---------------------------------------------------- */
.lg-group{margin-top:56px;padding-top:26px;border-top:1px solid var(--line)}
.lg-group h2{font-size:22px;letter-spacing:-.022em}
.lg-group__desc{margin-top:10px;font-size:15px;line-height:1.6;color:var(--ink-3);max-width:620px}

.lg-links{list-style:none;margin:22px 0 0;padding:0}
.lg-links li{padding:16px 0;border-top:1px solid var(--line)}
.lg-links li:first-child{border-top:0;padding-top:0}
.lg-links a{
  display:inline-block;font-size:17px;font-weight:600;color:var(--ink);
  border-bottom:1px solid var(--line-2);transition:border-color .2s;
}
.lg-links a:hover{border-bottom-color:var(--ink)}
.lg-links li span{display:block;margin-top:6px;font-size:14.5px;line-height:1.6;color:var(--ink-3)}

/* document body -------------------------------------------- */
.legal-doc__body{margin-top:44px}
.legal-doc__body p{color:var(--ink-2);font-size:16px;line-height:1.7}
.legal-doc__body > p + p{margin-top:16px}
.legal-doc__body strong{color:var(--ink);font-weight:600}
.legal-doc__body a{border-bottom:1px solid var(--line-2)}
.legal-doc__body a:hover{border-bottom-color:var(--ink)}

.legal-doc__body h3{
  margin:52px 0 0;padding-top:24px;border-top:1px solid var(--line);
  font-size:21px;font-weight:700;color:var(--ink);letter-spacing:-.024em;line-height:1.25;
}
.legal-doc__body h4{
  margin:34px 0 0;font-size:17px;font-weight:600;color:var(--ink);
  letter-spacing:-.016em;line-height:1.35;
}
.legal-doc__body h3 + p,.legal-doc__body h4 + p,
.legal-doc__body h3 + .legal-list,.legal-doc__body h4 + .legal-list,
.legal-doc__body h3 + .legal-tablewrap,.legal-doc__body h4 + .legal-tablewrap,
.legal-doc__body h3 + .legal-call,.legal-doc__body h4 + .legal-call{margin-top:16px}

.legal-lead{font-size:18px !important;line-height:1.6 !important;color:var(--ink) !important}

/* anything that follows a block element needs its own air */
.legal-doc__body .legal-tablewrap + p,
.legal-doc__body .legal-list + p,
.legal-doc__body .legal-call + p,
.legal-doc__body .legal-consent + p{margin-top:22px}
.legal-doc__body .legal-tablewrap + .legal-call,
.legal-doc__body .legal-list + .legal-call{margin-top:26px}

.legal-list{margin:16px 0 0;padding-left:22px;display:flex;flex-direction:column;gap:10px}
.legal-list li{color:var(--ink-2);font-size:15.5px;line-height:1.65;padding-left:6px}
.legal-list li::marker{color:var(--ink-3);font-variant-numeric:tabular-nums}
.legal-list strong{color:var(--ink);font-weight:600}

/* tables — the documents are mostly matrices, so they scroll on their own */
.legal-tablewrap{margin-top:22px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.legal-table{
  width:100%;min-width:520px;border-collapse:collapse;
  font-size:14px;line-height:1.6;text-align:left;
}
.legal-table th,.legal-table td{
  padding:13px 16px 13px 0;border-bottom:1px solid var(--line);vertical-align:top;
}
.legal-table th:last-child,.legal-table td:last-child{padding-right:0}
.legal-table thead th{
  color:var(--ink-3);font-weight:600;font-size:12.5px;letter-spacing:.04em;
  text-transform:uppercase;border-bottom:1px solid var(--line-2);padding-bottom:10px;
}
.legal-table tbody td{color:var(--ink-2)}
.legal-table tbody td:first-child{color:var(--ink);font-weight:500}
.legal-table--plain{min-width:340px}
.legal-table--plain tbody td:first-child{width:250px;color:var(--ink-3);font-weight:400}

/* callouts kept from the source documents */
.legal-call{margin-top:26px;padding:2px 0 2px 20px;border-left:2px solid var(--line-2)}
.legal-call__title{
  display:block;font-size:12px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:9px;
}
.legal-call p{font-size:14.5px !important;line-height:1.65}
.legal-call p + p{margin-top:12px}
.legal-call--alert{border-left-color:var(--red)}
.legal-call--alert .legal-call__title{color:var(--red-deep)}

/* the ☐ statements are what the app shows at sign-up */
.legal-consent{margin-top:26px;padding:22px;border:1px solid var(--line-2);border-radius:10px}
.legal-consent__text{
  display:flex;gap:13px;align-items:flex-start;
  font-size:15.5px !important;color:var(--ink) !important;font-weight:500;line-height:1.6;
}
.legal-consent__box{
  flex:0 0 17px;width:17px;height:17px;margin-top:3px;
  border:1.5px solid var(--ink-3);border-radius:4px;
}
.legal-consent__note{margin-top:11px;font-size:13.5px !important;color:var(--ink-3) !important}
.legal-consent__fields{
  margin-top:16px;padding-top:16px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:8px 26px;font-size:13.5px !important;color:var(--ink-3) !important;
}

/* fields that stay blank until the sole proprietorship is registered */
.legal-blank{
  display:inline-block;min-width:170px;max-width:100%;
  border-bottom:1px dotted var(--line-2);vertical-align:baseline;
}
.legal-blank--sm{min-width:96px}

.legal-warn{
  margin-top:26px !important;padding:2px 0 2px 20px;border-left:2px solid var(--line-2);
  font-size:14.5px !important;
}
.legal-warn code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;
  background:var(--bg-soft);padding:2px 7px;border-radius:6px;
}

.legal-contact{list-style:none;margin:24px 0 0;padding:0}
.legal-contact li{display:flex;gap:18px;padding:14px 0;border-top:1px solid var(--line);font-size:15px}
.legal-contact li span{flex:0 0 140px;color:var(--ink-3)}
.legal-contact a{font-weight:600;border-bottom:1px solid var(--line-2)}
.legal-contact em{font-style:normal;color:var(--ink-3)}

.lg-foot{
  margin-top:56px;padding-top:24px;border-top:1px solid var(--line);
  font-size:13.5px;line-height:1.65;color:var(--ink-3);
}
.lg-foot p{font-size:13.5px !important;color:var(--ink-3) !important}
.lg-foot p + p{margin-top:8px}
.lg-foot__date{color:var(--ink-2) !important}

.lg-more{margin-top:64px;padding-top:26px;border-top:1px solid var(--line)}
.lg-more h2{font-size:17px;letter-spacing:-.015em}
.lg-more ul{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 28px}
.lg-more a{font-size:15px;color:var(--ink-2);border-bottom:1px solid var(--line-2)}
.lg-more a:hover{color:var(--ink);border-bottom-color:var(--ink)}

@media (max-width:760px){
  .lg-doc{padding-top:132px}
  .lg-shell{padding-inline:20px}
  .legal-doc__body p{font-size:15.5px}
  .legal-table--plain tbody td:first-child{width:auto}
  .lg-links li span{font-size:14px}
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:1080px){
  .float--stat-dark{width:200px;padding:18px}
  .float--rating,.float--users{width:168px;padding:17px}
  .stat__num{font-size:34px}
  .rating__num{font-size:29px}
}

/* Below the shell's own max-width (1180px), the centred hero media box no
   longer leaves enough side margin for the absolutely-positioned floating
   cards — they'd start covering the video. Switch to the stacked strip
   layout for the whole "shell isn't at full width" range, not just phones. */
@media (max-width:1180px){
  .float{position:static;width:auto}
  .float--tags{max-width:none;justify-content:flex-start;padding:0}
  .float--stat-dark,.float--rating,.float--users{
    display:flex;align-items:center;gap:18px;padding:20px 22px;
  }
  .float--stat-dark .stat__label,.float--rating .stat__label,.float--users .stat__label{margin-top:0;flex:1;font-size:13.5px}
  .rating__top{flex:0 0 auto}
}

@media (max-width:960px){
  .nav__links{display:none}
  /* legal pages keep theirs — the set has to stay reachable on a phone */
  .nav--legal .nav__links{display:flex}
  .nav--legal .nav__inner{padding-left:14px}
  /* spec item 11: the mobile header is just the mark and the menu */
  .nav-cta{display:none}
  .nav__burger{display:block}
  .hero{padding-top:132px}
  .cards,.steps{grid-template-columns:repeat(2,1fr)}
  .manifesto__grid,.split{grid-template-columns:1fr;gap:36px}
  .footer__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;padding-bottom:64px}
  .footer__brand{grid-column:1/-1;margin-bottom:12px}
  .persona-grid{grid-template-columns:1fr;gap:52px;justify-items:center}
  .persona-copy{max-width:640px}
  .media--split{aspect-ratio:16/10}
  .statband{grid-template-columns:repeat(2,1fr);gap:28px 0;padding:34px 12px}
  .statband__item:nth-child(2){border-right:0}
}

@media (max-width:760px){
  body{font-size:16px}
  .section{padding:76px 0}
  .hero{padding:120px 24px 72px}

  .cards,.steps{grid-template-columns:1fr}
  .statband{grid-template-columns:repeat(2,1fr)}
  .cta:not(.cta--scene){padding:52px 24px 58px}
  .join-scene{padding:96px 0 80px;border-top-left-radius:var(--r-lg);border-top-right-radius:var(--r-lg)}
  .cta__form{flex-direction:column;background:transparent;border:0;padding:0;gap:12px}
  .cta__form input{
    background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
    border-radius:99px;padding:16px 22px;
  }
  .cta__form .btn{justify-content:center}
  .doclist__meta{flex:0 0 100px}
  .doclist__en{display:block;margin-left:0;margin-top:2px}
  .phone-wrap,.phone{width:290px}
  .phone{height:600px}
  .footer{padding-top:64px}
  .footer__grid{grid-template-columns:1fr 1fr;gap:36px 24px}
  .footer__bottom{gap:18px}
  .footer__sign{margin-left:0;flex:1 0 100%;order:3}
}

@media (max-width:640px){
  /* on a phone the pill is mostly button; the brand already goes home, so
     drop the Home button and give the document row the width back */
  .nav--legal .nav__right .btn{display:none}
  .nav--legal .nav__lang{padding:8px 12px;font-size:12.5px}
  .nav--legal .nav__inner{padding-right:8px;gap:8px}
  .nav--legal .nav__links a{padding:8px 10px}
}

@media (max-width:520px){
  .shell{padding-inline:18px}
  .footer__cols{grid-template-columns:1fr 1fr}
  .doclist__item{flex-wrap:wrap;gap:10px}
  .doclist__meta{flex:1 0 100%}
  .legal-contact li{flex-direction:column;gap:4px}
  .legal-contact li span{flex:none}
  .phone-wrap,.phone{width:270px}
  .phone{height:560px}
  .phone-screen{padding:0 13px}
}

/* Touch devices: the first screen is black all the way down. Newer
   mobile Safari draws the page underneath its floating bottom toolbar,
   but viewport units still stop above that toolbar — so a 100lvh hero
   ended just above it and the light Night Fragments section showed
   through the frosted glass on first open. A 120px dark border-bottom
   runs the hero on under the toolbar; min-height grows by the same 120px.
   The extra 120px is inside the hero, not a border, so the photo and its
   gradient carry on down under the toolbar instead of stopping at a flat
   --night band (a border sits outside the photo layer and showed as a
   visible seam in a different black). The empty 120px flex item at the
   end keeps the copy centred in the first screen, so nothing inside moves.
   Desktop browsers never put a toolbar over the page, so they are left
   alone. */
@media (pointer:coarse){
  .hero{
    min-height:calc(100vh + 120px);
    min-height:calc(100lvh + 120px);
  }
  .hero::after{content:'';flex:0 0 120px}
}

/* ---- Short viewports last: these have to win over the width-based
     queries above, which otherwise reset .hero padding at narrow
     widths and undo the fix on a small phone held sideways. ---- */
/* Short viewports — a phone held sideways, or a small browser window.
   The hero asks for a full screen and then adds 150px/96px of padding on
   top of its content, which on a 390px-tall screen forced it to 492px and
   pushed the CTA below the fold. Here it gives up the full-screen claim
   and tightens instead. Width-independent on purpose: a short window on a
   laptop has exactly the same problem. */
@media (max-height:560px){
  .hero{min-height:0;padding:88px 24px 44px}
}
/* a phone held sideways is shorter still — 390px tall, and the tier above
   still left the hero 16px over. Top padding stays clear of the fixed nav. */
@media (max-height:430px){
  /* 92px, not less: the fixed nav's bottom edge sits at 86px and the hero
     copy was sliding under it */
  .hero{padding:92px 24px 26px}
  /* the headline is the tall part — at 6vw a sideways phone is wide
     enough to pick a big size and then wrap it over three lines */
  .hero__title{font-size:clamp(28px,3.6vw,40px);margin-top:14px}
  .hero__sub{margin-top:8px;font-size:15px}
  .hero__note{margin-top:10px}
  /* same bind — its content already sets the height here. Other Side is
     deliberately left alone: its pin needs the full-height box for the
     scroll scrub to measure against. */
  .night-fragments{min-height:0}
}