/* The app's own palette, so the site and the product read as one thing. */
:root {
  color-scheme: light;
  --bg: #FBF5EA;
  --card: #FFFFFF;
  --ink: #1F1B16;
  --muted: #5A5145;
  --faint: #786E60;
  --accent: #B25A20;
  --accent-soft: #F9E4D3;
  --warm-soft: #FFF0A6;
  --line: #EADFCB;
  /* A form control has to be findable by its edge, which owes 3:1 against what sits either side of
     it. --line is a divider between paragraphs and nowhere near that, so controls get their own. */
  --field-line: #9C8B70;
  /* The accent reads at 4.42:1 on the cream — fine for the big headlines, short for button text. */
  --accent-strong: #A9541D;
  --bezel: #1F1B16;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.62 ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
img { max-width: 100%; }

/* ---- the bar that makes two pages feel like one thing with tabs ---- */
.bar {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.bar-in {
  max-width: 62rem; margin: 0 auto; padding: .7rem 1.25rem;
  display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: .55rem; font-weight: 800; text-decoration: none; color: var(--ink); }
.brand img { width: 30px; height: 30px; border-radius: 7px; display: block; }
.tabs { display: flex; gap: .3rem; margin-left: auto; }
.tabs a {
  text-decoration: none; color: var(--muted); font-size: .95rem; font-weight: 600;
  padding: .38rem .85rem; border-radius: 999px;
}
.tabs a:hover { color: var(--ink); }
/* aria-current does the highlighting, so the markup says which tab is open rather than a class guessing */
.tabs a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }

.wide { max-width: 62rem; margin: 0 auto; padding-inline: 1.25rem; }
.narrow { max-width: 38rem; margin: 0 auto; padding-inline: 1.25rem; }

h1 { font-size: clamp(2.1rem, 5.4vw, 3.1rem); line-height: 1.1; margin: 0 0 .8rem; letter-spacing: -.022em; text-wrap: balance; }
h2 { font-size: clamp(1.4rem, 3vw, 1.75rem); line-height: 1.22; margin: 0 0 .7rem; letter-spacing: -.012em; text-wrap: balance; }
h3 { font-size: 1.04rem; margin: 1.8rem 0 .3rem; }
p { margin: 0 0 1rem; }
a { color: var(--accent); }
.lede { font-size: clamp(1.06rem, 2.1vw, 1.22rem); color: var(--muted); }
.date { color: var(--faint); font-size: .92rem; margin-top: -.5rem; }

/* ---- a phone, with its screen drawn rather than photographed ----
   The screen is markup, not a picture. It stays sharp at any size, weighs nothing, and its words are
   real words: selectable, translatable, readable aloud, and they grow when someone has set a larger
   type size. A screenshot is none of those things.

   `container-type` lets everything inside be sized in the app's own points: 100cqw is the phone's
   width, the app is 390pt wide, so one point is 0.2564cqw. A number in this file is the same number
   in the Swift. */
.phone {
  container-type: inline-size;
  background: var(--bezel);
  border-radius: 13.5%/6.5%;
  padding: 2.6%;
  /* A hard shadow, no blur, offset down and right. A blurred one reads as a product photograph;
     this reads as something drawn, which is what it is. */
  box-shadow: 10px 12px 0 rgba(31, 27, 22, .13);
  width: 100%;
}
.screen {
  --pt: 0.2564cqw;
  background: var(--card-screen, #FBF5EA);
  border-radius: 12%/5.6%;
  aspect-ratio: 390 / 760;
  overflow: hidden;
  padding: calc(18 * var(--pt)) calc(18 * var(--pt)) 0;
  display: flex; flex-direction: column;
  font-size: calc(15 * var(--pt));
  line-height: 1.4;
  color: #1F1B16;
}
/* The screen keeps the app's light palette in both themes: it is a picture of the app, and the app
   does not change colour because the page around it did. */
.screen, .screen * { color-scheme: light; }

.s-bar { display: flex; align-items: center; justify-content: space-between; color: #D9773A; font-weight: 600; font-size: calc(13 * var(--pt)); }
.s-bar .book { width: calc(17 * var(--pt)); height: calc(21 * var(--pt)); border: calc(1.6 * var(--pt)) solid #D9773A; border-radius: calc(2 * var(--pt)); }
.s-spacer { flex: 1; }
.s-prompt { text-align: center; font-size: calc(21 * var(--pt)); line-height: 1.32; color: #1F1B16; }
.s-hint { text-align: center; color: #9A9083; font-size: calc(12 * var(--pt)); margin-top: calc(8 * var(--pt)); }
.s-modes { align-self: center; display: flex; align-items: center; gap: calc(4 * var(--pt)); background: rgba(255,255,255,.65); border-radius: 999px; padding: calc(4 * var(--pt)); margin-bottom: calc(12 * var(--pt)); }
.s-mode { display: flex; align-items: center; gap: calc(5 * var(--pt)); background: #F9E4D3; color: #B25A20; border-radius: 999px; padding: calc(6 * var(--pt)) calc(11 * var(--pt)); font-size: calc(12 * var(--pt)); font-weight: 700; }
.s-wave { display: flex; align-items: center; gap: calc(1.5 * var(--pt)); height: calc(11 * var(--pt)); }
.s-wave i { width: calc(1.8 * var(--pt)); background: #D9773A; border-radius: 999px; }
.s-mic { align-self: center; width: calc(84 * var(--pt)); height: calc(84 * var(--pt)); border-radius: 999px; background: #F6DCC7; display: grid; place-items: center; }
.s-mic span { width: calc(64 * var(--pt)); height: calc(64 * var(--pt)); border-radius: 999px; background: #D9773A; display: grid; place-items: center; }
.s-mic svg { width: calc(30 * var(--pt)); height: calc(30 * var(--pt)); }
.s-foot { text-align: center; color: #7A7062; font-size: calc(11.5 * var(--pt)); margin: calc(12 * var(--pt)) 0 calc(20 * var(--pt)); }

.s-card { background: #fff; border-radius: calc(20 * var(--pt)); padding: calc(15 * var(--pt)) calc(16 * var(--pt)); margin-bottom: calc(12 * var(--pt)); }
.s-eyebrow { font-size: calc(9.5 * var(--pt)); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #8A8073; margin-bottom: calc(8 * var(--pt)); }
.s-eyebrow.accent { color: #C2641F; }
.s-eyebrow.warm { color: #8A6A00; }
.s-said { font-size: calc(16 * var(--pt)); line-height: 1.45; }
.s-opener { font-size: calc(19 * var(--pt)); font-weight: 700; line-height: 1.3; margin-bottom: calc(12 * var(--pt)); }
.s-rule { height: calc(1 * var(--pt)); background: #EFE4D2; margin: calc(12 * var(--pt)) 0; }
.s-tick { display: flex; align-items: flex-start; gap: calc(8 * var(--pt)); margin-bottom: calc(8 * var(--pt)); }
.s-tick b { font-weight: 600; font-size: calc(15 * var(--pt)); }
.s-tick .dot { width: calc(18 * var(--pt)); height: calc(18 * var(--pt)); border-radius: 999px; background: #D9773A; display: grid; place-items: center; flex: 0 0 auto; margin-top: calc(1 * var(--pt)); }
.s-tick .dot svg { width: calc(11 * var(--pt)); height: calc(11 * var(--pt)); }
.s-tick .ring { width: calc(18 * var(--pt)); height: calc(18 * var(--pt)); border-radius: 999px; border: calc(1.6 * var(--pt)) dotted #B8AC9B; flex: 0 0 auto; margin-top: calc(1 * var(--pt)); }
.s-note { color: #7A7062; font-size: calc(12 * var(--pt)); line-height: 1.4; }
.s-alt { font-size: calc(17 * var(--pt)); line-height: 1.45; margin-bottom: calc(12 * var(--pt)); }
.s-alt mark { background: none; color: #D9A100; font-weight: 700; }
.s-pills { display: flex; gap: calc(8 * var(--pt)); }
.s-pill { background: #F9E4D3; color: #B25A20; border-radius: 999px; padding: calc(7 * var(--pt)) calc(14 * var(--pt)); font-size: calc(12.5 * var(--pt)); font-weight: 700; }
.s-card.steal { background: #FFF0A6; }
.s-phrase { font-size: calc(20 * var(--pt)); font-weight: 800; margin-bottom: calc(5 * var(--pt)); }
.s-head { display: flex; justify-content: space-between; align-items: baseline; }

.s-title { text-align: center; font-weight: 700; font-size: calc(16 * var(--pt)); margin-bottom: calc(14 * var(--pt)); }
.s-big { font-size: calc(30 * var(--pt)); font-weight: 800; line-height: 1.05; }
.s-sub { color: #7A7062; font-size: calc(12 * var(--pt)); margin-top: calc(4 * var(--pt)); }
.s-section { font-size: calc(10 * var(--pt)); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #8A8073; margin: calc(4 * var(--pt)) 0 calc(8 * var(--pt)); }
.s-row { display: flex; align-items: flex-start; gap: calc(9 * var(--pt)); padding: calc(9 * var(--pt)) 0; }
.s-row + .s-row { border-top: calc(1 * var(--pt)) solid #F0E6D5; }
.s-row svg { width: calc(14 * var(--pt)); height: calc(14 * var(--pt)); flex: 0 0 auto; margin-top: calc(3 * var(--pt)); }
.s-row b { display: block; font-size: calc(14.5 * var(--pt)); font-weight: 700; }
.s-row span { color: #7A7062; font-size: calc(11.5 * var(--pt)); }

/* ---- hero: one phone, not a shelf of them ---- */
.hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: 3.5rem; align-items: center; padding: 3.6rem 0 3.2rem; }
.hero .phone { max-width: 268px; margin-inline: auto; }
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); margin-bottom: .9rem;
}
@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; gap: 2.2rem; padding: 2.4rem 0 2.6rem; }
  .hero .phone { max-width: 232px; }
}

/* ---- the app's own cards, at page size ----
   The same markup as the phone screen, with one point redefined. Showing the pieces full width beats
   five phone-shaped thumbnails: the reader can actually read what the app said. */
.ui {
  --pt: 1.2px;
  max-width: 30rem;
  background: #FBF5EA;
  color: #1F1B16;
  border-radius: 22px;
  padding: 20px 18px 8px;
  border: 1px solid #EADFCB;
  box-shadow: 10px 12px 0 rgba(31, 27, 22, .10);
}
/* Cards are flat inside: the panel carries the depth, the cards carry the content. */
.ui .s-card { box-shadow: none; }
/* The app's palette holds in both themes — a picture of the app does not change colour because the
   page around it did. */
.ui, .ui * { color-scheme: light; }

.step { display: grid; grid-template-columns: 1fr 1fr; gap: 2.6rem; align-items: center; padding: 2.8rem 0; border-top: 1px solid var(--line); }
.step:nth-of-type(even) .copy { order: 2; }
.hl { color: var(--accent); }
h1 .hl, .step h2 .hl { display: block; }
.step .num {
  font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin-bottom: .5rem;
}
.step p { color: var(--muted); margin-bottom: 0; }
@media (max-width: 760px) {
  .step { grid-template-columns: 1fr; gap: 1.6rem; padding: 2.2rem 0; }
  .step:nth-of-type(even) .copy { order: 0; }
  .ui { max-width: none; }
}

/* ---- plain sections ---- */
.section { padding: 3rem 0; border-top: 1px solid var(--line); }
.faq { padding-top: .4rem; }
.faq p { color: var(--muted); }
.note { background: var(--warm-soft); border-radius: 16px; padding: 1.1rem 1.3rem; }
.note p:last-child { margin-bottom: 0; }

/* ---- the policy ---- */
.doc h2 { font-size: 1.2rem; margin: 2.4rem 0 .5rem; }
.doc p { max-width: 36rem; }

footer { padding: 2.4rem 0 4rem; color: var(--faint); font-size: .92rem; border-top: 1px solid var(--line); }
footer a { color: var(--faint); }

/* ---- bits the five panels need ---- */
/* The page has a name for screen readers and search engines; on screen the panels say it better. */
.sr-lede { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.s-card.faded { opacity: .5; }
.s-card.yours { background: #FAEBD1; }
.s-card.row-card { display: flex; align-items: baseline; gap: calc(8 * var(--pt)); flex-wrap: wrap; }
.s-card.row-card .s-eyebrow { margin: 0; flex: 1 0 auto; }
.s-card.row-card .s-sub { margin: 0; }
.s-rule.warm { background: rgba(138, 106, 0, .22); }
.s-note.italic { font-style: italic; }
.s-pills.tight { margin: calc(10 * var(--pt)) 0 0; }
.s-ghost {
  border: calc(1.4 * var(--pt)) solid #E6DBC8; border-radius: 999px;
  padding: calc(5 * var(--pt)) calc(11 * var(--pt));
  font-size: calc(11 * var(--pt)); font-weight: 600; color: #5A5145;
}
.s-try {
  display: inline-flex; align-items: center; gap: calc(6 * var(--pt));
  background: #1F1B16; color: #FFF0A6; border-radius: 999px;
  padding: calc(7 * var(--pt)) calc(14 * var(--pt));
  font-size: calc(12 * var(--pt)); font-weight: 700; margin-top: calc(10 * var(--pt));
}
.s-try svg { width: calc(13 * var(--pt)); height: calc(13 * var(--pt)); }
.s-mic.small { width: calc(46 * var(--pt)); height: calc(46 * var(--pt)); margin: calc(10 * var(--pt)) auto 0; }
.s-mic.small span { width: calc(46 * var(--pt)); height: calc(46 * var(--pt)); }
.s-mic.small svg { width: calc(20 * var(--pt)); height: calc(20 * var(--pt)); }
.s-row.plain { border: 0; padding: 0; }
.s-row b.inline { display: inline; font-size: inherit; }
.narrow-in { max-width: 38rem; }

/* ---- the feedback box ----
   A mailto link dressed as a form. It collects nothing, so it needs no consent line and no backend;
   what it buys over the bare address above is that people actually say which iPhone they have. */
.fb { margin: 1.6rem 0 .5rem; }
.fb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.fb-field { margin: 0 0 1rem; }
.fb-field label {
  display: block; font-size: .78rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); margin-bottom: .4rem;
}
.fb-field label span { font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--faint); }
.fb input, .fb select, .fb textarea {
  width: 100%;
  font: inherit; font-size: 1rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--field-line);
  border-radius: 12px;
  padding: .7rem .85rem;
}
.fb textarea { resize: vertical; min-height: 7.5rem; line-height: 1.55; }
.fb input::placeholder, .fb textarea::placeholder { color: var(--faint); }
.fb :is(input, select, textarea):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.fb-actions { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; margin: 0; }
.btn {
  font: inherit; font-size: .98rem; font-weight: 700;
  border-radius: 999px; padding: .62rem 1.3rem;
  /* 44px is the smallest target a thumb reliably hits; the text alone left it at about 40. */
  min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #FFF7EF;
  border: 1px solid var(--accent);
  text-decoration: none; cursor: pointer;
}
.btn.ghost { background: transparent; color: var(--accent-strong); border-color: var(--field-line); }
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.fb-note { color: var(--faint); font-size: .88rem; margin: .9rem 0 0; }
.fb-status { color: var(--accent-strong); font-weight: 600; font-size: .88rem; margin: .4rem 0 0; min-height: 1.4em; }
@media (max-width: 560px) {
  .fb-grid { grid-template-columns: 1fr; gap: 0; }
}