/* ─────────────────────────────────────────────────────────────────────────
   Avance — landing
   Nebula: a near-black void, one spectrum from magenta to electric blue that
   lights things and never fills them, and one chrome button per screen.
   Colours, type, radii and motion come from tokens.css (the brand kit);
   this sheet only places them. The liquid (liquid.js) runs in the hero and
   in the closing card, never behind reading text. Every animation has a
   prefers-reduced-motion off state.
   ───────────────────────────────────────────────────────────────────────── */
:root {
  --max: 1180px;
  --gutter: clamp(20px, 5vw, 64px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--bg); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: var(--mono); font-weight: 500; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--mut); }

/* ── type ───────────────────────────────────────────────────────────── */
h1, h2, h3 { font-family: var(--display); font-weight: 600; text-wrap: balance; margin: 0; }
h1 { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
h2 { font-size: clamp(34px, 4.4vw, 56px); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
h3 { font-size: clamp(21px, 2vw, 24px); line-height: var(--lh-h3); font-weight: 500; }
h2 em { font-style: normal; color: var(--accent-2); }
p { margin: 0; }

/* the page's one display headline carries the sheen */
.sheen {
  background: var(--sheen); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: sheen 12s ease-in-out infinite alternate;
}
.sheen em { font-style: normal; }
@keyframes sheen { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) { .sheen { animation: none; } }

.eyebrow {
  display: inline-flex; align-items: center; gap: 12px; margin-bottom: 20px;
  font: 500 var(--fs-eyebrow)/1 var(--mono); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--accent-2);
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--spectrum-line); flex: none; }
.lede { font-size: clamp(18px, 1.5vw, 20px); line-height: 1.55; color: var(--ink-2); max-width: 34em; }
.sub { color: var(--mut); font-size: 16px; max-width: 40em; margin-top: 14px; }

/* ── the mark ───────────────────────────────────────────────────────── */
.mark { width: 28px; height: 28px; flex: none; display: block; }
.wordmark { display: inline-flex; align-items: center; gap: 9px; font: 600 21px/1 var(--display); letter-spacing: -.01em; color: var(--ink); }

/* ── buttons ───────────────────────────────────────────────────────── */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 24px; border-radius: var(--radius-pill); border: 0;
  font: 500 15px/1 var(--body); letter-spacing: .01em; cursor: pointer; white-space: nowrap;
  transition: transform var(--dur-spring) var(--ease-spring), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn:active { transform: scale(.97); }
.btn-sm { padding: 9px 15px; font-size: 13px; }
.btn-lg { padding: 18px 30px; font-size: 17px; }

/* primary: the chrome button, once per screen */
.btn-chrome {
  isolation: isolate; overflow: hidden; color: #fff;
  border: 1.5px solid transparent;
  background:
    radial-gradient(30% 48% at var(--glint) -12%, rgba(255,255,255,.26), transparent 72%) padding-box,
    radial-gradient(60% 150% at var(--lm-x) var(--lm-y), #C12E8E 0%, rgba(193,46,142,0) 72%) padding-box,
    radial-gradient(60% 150% at var(--lb-x) var(--lb-y), #3A5BFF 0%, rgba(58,91,255,0) 72%) padding-box,
    radial-gradient(70% 160% at var(--lv-x) 50%, #8B3FE8 0%, rgba(139,63,232,0) 80%) padding-box,
    linear-gradient(115deg, #6A2FD0, #5B2BC0) padding-box,
    var(--chrome-rim) border-box;
  box-shadow:
    0 10px 30px -12px rgba(139,63,232,calc(var(--glow) + .05)),
    0 0 calc(22px * var(--glow)) -6px rgba(193,46,142,calc(var(--glow) * .55)),
    inset 0 1px 0 rgba(255,255,255,.28);
  animation:
    chrome-rim   var(--dur-rim) linear infinite,
    chrome-m     7.3s ease-in-out infinite alternate,
    chrome-b     9.1s ease-in-out infinite alternate,
    chrome-v     5.7s ease-in-out infinite alternate,
    chrome-glint 4.6s cubic-bezier(.45,0,.25,1) infinite,
    chrome-glow  3.8s ease-in-out infinite alternate;
  transition: transform var(--dur-spring) var(--ease-spring);
  translate: var(--mx-pull, 0) var(--my-pull, 0);
}
.btn-chrome::before { content: ""; position: absolute; inset: 0 0 52% 0; z-index: -1; border-radius: inherit; background: linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,0)); }
.btn-chrome:hover { transform: translateY(-1px); animation-duration: 3s, 3.6s, 4.5s, 2.8s, 1.6s, 1.9s; }
.btn-chrome:active { transform: scale(.97); }
.btn-chrome:focus-visible { box-shadow: var(--focus), 0 10px 30px -12px rgba(139,63,232,.75); border-radius: var(--radius-pill); }
.join .btn-chrome { animation-delay: 0s, -2.3s, -4.1s, -1.7s, -2.9s, -1.2s; }   /* never in step with the hero button */
.btn-chrome.pulling { transition: transform var(--dur-spring) var(--ease-spring), translate 120ms linear; }
.btn-chrome.released { transition: transform var(--dur-spring) var(--ease-spring), translate var(--dur-slow) var(--ease-spring); }
@keyframes chrome-rim   { to { --chrome-angle: 360deg; } }
@keyframes chrome-m     { 0% { --lm-x: 8%; --lm-y: 25%; } 50% { --lm-x: 46%; --lm-y: 80%; } 100% { --lm-x: 72%; --lm-y: 20%; } }
@keyframes chrome-b     { 0% { --lb-x: 94%; --lb-y: 75%; } 50% { --lb-x: 58%; --lb-y: 34%; } 100% { --lb-x: 24%; --lb-y: 70%; } }
@keyframes chrome-v     { 0% { --lv-x: 30%; } 100% { --lv-x: 75%; } }
@keyframes chrome-glint { 0%, 35% { --glint: -30%; } 75%, 100% { --glint: 130%; } }
@keyframes chrome-glow  { from { --glow: .55; } to { --glow: 1; } }
@media (prefers-reduced-motion: reduce) { .btn-chrome { animation: none; translate: none; } }

/* the halo: the nav's call to action. Dark glass pill, turning rim, faint lights, no spectrum fill */
.btn-halo {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 20px; border-radius: var(--radius-pill); font: 500 15px/1 var(--body); color: #F3F0FA; cursor: pointer; white-space: nowrap;
  border: 1.5px solid transparent;
  background:
    radial-gradient(80% 140% at var(--lm-x) 110%, rgba(193,46,142,calc(.28 * var(--glow))), transparent 70%) padding-box,
    radial-gradient(80% 140% at var(--lb-x) -10%, rgba(58,91,255,calc(.30 * var(--glow))), transparent 70%) padding-box,
    linear-gradient(rgba(18,17,36,.92), rgba(18,17,36,.92)) padding-box,
    conic-gradient(from var(--chrome-angle), #FFFFFF 0%, #FF6AD5 18%, #9B5CFF 38%, #4C6BFF 58%, #B9C8FF 76%, #FFFFFF 99.5%) border-box;
  box-shadow: 0 0 calc(20px * var(--glow)) -6px rgba(155,92,255,calc(var(--glow) * .75)), inset 0 1px 0 rgba(255,255,255,.10);
  animation: chrome-rim var(--dur-rim) linear infinite, chrome-m 7.3s ease-in-out infinite alternate, chrome-b 9.1s ease-in-out infinite alternate, chrome-glow 3.8s ease-in-out infinite alternate;
  transition: transform .32s cubic-bezier(.2,.9,.1,1.15), box-shadow .24s;
}
.btn-halo .dot { width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg, #FF6AD5, #4C6BFF); box-shadow: 0 0 8px #FF6AD5; animation: halo-dot 1.9s ease-in-out infinite alternate; }
.btn-halo:hover { transform: translateY(-1px); animation-duration: 3s, 3.6s, 4.5s, 1.9s; }
.btn-halo:active { transform: scale(.97); }
.btn-halo:focus-visible { box-shadow: var(--focus); border-radius: var(--radius-pill); }
@keyframes halo-dot { from { opacity: .55; transform: scale(.8); } to { opacity: 1; transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .btn-halo, .btn-halo .dot { animation: none; } }

.bloom { position: relative; display: inline-flex; }
.bloom::before { content: ""; position: absolute; left: 50%; top: 50%; width: 300px; height: 190px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, var(--bloom), transparent); filter: blur(10px); pointer-events: none; z-index: -1; }

.btn-secondary { background: var(--raised); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-hi); }
.btn-outline { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-hi); }
.btn-secondary:hover, .btn-outline:hover { box-shadow: inset 0 0 0 1px var(--accent); }
.btn-ghost { background: transparent; color: var(--accent); padding-left: 8px; padding-right: 8px; }
.btn-ghost .arr { transition: transform var(--dur) var(--ease); }
.btn-ghost:hover .arr { transform: translateX(3px); }

/* ── nav: a detached capsule ───────────────────────────────────────── */
.nav-wrap { position: sticky; top: 0; z-index: 30; padding: 12px 12px 0; }
.nav {
  max-width: calc(var(--max) + 2 * var(--gutter) - 24px); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 10px 10px 10px 18px; border-radius: 22px;
  background: rgba(7,7,15,.80); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.links { display: flex; gap: 26px; }
.links a { font: 500 13.5px/1 var(--body); color: var(--ink-2); transition: color var(--dur) var(--ease); }
.links a:hover { color: var(--ink); }
@media (max-width: 760px) { .links { display: none; } }

/* ── sections ──────────────────────────────────────────────────────── */
main > section { padding: clamp(72px, 11vw, 150px) var(--gutter); max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; }
.section-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 64px); }
.band { max-width: none !important; background: var(--abyss); position: relative; }
.band::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, #FF6AD5 30%, #9B5CFF 55%, #4C6BFF 78%, transparent); opacity: .55; }
.band-in { max-width: var(--max); margin: 0 auto; }

/* ── hero ──────────────────────────────────────────────────────────── */
.hero { max-width: none !important; position: relative; padding: 0 0 clamp(40px, 5vw, 64px) !important; margin-top: -76px; }
.hero-top { position: relative; min-height: min(92vh, 900px); display: grid; grid-template-columns: 1.1fr .9fr; }
.hero-copy { position: relative; z-index: 2; padding: calc(76px + clamp(48px, 7vw, 96px)) var(--gutter) clamp(48px, 6vw, 80px) max(var(--gutter), calc((100vw - var(--max)) / 2)); display: flex; flex-direction: column; justify-content: center; }
.hero h1 { max-width: 11.5ch; }
.hero .lede { margin-top: 26px; }
.cta-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 36px; }

