:root {
  color-scheme: light;
  --ink: #2C2C2E;
  --secondary: rgba(60, 60, 67, 0.6);
  --quiet: rgba(60, 60, 67, 0.8);
  --placeholder: rgba(60, 60, 67, 0.3);
  --ground: #F3F0E9;
  --tile: #FEF9F3;
  --field-focus: #F9F1E6;
  --soft: rgba(44, 44, 46, 0.08);
  --soft-down: rgba(44, 44, 46, 0.13);
  --action: #ff3b30;
  --action-down: #e8352b;
  --danger: #d62e29;
  --danger-fill: rgba(214, 46, 41, 0.08);
  --sun: #ffd447;
  --card: 28px;
  --control: 14px;
  --gutter: 20px;
  --section: 104px;
  --bar: 72px;
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --rounded: ui-rounded, "SF Pro Rounded", -apple-system, system-ui, sans-serif;
}
@media (min-width: 700px) { :root { --gutter: 40px; --section: 176px; } }
@media (min-width: 1100px) { :root { --gutter: 56px; } }
@media (min-width: 1600px) { :root { --gutter: 80px; } }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--bar); }
body {
  margin: 0; color: var(--ink); overflow-x: hidden; -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh;
  background: var(--ground) url(/static/paper.png) repeat; background-size: 256px 256px;
  font: 17px/1.5 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h1, h2, h3, p { margin: 0; }
img { display: block; max-width: 100%; }
/* Illustrations are printed, as in the app: multiplied, so their whites take the paper or card under them. */
.print { mix-blend-mode: multiply; }
a { color: var(--ink); }
.wrap { width: 100%; max-width: 1720px; margin: 0 auto; padding: 0 var(--gutter); }
main { flex: 1 0 auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
[hidden] { display: none !important; }

/* The top bar is clear, as in the app: what scrolls under it blurs and fades into the paper, with no hard edge. */
.top { position: sticky; top: 0; z-index: 10; }
.top::before {
  content: ""; position: absolute; inset: 0 0 -32px; z-index: -1; pointer-events: none;
  background: rgba(243, 240, 233, 0.78);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  -webkit-mask-image: linear-gradient(#000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(#000 calc(100% - 32px), transparent);
}
.bar { display: flex; align-items: center; gap: 32px; height: var(--bar); }
.mark { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
/* The icon's cream matches the paper, so a hairline edge, as in the app's icon picker. */
.mark img { width: 38px; height: 38px; border-radius: 10px; outline: 1px solid rgba(0, 0, 0, 0.11); outline-offset: -1px; }
.mark-name { display: block; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.mark-by { display: block; margin-top: 2px; font-size: 13px; line-height: 1.2; color: var(--quiet); white-space: nowrap; }
.bar nav { display: none; gap: 32px; margin-left: auto; }
.bar nav a { font-size: 15px; font-weight: 600; text-decoration: none; }
.bar nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.bar > .button { margin-left: auto; }
@media (min-width: 900px) { .bar nav { display: flex; } .bar > .button { margin-left: 0; } }
/* On the narrowest phones the bar keeps the name and its line; the welcome's own form is right under it. */
@media (max-width: 399px) { .bar > .button { display: none; } }

/* Buttons: a rounded rectangle with the app's press dip. Red is the main action; quiet ones are ink at 8%. */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; padding: 0 26px;
  border: 0; border-radius: var(--control); background: var(--action); color: #fff; white-space: nowrap;
  font: inherit; font-size: 17px; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: transform 0.25s var(--spring), background-color 0.2s, opacity 0.2s;
}
.button:hover { background: var(--action-down); }
.button:active { transform: scale(0.96); opacity: 0.9; }
.button.quiet { background: var(--soft); color: var(--ink); }
.button.quiet:hover { background: var(--soft-down); }
.button.small { min-height: 40px; padding: 0 16px; border-radius: 12px; font-size: 15px; }
.button[disabled] { opacity: 0.45; cursor: default; }

/* The welcome fills the first screen under the bar. On a phone the art sits above the headline, centered,
   as on the app's first screen; on a wide screen the words take the left and the art the right. */
.hero {
  display: grid; gap: 32px; align-content: center; text-align: center;
  min-height: calc(100vh - var(--bar)); min-height: calc(100svh - var(--bar)); padding: 16px 0 56px;
}
.hero-art { order: -1; width: min(100%, 460px); max-height: 34svh; object-fit: contain; margin: 0 auto; transform-origin: 50% 85%; }
/* Sized by the screen's width and height both, so the welcome fits a short laptop and a small phone. */
.hero h1 {
  font-family: var(--rounded); font-weight: 700; font-size: clamp(40px, min(11vw, 10svh), 84px);
  line-height: 1.03; letter-spacing: -0.02em; text-wrap: balance;
}
.hero h1 mark {
  color: inherit; padding: 0 0.06em; border-radius: 0.08em;
  background: linear-gradient(transparent 54%, var(--sun) 54%, var(--sun) 90%, transparent 90%) no-repeat 0 0 / 100% 100%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.lede { margin: 24px auto 0; max-width: 27em; font-size: clamp(19px, 2vw, 22px); line-height: 1.45; text-wrap: pretty; }
.join { margin: 40px auto 0; max-width: 500px; }
.join .row { display: grid; gap: 12px; }
@media (min-width: 560px) { .join .row { grid-template-columns: minmax(0, 1fr) auto; } }
.join input {
  width: 100%; height: 54px; padding: 0 18px; border: 0; border-radius: var(--control);
  background: var(--tile); color: var(--ink); font: inherit; font-size: 17px; -webkit-appearance: none; appearance: none;
  transition: background-color 0.2s;
}
.join input::placeholder { color: var(--placeholder); }
.join input:focus { outline: none; background: var(--field-focus); }
.join input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.hero .get { margin-top: 40px; }
.fine { margin-top: 16px; font-size: 15px; color: var(--quiet); }
.joined {
  display: flex; align-items: center; gap: 12px; margin: 40px auto 0; max-width: 500px; padding: 15px 18px;
  border-radius: var(--control); background: var(--tile); font-weight: 600; text-align: left;
}
.joined svg { width: 22px; height: 22px; flex: none; }
/* Errors, as in the app: a soft red block with a red mark and the message in ink. Empty, it takes no room. */
.error {
  display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; padding: 12px 16px; text-align: left;
  border-radius: var(--control); background: var(--danger-fill); font-size: 16px; line-height: 1.4;
}
.error::before {
  content: "!"; flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%;
  background: var(--danger); color: #fff; font-size: 13px; font-weight: 700; line-height: 20px; text-align: center;
}
.error:empty { display: none; }
@media (min-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); align-items: center; gap: 72px; text-align: left; padding: 24px 0 72px; }
  .hero-art { order: 0; width: 100%; max-height: calc(100svh - 260px); }
  .lede, .join, .joined { margin-left: 0; margin-right: 0; }
}
@media (max-width: 899px) and (max-height: 720px) {
  .hero { gap: 20px; }
  .hero-art { max-height: 26svh; }
  .lede { margin-top: 16px; }
  .join, .joined, .hero .get { margin-top: 24px; }
}

/* One big line, Apple style, on a screen of its own. Where the browser can tie motion to the scroll, the
   line stays put in the middle of the screen while its words turn from grey to ink, then moves on. */
.statement { display: grid; place-items: center; min-height: 100vh; min-height: 100svh; padding: 64px 0; }
.statement .pin { width: 100%; }
.statement p {
  max-width: 20em; margin: 0 auto; text-align: center; text-wrap: balance;
  font-size: clamp(28px, min(4.6vw, 7svh), 72px); font-weight: 600; line-height: 1.14; letter-spacing: -0.025em;
}

/* A section's headline and the line under it, as in the app (Apple Health): the same size, the headline
   bold in ink, the line regular in grey. */
.title { margin-bottom: 48px; font-size: clamp(28px, 3.6vw, 46px); line-height: 1.14; letter-spacing: -0.022em; }
.title h1, .title h2 { font-size: inherit; font-weight: 700; }
.title p { margin-top: 6px; color: var(--secondary); text-wrap: pretty; }
@media (min-width: 700px) { .title { margin-bottom: 64px; } }
.block { padding-bottom: var(--section); }

/* The cast. A phone shows the app's picker rows: the face, the name and role, and a round play button.
   Wider screens show them as cards with the portrait on top. */
.callers { display: grid; gap: 14px; }
.caller { display: flex; align-items: center; gap: 14px; padding: 14px 12px 14px 16px; border-radius: 24px; background: var(--tile); }
.caller .portrait { width: 80px; height: 80px; flex: none; object-fit: contain; transition: transform 0.5s var(--spring); }
.caller .who { flex: 1; min-width: 0; }
.caller .name { display: block; font-size: 19px; font-weight: 600; line-height: 1.25; }
.caller .role { display: block; font-size: 17px; color: var(--quiet); line-height: 1.3; }
@media (min-width: 640px) {
  .callers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .caller { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 8px; padding: 32px 18px 18px 28px; border-radius: var(--card); }
  .caller .portrait { grid-column: 1 / -1; width: 100%; height: auto; aspect-ratio: 1; max-width: 240px; margin: 0 auto; }
}
@media (min-width: 1000px) { .callers { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } }
/* The app's play.circle: an ink ring with the play mark, a 44px target. */
.play {
  flex: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer;
  transition: transform 0.25s var(--spring), opacity 0.2s;
}
.play:active { transform: scale(0.9); opacity: 0.8; }
.play svg { width: 34px; height: 34px; }

/* How it works: three cards, each its headline and line, then its picture. Rows on a phone. */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.step { display: grid; grid-template-columns: 100px minmax(0, 1fr); align-items: center; gap: 18px; padding: 18px 22px 18px 18px; border-radius: 24px; background: var(--tile); }
.step img { width: 100px; height: 88px; object-fit: cover; transition: transform 0.5s var(--spring); }
.step h3 { font-size: 19px; line-height: 1.3; font-weight: 700; }
.step h3 span { display: block; font-weight: 400; color: var(--secondary); }
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .step { grid-template-columns: none; align-items: start; gap: 36px; padding: 40px 40px 36px; border-radius: var(--card); }
  .step img { order: 1; width: 100%; height: 230px; object-fit: contain; }
  .step h3 { font-size: 22px; letter-spacing: -0.01em; }
}
@media (hover: hover) {
  .caller:hover .portrait { transform: translateY(-6px) rotate(-2deg); }
  .step:hover img { transform: translateY(-6px); }
}

/* Two features, each the art beside its words, alternating sides on a wide screen. */
.feature { display: grid; gap: 36px; align-items: center; padding-bottom: var(--section); }
.feature img { width: min(100%, 560px); margin: 0 auto; }
.feature .title, .pricing .title { font-size: clamp(28px, 3vw, 38px); }
.feature .title { margin: 0; text-align: center; }
@media (min-width: 900px) {
  .feature { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 112px; }
  .feature .title { text-align: left; }
  .feature.flip img { order: 1; }
}

/* Pricing: one flat card, its art and words, then the price and the button. */
.pricing { display: grid; gap: 28px; justify-items: center; padding: 44px 24px 32px; border-radius: 32px; background: var(--tile); text-align: center; }
.pricing > img { width: 150px; }
.pricing .title { margin: 0; }
.amount { font-family: var(--rounded); font-size: 64px; font-weight: 700; line-height: 1; letter-spacing: -0.03em; }
.unit { font-size: 20px; color: var(--secondary); }
.monthly { margin-top: 12px; color: var(--quiet); }
.price { width: 100%; max-width: 360px; }
.price .button { width: 100%; margin-top: 28px; }
.price .pass { display: inline-block; margin-top: 16px; font-weight: 600; text-underline-offset: 3px; }
@media (min-width: 900px) {
  .pricing { grid-template-columns: 180px minmax(0, 1fr) 330px; justify-items: stretch; align-items: center; gap: 56px; padding: 56px 64px 56px 56px; text-align: left; }
  .pricing > img { width: 100%; }
}

.foot { display: grid; gap: 24px; padding-top: 48px; padding-bottom: 40px; font-size: 15px; color: var(--quiet); }
main.home + .foot { padding-top: var(--section); padding-bottom: 48px; }
.foot .mark img { width: 30px; height: 30px; border-radius: 8px; }
.foot .mark-name { font-size: 17px; }
.foot p { margin-top: 12px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.foot nav a { font-weight: 600; text-decoration: none; }
.foot nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 700px) { .foot { grid-template-columns: 1fr auto; align-items: end; } }


/* A step's headline and line: the same pairing as a section's, bigger, since it's the whole page. */
.title.big { margin-bottom: 36px; font-size: clamp(30px, min(3.6vw, 6svh), 64px); line-height: 1.12; }
.doc .title.big { font-size: clamp(32px, 3.2vw, 56px); margin-bottom: 0; }

/* A step fills the screen under the bar, like the home page's first screen: its words and form on one side,
   its art on the other, both in the middle. On a phone the art sits above the words, as in the app's steps.
   A long form scrolls past its art, which stays in view. The footer waits below. */
.stage { display: grid; align-content: center; gap: 28px; min-height: calc(100svh - var(--bar)); padding: 16px 0 48px; }
.stage .copy { width: 100%; max-width: 680px; container-type: inline-size; }
.stage-art { order: -1; width: min(100%, 400px); max-height: 30svh; object-fit: contain; margin: 0 auto; }
@media (min-width: 900px) {
  .stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 96px; padding: 32px 0 calc(32px + var(--bar)); }
  .stage-art { order: 1; width: 100%; max-width: 620px; max-height: calc(100svh - var(--bar) - 200px); margin: 0 0 0 auto; }
  .stage.long { align-items: start; }
  .stage.long .stage-art { position: sticky; top: calc(var(--bar) + 56px); }
}
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.title + .actions { margin-top: 0; }
@media (max-width: 559px) { .actions .button { width: 100%; } }
.button.danger { background: var(--danger-fill); color: var(--danger); }
.button.danger:hover { background: rgba(214, 46, 41, 0.13); }

/* Forms, as in the app (Apple Wallet's and Health's): a bold label, then a field with no border, ever,
   in the cards' Alabaster. Focus deepens the fill a touch. */
.copy form h2 { margin-top: 8px; font-size: 20px; font-weight: 700; }
.field { display: block; margin-top: 28px; }
.field > span { display: block; margin-bottom: 10px; font-size: 16px; font-weight: 600; }
.field input, .field textarea {
  width: 100%; height: 56px; padding: 0 18px; border: 0; border-radius: var(--control); background: var(--tile);
  color: var(--ink); font: inherit; font-size: 19px; -webkit-appearance: none; appearance: none; transition: background-color 0.2s;
}
.field textarea { height: auto; min-height: 120px; padding: 16px 18px; line-height: 1.45; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--placeholder); }
.field input:focus, .field textarea:focus { outline: none; background: var(--field-focus); }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.field input[readonly] { color: var(--secondary); }
.hint { margin-top: 16px; font-size: 15px; color: var(--quiet); }
.consent { margin-top: 16px; font-size: 13px; line-height: 1.45; color: var(--quiet); max-width: 52em; }
.link-button { min-height: 44px; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.copy .error { margin-top: 16px; }

/* Callers, as in the app's picker: Alabaster rows, each the face, the name and role, and a round play button.
   On the wake-me link they're a choice: the chosen row gets an ink outline and a check on the face. */
.voices { display: grid; gap: 12px; margin-top: 16px; }
.copy > .voices { margin: 0 0 8px; }
/* Two callers to a row only when the column has room for both names. */
@container (min-width: 540px) { form .voices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.voice {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 8px 12px 14px;
  border-radius: 20px; background: var(--tile); border: 1.5px solid transparent;
}
label.voice { cursor: pointer; }
.voice input { position: absolute; opacity: 0; pointer-events: none; }
.voice:has(input:checked) { border-color: var(--ink); }
.voice:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.voice .face { position: relative; flex: none; width: 56px; height: 56px; }
.voice .portrait { width: 56px; height: 56px; object-fit: contain; }
.voice .initial { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--ground); font-size: 26px; font-weight: 700; }
.voice .who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.voice .name { font-size: 17px; font-weight: 600; line-height: 1.25; }
.voice .role { font-size: 15px; line-height: 1.3; color: var(--quiet); }
.voice .tick {
  position: absolute; right: -5px; bottom: -3px; display: none; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--tile); background: var(--ink); color: #fff;
}
.voice .tick svg { width: 11px; height: 11px; }
.voice:has(input:checked) .tick { display: flex; }

