/* Tokens: glass/apple DESIGN.md.
   PALETTE RULE: brand blue #3B82F6 and its shades, near-black, white. No other
   hue anywhere: wallpapers, tints, icon tiles and gradients are all drawn from
   the --blue-* ramp below plus the neutrals. */
@property --w1 { syntax: '<color>'; inherits: true; initial-value: #3B82F6; }
@property --w2 { syntax: '<color>'; inherits: true; initial-value: #60A5FA; }
:root {
  --bg: #ffffff;
  --bg-elevated: #ffffff;
  --surface-grouped: #f2f2f7;
  --separator: rgba(60,60,67,0.18);
  --text: #1d1d1f;
  --text-secondary: rgba(60,60,67,0.78);
  --text-tertiary: rgba(60,60,67,0.55);
  --blue: #3B82F6;
  --blue-100: #DBEAFE; --blue-200: #BFDBFE; --blue-300: #93C5FD; --blue-400: #60A5FA;
  --blue-600: #2563EB; --blue-700: #1D4ED8; --blue-800: #1E40AF; --blue-900: #1E3A8A;
  --night: #050912;             /* the near-black the dark band fades into */
  --material-thin: rgba(255,255,255,0.6);
  --material-regular: rgba(255,255,255,0.78);
  --material-thick: rgba(255,255,255,0.92);
  --edge: rgba(255,255,255,0.75);       /* specular rim on glass */
  --edge-low: rgba(255,255,255,0.25);
  --bubble-in: rgba(255,255,255,0.92);
  /* the one always-dark band (features) */
  --ink-bg: #000000;
  --ink-text: #f5f5f7;
  --ink-secondary: rgba(235,235,245,0.6);
  --ink-material: rgba(28,28,30,0.55);

  --display: "SF Pro Display", -apple-system, BlinkMacSystemFont, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --textface: "SF Pro Text", -apple-system, BlinkMacSystemFont, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  --ease: cubic-bezier(.25,.1,.25,1);
  --spring: cubic-bezier(.34,1.45,.55,1);
  --w1: #3B82F6; --w2: #60A5FA;
  --nav-h: 76px;               /* floating bar + its top gap */

  /* ---- Gradients: every gradient on the site is one of these tokens ---- */
  --grad-tile: linear-gradient(145deg, var(--blue-400), var(--blue) 45%, var(--blue-800));   /* icon tiles */
  --grad-gloss: linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,0));         /* sheen on a tile */
  --grad-lens: linear-gradient(180deg, var(--material-thick), var(--material-regular));      /* segmented-control lens */
  --grad-veil: radial-gradient(60% 70% at 50% 50%, color-mix(in srgb, var(--surface-grouped) 70%, transparent), transparent);
  --grad-fade-x: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);      /* mask: fade both ends */
  --grad-night:                                                                              /* the front-desk band */
    radial-gradient(90% 60% at 50% 0%, color-mix(in srgb, var(--blue-700) 55%, transparent), transparent 70%),
    radial-gradient(60% 50% at 85% 100%, color-mix(in srgb, var(--blue-900) 60%, transparent), transparent 70%),
    linear-gradient(180deg, #0B1530 0%, var(--night) 55%, #000 100%);
}
/* Gradients built from values that are overridden further down the page
   (--w1/--w2 per industry and per title panel, --edge in the dark band, --mx/--my
   under the pointer). A var() inside a :root custom property is resolved at the
   root and inherited frozen, so these are declared on every element instead and
   each one resolves its own colours. Still the one place they are defined. */
