@font-face {
  font-display: swap;
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  src: url("/fonts/InstrumentSerif-Regular.ttf") format("truetype");
}

:root {
  --color-background: #150E13;
  --color-surface: #211620;
  --color-surface-raised: #2D1F2B;
  --color-surface-high: #392837;
  --color-border: #44313F;
  --color-border-strong: #5F485A;
  --color-text: #F8EFF0;
  --color-text-muted: #B8A4AD;
  --color-text-faint: #7F6D77;
  --color-accent: #FF7268;
  --color-accent-line: rgba(255, 114, 104, 0.35);
  --color-on-accent: #33110E;
  --color-glow: #FFB985;
  --color-on-glow: #2E1706;
  --color-ember: #FF8C42;
  --color-wash-morning: #FFA0B4;
  --color-wash-afternoon: #FFE6C2;
  --color-wash-night: #C9A7F0;
  --color-danger: #FF4D5E;
  --color-danger-soft: rgba(255, 77, 94, 0.14);
  --color-success: #7ED9A6;
  --color-qr-ground: #F8EFF0;
  --color-qr-ink: #150E13;
  --color-qr-eye: #90302C;
  --color-scrim: rgba(0, 0, 0, 0.6);
  --color-frost-key: rgba(248, 239, 240, 0.08);
  --color-frost: #FFFFFF;
  --color-on-scrim: #FFFFFF;
  --color-camera-panel: rgba(248, 239, 240, 0.82);
  --color-on-camera-panel: #150E13;
  --color-on-camera-panel-muted: #4C3A46;
  --color-media-backdrop: #000000;
  --color-flag-edge: rgba(248, 239, 240, 0.24);
  --color-flag-tint: rgba(21, 14, 19, 0.12);
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-section: 28px;
  --space-xxl: 32px;
  --space-xxxl: 48px;
  --radius-xs: 3px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 999px;
  --font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-body: -apple-system, system-ui, 'SF Pro Text', 'Helvetica Neue', sans-serif;
  --control-height: 52px;
  --glow-drop: 72px;
  --glow-reach: 340px;
  --glow-spread: 100%;
  /* The page's larger steps, still on the app's four grid. */
  --step-5: calc(var(--space-xxl) * 1.5);
  --step-6: calc(var(--space-xxl) * 2);
  --step-7: calc(var(--space-xxl) * 3);
  --step-8: calc(var(--space-xxl) * 4);
  --gutter: var(--space-lg);
  --section: var(--step-6);
  --measure: 34rem;
  --wash: var(--color-glow);
  color-scheme: dark;
}

:root[data-hour="morning"] { --wash: var(--color-wash-morning); }
:root[data-hour="afternoon"] { --wash: var(--color-wash-afternoon); }
:root[data-hour="night"] { --wash: var(--color-wash-night); }

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--color-background); -webkit-text-size-adjust: 100%; }

