/* Weather360 — site styles
   Dark, sky-lit canvas; brand gradient coral → pink → violet (the app's
   Premium palette); glass surfaces; motion that respects Reduce Motion. */

/* Registered so the story's sky can crossfade between steps. */
@property --sky-a { syntax: "<color>"; inherits: true; initial-value: #1b2b5c; }
@property --sky-b { syntax: "<color>"; inherits: true; initial-value: #0b1026; }
@property --sky-glow { syntax: "<color>"; inherits: true; initial-value: #4f7dff; }

:root {
  --bg: #05070d;
  --bg-2: #0a0e1a;
  --ink: #f4f6ff;
  --ink-2: rgba(236, 240, 255, 0.72);
  --ink-3: rgba(236, 240, 255, 0.5);
  --line: rgba(255, 255, 255, 0.1);
  --glass: rgba(255, 255, 255, 0.06);
  --glass-strong: rgba(255, 255, 255, 0.1);

  --coral: #ff6b54;
  --pink: #f5549f;
  --violet: #8c5cff;
  --sky: #318cff;
  --mint: #19b878;
  --gold: #faa81f;
  --teal: #14a8cc;
  --brand: linear-gradient(100deg, var(--coral), var(--pink) 45%, var(--violet));
  --sky-text: linear-gradient(100deg, #9fd4ff 0%, #ffffff 40%, #ffd9a8 100%);

  /* Story sky, set by site.js per step. */
  --sky-a: #1b2b5c;
  --sky-b: #0b1026;
  --sky-glow: #4f7dff;

  --radius: 28px;
  --max: 1180px;
  --nav-h: 80px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-round: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
.wrap { width: min(var(--max), calc(100% - 40px)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Nav ----------
   A floating glass bar: brand left, section pills centred (the current one
   lights up), "Get the app" right. Everything shares one 40 px row height so
   it all lines up on the same centre line. */
.nav {
  position: fixed; inset: 12px 0 auto 0; z-index: 50;
  display: flex; justify-content: center; padding: 0 16px; pointer-events: none;
}
.nav-bar {
  pointer-events: auto;
  width: min(var(--max), 100%);
  height: 56px; padding: 0 8px 0 14px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  border-radius: 999px;
  background: rgba(14, 16, 28, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: saturate(170%) blur(18px); -webkit-backdrop-filter: saturate(170%) blur(18px);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.45);
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease, width .45s cubic-bezier(.2, .8, .2, 1);
}
.nav.scrolled .nav-bar {
  width: min(980px, 100%);
  background: rgba(12, 14, 24, 0.72);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.brand { display: inline-flex; align-items: center; gap: 10px; height: 40px; text-decoration: none; font-weight: 650; letter-spacing: -0.01em; font-size: 17px; justify-self: start; }
.brand img { width: 30px; height: 30px; border-radius: 8px; box-shadow: 0 4px 14px rgba(245, 84, 159, 0.35); }
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links a {
  display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 999px;
  text-decoration: none; color: var(--ink-2); font-size: 14.5px; font-weight: 550;
  transition: color .2s ease, background .25s ease;
}
.nav-links a:hover { color: var(--ink); background: rgba(255, 255, 255, 0.07); }
.nav-links a.active, .nav-links a[aria-current="page"] { color: var(--ink); background: rgba(255, 255, 255, 0.12); }
.nav-actions { display: flex; align-items: center; gap: 8px; justify-self: end; }
.nav-cta {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px 0 14px;
  border-radius: 999px; background: var(--brand); color: #fff; text-decoration: none;
  font-size: 14.5px; font-weight: 650; line-height: 1; white-space: nowrap;
  box-shadow: 0 8px 22px -6px rgba(245, 84, 159, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform .2s ease, box-shadow .2s ease;
}
.nav-cta svg { width: 17px; height: 17px; flex: none; }
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 12px 28px -6px rgba(245, 84, 159, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.nav-toggle {
  display: none; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, 0.08); position: relative;
}
.nav-toggle span { position: absolute; left: 12px; right: 12px; height: 2px; border-radius: 1px; background: var(--ink); transition: transform .3s ease, top .3s ease; }
.nav-toggle span:first-child { top: 15px; }
.nav-toggle span:last-child { top: 23px; }
.nav-toggle[aria-expanded="true"] span:first-child { top: 19px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child { top: 19px; transform: rotate(-45deg); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px; border-radius: 999px;
  font-weight: 600; font-size: 16px; text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  cursor: pointer; border: 0; color: #fff;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-brand { background: var(--brand); box-shadow: 0 10px 30px rgba(245, 84, 159, 0.35); }
.btn-brand:hover { box-shadow: 0 14px 38px rgba(245, 84, 159, 0.5); }
.btn-ghost { background: var(--glass-strong); border: 1px solid var(--line); }
.appstore {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 11px 22px 11px 18px; border-radius: 14px;
  background: #000; border: 1px solid rgba(255, 255, 255, 0.28);
  text-decoration: none; color: #fff; transition: transform .2s, border-color .2s;
}
.appstore:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.55); }
.appstore svg { width: 26px; height: 26px; flex: none; }
.appstore span { display: flex; flex-direction: column; line-height: 1.1; }
.appstore small { font-size: 11px; opacity: .85; letter-spacing: .02em; }
.appstore strong { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }

/* Apple's official badge: used as supplied, 40 px+ tall, clear space around it. */
.appstore-badge { display: inline-block; line-height: 0; margin: 4px; transition: transform .2s ease; }
.appstore-badge:hover { transform: translateY(-2px); }
.appstore-badge img { height: 56px; width: auto; object-fit: contain; }
.cta .appstore-badge img { height: 64px; }

/* App Store + Google Play side by side. Google's badge art carries its own
   transparent margin, so it's drawn taller to match Apple's visually. */
.store-badges { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.play-badge { display: inline-block; line-height: 0; transition: transform .2s ease; }
.play-badge:hover { transform: translateY(-2px); }
.play-badge img { height: 83px; width: auto; margin: -6px -10px; }
.cta .play-badge img { height: 95px; margin: -7px -11px; }
.cta .store-badges { justify-content: center; }

/* ---------- Type ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-2);
}
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--line);
  font-size: 13.5px; font-weight: 550; color: var(--ink);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 10px var(--pink); }
h1, h2, h3 { margin: 0; letter-spacing: -0.035em; line-height: 1.02; font-weight: 700; }
.display { font-size: clamp(46px, 6.2vw, 92px); }
.title { font-size: clamp(36px, 5.6vw, 72px); }
.subtitle { font-size: clamp(18px, 2vw, 22px); color: var(--ink-2); line-height: 1.5; max-width: 38em; }
.grad-sky { background: var(--sky-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.grad-brand { background: var(--brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.center { text-align: center; margin-inline: auto; }

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 100svh; overflow: hidden;
  padding: calc(var(--nav-h) + 56px) 0 80px;
  display: flex; align-items: center;
  isolation: isolate;
}
.sky {
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(120% 80% at 80% 10%, rgba(255, 170, 110, 0.55), transparent 60%),
    radial-gradient(90% 70% at 10% 20%, rgba(90, 140, 255, 0.55), transparent 60%),
    linear-gradient(180deg, #1c2d63 0%, #2c3f86 35%, #6a4a9e 70%, #05070d 100%);
  animation: skyShift 18s ease-in-out infinite alternate;
}
@keyframes skyShift {
  0% { filter: hue-rotate(0deg) saturate(1); }
  100% { filter: hue-rotate(-18deg) saturate(1.15); }
}
.cloud {
  position: absolute; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
  filter: blur(18px); opacity: .55;
  animation: drift linear infinite;
}
.cloud.c1 { width: 520px; height: 180px; top: 16%; left: -10%; animation-duration: 60s; }
.cloud.c2 { width: 380px; height: 140px; top: 34%; left: 60%; animation-duration: 75s; animation-delay: -20s; opacity: .4; }
.cloud.c3 { width: 640px; height: 220px; top: 62%; left: 20%; animation-duration: 90s; animation-delay: -45s; opacity: .3; }
@keyframes drift { from { transform: translateX(-12vw); } to { transform: translateX(22vw); } }
#rain { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; opacity: .55; pointer-events: none; }
.hero::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 220px; z-index: -1;
  background: linear-gradient(180deg, transparent, var(--bg));
}
.hero-grid { display: grid; grid-template-columns: 1.25fr .75fr; align-items: center; gap: 40px; }
.hero-copy .pill { margin-bottom: 26px; }
.hero-copy h1 { margin-bottom: 24px; }
.hero-copy .subtitle { margin-bottom: 36px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero-note { margin-top: 18px; font-size: 14px; color: var(--ink-3); }
.hero-stage { position: relative; perspective: 1600px; display: grid; place-items: center; padding: 20px 0; }
/* A gentle, natural angle that follows the pointer a little and
   straightens as the page scrolls. Sized so the whole phone fits. */
.hero-stage .device {
  --w: min(318px, 72vw, calc((100svh - 190px) / 2.12));
  transform:
    translateY(calc(-24px * var(--hp, 0)))
    rotateY(calc((var(--tilt-y, -9deg)) * (1 - var(--hp, 0))))
    rotateX(calc((var(--tilt-x, 3deg)) * (1 - var(--hp, 0))));
  transition: transform .8s cubic-bezier(.2, .7, .2, 1);
  animation: phoneIn 1.2s cubic-bezier(.2, .7, .2, 1) both;
}
/* No opacity here: fading a 3D object flattens it for the whole animation
   (its depth layers draw as a thick border, then pop back). */
@keyframes phoneIn { from { translate: 0 90px; } to { translate: 0 0; } }
.hero-stage::before { /* soft light under the phone */
  content: ""; position: absolute; width: 70%; height: 16px; bottom: -10px; left: 15%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.55), transparent); filter: blur(6px);
}
.float-card {
  position: absolute; z-index: 3;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: 18px;
  background: rgba(20, 24, 40, 0.55); border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  font-size: 14px; line-height: 1.3; white-space: nowrap;
  animation: bob 6s ease-in-out infinite;
}
.float-card b { display: block; font-size: 15px; }
.float-card small { color: var(--ink-2); }
.float-card .ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 18px; flex: none; }
.fc-1 { top: 9%; left: -30%; }
.fc-2 { bottom: 5%; right: -8%; animation-delay: -2s; }
/* Narrower windows: keep the card inside the page. */
@media (max-width: 1240px) { .fc-2 { right: 0; } .fc-1 { left: -14%; } }
.fc-3 { display: none; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.scroll-cue { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); color: var(--ink-3); font-size: 13px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.scroll-cue i { width: 22px; height: 34px; border: 2px solid var(--ink-3); border-radius: 12px; position: relative; }
.scroll-cue i::after { content: ""; position: absolute; left: 50%; top: 7px; width: 4px; height: 7px; margin-left: -2px; border-radius: 2px; background: var(--ink-2); animation: wheel 1.8s ease-in-out infinite; }
@keyframes wheel { 0% { opacity: 0; transform: translateY(-3px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(9px); } }

/* ---------- Device ---------- */
.device {
  --w: 300px;
  /* A metal rim, then the black glass border, then the screen, which keeps
     the screenshots' exact 1206 × 2622 shape so nothing is cropped. */
  --frame: calc(var(--w) * 0.016);
  --glass: calc(var(--w) * 0.021);
  --bezel: calc(var(--frame) + var(--glass));
  --screen-w: calc(var(--w) - var(--bezel) * 2);
  --screen-radius: calc(var(--screen-w) * 0.125); /* iPhone 17 Pro Max: ~55 pt of 440 pt */
  --metal: linear-gradient(135deg, #f7ae78 0%, #e0773c 22%, #c45a24 50%, #9c4219 72%, #e5854b 100%);
  position: relative; box-sizing: border-box; width: var(--w);
  padding: var(--glass);
  border: var(--frame) solid transparent;
  border-radius: calc(var(--screen-radius) + var(--bezel));
  background: linear-gradient(#08080a, #08080a) padding-box, var(--metal) border-box;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 0 0 1px rgba(90, 36, 12, 0.55),
    0 60px 90px -30px rgba(0, 0, 0, 0.7),
    0 30px 70px -30px rgba(245, 84, 159, 0.35);
  transform-style: preserve-3d;
}
/* Side buttons: Action + volume on the left, side button + Camera Control on the right. */
.device::before, .device::after {
  content: ""; position: absolute; width: calc(var(--w) * 0.013);
  border-radius: calc(var(--w) * 0.006);
}
.device::before {
  left: calc(-1 * var(--frame) - var(--w) * 0.011);
  top: 16%; height: 30%;
  background: linear-gradient(180deg,
    #d8703a 0 12%, transparent 12% 25%,
    #d8703a 25% 55%, transparent 55% 63%,
    #d8703a 63% 93%, transparent 93%);
  box-shadow: inset 2px 0 2px rgba(255, 210, 170, 0.35);
}
.device::after {
  right: calc(-1 * var(--frame) - var(--w) * 0.011);
  top: 24%; height: 36%;
  background: linear-gradient(180deg,
    #d8703a 0 30%, transparent 30% 80%,
    #b85a2a 80% 100%);
  box-shadow: inset -2px 0 2px rgba(255, 210, 170, 0.35);
}
.device .screen { position: relative; width: 100%; aspect-ratio: 1206 / 2622; border-radius: var(--screen-radius); overflow: hidden; background: #000; }
.device .screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease, transform .9s cubic-bezier(.2, .7, .2, 1); transform: scale(1.02); transform-origin: 50% 50%; }
.device .screen img.on { opacity: 1; transform: scale(1); }
.device .screen::after { /* glass glare */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 32%);
}
/* Dynamic Island at real proportions: 125 × 37 pt, 11 pt from the top of a
   440 × 956 pt screen. Placed from the device's corner, past the bezel. */
.device .island {
  position: absolute; z-index: 2; left: 50%; transform: translateX(-50%);
  top: calc(var(--glass) + var(--screen-w) * 2622 / 1206 * 0.0115);
  width: calc(var(--screen-w) * 0.284);
  height: calc(var(--screen-w) * 2622 / 1206 * 0.0387);
  background: #000; border-radius: 999px;
}
.device-lg { --w: min(340px, 78vw); }

/* ---------- Marquee ---------- */
.band { border-block: 1px solid var(--line); background: var(--bg-2); overflow: hidden; padding: 18px 0; }
.band .track { display: flex; gap: 48px; width: max-content; animation: marquee 38s linear infinite; }
.band span { font-size: 15px; font-weight: 600; color: var(--ink-2); white-space: nowrap; display: flex; align-items: center; gap: 48px; }
.band span::after { content: "✦"; color: var(--pink); font-size: 12px; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Sections ---------- */
section { position: relative; }
.section { padding: 140px 0; }
.section-head { max-width: 820px; margin: 0 auto 70px; text-align: center; }
.section-head .eyebrow { margin-bottom: 18px; }
.section-head h2 { margin-bottom: 20px; }
.section-head .subtitle { margin-inline: auto; }

/* ---------- Story (sticky phone) ---------- */
.story {
  position: relative;
  background:
    radial-gradient(70% 60% at 70% 40%, color-mix(in srgb, var(--sky-glow) 45%, transparent), transparent 70%),
    linear-gradient(180deg, var(--bg) 0%, var(--sky-a) 18%, var(--sky-b) 82%, var(--bg) 100%);
  transition: --sky-a 1.1s ease, --sky-b 1.1s ease, --sky-glow 1.1s ease;
}
.story-inner { display: grid; grid-template-columns: .9fr 1.1fr; gap: 60px; }
.story-steps { padding: 30vh 0 40vh; }
.step { min-height: 90vh; display: flex; flex-direction: column; justify-content: center; opacity: .25; transition: opacity .5s ease, transform .5s ease; transform: translateY(20px); }
.step.active { opacity: 1; transform: none; }
.step .num { font-family: var(--font-round); font-size: 14px; font-weight: 700; color: var(--ink-3); letter-spacing: .1em; margin-bottom: 16px; }
.step h3 { font-size: clamp(34px, 4.4vw, 58px); margin-bottom: 20px; }
.step p { font-size: clamp(17px, 1.6vw, 20px); color: var(--ink-2); max-width: 26em; margin: 0 0 18px; }
.step .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.step .chips span { font-size: 13px; padding: 6px 12px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); color: var(--ink-2); }
.step .premium-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; padding: 5px 10px; border-radius: 999px; background: linear-gradient(90deg, #ffcf6b, #f9a51c); color: #2a1a00; margin-bottom: 14px; width: fit-content; }
.step .inline-shot { display: none; }
.story-phone { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; padding-top: var(--nav-h); }
.story-phone .halo { position: absolute; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--sky-glow) 55%, transparent), transparent); filter: blur(30px); transition: background 1s ease; }
/* The pinned phone. .phone-rig glides between a pose per feature (position,
   zoom and angle, always upright); .phone-sway adds a gentle lean from scroll
   and pointer; the device has real depth (see .slab). */
.story-phone { perspective: 1800px; --w: min(320px, calc((100svh - 210px) / 2.14)); }
/* Leaves room for the zoomed poses and the nav bar at any window height. */
.story-phone .device-lg { --w: inherit; }
/* Callouts live in a flat layer above the phone (never inside its 3D space,
   so a turning phone can't cut through them). The box matches the phone's
   size and follows its position and zoom. */
.callout-layer { position: absolute; inset: var(--nav-h) 0 0 0; z-index: 6; display: grid; place-items: center; pointer-events: none; }
.callout-box {
  position: relative; width: var(--w); height: calc(var(--w) * 2.087);
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0) scale(var(--ps, 1));
  transition: transform 1.25s cubic-bezier(.22, .8, .18, 1);
}
/* Position + zoom move the phone and its callouts together; only the phone
   turns, so callouts stay flat and facing you. */
.phone-stage {
  position: relative; transform-style: preserve-3d;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0) scale(var(--ps, 1));
  transition: transform 1.25s cubic-bezier(.22, .8, .18, 1);
}
.phone-rig {
  position: relative; transform-style: preserve-3d; will-change: transform;
  transform: rotateY(var(--pry, -14deg)) rotateX(var(--prx, 4deg)) rotateZ(var(--prz, 0deg));
  transition: transform 1.25s cubic-bezier(.22, .8, .18, 1);
}
.phone-sway {
  transform-style: preserve-3d;
  transform: translateY(var(--float, 0px)) rotateY(var(--sway-y, 0deg)) rotateX(var(--sway-x, 0deg));
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
/* Screens crossfade over the previous one, which stays fully visible
   underneath until the new one has faded in (no dark dip mid-fade). */
.story-phone .device .screen img { transform: none; transition: none; z-index: 0; }
.story-phone .device .screen img.on { opacity: 1; }
.story-phone .device .screen img.under { opacity: 1; z-index: 1; }
.story-phone .device .screen img.fading-in { z-index: 2; transition: opacity .5s ease; }

/* Depth: thin metal layers stacked behind the front face, so turning the
   phone shows a real aluminium side. Added by site.js. */
.slab { position: absolute; inset: calc(-1 * var(--frame)); transform-style: preserve-3d; pointer-events: none; }
.slab i {
  position: absolute; inset: 0; backface-visibility: hidden; border-radius: calc(var(--screen-radius) + var(--bezel));
  background: linear-gradient(90deg, #7c3212 0%, #d06a33 18%, #f2a06a 50%, #c45a24 82%, #6e2c10 100%);
}
.slab i.back { background: linear-gradient(160deg, #d9743d, #b4501f 60%, #8e3b15); }

.hotspot {
  position: absolute; z-index: 4; left: var(--ax); top: var(--ay);
  width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.28), 0 0 18px 4px var(--sky-glow);
  opacity: 0; transform: translateZ(2px) scale(.4); transition: opacity .4s ease, transform .5s cubic-bezier(.3, 1.6, .5, 1);
  pointer-events: none;
}
.hotspot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.8); animation: ping 1.8s ease-out infinite;
}
@keyframes ping { from { transform: scale(1); opacity: .9; } to { transform: scale(3.2); opacity: 0; } }
.hotspot.on { opacity: 1; transform: translateZ(2px) scale(1); transition-delay: .6s; }

.callout {
  position: absolute; z-index: 5; top: var(--y);
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px 12px 12px; border-radius: 18px; width: max-content; max-width: 270px;
  background: rgba(16, 20, 36, 0.62); border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
  font-size: 13.5px; line-height: 1.3;
  opacity: 0; pointer-events: none;
  transition: opacity .45s ease, transform .7s cubic-bezier(.25, 1.5, .45, 1);
}
.callout b { display: block; font-size: 15px; }
.callout small { color: var(--ink-2); }
.callout .c-ico { width: 34px; height: 34px; flex: none; border-radius: 11px; display: grid; place-items: center; font-size: 17px; background: linear-gradient(135deg, color-mix(in srgb, var(--sky-glow) 90%, white), color-mix(in srgb, var(--sky-glow) 60%, black)); }
.callout { --overlap: 26px; scale: calc(1 / var(--ps, 1)); } /* same size whatever the phone's zoom */
.callout.l { max-width: 230px; }
.callout.l { right: calc(100% - var(--overlap)); transform: translate(-24px, -50%) scale(.92); transform-origin: right center; }
.callout.r { left: calc(100% - var(--overlap)); transform: translate(24px, -50%) scale(.92); transform-origin: left center; }
/* Laptop widths: tuck callouts further over the phone so they stay on screen. */
@media (max-width: 1320px) { .callout.l { max-width: 200px; } .callout.r { --overlap: 118px; max-width: 220px; } }
.callout.on { opacity: 1; transform: translate(0, -50%) scale(1); transition-delay: .55s; }

.progress { position: absolute; right: -14px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; }
.progress button {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 4px; cursor: pointer;
  background: rgba(255, 255, 255, 0.25); transition: height .35s cubic-bezier(.3, 1.4, .5, 1), background .3s;
}
.progress button:hover { background: rgba(255, 255, 255, 0.6); }
.progress button.on { height: 26px; background: #fff; }

/* Mobile: each stacked phone swings into view. */
.inline-shot { perspective: 1200px; }
.inline-shot .device { opacity: 0; transform: rotateY(-28deg) rotateX(8deg) translateY(50px); transition: opacity .8s ease, transform 1.1s cubic-bezier(.2, .8, .2, 1); }
.inline-shot.in .device { opacity: 1; transform: none; }

/* ---------- Widgets wall ---------- */
.widgets { overflow: hidden; padding-bottom: 40px; }
.w-row { display: flex; gap: 22px; width: max-content; animation: marquee 60s linear infinite; margin-bottom: 22px; }
.w-row.reverse { animation-direction: reverse; animation-duration: 70s; }
.w-row img { height: 170px; width: auto; border-radius: 28px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45); }
.w-row img.small { height: 170px; }
.widgets:hover .w-row { animation-play-state: paused; }

/* ---------- Bento ---------- */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.card {
  position: relative; overflow: hidden;
  grid-column: span 2; min-height: 260px; padding: 28px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025));
  border: 1px solid var(--line);
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), border-color .35s, box-shadow .35s;
}
.card:hover { transform: translateY(-6px); border-color: rgba(255, 255, 255, 0.22); box-shadow: 0 30px 60px -30px var(--glow, rgba(245, 84, 159, 0.5)); }
.card.wide { grid-column: span 3; }
.card.tall { grid-row: span 2; }
.card .ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 24px; margin-bottom: 20px; box-shadow: 0 10px 24px -8px var(--glow, rgba(0, 0, 0, 0.4)); }
.card h3 { font-size: 24px; letter-spacing: -0.02em; margin-bottom: 10px; line-height: 1.15; }
.card p { color: var(--ink-2); margin: 0; font-size: 16px; }
.card .shot { position: absolute; right: 26px; top: 26px; width: 36%; border-radius: 22px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); transform: rotate(4deg); transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.card:hover .shot { transform: rotate(1deg) translateY(-8px); }
.card.has-shot { padding-right: 46%; min-height: 330px; }
.card::before { /* soft color wash */
  content: ""; position: absolute; inset: -40% -40% auto auto; width: 70%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, var(--glow, rgba(245, 84, 159, 0.35)), transparent); opacity: .35; pointer-events: none;
}

/* ---------- Premium ---------- */
.plans { display: grid; grid-template-columns: 1fr 1.15fr; gap: 22px; max-width: 980px; margin: 0 auto; }
.plan { border-radius: 32px; padding: 36px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); }
.plan h3 { font-size: 30px; margin-bottom: 8px; }
.plan .price { font-size: 16px; color: var(--ink-2); margin-bottom: 26px; }
.plan .price b { font-size: 40px; color: var(--ink); letter-spacing: -0.03em; }
.plan ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.plan li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-2); font-size: 16px; }
.plan li::before { content: "✓"; flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: rgba(255, 255, 255, 0.1); color: #fff; margin-top: 2px; }
.plan.premium { position: relative; background: linear-gradient(150deg, rgba(255, 107, 84, 0.22), rgba(245, 84, 159, 0.18) 45%, rgba(140, 92, 255, 0.28)); border-color: rgba(255, 255, 255, 0.2); box-shadow: 0 40px 80px -40px rgba(245, 84, 159, 0.6); }
.plan.premium li::before { background: var(--brand); }
.plan .badge { position: absolute; top: 24px; right: 24px; font-size: 12px; font-weight: 800; letter-spacing: .06em; padding: 6px 12px; border-radius: 999px; background: linear-gradient(90deg, #ffcf6b, #f9a51c); color: #2a1a00; }
.fineprint { text-align: center; color: var(--ink-3); font-size: 13.5px; margin-top: 26px; }

/* ---------- Privacy promise ---------- */
.promise { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.promise div { padding: 28px; border-radius: 24px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); }
.promise b { display: block; font-size: 19px; margin: 12px 0 6px; }
.promise p { margin: 0; color: var(--ink-2); font-size: 15.5px; }
.promise .ico { font-size: 26px; }

/* ---------- Final CTA ---------- */
.cta { text-align: center; padding: 160px 0 150px; overflow: hidden; }
.cta .icon-xl { width: 150px; height: 150px; margin: 0 auto 36px; border-radius: 34px; box-shadow: 0 30px 80px rgba(245, 84, 159, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.12); animation: float 7s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-14px) rotate(2deg); } }
.cta::before { content: ""; position: absolute; inset: 20% 10% auto; height: 60%; background: radial-gradient(closest-side, rgba(140, 92, 255, 0.35), transparent); filter: blur(40px); z-index: -1; }
.cta h2 { margin-bottom: 18px; }
.cta .subtitle { margin: 0 auto 36px; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line); padding: 56px 0 44px; color: var(--ink-3); font-size: 14px; }
.footer .cols { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.footer nav { display: flex; gap: 22px; flex-wrap: wrap; }
.footer a { text-decoration: none; color: var(--ink-2); }
.footer a:hover { color: var(--ink); }
.footer .legal { margin-top: 26px; font-size: 12.5px; line-height: 1.6; }

/* ---------- Docs pages (Privacy, Terms, Support) ---------- */
.read-progress { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 60; pointer-events: none; }
.read-progress i { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(var(--read, 0)); background: var(--brand); box-shadow: 0 0 12px rgba(245, 84, 159, 0.6); }

.doc-hero { position: relative; overflow: hidden; padding: calc(var(--nav-h) + 70px) 0 70px; isolation: isolate; }
.aurora { position: absolute; inset: -20% -10% 0; z-index: -1; pointer-events: none; }
.aurora i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; animation: auroraDrift 16s ease-in-out infinite alternate; }
.aurora i:nth-child(1) { width: 520px; height: 420px; left: 5%; top: 5%; background: #3f6dff; }
.aurora i:nth-child(2) { width: 460px; height: 380px; right: 8%; top: 0; background: #f5549f; animation-delay: -5s; opacity: .4; }
.aurora i:nth-child(3) { width: 420px; height: 320px; left: 40%; top: 30%; background: #ff9a4d; animation-delay: -9s; opacity: .3; }
@keyframes auroraDrift { from { transform: translate(0, 0) scale(1); } to { transform: translate(60px, 30px) scale(1.12); } }
.doc-hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 160px; z-index: -1; background: linear-gradient(180deg, transparent, var(--bg)); }
.doc-hero-grid { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 40px; }
.doc-hero h1 { font-size: clamp(42px, 6.4vw, 76px); margin: 22px 0 18px; }
.lede { font-size: clamp(17px, 1.8vw, 21px); color: var(--ink-2); max-width: 36em; margin: 0 0 24px; }
.lede.center { margin-inline: auto; }
.meta-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.meta-chips span { font-size: 13.5px; padding: 7px 13px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); border: 1px solid var(--line); color: var(--ink-2); }
.doc-hero-art .shield { position: relative; width: 210px; height: 210px; display: grid; place-items: center; animation: float 7s ease-in-out infinite; }
.doc-hero-art .shield img { width: 150px; height: 150px; border-radius: 34px; box-shadow: 0 30px 80px rgba(245, 84, 159, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.12); }
.doc-hero-art .shield span { position: absolute; right: 6px; bottom: 10px; width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; font-size: 30px; background: rgba(16, 20, 36, 0.7); border: 1px solid rgba(255, 255, 255, 0.18); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4); }

.doc { display: grid; grid-template-columns: 230px 1fr; gap: 48px; padding: 10px 0 120px; }
.toc { position: sticky; top: calc(var(--nav-h) + 20px); align-self: start; font-size: 14px; padding: 14px; border-radius: 20px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); }
.toc b { display: block; margin: 2px 8px 10px; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.toc a { position: relative; display: block; padding: 7px 10px 7px 16px; border-radius: 10px; text-decoration: none; color: var(--ink-2); transition: color .2s, background .2s; }
.toc a::before { content: ""; position: absolute; left: 6px; top: 50%; width: 3px; height: 0; border-radius: 2px; background: var(--brand); transform: translateY(-50%); transition: height .25s ease; }
.toc a:hover { color: var(--ink); background: rgba(255, 255, 255, 0.05); }
.toc a.active { color: var(--ink); background: rgba(255, 255, 255, 0.08); }
.toc a.active::before { height: 16px; }

.prose { max-width: 820px; display: grid; gap: 18px; }
.prose p, .prose li { color: var(--ink-2); }
.prose strong { color: var(--ink); }
.prose a { color: #9fc8ff; }
.doc-card { padding: 28px 30px; border-radius: 26px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02)); border: 1px solid var(--line); scroll-margin-top: calc(var(--nav-h) + 20px); }
.doc-card.plain { background: none; border: 0; padding: 0 0 6px; }
.doc-card > p:last-child { margin-bottom: 0; }
.doc-h { display: flex; align-items: center; gap: 14px; font-size: 24px; letter-spacing: -0.02em; margin: 0 0 16px; }
.h-ico, .g-ico { flex: none; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; font-size: 20px; background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: 0 10px 24px -10px var(--c2); }