/* the liquid: right side only, masked into the void; the mark floats on it */
.hero-art {
  position: absolute; top: 0; right: 0; bottom: 0; width: 58%; z-index: 1; overflow: hidden;
  background:
    radial-gradient(40% 36% at 62% 40%, rgba(155,92,255,.24), transparent 70%),
    radial-gradient(34% 30% at 78% 70%, rgba(255,106,213,.15), transparent 70%),
    var(--bg);
  background-size: 100% 100%;
  animation: blobs 30s ease-in-out infinite alternate;
}
.hero-art::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 55%, transparent) 28%, transparent 60%), linear-gradient(0deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 60%, transparent) 18%, transparent 45%); }
.hero-art .mark-float { position: absolute; z-index: 2; right: 14%; bottom: 18%; width: min(30%, 200px); height: auto; filter: drop-shadow(0 30px 60px rgba(0,0,0,.6)); }
@keyframes blobs { from { background-position: 0 0, 0 0, 0 0; } to { background-position: -40px 30px, 50px -30px, 0 0; } }
@media (prefers-reduced-motion: reduce) { .hero-art { animation: none; } }
canvas.lq { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; pointer-events: none; }
.lq-live { animation: none !important; }

@media (max-width: 860px) {
  .hero { margin-top: -70px; }
  .hero-top { grid-template-columns: 1fr; min-height: 0; }
  .hero-copy { padding: calc(70px + 96px + 28px) var(--gutter) 40px; }
  .hero-art { top: 82px; left: var(--gutter); right: var(--gutter); bottom: auto; width: auto; height: 96px; border-radius: var(--radius); }
  .hero-art::before { background: linear-gradient(0deg, color-mix(in srgb, var(--bg) 35%, transparent), transparent 60%); }
  .hero-art .mark-float { right: 18px; bottom: 50%; transform: translateY(50%); width: 52px; }
}

/* hero stage: the app between two kinds of day */
.hero-stage {
  position: relative; margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: clamp(14px, 2.4vw, 30px);
  align-items: end; max-width: calc(980px + 2 * var(--gutter));
}
.hero-stage::before { content: ""; position: absolute; left: 50%; top: 30%; width: 70%; height: 60%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, var(--bloom), transparent); filter: blur(30px); pointer-events: none; }
.still { margin: 0; position: relative; border-radius: var(--radius); overflow: hidden; background: var(--surface); border: 1px solid var(--line); aspect-ratio: 9 / 16; box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); }
.still img, .still video { width: 100%; height: 100%; object-fit: cover; }
.still figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 16px 16px; text-align: left;
  font-size: 13px; line-height: 1.45; color: var(--starlight); background: var(--scrim);
}
.still-l { transform: rotate(-3deg) translateY(18px); }
.still-r { transform: rotate(3deg) translateY(18px); }

/* the phone: real app screenshots inside a CSS bezel with a chrome rim */
.phone {
  position: relative; margin: 0 auto; width: 100%; max-width: 330px;
  padding: 12px; border-radius: 46px; background: #0B0A16;
  box-shadow: 0 0 0 1px var(--line-hi), 0 30px 80px -20px rgba(0,0,0,.8), 0 0 60px -10px rgba(139,63,232,.35), inset 0 0 0 2px #1C1A36;
}
.phone::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: var(--chrome-rim); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .55; pointer-events: none; }
.phone-screen { border-radius: 36px; overflow: hidden; aspect-ratio: 390 / 844; background: var(--void); }
.phone-screen img { width: 100%; height: 100%; object-fit: cover; }
.phone-md { max-width: 360px; }

@media (max-width: 760px) {
  .hero-stage { grid-template-columns: 1fr 1fr; }
  .hero .phone { grid-column: 1 / -1; order: -1; max-width: 280px; }
  .still-l, .still-r { transform: none; }
}

/* page entrance, per the kit: ground and bloom, eyebrow, headline, content */
@media (prefers-reduced-motion: no-preference) {
  .hero-art { opacity: 0; }
  .hero [data-seq] { opacity: 0; transform: translateY(20px); }
  .hero .eyebrow::before { transform: scaleX(0); transform-origin: left; }
  .hero .still-l { transform: rotate(-3deg) translateY(60px); opacity: 0; }
  .hero .still-r { transform: rotate(3deg) translateY(60px); opacity: 0; }
  .hero .phone { transform: translateY(40px); opacity: 0; }
  .hero.ready .hero-art { opacity: 1; transition: opacity var(--dur-slow) var(--ease-out); }
  .hero.ready .eyebrow::before { transform: none; transition: transform var(--dur-slow) var(--ease-out) 120ms; }
  .hero.ready [data-seq] { opacity: 1; transform: none; transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); transition-delay: calc(var(--d, 0) * 1ms); }
  .hero.ready .phone { transform: none; opacity: 1; transition: transform var(--dur-slow) var(--ease-out) 580ms, opacity var(--dur-slow) 580ms; }
  .hero.ready .still-l { transform: rotate(-3deg) translateY(18px); opacity: 1; transition: transform 900ms var(--ease-out) 660ms, opacity var(--dur-slow) 660ms; }
  .hero.ready .still-r { transform: rotate(3deg) translateY(18px); opacity: 1; transition: transform 900ms var(--ease-out) 740ms, opacity var(--dur-slow) 740ms; }
  @media (max-width: 760px) { .hero.ready .still-l, .hero.ready .still-r { transform: none; } }
}

/* ── cards ─────────────────────────────────────────────────────────── */
.card { background: var(--surface); border: 1px solid var(--line); box-shadow: var(--inset); border-radius: var(--radius-lg); transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.card:hover { transform: translateY(-2px); border-color: var(--line-hi); }
.glare { position: relative; overflow: hidden; }
.glare::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 3;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), var(--glare), transparent 60%);
  transition: opacity var(--dur) var(--ease); }
@media (hover: hover) { .glare:hover::after { opacity: 1; } }

/* ── the three fears ───────────────────────────────────────────────── */
.fear-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 24px); }
.fear { display: flex; flex-direction: column; }
.fear-img { aspect-ratio: 4 / 5; overflow: hidden; position: relative; }
.fear-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--surface), transparent 30%); }
.fear-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); }
.fear:hover .fear-img img { transform: scale(1.04); }
.fear-body { padding: 20px 24px 28px; display: flex; flex-direction: column; gap: 10px; }
.fear-name { font: 500 11.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.fear-body p:last-child { color: var(--ink-2); font-size: 15.5px; line-height: 1.6; }
@media (max-width: 860px) { .fear-grid { grid-template-columns: 1fr; } .fear { flex-direction: row; } .fear-img { width: 38%; aspect-ratio: auto; } .fear-img::after { background: linear-gradient(270deg, var(--surface), transparent 30%); } .fear-body { flex: 1; } }
@media (max-width: 520px) { .fear { flex-direction: column; } .fear-img { width: 100%; aspect-ratio: 4 / 3; } .fear-img::after { background: linear-gradient(0deg, var(--surface), transparent 30%); } }

/* ── the film (how it works) ───────────────────────────────────────── */
.film { padding-left: 0 !important; padding-right: 0 !important; }
.film-in { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.film .section-head { margin-bottom: 28px; }
.film-frame { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: #000; aspect-ratio: 16 / 9; border: 1px solid #4A3F86; box-shadow: var(--lit), 0 50px 120px -50px rgba(0,0,0,.9); }
.film-frame video { width: 100%; height: 100%; object-fit: cover; }
.film-ctl { position: absolute; right: 14px; bottom: 14px; display: flex; gap: 8px; }
.film-ctl button {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--radius-pill); border: 1px solid rgba(243,240,250,.18);
  background: rgba(7,7,15,.62); color: var(--starlight); font: 500 13px/1 var(--body); cursor: pointer; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur-spring) var(--ease-spring);
}
.film-ctl button:hover { background: rgba(7,7,15,.85); border-color: var(--accent); }
.film-ctl button:active { transform: scale(.97); }
.film-ctl svg { width: 16px; height: 16px; }
.film-play { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(7,7,15,.40); border: 0; cursor: pointer; }
.film-play span { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: var(--radius-pill); background: rgba(28,26,54,.85); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-hi); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); font: 500 15px/1 var(--body); }
.film-play:hover span { box-shadow: inset 0 0 0 1px var(--accent); }
.film-play[hidden] { display: none; }

.film-steps { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.film-steps button {
  width: 100%; height: 100%; text-align: left; padding: 16px 16px 18px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); cursor: pointer;
  display: grid; align-content: start; gap: 8px; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur-spring) var(--ease-spring);
}
.film-steps button:hover { border-color: var(--line-hi); }
.film-steps button:active { transform: scale(.97); }
.film-steps button.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.film-steps .n { font: 500 11px/1 var(--mono); letter-spacing: .14em; color: var(--mut); }
.film-steps button.on .n { color: var(--accent); }
.film-steps .t { font: 600 22px/1.1 var(--display); letter-spacing: -.01em; }
.film-steps .d { font-size: 13.5px; color: var(--ink-2); line-height: 1.45; }
.film-steps .you { display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 0; padding: 5px 10px; border-radius: var(--radius-pill); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent); font: 500 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; width: max-content; }
.film-steps .you::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pink); }
.film-note { margin-top: 16px; font-size: 13.5px; color: var(--mut); }
@media (max-width: 900px) { .film-steps { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .film-steps { grid-template-columns: 1fr 1fr; } }

/* ── studio depth ──────────────────────────────────────────────────── */
.depth-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(32px, 6vw, 90px); align-items: center; }
.depth-text > p:not(.eyebrow) { color: var(--ink-2); margin-top: 16px; max-width: 36em; }
.depth-text p strong { color: var(--ink); font-weight: 500; }
.facts { list-style: none; margin: 30px 0 0; padding: 0; display: grid; }
.facts li { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--line); font-size: 15px; color: var(--ink-2); }
.facts li:last-child { border-bottom: 1px solid var(--line); }
.facts .mono { color: var(--accent); }
.depth-visual { position: relative; }
.depth-visual::before { content: ""; position: absolute; left: 50%; top: 50%; width: 80%; height: 70%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, var(--bloom), transparent); filter: blur(30px); }
@media (max-width: 820px) { .depth-grid { grid-template-columns: 1fr; } .depth-visual .phone-md { max-width: 300px; } }

/* ── calendar + governance ─────────────────────────────────────────── */
.paper-grid { display: grid; grid-template-columns: .8fr 1.3fr; gap: clamp(32px, 6vw, 90px); align-items: center; }
.paper-img { margin: 0; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 5; border: 1px solid var(--line); }
.paper-img img { width: 100%; height: 100%; object-fit: cover; }
.paper-text > p:not(.eyebrow) { color: var(--ink-2); margin-top: 16px; max-width: 36em; }
.gov-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 36px; }
.gov { border-top: 1px solid var(--line); padding-top: 16px; position: relative; }
.gov::before { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 0; background: var(--spectrum-line); }
.gov.in::before { width: 100%; }
@media (prefers-reduced-motion: no-preference) { .gov.in::before { transition: width 1.2s var(--ease-out); transition-delay: calc(var(--d, 0) * 1ms); } }
.gov .mono { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: var(--ink); }
.gov .mono svg { width: 16px; height: 16px; color: var(--accent); flex: none; }
.gov p { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
@media (max-width: 820px) { .paper-grid { grid-template-columns: 1fr; } .paper-img { aspect-ratio: 16 / 10; } .gov-row { grid-template-columns: 1fr; } }

/* ── who ───────────────────────────────────────────────────────────── */
.who-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 6vw, 90px); align-items: center; }
.who-text > p:not(.eyebrow) { color: var(--ink-2); margin-top: 16px; max-width: 34em; font-size: 17.5px; }
.who-stills { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.who-stills img { border-radius: var(--radius-lg); aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 30%; border: 1px solid var(--line); width: 100%; }
.who-stills img:last-child { margin-top: 36px; }
@media (max-width: 820px) { .who-grid { grid-template-columns: 1fr; } .who-stills img:last-child { margin-top: 0; } }

/* ── join: the lit card, with a liquid band over it ────────────────── */
.join-card {
  max-width: 720px; margin: 0 auto; text-align: center; overflow: hidden; position: relative;
  background: var(--raised); border: 1px solid #4A3F86; border-radius: var(--radius-lg); box-shadow: var(--lit);
}
.join-art {
  position: relative; height: 150px; overflow: hidden;
  background: radial-gradient(50% 80% at 40% 40%, rgba(155,92,255,.30), transparent 70%), radial-gradient(40% 70% at 70% 70%, rgba(255,106,213,.18), transparent 70%), var(--abyss);
}
.join-art::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, var(--raised) 0%, transparent 70%); }
.join-art .mark-float { position: absolute; z-index: 2; left: 50%; bottom: 18px; transform: translateX(-50%); width: 64px; height: auto; filter: drop-shadow(0 16px 30px rgba(0,0,0,.6)); }
.join-body { padding: 20px clamp(20px, 5vw, 56px) clamp(36px, 6vw, 56px); }
.join-body > p:not(.eyebrow) { color: var(--ink-2); margin-top: 14px; }
.form { display: grid; gap: 14px; margin: 30px auto 0; max-width: 440px; text-align: left; }
.field { display: grid; gap: 8px; }
.field .lbl { font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mut); }
.field input {
  width: 100%; padding: 14px 20px; border-radius: var(--radius-pill); border: 1px solid var(--line-hi);
  background: var(--deep); color: var(--ink); font: 400 15px/1.2 var(--body);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field input::placeholder { color: var(--mut); }
.field input:focus { outline: none; border-color: var(--orchid); box-shadow: var(--focus); }
.form .bloom { display: flex; margin-top: 6px; }
.form .btn { width: 100%; }
.fine { font-size: 12px; color: var(--mut); margin-top: 2px; text-align: center; }
.hp { position: absolute; left: -9999px; }

/* ── footer ────────────────────────────────────────────────────────── */
.foot { padding: 56px var(--gutter) 40px; display: grid; gap: 18px; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; position: relative; }
.foot::before { content: ""; position: absolute; left: var(--gutter); right: var(--gutter); top: 0; height: 1px; background: var(--line); }
.foot-line { color: var(--mut); font-size: 13.5px; max-width: 48em; }
.foot-links { display: flex; gap: 22px; flex-wrap: wrap; font-size: 13.5px; color: var(--ink-2); }
.foot-links a:hover { color: var(--ink); }
.foot-copy { color: var(--mut); font-size: 12.5px; }

/* ── press ring (fixed overlay, never inside the component) ────────── */
.ring-layer { position: fixed; inset: 0; pointer-events: none; z-index: 100; }
.ring-layer i { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; border: 1.5px solid var(--accent); animation: ring var(--dur-ring) var(--ease-out) forwards; }
@keyframes ring { from { transform: scale(1); opacity: .9; } to { transform: scale(6); opacity: 0; } }

/* ── reveal (scroll) ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(20px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); transition-delay: calc(var(--d, 0) * 1ms); }
  .reveal.in { opacity: 1; transform: none; }
  .reveal.card.in:hover { transform: translateY(-2px); transition-delay: 0ms; }
  .reveal-img { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--ease-out); transition-delay: calc(var(--d, 0) * 1ms); }
  .reveal-img.in { clip-path: inset(0 0 0 0); }
  .px { will-change: transform; }
}