body {
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-synthesis: none;
  line-height: 1.6;
  margin: 0;
  min-width: 320px;
  overflow-x: clip;
  position: relative;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p, figure, blockquote, dl, dd { margin: 0; }
p, li, dd { text-wrap: pretty; }
:focus-visible { border-radius: var(--radius-xs); outline: 2px solid var(--color-accent); outline-offset: 4px; }
main:focus { outline: none; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 400; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(3rem, 7vw, 6rem); letter-spacing: 0.012em; line-height: 1.2; }
h2 { font-size: clamp(2.5rem, 4.6vw, 3.75rem); letter-spacing: 0.012em; line-height: 1.2; }
h3 { font-size: 1.5rem; letter-spacing: 0.016em; line-height: 1.15; }

/* Instrument Serif has no Arabic, so its letters fall to a naskh the system already has. */
:root:lang(ar) { --font-display: "Instrument Serif", "Geeza Pro", "Noto Naskh Arabic", "Times New Roman", serif; }
/* Spacing pulls joined letters apart, and the marks above and below need room. */
:is(h1, h2, h3, .greeting, .kicker, .eyebrow, .policy-contents .claim-label, .policy-example-label):lang(ar) { letter-spacing: 0; }
:is(h1, h2, h3, .greeting):lang(ar) { line-height: 1.35; }

.wrap, .site-header, .site-footer { margin-inline: auto; width: min(100% - 2 * var(--gutter), 75rem); }

.visually-hidden {
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.skip-link {
  background: var(--color-accent);
  border-radius: var(--radius-md);
  color: var(--color-on-accent);
  font-weight: 600;
  inset-inline-start: var(--space-lg);
  padding: var(--space-sm) var(--space-md);
  position: absolute;
  top: var(--space-lg);
  transform: translateY(-200%);
  z-index: 3;
}
.skip-link:focus { transform: none; }

/* The light behind the name, placed against the window the way the app's Glow is. */
.wash {
  background: radial-gradient(var(--glow-spread) var(--glow-reach) at 50% var(--glow-drop), color-mix(in srgb, var(--wash) 16%, transparent) 0%, color-mix(in srgb, var(--wash) 11.84%, transparent) 16%, color-mix(in srgb, var(--wash) 7.84%, transparent) 30%, color-mix(in srgb, var(--wash) 4.64%, transparent) 44%, color-mix(in srgb, var(--wash) 2.48%, transparent) 58%, color-mix(in srgb, var(--wash) 1.06%, transparent) 72%, color-mix(in srgb, var(--wash) 0.29%, transparent) 86%, color-mix(in srgb, var(--wash) 0%, transparent) 100%);
  height: calc(var(--glow-drop) + var(--glow-reach));
  inset: 0 0 auto;
  pointer-events: none;
  position: absolute;
}

/* Header and footer */

.site-header {
  align-items: center;
  display: flex;
  gap: var(--space-xl);
  justify-content: space-between;
  padding-block: var(--space-xl);
  position: relative;
  z-index: 1;
}
.brand img { height: auto; width: 9.5rem; }
.site-header nav { display: none; }
.site-header nav a { color: var(--color-text-muted); font-size: 0.9375rem; text-decoration: none; transition: color 120ms ease-out; }
.site-header nav a:hover { color: var(--color-text); }
.text-link { color: var(--color-accent); font-weight: 600; text-decoration: none; }
.text-link:hover { text-decoration: underline; text-underline-offset: 0.25em; }

.header-actions { align-items: center; display: flex; gap: var(--space-lg); }
@media (width < 40rem) {
  .header-actions .text-link { display: none; }
}

.site-footer {
  align-items: center;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  display: flex;
  flex-direction: column;
  font-size: 0.875rem;
  gap: var(--space-lg);
  padding-block: var(--space-xxl) var(--step-5);
  text-align: center;
}
.site-footer img { height: auto; width: 2.75rem; }
.footer-row { align-items: center; display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-xl); justify-content: center; }
.footer-links { display: flex; gap: var(--space-xl); }
.footer-links a { color: var(--color-text-muted); text-decoration: none; }
.footer-links a:hover { color: var(--color-text); }
.footer-copyright { color: var(--color-text-faint); font-size: 0.8125rem; }
.mail-at::before { content: "@"; }

.languages-button {
  align-items: center;
  background: none;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  cursor: pointer;
  display: flex;
  font: inherit;
  font-size: 0.875rem;
  gap: var(--space-xs);
  padding-block: var(--space-xs);
  padding-inline: var(--space-md) var(--space-sm);
}
.languages-button:hover { border-color: var(--color-text-faint); color: var(--color-text); }
.languages:has(:popover-open) .languages-button { border-color: var(--color-text-faint); color: var(--color-text); }
.languages .icon { flex: none; height: 1rem; width: 1rem; }
.languages-button .icon { rotate: 90deg; }
.languages:has(:popover-open) .languages-button .icon { rotate: -90deg; }
.languages-list {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: 0.875rem;
  list-style: none;
  min-width: 10rem;
  padding: var(--space-xs);
  text-align: start;
}
/* Without anchor positioning the list keeps the popover's own place, centred in the window. */
@supports (position-area: block-end) {
  .languages-list { inset: auto; margin: var(--space-xs) 0; position-area: block-end span-inline-start; position-try-fallbacks: flip-block; }
  .site-header .languages-button { anchor-name: --languages-header; }
  .site-header .languages-list { position-anchor: --languages-header; }
  .site-footer .languages-button { anchor-name: --languages-footer; }
  .site-footer .languages-list { position-anchor: --languages-footer; position-area: block-start span-inline-start; }
}
.languages-list a { align-items: center; border-radius: var(--radius-sm); color: var(--color-text-muted); display: flex; gap: var(--space-md); justify-content: space-between; padding: var(--space-sm) var(--space-md); text-decoration: none; }
.languages-list a:hover, .languages-list a:focus-visible { background: var(--color-surface-high); color: var(--color-text); }
.languages-list a:focus-visible { outline-offset: -2px; }
.languages-list a[aria-current] { color: var(--color-text); }
.languages-list a .icon { color: var(--color-accent); }
.languages-list .languages-missing { color: var(--color-text-faint); cursor: default; display: flex; padding: var(--space-sm) var(--space-md); }

/* Buttons and small type */

.button {
  align-items: center;
  background: var(--color-accent);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  color: var(--color-on-accent);
  cursor: pointer;
  display: inline-flex;
  flex: none;
  font: 600 1rem/1.25 var(--font-body);
  justify-content: center;
  min-height: var(--control-height);
  padding: 0 var(--space-xl);
  text-decoration: none;
  transition: transform 120ms ease-out, filter 200ms ease-out, border-color 200ms ease-out;
}
.button:hover { filter: brightness(1.06); }
.button:active { transform: scale(0.96); }
.button-ghost { background: transparent; border-color: var(--color-border-strong); color: var(--color-accent); }
.button-ghost:hover { border-color: var(--color-accent); filter: none; }

.kicker, .eyebrow {
  color: var(--color-accent);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.4;
  margin-bottom: var(--space-lg);
  text-transform: uppercase;
}
.lead { color: var(--color-text); font-size: clamp(1.125rem, 1.4vw, 1.25rem); line-height: 1.55; margin-top: var(--space-xl); max-width: var(--measure); }
.body { color: var(--color-text-muted); margin-top: var(--space-lg); max-width: var(--measure); }

.badge {
  background: color-mix(in srgb, var(--color-glow) 14%, transparent);
  border: 1px solid var(--color-glow);
  border-radius: var(--radius-pill);
  color: var(--color-glow);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
  padding: 0 var(--space-sm);
  vertical-align: 0.2em;
}

/* Phones */

.device {
  --w: 18.75rem;
  background: var(--color-media-backdrop);
  /* A phone's corners and bezel, as a share of the phone's own width. */
  border-radius: calc(var(--w) * 0.16);
  box-shadow:
    0 0 0 1px var(--color-border-strong),
    0 calc(var(--w) * 0.12) calc(var(--w) * 0.3) calc(var(--w) * -0.06) color-mix(in srgb, var(--color-media-backdrop) 70%, transparent);
  flex: none;
  padding: calc(var(--w) * 0.03);
  position: relative;
  width: var(--w);
}
.device img { border-radius: calc(var(--w) * 0.13); height: auto; width: 100%; }

/* The top of Home at the reader's own hour, laid over the evening screen underneath. */
.device-home::after {
  background: no-repeat top / 100% auto;
  border-radius: calc(var(--w) * 0.13);
  content: "";
  inset: calc(var(--w) * 0.03);
  pointer-events: none;
  position: absolute;
}
:root[data-hour="morning"] .device-home::after { background-image: url("/screens/home-morning.avif"); }
:root[data-hour="afternoon"] .device-home::after { background-image: url("/screens/home-afternoon.avif"); }
:root[data-hour="night"] .device-home::after { background-image: url("/screens/home-night.avif"); }
:root:lang(es)[data-hour="morning"] .device-home::after { background-image: url("/screens/es/home-morning.avif"); }
:root:lang(es)[data-hour="afternoon"] .device-home::after { background-image: url("/screens/es/home-afternoon.avif"); }
:root:lang(es)[data-hour="night"] .device-home::after { background-image: url("/screens/es/home-night.avif"); }
:root:lang(de)[data-hour="morning"] .device-home::after { background-image: url("/screens/de/home-morning.avif"); }
:root:lang(de)[data-hour="afternoon"] .device-home::after { background-image: url("/screens/de/home-afternoon.avif"); }
:root:lang(de)[data-hour="night"] .device-home::after { background-image: url("/screens/de/home-night.avif"); }

/* Hero */

.hero { padding-top: var(--step-5); text-align: center; }
.hero-copy { display: grid; justify-items: center; }
.greeting {
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 2.6vw, 2.25rem);
  letter-spacing: 0.016em;
  line-height: 1.15;
  margin-bottom: var(--space-lg);
}
.greeting > span { display: none; }
:root:not([data-hour]) .greeting [data-part="evening"],
:root[data-hour="morning"] .greeting [data-part="morning"],
:root[data-hour="afternoon"] .greeting [data-part="afternoon"],
:root[data-hour="evening"] .greeting [data-part="evening"],
:root[data-hour="night"] .greeting [data-part="night"] { display: inline; }
.hero h1 { max-width: 11em; }
.lede { color: var(--color-text-muted); font-size: clamp(1.125rem, 1.5vw, 1.3125rem); line-height: 1.55; margin-top: var(--space-xl); max-width: 36rem; }
.actions { align-items: center; display: flex; flex-wrap: wrap; gap: var(--space-lg) var(--space-xl); justify-content: center; margin-top: var(--space-xxl); }
.coming { color: var(--color-text-muted); font-size: 0.9375rem; }