.glance { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.glance div { padding: 20px; border-radius: 22px; background: rgba(255, 255, 255, 0.045); border: 1px solid var(--line); transition: transform .3s cubic-bezier(.2, .7, .2, 1), border-color .3s; }
.glance div:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, 0.2); }
.glance b { display: block; margin: 14px 0 4px; font-size: 16.5px; color: var(--ink); }
.glance p { margin: 0; font-size: 14.5px; }

.use-list { display: grid; gap: 10px; }
.use { display: grid; grid-template-columns: 1.1fr 1fr 1.2fr; gap: 18px; padding: 18px 20px; border-radius: 18px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); }
.use-what span { font-size: 22px; }
.use-what b { display: block; color: var(--ink); margin-top: 6px; }
.use-what small { color: var(--ink-3); font-size: 13px; }
.use em { display: block; font-style: normal; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.use p { margin: 0; font-size: 14.5px; }

.ticks, .crosses { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 10px; }
.ticks li, .crosses li { position: relative; padding-left: 34px; }
.ticks li::before, .crosses li::before { position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; }
.ticks li::before { content: "✓"; background: linear-gradient(135deg, #19b878, #14a8cc); }
.crosses li::before { content: "✕"; background: linear-gradient(135deg, #ff6b54, #f5549f); }
.note { padding: 14px 16px; border-radius: 14px; background: rgba(49, 140, 255, 0.08); border: 1px solid rgba(49, 140, 255, 0.2); font-size: 15px; }
.callout-line { display: inline-block; padding: 10px 16px; border-radius: 999px; background: linear-gradient(90deg, rgba(255, 207, 107, 0.16), rgba(249, 165, 28, 0.1)); border: 1px solid rgba(255, 207, 107, 0.3); }

.sources { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 14px; }
.sources div { padding: 16px; border-radius: 18px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; }
.sources em { width: 100%; font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.sources span { font-size: 13.5px; padding: 6px 11px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); color: var(--ink); }

.contact-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding: 34px; border-radius: 28px; position: relative; overflow: hidden;
  background: linear-gradient(135deg, rgba(255, 107, 84, 0.3), rgba(245, 84, 159, 0.26) 45%, rgba(140, 92, 255, 0.34));
  border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: 0 40px 80px -40px rgba(245, 84, 159, 0.6);
}
.contact-cta h2 { font-size: 28px; margin: 0 0 8px; letter-spacing: -0.02em; }
.contact-cta p { margin: 0; color: rgba(255, 255, 255, 0.85); max-width: 34em; }
.contact-cta small { color: rgba(255, 255, 255, 0.65); }
.btn-light { background: #fff; color: #1a1030; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3); }

/* Support */
.support-hero { padding-bottom: 50px; }
.support-hero h1 { margin-top: 22px; }
.search { display: flex; align-items: center; gap: 12px; max-width: 560px; margin: 8px auto 0; height: 58px; padding: 0 20px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: border-color .2s, box-shadow .2s; }
.search:focus-within { border-color: rgba(255, 255, 255, 0.4); box-shadow: 0 0 0 5px rgba(140, 92, 255, 0.25); }
.search svg { width: 20px; height: 20px; color: var(--ink-3); flex: none; }
.search input { flex: 1; background: none; border: 0; outline: 0; color: var(--ink); font: inherit; font-size: 17px; }
.search input::placeholder { color: var(--ink-3); }
.support { padding: 20px 0 120px; max-width: 980px; }
.topics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 56px; }
.topic { display: flex; flex-direction: column; gap: 6px; padding: 22px; border-radius: 24px; text-decoration: none; background: linear-gradient(160deg, color-mix(in srgb, var(--c1) 22%, transparent), color-mix(in srgb, var(--c2) 10%, transparent)); border: 1px solid rgba(255, 255, 255, 0.12); transition: transform .3s cubic-bezier(.2, .7, .2, 1), border-color .3s, box-shadow .3s; }
.topic:hover { transform: translateY(-6px); border-color: rgba(255, 255, 255, 0.28); box-shadow: 0 24px 50px -24px var(--c2); }
.topic .t-ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; background: linear-gradient(135deg, var(--c1), var(--c2)); margin-bottom: 8px; }
.topic b { font-size: 17px; }
.topic small { color: var(--ink-2); font-size: 13.5px; line-height: 1.4; }
.topic em { font-style: normal; font-size: 13px; font-weight: 600; color: var(--ink); margin-top: auto; padding-top: 10px; opacity: .8; }
.faq { display: grid; gap: 34px; margin-bottom: 56px; }
.faq-group { scroll-margin-top: calc(var(--nav-h) + 20px); }
.faq details { border: 1px solid var(--line); border-radius: 18px; margin: 10px 0; background: rgba(255, 255, 255, 0.035); transition: background .25s, border-color .25s; }
.faq details[open] { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.18); }
.faq summary { cursor: pointer; font-weight: 600; font-size: 17px; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; line-height: 1; color: var(--ink-2); background: rgba(255, 255, 255, 0.07); transition: transform .3s ease, background .3s; }
.faq details[open] summary::after { transform: rotate(45deg); background: rgba(255, 255, 255, 0.14); }
.faq .answer { padding: 0 22px 18px; animation: answerIn .35s ease; }
.faq .answer p { margin: 0; color: var(--ink-2); }
.faq .answer a { color: #9fc8ff; }
@keyframes answerIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.faq mark { background: rgba(255, 207, 107, 0.35); color: inherit; border-radius: 4px; padding: 0 2px; }
.no-results { text-align: center; color: var(--ink-2); padding: 30px; border-radius: 20px; border: 1px dashed var(--line); }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .nav-bar { grid-template-columns: 1fr auto; position: relative; }
  .nav.scrolled .nav-bar { width: 100%; }
  .nav-toggle { display: block; }
  .nav-links {
    position: absolute; top: calc(100% + 10px); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px; padding: 10px;
    border-radius: 24px; background: rgba(12, 14, 24, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.5);
    opacity: 0; transform: translateY(-8px) scale(.98); transform-origin: top center;
    pointer-events: none; transition: opacity .25s ease, transform .3s cubic-bezier(.2, .8, .2, 1);
  }
  .nav-links.open { opacity: 1; transform: none; pointer-events: auto; }
  .nav-links a { height: 48px; padding: 0 16px; font-size: 17px; border-radius: 14px; }
}
@media (max-width: 420px) {
  .nav-cta span { display: none; }
  .nav-cta { padding: 0 12px; }
  .brand { font-size: 16px; }
}

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero-copy .subtitle { margin-inline: auto; }
  .hero-actions { justify-content: center; }
  .hero-stage { margin-top: 30px; }
  .fc-1 { left: 2%; } .fc-2 { right: 2%; }
  /* Phones & small tablets: the phone stays pinned in the top of the
     screen; each feature's text rises underneath it in a glass card. */
  .story-inner { display: flex; flex-direction: column; position: relative; }
  .story-phone { order: -1; }   /* first, so it can pin from the top of the section */
  .story-phone {
    position: sticky; top: 0; z-index: 1; height: 100svh;
    display: grid; place-items: start center;
    padding-top: calc(var(--nav-h) + 6px);
    --w: min(250px, 62vw, calc(56svh / 2.12));
  }
  .story-phone .halo { width: 340px; height: 340px; top: 12%; }
  .callout-layer { display: none; }
  .progress { right: -4px; top: 34%; gap: 7px; }
  .progress button { width: 6px; height: 6px; }
  .progress button.on { height: 20px; }
  .story-steps { position: relative; z-index: 2; margin-top: -100svh; padding: 62svh 0 30svh; }
  .step { min-height: 78svh; justify-content: flex-start; padding: 0; opacity: 1; transform: none; }
  .step-card {
    padding: 20px 20px 18px; border-radius: 26px;
    background: rgba(10, 12, 24, 0.66); border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%);
    box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.6);
    opacity: 0; transform: translateY(24px) scale(.97);
    transition: opacity .45s ease, transform .6s cubic-bezier(.2, .8, .2, 1);
  }
  .step-card.in-zone { opacity: 1; transform: none; }
  .step h3 { font-size: 28px; margin-bottom: 10px; }
  .step p { font-size: 16px; margin-bottom: 12px; }
  .step .num { margin-bottom: 8px; }
  .bento { grid-template-columns: 1fr 1fr; }
  .card, .card.wide { grid-column: span 2; }
  .plans, .promise { grid-template-columns: 1fr; }
  .doc { grid-template-columns: 1fr; }
  .toc { display: none; }
  .doc-hero-grid { grid-template-columns: 1fr; }
  .doc-hero-art { display: none; }
  .topics { grid-template-columns: 1fr 1fr; }
  .use { grid-template-columns: 1fr; gap: 8px; }
  .sources { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }

  .section { padding: 100px 0; }
  .float-card { display: none; }
  .card.has-shot { padding-right: 28px; padding-bottom: 260px; }
  .card .shot { width: 52%; top: auto; right: 24%; bottom: -110px; }
  .w-row img { height: 120px; border-radius: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  .step { opacity: 1; transform: none; }
  .inline-shot .device { opacity: 1; transform: none; }
}