/* A document: the title and its art stay on the left while the sections, flat cards, run down the right. */
.doc { display: grid; gap: 32px; padding: 32px 0 48px; }
.doc-art { order: -1; width: 140px; }
.doc-body { display: grid; gap: 16px; }
.doc-body section { padding: 28px 24px; border-radius: var(--card); background: var(--tile); }
.doc-body h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.doc-body p { margin-top: 10px; max-width: 66ch; line-height: 1.6; }
.doc-body a { text-underline-offset: 3px; }
@media (min-width: 900px) {
  .doc { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: 96px; padding: 72px 0 96px; }
  .doc-head { position: sticky; top: calc(var(--bar) + 56px); }
  .doc-art { order: 0; width: 220px; margin-top: 40px; }
  .doc-body { gap: 20px; }
  .doc-body section { padding: 40px 44px; }
}

@media (prefers-reduced-motion: no-preference) {
  /* The welcome comes into focus in place: a soft fade from a blur, a beat apart, no sliding. */
  .appear { animation: focus-in 1s var(--ease) both; animation-delay: calc(var(--d, 0) * 1ms); }
  @keyframes focus-in { from { opacity: 0; filter: blur(12px); } }
  /* The highlighter is drawn across the last words once the headline is in, as in the app. */
  .hero h1 mark { animation: highlight 0.8s cubic-bezier(.65, 0, .35, 1) 0.75s both; }
  @keyframes highlight { from { background-size: 0% 100%; } }
  /* Then the scene buzzes like a phone ringing on the nightstand: three short rings, then still. */
  .hero-art { animation: focus-in 1.2s var(--ease) 0.15s both, ring 3.6s ease-in-out 1.6s 3; }
  @keyframes ring {
    0%, 16%, 100% { transform: none; }
    2% { transform: rotate(-0.9deg); } 4% { transform: rotate(0.9deg); } 6% { transform: rotate(-0.7deg); }
    8% { transform: rotate(0.7deg); } 10% { transform: rotate(-0.4deg); } 12% { transform: rotate(0.4deg); }
  }
  /* A character nods along while its voice plays. */
  .caller:has(.play[aria-pressed="true"]) .portrait { animation: talk 0.36s ease-in-out infinite alternate; }
  @keyframes talk { from { transform: rotate(-1deg) scale(1); } to { transform: rotate(1.5deg) scale(1.03); } }

  @supports (animation-timeline: view()) {
    /* The bar's frost only comes in once something scrolls under it, so at the top it's the plain paper. */
    .top::before { animation: frost linear both; animation-timeline: scroll(root); animation-range: 0 48px; }
    @keyframes frost { from { opacity: 0; } }
    /* The statement takes two screens of scrolling: it pins in the middle and its words go from grey to
       ink in reading order, done a little before it moves on. */
    .statement { display: block; height: 200vh; height: 200svh; min-height: 0; padding: 0; view-timeline-name: --statement; }
    .statement .pin { position: sticky; top: 0; display: grid; place-items: center; height: 100vh; height: 100svh; }
    .statement .w { color: var(--secondary); animation: ink linear both; animation-timeline: --statement;
      animation-range: contain calc(4% + var(--p) * 78%) contain calc(12% + var(--p) * 78%); }
    @keyframes ink { to { color: var(--ink); } }
    /* Cards and art come into focus where they are as they scroll into view. */
    .rise { animation: focus-in linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
  }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }