/* AdGone — site styles
   Shares its layout with the Weather360 site (same author), recoloured to
   AdGone's palette: the icon's teal green, with the app's indigo, coral and
   yellow tiles as accents. Motion respects Reduce Motion. */

/* Registered so the story's sky can crossfade between steps. */
@property --sky-a { syntax: "<color>"; inherits: true; initial-value: #0c4a40; }
@property --sky-b { syntax: "<color>"; inherits: true; initial-value: #06141a; }
@property --sky-glow { syntax: "<color>"; inherits: true; initial-value: #19c08a; }

: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: #12c48b;
  --pink: #17a2c9;
  --violet: #5b5bf0;
  --sky: #318cff;
  --mint: #19b878;
  --gold: #faa81f;
  --teal: #14a8cc;
  --brand: linear-gradient(100deg, var(--coral), var(--pink) 45%, var(--violet));
  --sky-text: linear-gradient(100deg, #8ff0cf 0%, #ffffff 42%, #ffd27a 100%);

  /* Story sky, set by site.js per step. */
  --sky-a: #0c4a40;
  --sky-b: #06141a;
  --sky-glow: #19c08a;

  --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(18, 196, 139, 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(18, 196, 139, 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(18, 196, 139, 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(18, 196, 139, 0.35); }
.btn-brand:hover { box-shadow: 0 14px 38px rgba(18, 196, 139, 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; }

/* App Store + Google Play badges, both used as supplied and drawn at the
   same visible height (--bh). Google's art carries 41 px of transparent
   margin around its 564 x 168 badge (in a 646 x 250 image), so it's drawn
   larger and that margin is pulled back in; the two then match exactly. */
.store-badges { --bh: 56px; display: inline-flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; }
.cta .store-badges { --bh: 62px; justify-content: center; }
.appstore-badge, .play-badge { display: inline-block; line-height: 0; transition: transform .2s ease; }
.appstore-badge:hover, .play-badge:hover { transform: translateY(-2px); }
.appstore-badge img { height: var(--bh); width: auto; }
.play-badge img { height: calc(var(--bh) * 250 / 168); width: auto; margin: calc(var(--bh) * -41 / 168); }

/* ---------- 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(110% 80% at 85% 8%, rgba(245, 179, 33, 0.38), transparent 58%),
    radial-gradient(90% 75% at 8% 18%, rgba(18, 196, 139, 0.6), transparent 62%),
    linear-gradient(180deg, #07564b 0%, #0b5f6e 34%, #33339c 72%, #05070d 100%);
}
@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(18, 196, 139, 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);
}
/* No overflow clip on the screen: Safari can't draw composited (fading)
   images inside a rounded clip in a 3D-turned phone and shows black. Each
   image and the glare round their own corners instead. */
.device .screen { position: relative; width: 100%; aspect-ratio: 1206 / 2622; border-radius: var(--screen-radius); background: #000; }
.device .screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; 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; border-radius: inherit;
  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 in site.js, frame by frame. No CSS transition on
   purpose: Safari moves a transitioning image onto its own GPU layer, and
   inside this 3D phone it often fails to draw that layer (black, or the
   previous screen, flashes through). Plain repaints are always correct. */
.story-phone .device .screen img { transform: none; transition: none; }

/* 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); }

/* Lock Screen step: the expanded Dynamic Island grows out of the phone's
   island and floats in front of it, so the island and the Lock Screen Live
   Activity show together. A static image on its own 3D plane, like the
   hotspots, which Safari draws reliably. */
.island-pop {
  position: absolute; z-index: 5; left: 50%; top: calc(var(--w) * 0.035);
  width: 93%; height: auto; border-radius: 13% / 35%;
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.07);
  pointer-events: none; opacity: 0;
  transform-origin: 50% 20%;
  transform: translate3d(-50%, 0, 2px) scale(.29, .25);
  transition: opacity .3s ease, transform .75s cubic-bezier(.3, 1.3, .5, 1);
}
.island-pop.on { opacity: 1; transform: translate3d(-50%, -24%, 46px) scale(1); transition-delay: .3s; }

.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; }
.progress .pg { display: none; }

/* 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; }

/* ---------- iPad showcase ----------
   A landscape iPad Pro, drawn: space-black rim, even black border, 4:3
   screen. It tilts back a little and straightens as it scrolls in (--ip,
   set by site.js). Screens crossfade in site.js frame by frame, as in the
   story phone (no CSS transitions on the images: Safari). */
.ipad-show { overflow: hidden; }
.ipad-show::before {
  content: ""; position: absolute; inset: 10% 0 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(50% 45% at 30% 55%, rgba(255, 154, 77, 0.22), transparent 70%),
    radial-gradient(50% 45% at 72% 50%, rgba(63, 109, 255, 0.28), transparent 70%);
}
.ipad-tabs {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: -30px auto 44px;
}
.ipad-tabs button {
  font: inherit; font-size: 14.5px; font-weight: 600; color: var(--ink-2); cursor: pointer;
  height: 40px; padding: 0 18px; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--line);
  transition: color .2s, background .25s, border-color .25s, box-shadow .25s;
}
.ipad-tabs button:hover { color: var(--ink); background: rgba(255, 255, 255, 0.1); }
.ipad-tabs button.on {
  color: #fff; background: var(--brand); border-color: transparent;
  box-shadow: 0 10px 26px -8px rgba(18, 196, 139, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.ipad-stage { position: relative; perspective: 2200px; display: grid; place-items: center; }
.ipad-glow {
  position: absolute; inset: 8% 10%; border-radius: 50%; z-index: -1;
  background: radial-gradient(closest-side, rgba(91, 91, 240, 0.45), transparent); filter: blur(50px);
}
.ipad {
  /* Whole iPad on screen at once, whatever the window's height. */
  --iw: min(1040px, 100%, calc((100svh - 150px) * 1.26));
  --rim: calc(var(--iw) * 0.007);
  --border: calc(var(--iw) * 0.024);
  position: relative; box-sizing: border-box; width: var(--iw);
  padding: var(--border);
  border: var(--rim) solid transparent;
  border-radius: calc(var(--iw) * 0.045);
  background: linear-gradient(#050506, #050506) padding-box,
              linear-gradient(135deg, #8e929a 0%, #3a3d44 30%, #1d1f24 55%, #6d7079 100%) border-box;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 70px 120px -40px rgba(0, 0, 0, 0.8),
    0 40px 90px -40px rgba(91, 91, 240, 0.45);
  transform: rotateX(calc(14deg * (1 - var(--ip, 1)))) translateY(calc(40px * (1 - var(--ip, 1))));
  transform-origin: 50% 100%;
}
.ipad-screen {
  position: relative; width: 100%; aspect-ratio: 4 / 3;
  border-radius: calc(var(--iw) * 0.024); background: #000;
}
.ipad-screen img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  border-radius: inherit; opacity: 0;
}
.ipad-screen img.on { opacity: 1; }
.ipad-screen::after { /* glass glare */
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 28%);
}
/* Front camera on the long edge, as in landscape. */
.ipad-cam {
  position: absolute; left: 50%; top: calc(var(--border) * 0.42); width: calc(var(--iw) * 0.006); aspect-ratio: 1;
  margin-left: calc(var(--iw) * -0.003); border-radius: 50%; background: #1b1d24;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.ipad-legend {
  width: min(1040px, 100%, calc((100svh - 150px) * 1.26)); display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 26px;
}
.ipad-legend span {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding-top: 16px; position: relative;
}
.ipad-legend span::before { /* tick up to its half of the screen */
  content: ""; position: absolute; top: 0; left: 50%; width: 2px; height: 10px; border-radius: 1px;
  background: linear-gradient(var(--c, #ffb24d), transparent);
}
.ipad-legend .lg-l { --c: #ffb24d; }
.ipad-legend .lg-r { --c: #7fb2ff; }
.ipad-legend b { font-size: 16px; }
.ipad-legend small { color: var(--ink-3); font-size: 13.5px; }
.ipad-note { margin-top: 22px; color: var(--ink-2); font-size: 17px; min-height: 1.6em; }

/* ---------- Apple Watch showcase ----------
   A cover flow of Apple Watch Ultra 3s (the app's screens in Apple's
   product bezels). site.js places each watch around the centred one. */
.watch-show { overflow: hidden; }
.watch-show::before {
  content: ""; position: absolute; inset: 15% 0 20%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 50% at 50% 45%, rgba(18, 196, 139, 0.28), transparent 70%),
    radial-gradient(60% 40% at 50% 60%, rgba(49, 140, 255, 0.2), transparent 70%);
}
.watch-flow { --ww: min(300px, 62vw); position: relative; }
.watch-track {
  /* Full width: the fade mask below clips to this box, so a narrower
     track cut the side watches off at the content edge. */
  position: relative; height: calc(var(--ww) * 1.6 * 0.86); margin: -20px calc(50% - 50vw) 0;
  perspective: 1400px;
  /* The bands run off into the page, top and bottom. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
}
.watch-track img {
  position: absolute; left: 50%; top: 50%; width: var(--ww); height: auto; cursor: pointer;
  translate: -50% -50%;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.55));
  transition: transform .9s cubic-bezier(.22, .8, .18, 1), opacity .7s ease, filter .7s ease;
  user-select: none; -webkit-user-select: none; -webkit-user-drag: none;
}
.watch-caption { text-align: center; margin-top: 8px; min-height: 84px; }
.watch-caption b { display: block; font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -0.02em; margin-bottom: 6px; }
.watch-caption small { color: var(--ink-2); font-size: 16.5px; }
.watch-caption .premium-tag {
  display: inline-flex; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; padding: 4px 10px;
  border-radius: 999px; background: linear-gradient(90deg, #ffcf6b, #f9a51c); color: #2a1a00; margin-bottom: 10px;
}
.watch-caption .premium-tag[hidden] { display: none; }
.watch-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.watch-dots button {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 4px; cursor: pointer;
  background: rgba(255, 255, 255, 0.25); transition: width .35s cubic-bezier(.3, 1.4, .5, 1), background .3s;
}
.watch-dots button.on { width: 26px; background: #fff; }
.watch-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 70px; }
.watch-points div { padding: 28px; border-radius: 24px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); }
.watch-points .ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; }
.watch-points b { display: block; font-size: 19px; margin: 16px 0 6px; }
.watch-points p { margin: 0; color: var(--ink-2); font-size: 15.5px; }

@media (max-width: 980px) {
  .ipad-tabs {
    flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none;
    margin-inline: calc(50% - 50vw); padding: 2px 20px; margin-top: -40px; margin-bottom: 30px;
  }
  .ipad-tabs::-webkit-scrollbar { display: none; }
  .ipad-tabs button { flex: none; }
  .watch-points { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .ipad-legend b { font-size: 14px; }
  .ipad-legend small { font-size: 12px; }
  .ipad-note { font-size: 15px; }
  .watch-caption small { font-size: 15px; }
}

/* ---------- 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(18, 196, 139, 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(18, 196, 139, 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(23, 162, 201, 0.22), rgba(18, 196, 139, 0.18) 45%, rgba(91, 91, 240, 0.28)); border-color: rgba(255, 255, 255, 0.2); box-shadow: 0 40px 80px -40px rgba(18, 196, 139, 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(18, 196, 139, 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(91, 91, 240, 0.35), transparent); filter: blur(40px); z-index: -1; }
.cta h2 { margin-bottom: 18px; }
.cta .subtitle { margin: 0 auto 36px; }
.qr-card {
  display: inline-flex; align-items: center; gap: 20px; margin-top: 38px; max-width: 460px;
  padding: 16px 26px 16px 16px; border-radius: 28px; text-align: left;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.qr-code { position: relative; flex: none; width: 136px; height: 136px; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35); }
.qr-code svg { display: block; width: 100%; height: 100%; }
.qr-logo { position: absolute; left: 50%; top: 50%; width: 24%; height: 24%; transform: translate(-50%, -50%); border-radius: 22%; box-shadow: 0 0 0 4px #fff; }
.qr-text b { display: block; font-size: 18px; margin-bottom: 6px; }
.qr-text small { display: block; color: var(--ink-2); font-size: 14px; line-height: 1.45; }
/* On a phone you'd just tap a badge. */
@media (max-width: 720px), (hover: none) and (pointer: coarse) { .qr-card { display: none; } }

/* ---------- 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(18, 196, 139, 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: #12c48b; }
.aurora i:nth-child(2) { width: 460px; height: 380px; right: 8%; top: 0; background: #5b5bf0; animation-delay: -5s; opacity: .4; }
.aurora i:nth-child(3) { width: 420px; height: 320px; left: 40%; top: 30%; background: #f5b321; 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(18, 196, 139, 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: #8ff0cf; }
.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, #f2643d, #e8641b); }
.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(23, 162, 201, 0.3), rgba(18, 196, 139, 0.26) 45%, rgba(91, 91, 240, 0.34));
  border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: 0 40px 80px -40px rgba(18, 196, 139, 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(91, 91, 240, 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(5, 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: #8ff0cf; }
@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 ---------- */
/* Menu button below 1000 px: seven section pills no longer fit beside the
   brand and "Get the app". */
@media (max-width: 1000px) {
  .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) {
  /* Small enough for both badges to sit side by side on a phone. */
  .store-badges, .cta .store-badges { --bh: 46px; gap: 10px; }
  .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; }
  .store-badges { justify-content: center; }
  .hero-stage { margin-top: 30px; }
  .fc-1 { left: 2%; } .fc-2 { right: 2%; }
  /* Phones & small tablets: the story is one screen-sized panel, the
     phone on top and a swipeable, snapping row of cards underneath. The
     page snaps the panel into view so it never rests half-way. */
  html { scroll-snap-type: y proximity; }
  .story-inner {
    display: flex; flex-direction: column; gap: 14px;
    /* The height actually visible (dvh): in iPhone Safari the toolbar
       shrinks to a floating pill once you scroll, and svh would leave that
       space empty. The bottom padding clears the pill and home indicator. */
    height: 100svh; height: 100dvh;
    padding: calc(var(--nav-h) + 4px) 0 calc(env(safe-area-inset-bottom, 0px) + 16px);
    scroll-snap-align: start; scroll-snap-stop: normal;
  }
  .story-phone {
    order: -1; position: relative; top: auto; height: auto;
    flex: 1; min-height: 0; padding: 0 0 22px;
    display: grid; place-items: center;
    container-type: size;
    --w: min(290px, 72vw, calc((100cqh - 30px) / 2.14));
  }
  .story-phone .halo { width: 300px; height: 300px; top: 50%; translate: 0 -50%; }
  .callout-layer { display: none; }
  .progress {
    top: auto; bottom: 0; right: auto; left: 50%; transform: translateX(-50%);
    flex-direction: row; gap: 7px;
  }
  .progress button { width: 6px; height: 6px; }
  .progress button.on { width: 20px; height: 6px; }
  .story-steps {
    position: relative; z-index: 2; flex: none;
    display: flex; align-items: stretch; gap: 12px;
    margin-inline: calc(50% - 50vw); padding: 2px 7vw 6px;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; scroll-padding-inline: 7vw;
    overscroll-behavior-x: contain; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .story-steps::-webkit-scrollbar { display: none; }
  .story-steps:focus-visible { outline: none; }
  .step {
    flex: 0 0 86vw; max-width: 460px; min-height: 0; padding: 0;
    scroll-snap-align: center; scroll-snap-stop: always;
    opacity: 1; transform: none;
  }
  .step-card {
    flex: 1; padding: 16px 18px; border-radius: 24px;
    background: rgba(10, 12, 24, 0.62); 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);
    transition: opacity .35s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
  }
  .step:not(.active) .step-card { opacity: .5; transform: scale(.95); }
  .step h3 { font-size: 22px; margin-bottom: 6px; }
  .step p { font-size: 15px; line-height: 1.45; margin-bottom: 0; }
  .step .num { font-size: 12px; margin-bottom: 6px; }
  /* Premium tag sits in the card's top corner, beside the number, so the
     tallest cards (which set the carousel height) lose a line. */
  .step-card { position: relative; }
  .step .premium-tag { position: absolute; top: 13px; right: 16px; margin: 0; font-size: 10.5px; padding: 3px 8px; }
  .step .chips { display: none; }
  .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; }
}
/* Carousel with a mouse or trackpad: arrow buttons beside the dots, and
   the cards can be dragged. */
@media (max-width: 980px) and (hover: hover) and (pointer: fine) {
  .story-phone { padding-bottom: 44px; }
  .progress { align-items: center; gap: 8px; }
  .progress .pg {
    display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
    margin-inline: 6px; color: #fff;
    background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2);
    transition: background .2s, opacity .2s, transform .2s;
  }
  .progress .pg svg { width: 16px; height: 16px; }
  .progress .pg:hover:not(:disabled) { background: rgba(255, 255, 255, 0.22); transform: scale(1.06); }
  .progress .pg:disabled { opacity: .3; cursor: default; }
  .story-steps { cursor: grab; }
  .story-steps.dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; -webkit-user-select: none; }
}
@media (max-width: 980px) and (max-height: 720px) {
  .story-inner { gap: 10px; }
  .step-card { padding: 13px 16px; }
  .step h3 { font-size: 19px; margin-bottom: 4px; }
  .step p { font-size: 14px; line-height: 1.4; }
  .step .num { margin-bottom: 4px; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }

  .section { padding: 100px 0; }
  .float-card { display: none; }
  /* The screenshot sits under the text (never over it, however long the
     text runs) and peeks out of the bottom of the card. */
  .card.has-shot { padding-right: 28px; padding-bottom: 0; min-height: 0; }
  .card .shot { position: relative; display: block; top: auto; right: auto; width: 58%; margin: 26px auto -40%; transform: rotate(3deg); }
  .card:hover .shot { transform: rotate(1deg) translateY(-6px); }
  .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; }
  .ipad { transform: none; }
}


/* ---------- AdGone additions ---------- */
/* "Coming soon" stands in for the App Store badge until the app is live. */
.soon-badge {
  display: inline-flex; align-items: center; gap: 12px; height: var(--bh, 56px); padding: 0 22px 0 18px;
  border-radius: 14px; background: #000; border: 1px solid rgba(255, 255, 255, 0.28); color: #fff;
}
.soon-badge svg { width: 26px; height: 26px; flex: none; }
.soon-badge span { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.soon-badge small { font-size: 11px; opacity: .85; letter-spacing: .02em; }
.soon-badge strong { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }

/* Three numbered steps: how AdGone is switched on. */
.setup-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: setup; }
.setup-steps > div {
  position: relative; padding: 30px 28px 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);
}
.setup-steps > div::before {
  counter-increment: setup; content: counter(setup);
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; margin-bottom: 18px;
  font: 700 22px/1 var(--font-round); color: #fff; background: var(--c, var(--coral));
}
.setup-steps b { display: block; font-size: 20px; letter-spacing: -0.02em; margin-bottom: 8px; }
.setup-steps p { margin: 0; color: var(--ink-2); }
@media (max-width: 860px) { .setup-steps { grid-template-columns: 1fr; } }

/* Three plans side by side under the Free / AdGone+ cards. */
.plan-prices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 6px 0 22px; }
.plan-prices div { padding: 14px 12px; border-radius: 16px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.16); text-align: center; }
.plan-prices b { display: block; font-size: 24px; letter-spacing: -0.02em; }
.plan-prices small { display: block; color: var(--ink-2); font-size: 13px; line-height: 1.3; }
@media (max-width: 520px) { .plan-prices { grid-template-columns: 1fr; } }