/* ==========================================================================
   Whispyr website design system
   --------------------------------------------------------------------------
   Mirrors the iOS app (Round 367, iOS 26 Liquid Glass):
   - Glass only on the functional layer (header capsule, buttons, menu sheet).
     Content (sections, lists, cards, FAQ, tables, footer) is flat.
   - Backdrop = the app's tab-root backdrop (WhispyrApp.swift Theme.opaqueBackground):
     #000 → #0A0D1F → #050514 at 135deg, cyan glow top-right, purple bottom-left.
   - Accent = iOS 26 system cyan (dark) #3CD3FE, the app's tint.
   - Headings = SF Pro Rounded (the app uses .rounded everywhere); body = SF Pro.
   - No web fonts, no third-party requests.
   Recipes and contrast math: research/liquid-glass-web.md.

   COMPONENT INDEX
   Base ............ .skip-link .visually-hidden .ambient
   Layout .......... .wrap .wrap--narrow .section .section--tight .section--flush .section-head .stack .grid-2
   Type ............ .display .h2 .h3 .lead .kicker .t2 .t3 .small .center
   Glass ........... .lg-glass .lg-glass--thick .lg-glass--tinted .lg-interactive
   Buttons ......... .btn .btn--sm .btn-row .link-arrow
   Header .......... .site-header .nav .nav__brand .nav__links .nav__cta .nav__menu .nav__sheet
   Hero ............ .hero .hero__grid .hero__title .hero__lead .hero__meta .hero__media .hero--center
   Devices ......... .device .device--iphone .device--ipad .device--mac .device-row
                     .device--live .device__screen .device__video .device__frame .device__toggle
   Editorial ....... .feature .feature--flip .feature__media .feature__body
   Lists ........... .hairlines (li) .spec (dl) .spec-more .check-list
   Press ........... .press-strip .press-logos .press-featured .press-card .press-list .press-row .press-note
   FAQ ............. .faq .faq__intro .faq__group details.faq__item
   CTA ............. .cta-band
   Documents ....... .doc-hero .doc-meta .doc .doc__toc .doc__section .note .table-wrap .table
   Footer .......... .site-footer .footer__grid .footer__brand .footer__legal
   ========================================================================== */

:root{
  color-scheme: dark;

  --bg:        #07080C;
  --canvas-a:  #000000;
  --canvas-b:  #0A0D1F;
  --canvas-c:  #050514;

  --cyan:      #3CD3FE;   /* SwiftUI .cyan, dark appearance — the app tint */
  --cyan-soft: #6DD9FF;
  --ink:       #03131B;   /* label on cyan, 10.7:1 */
  --green:     #30D158;

  --t1: rgb(255 255 255 / .96);
  --t2: rgb(255 255 255 / .78);
  --t3: rgb(255 255 255 / .60);   /* floor for text: ≥5.2:1 on the canvas */

  --fill-1: rgb(255 255 255 / .04);   /* content surfaces ("standard material") */
  --fill-2: rgb(255 255 255 / .065);
  --line:   rgb(255 255 255 / .09);
  --line-2: rgb(255 255 255 / .14);

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-round: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --r-capsule: 999px;
  --r-card: 24px;
  --r-row: 20px;
  --r-sheet: 28px;
  --hit: 44px;

  --wrap: 1160px;
  --wrap-narrow: 760px;
  --gutter: clamp(20px, 5vw, 40px);

  --ease: cubic-bezier(.2,.8,.2,1);
  --spring: cubic-bezier(.34,1.56,.64,1);
}