.hero-stage {
  container-type: inline-size;
  display: flex;
  height: clamp(27rem, 46vw, 40rem);
  justify-content: center;
  margin-top: var(--step-6);
  mask-image: linear-gradient(to bottom, #000 62%, transparent);
  overflow: hidden;
  padding-top: var(--space-md);
}
.hero-stage .device { --w: min(17rem, 72cqi); z-index: 1; }
.hero-stage .device-side { display: none; }

/* Sections */

.section { padding-block: var(--section); }
.section-after { padding-top: 0; }
.bento-after { margin-top: var(--space-lg); }
.section-head { display: grid; gap: var(--space-lg); margin-bottom: var(--step-5); }
.section-head .lead { color: var(--color-text-muted); margin-top: 0; }
.section-head-centred { justify-items: center; text-align: center; }
.section-head-centred .kicker { margin-bottom: 0; }
.section-head-centred .lead { max-width: 30rem; }

.card {
  align-content: start;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-xxl);
}
.card h3 { font-size: clamp(1.75rem, 2.2vw, 2rem); line-height: 1.1; }
.card .icon { color: var(--color-accent); height: 1.75rem; margin-bottom: var(--space-md); width: 1.75rem; }
.card p { color: var(--color-text-muted); }

.bento { display: grid; gap: var(--space-lg); }
/* One feature drawn large beside the cards: its drawing at the top, its words at the foot. */
.card-feature { background: linear-gradient(to bottom, var(--color-surface-raised), var(--color-surface)); display: flex; flex-direction: column; gap: var(--space-xxl); justify-content: space-between; padding: var(--step-5) var(--space-xxl); }
.card-feature .illustration { height: auto; margin-inline-start: calc(var(--space-md) * -1); width: 15rem; }
.card-feature h3 { font-size: clamp(2rem, 3vw, 2.75rem); }
.card-feature p { font-size: 1.0625rem; line-height: 1.55; margin-top: var(--space-md); max-width: 30rem; }
.card-feature .text-link { display: inline-block; margin-top: var(--space-lg); }
.card-wide { gap: var(--space-xl); }
/* The words run up to the button and wrap only once they meet it. */
.card-wide > div { min-width: 0; }
.card-wide p { margin-top: var(--space-sm); }
.card-wide .button { justify-self: start; }