*, ::before, ::after {
  --grad-accent: linear-gradient(135deg, var(--w1), var(--w2));                              /* avatar, chip dot */
  --grad-accent-text: linear-gradient(100deg, var(--w1), var(--w2));                         /* gradient text */
  --grad-lens-fill: linear-gradient(90deg, color-mix(in srgb, var(--w1) 16%, transparent), color-mix(in srgb, var(--w2) 30%, transparent));
  --grad-sheen: linear-gradient(180deg, var(--edge), transparent);                           /* light on a glass bead */
  --grad-specular: radial-gradient(420px circle at var(--mx, 30%) var(--my, -10%), rgba(255,255,255,.45), transparent 45%);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000; --bg-elevated: #1c1c1e; --surface-grouped: #1c1c1e;
    --separator: rgba(84,84,88,0.65); --text: #f5f5f7;
    --text-secondary: rgba(235,235,245,0.7); --text-tertiary: rgba(235,235,245,0.45);
    --material-thin: rgba(30,30,32,0.55); --material-regular: rgba(30,30,32,0.72); --material-thick: rgba(30,30,32,0.9);
    --edge: rgba(255,255,255,0.28); --edge-low: rgba(255,255,255,0.06);
    --bubble-in: rgba(58,58,60,0.9);
    --ink-bg: #0b0b0c;
  }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 8px); }
body {
  margin: 0;
  background: var(--bg); color: var(--text);
  font: 400 17px/1.47 var(--textface); letter-spacing: -0.022em;
  -webkit-font-smoothing: antialiased; font-optical-sizing: auto;
  transition: background-color .4s var(--ease), color .4s var(--ease);
  overflow-x: hidden;
}
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 4px solid color-mix(in srgb, var(--blue) 35%, transparent); outline-offset: 2px; border-radius: 12px; }
.wrap { width: 100%; max-width: 85%; margin-inline: auto; padding-inline: 20px; }
h1, h2, h3 { font-family: var(--display); margin: 0; text-wrap: balance; }
p { margin: 0; }

/* ---------- Liquid glass ---------- */
.glass {
  position: relative; isolation: isolate;
  background: var(--material-thin);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  box-shadow: inset 0 1px 0 var(--edge), inset 0 -1px 0 var(--edge-low), inset 0 0 0 0.5px var(--edge-low);
}
/* Specular highlight that follows the pointer (--mx/--my set in JS). */
.glass.lit::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: var(--grad-specular);
  mix-blend-mode: soft-light; opacity: .9;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 10px 20px; border-radius: 12px; border: 1px solid transparent;
  font: 600 17px/1.2 var(--textface); cursor: pointer; text-decoration: none !important;
  transition: transform .2s var(--ease), background-color .2s var(--ease);
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: color-mix(in srgb, var(--blue) 88%, #000); }
.btn-bordered { border-color: var(--blue); color: var(--blue); background: transparent; }
.btn-sm { min-height: 28px; padding: 4px 12px; font-size: 13px; border-radius: 12px; }
.more::after { content: " ›"; }

/* ---------- Nav ----------
   A floating glass bar, inset from the edges, that firms up once you scroll. */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; padding-top: calc(10px + env(safe-area-inset-top, 0px)); pointer-events: none; }
.nav-bar {
  display: flex; align-items: center; gap: 8px; height: 56px; padding-inline: 18px 8px;
  max-width: 1040px; width: calc(100% - 24px); margin-inline: auto; border-radius: 18px; pointer-events: auto;
  background: var(--material-thin);
  box-shadow: inset 0 1px 0 var(--edge), inset 0 0 0 .5px var(--edge-low), 0 0 0 .5px var(--separator), 0 10px 30px -14px rgba(0,0,0,.25);
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.nav.scrolled .nav-bar { background: var(--material-regular); box-shadow: inset 0 1px 0 var(--edge), inset 0 0 0 .5px var(--edge-low), 0 0 0 .5px var(--separator), 0 14px 40px -12px rgba(0,0,0,.3); }
.logo { display: inline-flex; align-items: center; margin-inline-end: auto; }
.brand-logo { display: block; height: 24px; width: auto; }
/* The logo is drawn black-on-white; invert it for dark, keeping the blue blue. */
@media (prefers-color-scheme: dark) { .brand-logo { filter: invert(1) hue-rotate(180deg); } }
.nav-links { display: flex; gap: 2px; }
.nav-links a {
  padding: 7px 12px; border-radius: 10px; color: var(--text-secondary); font: 500 14px var(--textface);
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.nav-links a:hover { color: var(--text); background: color-mix(in srgb, var(--text) 7%, transparent); text-decoration: none; }
.nav-links a[aria-current="page"] { color: var(--blue); font-weight: 600; background: color-mix(in srgb, var(--blue) 12%, transparent); }
.nav-bar .btn-sm { min-height: 38px; padding-inline: 16px; margin-inline-start: 8px; border-radius: 11px; font-size: 14px; }
.menu-btn { display: none; flex: none; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 11px; background: none; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 6px; }
.menu-btn:hover { background: color-mix(in srgb, var(--text) 7%, transparent); }
.menu-btn span { display: block; width: 18px; height: 1.5px; border-radius: 1px; background: var(--text); transition: transform .3s var(--ease); }
.nav.open .menu-btn span:first-child { transform: translateY(3.75px) rotate(45deg); }
.nav.open .menu-btn span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
@media (max-width: 760px) {
  .nav-bar { padding-inline: 16px 6px; gap: 4px; }
  .nav-links { display: none; }
  .menu-btn { display: inline-flex; }
  .nav.open .nav-links {
    display: flex; flex-direction: column; position: absolute; top: calc(100% + 8px); left: 0; right: 0;
    padding: 8px; border-radius: 18px; background: var(--material-thick);
    box-shadow: inset 0 1px 0 var(--edge), 0 0 0 .5px var(--separator), 0 20px 40px -16px rgba(0,0,0,.35);
  }
  .nav.open .nav-links a { padding: 12px 14px; font-size: 17px; }
}

/* ---------- Hero ---------- */
.hero { padding-top: calc(var(--nav-h) + 64px + env(safe-area-inset-top, 0px)); text-align: center; }
.eyebrow { font: 600 17px var(--textface); color: var(--text-secondary); }
.hero h1 { font-size: clamp(44px, 8vw, 80px); line-height: 1.05; letter-spacing: -0.015em; font-weight: 700; margin-top: 8px; }
.verb {
  display: inline-block; padding-bottom: .08em;
  background: var(--grad-accent-text); -webkit-background-clip: text; background-clip: text; color: transparent;
  transition: opacity .26s var(--ease), transform .26s var(--ease), filter .26s var(--ease), --w1 1.2s var(--ease), --w2 1.2s var(--ease);
}
.verb.out { opacity: 0; transform: translateY(-.25em) scale(.96); filter: blur(8px); }
.verb.pre { opacity: 0; transform: translateY(.3em) scale(.96); filter: blur(8px); transition: none; }
.lede { max-width: 34em; margin: 20px auto 0; font-size: clamp(19px, 2.2vw, 22px); line-height: 1.4; color: var(--text-secondary); }
.ctas { display: flex; flex-wrap: wrap; gap: 16px 28px; justify-content: center; align-items: center; margin-top: 32px; }
.ctas a:not(.btn) { font-size: 17px; }

/* The wallpaper the glass floats over. */
.stage {
  position: relative; margin-top: 56px; padding: 44px 20px 56px;
  display: grid; justify-items: center; gap: 32px; overflow: hidden;
  border-radius: 16px; max-width: 1040px; margin-inline: auto;
  background: var(--surface-grouped);
  transition: --w1 1.2s var(--ease), --w2 1.2s var(--ease);
}
.wall { position: absolute; inset: -20%; z-index: 0; pointer-events: none; filter: blur(60px) saturate(140%); opacity: .85; transition: --w1 1.2s var(--ease), --w2 1.2s var(--ease); }
.wall span { position: absolute; border-radius: 50%; }
.wall span:nth-child(1) { width: 55%; height: 60%; left: 8%; top: 12%; background: var(--w1); animation: drift1 18s ease-in-out infinite alternate; }
.wall span:nth-child(2) { width: 50%; height: 55%; right: 6%; top: 30%; background: var(--w2); animation: drift2 22s ease-in-out infinite alternate; }
.wall span:nth-child(3) { width: 40%; height: 40%; left: 35%; bottom: 8%; background: color-mix(in srgb, var(--w1) 50%, #fff); animation: drift1 26s ease-in-out infinite alternate-reverse; }
@keyframes drift1 { to { transform: translate(12%, 10%) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-14%, -8%) scale(.9); } }
.stage > :not(.wall) { position: relative; z-index: 1; }

/* Segmented control with a liquid-glass lens.
   The lens stretches toward where it is going and settles (JS, Web Animations),
   and its tinted fill IS the autoplay timer: when `fill` ends, the reel advances. */
.seg {
  display: flex; gap: 2px; padding: 5px; border-radius: 18px; max-width: 100%;
  overflow-x: auto; scrollbar-width: none; background: var(--material-thin);
}
.seg::-webkit-scrollbar { display: none; }
.lens {
  position: absolute; top: 5px; bottom: 5px; left: 0; width: 0; z-index: 0;
  border-radius: 13px; overflow: hidden; pointer-events: none;
  background: var(--grad-lens);
  box-shadow:
    inset 0 1px 0 var(--edge),                 /* top rim catching light */
    inset 0 -1px 1px var(--edge-low),          /* soft lower rim */
    inset 0 0 0 .5px var(--edge-low),
    0 2px 10px -2px rgba(0,0,0,.14);           /* lift off the bar */
}
/* Curved sheen across the upper half, like light on a glass bead. */
.lens::after {
  content: ""; position: absolute; inset: 0 0 50% 0; border-radius: inherit;
  background: var(--grad-sheen);
  opacity: .6;
}
.lens .fill {
  position: absolute; inset: 0; transform-origin: left; transform: scaleX(0);
  background: var(--grad-lens-fill);
}
.autoplay .lens .fill.run { animation: fill var(--dwell, 7500ms) linear forwards; }
.paused .lens .fill { animation-play-state: paused !important; }
@keyframes fill { to { transform: scaleX(1); } }
.tab {
  position: relative; z-index: 1; flex: none; min-height: 36px; padding: 6px 16px; border: 0; border-radius: 13px;
  background: none; color: var(--text); font: 500 15px var(--textface); letter-spacing: -0.01em; cursor: pointer; white-space: nowrap;
  opacity: .6; transition: opacity .3s var(--ease), transform .45s var(--spring);
}
.tab:hover { opacity: .85; }
/* The lens magnifies what sits under it, a touch. */
.tab[aria-selected="true"] { opacity: 1; transform: scale(1.04); }

/* Device */
.device {
  width: min(100%, 380px); border-radius: 44px; padding: 14px; text-align: start;
  background: var(--material-thin);
}
.device.cut { animation: ripple .6s var(--ease); }
@keyframes ripple { 30% { scale: .985; filter: saturate(1.4) brightness(1.04); } }
.dev-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px 12px; border-bottom: .5px solid var(--separator); }
.avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 600 15px var(--display); background: var(--grad-accent); }
.dev-head b { display: block; font: 600 15px var(--textface); }
.wa {
  display: inline-flex; align-items: center; gap: 5px; margin-inline-start: auto; padding: 4px 10px 4px 7px; border-radius: 999px;
  font: 600 12px var(--textface); color: var(--text); background: var(--material-regular);
  box-shadow: inset 0 1px 0 var(--edge), 0 0 0 .5px var(--separator);
}
.wa svg { width: 15px; height: 15px; color: var(--blue); }
.dev-head small { display: block; font-size: 12px; color: var(--text-secondary); transition: opacity .26s var(--ease); }
.scene { min-height: 432px; padding: 14px 4px 6px; transition: opacity .26s var(--ease), filter .26s var(--ease); }
.scene.out { opacity: 0; filter: blur(6px); }
.chat { display: flex; flex-direction: column; gap: 6px; }
.msg {
  max-width: 82%; padding: 8px 13px; border-radius: 18px; font-size: 15px; line-height: 1.35; letter-spacing: -0.01em;
  animation: pop .45s var(--spring) both;
}
.msg.c { align-self: flex-end; background: var(--blue); color: #fff; border-bottom-right-radius: 6px; }
.msg.k { align-self: flex-start; background: var(--bubble-in); color: var(--text); border-bottom-left-radius: 6px; }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.94); } }
.options { display: grid; gap: 1px; margin: 8px -13px -8px; border-top: .5px solid var(--separator); }
.options span { padding: 8px 13px; color: var(--blue); font-size: 14px; }
.options span + span { border-top: .5px solid var(--separator); }
.pay { display: block; margin: 8px -5px -2px; padding: 8px; border-radius: 12px; text-align: center; background: var(--blue); color: #fff; font-weight: 600; font-size: 14px; }
.caption { font-size: 12px; color: var(--text-secondary); }

/* ---------- Ticker ---------- */
.ticker { overflow: hidden; padding-block: 44px; mask-image: var(--grad-fade-x); }
.ticker-track { display: flex; width: max-content; animation: marquee 50s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker ul { display: flex; gap: 44px; margin: 0; padding: 0 22px; list-style: none; }
.ticker li { font: 600 28px var(--display); color: var(--text-tertiary); white-space: nowrap; letter-spacing: -0.01em; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Sections ---------- */
.band { padding-block: 80px; }
.grouped { background: var(--surface-grouped); }
.head { text-align: center; max-width: 40em; margin: 0 auto 56px; }
.head h2 { font-size: clamp(34px, 5.5vw, 56px); line-height: 1.07; font-weight: 700; letter-spacing: -0.012em; }
.head p { margin-top: 16px; font-size: clamp(17px, 2vw, 22px); line-height: 1.4; color: var(--text-secondary); }

.industries { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 20px; }
.ind {
  display: flex; flex-direction: column; gap: 16px; padding: 28px 28px 24px; border-radius: 14px; background: var(--bg-elevated);
  transition: transform .45s var(--spring), background-color .4s var(--ease);
}
.ind:hover { transform: scale(1.02); }
.swatch {
  position: relative; display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 16px; overflow: hidden;
  color: #fff; background: var(--grad-tile);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 6px rgba(0,0,0,.14), 0 10px 22px -10px var(--blue-700);
}
.swatch::before { /* gloss across the top, like light on glass */
  content: ""; position: absolute; inset: 0 0 45%; border-radius: inherit;
  background: var(--grad-gloss);
}
.swatch svg { position: relative; width: 30px; height: 30px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.18)); transition: transform .45s var(--spring); }
.ind:hover .swatch svg { transform: scale(1.1) rotate(-6deg); }
.ind h3 { font-size: 28px; line-height: 1.14; font-weight: 700; letter-spacing: -0.005em; }
.ind ul { list-style: none; margin: 0; padding: 0; flex: 1; }
.ind li { padding-block: 11px; font-size: 15px; line-height: 1.35; color: var(--text-secondary); border-top: .5px solid var(--separator); }
.see { align-self: flex-start; border: 0; background: none; padding: 0; min-height: 28px; font: 400 17px var(--textface); color: var(--blue); cursor: pointer; }
.see:hover { text-decoration: underline; }

/* The one dark band, with a wallpaper glow behind glass cards. */
.dark {
  position: relative; overflow: hidden; color: var(--ink-text);
  background: var(--grad-night);
}
.dark .head p { color: var(--ink-secondary); }
.dark .wall { opacity: .35; inset: 10% -10% auto; height: 80%; --w1: var(--blue); --w2: var(--blue-800); }
.dark .wrap { position: relative; z-index: 1; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; }
.card { display: flex; flex-direction: column; gap: 12px; padding: 28px; border-radius: 14px; }
.dark .card { background: var(--ink-material); --edge: rgba(255,255,255,.22); --edge-low: rgba(255,255,255,.06); }
.card h3 { font-size: 22px; line-height: 1.2; font-weight: 600; }
.card p { font-size: 15px; }
.dark .card p { color: var(--ink-secondary); }
.dark .card .for { font: 12px var(--mono); color: rgba(235,235,245,.45); letter-spacing: 0; margin-top: auto; }
.for b { font-weight: 400; color: var(--ink-text); }
.still { min-height: 150px; display: grid; align-content: center; border-radius: 12px; padding: 16px; background: rgba(255,255,255,.06); transition: opacity .26s var(--ease), transform .26s var(--ease); }
.still.out { opacity: 0; transform: scale(.97); }
.say { font: 600 22px/1.3 var(--display); color: var(--ink-text); letter-spacing: -0.01em; }
.say u { text-decoration: none; background: var(--grad-accent-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.url { font: 13px var(--mono); color: var(--ink-secondary); letter-spacing: 0; }
.url b { display: block; margin-top: 6px; font: 600 22px var(--display); color: var(--ink-text); letter-spacing: -0.01em; word-break: break-all; }
.diary { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: center; font-size: 13px; }
.diary > span { font: 12px var(--mono); color: rgba(235,235,245,.45); letter-spacing: 0; }
.blk { display: block; padding: 7px 10px; border-radius: 8px; font-size: 13px; }
.blk.a { background: color-mix(in srgb, var(--w1) 55%, transparent); color: #fff; }
.blk.c { background: color-mix(in srgb, var(--w2) 45%, transparent); color: #fff; }
.blk.b { border: 1px dashed rgba(235,235,245,.3); color: rgba(235,235,245,.45); }

/* Pricing */
.plan { background: var(--bg-elevated); }
.plan .tag { align-self: flex-start; padding: 3px 10px; border-radius: 12px; font: 600 12px var(--textface); background: color-mix(in srgb, var(--blue) 14%, transparent); color: var(--blue); }
.plan .tagline { color: var(--text-secondary); }
.price { font: 700 44px/1.1 var(--display); letter-spacing: -0.01em; }
.price small { margin-inline-start: 6px; font: 400 17px var(--textface); color: var(--text-secondary); }
.price .was { display: block; font: 400 15px var(--textface); color: var(--text-tertiary); text-decoration: line-through; }
.plan ul { list-style: none; margin: 0; padding: 0; flex: 1; }
.plan li { padding-block: 10px; font-size: 15px; border-top: .5px solid var(--separator); }
.plan .btn { margin-top: 8px; }
.fine { margin-top: 24px; text-align: center; font-size: 13px; color: var(--text-secondary); }

/* CTA */
.cta { text-align: center; }
.cta .panel { position: relative; overflow: hidden; border-radius: 16px; padding: 80px 24px; background: var(--surface-grouped); }
.cta .panel .wall { opacity: .6; }
.cta .inner { position: relative; z-index: 1; max-width: 40em; margin: 0 auto; }
.cta h2 { font-size: clamp(34px, 5.5vw, 56px); line-height: 1.07; font-weight: 700; margin-top: 8px; }
.cta p:not(.eyebrow) { margin-top: 16px; font-size: 22px; color: var(--text-secondary); }

/* ---------- Inner pages ---------- */
.page-hero { padding: calc(var(--nav-h) + 16px + env(safe-area-inset-top, 0px)) 0 24px; }
.page-title {
  position: relative; overflow: hidden; isolation: isolate; border-radius: 28px;
  padding: clamp(56px, 9vw, 96px) 24px clamp(48px, 7vw, 80px); text-align: center;
  background: var(--surface-grouped);
}
.page-title .wall { opacity: .4; z-index: -1; }
.page-title::after { /* keep the colour from reaching the text: a soft veil in the middle */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--grad-veil);
}
.page-title h1 { max-width: 16em; margin: 16px auto 0; font-size: clamp(40px, 7vw, 68px); line-height: 1.05; font-weight: 700; letter-spacing: -0.02em; }
.page-title .lede { margin-top: 18px; }
.page-title .meta { margin-top: 16px; font-size: 15px; color: var(--text-secondary); }
.chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; border-radius: 999px;
  font: 600 13px var(--textface); color: var(--text); background: var(--material-regular);
  box-shadow: inset 0 1px 0 var(--edge), 0 0 0 .5px var(--separator);
}
.chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--grad-accent); }
.doc-tabs { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: 28px; padding: 4px; border-radius: 14px; background: var(--material-thin); box-shadow: inset 0 0 0 .5px var(--separator); }
.doc-tabs a { padding: 7px 14px; border-radius: 10px; font: 500 14px var(--textface); color: var(--text-secondary); }
.doc-tabs a:hover { color: var(--text); text-decoration: none; }
.doc-tabs a[aria-current="page"] { color: var(--text); background: var(--bg); box-shadow: 0 1px 4px rgba(0,0,0,.1); }
.band.tight { padding-top: 40px; }
.prose { max-width: 720px; }
.prose h2 { font-size: 24px; line-height: 1.25; font-weight: 600; margin: 40px 0 12px; }
.prose > h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--text-secondary); }
.prose p + p { margin-top: 12px; }
.prose ul { margin: 12px 0; padding-inline-start: 1.2em; }
.prose li + li { margin-top: 8px; }
.prose strong { color: var(--text); font-weight: 600; }
.grouped .card { background: var(--bg); }
.cols.two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.card .btn { align-self: flex-start; margin-top: auto; }
.fine.left { margin-top: 0; text-align: start; }
.included { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 28px 20px; }
.included li { padding-top: 16px; border-top: .5px solid var(--separator); color: var(--text-secondary); font-size: 15px; }
.included b { display: block; margin-bottom: 4px; font: 600 19px var(--display); color: var(--text); }
.faq { max-width: 720px; margin-inline: auto; }
.faq details { border-top: .5px solid var(--separator); }
.faq details:last-child { border-bottom: .5px solid var(--separator); }
.faq summary { display: flex; justify-content: space-between; gap: 16px; padding-block: 20px; cursor: pointer; list-style: none; font: 600 19px/1.3 var(--display); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--blue); font-weight: 400; transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 20px; color: var(--text-secondary); }
.see-all { margin-top: 8px; text-align: center; font-size: 17px; }

/* Footer */
footer { padding-block: 20px 32px; background: var(--surface-grouped); font-size: 12px; color: var(--text-secondary); letter-spacing: -0.01em; }
footer .note { padding-block: 16px; border-bottom: .5px solid var(--separator); }
.foot { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 20px; padding-block: 24px 20px; border-bottom: .5px solid var(--separator); }
.foot h4 { margin: 0 0 8px; font: 600 12px var(--textface); color: var(--text); }
.foot a { display: block; color: var(--text-secondary); line-height: 2.1; }
.foot a:hover { color: var(--text); }
.foot-brand .brand-logo { height: 24px; margin-bottom: 10px; }
.foot-brand p { max-width: 22em; line-height: 1.5; }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding-top: 16px; }

/* Scroll reveal: Apple's fade-up. Only applied (in JS) to elements below the fold. */
.will-reveal { opacity: 0; transform: translateY(32px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.will-reveal.shown { opacity: 1; transform: none; }
.ind.will-reveal.shown { transition: opacity .8s var(--ease), transform .45s var(--spring); }

@media (max-width: 560px) {
  .hero { padding-top: calc(var(--nav-h) + 40px + env(safe-area-inset-top, 0px)); }
  .page-hero .wrap { padding-inline: 12px; }
  .page-title { border-radius: 22px; padding-inline: 18px; }
  .band { padding-block: 56px; }
  .stage { padding-inline: 12px; margin-inline: -8px; }
  .ind, .card { padding: 24px 20px; }
  .ticker li { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}