/* ---------- Base ---------- */
*,*::before,*::after{ box-sizing: border-box; }
html{
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 76px;
}
body{
  margin: 0;
  min-height: 100vh;
  color: var(--t1);
  font: 400 17px/1.6 var(--font);
  letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg{ display: block; max-width: 100%; }
img{ height: auto; }
a{ color: var(--cyan); text-decoration: none; }
a:hover{ text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
:focus-visible{ outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }
::selection{ background: rgb(60 211 254 / .30); color: #fff; }
h1,h2,h3,h4{ margin: 0; font-family: var(--font-round); font-weight: 700; color: var(--t1); }
p{ margin: 0; }
ul,ol{ margin: 0; padding: 0; }
strong{ font-weight: 600; color: var(--t1); }
/* No one-word last lines in headings; tidy rag in running text */
h1, h2, h3, .display, .h2, .h3, .press-card__title{ text-wrap: balance; }
p, li, dd, .lead{ text-wrap: pretty; }
.visually-hidden{
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link{
  position: absolute; left: 16px; top: -100px; z-index: 100;
  padding: 10px 16px; border-radius: var(--r-capsule);
  background: var(--cyan); color: var(--ink); font-weight: 600;
}
.skip-link:focus{ top: 16px; text-decoration: none; }

/* ---------- Ambient canvas (static, never animated) ---------- */
.ambient{
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle 520px at 100% 0%, rgb(60 211 254 / .16), rgb(60 211 254 / 0) 70%),
    radial-gradient(circle 520px at 0% 100%, rgb(219 52 242 / .10), rgb(219 52 242 / 0) 70%),
    linear-gradient(135deg, var(--canvas-a) 0%, var(--canvas-b) 55%, var(--canvas-c) 100%);
}
.ambient::after{
  content: ""; position: absolute; inset: 0; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Layout ---------- */
.wrap{ width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.wrap--narrow{ width: min(var(--wrap-narrow), 100% - 2 * var(--gutter)); margin-inline: auto; }
.section{ padding-block: clamp(88px, 11vw, 150px); }
.section--tight{ padding-block: clamp(56px, 7vw, 96px); }
.section + .section{ border-top: 1px solid var(--line); }
.section--flush + .section, .section + .section--flush{ border-top: 0; }
.stack > * + *{ margin-top: var(--stack, 16px); }
.grid-2{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); }

/* ---------- Type ---------- */
.display{
  font-size: clamp(40px, 5vw, 60px);
  line-height: 1.04;
  letter-spacing: -.034em;
}
.h2{
  font-size: clamp(32px, 3.8vw, 48px);
  line-height: 1.08;
  letter-spacing: -.03em;
}
.h3{
  font-size: clamp(22px, 2vw, 26px);
  line-height: 1.2;
  letter-spacing: -.02em;
}
.lead{
  font-size: clamp(19px, 1.7vw, 23px);
  line-height: 1.45;
  letter-spacing: -.017em;
  color: var(--t2);
}
.kicker{
  font: 600 17px/1.3 var(--font);
  letter-spacing: -.01em;
  color: var(--cyan);
}
.t2{ color: var(--t2); }
.t3{ color: var(--t3); }
.small{ font-size: 14px; line-height: 1.5; }
.center{ text-align: center; }
.section-head{ max-width: 780px; margin-bottom: clamp(40px, 5vw, 64px); }
.section-head.center{ margin-inline: auto; }
.section-head :is(.h2, .h3, .display) + .lead{ margin-top: 20px; }
.kicker + :is(.h2, .h3, .display, .hero__title){ margin-top: 12px; }

/* ==========================================================================
   Liquid Glass — functional layer only
   WebKit ignores var() inside -webkit-backdrop-filter (bug 289800):
   every filter value below is literal, prefixed line first.
   ========================================================================== */
.lg-glass{
  position: relative;
  isolation: isolate;
  color: var(--t1);
  background-color: rgb(18 20 28 / .64);
  background-image: linear-gradient(180deg, rgb(255 255 255 / .07), rgb(255 255 255 / 0) 55%);
  -webkit-backdrop-filter: blur(16px) saturate(180%) brightness(.85);
          backdrop-filter: blur(16px) saturate(180%) brightness(.85);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .14),
    inset 0 -1px 0 rgb(255 255 255 / .04),
    0 1px 2px rgb(0 0 0 / .30),
    0 10px 30px rgb(0 0 0 / .32);
}
/* 1px specular rim (mask-composite ring) */
.lg-glass::before{
  content: ""; position: absolute; inset: 0; z-index: -1; padding: 1px;
  border-radius: inherit; pointer-events: none;
  background: linear-gradient(135deg,
    rgb(255 255 255 / .40) 0%, rgb(255 255 255 / .10) 30%,
    rgb(255 255 255 / .04) 60%, rgb(255 255 255 / .18) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
}
/* pointer light, hidden at rest (site.js sets --lg-x / --lg-y) */
.lg-glass::after{
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; pointer-events: none;
  background: radial-gradient(140px circle at var(--lg-x, 50%) var(--lg-y, 50%), rgb(255 255 255 / .10), rgb(255 255 255 / 0) 70%);
  opacity: 0; transition: opacity 240ms var(--ease);
}
.lg-glass--thick{
  background-color: rgb(18 20 28 / .76);
  background-image: linear-gradient(180deg, rgb(255 255 255 / .05), rgb(255 255 255 / 0) 40%);
  -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(.8);
          backdrop-filter: blur(20px) saturate(180%) brightness(.8);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .12),
    0 2px 6px rgb(0 0 0 / .30),
    0 24px 60px rgb(0 0 0 / .50);
}
/* The one tinted control per view: cyan like the app's send button, dark ink label */
.lg-glass--tinted{
  color: var(--ink);
  background-color: rgb(60 211 254 / .88);
  background-image: linear-gradient(180deg, rgb(255 255 255 / .22), rgb(255 255 255 / 0) 55%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
          backdrop-filter: blur(12px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .45),
    inset 0 -1px 0 rgb(0 0 0 / .10),
    0 1px 2px rgb(0 0 0 / .30),
    0 8px 24px rgb(60 211 254 / .20);
}
.lg-glass--tinted::before{
  background: linear-gradient(135deg, rgb(255 255 255 / .55), rgb(255 255 255 / .10) 40%, rgb(255 255 255 / .05) 60%, rgb(255 255 255 / .25));
}
.lg-interactive{
  cursor: pointer;
  transition: transform 420ms var(--spring), background-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.lg-interactive:hover{ text-decoration: none; }
.lg-interactive:hover::after{ opacity: 1; }
.lg-interactive:active{ transform: scale(.97); transition-duration: 120ms; }
.lg-glass--tinted.lg-interactive:hover{ background-color: rgb(60 211 254 / .96); }

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px;
  border-radius: var(--r-capsule);
  font: 600 17px/1 var(--font); letter-spacing: -.012em;
  white-space: nowrap;
}
.btn svg{ width: 18px; height: 18px; flex: none; }
.btn--sm{ min-height: 40px; padding: 0 18px; font-size: 15px; }
.btn-row{ display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn-row.center{ justify-content: center; }
.link-arrow{ display: inline-block; padding-block: 11px; font-weight: 600; }
.link-arrow::after{ content: " \203A"; font-weight: 400; }

/* ==========================================================================
   Header — Apple's pattern: one slim, full-width translucent bar, flush to the top.
   Brand left (small icon + name), plain text links, one small tinted pill.
   Phones: links move into a full-screen menu behind a plain two-line button.
   ========================================================================== */
.scroll-edge{ display: none; }
.site-header{
  position: fixed; z-index: 50; inset: 0 0 auto 0;
  height: 52px;
  padding-top: env(safe-area-inset-top, 0px);
  box-sizing: content-box;
  background-color: rgb(8 9 14 / .72);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
          backdrop-filter: blur(20px) saturate(180%);
  box-shadow: inset 0 -1px 0 rgb(255 255 255 / 0);
  transition: box-shadow 260ms var(--ease), background-color 260ms var(--ease);
}
.is-scrolled .site-header{ background-color: rgb(8 9 14 / .8); box-shadow: inset 0 -1px 0 rgb(255 255 255 / .09); }
.nav{
  width: min(var(--wrap), 100% - 2 * var(--gutter)); height: 52px; margin-inline: auto;
  display: flex; align-items: center; gap: 4px;
}
.nav__brand{
  display: inline-flex; align-items: center; gap: 9px;
  height: 44px; margin-right: auto;
  color: var(--t1); text-decoration: none;
  font: 600 19px/1 var(--font-round); letter-spacing: -.02em;
}
.nav__brand:hover{ text-decoration: none; }
.nav__brand img{
  width: 28px; height: 28px; border-radius: 22.5%;
  box-shadow: 0 0 0 .5px rgb(255 255 255 / .16);
}
.nav__links{ display: flex; align-items: center; gap: 4px; list-style: none; margin-right: 12px; }
.nav__links a{
  display: inline-flex; align-items: center; height: 44px; padding: 0 12px;
  color: var(--t2); font: 400 14px/1 var(--font); letter-spacing: -.01em;
  transition: color 180ms var(--ease);
}
.nav__links a:hover{ color: var(--t1); text-decoration: none; }
.nav__links a[aria-current="page"]{ color: var(--t1); }
.nav__cta{
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 30px; padding: 0 15px; border-radius: var(--r-capsule);
  background: var(--cyan); color: var(--ink);
  font: 600 14px/1 var(--font); letter-spacing: -.01em; white-space: nowrap;
  transition: background-color 180ms var(--ease), transform 300ms var(--spring);
}
.nav__cta:hover{ background: var(--cyan-soft); text-decoration: none; }
.nav__cta:active{ transform: scale(.96); }

/* Phone menu: JS-free <details>, opens a full-screen sheet below the bar */
.nav__menu{ display: none; }
.nav__menu > summary{
  list-style: none; cursor: pointer;
  width: 44px; height: 44px; margin-right: -10px;
  display: grid; place-items: center; color: var(--t1);
}
.nav__menu > summary::-webkit-details-marker{ display: none; }
.nav__menu > summary svg{ width: 18px; height: 18px; }
.nav__menu .icon-close{ display: none; }
.nav__menu[open] .icon-open{ display: none; }
.nav__menu[open] .icon-close{ display: block; }
/* The bar's backdrop-filter makes it the containing block, so the sheet is opaque
   (a blur nested inside a blur cannot see the page). */
.nav__sheet{
  position: absolute; left: 0; right: 0; top: 100%;
  height: calc(100vh - 52px - env(safe-area-inset-top, 0px));
  height: calc(100dvh - 52px - env(safe-area-inset-top, 0px));
  overflow-y: auto; overscroll-behavior: contain;
  padding: 18px var(--gutter) 40px;
  background: rgb(8 9 14);
  animation: sheet-in 240ms var(--ease);
}
@keyframes sheet-in{ from{ opacity: 0; transform: translateY(-6px); } to{ opacity: 1; transform: none; } }
.nav__sheet ul{ list-style: none; }
.nav__sheet li a{
  display: flex; align-items: center; min-height: 52px;
  color: var(--t1); font: 600 28px/1.15 var(--font-round); letter-spacing: -.025em;
}
.nav__sheet li a:hover{ text-decoration: none; color: #fff; }
.nav__sheet li a[aria-current="page"]{ color: var(--cyan); }
.nav__sheet .btn{ width: 100%; margin-top: 28px; }
/* one tinted control per view: the bar's pill steps back while the sheet is open */
.nav:has(.nav__menu[open]) .nav__cta{ visibility: hidden; }
.site-header:has(.nav__menu[open]){ background-color: rgb(8 9 14); box-shadow: none; }

@media (max-width: 720px){
  .site-header{ height: 48px; }
  .nav{ height: 48px; }
  .nav__sheet{ height: calc(100vh - 48px - env(safe-area-inset-top, 0px)); height: calc(100dvh - 48px - env(safe-area-inset-top, 0px)); }
  .nav__links{ display: none; }
  .nav__menu{ display: block; margin-left: 6px; }
  .nav__brand{ font-size: 18px; gap: 8px; }
  .nav__brand img{ width: 26px; height: 26px; }
  .nav__cta{ min-height: 28px; padding: 0 13px; font-size: 13px; }
}

/* ==========================================================================
   Hero — calm, product-first: text left, one real screenshot right
   ========================================================================== */
.hero{ padding: clamp(128px, 15vh, 168px) 0 clamp(40px, 5vw, 72px); }
.hero__grid{
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  align-items: center; gap: clamp(40px, 6vw, 96px);
}
.hero__title{
  font-size: clamp(40px, 4.6vw, 60px);
  line-height: 1.04;
  letter-spacing: -.034em;
}
.hero__title span{ display: block; color: var(--t3); }
.hero__lead{ max-width: 30ch; margin-top: 24px; }
.hero .btn-row{ margin-top: 36px; }
.hero__meta{ margin-top: 18px; color: var(--t3); font-size: 15px; }
.hero__media{ display: flex; justify-content: center; }
.hero__media .device--iphone{ width: clamp(280px, 26vw, 360px); }
.hero--center{ text-align: center; }
.hero--center .hero__title, .hero--center .hero__lead{ margin-inline: auto; }
.hero--center .btn-row{ justify-content: center; }
@media (max-width: 900px){
  .hero{ padding-top: clamp(104px, 13vh, 128px); }
  .hero__grid{ grid-template-columns: 1fr; text-align: center; }
  .hero__title{ font-size: clamp(40px, 8vw, 64px); }
  .hero__lead{ margin-inline: auto; }
  .hero .btn-row{ justify-content: center; margin-top: 28px; }
  .hero__media .device--iphone{ width: min(300px, 70vw); }
}

/* ==========================================================================
   Devices — real screenshots in Apple's official bezels.
   Rules: no overlap, no tilt, no added shadow/filter on the bezel image.
   ========================================================================== */
.device{ margin: 0; }
.device img{ width: 100%; height: auto; }
.device figcaption{ margin-top: 18px; text-align: center; color: var(--t3); font-size: 14px; }
.device--iphone{ width: clamp(220px, 26vw, 330px); flex: none; }

/* True relative scale, bottom-aligned, no overlap. Columns are the physical device widths:
   MacBook Pro 14" 312.6 mm, iPad Pro 13" landscape 281.6 mm, iPhone 17 Pro Max 78 mm.
   The bezel renders are cropped to the device edge, so image width ∝ device width. */
.device-row{
  display: grid; grid-template-columns: 312.6fr 281.6fr 78fr; align-items: end;
  gap: clamp(20px, 3vw, 40px);
  margin-top: clamp(48px, 6vw, 72px);
}
.device-row .device{ width: 100%; }
@media (max-width: 760px){
  .device-row{ grid-template-columns: 281.6fr 78fr; row-gap: 32px; }
  .device-row .device--mac{ grid-column: 1 / -1; width: 86%; justify-self: center; }
}

/* Live device: a real screen recording under Apple's bezel.
   The screen box is the bezel's exact opening (measured from the frame's alpha),
   masked to the display's rounded corners so nothing shows outside the device. */
.device--live{ position: relative; }
.device--live .device__frame{ position: relative; z-index: 1; width: 100%; height: auto; pointer-events: none; }
.device--live .device__screen{
  position: absolute; z-index: 0;
  left: 3.7815%; top: 1.5546%; width: 92.437%; height: 96.9246%;
  background: #05060a;
  -webkit-mask: url("/assets/shots/screen-mask-iphone.png?v=82029acdc7") center / 100% 100% no-repeat;
          mask: url("/assets/shots/screen-mask-iphone.png?v=82029acdc7") center / 100% 100% no-repeat;
}
.device__video{ display: block; width: 100%; height: 100%; object-fit: cover; }
.device__toggle{
  position: absolute; z-index: 2; right: -8px; bottom: 4%;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center;
  opacity: .72; transition: opacity 200ms var(--ease), transform 420ms var(--spring);
}
.device__toggle[hidden]{ display: none; }
.device__toggle:hover, .device__toggle:focus-visible{ opacity: 1; }
.device__toggle svg{ width: 16px; height: 16px; }
.device__toggle .icon-play{ display: none; }
.device__toggle[aria-pressed="true"] .icon-pause{ display: none; }
.device__toggle[aria-pressed="true"] .icon-play{ display: block; }
@media (max-width: 900px){ .device__toggle{ right: -16px; } }

/* ==========================================================================
   Editorial feature rows
   ========================================================================== */
.feature{
  display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  gap: clamp(40px, 7vw, 112px);
}
.feature + .feature{ margin-top: clamp(96px, 12vw, 168px); }
.feature--flip .feature__media{ order: 2; }
.feature__media{ display: flex; justify-content: center; }
.feature__media .device--iphone{ width: clamp(240px, 26vw, 340px); }
.feature__body .h2{ font-size: clamp(28px, 3vw, 40px); }
.feature__body .lead{ margin-top: 20px; }
.feature__body .hairlines{ margin-top: 32px; }

/* ---------- Lists ---------- */
.hairlines{ list-style: none; border-top: 1px solid var(--line); }
.hairlines > li{ padding: 18px 0; border-bottom: 1px solid var(--line); color: var(--t2); }
.hairlines > li strong{ display: block; margin-bottom: 4px; }
.spec{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 clamp(24px, 4vw, 56px); margin: 0; }
.spec > div{ padding: 28px 0 32px; border-top: 1px solid var(--line-2); }
.spec dt{ font: 700 21px/1.25 var(--font-round); letter-spacing: -.018em; color: var(--t1); }
.spec dd{ margin: 10px 0 0; color: var(--t2); font-size: 16px; line-height: 1.6; }
.spec-more{ margin-top: 36px; }
.check-list{ list-style: none; }
.check-list li{ position: relative; padding-left: 30px; color: var(--t2); }
.check-list li + li{ margin-top: 10px; }
.check-list li::before{
  content: ""; position: absolute; left: 2px; top: .45em; width: 14px; height: 8px;
  border-left: 2px solid var(--cyan); border-bottom: 2px solid var(--cyan); transform: rotate(-45deg);
}

/* ==========================================================================
   Press
   ========================================================================== */
.press-strip{ padding-block: clamp(8px, 2vw, 24px) clamp(24px, 4vw, 48px); }
.press-strip + .section{ padding-top: clamp(64px, 8vw, 104px); }
.section--tight + .section, .doc-hero + .section{ padding-top: clamp(64px, 8vw, 104px); }
.press-strip__lbl{ text-align: center; color: var(--t3); font-size: 14px; }
.press-logos{
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 14px 40px; margin: 16px 0 0; list-style: none;
}
.press-logos li{ color: var(--t2); font: 600 17px/1 var(--font); letter-spacing: -.01em; }
@media (max-width: 680px){ .press-logos{ gap: 12px 24px; } }
.press-featured{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.press-card{
  display: flex; flex-direction: column; min-height: 280px;
  padding: 32px; border-radius: var(--r-card);
  background: var(--fill-1); border: 1px solid var(--line);
  color: var(--t1);
  transition: background-color 200ms var(--ease), border-color 200ms var(--ease);
}
.press-card:hover{ background: var(--fill-2); border-color: var(--line-2); text-decoration: none; }
.press-card__outlet{ display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.press-card__outlet b{ font: 700 22px/1 var(--font); letter-spacing: -.02em; }
.press-card__date{ color: var(--t3); font-size: 14px; }
.press-card__title{ margin-top: auto; padding-top: 36px; font: 700 clamp(22px, 2.2vw, 28px)/1.22 var(--font-round); letter-spacing: -.02em; }
.press-card__by{ margin-top: 14px; color: var(--t3); font-size: 15px; }
.press-list{ list-style: none; margin-top: 20px; border-top: 1px solid var(--line); }
.press-row{
  display: grid; grid-template-columns: 180px 1fr auto; gap: 24px; align-items: baseline;
  padding: 22px 0; border-bottom: 1px solid var(--line); color: var(--t1);
}
.press-row:hover{ text-decoration: none; background: rgb(255 255 255 / .025); }
.press-row__outlet{ color: var(--t2); font-weight: 600; font-size: 15px; }
.press-row__title{ font-size: 18px; line-height: 1.4; letter-spacing: -.014em; }
.press-row__title small{ display: block; margin-top: 4px; color: var(--t3); font-size: 14px; }
.press-row__date{ color: var(--t3); font-size: 14px; white-space: nowrap; }
.press-note{ margin-top: 20px; color: var(--t3); font-size: 14px; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{ display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.faq__intro{ position: sticky; top: 112px; }
.faq__intro .lead{ margin-top: 20px; }
.faq__group{ margin: 40px 0 8px; color: var(--t3); font: 600 15px/1 var(--font); }
.faq__group:first-child{ margin-top: 0; }
.faq__item{ border-bottom: 1px solid var(--line); }
.faq__item:first-of-type{ border-top: 1px solid var(--line); }
.faq__item > summary{
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 22px 0; font: 600 19px/1.35 var(--font); letter-spacing: -.016em; color: var(--t1);
}
.faq__item > summary::-webkit-details-marker{ display: none; }
.faq__item > summary::after{
  content: ""; flex: none; width: 10px; height: 10px; margin-right: 6px;
  border-right: 2px solid var(--t2); border-bottom: 2px solid var(--t2);
  transform: translateY(-3px) rotate(45deg);
  transition: transform 300ms var(--ease);
}
.faq__item[open] > summary::after{ transform: translateY(2px) rotate(-135deg); }
.faq__item > summary:hover{ color: #fff; }
.faq__item > p, .faq__item > div{ padding: 0 40px 24px 0; color: var(--t2); }

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band{ text-align: center; }
.cta-band img{ width: 112px; height: 112px; margin: 0 auto 32px; border-radius: 22.5%; box-shadow: 0 0 0 .5px rgb(255 255 255 / .16), 0 16px 40px rgb(0 0 0 / .45); }
.cta-band .lead{ max-width: 40ch; margin: 20px auto 0; }
.cta-band .btn-row{ justify-content: center; margin-top: 36px; }

/* ==========================================================================
   Long-form documents (Security, Privacy, Terms)
   ========================================================================== */
.doc-hero{ padding: clamp(136px, 17vh, 176px) 0 clamp(40px, 5vw, 64px); }
.doc-hero .section-head{ margin-bottom: 0; }
.doc-hero .lead{ margin-top: 20px; }
.doc-hero .doc-meta{ margin-top: 20px; color: var(--t3); font-size: 15px; }
.doc{ display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; padding-bottom: clamp(88px, 10vw, 140px); }
.doc__toc{
  position: sticky; top: 104px; font-size: 14px;
  max-height: calc(100vh - 128px); overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / .18) transparent;
}
.doc__toc summary{ margin-bottom: 12px; color: var(--t3); font-weight: 600; list-style: none; }
.doc__toc summary::-webkit-details-marker{ display: none; }
.doc__toc ol{ list-style: none; border-left: 1px solid var(--line); }
.doc__toc a{ display: block; padding: 5px 0 5px 16px; margin-left: -1px; border-left: 1px solid transparent; color: var(--t2); line-height: 1.4; }
.doc__toc a:hover{ color: var(--t1); border-left-color: var(--cyan); text-decoration: none; }
.doc__body{ max-width: 720px; }
.doc__section{ padding-top: 8px; }
.doc__section + .doc__section{ margin-top: 56px; padding-top: 48px; border-top: 1px solid var(--line); }
.doc__section h2{ font-size: clamp(24px, 2.4vw, 30px); line-height: 1.2; letter-spacing: -.022em; margin-bottom: 18px; }
.doc__section h3{ font: 600 19px/1.35 var(--font); letter-spacing: -.014em; margin: 28px 0 10px; }
.doc__section p, .doc__section li{ color: var(--t2); }
.doc__section p + p{ margin-top: 14px; }
.doc__section ul, .doc__section ol{ padding-left: 22px; margin: 14px 0; }
.doc__section li + li{ margin-top: 8px; }
.doc__section a{ text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: rgb(60 211 254 / .45); }
.note{
  padding: 24px 28px; border-radius: var(--r-card);
  background: var(--fill-1); border: 1px solid var(--line-2);
}
.note h2, .note h3{ font: 700 19px/1.3 var(--font-round); margin: 0 0 10px; }
.note p, .note li{ color: var(--t2); }
.note ul{ padding-left: 20px; margin: 10px 0 0; }
.note--status{ margin-bottom: 48px; }
.table-wrap{ overflow-x: auto; margin: 18px 0; border: 1px solid var(--line); border-radius: 16px; }
.table{ width: 100%; border-collapse: collapse; font-size: 15px; }
.table th, .table td{ padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.table tr:last-child > *{ border-bottom: 0; }
.table th{ color: var(--t1); font-weight: 600; }
.table thead th{ background: var(--fill-1); }
.table td{ color: var(--t2); }
.table code, .doc code{ font: 500 .92em/1 ui-monospace, "SF Mono", Menlo, monospace; color: var(--t1); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ border-top: 1px solid var(--line); padding: 64px 0 40px; font-size: 15px; }
.footer__grid{ display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.footer__brand{ display: inline-flex; min-height: 44px; align-items: center; gap: 12px; color: var(--t1); font: 700 19px/1 var(--font-round); }
.footer__brand:hover{ text-decoration: none; }
.footer__brand img{ width: 36px; height: 36px; border-radius: 22.5%; box-shadow: 0 0 0 .5px rgb(255 255 255 / .16); }
.footer__tag{ margin-top: 16px; max-width: 34ch; color: var(--t2); }
.site-footer h2{ font: 600 14px/1 var(--font); color: var(--t1); margin-bottom: 16px; }
.site-footer ul{ list-style: none; }
.site-footer li + li{ margin-top: 10px; }
.site-footer li a{ color: var(--t2); }
.site-footer li a:hover{ color: var(--t1); }
.footer__legal{
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px 24px;
  margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line);
  color: var(--t3); font-size: 13px;
}
.footer__legal > :last-child{ justify-self: end; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (min-width: 981px){
  /* desktop: the contents list is always open; its summary is just a label */
  .doc__toc summary{ pointer-events: none; }
}
@media (max-width: 980px){
  .feature{ gap: clamp(28px, 5vw, 48px); }
  .feature__media .device--iphone{ width: clamp(220px, 30vw, 300px); }
  .faq{ grid-template-columns: 1fr; }
  .faq__intro{ position: static; }
  .doc{ grid-template-columns: 1fr; }
  .doc__toc{
    position: static; max-height: none; overflow: visible;
    border: 1px solid var(--line-2); border-radius: var(--r-row); background: var(--fill-1);
  }
  .doc__toc summary{
    display: flex; align-items: center; justify-content: space-between;
    min-height: 52px; margin: 0; padding: 0 20px; cursor: pointer;
    color: var(--t1); font-size: 16px;
  }
  .doc__toc summary::after{
    content: ""; width: 9px; height: 9px; margin-right: 4px;
    border-right: 2px solid var(--t2); border-bottom: 2px solid var(--t2);
    transform: translateY(-3px) rotate(45deg); transition: transform 300ms var(--ease);
  }
  .doc__toc[open] summary::after{ transform: translateY(2px) rotate(-135deg); }
  .doc__toc ol{ margin: 0 20px 12px; border-left: 0; }
  .doc__toc li + li{ border-top: 1px solid var(--line); }
  .doc__toc a{ padding: 12px 0; margin: 0; border: 0; font-size: 15px; }
  .spec{ grid-template-columns: 1fr 1fr; }
  .press-card__outlet{ flex-direction: column; align-items: flex-start; gap: 6px; }
  .press-card__date{ white-space: nowrap; }
  .footer__grid{ grid-template-columns: repeat(3, 1fr); }
  .footer__grid > :first-child{ grid-column: 1 / -1; }
  .site-footer li a{ display: inline-block; padding-block: 12px; }
  .site-footer li + li{ margin-top: 0; }
  .site-footer h2{ margin-bottom: 4px; }
  .footer__legal{ display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
}
@media (max-width: 680px){
  body{ font-size: 16px; }
  .feature, .feature--flip{ grid-template-columns: 1fr; }
  .feature--flip .feature__media{ order: 0; }
  .feature__media .device--iphone{ width: min(280px, 72vw); }
  .grid-2, .press-featured, .spec{ grid-template-columns: 1fr; }
  .press-card{ min-height: 0; }
  .press-row{ grid-template-columns: 1fr; gap: 6px; }
  .press-row__date{ order: -1; }
  .faq__item > p, .faq__item > div{ padding-right: 0; }
  .footer__grid{ grid-template-columns: 1fr 1fr; }
  .table th, .table td{ padding: 12px; }
}

/* ==========================================================================
   Fallbacks & accessibility preferences
   ========================================================================== */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .lg-glass{ background-color: rgb(22 25 34 / .97); }
  .lg-glass--thick{ background-color: rgb(20 22 30 / .98); }
  .lg-glass--tinted{ background-color: var(--cyan); }
  .scroll-edge{ background: linear-gradient(180deg, rgb(5 6 10 / .95), rgb(5 6 10 / 0)); }
}
@media (prefers-reduced-transparency: reduce){
  .lg-glass, .lg-glass--thick{
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background-color: rgb(22 25 34); background-image: none;
  }
  .lg-glass--tinted{ -webkit-backdrop-filter: none; backdrop-filter: none; background-color: var(--cyan); }
  .scroll-edge{ -webkit-backdrop-filter: none; backdrop-filter: none; background: rgb(5 6 10 / .96); }
  .ambient::after{ display: none; }
  .site-header{ -webkit-backdrop-filter: none; backdrop-filter: none; background-color: rgb(8 9 14 / .97); }
}
@media (prefers-contrast: more){
  :root{ --t2: rgb(255 255 255 / .92); --t3: rgb(255 255 255 / .80); --line: rgb(255 255 255 / .28); --line-2: rgb(255 255 255 / .36); }
  .lg-glass{ background-color: rgb(12 14 20 / .92); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .55); }
  .lg-glass--tinted{ background-color: var(--cyan-soft); }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ transition-duration: 1ms !important; animation: none !important; }
  .lg-interactive:active{ transform: none; }
}
@media (forced-colors: active){
  .lg-glass, .lg-glass--thick, .lg-glass--tinted{ -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid CanvasText; }
  .lg-glass::before, .lg-glass::after, .ambient, .scroll-edge{ display: none; }
}
@media print{
  :root{ --t1: #000; --t2: #222; --t3: #555; --line: #ccc; --line-2: #bbb; --fill-1: transparent; }
  html, body{ background: #fff !important; color: #000; }
  .site-header, .scroll-edge, .ambient, .nav__menu, .skip-link, .doc__toc, .cta-band, .device__toggle,
  .site-footer .footer__grid, .device--live{ display: none !important; }
  a{ color: #000; text-decoration: underline; }
  .doc{ display: block; }
  .doc-hero{ padding-top: 0; }
  .note{ border-color: #bbb; background: none; }
}