.split { display: grid; gap: var(--step-5); }
.facts { display: grid; gap: var(--space-lg) var(--space-xl); margin-top: var(--space-xxl); }
.facts div { border-top: 1px solid var(--color-border); display: grid; gap: var(--space-xs); padding-top: var(--space-md); }
.facts dt { font-size: 0.9375rem; font-weight: 600; }
.facts dd { color: var(--color-text-muted); font-size: 0.9375rem; line-height: 1.5; }

.points { display: grid; gap: var(--space-lg); list-style: none; margin: var(--space-xxl) 0 0; max-width: var(--measure); padding: 0; }
.points li { color: var(--color-text-muted); padding-inline-start: var(--space-xl); position: relative; }
.points li::before, .tier li::before {
  background: var(--color-accent);
  border-radius: var(--radius-pill);
  content: "";
  height: 0.5rem;
  inset-inline-start: 0.125rem;
  position: absolute;
  top: 0.6em;
  width: 0.5rem;
}
.points strong { align-items: center; color: var(--color-text); display: flex; font-weight: 600; gap: var(--space-sm); }

.claim { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); margin-top: var(--space-xxl); max-width: var(--measure); padding: var(--space-xl); }
.claim p { color: var(--color-text); }
.claim p + p { margin-top: var(--space-sm); }
.claim .claim-label { color: var(--color-text-muted); font-size: 0.875rem; margin-bottom: var(--space-sm); }

/* The landing pages, one card each, above the footer. */
.personas { padding-block: var(--step-5); }
.personas h2 { font-size: clamp(1.75rem, 2.4vw, 2.125rem); text-align: center; }
/* Centred, so the row reads whole while only some of the pages are written. */
.persona-cards { --across: 2; display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: center; list-style: none; margin: var(--space-xxl) 0 0; padding: 0; }
.persona-cards li { flex: 0 1 calc((100% - (var(--across) - 1) * var(--space-md)) / var(--across)); }
.persona-card { align-content: start; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); color: inherit; display: grid; gap: var(--space-xs); height: 100%; padding: var(--space-lg); text-decoration: none; }
.persona-card[aria-current] { background: var(--color-surface-raised); border-color: var(--color-accent); }
.persona-name { color: var(--color-text); font-family: var(--font-display); font-size: 1.5rem; letter-spacing: 0.016em; line-height: 1.1; }
.persona-words { color: var(--color-text-muted); font-size: 0.875rem; line-height: 1.45; }

/* A phone standing in a lit panel, cut off by its lower edge. */
.stage {
  align-items: flex-start;
  aspect-ratio: 1 / 1.08;
  background: linear-gradient(to bottom, var(--color-surface-raised), var(--color-surface) 70%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  container-type: inline-size;
  display: flex;
  justify-content: center;
  overflow: hidden;
  padding-top: var(--space-xxl);
}
.stage .device { --w: min(18.75rem, 70cqi); }
.stage-pair .device { --w: min(15rem, 50cqi); }
.stage-pair .device:first-child { filter: brightness(0.8); margin-inline-end: calc(var(--w) * -0.14); margin-top: var(--step-5); }
.stage-pair .device:last-child { z-index: 1; }

/* Plus */

.tiers { display: grid; gap: var(--space-lg); }
.tier { align-content: stretch; display: flex; flex-direction: column; gap: 0; padding: var(--space-xxl); }
.tier h3 { align-items: center; display: flex; font-size: 2.25rem; gap: var(--space-sm); }
.tier-line { color: var(--color-text-muted); margin-top: var(--space-xs); }
.tier ul { display: grid; gap: var(--space-md); list-style: none; margin: var(--space-xxl) 0 0; padding: 0; }
.tier li { padding-inline-start: var(--space-xl); position: relative; }
.tier .tier-foot { border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: 0.9375rem; margin-top: auto; padding-top: var(--space-xl); }
.tier-plus { background: linear-gradient(to bottom, color-mix(in srgb, var(--color-glow) 7%, var(--color-surface)), var(--color-surface) 60%); border-color: var(--color-glow); }
.tier-plus h3 { color: var(--color-glow); }
.tier-plus .icon { color: var(--color-glow); height: 1.75rem; margin: 0; width: 1.75rem; }
.tier-plus li::before { background: var(--color-glow); }
.tier ul { margin-bottom: var(--space-xxl); }

/* Closing */

.closing { display: grid; justify-items: center; padding-block: var(--space-xxl) var(--section); text-align: center; }
.closing img { height: auto; margin-bottom: var(--space-lg); width: min(13rem, 56%); }
.closing .kicker { margin-bottom: var(--space-md); }
.closing h2 { max-width: 14em; }
.closing-line { color: var(--color-text-muted); margin-top: var(--space-lg); max-width: 32rem; }
.stores { display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: center; margin-top: var(--space-xxl); }
/* The shape the store badges will take, held until the listings exist. */
.store {
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  color: var(--color-text-muted);
  cursor: not-allowed;
  display: grid;
  font: 600 1.125rem/1.2 var(--font-body);
  gap: 2px;
  min-height: var(--control-height);
  min-width: 11.5rem;
  padding: var(--space-sm) var(--space-xl);
  text-align: start;
}
.store small { font-size: 0.75rem; font-weight: 500; }
.stores[hidden] { display: none; }

@media (min-width: 40rem) {
  .site-footer { flex-direction: row; gap: var(--space-xl); text-align: start; }
  .footer-row { margin-inline-start: auto; }
  .hero-stage .device { --w: min(17.5rem, 34cqi); }
  .hero-stage .device-side { display: block; filter: brightness(0.72); margin-top: var(--step-7); z-index: 0; --w: min(15rem, 29cqi); }
  .hero-stage .device-side:first-child { margin-inline-end: calc(var(--w) * -0.1); }
  .hero-stage .device-side:last-child { margin-inline-start: calc(var(--w) * -0.1); }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-feature, .card-wide { grid-column: 1 / -1; }
  .persona-cards { --across: 3; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tier { padding: var(--step-5); }
}

@media (min-width: 60rem) {
  :root { --gutter: var(--step-5); --section: var(--step-7); }
  .site-header nav { display: flex; gap: var(--space-xxl); }
  .hero { padding-top: var(--step-6); }
  .hero-stage .device { --w: min(20rem, 30cqi); }
  .hero-stage .device-side { --w: min(17rem, 25cqi); }
  .section-head:not(.section-head-centred) { align-items: end; column-gap: var(--step-6); grid-template-columns: minmax(0, 1fr) minmax(0, 28rem); }
  .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .card-feature { grid-column: span 2; grid-row: span 2; }
  .persona-cards { --across: 6; }
  .card-wide { align-items: center; display: flex; justify-content: space-between; }
  .card-wide .button { margin-inline-start: auto; }
  .split { align-items: center; column-gap: clamp(var(--step-6), 7vw, var(--step-7)); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split-flip .stage { grid-column: 1; grid-row: 1; }
  .stage { padding-top: var(--step-6); }
}

@media (min-width: 80rem) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .split-flip { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .hero-copy, .hero-stage { animation: arrive 320ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .hero-stage { animation-delay: 80ms; }
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    @media (min-width: 60rem) {
      .stage {
        animation: fade-in auto linear backwards;
        animation-timeline: view();
        animation-range: entry;
      }
    }
  }
}

@keyframes arrive {
  from { opacity: 0; translate: 0 0.75rem; }
}

@keyframes fade-in {
  from { opacity: 0; }
}

/* Invite */

.invite { padding-block: var(--space-xl) var(--step-7); }
.invite-card { margin-inline: auto; max-width: 36rem; text-align: center; width: calc(100% - 2 * var(--gutter)); }
.invite-card .illustration { height: auto; margin: 0 auto var(--space-lg); width: min(13rem, 60%); }
.invite-card h1 { font-size: clamp(2.75rem, 7vw, 4.5rem); margin-inline: auto; }
.invite-card .lede { color: var(--color-text); margin-inline: auto; }
.invite-ready, .invite-empty { display: none; }
[data-invite-state="ready"] .invite-ready, [data-invite-state="empty"] .invite-empty { display: block; }
[data-copy-code] [data-when="copied"], [data-copy-code][data-copied] [data-when="idle"] { display: none; }
[data-copy-code][data-copied] [data-when="copied"] { display: inline; }
.code-plate { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); container-type: inline-size; margin: var(--space-xxl) auto 0; max-width: 28rem; padding: var(--space-lg) var(--space-xl); }
.code-label { color: var(--color-text-muted); font-size: 0.8125rem; }
.code-plate code { display: block; font: 500 min(2.25rem, 9.5cqi) / 1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.12em; margin-top: var(--space-sm); text-indent: 0.12em; white-space: nowrap; }
.invite-actions { display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: center; margin-top: var(--space-xl); }
.invite-line { color: var(--color-text-muted); font-size: 0.9375rem; margin: var(--space-xl) auto 0; max-width: 30rem; }
.invite-card .claim { margin-inline: auto; text-align: start; }

/* Privacy */

.policy { display: grid; padding-block: var(--space-xl) var(--step-7); }
.policy-head { max-width: 44rem; }
.policy-head .illustration { height: auto; margin-bottom: var(--space-lg); width: 9rem; }
.policy h1 { font-size: clamp(2.75rem, 6vw, 4.5rem); }
.policy-date { color: var(--color-text-muted); font-size: 0.875rem; margin-top: var(--space-md); }
.policy-lede p { font-size: 1.1875rem; line-height: 1.55; margin-top: var(--space-xl); max-width: 40rem; }
.policy-contents { font-size: 0.9375rem; margin-top: var(--space-xxl); }
.policy-contents .claim-label { color: var(--color-text-faint); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; margin-bottom: var(--space-sm); text-transform: uppercase; }
.policy-contents ol { border-inline-start: 1px solid var(--color-border); list-style: none; margin: 0; padding: 0; }
.policy-contents ol + .claim-label { margin-top: var(--space-xl); }
.policy-contents a { border-inline-start: 2px solid transparent; color: var(--color-text-muted); display: block; margin-inline-start: -1px; padding-block: var(--space-xs); padding-inline: var(--space-md) 0; text-decoration: none; }
.policy-contents a:hover { color: var(--color-text); }
.policy-contents a[aria-current] { border-inline-start-color: var(--color-accent); color: var(--color-text); }
.policy-contents a:focus-visible { outline-offset: -2px; }
.policy-section { border-top: 1px solid var(--color-border); margin-top: var(--space-xxl); max-width: 44rem; padding-top: var(--space-xl); scroll-margin-top: var(--space-xl); }
.policy-section h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); margin-bottom: var(--space-md); position: relative; }
.policy-section .heading-link { color: inherit; text-decoration: none; }
.heading-link::before { color: var(--color-accent); content: "#"; content: "#" / ""; inset-inline-end: 100%; opacity: 0; padding-inline-end: 0.3em; position: absolute; }
.heading-link:focus-visible::before { opacity: 1; }
@media (hover: hover) {
  .heading-link:hover::before { opacity: 1; }
  a.persona-card:hover { border-color: var(--color-border-strong); }
}
.policy-example { border-inline-start: 2px solid var(--color-accent); margin-top: var(--space-xl); padding-inline-start: var(--space-xl); }
.policy-section .policy-example-label { color: var(--color-accent); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.policy-section .policy-example p:last-child { color: var(--color-text); margin-top: var(--space-xs); }
.policy-section .policy-highlight { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); color: var(--color-text); margin-top: var(--space-xl); padding: var(--space-xl); }
.policy-section h3 { margin-top: var(--space-xl); }
.policy-section .kicker { color: var(--color-accent); margin-bottom: var(--space-sm); }
.guide .policy-section li > strong:first-child { color: var(--color-text); display: block; }
.policy-section p, .policy-section li { color: var(--color-text-muted); }
.policy-section * + p, .policy-section * + ul { margin-top: var(--space-md); }
.policy-section strong { color: var(--color-text); font-weight: 600; }
.policy-section a { color: var(--color-accent); }
.policy-section ul { display: grid; gap: var(--space-sm); margin-bottom: 0; padding-inline-start: 1.25rem; }

@media (min-width: 60rem) {
  .policy { align-items: start; column-gap: clamp(var(--step-6), 8vw, var(--step-7)); grid-template-columns: 15rem minmax(0, 44rem); }
  .policy-head { grid-column: 1 / -1; }
  .policy-contents { max-height: calc(100dvh - 2 * var(--space-xl)); overflow-y: auto; overscroll-behavior: contain; padding-block: var(--space-xs); position: sticky; scrollbar-color: var(--color-border) transparent; scrollbar-width: thin; top: var(--space-xl); }
}