/* Elmtale web styles, following docs/DESIGN.md. No inline styles or style= attributes (CSP). */

@font-face { font-family: 'Fraunces'; font-weight: 400; font-style: normal; font-display: swap; src: url('/assets/fonts/fraunces-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-weight: 400; font-style: italic; font-display: swap; src: url('/assets/fonts/fraunces-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-weight: 500; font-style: normal; font-display: swap; src: url('/assets/fonts/fraunces-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-weight: 600; font-style: normal; font-display: swap; src: url('/assets/fonts/fraunces-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Figtree'; font-weight: 400; font-style: normal; font-display: swap; src: url('/assets/fonts/figtree-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Figtree'; font-weight: 500; font-style: normal; font-display: swap; src: url('/assets/fonts/figtree-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Figtree'; font-weight: 600; font-style: normal; font-display: swap; src: url('/assets/fonts/figtree-latin-600-normal.woff2') format('woff2'); }

:root {
  /* Phone bottom bars fade into the page instead of sitting on a ruled white strip. */
  --bar-fade: 24px;
  /* A bar's full height, fade included: a 48px button between --space-3 paddings. Pages pad their bottom by it. */
  --bar-height: calc(48px + 2 * var(--space-3) + var(--bar-fade));
  /* Premium palette: cream paper, espresso ink, sage green, clay accents. Contrast on --paper: ink 15:1, muted 9:1, accent 7.4:1, clay 6:1. */
  --paper: #fbf7f0;
  --paper-deep: #f3ece0;
  --surface: #fffdf9;
  --ink: #231e1a;
  --muted: #4a423b;
  --faint: #6b6158;
  --rule: #e6ddcf;
  --hair: rgb(35 30 26 / 0.1);
  --field-border: #8f8579;
  --accent: #2f5a49;
  --accent-hover: #22443a;
  --accent-soft: #e3ebe4;
  /* A section tint between paper and accent-soft, so neighbouring landing sections read apart. */
  --sage-band: #eef2ec;
  --accent-line: #c5d7cb;
  --accent-faint: #eef3ee;
  --clay: #9c4a2b;
  --clay-soft: #f6e6da;
  --ok-ink: #2f5a49;
  --ok-bg: #e3ebe4;
  --warn-ink: #7a5a12;
  --warn-bg: #f7eccf;
  --error: #a1131b;
  --error-bg: #fdecec;
  --error-hover: #82101a;
  --error-faint: #fffafa;
  --info-bg: #e6eee8;

  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --max: 1120px;
  --gutter: 24px;
  --radius-panel: 24px;
  --radius: 14px;
  --radius-tile: 12px;
  /* The calm app: cards at 12px, buttons at 10px, fields at 8px; no pills, no trays. */
  --radius-card: 12px;
  --radius-button: 10px;
  --radius-field: 8px;
  /* Paper trays: a hairline drawn as a shadow and a soft, wide drop shadow instead of a grey box. */
  --shadow-card: 0 0 0 1px var(--hair), 0 1px 2px rgb(60 40 20 / 0.05), 0 14px 32px -16px rgb(60 40 20 / 0.2);
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --section-pad: 80px;
}
@media (max-width: 759px) { :root { --gutter: 16px; --section-pad: 40px; } }

* { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.6 var(--sans); min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; }
/* Paper grain: a faint noise tile in the page background. */
body { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .15 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
main { flex: 1 0 auto; }
/* The Next.js front end renders the page inside <div id="__next">; it must not change the layout. */
#__next { display: contents; }
img { max-width: 100%; height: auto; }
a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-hover); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
a, button, summary { -webkit-tap-highlight-color: rgb(47 90 73 / 0.12); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 60; padding: 12px 18px; border-radius: var(--radius-button); background: var(--accent); color: #fff; font-weight: 600; }
@media (min-width: 760px) { .phone-only { display: none !important; } }
@media (max-width: 759px) { .desktop-only { display: none !important; } }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

a, button, input, select, textarea, summary { transition: color 150ms, background-color 150ms, border-color 150ms, transform 300ms var(--ease); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

h1, h2, h3, h4, .display, .section-title { font-family: var(--serif); font-weight: 500; letter-spacing: -0.015em; color: var(--ink); text-wrap: balance; margin: 0; }
.display { font-size: 4.25rem; line-height: 1.03; letter-spacing: -0.02em; }
:is(h1, h2, .display, .section-title, .story-q) em { font-style: italic; font-weight: 400; color: var(--accent); }
h1 { font-size: 3rem; line-height: 1.1; margin-bottom: var(--space-3); }
.section-title { font-size: 3.25rem; line-height: 1.08; letter-spacing: -0.02em; }
h2 { font-size: 2rem; line-height: 1.2; margin: var(--space-7) 0 var(--space-3); }
h3 { font-size: 1.5rem; line-height: 1.25; margin: var(--space-5) 0 var(--space-2); }
h4 { font-size: 1.125rem; line-height: 1.3; margin: 0 0 var(--space-2); }
p { margin: 0 0 var(--space-4); text-wrap: pretty; }
.lede { font-size: 1.25rem; line-height: 1.5; color: var(--muted); max-width: 34em; }
.muted { color: var(--muted); }
.small { font-size: 0.9375rem; line-height: 1.5; }
.eyebrow { display: block; font: 600 0.875rem/1.2 var(--sans); text-transform: uppercase; letter-spacing: 0.1em; color: var(--clay); margin: 0 0 var(--space-3); }
.eyebrow.pill { display: inline-flex; align-items: center; width: fit-content; padding: 6px 14px; border-radius: 999px; background: var(--clay-soft); }
.eyebrow.pill.sage { background: var(--accent-soft); color: var(--accent); }
@media (max-width: 759px) {
  .display { font-size: 2.75rem; line-height: 1.04; }
  h1 { font-size: 2.25rem; }
  .section-title { font-size: 2.25rem; line-height: 1.1; }
  h2 { font-size: 1.625rem; }
  h3 { font-size: 1.375rem; }
  .lede { font-size: 1.125rem; }
}

.container { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.page { padding-top: var(--space-7); padding-bottom: var(--space-8); }
/* Pages that start with a back button keep it close under the header. */
.page:has(.back-row), .page:has(.step-top) { padding-top: var(--space-5); }
@media (max-width: 759px) { .page:has(.back-row), .page:has(.step-top) { padding-top: var(--space-3); } }
.narrow { max-width: 560px; }
.reading { max-width: 680px; }

.site-header { position: relative; z-index: 10; background: rgb(251 247 240 / 0.9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--hair), 0 10px 30px -22px rgb(60 40 20 / 0.4); }
.site-header .inner { display: flex; align-items: center; gap: var(--space-4); min-height: 72px; }
.brand { display: inline-flex; align-items: center; gap: var(--space-3); margin-right: auto; color: var(--ink); text-decoration: none; }
.brand:hover { color: var(--ink); }
.brand img { width: 40px; height: 40px; }
.wordmark { font: 600 1.75rem/1 var(--serif); }
.nav-desktop { display: flex; align-items: center; gap: var(--space-1); }
.nav-link, .link-button {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-4); border-radius: var(--radius-field);
  font: 500 1rem/1 var(--sans); color: var(--muted); text-decoration: none; background: none; border: 0; cursor: pointer;
}
.nav-link:hover, .link-button:hover { background: var(--paper-deep); color: var(--ink); text-decoration: none; }
.nav-link[aria-current='page'] { background: var(--paper-deep); color: var(--ink); }
.nav-desktop .button { margin-left: var(--space-3); }
/* Tablet widths: the full nav fits on one line. */
@media (min-width: 760px) and (max-width: 1023px) {
  .nav-desktop .nav-link, .nav-desktop .link-button { padding-inline: var(--space-2); font-size: 0.9375rem; white-space: nowrap; }
  .nav-desktop .button { margin-left: var(--space-2); white-space: nowrap; }
}
.inline-form { display: inline; margin: 0; }

.menu { display: none; }
.menu > summary {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-2);
  font: 500 1rem/1 var(--sans); cursor: pointer; list-style: none; border-radius: var(--radius);
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary .icon { width: 24px; height: 24px; }
.menu > summary { padding: 0 var(--space-4); border-radius: var(--radius-button); background: var(--paper-deep); font-weight: 600; }
.menu-sheet { position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); box-shadow: 0 18px 30px -20px rgb(60 40 20 / 0.35); padding: 0 var(--gutter) var(--space-4); }
.menu-sheet .nav-link, .menu-sheet .link-button { display: flex; width: 100%; min-height: 56px; padding: 0; border-radius: 0; border-bottom: 1px solid var(--rule); color: var(--ink); font-size: 1.125rem; }
.menu-sheet .nav-link:hover, .menu-sheet .link-button:hover { background: none; color: var(--accent); }
.menu-sheet .inline-form { display: block; }
.menu-sheet .button { width: 100%; margin-top: var(--space-4); }
/* Phones keep the header at the top while the page scrolls; anchors and scrolled-to fields stop below it. */
@media (max-width: 759px) {
  html { scroll-padding-top: calc(64px + var(--space-3)); }
  .site-header { position: sticky; top: 0; }
  .menu-sheet { max-height: calc(100dvh - 64px); overflow-y: auto; }
  .site-header .inner { min-height: 64px; }
  .brand img { width: 32px; height: 32px; }
  .wordmark { font-size: 1.5rem; }
  .nav-desktop { display: none; }
  .menu { display: block; }
}
/* Wider screens keep the header at the top too; sticky side cards and anchors stop below it. */
@media (min-width: 760px) {
  html { scroll-padding-top: calc(72px + var(--space-3)); }
  .site-header { position: sticky; top: 0; }
}

.button, button.primary, button.secondary, button.danger, button.danger-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); min-height: 48px; padding: 0 var(--space-5);
  border: 1.5px solid var(--accent); border-radius: var(--radius-button); background: var(--accent); color: #fffdf8;
  font: 600 1.0625rem/1.2 var(--sans); text-align: center; text-decoration: none; cursor: pointer;
}
.button:active, button.primary:active, button.secondary:active { transform: scale(0.98); }
.button:hover, button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; text-decoration: none; }
.button.secondary, button.secondary { border-color: var(--accent); background: var(--surface); color: var(--accent); }
.button.secondary:hover, button.secondary:hover { border-color: var(--accent-hover); background: var(--accent-faint); color: var(--accent-hover); }
button.danger { border-color: var(--error); background: var(--error); color: #fff; }
button.danger:hover { border-color: var(--error-hover); background: var(--error-hover); }
button.danger-outline { border-color: var(--error); background: var(--surface); color: var(--error); }
button.danger-outline:hover { border-color: var(--error-hover); background: var(--error-faint); color: var(--error-hover); }
.button.sm, button.sm { min-height: 44px; padding: 0 var(--space-5); font-size: 1rem; }
button.secondary:disabled, button.secondary:disabled:hover { border-color: var(--rule); background: var(--surface); color: var(--muted); cursor: default; }
/* A busy button keeps its look; its words say it is working. */
button[data-busy]:disabled { cursor: progress; }
summary.button { list-style: none; }
summary.button::-webkit-details-marker { display: none; }
.button.lg { min-height: 56px; font-size: 1.125rem; }
.button.block, button.block { width: 100%; }
.button .icon, button .icon { width: 20px; height: 20px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-5); }
.actions > details[open] { flex-basis: 100%; }
.stack > .actions { margin-top: 0; }
/*
 * Phones never stack buttons of different widths: a lone action fills the row, .split pairs actions two to a row,
 * .lead gives the first its own row and pairs the rest, .even keeps one row of equal buttons (icon buttons stay square).
 */
@media (max-width: 759px) {
  .actions { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; }
  .actions.split, .actions.lead { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .actions.split > :last-child:nth-child(odd), .actions.lead > :first-child, .actions.lead > :last-child:nth-child(even), .actions:has(> details[open]) > * { grid-column: 1 / -1; }
  .actions.even { display: flex; flex-wrap: nowrap; }
  .actions.even > * { flex: 1 1 0; min-width: 0; }
  .actions.even > :has(> .icon-only) { flex: none; }
  .actions > form { display: grid; }
  .actions > form > button:not(.icon-only), .actions > details > summary { width: 100%; }
  :is(.actions.split, .actions.lead) :is(.button, button) { padding: 0 var(--space-3); }
  /* A link's padding counts toward its flex basis but a form's button's does not, so even rows go without it. */
  .actions.even :is(.button, button):not(.icon-only) { padding: 0; }
  details > summary.button { display: flex; }
}

form.stack { display: grid; gap: 20px; }
.field { display: grid; gap: 6px; min-width: 0; margin: 0; }
.field label, .label { font: 400 1rem/1.4 var(--sans); color: var(--ink); }
.hint { color: var(--muted); font-size: 0.9375rem; line-height: 1.5; }
.optional { color: var(--muted); }
/* The info button follows the label's last word, even when the label wraps. */
.label-row > label { display: inline; }
.info-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -12px -8px -12px -6px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); vertical-align: middle; cursor: pointer; }
.info-toggle:hover, .info-toggle[aria-expanded='true'] { color: var(--accent); }
.info-toggle .icon { width: 18px; height: 18px; }
/* The password's Show/Hide ends its label's line; the 44px tap area reaches past the line without moving the field. */
.label-row:has(> .reveal) { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.reveal { min-height: 44px; margin: -10px -12px; padding: 0 12px; border: 0; background: none; color: var(--accent); font: 500 1rem/1.2 var(--sans); cursor: pointer; }
.reveal:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; }
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=date], select, textarea {
  width: 100%; min-height: 52px; padding: 0 var(--space-4); font: 400 1.0625rem/1.4 var(--sans); color: var(--ink);
  background: var(--surface); border: 1px solid var(--field-border); border-radius: var(--radius-field);
}
textarea { min-height: 96px; padding: var(--space-3) var(--space-4); line-height: 1.6; resize: vertical; }
select {
  appearance: none; padding-right: 44px; cursor: pointer;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%231c1b19' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center;
}
/* iOS Safari gives date inputs an intrinsic width and centred text; these keep them the same box as the other fields. */
input[type=date] { display: block; min-width: 0; max-width: 100%; height: 52px; -webkit-appearance: none; appearance: none; text-align: left; line-height: 50px; }
input[type=date]::-webkit-date-and-time-value { margin: 0; text-align: left; }
input[type=date]::-webkit-datetime-edit { padding: 0; }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--accent); }
::placeholder { color: var(--muted); opacity: 1; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border: 2px solid var(--error); }
.error-text { display: flex; align-items: flex-start; gap: 6px; color: var(--error); font-size: 0.9375rem; line-height: 1.4; }
.error-text::before {
  content: ''; flex: none; width: 18px; height: 18px; margin-top: 1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1131b' stroke-width='1.75' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5v.01'/%3E%3C/svg%3E") no-repeat center / contain;
}
.row { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .row.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .row.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 759px) { form.stack, .row { gap: 16px; } }
/*
 * /start on wider screens pairs the two names, then the buyer's name and how they are related; phones keep the markup
 * order. Those fields open into the row's grid, so each pair's labels share a grid row and their controls the next,
 * even when one label wraps or one of them shows an error.
 */
@media (min-width: 760px) {
  .setup.funnel .row.two { row-gap: 0; }
  .setup.funnel .row.two > :is(.field, .stack-tight), .setup.funnel .row.two > .stack-tight > .field { display: contents; }
  .setup.funnel .row.two > .field > *, .setup.funnel .row.two > .stack-tight > .field > * { margin: 6px 0 0; }
  .setup.funnel .row.two > :is(.field:has(#f-name), .field:has(#f-buyerName)) > * { grid-column: 1; }
  .setup.funnel .row.two > .field:has(#f-preferredName) > *, .setup.funnel .row.two > .stack-tight > .field > * { grid-column: 2; }
  .setup.funnel .row.two > :is(.field:has(#f-name), .field:has(#f-preferredName)) > label { grid-row: 1; margin-top: 0; }
  .setup.funnel .row.two :is(#f-name, #f-preferredName) { grid-row: 2; }
  .setup.funnel .row.two > :is(.field:has(#f-name), .field:has(#f-preferredName)) > .error-text { grid-row: 3; }
  .setup.funnel .row.two > .field > .label-row, .setup.funnel .row.two > .stack-tight > .field > label { grid-row: 4; margin-top: 20px; }
  .setup.funnel .row.two .hint[id$='-tip'] { grid-row: 5; }
  .setup.funnel .row.two :is(#f-buyerName, #f-relationship) { grid-row: 6; }
  .setup.funnel .row.two > .field:has(#f-buyerName) > .error-text, .setup.funnel .row.two > .stack-tight > .field > .error-text { grid-row: 7; }
  .setup.funnel .row.two > .stack-tight > [data-other-relationship] { grid-column: 2; grid-row: 8; margin-top: 20px; }
  .setup.funnel .row.two .label-row { font: 400 1rem/1.4 var(--sans); }
  .setup.funnel .row.two .info-toggle { margin-block: -11px; vertical-align: top; }
}
fieldset { border: 1px solid var(--rule); border-radius: var(--radius-card); padding: var(--space-5); margin: 0; background: var(--surface); display: grid; gap: 20px; }
legend { font: 600 1.375rem/1.2 var(--serif); padding: 0 var(--space-2); }

.notice { display: flex; align-items: flex-start; gap: var(--space-4); margin: 0 0 var(--space-5); padding: var(--space-4) 20px; border-radius: var(--radius-button); font-size: 1.0625rem; line-height: 1.5; }
.notice > .icon { width: 24px; height: 24px; margin-top: 1px; }
.notice > .notice-body { flex: 1; min-width: 0; }
.notice.info { background: var(--info-bg); color: var(--ink); }
.notice.info > .icon, .notice.ok { color: var(--ok-ink); }
.notice.ok { background: var(--ok-bg); }
.notice.warn { background: var(--warn-bg); color: var(--warn-ink); }
.notice.error { background: var(--error-bg); color: var(--error); }
.notice a { color: inherit; font-weight: 500; }

.badge { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 14px; border-radius: 999px; font: 400 0.9375rem/1.2 var(--sans); background: var(--ok-bg); color: var(--ok-ink); }
.badge.warn { background: var(--warn-bg); color: var(--warn-ink); }
.badge.bad { background: var(--error-bg); color: var(--error); }
.badge.good { background: var(--ok-bg); color: var(--ok-ink); }

.card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-card); padding: var(--space-5); }
.card > h3:first-child, .card > h2:first-child { margin-top: 0; }
.cards { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 760px) { .cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 759px) { .card { padding: 20px; } }
.panel { border-radius: var(--radius-panel); padding: var(--space-6); background: var(--paper-deep); }
.panel.sage { background: var(--accent-soft); }

.price { font: 600 2.5rem/1 var(--serif); font-variant-numeric: tabular-nums; margin: var(--space-3) 0 var(--space-1); }
.price .currency { font-size: 0.6em; vertical-align: 0.55em; margin-right: 1px; }

.stepper { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-6); padding: 0; list-style: none; counter-reset: step; }
.stepper li { display: flex; align-items: center; gap: var(--space-3); color: var(--muted); counter-increment: step; }
.stepper li + li::before { content: ''; width: 48px; height: 1px; background: var(--rule); }
.stepper .dot { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--field-border); font-weight: 500; }
.stepper .done .dot, .stepper [aria-current='step'] .dot { background: var(--accent); border-color: var(--accent); color: #fff; }
.stepper [aria-current='step'] { color: var(--ink); font-weight: 600; }
@media (max-width: 759px) { .stepper .step-label { display: none; } .stepper li + li::before { width: 24px; } }

.quote { margin: 0; }
.quote blockquote { position: relative; margin: 0; padding-left: 52px; font: italic 400 1.375rem/1.4 var(--serif); color: var(--ink); }
.quote blockquote::before { content: '\201C'; position: absolute; left: 0; top: -6px; font: 400 3.75rem/1 var(--serif); color: var(--clay); }
.quote blockquote p { margin: 0; }
.quote.ruled blockquote { border-left: 3px solid var(--clay); padding-left: var(--space-5); }
.quote.ruled blockquote::before { position: static; display: block; height: 32px; }
.quote figcaption { margin-top: var(--space-2); padding-left: 52px; color: var(--muted); font-size: 0.9375rem; }
@media (max-width: 759px) { .quote blockquote { font-size: 1.25rem; } }

audio { width: 100%; margin: var(--space-2) 0 var(--space-4); }

.empty { text-align: center; padding: var(--space-7) var(--space-5); }
.empty img { width: 320px; margin: 0 auto var(--space-4); }
.empty h2 { margin-top: 0; }
.empty p { max-width: 32em; margin-left: auto; margin-right: auto; color: var(--muted); }
@media (max-width: 759px) { .empty img { width: 240px; } }

.site-footer { background: var(--paper-deep); padding: var(--space-7) 0; }
.site-footer .inner { display: flex; align-items: center; gap: var(--space-6); }
.site-footer .brand { margin-right: 0; flex: none; }
.site-footer .brand img { width: 32px; height: 32px; }
.site-footer .wordmark { font-size: 1.5rem; }
.site-footer .about { flex: 1; margin: 0; color: var(--muted); font-size: 0.9375rem; }
.site-footer nav { display: flex; gap: var(--space-5); }
.site-footer nav a { color: var(--ink); font-size: 0.9375rem; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.site-footer nav a:hover { color: var(--accent); text-decoration: underline; }
@media (max-width: 759px) { .site-footer .inner { flex-direction: column; align-items: flex-start; gap: var(--space-3); } }

/* Signed-in pages (mockups 04-11). */
[hidden] { display: none !important; }
.center { text-align: center; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }
.page-head .lede { margin: 0; }
.back-row { display: flex; margin: 0 0 var(--space-4); }
.back-button { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--rule); border-radius: 50%; background: var(--surface); color: var(--ink); text-decoration: none; }
.back-button:hover { border-color: var(--accent); color: var(--accent); }
.back-button .icon { width: 22px; height: 22px; }
.notice-body:has(.notice-action) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5); }
@media (max-width: 759px) { .notice-action { flex: 1 1 100%; } }
.divider { width: 100%; margin: var(--space-2) 0; border: 0; border-top: 1px solid var(--rule); }
.badge.neutral { background: var(--paper-deep); color: var(--ink); }
.badge .icon { width: 16px; height: 16px; stroke-width: 2.25; }
.with-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.side { display: grid; gap: var(--space-5); align-content: start; }
@media (min-width: 1024px) {
  .with-side { grid-template-columns: minmax(0, 1fr) 400px; }
  .with-side.wide-side { grid-template-columns: minmax(0, 1fr) 440px; }
  .side.sticky { position: sticky; top: calc(72px + var(--space-5)); }
}
@media (max-width: 759px) { .page-head > .button { width: 100%; } }




.strip { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: var(--space-4) var(--space-5); margin: var(--space-6) 0 0; padding: 0; list-style: none; }
.strip li { display: flex; align-items: baseline; gap: var(--space-3); color: var(--muted); }
.strip li + li::before { content: '\2192'; margin-right: var(--space-4); }
.strip .n { font: 400 2.5rem/1 var(--serif); color: var(--clay); }
@media (max-width: 759px) { .strip { flex-direction: column; align-items: flex-start; } .strip li + li::before { display: none; } }
.empty.compact { padding: var(--space-5); }
.empty.compact img { width: 200px; }
.empty.compact p { margin-bottom: 0; }

.story { border-top: 1px solid var(--rule); padding: var(--space-4) 0; }
.story h3 { margin: 0 0 var(--space-1); }
.story .story-when { margin: 0 0 var(--space-1); }
.story blockquote { margin: 10px 0 0; padding-left: var(--space-5); border-left: 3px solid var(--clay); font: italic 1.375rem/1.4 var(--serif); }
.chapter p { font: 400 1.1875rem/1.7 var(--serif); max-width: 34em; }
.prewrap { white-space: pre-line; }

.stepper li + li { flex: 1 1 auto; }
.stepper li + li::before { flex: 1 1 24px; min-width: 24px; width: auto; }
.stepper a { display: flex; align-items: center; gap: var(--space-3); color: inherit; text-decoration: none; }
.stepper a:hover .step-label { text-decoration: underline; }
.stepper .done .dot .icon { width: 18px; height: 18px; stroke-width: 2.25; }
.stepper .done { color: var(--muted); }
[data-setup-steps] .dot { width: 44px; height: 44px; font-size: 1.125rem; }
@media (max-width: 759px) {
  .stepper, .stepper li, .stepper a { gap: var(--space-2); }
  .stepper li + li::before { min-width: 12px; }
  [data-setup-steps] .dot { width: 36px; height: 36px; font-size: 1rem; }
}

.package-rows { display: grid; gap: var(--space-4); margin: var(--space-5) 0 0; padding: 0; border: 0; background: none; box-shadow: none; }
.package-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 14px; padding: var(--space-5); background: var(--surface); border: 1.5px solid transparent; border-radius: var(--radius-panel); box-shadow: var(--shadow-card); cursor: pointer; }
.package-row:has(input:checked) { background: var(--accent-soft); border: 1.5px solid var(--accent); }
.package-row input { width: 24px; height: 24px; margin: 6px 0 0; accent-color: var(--accent); }
.pr-main { display: grid; gap: var(--space-1); }
.pr-title { font: 600 1.5rem/1.25 var(--serif); }
.pr-facts { color: var(--muted); }
.package-row .price { margin: 0; font-size: 1.75rem; }
/* The chosen package opens to what it brings, under a rule, the words lined up with its name past the 24px radio. */
.pr-more { display: none; grid-column: 1 / -1; align-items: center; gap: 14px; padding: 14px 0 0 38px; border-top: 1px solid var(--accent-soft); color: var(--muted); }
.package-row input:checked ~ .pr-more { display: flex; }
.pr-more > span { flex: 1; }
/* The book sits on its own white tile instead of blending into the row like the spot art elsewhere. */
.pr-more picture img { display: block; width: 64px; height: 64px; border-radius: var(--radius); object-fit: cover; mix-blend-mode: normal; }
/* The offer: the book, always in the order, then more time to tick on top of it. */
.book-row { cursor: default; }
.book-row .pr-more { display: flex; }
.br-check { display: grid; place-items: center; width: 24px; height: 24px; margin-top: 4px; border-radius: 50%; background: var(--accent); color: #fff; }
.br-check .icon { width: 15px; height: 15px; stroke-width: 2.75; }
.sale-price { display: grid; justify-items: end; gap: 2px; }
.sale-price .price { margin: 0; }
.sale-price s { color: var(--faint); font-size: 1rem; }
.add-ons { display: grid; gap: inherit; margin: var(--space-4) 0 0; padding: 0; border: 0; background: none; }
.package-rows fieldset.add-ons > legend:not(.visually-hidden) { margin: 0 0 var(--space-3); padding: 0; font: 500 1.375rem/1.3 var(--serif); }
.add-on-row input[type=radio] { width: 24px; height: 24px; margin: 4px 0 0; accent-color: var(--accent); }
.add-on-price { color: var(--accent-hover); font-weight: 600; white-space: nowrap; }
.summary { display: grid; gap: var(--space-2); }
.summary h3 { margin: 0; }
.summary p { margin: 0; }
.summary .total { display: flex; align-items: center; justify-content: space-between; margin: var(--space-2) 0; padding-top: var(--space-4); border-top: 1px solid var(--rule); font: 600 1.5rem/1 var(--serif); }
.summary .total .price { margin: 0; font-size: 2rem; }
.summary form { margin: 0; }
.includes-title { margin: var(--space-6) 0 var(--space-3); font-size: 1.375rem; }
.checks { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.checks li { display: flex; align-items: center; gap: var(--space-3); color: var(--muted); }
.checks .check-dot { background: var(--accent); color: #fff; }

.setup-step { margin-bottom: var(--space-6); scroll-margin-top: var(--space-5); }
.account .card + .card { margin-top: var(--space-5); }
.form-card { display: grid; gap: 20px; padding: 40px; }
.form-card h2 { margin: 0; }
.form-card > p { margin: 0; }
.stack-tight { display: grid; align-content: start; gap: var(--space-3); }
.row .field { align-content: start; }
h1[tabindex='-1']:focus { outline: none; }
.titled .field > label, .titled .field > .label-row { order: -2; }
.titled .field label { font: 600 1.5rem/1.25 var(--serif); }
.titled .optional { font: 400 1rem/1.4 var(--sans); }
.titled .field > .hint { order: -1; }
#f-background { min-height: 160px; }
.step-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-2); padding-top: var(--space-5); border-top: 1px solid var(--rule); }
.side-panel { display: grid; align-content: start; gap: var(--space-3); }
.side-panel h3 { margin: 0; font-size: 1.875rem; }
.side-panel p { margin: 0; color: var(--muted); font-size: 1.125rem; }
.side-panel img { width: 100%; max-width: 360px; margin: 0 auto var(--space-3); }
.side-panel.example .quote blockquote { font-size: 1.5rem; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip { position: relative; min-height: 40px; padding: 0 var(--space-4); border: 1px solid var(--accent); border-radius: 999px; background: var(--surface); color: var(--accent); font: 400 0.9375rem/1 var(--sans); cursor: pointer; }
/* The tap area reaches 44px without growing the chip. */
.chip::after { content: ''; position: absolute; inset: -3px 0; }
.chip:hover { background: var(--accent-faint); }
.chip[aria-pressed='true'] { background: var(--accent); color: #fff; }
.question-rows { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.question-rows li { position: relative; }
/* A row is one line until its question wraps, then web.js grows it; the trash stays beside the first line. */
.question-rows textarea { display: block; min-height: 48px; padding: 11px 52px 11px var(--space-4); line-height: 1.4; resize: none; overflow: hidden; }
.question-rows .remove-row { position: absolute; top: 2px; right: 2px; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius); background: none; color: var(--muted); cursor: pointer; }
.question-rows .remove-row:hover { color: var(--error); }
.question-rows .remove-row .icon { width: 20px; height: 20px; }
.add-row { display: inline-flex; align-items: center; gap: 6px; justify-self: start; min-height: 44px; padding: 0; border: 0; background: none; color: var(--accent); font: 500 1rem/1.2 var(--sans); cursor: pointer; }
.add-row:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; }
.add-row:disabled { color: var(--muted); text-decoration: none; cursor: default; }
.add-row .icon { width: 18px; height: 18px; }
.day-picker { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.day-picker legend { margin-bottom: 6px; padding: 0; font: 400 1rem/1.4 var(--sans); }
.day-tiles { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-2); }
.day-tiles label { position: relative; }
.day-tiles input { position: absolute; inset: 0; margin: 0; opacity: 0; }
.day-tiles .tile { display: flex; align-items: center; justify-content: center; min-height: 56px; border: 1px solid var(--field-border); border-radius: var(--radius-tile); background: var(--surface); cursor: pointer; }
.day-tiles input:checked + .tile { background: var(--accent); border-color: var(--accent); color: #fff; }
.day-tiles input:focus-visible + .tile { outline: 3px solid var(--accent); outline-offset: 2px; }
.day-picker.has-error .tile { border: 2px solid var(--error); }
@media (max-width: 479px) { .day-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.plan-fields { display: grid; gap: 20px; }
.plan-fields > .hint { margin: -12px 0 0; }
/* The call mode shows its own fields without script: a schedule's day and rhythm, or one conversation's date. */
form:has([name='mode'][value='single']:checked) [data-weekly-only],
form:has([name='mode'][value='weekly']:checked) [data-single-only] { display: none; }
/*
 * Setup's call time: the number the calls go to under the title, then the plan as one sentence with its first dates
 * and Change, which opens the choices under a rule. Without script only the choices show. The mode's two radios read
 * as a link to the other mode.
 */
.time-step { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
.calls-to { margin: -2px 0 0; color: var(--muted); font-size: 1rem; line-height: 1.45; }
.plan-summary { display: grid; justify-items: start; }
.plan-summary p { margin: 0; }
.plan-sentence { font: 500 1.4375rem/1.3 var(--serif); }
.plan-summary .plan-dates { margin-top: 10px; color: var(--muted); font-size: 1rem; line-height: 1.5; }
.plan-dates:empty { display: none; }
.plan-toggle { display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px; padding: 0; border: 0; background: none; color: var(--accent); font: 600 1.0625rem/1.2 var(--sans); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; cursor: pointer; }
.plan-toggle:hover { color: var(--accent-hover); text-decoration-thickness: 2px; }
.plan-choices { display: grid; gap: 18px; }
.plan-summary:not([hidden]) + .plan-choices { margin-top: -10px; padding-top: 18px; border-top: 1px solid var(--rule); }
.plan-choices > .zone-note { margin: -12px 0 0; }
.plan-choices .day-tiles .tile { min-height: 48px; border-radius: var(--radius-tile); }
.plan-choices .day-tiles.pills .tile { min-height: 48px; }
.plan-mode { display: block; margin: 0; padding: 0; border: 0; background: none; }
.plan-mode label { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; cursor: pointer; }
.plan-mode label:hover { color: var(--accent-hover); text-decoration-thickness: 2px; }
.plan-mode:has(input:focus-visible) label { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
/* On setup's own phone step a problem with the number shows above the note under it. */
.setup [data-step='phone'] .field > .hint { order: 1; }
.call-plan { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin: 0 0 var(--space-4); padding: 0 0 var(--space-4); border-bottom: 1px solid var(--rule); }
.call-plan .eyebrow { margin: 0; }
.call-plan-text { margin: 2px 0 0; font: 400 1.125rem/1.4 var(--serif); }
.plan-change { flex-basis: 100%; }
.plan-change[open] > summary { margin-bottom: var(--space-4); }
.call-plan > .plan-change:not([open]) { flex-basis: auto; }
.plan-sheet .plan-form { display: grid; gap: var(--space-4); }
.plan-sheet .plan-form p { margin: 0; }

/* The Book tab's plan: one hairline row per recommended chapter, marked covered (filled), started (half) or not yet (open). */
.book-plan { margin-bottom: var(--space-6); }
.book-plan h2 { margin-top: 0; }
.plan-count { margin: 0 0 var(--space-2); font: 400 1.1875rem/1.35 var(--serif); }
.plan-bar { display: block; width: 100%; height: 8px; margin: 0 0 var(--space-3); border: 0; border-radius: 999px; background: var(--paper-deep); color: var(--accent); appearance: none; overflow: hidden; }
.plan-bar::-webkit-progress-bar { border-radius: 999px; background: var(--paper-deep); }
.plan-bar::-webkit-progress-value { border-radius: 999px; background: var(--accent); }
.plan-bar::-moz-progress-bar { border-radius: 999px; background: var(--accent); }
.plan-estimate { margin: 0 0 var(--space-3); }
.plan-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin: 0 0 var(--space-3); padding: var(--space-3) var(--space-4); }
.plan-more p, .plan-more form { margin: 0; }
.plan-list { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.plan-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); min-height: 56px; padding: var(--space-2) 0; border-bottom: 1px solid var(--rule); }
.plan-list li:last-child { border-bottom: 0; }
.plan-list p { margin: 0; }
.plan-text .area-name { font: 400 1.0625rem/1.3 var(--serif); }
.plan-mark { display: grid; place-items: center; width: 22px; height: 22px; box-sizing: border-box; border: 1.5px solid var(--accent); border-radius: 50%; color: var(--paper); }
.plan-mark .icon { width: 14px; height: 14px; stroke-width: 2.5; }
[data-coverage='rich'] > .plan-mark { background: var(--accent); }
[data-coverage='thin'] > .plan-mark { background: linear-gradient(90deg, var(--accent) 50%, transparent 50%); }
.area-action { justify-self: end; }
.area-action .icon { width: 16px; height: 16px; margin-right: 4px; vertical-align: -3px; color: var(--accent); }
.ask-button { min-height: 44px; padding: 0 var(--space-3); border: 1px solid var(--accent); border-radius: 999px; background: var(--surface); color: var(--accent); font: 500 0.9375rem/1 var(--sans); white-space: nowrap; cursor: pointer; }
.ask-button:hover { border-color: var(--accent-hover); background: var(--accent-faint); color: var(--accent-hover); }
.short-note { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-2) 0 0; color: var(--muted); }
.short-note .badge { min-height: 24px; padding: 0 10px; font-size: 0.8125rem; }
.with-side > div > h2:first-child { margin-top: 0; }
.call-list { margin: 0; padding: 0; list-style: none; }
.card.call-list { padding: 0 var(--space-4); }
.call-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); padding: var(--space-4) 0; border-bottom: 1px solid var(--rule); }
.call-row:last-child { border-bottom: 0; }
.call-text { flex: 1 1 220px; min-width: 0; }
.call-text p { margin: 0; }
.call-text h3 { margin: var(--space-1) 0; font-size: 1.375rem; }
/* Past calls and upcoming ones as plain rows: a clay date line, a serif title, a muted line, hairlines between. */
.row-date, .story-when { color: var(--clay); font: 600 0.75rem/1.4 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; }
.story-row { position: relative; flex-wrap: nowrap; }
.story-row h3 a { color: var(--ink); text-decoration: none; }
.story-row h3 a::after { content: ''; position: absolute; inset: 0; }
.story-row:hover h3 a { text-decoration: underline; }
.story-row > .icon { color: var(--muted); }
.call-actions.actions { gap: var(--space-2); margin-top: 0; }
.call-actions:has(details[open]) { flex-basis: 100%; }
.knows .actions { margin-top: var(--space-4); }
.knows details[open] > summary { margin-bottom: var(--space-3); }
details.book { margin-top: var(--space-4); }
.slot-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); margin-top: var(--space-3); }
.slot-form .field { flex: 1 1 160px; }
@media (max-width: 759px) { .slot-form button { flex: 1 1 100%; } }
@media (max-width: 759px) { .call-row > .badge { order: 3; } .call-actions { order: 4; flex-basis: 100%; } }
.side-card h3 { margin: 0 0 var(--space-3); }
.side-card h4 { margin: 0 0 var(--space-3); }
.side-card .notice { margin-bottom: var(--space-3); }
.confirm-card { margin-bottom: var(--space-6); }
.questions { margin: 0 0 var(--space-4); padding: 0; list-style: none; }
.questions li { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--rule); }
.questions p { margin: 0; }
.add-question { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-3); }
.add-question + p { margin: var(--space-3) 0 0; }
.ask-card { margin-bottom: var(--space-6); }
.ask-card h2 { margin-top: 0; }
.question-actions { display: flex; flex: none; align-items: center; gap: var(--space-1); }
.longer-offer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-3); }
.icon-button { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 var(--space-2); border: 0; background: none; color: var(--accent); cursor: pointer; }
.icon-button:hover { color: var(--ink); }
.icon-button .flip .icon { transform: rotate(180deg); }
.focus-form { margin-top: var(--space-4); }
.already-asked { margin-top: var(--space-4); }
.already-asked[open] > summary { margin-bottom: var(--space-2); }
.already-asked .icon { width: 16px; height: 16px; margin-right: 4px; vertical-align: -3px; color: var(--accent); stroke-width: 2.25; }
@media (max-width: 479px) { .add-question { grid-template-columns: 1fr; } }
.knows p:last-child { margin-bottom: 0; }
.timeline { display: grid; margin: 0; padding: 0; list-style: none; }
.timeline li { position: relative; display: flex; gap: var(--space-4); padding-bottom: var(--space-4); }
.timeline li:not(:last-child)::before { content: ''; position: absolute; left: 17px; top: 38px; bottom: 2px; width: 1px; background: var(--rule); }
.timeline .dot { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--field-border); border-radius: 50%; background: var(--surface); color: var(--muted); font-weight: 500; }
.timeline .done .dot, .timeline .current .dot { border-color: var(--accent); background: var(--accent); color: #fff; }
.timeline .stopped .dot { border-color: var(--warn-ink); background: var(--warn-bg); color: var(--warn-ink); }
.timeline .dot .icon { width: 18px; height: 18px; stroke-width: 2.25; }
.timeline p { margin: 0; }
.timeline .t-label { margin-top: 6px; font-weight: 600; }

.call-layout { display: grid; grid-template-columns: minmax(0, 680px); gap: var(--space-7); }
.call-side { display: grid; gap: var(--space-5); align-content: start; }
@media (min-width: 1024px) {
  .call-layout { grid-template-columns: minmax(0, 680px) 300px; justify-content: space-between; }
  .call-side { position: sticky; top: calc(72px + var(--space-5)); }
}
@media (max-width: 1023px) { .on-page { display: none; } }
.on-page ul { display: grid; margin: 0; padding: 0; list-style: none; }
.on-page a { display: inline-flex; align-items: center; min-height: 40px; text-decoration: none; }
.on-page a:hover { text-decoration: underline; }
.listen { margin: var(--space-5) 0 var(--space-6); padding: var(--space-5); border-radius: var(--radius-panel); background: var(--paper-deep); }
.listen-why { margin: 0 0 var(--space-3); font: 400 1.25rem/1.4 var(--serif); }
.listen audio { margin: 0; }
#chapter h2 { margin-top: 0; }
.chapter > p:first-child { display: flow-root; }
.chapter > p:first-child::first-letter { float: left; margin: 0.06em 0.08em 0 0; color: var(--clay); font: 400 5.1em/0.8 var(--serif); }
.chapter .translation { font: 400 1.0625rem/1.6 var(--sans); color: var(--muted); }
.draft-note { display: flex; align-items: center; gap: var(--space-2); color: var(--muted); font-size: 0.9375rem; }
#stories .story:first-of-type { border-top: 0; padding-top: 0; }
.story .tag { display: inline-flex; align-items: center; min-height: 32px; margin: var(--space-2) 0 var(--space-3); padding: 0 14px; border-radius: 999px; background: var(--ok-bg); color: var(--ok-ink); font-size: 0.9375rem; }
.story .quote { margin-top: var(--space-4); }
.story .quote blockquote { border-left-width: 3px; }
@media (max-width: 759px) {
  .form-card { padding: 20px; }
  .step-foot { flex-direction: column-reverse; align-items: stretch; }
  .step-foot .button, .step-foot button { width: 100%; }
  .step-foot [data-back] { align-self: center; }
  .side-panel img { display: none; }
}
/* Stepped forms: on phones web.js marks the form and the current step's action rides in a bar at the bottom of the screen. */
.step-action { display: contents; }
@media (max-width: 759px) {
  .setup[data-stepped] .step-action { position: fixed; z-index: 15; left: 0; right: 0; bottom: 0; display: flex; padding: var(--space-3) var(--gutter) calc(var(--space-3) + env(safe-area-inset-bottom)); pointer-events: none; }
  .setup[data-stepped] .step-action > * { flex: 1; transition: opacity 0.15s ease; }
  /* The funnel's step action (/start, and setup after a story given there) stays in full colour, so it never looks disabled. */
  .setup[data-stepped]:not(.funnel) .step-action[data-ready='false'] > * { opacity: 0.5; }
  .setup[data-stepped] .step-foot:not(:has(> a)) { margin: 0; padding: 0; border: 0; }
  body:has(.setup[data-stepped]) { padding-bottom: calc(var(--bar-height) + env(safe-area-inset-bottom)); }
  .repeat-title { display: none; }
}
/*
 * The story cards of /start: one at a time on phones (web.js sets data-card), where the card's question becomes the
 * page heading and its label is left to screen readers; each card is a line under the question and its field in a
 * box. Wider screens lay the three fields out in the form's card as if there were no cards, a rule between them.
 */
.story-card > .hint { margin: 0; }
/* The examples in the empty fields read as examples, not as words already given. */
.story-card textarea::placeholder { color: var(--faint); font-style: italic; }
/* As a page heading the question is a size smaller and wraps as it comes, so it stays two lines. */
[data-setup-title][data-question] { font-size: 2.125rem; line-height: 1.12; letter-spacing: -0.02em; text-wrap: wrap; }
/* Setup's titles with the person's name wrap as they come too, so the name ends the question. */
[data-setup-title]:has(> em) { letter-spacing: -0.02em; text-wrap: wrap; }
@media (min-width: 760px) {
  .story-cards, .story-box { display: contents; }
  .story-card + .story-card { margin-top: var(--space-2); padding-top: 28px; border-top: 1px solid var(--rule); }
  .story-box > .chips { margin-top: 14px; }
}
@media (max-width: 759px) {
  .form-card:has(> .story-cards) { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .story-cards { display: grid; gap: var(--space-5); }
  .story-cards[data-card='0'] > :not(:nth-child(1)), .story-cards[data-card='1'] > :not(:nth-child(2)), .story-cards[data-card='2'] > :not(:nth-child(3)) { display: none; }
  .story-cards[data-card] .story-q { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  [data-setup-title][data-question] { margin-bottom: 10px; }
  .story-card > .hint { font-size: 1rem; line-height: 1.45; }
  .story-box { margin-top: 14px; }
  /* One step shows at a time and the footer follows it with the page's own spacing; the body keeps the room for the bar. */
  .setup.funnel[data-stepped] .setup-step { margin-bottom: 0; }
  /* The back arrow at the top replaces the in-card Back links. */
  .setup.funnel[data-stepped] .step-foot { margin: 0; padding: 0; border: 0; }
  .setup.funnel[data-stepped] .step-foot > a { display: none; }
  /* Setup's own steps: the phone's card a little further under the title, and no room kept for a foot that is all in the bar. */
  .setup [data-step='phone'] > .card { margin-top: 10px; }
  .setup.funnel[data-stepped] :is([data-step='phone'], .time-step) .step-foot { display: contents; }
}

/*
 * The landing page: full-width bands on one container edge, content in paper trays, a call to start after each part.
 * Phones read top to bottom; from 900px the parts lay out in columns.
 */
.check-dot { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.check-dot .icon { width: 16px; height: 16px; stroke-width: 2.25; }
.example-note { margin: var(--space-4) 0 0; color: var(--faint); font-size: 0.9375rem; }

.landing { font-size: 1.125rem; }
.band { padding: var(--section-pad) 0; }
.tray { border-radius: var(--radius-panel); background: var(--surface); box-shadow: var(--shadow-card); }
.section-head { max-width: 680px; margin-bottom: var(--space-6); }
.section-head .section-title { margin: var(--space-4) 0 0; }
.section-head .lede { margin: var(--space-4) 0 0; }
.landing h3 { margin: 0; font-size: 1.625rem; line-height: 1.2; }
.landing .tray p { color: var(--muted); }
/*
 * The art comes as WebP with a JPG fallback; the picture box steps aside so the image rules still place the img, and
 * its source, which Chrome lays out as an empty box, takes no gap in a flex card.
 */
.landing picture { display: contents; }
.landing picture > source { display: none; }

/*
 * A button's arrow: a plain one after the words of a primary action, none on a secondary one. The landing page keeps
 * its arrow in a circle at the button's end.
 */
:is(.button, button).go { gap: var(--space-2); white-space: nowrap; }
.button.lg { min-height: 56px; font-size: 1.125rem; }
.go-ico { display: inline-flex; flex: none; transition: transform 400ms var(--ease); }
:is(.button, button).go:hover .go-ico { transform: translateX(2px); }
.button.secondary .go-ico { display: none; }
:is(.landing, .start-bar) :is(.button, button).go { gap: var(--space-4); padding: 6px 6px 6px var(--space-5); }
:is(.landing, .start-bar) .go.block { justify-content: space-between; }
:is(.landing, .start-bar) .go-ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgb(255 255 255 / 0.16); }
.landing :is(.button.secondary, .button.light) .go-ico { display: grid; background: var(--accent-soft); }
.button.secondary { background: var(--surface); color: var(--accent-hover); }
.button.light { border-color: #fffdf8; background: #fffdf8; color: var(--accent-hover); }
.button.light:hover { border-color: var(--paper-deep); background: var(--paper-deep); color: var(--accent-hover); }

/* Phones read the hero top to bottom: the price, the book, the promise, the way in. From 900px the book takes its own column. */
.band.hero { padding: var(--space-5) 0 var(--space-6); }
.band.reviews { padding-top: var(--space-2); background: var(--paper-deep); }
.how { background: var(--sage-band); }
#questions { background: var(--paper-deep); }
#questions .pm, .how .how-n { background: var(--surface); }
.hero-grid { display: flex; flex-direction: column; }
.landing .hero-photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; margin: 0 0 var(--space-5); object-fit: cover; object-position: 50% 56%; border-radius: var(--radius-panel); }
.hero-proof { display: flex; align-items: center; gap: 8px; width: fit-content; margin: 0 0 var(--space-4); padding: 6px 14px 6px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-hover); font-size: 0.875rem; font-weight: 600; line-height: 1.3; }
.hero-proof .icon { flex: none; width: 18px; height: 18px; }
.hero .display { margin: 0; letter-spacing: -0.025em; }
.hero .lede { margin: var(--space-4) 0 0; color: var(--muted); }
.hero-cta { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
.hero-cta .button.go { justify-content: space-between; }
.hero-terms { margin: 0; color: var(--muted); font-size: 0.9375rem; line-height: 1.4; text-align: center; }
.hero-ticks { display: grid; gap: 8px; margin: var(--space-5) 0 0; padding: 0; list-style: none; color: var(--muted); font-size: 0.9375rem; line-height: 1.4; }
.hero-ticks li { display: flex; align-items: center; gap: 10px; }
.hero-ticks .icon { width: 18px; height: 18px; color: var(--accent); stroke-width: 2.25; }
/* The photo hero: a grandmother on the phone over Grace's sample call. */
.landing .hero-sample { aspect-ratio: auto; overflow: hidden; border: var(--bezel) solid var(--bezel-ring); border-radius: var(--card-radius); background: var(--card); box-shadow: var(--card-shadow); }
.hero-sample img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 34%; }
.hero-sample-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 14px 16px 16px 14px; }
.hero-sample-title { display: grid; gap: var(--space-1); margin: 0; text-wrap: wrap; }
.hero-sample-title strong { font: 500 1.1875rem/1.2 var(--serif); }
.hero-sample-title small { color: var(--muted); font-size: 0.9375rem; line-height: 1.3; }
.hero-sample-play { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.hero-sample-ic { display: grid; flex: none; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--accent); color: #fffdf8; }
.hero-bars { flex: 1; min-width: 0; fill: var(--accent-line); }
.hero-bars .played { fill: var(--accent); transform: scaleX(0); }
.hero-sample-time { flex: none; min-width: 34px; color: var(--muted); font-size: 0.875rem; font-variant-numeric: tabular-nums; text-align: right; }
.hero-sample audio { display: block; margin: 0; }
.g-ic { display: grid; flex: none; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }

.reviews-title { margin: 0 0 var(--space-5); font: 600 1.0625rem/1.4 var(--sans); letter-spacing: 0; color: var(--muted); }
.review-row { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.review-row > li { display: flex; padding: var(--space-6) 26px var(--space-5); }
.review-row figure { display: flex; flex-direction: column; gap: var(--space-5); margin: 0; }
.review-row blockquote { margin: 0; }
.review-row blockquote::before { content: '\201C'; display: block; margin-bottom: 10px; font: italic 400 3.5rem/0.6 var(--serif); color: var(--clay); }
.landing .review-row blockquote p { margin: 0; color: var(--ink); font: 400 1.25rem/1.45 var(--serif); }
.review-row figcaption { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: auto; padding-top: 18px; border-top: 1px solid var(--rule); }
.who strong { display: block; font-weight: 600; }
.who span { color: var(--faint); font-size: 1rem; text-transform: capitalize; }
.stars { display: flex; gap: 2px; color: #a8741f; font-size: 1.25rem; line-height: 1; }
.stars .empty { color: rgb(35 30 26 / 0.2); }
.stars .half { background: linear-gradient(90deg, #a8741f 50%, rgb(35 30 26 / 0.2) 50%); background-clip: text; -webkit-background-clip: text; color: transparent; }
@media (forced-colors: active) { .stars .half { color: CanvasText; background: none; } }

/* Four lives, four books: a card per sample book, in a row that swipes with the next card peeking in from the edge. */
.examples { background: var(--paper-deep); }
.examples .section-head { margin-bottom: var(--space-3); }
.swipe-hint { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin: 0 0 var(--space-3); color: var(--faint); font-size: 0.875rem; }
.swipe-hint .icon { width: 16px; height: 16px; }
.shelf { display: flex; gap: 14px; margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter) var(--space-5); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); list-style: none; scrollbar-width: none; }
.shelf::-webkit-scrollbar { display: none; }
.ex { display: flex; flex: 0 0 80%; flex-direction: column; overflow: hidden; scroll-snap-align: start; border-radius: var(--radius-panel); background: var(--surface); box-shadow: var(--shadow-card); }
.ex picture { display: block; }
.ex img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 45%; }
.ex-body { display: flex; flex: 1; flex-direction: column; padding: 14px 16px 16px; }
.landing .ex h3 { font-size: 1.25rem; }
.landing .ex-sub { margin: 0 0 10px; color: var(--muted); font: italic 400 0.9375rem/1.4 var(--serif); }
.ex-player { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 0 14px 0 0; border-radius: 28px; background: var(--accent-soft); }
.ex-player audio { width: 100%; }
.ex-play { display: grid; flex: none; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--accent); color: #fffdf8; cursor: pointer; }
.ex-play[hidden] { display: none; }
.ex-play-text { display: flex; flex: 1 1 0; flex-wrap: wrap; align-items: baseline; column-gap: 8px; min-width: 0; line-height: 1.25; }
.ex-play-text strong { color: var(--accent-hover); font-size: 0.9375rem; font-weight: 600; }
.ex-play-text small { color: var(--muted); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.landing .ex-note { margin: 0; color: var(--muted); font-size: 0.875rem; line-height: 1.45; }
.ex-quote { margin: 12px 0 0; }
.landing .ex-quote p { margin: 0; color: var(--ink); font: italic 400 1rem/1.5 var(--serif); }
.landing .ex-quote p::before { content: '\201C'; margin-right: 2px; color: var(--clay); font-style: normal; }
.ex-en { display: block; margin-top: 6px; color: var(--muted); font: 400 0.875rem/1.45 var(--sans); }
.landing .ex-from { margin: auto 0 0; padding-top: 10px; color: var(--faint); font-size: 0.8125rem; }

/* One call a week: the book drawn, over three short numbered steps. */
.landing .book-anatomy { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto var(--space-4); }
.how-steps { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
.how-steps li { display: flex; gap: 16px; }
.how-n { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font: 500 1.25rem/1 var(--serif); }
.landing .how-steps h3 { margin: 6px 0 4px; font-size: 1.25rem; }
.landing .how-steps p { margin: 0; color: var(--muted); }

/* One price: the package on a dark green card; more time is left for the checkout. */
.offer-card { padding: var(--space-6) 26px 26px; border-radius: var(--radius-panel); background: var(--accent-hover); color: #f7f1e6; box-shadow: 0 0 0 6px var(--accent), 0 24px 40px -20px rgb(34 68 58 / 0.6); }
.landing .offer-card h3 { color: #fffbf2; font-size: 1.5rem; }
.offer-card .sale-price { justify-items: start; margin: var(--space-4) 0 var(--space-5); }
.offer-card .sale-price .price { color: #fffbf2; font-size: 3.5rem; }
.offer-card .sale-price s { color: #b9cbbd; font-size: 1.25rem; }
.offer-includes { display: grid; gap: 10px; margin: 0 0 26px; padding: 0; list-style: none; color: #d6e1d8; font-size: 1.0625rem; }
.offer-includes li { display: flex; align-items: flex-start; gap: 10px; }
.offer-includes .icon { margin-top: 3px; color: #bfd6c6; stroke-width: 2.25; }
.offer-card .button { width: 100%; justify-content: space-between; }
.landing .offer-more { margin: var(--space-4) 0 0; color: #d6e1d8; font-size: 0.9375rem; text-align: center; }
.landing .guarantee { align-items: center; gap: var(--space-4); margin-top: var(--space-6); color: var(--muted); font-size: 1.0625rem; }

.faq-grid { display: grid; gap: var(--space-5); }
.faq-list details { border-bottom: 1px solid var(--rule); }
.faq-list > details:first-child { border-top: 1px solid var(--rule); }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 68px; padding: var(--space-3) 0; cursor: pointer; list-style: none; font: 500 1.25rem/1.35 var(--serif); }
.faq-list summary:hover { color: var(--accent-hover); }
.faq-list summary::-webkit-details-marker { display: none; }
.pm { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--paper-deep); color: var(--ink); transition: transform 400ms var(--ease); }
.faq-list details[open] > summary .pm { transform: rotate(45deg); }
.faq-list details p { margin: 0 0 var(--space-5); padding-right: var(--space-7); color: var(--muted); }
.faq-list .faq-more { border-bottom: 0; }
.faq-more > summary { color: var(--accent); font-family: var(--sans); font-weight: 600; font-size: 1.125rem; }
.faq-more > summary .pm { background: var(--accent-soft); color: var(--accent); }
.faq-more[open] > summary { border-bottom: 1px solid var(--rule); }

.closing-in { padding: var(--space-7) 26px var(--space-6); text-align: center; background: #fffbf3; overflow: hidden; }
.closing-in .section-title { max-width: 19ch; margin: 0 auto var(--space-4); }
.landing .closing-in p { max-width: 40ch; margin: 0 auto var(--space-6); }

/*
 * Seasonal: autumn leaves drifting down the landing page behind its content, so they never cover words or take a tap.
 * Each leaf falls on its own track and sways inside it; the tracks differ so they never move in step.
 */
.leaves { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.leaf { position: absolute; top: -48px; width: 30px; height: 30px; animation: leaf-fall 16s linear infinite; will-change: transform; }
.leaf svg { display: block; width: 100%; height: 100%; animation: leaf-sway 4s ease-in-out infinite alternate; }
.leaf path { fill: currentColor; opacity: 0.8; }
.leaf .vein { fill: none; stroke: rgb(255 253 248 / 0.7); stroke-width: 1.1; stroke-linecap: round; }
.leaf:nth-child(1) { left: 6%; color: var(--clay); animation-duration: 17s; animation-delay: -2s; }
.leaf:nth-child(2) { left: 18%; width: 22px; height: 22px; color: #b8862b; animation-duration: 21s; animation-delay: -11s; }
.leaf:nth-child(3) { left: 29%; color: var(--accent); animation-duration: 19s; animation-delay: -6s; }
.leaf:nth-child(4) { left: 41%; width: 25px; height: 25px; color: #c46b3c; animation-duration: 23s; animation-delay: -15s; }
.leaf:nth-child(5) { left: 53%; color: #b8862b; animation-duration: 18s; animation-delay: -9s; }
.leaf:nth-child(6) { left: 64%; width: 21px; height: 21px; color: var(--clay); animation-duration: 22s; animation-delay: -1s; }
.leaf:nth-child(7) { left: 74%; color: #8a9a5b; animation-duration: 20s; animation-delay: -13s; }
.leaf:nth-child(8) { left: 83%; width: 27px; height: 27px; color: #c46b3c; animation-duration: 24s; animation-delay: -4s; }
.leaf:nth-child(9) { left: 92%; width: 20px; height: 20px; color: var(--accent); animation-duration: 18s; animation-delay: -17s; }
.leaf:nth-child(10) { left: 47%; width: 18px; height: 18px; color: #b8862b; animation-duration: 26s; animation-delay: -20s; }
.leaf:nth-child(even) svg { animation-duration: 5s; animation-direction: alternate-reverse; }
@keyframes leaf-fall { to { transform: translateY(calc(100vh + 80px)) rotate(200deg); } }
@keyframes leaf-sway { from { transform: translateX(-26px) rotate(-25deg); } to { transform: translateX(26px) rotate(30deg); } }
@media (prefers-reduced-motion: reduce) { .leaves { display: none; } }
@media (forced-colors: active) { .leaves { display: none; } }

/* The welcome offer: a centred card over a dimmed page, the code large and copied with one tap, one way in, an easy way out. */
.welcome { position: fixed; inset: 0; width: min(100% - 32px, 400px); max-width: none; height: fit-content; margin: auto; padding: 36px 24px 16px; border: 0; border-radius: 28px; background: var(--surface); color: var(--ink); box-shadow: 0 40px 80px -30px rgb(35 30 26 / 0.55); text-align: center; overflow: visible; }
.welcome::backdrop { background: rgb(35 30 26 / 0.5); }
.welcome[open] { animation: welcome-in 280ms var(--ease); }
@keyframes welcome-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } }
.welcome-x { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--paper-deep); color: var(--ink); cursor: pointer; }
.welcome-x .icon { transform: rotate(45deg); }
.welcome-mark { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto var(--space-4); border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.welcome-mark .icon { width: 26px; height: 26px; }
.welcome-kicker { margin: 0; color: var(--clay); font: 600 0.8125rem/1.2 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; }
.welcome h2 { margin: var(--space-2) 0 var(--space-2); font-size: 2rem; line-height: 1.1; }
.welcome h2:focus { outline: none; }
.welcome-lede { margin: 0 auto var(--space-5); max-width: 28ch; color: var(--muted); }
.welcome-code { display: grid; gap: 4px; width: 100%; margin: 0 0 var(--space-5); padding: 16px; border: 2px dashed var(--accent-line); border-radius: 18px; background: var(--accent-faint); color: var(--ink); font: inherit; cursor: pointer; }
.welcome-code strong { font: 600 1.625rem/1 var(--serif); letter-spacing: 0.08em; }
.welcome-code span { color: var(--accent); font-size: 0.875rem; font-weight: 600; }
.welcome .button.go { width: 100%; justify-content: space-between; gap: var(--space-4); padding: 6px 6px 6px var(--space-5); }
.welcome .go-ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgb(255 255 255 / 0.16); }
.welcome-skip { display: block; min-height: 44px; margin: var(--space-2) auto 0; padding: 0 var(--space-4); border: 0; background: none; color: var(--muted); font: inherit; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .welcome[open] { animation: none; } }

/* The phone bar keeps the price in sight beside its button. */
.bar-price { display: grid; align-content: center; flex: none; padding-right: var(--space-3); line-height: 1.1; pointer-events: auto; }
.bar-price strong { font: 600 1.5rem/1 var(--serif); }
.bar-price s { color: var(--faint); font-size: 0.875rem; }

@media (max-width: 759px) {
  .closing-in .button { width: 100%; justify-content: space-between; }
}
@media (min-width: 760px) {
  .hero .lede { margin-top: var(--space-5); }
  /* The button keeps its own width, with its terms centred under it. */
  .hero-cta { width: fit-content; margin-top: var(--space-6); }
}
@media (min-width: 900px) {
  .band.hero { padding: var(--space-8) 0 88px; }
  .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-areas: 'proof photo' 'title photo' 'lede photo' 'cta photo' 'ticks photo'; grid-template-rows: auto auto auto auto 1fr; column-gap: 56px; align-items: start; }
  .landing .hero-photo { grid-area: photo; align-self: center; margin: 0; }
  .hero-proof { grid-area: proof; }
  .hero .display { grid-area: title; }
  .hero .lede { grid-area: lede; }
  .hero-cta { grid-area: cta; }
  .hero-ticks { grid-area: ticks; }
  .section-head { margin-bottom: var(--space-7); }
  .review-row { grid-template-columns: 1.15fr 1fr 1fr; }
  .swipe-hint { display: none; }
  .shelf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; overflow: visible; }
  .ex { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  .ex picture, .ex img { height: 100%; }
  .ex img { aspect-ratio: auto; }
  .ex-body { padding: 20px 22px; }
  .how .container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: 'head head' 'art steps'; gap: 0 72px; align-items: center; }
  .how .section-head { grid-area: head; }
  .landing .book-anatomy { grid-area: art; max-width: 560px; margin: 0; }
  .how-steps { grid-area: steps; gap: var(--space-6); }
  .offer-card { max-width: 560px; margin: 0 auto; }
  .landing #pricing .section-head, .landing #pricing .guarantee { margin-inline: auto; text-align: center; justify-content: center; }
  .faq-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 72px; }
  .closing-in { padding: 72px 40px; }
}

.auth { display: grid; grid-template-columns: minmax(0, 560px); justify-content: center; align-items: start; gap: var(--space-5); }
@media (min-width: 1024px) { .auth.with-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); justify-content: stretch; } }
.auth-card { background: var(--surface); border: 0; border-radius: var(--radius-panel); box-shadow: var(--shadow-card); padding: 40px; }
.auth-card .lede { font-size: 1.125rem; margin-bottom: var(--space-5); }
.auth-card form.stack .button, .auth-card form.stack button { width: 100%; }
.auth-card .foot { margin: var(--space-5) 0 0; color: var(--muted); font-size: 0.9375rem; }
.auth-card .forgot { display: block; margin-top: var(--space-3); text-align: center; font-size: 0.9375rem; }
@media (max-width: 759px) { .auth-card { padding: var(--space-5) 20px; } }
.or { display: flex; align-items: center; gap: var(--space-4); margin: var(--space-5) 0; color: var(--muted); font-size: 0.9375rem; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--rule); }
.google .g-mark { width: 20px; height: 20px; }
.google button { width: 100%; }
/* Google's own sign-in buttons are neutral, not the site's green. */
.google button, button.google { border-color: var(--field-border); background: var(--surface); color: var(--ink); }
.google button:hover, button.google:hover { border-color: var(--field-border); background: var(--paper-deep); color: var(--ink); }
.next-panel { display: none; border-radius: var(--radius-panel); background: var(--paper-deep); padding: var(--space-6); }
@media (min-width: 1024px) { .next-panel { display: block; } }
.next-panel img { display: block; width: 100%; max-width: 520px; margin: 0 auto var(--space-5); }
.next-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-4); }
.next-steps li { display: flex; align-items: baseline; gap: var(--space-5); font: 400 1.25rem/1.4 var(--serif); }
.next-steps .n { flex: none; width: 1ch; font: 400 2.5rem/1 var(--serif); color: var(--clay); }

.error-page { text-align: center; }
.error-page img { display: block; width: 240px; margin: 0 auto var(--space-4); }
.error-page .notice { text-align: left; }

.legal { max-width: 680px; }
.legal h2 { font-size: 1.5rem; margin: var(--space-6) 0 var(--space-2); }
.legal ul { padding-left: 1.25em; margin: 0 0 var(--space-4); }
.legal li { margin-bottom: var(--space-2); }
.legal .updated { color: var(--muted); font-size: 0.9375rem; }

.recipient-page { --muted-strong: #4a463f; }
.recipient { width: 100%; max-width: calc(520px + 2 * 16px); margin: 0 auto; padding: var(--space-5) 16px var(--space-7); font-size: 1.3125rem; line-height: 1.55; color: var(--ink); }
.recipient p { margin-bottom: 20px; }
.r-brand { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin-bottom: var(--space-6); color: var(--accent); }
.r-brand img { width: 40px; height: 40px; }
.r-brand .wordmark { font-size: 1.375rem; color: var(--accent); }
.recipient h1 { font-size: 2.5rem; line-height: 1.15; margin-bottom: var(--space-4); }
.r-lead { font: 400 1.5rem/1.45 var(--serif); }
.recipient .notice { font-size: 1.3125rem; padding: 20px; margin-bottom: var(--space-5); }
.recipient .notice.info, .recipient .notice.ok, .recipient .notice.warn { color: var(--ink); }
.recipient .notice.warn > .icon { color: var(--warn-ink); width: 32px; height: 32px; }
.recipient .notice strong { display: block; font: 600 1.5rem/1.3 var(--serif); margin-bottom: var(--space-1); }
.recipient .actions { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-4); margin-top: var(--space-5); }
.recipient .actions form { margin: 0; }
.recipient button.primary, .recipient button.secondary { width: 100%; min-height: 64px; font: 600 1.3125rem/1.2 var(--sans); padding: var(--space-3) var(--space-5); }
.recipient .actions.r-small { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); margin-top: 0; }
.recipient .r-small button.secondary { min-height: 56px; font-size: 1.125rem; padding: var(--space-2) var(--space-3); }
.r-manage { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--rule); }
.r-manage p { font-size: 1.125rem; color: var(--muted-strong); margin-bottom: var(--space-3); }
.r-check { display: flex; align-items: center; justify-content: center; width: 88px; height: 88px; margin: 0 0 var(--space-5); border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.r-check .icon { width: 44px; height: 44px; stroke-width: 2.5; }
.r-faq { margin-top: var(--space-7); }
.r-faq h2 { font-size: 1.625rem; margin-bottom: var(--space-3); }
.r-faq details { border-top: 1px solid var(--rule); }
.r-faq details:last-of-type { border-bottom: 1px solid var(--rule); }
.r-faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 64px; padding: var(--space-3) 0; font: 600 1.3125rem/1.3 var(--sans); color: var(--accent); cursor: pointer; list-style: none; }
.r-faq summary::-webkit-details-marker { display: none; }
.r-faq summary::after { content: '+'; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--accent-soft); font: 600 1.625rem/36px var(--sans); text-align: center; }
.r-faq details[open] > summary::after { content: '\2212'; }
.r-answer { padding: 0 0 var(--space-2); }
.r-answer p { margin-bottom: var(--space-3); }
.r-foot { margin-top: var(--space-6); text-align: center; font-size: 1.1875rem; color: var(--muted-strong); }

/* The illustrations are painted on white that fades out at the edges; multiply lets whatever paper is behind show through. */
img[src*='/assets/img/spot-'], img[src*='/assets/img/hero-'] { mix-blend-mode: multiply; }
.auth-card h1 { font-size: 2.5rem; }
@media (max-width: 759px) {
  .auth-card h1 { font-size: 2.25rem; }
}

/* The backoffice, structured like the Relivelle and Pet Plus Us order desks in Elmtale's palette and type: its own
   header (logo, BACKOFFICE, plain-text nav with the current section underlined) over a thin rule; an eyebrow over each
   serif title; lists as one search panel (text, "Show", button) over a table in its own panel; record pages as a
   details grid then section panels; actions on narrow centred panels. Tables scroll sideways inside their panel. */
.badge.plain { background: var(--paper-deep); color: var(--ink); }
.admin-header, .admin-main { width: 100%; max-width: 1240px; margin: 0 auto; padding-left: 24px; padding-right: 24px; box-sizing: border-box; }
.admin-header { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding-top: 24px; }
/* The thin rule under the header, across its content width only. */
.admin-header::after { content: ''; flex: 1 0 100%; order: 9; height: 1px; margin-top: 10px; background: var(--rule); }
.admin-brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); text-decoration: none; }
.admin-brand:hover { color: var(--ink); }
.admin-brand img { width: 32px; height: 32px; }
.admin-brand .wordmark { font-size: 1.5rem; }
.admin-desk { font: 600 0.6875rem/1 var(--sans); letter-spacing: 0.2em; color: var(--muted); }
.admin-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin-left: auto; font-size: 0.875rem; }
.admin-nav a { padding: 6px 0; border-bottom: 2px solid transparent; color: var(--ink); text-decoration: none; }
.admin-nav a:hover, .admin-nav a[aria-current='page'] { border-bottom-color: var(--ink); color: var(--ink); }
.admin-nav form { margin: 0; }
.admin-menu { display: none; position: relative; margin-left: auto; }
.admin-menu > summary { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-4); border-radius: var(--radius-button); background: var(--paper-deep); font: 600 1rem/1 var(--sans); cursor: pointer; list-style: none; }
.admin-menu > summary::-webkit-details-marker { display: none; }
.admin-menu > summary .icon { width: 22px; height: 22px; }
.admin-menu-sheet { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; min-width: 240px; background: var(--paper); border: 1px solid var(--rule); border-radius: 14px; box-shadow: 0 18px 30px -20px rgb(60 40 20 / 0.35); padding: 6px 18px 12px; }
.admin-menu-sheet a, .admin-menu-sheet .admin-link-button { display: flex; align-items: center; width: 100%; min-height: 48px; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; font-size: 1rem; text-align: left; }
.admin-menu-sheet a[aria-current='page'] { font-weight: 600; color: var(--accent); }
.admin-menu-sheet form { margin: 0; }
.admin-menu-sheet .admin-link-button { border-bottom: 0; }
.admin-link-button { min-height: 0; padding: 6px 0; border: 0; background: none; color: var(--muted); font: inherit; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; cursor: pointer; }
.admin-link-button:hover { color: var(--ink); text-decoration-thickness: 2px; }
.admin-main { padding-top: 32px; padding-bottom: 64px; font-size: 0.9375rem; line-height: 1.5; }
.admin-main h1 { margin: 8px 0 0; font-size: clamp(1.875rem, 5vw, 2.875rem); line-height: 1.08; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.admin-main h2 { margin: 0 0 18px; font-size: 1.375rem; line-height: 1.2; }
.admin-main h3 { font-size: 1.0625rem; }
.admin-main p { margin: 0 0 12px; }
.admin-main small { display: block; margin-top: 4px; color: var(--muted); font-size: 0.78125rem; line-height: 1.4; }
.admin-main code { font-size: 0.8125rem; overflow-wrap: anywhere; }
.admin-main a { text-underline-offset: 4px; }
.admin-eyebrow { margin: 0 !important; font: 600 0.6875rem/1.5 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--clay); overflow-wrap: anywhere; }
.admin-back { margin: 0 0 14px !important; font-size: 0.875rem; }
.admin-back a { color: var(--muted); }
.admin-titlebar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; margin-bottom: 24px; }
.admin-titlebar > .admin-badge { margin-bottom: 6px; }
.admin-lede { margin: -8px 0 24px !important; max-width: 60em; color: var(--muted); }
.admin-note { margin: 12px 0 0 !important; color: var(--muted); font-size: 0.875rem; }
/* A card's one-line subtitle, right under its title. */
.admin-panel > h2 + .admin-note { margin: -6px 0 16px !important; }
.admin-empty { margin: 0 !important; padding: 20px 0; color: var(--muted); }
.admin-error { color: var(--error) !important; }
.admin-count { color: var(--faint); font: 400 1rem/1 var(--sans); }
.admin-nowrap { white-space: nowrap; }
.admin-wide { min-width: 240px; }
.admin-main .notice { margin: 0 0 24px; }

/* Buttons: the primary action in the site's green; the others outlined. */
.admin-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; min-height: 48px; padding: 12px 20px; border: 1px solid var(--accent); border-radius: var(--radius-field); background: var(--accent); color: #fff; font: 600 0.9375rem/22px var(--sans); text-align: center; text-decoration: none; cursor: pointer; }
.admin-button:hover { border-color: var(--accent-hover); background: var(--accent-hover); color: #fff; }
.admin-button.secondary { border-color: var(--ink); background: var(--surface); color: var(--ink); }
.admin-button.secondary:hover { background: var(--paper-deep); color: var(--ink); }
.admin-button.danger { border-color: var(--error); background: var(--error); color: #fff; }
.admin-button.danger:hover { border-color: var(--error-hover); background: var(--error-hover); }
.admin-button.secondary.danger { background: var(--surface); color: var(--error); }
.admin-button.secondary.danger:hover { background: var(--error-faint); color: var(--error-hover); }
.admin-button.small { min-height: 38px; padding: 8px 14px; font-size: 0.875rem; font-weight: 500; }
.admin-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: -6px 0 24px; }

/* Panels. */
.admin-panel { margin: 24px 0; padding: 24px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); }
.admin-panel > :last-child { margin-bottom: 0; }
.admin-titlebar + .admin-panel, .admin-actions + .admin-panel, .admin-lede + .admin-panel, .notice + .admin-panel { margin-top: 0; }
.admin-section { margin: 32px 0 24px; }
.admin-narrow { max-width: 560px; margin: 8px auto 24px; padding: 28px; }
.admin-narrow .admin-titlebar { margin-bottom: 16px; }
.admin-narrow h1 { font-size: 2rem; }
.admin-narrow .admin-lede { margin: 0 0 20px !important; }

/* Controls. */
.admin-main label { color: var(--muted); font-size: 0.8125rem; }
.admin-main .field label { color: var(--muted); font-size: 0.8125rem; }
.admin-main :is(input[type=text], input[type=search], input[type=email], input[type=date], input[type=time], input[type=number], select) { width: 100%; min-height: 48px; height: 48px; padding: 0 12px; box-sizing: border-box; border: 1px solid var(--field-border); border-radius: var(--radius-field); background-color: var(--surface); color: var(--ink); font: 400 0.9375rem/1.4 var(--sans); }
.admin-main select { padding-right: 36px; }
.admin-main .hint { color: var(--muted); font-size: 0.8125rem; line-height: 1.4; }
.admin-main .check-row { color: var(--ink); font-size: 0.9375rem; }

/* Search: query, what to show, button. */
.admin-search { display: grid; grid-template-columns: minmax(0, 1fr) 220px auto; align-items: end; gap: 12px; }
.admin-search > div { min-width: 0; }
.admin-search label { display: block; margin-bottom: 8px; }

/* Tables: 14px, small uppercase heads, light row rules; the first column is the link with a muted line under it. */
.admin-table-wrap { overflow: auto; -webkit-overflow-scrolling: touch; }
.admin-panel.admin-table-wrap { padding: 12px 24px; }
.admin-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 0.875rem; line-height: 1.45; }
.admin-table th { padding: 16px 12px; border-bottom: 1px solid var(--rule); font: 600 0.6875rem/1.2 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); white-space: nowrap; vertical-align: bottom; }
.admin-table td { padding: 16px 12px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.admin-primary { min-width: 180px; overflow-wrap: anywhere; }
.admin-primary a { font-weight: 500; }

/* Badges: small, 6px corners, neutral unless the tone says otherwise. */
.admin-badge { display: inline-block; padding: 4px 9px; border: 1px solid var(--rule); border-radius: 6px; background: var(--paper-deep); color: var(--ink); font: 400 0.75rem/1.4 var(--sans); white-space: nowrap; }
.admin-badge.good { border-color: transparent; background: var(--ok-bg); color: var(--ok-ink); }
.admin-badge.warn { border-color: transparent; background: var(--warn-bg); color: var(--warn-ink); }
.admin-badge.bad { border-color: transparent; background: var(--error-bg); color: var(--error); }

/* Details and figures: a small label over each value. */
.admin-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 22px; margin: 0; }
.admin-details dt, .admin-stats dt { margin-bottom: 6px; color: var(--muted); font-size: 0.75rem; }
.admin-details dd { margin: 0; overflow-wrap: anywhere; }
.admin-details.tight { grid-template-columns: 1fr; gap: 12px; margin: 0 0 20px; padding: 16px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.admin-details.tight > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.admin-details.tight dt { margin: 0; }
.admin-details.tight dd { text-align: right; }
.admin-details + .admin-note { margin-top: 18px !important; }
.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px; margin: 0 0 18px; }
.admin-stats dd { margin: 0; font: 500 1.625rem/1.15 var(--serif); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.admin-stats dd small { font: 400 0.78125rem/1.4 var(--sans); letter-spacing: 0; }
.admin-meter { display: block; width: 100%; height: 8px; margin: 0; border: 0; border-radius: 999px; background: var(--paper-deep); overflow: hidden; -webkit-appearance: none; appearance: none; }
.admin-meter::-webkit-progress-bar { background: var(--paper-deep); }
.admin-meter::-webkit-progress-value { background: var(--accent); }
.admin-meter::-moz-progress-bar { background: var(--accent); }

/* Payments, timeline, paging. */
.admin-ledger, .admin-timeline { list-style: none; margin: 0; padding: 0; }
.admin-ledger li, .admin-timeline li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 20px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.admin-ledger li:last-child, .admin-timeline li:last-child { border-bottom: 0; }
.admin-ledger li > span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.admin-ledger li > span:first-child { min-width: 0; flex: 1; }
.admin-ledger .admin-ledger-total { padding-top: 14px; border-top: 1px solid var(--rule); font-weight: 600; font-size: 1.0625rem; }
.admin-ledger li + .admin-ledger-total { margin-top: -1px; }
.admin-timeline li > span { min-width: 0; flex: 1 1 260px; }
.admin-timeline li > small { margin: 0; white-space: nowrap; }
.admin-pagination { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin: 24px 0; }
.admin-pagination > span { text-align: center; }

/* What needs a look: one alert row each, the tone on its left edge. */
.admin-alert { display: block; margin: 0 0 12px; padding: 16px 20px; border: 1px solid var(--rule); border-left-width: 5px; border-left-color: var(--clay); border-radius: var(--radius); background: var(--surface); }
.admin-alert.bad { border-left-color: var(--error); }
.admin-alert.warn { border-left-color: var(--clay); }
.admin-alert h3 { margin: 0 0 4px; font-size: 1.0625rem; }
.admin-alert p, p.admin-alert { margin: 0 !important; font-size: 0.875rem; color: var(--muted); }
p.admin-alert { margin: 0 0 24px !important; color: var(--ink); }

/* Inline go-ahead, action forms, call reports. */
.admin-inline-form { display: flex; flex-wrap: nowrap; align-items: center; gap: 12px; margin: 0; }
.admin-inline-form .check-row { white-space: nowrap; min-height: 0; }
.admin-inline-form button { white-space: nowrap; }
.admin-form { display: grid; gap: 18px; }
.admin-form-go { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 4px 0 0 !important; }
.admin-pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 400 0.9375rem/1.55 var(--sans); background: var(--paper); padding: 16px; border-radius: 10px; }
.admin-transcript summary { cursor: pointer; min-height: 32px; }
.admin-transcript ol { list-style: none; margin: 12px 0 0; padding: 0; }
.admin-transcript li { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.admin-transcript li p { margin: 4px 0 0; }
.admin-main .reading { margin-top: 32px; }
.admin-main .reading h2 { margin-top: 32px; }

@media (max-width: 1020px) {
  .admin-nav { display: none; }
  .admin-menu { display: block; }
}
@media (max-width: 820px) {
  .admin-search { grid-template-columns: 1fr; }
  .admin-search button { width: 100%; }
}
@media (max-width: 600px) {
  .admin-header, .admin-main { padding-left: 16px; padding-right: 16px; }
  .admin-header { gap: 10px 16px; padding-top: 16px; }
  .admin-desk { display: none; }
  .admin-main { padding-top: 22px; padding-bottom: 48px; }
  .admin-panel { margin: 18px 0; padding: 18px; }
  .admin-panel.admin-table-wrap { padding: 6px 18px; }
  .admin-narrow { padding: 20px; }
  .admin-actions { display: grid; grid-template-columns: 1fr; }
  .admin-actions > * { width: 100%; }
  .admin-form-go button { width: 100%; }
  .admin-table { min-width: 680px; }
  .admin-stats { grid-template-columns: 1fr 1fr; }
  .admin-stats dd { font-size: 1.375rem; }
  .admin-alert { padding: 14px 16px; }
}

/* The book: person-page card, editor rows, chapter form and the public clip page. */
/* Each button in the print card keeps the same gap to the one above it, approval and reopening included. */
.print-card .print-actions { display: grid; gap: var(--space-3); }
/* The cover likeness: only beside the title form on wide screens (see the Book tab rules). */
.book-mock { display: none; flex-direction: column; align-items: center; gap: 8px; width: 210px; aspect-ratio: 2 / 3; margin: auto; padding: 22px 14px 12px 22px; border-left: 10px solid var(--accent); border-radius: 3px 8px 8px 3px; background: var(--paper); box-shadow: 0 1px 2px rgb(28 27 25 / 0.12), 0 10px 24px rgb(28 27 25 / 0.14), inset 2px 0 4px rgb(28 27 25 / 0.12); color: var(--ink); text-align: center; text-decoration: none; overflow: hidden; transition: transform 0.15s ease, box-shadow 0.15s ease; }
a.book-mock:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgb(28 27 25 / 0.12), 0 14px 30px rgb(28 27 25 / 0.18), inset 2px 0 4px rgb(28 27 25 / 0.12); }
.book-mock-eyebrow { font: 600 0.5625rem/1.2 var(--serif); letter-spacing: 0.16em; text-transform: uppercase; color: var(--clay); }
.book-mock-title { max-width: 100%; font: 600 1.375rem/1.15 var(--serif); overflow-wrap: anywhere; }
.book-mock-subtitle { font: italic 0.6875rem/1.3 var(--serif); color: var(--muted); }
.book-mock-art { width: 88%; margin-top: auto; mix-blend-mode: multiply; }
@media (prefers-reduced-motion: reduce) { .book-mock, a.book-mock:hover { transition: none; transform: none; } }
.print-card .print-actions form { margin: 0; }
.print-card .order-list { margin: var(--space-4) 0 0; }
/* The order form: what an order placed now prints. */
.as-it-is { margin: 0 0 var(--space-5); }
.chapter-row .chapter-no { flex: none; width: 32px; font: 400 2rem/1 var(--serif); color: var(--clay); text-align: center; }
.chapter-row.left-out .call-text h3, .chapter-row.left-out .chapter-no { color: var(--muted); }
button.icon-only { width: 44px; padding: 0; }
button.icon-only .flip .icon { transform: rotate(180deg); }
.check-row { display: flex; align-items: flex-start; gap: var(--space-3); min-height: 44px; }
.check-row input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--accent); }
.chapter-form textarea[name='text'], .chapter-form textarea[name='english'] { font: 400 1.1875rem/1.7 var(--serif); }
.listen-audio { width: 100%; margin-top: var(--space-4); }

/* Printed book orders */
.summary-art { display: block; width: 180px; margin: 0 auto var(--space-2); }
.order-fields { display: grid; gap: var(--space-5); align-content: start; }
.order-list { display: grid; gap: var(--space-2); margin: 0 0 var(--space-3); padding: 0; list-style: none; }
.order-list li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.order-list li > span:first-child { flex: 1 1 auto; }
.timeline .track { display: flex; width: fit-content; margin-top: var(--space-2); }

/* The print order form: size, cover, copies and shipping as choice cards on the paper, the live total beside them. */
.book-order .order-fields { gap: var(--space-6); }
fieldset.choices { display: grid; gap: var(--space-3); padding: 0; border: 0; background: none; }
fieldset.choices > legend { margin-bottom: var(--space-3); padding: 0; font: 600 1.375rem/1.2 var(--serif); }
.choices-hint { margin: 0; color: var(--muted); }
.size-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.size-tile { position: relative; display: grid; justify-items: center; align-content: start; gap: 2px; min-height: 44px; padding: var(--space-3) 6px 10px; text-align: center; cursor: pointer; }
.size-tile .book-outline { margin-bottom: 6px; }
.tile-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.tile-input:disabled { cursor: not-allowed; }
.tile-name { font: 600 1rem/1.2 var(--serif); }
.tile-dims { color: var(--muted); font-size: 0.8125rem; line-height: 1.3; }
.tile-price { margin-top: 4px; font: 600 1rem/1.2 var(--serif); font-variant-numeric: tabular-nums; }
.size-tile:has(.tile-input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; }
.size-tile:has(.tile-input:disabled) > :not(input) { opacity: 0.5; }
.size-note { margin: 0; color: var(--muted); font-size: 0.9375rem; }
.book-outline { display: block; width: 48px; height: 48px; }
.book-outline rect { fill: var(--surface); stroke: var(--accent); stroke-width: 1.5; }
.book-outline line { stroke: var(--accent-line); stroke-width: 1.5; }
.size-tile:has(input:checked) .book-outline rect { fill: var(--accent); }
.size-tile:has(input:checked) .book-outline line { stroke: var(--accent-soft); }
/* Cover and shipping: one card each, its choices rows divided by hairlines. */
.choice-card { display: grid; overflow: hidden; }
.choice-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); min-height: 56px; padding: 14px var(--space-4); cursor: pointer; }
.choice-row + .choice-row { border-top: 1px solid var(--rule); }
.choice-row:has(input:checked) { background: var(--accent-faint); }
.choice-row:has(input:disabled) { cursor: not-allowed; }
.choice-row:has(input:disabled) :is(.choice-title, .choice-meta, .choice-price) { opacity: 0.5; }
.choice-row input { width: 22px; height: 22px; margin: 0; accent-color: var(--accent); }
.choice-main { display: grid; gap: 2px; min-width: 0; }
.choice-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font: 600 1.125rem/1.25 var(--serif); }
.choice-meta { color: var(--muted); font-size: 0.875rem; line-height: 1.4; }
.choice-reason { color: var(--warn-ink); font-size: 0.875rem; line-height: 1.4; }
.choice-reason[hidden] { display: none; }
.choice-price { font: 600 1.1875rem/1 var(--serif); font-variant-numeric: tabular-nums; white-space: nowrap; }
.chip-tag { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: 999px; background: var(--ok-bg); color: var(--ok-ink); font: 600 0.75rem/1 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; }
.chip-tag.premium { background: var(--clay-soft); color: var(--clay); }
.choice-row:has(input:checked) .chip-tag { background: var(--surface); }
.copies-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); padding: var(--space-4) 20px; background: var(--surface); border-radius: var(--radius-panel); box-shadow: var(--shadow-card); }
.qty { display: inline-flex; align-items: center; gap: var(--space-2); }
.qty input { box-sizing: border-box; width: 4.5rem; height: 48px; padding: 0 var(--space-2); border: 1px solid var(--field-border); border-radius: 999px; background: var(--surface); color: var(--ink); text-align: center; font: 600 1.125rem/1 var(--sans); font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.qty input::-webkit-inner-spin-button, .qty input::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
.qty .qty-step { width: 48px; min-height: 48px; border-radius: 999px; }
.qty .qty-step[hidden] { display: none; }
.copies-note { flex: 1 1 14rem; margin: 0; color: var(--muted); }
.copies-note strong { color: var(--ink); font-weight: 600; }
.summary-lines { display: grid; gap: var(--space-2); margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.summary-lines li { display: flex; justify-content: space-between; gap: var(--space-3); color: var(--muted); font-size: 0.9375rem; line-height: 1.4; }
.summary-lines li[hidden] { display: none; }
.summary-lines li > span:last-child { color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* The offer after the story: packages, the account, then payment. */
.account-box { display: grid; gap: 20px; margin-top: var(--space-6); padding: 40px; }
.account-box > p { margin: 0; }
.account-box .or { margin: 0; }
/* The account screen's title and its line sit above the card; without script the title is an h2 at the h1's size. */
.account-step { margin-top: var(--space-6); }
.account-step > h2 { margin: 0 0 var(--space-3); font-size: 3rem; line-height: 1.1; }
.account-step > .lede { margin: 0 0 var(--space-5); }
.account-step > .account-box { margin-top: 0; }
.buy-bar { display: none; }
@media (max-width: 1023px) {
  .offer { padding-bottom: 96px; }
  body:has(.buy-bar) { padding-bottom: calc(var(--bar-height) + env(safe-area-inset-bottom)); }
  .offer:has([data-account]) .side { display: none; }
  .buy-bar { position: fixed; z-index: 15; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--gutter) calc(var(--space-3) + env(safe-area-inset-bottom)); pointer-events: none; transition: transform 0.2s ease; }
  .buy-bar[data-away='true'] { transform: translateY(110%); }
  .buy-bar-total { display: grid; flex: 1; min-width: 0; font-size: 0.9375rem; color: var(--muted); }
  .buy-bar-total strong { font: 600 1.375rem/1.2 var(--serif); color: var(--ink); }
  .buy-bar button { flex: none; min-width: 9rem; }
  /* A package picker's bar: the package's name on one line above its price, the submit button beside them. */
  .package-bar .buy-bar-total > span { overflow: hidden; font-size: 0.875rem; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; }
}
@media (max-width: 759px) {
  .account-box { padding: var(--space-5); }
  .account-step > h2 { font-size: 2.25rem; }
}
.guarantee { display: flex; align-items: flex-start; gap: var(--space-3); margin: var(--space-5) 0 0; font-size: 0.9375rem; line-height: 1.5; color: var(--muted); }
.guarantee > .icon { flex: none; width: 22px; height: 22px; color: var(--ok-ink); }
.summary .guarantee { margin: var(--space-2) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--rule); }
/* One guarantee on screen: beside the packages on phones, in the summary card once it sits alongside. */
@media (min-width: 1024px) { [data-offer-part='choose'] > .guarantee { display: none; } }
@media (max-width: 1023px) { .summary .guarantee { display: none; } }


.day-tiles.pills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.day-tiles.pills .tile { min-height: 48px; border-radius: 999px; }

/* Landing page phone bar: web.js unhides it and toggles data-shown; the global reduced-motion rule drops the slide. */
.start-bar { display: none; }
@media (max-width: 759px) {
  .start-bar:not([hidden]) { position: fixed; z-index: 15; left: 0; right: 0; bottom: 0; display: flex; padding: var(--space-3) var(--gutter) calc(var(--space-3) + env(safe-area-inset-bottom)); pointer-events: none; transform: translateY(110%); visibility: hidden; transition: transform 0.2s ease, visibility 0s linear 0.2s; }
  .start-bar[data-shown='true'] { transform: none; visibility: visible; transition: transform 0.2s ease; }
  .start-bar .button.go { flex: 1; justify-content: space-between; min-height: 48px; padding: 3px 3px 3px var(--space-5); }
  .start-bar .go-ico { width: 38px; height: 38px; }
  body:has(.start-bar[data-shown='true']) { padding-bottom: calc(var(--bar-height) + env(safe-area-inset-bottom)); }
}

/*
 * The funnel's progress in place of the circle steppers: after a back arrow where there is one, a bar ending in a book,
 * then a few cheering words (under the bar on phones). The fill grows from the step before as the step loads; the
 * widths follow stepFills() for the funnel's nine steps.
 */
.step-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-3); min-height: 44px; margin: 0 0 var(--space-3); }
.step-bar { position: relative; flex: 1 1 0; min-width: 0; height: 8px; border-radius: 999px; background: var(--rule); overflow: hidden; }
.step-fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 999px; background: var(--accent); }
.step-fill[data-fill='11'] { width: 11%; }
.step-fill[data-fill='22'] { width: 22%; }
.step-fill[data-fill='33'] { width: 33%; }
.step-fill[data-fill='44'] { width: 44%; }
.step-fill[data-fill='56'] { width: 56%; }
.step-fill[data-fill='67'] { width: 67%; }
.step-fill[data-fill='78'] { width: 78%; }
.step-fill[data-fill='89'] { width: 89%; }
.step-fill[data-fill='100'] { width: 100%; }
.step-fill[data-from='0'] { --from: 0%; }
.step-fill[data-from='11'] { --from: 11%; }
.step-fill[data-from='22'] { --from: 22%; }
.step-fill[data-from='33'] { --from: 33%; }
.step-fill[data-from='44'] { --from: 44%; }
.step-fill[data-from='56'] { --from: 56%; }
.step-fill[data-from='67'] { --from: 67%; }
.step-fill[data-from='78'] { --from: 78%; }
.step-fill[data-from='89'] { --from: 89%; }
.step-fill[data-from='100'] { --from: 100%; }
.step-goal { display: flex; flex: none; margin-left: calc(-1 * var(--space-1)); color: var(--muted); }
.step-goal .icon { width: 20px; height: 20px; }
.step-top[data-full] .step-goal { color: var(--accent); }
.step-cheer { flex: none; margin: 0; color: var(--muted); font-size: 0.875rem; font-weight: 500; line-height: 1.4; }
@media (max-width: 759px) {
  .step-cheer { flex-basis: 100%; margin-top: calc(-1 * var(--space-2)); }
  .back-button ~ .step-cheer { padding-left: calc(44px + var(--space-3)); }
  .step-top:not(:has(.back-button)) .step-cheer { margin-top: var(--space-1); }
  /* The funnel before payment leaves more room between the bar and the page title. */
  :is(.page:has(> .funnel), .offer-main) > .step-top { margin: 2px 0 22px; }
}
/* A fixed slot for the words keeps the bar the same length from step to step. */
@media (min-width: 760px) { .step-top { flex-wrap: nowrap; max-width: 600px; margin-bottom: var(--space-4); } .step-cheer { flex-basis: 9.5rem; } }
@keyframes step-fill { from { width: var(--from); } }
@media (prefers-reduced-motion: no-preference) {
  .step-fill { animation: step-fill 600ms ease-out; }
}
@media (forced-colors: active) { .step-bar { border: 1px solid CanvasText; } .step-fill { background: CanvasText; forced-color-adjust: none; } }

/* The offer on phones: web.js shows the packages, then the account, each with its action in the bottom bar. */
.account-action { display: contents; }
/* The package and its price show beside the account's button only while it rides in the phone bar. */
.account-action .buy-bar-total { display: none; }
@media (max-width: 759px) {
  .offer[data-offer-step] .side { display: none; }
  .offer[data-offer-step='choose'] [data-offer-part='account'], .offer[data-offer-step='account'] [data-offer-part='choose'], .offer[data-offer-step='account'] .buy-bar { display: none; }
  .offer[data-offer-step='account'] .account-step { margin-top: 0; }
  .offer[data-offer-step='account'] .account-action { position: fixed; z-index: 15; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--gutter) calc(var(--space-3) + env(safe-area-inset-bottom)); pointer-events: none; }
  .offer[data-offer-step='account'] .account-action button { flex: none; width: auto; }
  .offer[data-offer-step='account'] .account-action .buy-bar-total { display: grid; }
  /* A long package name takes a second line rather than being cut. */
  .offer[data-offer-step='account'] .account-action .buy-bar-total > span { font-size: 0.875rem; line-height: 1.3; }
  /* The title fills its first line before it wraps, rather than balancing its two lines. */
  .offer [data-offer-part='choose'] > h1 { text-wrap: wrap; }
  .offer .package-bar .buy-bar-total > span { font-size: 0.9375rem; }
  .offer .package-bar .buy-bar-total strong { font-size: 1.625rem; line-height: 1.1; }
  /* The packages and the guarantee under them fit one 390×844 screen above the bar, with a package opened. */
  .offer .package-rows { gap: var(--space-3); margin-top: var(--space-3); }
  .offer .package-row { padding: var(--space-4) 20px var(--space-4) var(--space-4); }
  .offer .pr-title { font-size: 1.3125rem; line-height: 1.2; }
  .offer .pr-facts { font-size: 0.9375rem; line-height: 1.4; }
  .offer .pr-more { font-size: 0.9375rem; line-height: 1.45; }
  .offer .package-row .price { font-size: 1.75rem; }
  .offer [data-offer-part='choose'] > .guarantee { gap: 10px; margin-top: 20px; font-size: 1rem; line-height: 1.45; }
  .offer [data-offer-part='choose'] > .guarantee > .icon { width: 20px; height: 20px; margin-top: 1px; }
  /* The packages follow the title and the test-mode line comes after them. Tab order follows the markup. */
  .offer [data-offer-part='choose'] { display: flex; flex-direction: column; }
  .offer [data-offer-part='choose'] > .test-mode { order: 1; margin-top: var(--space-5); }
  .test-mode .notice { align-items: center; gap: var(--space-2); margin: 0; padding: var(--space-2) var(--space-3); font-size: 0.875rem; }
  .test-mode .notice > .icon { width: 18px; height: 18px; margin: 0; }
}
/*
 * The offer on wider screens: the same two screens, the packages and then the account, with the order summary beside
 * them once it fits.
 */
.summary .offer-next { display: none; }
@media (min-width: 760px) {
  .offer [data-offer-part='choose'] { display: flex; flex-direction: column; }
  .offer [data-offer-part='choose'] > .test-mode .notice { margin-bottom: 0; }
  .offer[data-offer-step='choose'] [data-offer-part='account'], .offer[data-offer-step='account'] [data-offer-part='choose'], .offer[data-offer-step='account'] .buy-bar { display: none; }
  .offer[data-offer-step='account'] .account-step { margin-top: 0; }
}
/* Beside the packages, Continue rides at the foot of the order card, which stays in view while they scroll. */
@media (min-width: 1024px) { .offer[data-offer-step='choose'] .offer-next { display: flex; margin-top: var(--space-3); } }

/* "Not ready to decide?": a bottom sheet on phones, a card near the bottom on wider screens. */
dialog.sheet { position: fixed; inset: auto 0 0; width: 100%; max-width: 480px; max-height: calc(100dvh - 32px); margin: 0 auto; padding: 0; overflow: auto; border: 0; border-radius: 20px 20px 0 0; background: var(--surface); color: var(--ink); box-shadow: 0 -8px 32px rgb(28 27 25 / 0.16); }
dialog.sheet::backdrop { background: rgb(28 27 25 / 0.4); }
.sheet > div { padding: var(--space-5) var(--gutter) calc(var(--space-5) + env(safe-area-inset-bottom)); }
.sheet h2 { margin: 0 0 var(--space-2); }
.sheet p { margin: 0 0 var(--space-4); }
.sheet .stack { display: grid; gap: var(--space-3); }
.sheet .stack p { margin: 0; }
.sheet [role='status']:focus { outline: none; }
@media (min-width: 760px) {
  dialog.sheet { bottom: var(--space-6); border-radius: var(--radius-panel); }
  .sheet > div { padding: var(--space-6); }
}
@media (prefers-reduced-motion: no-preference) {
  dialog.sheet[open] { animation: sheet-in 0.25s ease-out; }
  dialog.sheet[open]::backdrop { animation: sheet-fade 0.25s ease-out; }
}
@keyframes sheet-in { from { transform: translateY(100%); } }
@keyframes sheet-fade { from { opacity: 0; } }

/* Panels that must stand out (the confirmation while Grace waits for it, the offer near the end) keep a soft block. */
.tinted { padding: var(--space-4) 20px; border-radius: var(--radius-card); background: var(--accent-faint); }

/* The person and call pages on phones: tabs that stay on screen (web.js sets data-tab); the call page's main actions in a bottom bar. */
.page-tabs, .phone-bar { display: none; }
.tab-list a { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--space-1); border-bottom: 2px solid transparent; color: var(--muted); font-weight: 500; font-size: 1.0625rem; text-align: center; text-decoration: none; }
.tab-list a:hover { color: var(--ink); }
.tab-list a[aria-selected='true'] { border-bottom-color: var(--accent); color: var(--ink); font-weight: 600; }
.tab-list a:focus-visible { outline-offset: -3px; }
@media (max-width: 759px) {
  .person-header > .badge { display: none; }
  .person-header .opt-line { margin: var(--space-1) 0 0; color: var(--muted); font-size: 0.9375rem; }
  .person-page[data-tab] .status-card { margin-bottom: 0; }
  .page-tabs:not([hidden]) { position: sticky; z-index: 9; top: 64px; display: block; margin: 0 calc(-1 * var(--gutter)) var(--space-5); padding: var(--space-2) var(--gutter) 0; background: var(--paper); border-bottom: 1px solid var(--rule); }
  .tab-list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  html:has([data-tab-page][data-tab]) { scroll-padding-top: calc(64px + 72px + var(--space-3)); }
  [data-tab-page][data-tab='stories'] [data-panel]:not([data-panel='stories']),
  [data-tab-page][data-tab='next-call'] [data-panel]:not([data-panel='next-call']),
  [data-tab-page][data-tab='book'] [data-panel]:not([data-panel='book']),
  [data-tab-page][data-tab='details'] [data-panel]:not([data-panel='details']),
  [data-tab-page][data-tab='chapter'] [data-panel]:not([data-panel='chapter']),
  [data-tab-page][data-tab='ask'] [data-panel]:not([data-panel='ask']) { display: none; }
  /* One group shows at a time, so the two columns become one list with even gaps; Details leads with what Grace knows. */
  .person-page[data-tab] .with-side { display: flex; flex-direction: column; gap: var(--space-5); }
  .person-page[data-tab] .with-side > div, .person-page[data-tab] .with-side > .side { display: contents; }
  .person-page[data-tab] .with-side [data-panel] { margin-top: 0; margin-bottom: 0; }
  .person-page[data-tab] .with-side h2[data-panel] { margin-bottom: calc(var(--space-3) - var(--space-5)); }
  .person-page[data-tab] .with-side details.book { margin-top: calc(var(--space-4) - var(--space-5)); }
  .person-page[data-tab] :is(.knows, .knows-card) { order: -2; }
  .phone-bar { position: fixed; z-index: 15; left: 0; right: 0; bottom: 0; display: flex; gap: var(--space-3); padding: var(--space-3) var(--gutter) calc(var(--space-3) + env(safe-area-inset-bottom)); pointer-events: none; }
  .phone-bar .button, .phone-bar button { flex: 1 1 0; min-width: 0; padding: 0 var(--space-3); }
  body:has(.phone-bar) { padding-bottom: calc(var(--bar-height) + env(safe-area-inset-bottom)); }
}
/*
 * The person page on wider screens: the same tabs, under the status and progress cards and not stuck. One group shows at
 * a time across the full width; the small Details cards sit two to a row.
 */
@media (min-width: 760px) {
  .person-page:not([data-tab]) .bk-tab:has(> .bk-none) { display: none; }
  .person-page[data-tab] { display: flex; flex-direction: column; }
  .person-page[data-tab] > .page-tabs, .person-page[data-tab] > .page-tabs ~ * { order: 1; }
  .person-page .page-tabs:not([hidden]) { display: block; margin-bottom: var(--space-6); border-bottom: 1px solid var(--rule); }
  .person-page .tab-list { display: flex; gap: var(--space-5); }
  .person-page[data-tab='stories'] [data-panel]:not([data-panel='stories']),
  .person-page[data-tab='next-call'] [data-panel]:not([data-panel='next-call']),
  .person-page[data-tab='book'] [data-panel]:not([data-panel='book']),
  .person-page[data-tab='details'] [data-panel]:not([data-panel='details']) { display: none; }
  .person-page[data-tab] .with-side { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; }
  .person-page[data-tab] .with-side > div, .person-page[data-tab] .with-side > .side { display: contents; }
  .person-page[data-tab] .with-side > div > *, .person-page[data-tab] .with-side > aside > * { grid-column: 1 / -1; margin-top: 0; margin-bottom: 0; }
  /* Details stacks its small cards in the first column and the taller timeline down the second, so neither leaves a hole. */
  .person-page[data-tab] .with-side > aside > [data-panel='details'] { grid-column: 1; }
  .person-page[data-tab] .with-side > aside > .timeline-card { grid-column: 2; grid-row: span 3; }
  .person-page[data-tab] .with-side > div > h2 { margin-bottom: calc(var(--space-3) - var(--space-5)); }
  .person-page[data-tab] .with-side > div > details.book { margin-top: calc(var(--space-4) - var(--space-5)); }
  .person-page[data-tab] #more-calls:not([data-panel]) { order: -4; }
  .person-page[data-tab] #more-calls:not([data-panel]) .block { width: auto; }
  .person-page[data-tab] :is(.knows, .knows-card) { order: -2; }
  .person-page[data-tab] .timeline-card { order: 1; }
  .focus-form { grid-template-rows: repeat(3, auto); }
  .focus-form .field { grid-row: 1 / -1; grid-template-rows: subgrid; }
  .focus-form button { grid-area: 2 / 2; }
}
/*
 * The book on the person page's Book tab: the printed book, the title and the chapters stack on phones and narrow
 * screens; from 1024px the printed book and the title sit side by side above the chapters.
 */
.book-editor { display: grid; gap: var(--space-5); align-items: start; }
.book-chapters h2 { margin: 0 0 var(--space-3); }
.book-chapters .card { margin: 0; }
@media (min-width: 1024px) {
  .person-page[data-tab] .book-editor { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .person-page[data-tab] .book-editor > .book-chapters { grid-column: 1 / -1; }
  .person-page[data-tab] .book-editor > .print-card { display: flex; flex-direction: column; }
  .person-page[data-tab] .print-card .print-actions { margin-top: var(--space-5); }
  .person-page[data-tab] .print-card .book-mock { display: flex; }
  /* The title card fills the row too: the dedication grows so Save lines up with Order printed copies. */
  .person-page[data-tab] .book-editor > .details-card { display: flex; flex-direction: column; }
  .person-page[data-tab] .details-card > form { display: flex; flex: 1; flex-direction: column; gap: 20px; }
  .person-page[data-tab] .details-card .field:has(textarea) { display: flex; flex: 1; flex-direction: column; }
  .person-page[data-tab] .details-card textarea { flex: 1; min-height: 6rem; resize: none; }
}
/* The call page on phones: the call's line between arrows to the other calls, the clip first, then tabs. */
.call-head { display: none; }
@media (min-width: 760px) { .story-more > summary { display: none; } }
@media (max-width: 759px) {
  .call-main > .back-row { margin-bottom: var(--space-3); }
  .call-head { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); }
  .call-head h1 { grid-column: 2; grid-row: 1; margin: 0; font-size: 1.25rem; line-height: 1.3; text-align: center; text-wrap: balance; }
  .call-step { grid-row: 1; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--rule); border-radius: 999px; background: var(--surface); color: var(--ink); font: 400 1.75rem/1 var(--serif); text-decoration: none; }
  .call-step[rel='prev'] { grid-column: 1; }
  .call-step[rel='next'] { grid-column: 3; }
  .call-step:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
  .call-main > #longer-calls { margin-bottom: var(--space-4); }
  .call-main > .listen { margin: 0 0 var(--space-4); padding: var(--space-4); }
  .listen-why { font-size: 1.125rem; }
  /* Scales the native controls, play button included, so they stay the browser's own. */
  .listen audio { display: block; width: 100%; zoom: 1.3; }
  .call-layout[data-tab] { gap: 0; }
  .call-layout[data-tab] .call-main > .divider { display: none; }
  .call-layout[data-tab] #chapter, .call-layout[data-tab] #stories h2 { margin-top: 0; }
  #stories .story { display: flex; flex-direction: column; }
  #stories .story h3 { margin-bottom: 0; }
  #stories .story .quote { order: 1; margin: var(--space-3) 0 0; }
  .story-more { order: 2; margin-top: var(--space-2); }
  .story-more > summary { display: flex; align-items: center; min-height: 44px; color: var(--accent); font-weight: 600; cursor: pointer; }
  .story-more .tag { margin-top: 0; }
  .story-more p { margin-bottom: 0; }
}

/*
 * The fixed bottom bars: a solid paper box down to the screen's edge, since iOS Safari tints its toolbar with the
 * colour of a fixed element there, and above it a fade drawn in the bar's transparent top border. Taps go through
 * the fade; only the bar's contents take them.
 */
@media (max-width: 1023px) {
  .start-bar, .buy-bar, .phone-bar, .setup[data-stepped] .step-action, .offer[data-offer-step='account'] .account-action { border-top: var(--bar-fade) solid transparent; background: var(--paper) padding-box; }
  .start-bar::before, .buy-bar::before, .phone-bar::before, .setup[data-stepped] .step-action::before, .offer[data-offer-step='account'] .account-action::before { position: absolute; left: 0; right: 0; top: calc(-1 * var(--bar-fade)); height: var(--bar-fade); background: linear-gradient(to bottom, rgb(251 247 240 / 0), var(--paper)); pointer-events: none; }
  .start-bar::before, .buy-bar::before, .phone-bar::before { content: ''; }
  .start-bar > *, .step-action > *, .buy-bar > *, .phone-bar > *, .account-action > * { pointer-events: auto; }
}
/* Wider than phones the step and account actions sit in the page (display: contents), so they draw no fade. */
@media (max-width: 759px) {
  .setup[data-stepped] .step-action::before, .offer[data-offer-step='account'] .account-action::before { content: ''; }
}

/* The time zone note reads as the select's own hint, so it sits at the field's hint spacing. */
.form-card > .zone-note { margin: -14px 0 0; }
.zone-note:empty { display: none; }

/* The notice after an action: web.js moves it into a toast region fixed at the bottom of the screen. */
.toast-region { position: fixed; z-index: 30; left: 0; right: 0; bottom: calc(var(--space-5) + env(safe-area-inset-bottom)); display: flex; justify-content: center; padding: 0 var(--gutter); pointer-events: none; }
.toast-region .notice { align-items: center; gap: var(--space-3); width: 100%; max-width: 480px; margin: 0; padding: var(--space-3) var(--space-4); box-shadow: 0 6px 20px rgb(28 27 25 / 0.16); pointer-events: auto; }
.toast-close { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; margin: -10px -12px -10px 0; padding: 0; border: 0; border-radius: var(--radius); background: transparent; color: inherit; cursor: pointer; }
.toast-close .icon { width: 22px; height: 22px; }
@media (prefers-reduced-motion: no-preference) {
  .toast-region .notice { animation: toast-in 0.25s ease-out; transition: opacity 0.3s ease, transform 0.3s ease; }
  .toast-region[data-leaving] .notice { opacity: 0; transform: translateY(12px); }
}
@keyframes toast-in { from { opacity: 0; transform: translateY(16px); } }

/*
 * The signed-in app, calm and flat: sections sit on the paper, apart by spacing and hairlines; one card per screen for
 * the thing that matters most (the dashboard's next step, the person's Now); 10px buttons without shadows, serif
 * headings, a minutes bar. Text on these pages stays at 17px or more.
 */
.paper { border: 1px solid var(--rule); border-radius: var(--radius-card); background: var(--surface); }
:is(.home, .person-page, .call-layout) :is(.small, .hint, .badge, .draft-note) { font-size: 1.0625rem; }
.eyebrow.pill.honey { background: var(--warn-bg); color: var(--warn-ink); }
.button.on-dark { border-color: rgb(255 255 255 / 0.5); background: transparent; color: #fffbf2; }
.button.on-dark:hover { border-color: #fffbf2; background: rgb(255 255 255 / 0.1); color: #fff; }
.minutes-line { display: flex; align-items: baseline; gap: var(--space-2); margin: 0 0 10px; color: var(--muted); font-size: 1.0625rem; }
.minutes-line strong { color: var(--ink); font: 400 2.25rem/1 var(--serif); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.minutes.large .minutes-line strong { font-size: 2.75rem; letter-spacing: -0.03em; }
.minutes.large .minutes-line { font-size: 1.125rem; }
.minutes-bar { display: block; width: 100%; height: 8px; border: 0; border-radius: 999px; background: var(--paper-deep); color: var(--accent); appearance: none; overflow: hidden; }
.minutes-bar::-webkit-progress-bar { border-radius: 999px; background: var(--paper-deep); }
.minutes-bar::-webkit-progress-value { border-radius: 999px; background: var(--accent); }
.minutes-bar::-moz-progress-bar { border-radius: 999px; background: var(--accent); }
@media (forced-colors: active) { .minutes-bar { border: 1px solid CanvasText; } }

/* The dashboard: the greeting, the one next step as the only card, then everyone in hairline rows. */
.home { max-width: 1120px; }
.hello { margin: var(--space-3) 0 var(--space-6); }
.hello h1 { margin: 0 0 var(--space-3); font-size: 3.25rem; line-height: 1.05; }
.next-step { display: grid; align-items: center; gap: var(--space-6); margin: var(--space-6) 0 var(--space-7); padding: var(--space-6); border: 0; background: #fffbf1; }
.next-step .eyebrow.pill { padding: 0; background: none; }
.next-step h2 { margin: var(--space-2) 0 var(--space-3); font-size: 2rem; line-height: 1.15; }
.next-step-detail { margin: 0; color: var(--muted); font-size: 1.125rem; }
.next-step-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-5); }
.next-step-art { width: 100%; max-width: 240px; margin-left: auto; }
.people-head { margin: 0 0 var(--space-3); }
.people-head h2 { margin: 0; }
.person-cards { display: grid; column-gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
.person-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5) 0; border: 0; border-top: 1px solid var(--rule); border-radius: 0; background: none; }
.person-card h3 { margin: 0; font-size: 1.5rem; line-height: 1.2; }
.person-card h3 a { color: var(--ink); text-decoration: none; }
.person-card h3 a:hover { color: var(--accent-hover); text-decoration: underline; }
.person-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); margin: 0; color: var(--muted); }
.line-word { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink); font-weight: 600; }
.line-word::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.line-word.good { color: var(--accent); }
.line-word.wait { color: var(--warn-ink); }
.person-act { margin-top: auto; padding-top: var(--space-1); }
.person-act .button { width: 100%; white-space: normal; }
.another { display: flex; align-items: center; gap: var(--space-5); margin-top: var(--space-6); padding: var(--space-5) 0; border-top: 1px solid var(--rule); }
.another img { flex: none; width: 72px; height: 72px; }
.another div { flex: 1; }
.another h2 { margin: 0; font-size: 1.375rem; }
.another p { margin: 0; color: var(--muted); }
@media (min-width: 760px) {
  .person-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .next-step { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); padding: 40px; }
  .person-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1023px) { .next-step-art { display: none; } }
@media (max-width: 759px) {
  .hello { margin: var(--space-2) 0 var(--space-5); }
  .hello h1 { font-size: 2.5rem; }
  .next-step { margin: var(--space-5) 0 var(--space-6); padding: 20px; }
  .next-step h2 { font-size: 1.625rem; }
  .next-step-actions { display: grid; }
  .next-step-actions .button { width: 100%; }
}

/* The person page: name, minutes and the Now card lead; the tabs below them on phones, beside them from 1100px. */
.person-header { margin: 0 0 var(--space-5); }
.person-header > div { display: grid; gap: var(--space-1); }
.person-header h1 { margin: 0; font-size: 3rem; line-height: 1.05; }
.person-header .meta { margin: var(--space-1) 0 0; color: var(--faint); }
.person-header .opt-line { margin: 0; color: var(--muted); }
.person-header .badge { justify-self: start; margin-top: var(--space-2); }
.person-lead { display: grid; align-content: start; gap: var(--space-5); margin-bottom: var(--space-6); }
.person-lead > * { margin: 0; }
.minutes-card { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
.minutes-left { margin: var(--space-2) 0 0; color: var(--muted); }
.minutes-card .button { margin-top: var(--space-3); }
.status-card { margin: 0; padding: var(--space-5); border-radius: var(--radius-card); background: var(--accent-hover); color: #e9efe8; }
.status-card h2 { margin: 0 0 var(--space-2); color: #fffbf2; font-size: 1.625rem; line-height: 1.2; }
.status-sentence { margin: 0; color: #d6e1d8; }
.status-card .actions { margin-top: var(--space-5); }
.status-messages { display: grid; gap: var(--space-3); margin: var(--space-4) 0 0; padding: var(--space-4) 0 0; border-top: 1px solid rgb(122 90 18 / 0.18); list-style: none; }
.status-messages strong { display: block; color: var(--ink); font-weight: 600; }
.status-card:is([data-status='invited'], [data-status='missed'], [data-status='message']) { background: #fffbf1; color: var(--ink); }
.status-card:is([data-status='invited'], [data-status='missed'], [data-status='message']) h2 { color: var(--ink); }
.status-card:is([data-status='invited'], [data-status='missed'], [data-status='message']) .status-sentence { color: var(--muted); }
.status-card:is([data-status='invited'], [data-status='missed']) .button.light { border-color: var(--accent); background: var(--accent); color: #fffdf8; }
.status-card:is([data-status='declined'], [data-status='paused']) { background: var(--paper-deep); color: var(--ink); }
.status-card:is([data-status='declined'], [data-status='paused']) h2 { color: var(--ink); }
.status-card:is([data-status='declined'], [data-status='paused']) .status-sentence { color: var(--muted); }
/* The next call inside the Now card: a row under a hairline, not a box of its own. */
.next-row { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid rgb(255 255 255 / 0.18); }
.next-row p { display: grid; margin: 0; }
.next-row strong { color: #fffbf2; font: 500 1.1875rem/1.3 var(--serif); }
.next-row span { color: #d6e1d8; }
.next-ic { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgb(255 255 255 / 0.12); color: inherit; }
.status-card:is([data-status='invited'], [data-status='missed'], [data-status='message'], [data-status='declined'], [data-status='paused']) .next-row { border-top-color: var(--rule); }
.status-card:is([data-status='invited'], [data-status='missed'], [data-status='message'], [data-status='declined'], [data-status='paused']) .next-row strong { color: var(--ink); }
.status-card:is([data-status='invited'], [data-status='missed'], [data-status='message'], [data-status='declined'], [data-status='paused']) .next-row span { color: var(--faint); }
.status-card:is([data-status='invited'], [data-status='missed'], [data-status='message'], [data-status='declined'], [data-status='paused']) .next-ic { background: var(--paper-deep); color: var(--muted); }

/* The tabs: plain words, the chosen one underlined in green. */
.page-tabs .tab-list a:hover { color: var(--ink); }
.page-tabs .tab-list a[aria-selected='true'] { border-bottom-color: var(--accent); color: var(--ink); font-weight: 600; }

/* The tab panels: each part is one card (see "Grouped cards" below); lists of rows sit in one card between hairlines. */
.person-page :is(.side-card, .ask-card, .book-plan, #more-calls) > :is(h2, h3):first-child,
.person-page .story-feature h2 { margin-top: 0; font-size: 1.5rem; line-height: 1.2; }
.person-page .with-side > div > h2 { font-size: 1.5rem; }
.story-feature .kick { margin: 0; color: var(--faint); }
.story-feature h2 { margin: var(--space-1) 0 var(--space-3); }
.feature-quote { margin: 0 0 var(--space-4); font: italic 400 1.25rem/1.5 var(--serif); color: var(--ink); }
.feature-quote p { margin: 0; }
.feature-quote p::before { content: '\201C'; }
.feature-quote p::after { content: '\201D'; }
.clip { margin: 0 0 var(--space-4); }
.clip p { margin: 0 0 var(--space-2); font-weight: 500; }
.clip audio { display: block; width: 100%; margin: 0; }
.story-feature .button.go { white-space: normal; }
.person-page .call-list { border-top: 1px solid var(--rule); }
.person-page .call-plan ~ .call-list { border-top: 0; }
.person-page .call-list > .call-row { align-items: flex-start; gap: var(--space-3) var(--space-4); }
.date-tile { display: grid; flex: none; place-items: center; width: 56px; margin: 0; padding: 6px 0; border-radius: var(--radius-field); background: var(--clay-soft); color: var(--clay); line-height: 1.1; text-align: center; }
.date-tile span { font: 600 0.8125rem/1.2 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; }
.date-tile strong { font: 500 1.5rem/1.1 var(--serif); }
.date-tile.upcoming { background: var(--accent-soft); color: var(--accent); }
.call-row .call-text h3 { margin: 2px 0 var(--space-1); font-size: 1.375rem; line-height: 1.2; }
.call-when { font: 500 1.1875rem/1.35 var(--serif); }
.story-row > .icon { align-self: center; }
.person-page .questions li, .person-page .plan-list li, .person-page .plan-list { border-color: var(--rule); }
.person-page .plan-text .area-name { font-size: 1.1875rem; }
.person-page .ask-button { border-radius: var(--radius-button); font-size: 1rem; }
.person-page .timeline .t-label { font-size: 1.0625rem; }
.person-page .plan-more { padding: var(--space-3) var(--space-4); border-radius: var(--radius-button); }

@media (min-width: 760px) {
  .person-page[data-tab] .with-side { gap: var(--space-7) var(--space-6); }
}
@media (min-width: 1100px) {
  .person-page[data-tab] { display: grid; grid-template-columns: 360px minmax(0, 1fr); column-gap: 56px; align-items: start; }
  .person-page[data-tab] > .person-lead { grid-column: 1; grid-row: 1 / span 6; margin: 0; }
  .person-page[data-tab] > :not(.person-lead) { grid-column: 2; }
  .person-page[data-tab] > .page-tabs:not([hidden]) { margin-top: 56px; }
}
@media (max-width: 759px) {
  .person-header h1 { font-size: 2.25rem; }
  .person-lead { gap: var(--space-4); margin-bottom: var(--space-4); }
  .minutes.large .minutes-line strong { font-size: 2.25rem; }
  .status-card { padding: 20px; }
  .status-card h2 { font-size: 1.375rem; }
  .person-page[data-tab] .with-side { align-items: stretch; gap: var(--space-6); }
  .person-page[data-tab] .with-side h2[data-panel] { margin-bottom: calc(var(--space-3) - var(--space-6)); }
  .person-page[data-tab] .with-side details.book { margin-top: calc(var(--space-4) - var(--space-6)); }
}

/* The call page: reading first, a serif title, the clip as the one card, the chapter and stories at a comfortable measure. */
.call-layout { grid-template-columns: minmax(0, 720px); }
.call-main > h1 { margin: var(--space-2) 0 var(--space-3); font-size: 2.75rem; line-height: 1.1; }
.call-main > .eyebrow { margin-top: var(--space-4); }
.listen { margin: var(--space-6) 0 var(--space-7); padding: var(--space-5); border-radius: var(--radius-card); background: var(--accent-faint); }
.listen-why { font-size: 1.25rem; }
.call-main :is(#chapter, #stories) { max-width: 65ch; }
.call-main #chapter h2, .call-main #stories h2 { font-size: 2rem; }
.chapter p { max-width: 65ch; font-size: 1.1875rem; line-height: 1.75; }
.call-main .story { padding: var(--space-6) 0; border-top: 1px solid var(--rule); }
.call-main .story h3 { font-size: 1.625rem; line-height: 1.2; }
.call-main .story p { font-size: 1.125rem; line-height: 1.7; }
.call-main .story .tag { border-radius: 6px; font-size: 1rem; }
.call-main .story-when { font-size: 0.875rem; }
/* The side and the longer-calls offer: parts on the paper under a hairline, not cards. */
.call-side { gap: var(--space-5); }
.call-side .card, .call-main > #longer-calls { padding: var(--space-5) 0 0; border: 0; border-top: 1px solid var(--rule); border-radius: 0; background: none; }
.call-main > #longer-calls { margin-bottom: var(--space-5); padding-bottom: var(--space-5); border-bottom: 1px solid var(--rule); }
.call-side .card > h4:first-child { font: 500 1.375rem/1.25 var(--serif); }
@media (min-width: 1024px) {
  .call-layout { grid-template-columns: minmax(0, 720px) 320px; }
}
@media (max-width: 759px) {
  .call-head h1 { font: 500 1.3125rem/1.3 var(--serif); }
  .call-main > .listen { margin: 0 0 var(--space-4); padding: var(--space-4); }
  .call-main #chapter h2, .call-main #stories h2 { font-size: 1.75rem; }
  .call-main .story { padding: var(--space-5) 0; }
  /* The bottom bar carries the longer-calls button on phones. */
  .call-main > #longer-calls { margin-top: 0; padding-top: 0; border-top: 0; }
  .call-main > #longer-calls form { display: none; }
  .call-main > #longer-calls p { margin: 0; }
  .call-side > .card:first-child, .call-side > .on-page + .card { padding-top: 0; border-top: 0; }
}
.person-page #more-calls > h2:first-child, .person-page #more-calls > h3:first-child { margin-top: 0; }

/*
 * Step 3 of the premium language: the funnel, the account pages, the book orders, the recipient pages and the shared
 * parts (fields, notices, toasts, sheets, the menu and the footer). Text stays at 17px or more.
 */
.hint, .small, .error-text, .guarantee, .auth-card .foot, .auth-card .forgot, .or, .site-footer .about, .site-footer nav a { font-size: 1.0625rem; }
.field label, .label { font-weight: 500; font-size: 1.0625rem; }

/* Fields: a clear edge (3:1 on the paper) that turns green on hover and focus; no shadow. */
:is(input[type=text], input[type=email], input[type=password], input[type=tel], input[type=date], select, textarea) { border-radius: var(--radius-field); }
:is(input[type=text], input[type=email], input[type=password], input[type=tel], input[type=date], select, textarea):hover { border-color: var(--muted); }
:is(input[type=text], input[type=email], input[type=password], input[type=tel], input[type=date], select, textarea):focus-visible { border-color: var(--accent); outline: 3px solid rgb(47 90 73 / 0.35); outline-offset: 1px; box-shadow: none; }
.field.has-error :is(input, select, textarea) { background-color: var(--error-faint); }

/* Checkboxes and the package radios: a little over native size, drawn in the site's green; forced colours keep the system ones. */
input[type=checkbox] { flex: none; display: inline-grid; width: 22px; height: 22px; margin: 0; border: 1.5px solid var(--field-border); border-radius: 4px; background: var(--surface) no-repeat center / 16px; appearance: none; cursor: pointer; }
input[type=checkbox]:hover { border-color: var(--accent); }
input[type=checkbox]:checked { border-color: var(--accent); background-color: var(--accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
input[type=checkbox]:focus-visible, :is(.package-row, .choice-row) input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
:is(.package-row, .choice-row) input[type=radio] { flex: none; width: 22px; height: 22px; margin: 0; border: 1.5px solid var(--field-border); border-radius: 50%; background: var(--surface); appearance: none; cursor: pointer; }
:is(.package-row, .choice-row) input[type=radio]:checked { border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 4px var(--surface); }
.package-row input[type=radio] { width: 24px; height: 24px; border-width: 2px; }
@media (forced-colors: active) { input[type=checkbox], :is(.package-row, .choice-row) input[type=radio] { appearance: auto; } }
.check-row { gap: 14px; line-height: 1.5; cursor: pointer; }
.check-row input { margin-top: 2px; }
/* The attestation is a plain checkbox row; an error shows in the box's edge and the words under it. */
.attestation.has-error input[type=checkbox] { border: 2px solid var(--error); }

/* Choice tiles: the days and the pills for the language and how Grace calls. */
.day-tiles .tile { border-radius: var(--radius-field); font-weight: 500; }
.day-tiles.pills .tile { min-height: 52px; }
.day-tiles label:hover input:not(:checked) + .tile { border-color: var(--accent); color: var(--accent-hover); }
.day-tiles input:checked + .tile { font-weight: 600; }
.day-picker legend, .setup.funnel .row.two .label-row { font-weight: 500; font-size: 1.0625rem; }
.plan-fields .day-picker:first-child legend { font: 500 1.375rem/1.25 var(--serif); margin-bottom: var(--space-2); }

/* Visible legends sit inside their card as its title, not on its edge. */
fieldset:not(.day-picker) > legend:not(.visually-hidden) { float: left; width: 100%; margin: 0; padding: 0; font: 500 1.625rem/1.2 var(--serif); }

/* Notices: flat tinted blocks; the one after an action becomes a small dark toast at the bottom of the screen. */
.toast-region .notice { border-radius: var(--radius-field); background: var(--ink); color: #fbf7f0; }
.toast-region .notice > .icon { color: #bfd6c6; }
.toast-region .notice.warn > .icon { color: #f1d38c; }
.toast-region .notice.error > .icon { color: #ffb3b3; }
.toast-region .notice a { color: #fff; }

/* Sheets and dialogs: a plain panel from the bottom on phones, a centred one on wider screens, over a dimmed page. */
dialog.sheet { border-radius: var(--radius-card) var(--radius-card) 0 0; background: var(--surface); box-shadow: 0 -4px 20px rgb(35 30 26 / 0.12); }
dialog.sheet::backdrop { background: rgb(35 30 26 / 0.45); }
.sheet h2 { font-size: 1.5rem; }
@media (min-width: 760px) {
  dialog.sheet { border-radius: var(--radius-card); box-shadow: 0 12px 32px rgb(35 30 26 / 0.18); }
}

/* The phone menu: a full-width plain list under the header. */
@media (max-width: 759px) {
  .menu[open] > summary { background: var(--accent); color: #fffdf8; }
  .menu-sheet { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); box-shadow: 0 12px 24px -16px rgb(60 40 20 / 0.3); }
  .menu-sheet .nav-link, .menu-sheet .link-button { border-bottom-color: var(--rule); font: 500 1.25rem/1.2 var(--serif); }
  .menu-sheet .nav-link[aria-current='page'] { color: var(--accent); }
  .menu-sheet .nav-link[aria-current='page']::after { content: ''; width: 8px; height: 8px; margin-left: var(--space-3); border-radius: 50%; background: var(--accent); }
  .menu-sheet .button { min-height: 52px; }
}

/* The footer: a plain paper-deep band. */
.site-footer { margin-top: var(--space-5); padding: 56px 0 var(--space-7); }
@media (max-width: 759px) { .site-footer { padding-top: var(--space-6); } }


/* The funnel's step bar: a thicker track, a book in a coin at the end and the cheering words in italic green. */
.step-bar { height: 10px; background: var(--paper-deep); box-shadow: inset 0 0 0 1px var(--hair); }
.step-fill { background: linear-gradient(90deg, var(--accent), #3f7663); }
.step-goal { display: grid; place-items: center; width: 36px; height: 36px; margin-left: 0; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 1px var(--hair), 0 4px 10px -6px rgb(60 40 20 / 0.4); color: var(--muted); }
.step-goal .icon { width: 18px; height: 18px; }
.step-top[data-full] .step-goal { background: var(--accent); color: #fffdf8; }
.step-cheer { font: italic 400 1.125rem/1.3 var(--serif); color: var(--accent); }
@media (min-width: 760px) { .step-top { max-width: 640px; } .step-cheer { flex-basis: 11rem; } }
@media (max-width: 759px) { .step-cheer { margin-top: 0; } }

/* Numbered steppers (setup and a new order): coins on a rounded line, the current one ringed. */
.stepper li + li::before { height: 2px; border-radius: 999px; background: var(--rule); }
.stepper li.done + li::before, .stepper li.done + li.current::before { background: var(--accent); }
.stepper .dot { border: 0; background: var(--surface); box-shadow: 0 0 0 1px var(--field-border); font-family: var(--serif); }
.stepper .done .dot, .stepper [aria-current='step'] .dot { box-shadow: none; }
.stepper [aria-current='step'] .dot { box-shadow: 0 0 0 5px var(--accent-soft); }

/* Stepped forms and their side panels as soft trays. */
.setup .form-card, .chapter-form { border-radius: 28px; }
.side-panel.panel { border-radius: 28px; }
.setup-step .side-panel h3 { font-size: 1.75rem; line-height: 1.2; }
.step-foot { border-top-color: var(--hair); }
.step-foot [data-back] { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }
.setup > .with-side, .setup-step { gap: var(--space-5) var(--space-6); }

/* Packages and printed formats: paper cards with a ring for the chosen one. */
.package-row { align-items: center; padding: 22px 26px; border: 0; border-radius: 28px; box-shadow: var(--shadow-card); transition: box-shadow 200ms, background-color 200ms; }
.package-row:hover { box-shadow: 0 0 0 1.5px var(--accent-line), 0 14px 32px -16px rgb(60 40 20 / 0.25); }
.package-row:has(input:checked) { border: 0; background: var(--accent-faint); box-shadow: 0 0 0 2px var(--accent), 0 18px 36px -20px rgb(34 68 58 / 0.5); }
/* The book is always in the order, so its row reads as chosen. */
.book-row, .book-row:hover { background: var(--accent-faint); box-shadow: 0 0 0 2px var(--accent), 0 18px 36px -20px rgb(34 68 58 / 0.5); }
@media (forced-colors: active) { .package-row:has(input:checked) { outline: 3px solid CanvasText; } }
.pr-main { gap: 2px; }
.pr-title { font-weight: 500; }
.package-row .price { font-weight: 500; }
@media (max-width: 759px) {
  .package-row { padding: 18px 20px; }
}

/* The order card beside the packages, the test payment and the printed-copies price: a paper card in a cream frame. */
.side .summary, .pay-page .summary { margin: 6px; padding: 28px; border-radius: 28px; box-shadow: 0 0 0 6px var(--paper-deep), 0 0 0 7px var(--hair), 0 18px 36px -22px rgb(60 40 20 / 0.35); }
.summary h3 { font-size: 1.625rem; }
.summary .total { font-weight: 500; border-top-color: var(--hair); }
.summary .total .price { font-weight: 500; }
.summary .small.center { margin-top: var(--space-1); }
.account-box { border-radius: 28px; }
.pay-page h1 { margin-bottom: var(--space-4); }
@media (max-width: 759px) { .side .summary, .pay-page .summary { padding: 22px; } }

/* Log in, sign up and the password pages: a paper card in a cream frame, the leaf on top, the next steps beside. */
.auth { padding-top: var(--space-2); }
.auth-card { margin: 7px; padding: 40px; border-radius: 32px; box-shadow: 0 0 0 6px var(--paper-deep), 0 0 0 7px var(--hair), 0 24px 48px -24px rgb(60 40 20 / 0.35); }
.auth-mark { display: block; width: 56px; height: 56px; margin: 0 0 var(--space-5); padding: 12px; border-radius: 50%; background: var(--accent-soft); }
.auth-card h1 { margin-bottom: var(--space-2); }
.auth-card form.stack :is(button, .button) { min-height: 52px; }
.next-panel { margin: 7px; padding: 40px; border-radius: 32px; background: var(--accent-soft); }
.next-steps li { font-size: 1.375rem; }
@media (max-width: 759px) { .auth-card { padding: 28px 22px; border-radius: 28px; } .auth-mark { width: 48px; height: 48px; padding: 10px; margin-bottom: var(--space-4); } }

/* A page with one thing to say: reminders stopped, an account deleted, a setup already done, an error. */
.message-card { display: grid; justify-items: center; gap: var(--space-4); max-width: 600px; margin: var(--space-3) auto 0; padding: 44px 40px 40px; text-align: center; }
.message-card > * { margin: 0; }
.message-card h1 { font-size: 2.5rem; }
.message-card p { max-width: 30em; color: var(--muted); font-size: 1.1875rem; }
.message-card form { display: grid; }
.message-card .notice { width: 100%; text-align: left; }
.message-ic { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); box-shadow: 0 0 0 8px var(--accent-faint); }
.message-ic .icon { width: 34px; height: 34px; }
.message-card.error-page img { width: 220px; margin: 0 auto; }
@media (max-width: 759px) {
  .message-card { padding: 32px 22px 26px; }
  .message-card h1 { font-size: 2.125rem; }
  .message-card :is(.button, button) { width: 100%; }
  }

/* Account settings: titled sections on the paper under hairlines; deleting the account is titled in red. */
.account .form-card { padding: var(--space-6) 0 0; border: 0; border-top: 1px solid var(--rule); border-radius: 0; background: none; }
.account .card + .card { margin-top: var(--space-6); }
.account .form-card h2 { font-size: 1.5rem; }
.account .danger-zone h2 { color: var(--error); }
@media (max-width: 759px) { .account .form-card { padding-top: var(--space-5); } .account .card + .card { margin-top: var(--space-5); } }

/* The chapter editor and printed-copy orders. */
.chapter-form { padding: 32px; }
.order-fields > fieldset:not(.package-rows, .choices) { border-radius: 28px; padding: 28px; }
.order-status h2 { margin-top: 0; }
.order-status .timeline .t-label { font: 500 1.25rem/1.3 var(--serif); }
.order-status .timeline .current .dot { box-shadow: 0 0 0 5px var(--accent-soft); }
.order-status .timeline .small { margin-top: 2px; }
.order-status .track { margin-top: var(--space-3); }
.order-status .actions .primary { min-width: 16rem; }
@media (max-width: 759px) { .chapter-form { padding: 20px; } .order-fields > fieldset:not(.package-rows, .choices) { padding: 20px; } }

/* Terms and privacy: a reading column with hairlines between the sections. */
.legal { max-width: 720px; }
.legal .eyebrow.pill { margin-top: var(--space-2); }
.legal h1 { margin-top: var(--space-4); }
.legal h2 { padding-top: var(--space-5); border-top: 1px solid var(--hair); font-size: 1.625rem; }
.legal :is(p, li) { font-size: 1.125rem; line-height: 1.7; }
.legal li::marker { color: var(--clay); }
.legal .lede { font-size: 1.25rem; }

/* The recipient's pages, for older readers: 20px text and more, one column, very large buttons, a soft card for the questions. */
.recipient { max-width: calc(560px + 2 * 16px); padding-bottom: var(--space-8); font-size: 1.25rem; line-height: 1.6; }
.r-brand { margin-bottom: 40px; }
.recipient h1 { font-size: 2.75rem; line-height: 1.1; }
.r-lead { color: var(--ink); font-size: 1.5rem; }
.recipient .actions { gap: var(--space-4); }
.recipient button.primary, .recipient button.secondary { min-height: 68px; font-size: 1.375rem; }
.recipient button.secondary { border-width: 2px; }
.r-check { width: 96px; height: 96px; background: var(--accent); color: #fffdf8; box-shadow: 0 0 0 10px var(--accent-soft); margin: 10px 0 var(--space-6) 10px; }
.r-manage { margin-top: 40px; padding: 24px; border: 0; border-radius: 28px; background: var(--paper-deep); }
.r-manage p { color: var(--ink); font-size: 1.25rem; }
.recipient .r-small button.secondary { min-height: 64px; font-size: 1.25rem; }
.r-number { margin: var(--space-6) 0 0; padding: 20px 24px; border-radius: 24px; background: var(--accent-faint); box-shadow: inset 0 0 0 1px var(--accent-line); }
.r-number a { font-weight: 600; white-space: nowrap; }
.r-faq { margin-top: 48px; padding: 24px 24px 8px; border-radius: 28px; background: var(--surface); box-shadow: var(--shadow-card); }
.r-faq h2 { margin: 0 0 var(--space-2); font-size: 1.75rem; }
.r-faq details { border-top-color: var(--hair); }
.r-faq details:last-of-type { border-bottom: 0; }
.r-faq summary { min-height: 72px; color: var(--ink); font: 500 1.375rem/1.3 var(--serif); }
.r-faq summary::after { width: 44px; height: 44px; background: var(--accent-soft); color: var(--accent); font: 600 1.625rem/44px var(--sans); }
.r-answer p { font-size: 1.25rem; }
.recipient .notice { border-radius: 24px; font-size: 1.25rem; }
.r-foot { color: var(--muted); font-size: 1.25rem; }
.recipient .eyebrow.pill { margin-bottom: var(--space-4); font-size: 1rem; }
.r-player { margin: var(--space-5) 6px 0; padding: 24px; border-radius: 28px; background: var(--surface); box-shadow: 0 0 0 6px var(--paper-deep), 0 0 0 7px var(--hair), 0 18px 36px -22px rgb(60 40 20 / 0.35); }
.r-player-top { display: flex; align-items: center; gap: var(--space-4); }
.r-player-top p { margin: 0; font: 400 1.25rem/1.4 var(--serif); }
.r-player-ic { display: grid; flex: none; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--accent); color: #fffdf8; }
.r-player-ic .icon { width: 28px; height: 28px; }
.r-player .listen-audio { display: block; width: 100%; height: 60px; margin: var(--space-5) 0 0; }
@media (max-width: 759px) { .recipient h1 { font-size: 2.5rem; } }
.attestation .check-row { font-weight: 400; }
.auth-card h1 + form { margin-top: var(--space-5); }
@media (max-width: 759px) {
  .message-card form { justify-self: stretch; }
}
@media (max-width: 759px) { .menu-sheet > .nav-link:last-child { border-bottom: 0; } }

/*
 * Grouped cards: every logical group is one card, never a card inside a card. Cards are a warm white on the cream page
 * with a faint 1px edge and 16px corners; inside a card parts sit 12-16px apart, cards in a section 16px apart, and a
 * section's serif heading sits on the page above its cards, 40px below what came before and 12px over its first card.
 * Lists (people's calls, chapters, upcoming conversations) are one card with hairlines between the rows.
 */
:root { --card: #fffdf8; --card-edge: rgb(35 30 26 / 0.09); --card-radius: 16px; --card-pad: 28px; --card-gap: 16px; --section-gap: 40px; }
@media (max-width: 759px) { :root { --card-pad: 20px; } }
.next-step, .person-card, .minutes-card, .status-card, .another,
.person-page :is(.ask-card, .focus-card, .call-plan, .call-list, .story-feature, .side-card, .book-plan, [id='more-calls'], .compact, .print-card, .details-card, .chapter-list),
.call-main :is(.listen, .story, [id='chapter']), .call-main > [id='longer-calls'], .call-side .card,
.account .form-card, .chapter-form, .setup .form-card, .order-fields > fieldset:not(.package-rows, .choices),
.side .summary, .pay-page .summary, .auth-card, .order-status .card {
  margin: 0; padding: var(--card-pad); border: 1px solid var(--card-edge); border-radius: var(--card-radius); background: var(--card); box-shadow: none;
}

/* The dashboard: the next step, then the people and any unfinished orders, one card each. */
.hello { margin-bottom: var(--space-5); }
.next-step { margin: 0 0 var(--card-gap); border-color: #eadfc4; background: #fdf6e7; }
.next-step[data-status='invited'] { border-color: #ead9ae; background: #fcf3dc; }
.people { margin-top: var(--section-gap); }
.next-step + .people { margin-top: calc(var(--section-gap) - var(--card-gap)); }
.people-head { margin: 0 0 var(--space-3); }
.person-cards { gap: var(--card-gap); }
.person-card { gap: var(--space-3); }
.person-card h3 { font-size: 1.375rem; }
.minutes-line { margin-bottom: var(--space-2); }
.minutes-line strong, .minutes.large .minutes-line strong { font-size: 1.5rem; letter-spacing: -0.01em; }
.minutes.large .minutes-line { font-size: 1.0625rem; }
.person-act { padding-top: var(--space-1); }
.another { margin-top: var(--section-gap); }

/* The person page's head: the name on the page, then the minutes and the Now card, one card each. */
.person-lead { gap: var(--card-gap); }
.person-header { margin: 0; }
.status-card { border-color: transparent; background: var(--accent-hover); }
.status-card:is([data-status='invited'], [data-status='missed'], [data-status='message']) { border-color: #ead9ae; background: #fcf3dc; }
.status-card:is([data-status='declined'], [data-status='paused']) { border-color: var(--card-edge); background: var(--paper-deep); }
.status-confirm { display: grid; gap: var(--space-4); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid rgb(122 90 18 / 0.18); }
.status-confirm .attestation { margin: 0; }
.status-confirm .button, .status-confirm button { justify-self: start; }

/* The tab panels: the cards 16px apart; a heading on the page (Upcoming conversations, Past conversations, Chapters) 40px under the card above. */
.person-page[data-tab] .with-side { row-gap: var(--card-gap); }
.person-page[data-tab] .with-side h2[data-panel], .person-page[data-tab] .with-side > div > h2 { margin: calc(var(--section-gap) - var(--card-gap)) 0 calc(var(--space-3) - var(--card-gap)); font-size: 1.5rem; }
.person-page[data-tab] .with-side details.book, .person-page[data-tab] .with-side > div > details.book { margin-top: 0; }
.person-page .ask-card > h2:first-child { margin: 0 0 var(--space-1); }
.person-page .ask-card > .small.muted { margin: 0 0 var(--space-3); }
.person-page .ask-card .questions { margin: 0 0 var(--space-4); border-top: 1px solid var(--rule); }
.person-page .ask-card .questions li:last-child { border-bottom: 0; }
.person-page .ask-card .add-question { margin: 0; }
.person-page .ask-card .already-asked { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--rule); }
.person-page .ask-card .already-asked .questions { margin: var(--space-2) 0 0; }
.person-page .focus-card .add-question { margin: 0; }
.person-page .call-plan { margin: 0; padding: var(--card-pad); border-bottom: 1px solid var(--card-edge); }
.person-page .call-list, .person-page .call-plan ~ .call-list { padding-top: 0; padding-bottom: 0; border-top: 1px solid var(--card-edge); }
.person-page .call-list > .call-row:last-child { border-bottom: 0; }
.person-page .story-feature .button { margin-top: var(--space-1); }
.person-page .empty.compact { padding: var(--card-pad); }
.person-page #more-calls.tinted { border-color: var(--accent-line); background: var(--accent-faint); }
.person-page #more-calls form { margin-top: var(--space-4); }
.person-page .side-card > :last-child, .person-page .book-plan > :last-child { margin-bottom: 0; }
/* The book plan: its rows in the card between hairlines; the nudge for more minutes is a row, not a box in the box. */
.person-page .plan-list li:last-child { padding-bottom: 0; }
.person-page .plan-more { margin: 0 0 var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--rule); border-radius: 0; background: none; }
/* The Book tab: the printed book and the title one card each, the chapters under their heading in one card of rows. */
.book-editor { gap: var(--card-gap); }
.book-chapters h2 { margin: calc(var(--section-gap) - var(--card-gap)) 0 var(--space-3); font-size: 1.5rem; }
.person-page .print-card .order-list { margin: var(--space-4) 0 0; padding-top: var(--space-2); border-top: 1px solid var(--rule); gap: 0; }
.person-page .print-card .order-list li { padding: var(--space-2) 0; border-bottom: 1px solid var(--rule); }
.person-page .print-card .order-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.person-page .chapter-list { padding-top: 0; padding-bottom: 0; }
.book-status .notice { margin: 0 0 var(--card-gap); }

/* The call page: the clip, the chapter and each story one card; the side's parts one card each. */
.call-main > .listen { margin: var(--space-5) 0 var(--card-gap); border-color: var(--accent-line); background: var(--accent-faint); }
.call-main #stories > h2 { margin: var(--section-gap) 0 var(--space-3); }
.call-main #stories .story, #stories .story:first-of-type { margin: 0 0 var(--card-gap); padding: var(--card-pad); border-top: 1px solid var(--card-edge); }
.call-main #chapter { margin-top: var(--card-gap); }
.call-main #chapter > h2 { margin-top: var(--space-2); }
.call-main > .divider { display: none; }
.call-main > #longer-calls { margin: 0 0 var(--card-gap); padding: var(--card-pad); border-top: 1px solid var(--card-edge); border-bottom: 1px solid var(--card-edge); }
.call-side { gap: var(--card-gap); }
.call-side .card { padding: var(--card-pad); border-top: 1px solid var(--card-edge); }

/* Account settings: one card per setting. */
.account .form-card { padding: var(--card-pad); border-top: 1px solid var(--card-edge); }
.account .card + .card { margin-top: var(--card-gap); }

/* The funnel, the orders and the sign-in pages: the same cards, without the cream frames and wide shadows. */
.setup .form-card, .chapter-form, .side-panel.panel, .order-fields > fieldset:not(.package-rows, .choices), .side .summary, .pay-page .summary, .auth-card, .next-panel, .account-box { border-radius: var(--card-radius); }
.package-row { border-radius: var(--card-radius); box-shadow: 0 0 0 1px var(--card-edge); background: var(--card); }
.package-row:hover { box-shadow: 0 0 0 1.5px var(--accent-line); }
.package-row:has(input:checked) { box-shadow: 0 0 0 2px var(--accent); }
.order-fields { gap: var(--card-gap); }

@media (min-width: 760px) {
  .person-page[data-tab] .with-side { row-gap: var(--card-gap); }
}
@media (max-width: 759px) {
  .hello { margin-bottom: var(--space-5); }
  .next-step { margin: 0 0 var(--card-gap); padding: var(--card-pad); }
  .person-lead { gap: var(--card-gap); margin-bottom: var(--space-5); }
  .status-card { padding: var(--card-pad); }
  .person-page[data-tab] .with-side { gap: var(--card-gap); }
  .person-page[data-tab] .with-side h2[data-panel] { margin: calc(var(--section-gap) - var(--card-gap)) 0 calc(var(--space-3) - var(--card-gap)); }
  .person-page[data-tab] .with-side details.book { margin-top: 0; }
  .status-confirm { border-top: 0; padding-top: 0; }
  .call-main > .listen { margin: 0 0 var(--card-gap); padding: var(--card-pad); }
  .call-main #stories .story { padding: var(--card-pad); }
  .side .summary, .pay-page .summary, .auth-card { margin: 0; padding: var(--card-pad); }
  /* The story step shows its cards one at a time on phones: they are the cards, not the form around them. */
  .setup .form-card:has(> .story-cards) { padding: 0; border: 0; background: none; }
}

/*
 * Option 2, Premium: the app and the site chrome in the premium mockups' language. A floating pill header; every card a
 * double bezel (a cream ring around a warm white card, 28px outside, 22px inside), never a card inside a card; pill
 * buttons ending in an icon circle; eyebrows and status words as tinted pills; facts as rows with a small icon; a more
 * generous rhythm. These rules come last and start from #__next so they settle what the layers above left open; the
 * backoffice (.admin-main and its own header) keeps its own look.
 */
:root {
  --bezel: 6px;
  --bezel-ring: var(--paper-deep);
  --card-radius: 28px;
  --card-pad: 32px;
  --card-gap: 20px;
  --section-gap: 72px;
  --header-top: 12px;
  --header-h: 72px;
  --header-space: calc(var(--header-top) + var(--header-h));
  --card-shadow: 0 0 0 1px var(--hair), inset 0 0 0 1px rgb(60 40 20 / 0.07), 0 18px 34px -26px rgb(60 40 20 / 0.32);
}
@media (max-width: 759px) {
  :root { --card-pad: 22px; --card-gap: 16px; --section-gap: 56px; --header-h: 64px; }
}

/* The floating pill header: inset from the screen's edges, sticky, translucent paper; the menu opens under it as a rounded panel. */
#__next .site-header { position: sticky; top: var(--header-top); z-index: 20; margin: var(--header-top) 0 0; padding: 0 12px; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
#__next .site-header .inner {
  max-width: calc(var(--max) + 2 * var(--gutter)); min-height: var(--header-h); padding: 8px 8px 8px 20px; border-radius: 999px;
  background: rgb(251 247 240 / 0.86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px var(--hair), 0 10px 30px -18px rgb(60 40 20 / 0.35);
}
/* The logo link reaches 44px to tap without moving. */
#__next .site-header .brand { padding-block: 6px; margin-block: -6px; }
/* The desktop nav: plain links side by side, the current one underlined (not pills). */
#__next .nav-desktop :is(.nav-link, .link-button) { border-radius: 0; }
#__next .nav-desktop :is(.nav-link, .link-button):hover { background: none; color: var(--ink); }
#__next .nav-desktop .nav-link[aria-current='page'] { background: none; color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }
#__next .nav-desktop .button { margin-left: var(--space-2); }
#__next .menu > summary { min-height: 48px; padding: 0 18px; border-radius: 999px; background: var(--paper-deep); font: 600 1.0625rem/1 var(--sans); color: var(--ink); }
#__next .menu > summary:hover { background: #ece3d4; }
#__next .menu[open] > summary { background: var(--accent); color: #fffdf8; }
#__next .menu-sheet {
  top: calc(100% + 10px); left: 0; right: 0; max-height: calc(100dvh - var(--header-space) - 24px); overflow-y: auto;
  padding: var(--space-2) var(--space-5) var(--space-5); border: 0; border-radius: 28px; background: var(--paper);
  box-shadow: 0 0 0 1px var(--hair), 0 24px 48px -24px rgb(60 40 20 / 0.45);
}
#__next .menu-sheet .nav-link, #__next .menu-sheet .link-button { border-radius: 0; }
#__next .menu-sheet .button { min-height: 52px; }
html { scroll-padding-top: calc(var(--header-space) + var(--space-4)); }
@media (min-width: 760px) {
  #__next .site-header { padding: 0 var(--space-4); }
  #__next .site-header .inner { padding-left: 24px; }
}
@media (min-width: 1024px) {
  .side.sticky, .call-side { top: calc(var(--header-space) + var(--space-5)); }
}

/* The double bezel, for every card in the app and the shared pages; the ring is the card's own 6px border. */
#__next :where(
  .card, .paper, .next-step, .person-card, .minutes-card, .status-card,
  .person-page :is(.ask-card, .focus-card, .call-plan, .call-list, .story-feature, .side-card, .book-plan, [id='more-calls'], .compact),
  .call-main :is(.listen, .story, [id='chapter']), .call-main > [id='longer-calls'],
  .order-fields > fieldset:not(.package-rows, .choices), .auth-card
) {
  border: var(--bezel) solid var(--bezel-ring); border-radius: var(--card-radius); background-color: var(--card); box-shadow: var(--card-shadow);
}
#__next :where(
  .card, .paper, .next-step, .person-card, .minutes-card, .status-card,
  .person-page :is(.ask-card, .focus-card, .call-plan, .call-list, .story-feature, .side-card, .book-plan, [id='more-calls'], .compact),
  .call-main :is(.listen, .story, [id='chapter']), .call-main > [id='longer-calls'],
  .order-fields > fieldset:not(.package-rows, .choices), .auth-card
):not(.call-list, .chapter-list) { padding: var(--card-pad); }
/* Lists of rows keep their rows to the card's edges, top and bottom. */
#__next :is(.person-page .call-list, .chapter-list) { padding: 0 var(--card-pad); }
/* Where the layers above reach a card by its id, the bezel is set again. */
#__next :is(.call-main #stories .story, #stories .story:first-of-type, .call-main > #longer-calls, .call-main #chapter, .person-page #more-calls) { border: var(--bezel) solid var(--bezel-ring); padding: var(--card-pad); }
#__next .person-page .call-list > .call-row { padding: 20px 0; }
#__next .message-card { padding: 44px 36px 40px; }
#__next .empty.card { padding: var(--space-7) var(--card-pad); }

/* Tinted bezels: the warm next step and the confirmations Grace waits for, the green Now, the paused grey, the green offers. */
#__next :is(.next-step, .status-card:is([data-status='invited'], [data-status='missed'], [data-status='message'])) { border-color: #f1e6cc; background-color: #fffbf1; }
#__next .status-card { border-color: var(--accent); background-color: var(--accent-hover); box-shadow: 0 0 0 1px rgb(34 68 58 / 0.2), inset 0 1px 0 rgb(255 255 255 / 0.08), 0 22px 40px -26px rgb(34 68 58 / 0.6); }
#__next .status-card:is([data-status='invited'], [data-status='missed'], [data-status='message']) { box-shadow: var(--card-shadow); }
#__next .status-card:is([data-status='declined'], [data-status='paused']) { border-color: var(--bezel-ring); background-color: #f8f2e8; box-shadow: var(--card-shadow); }
#__next :is(.person-page #more-calls.tinted, .call-main > .listen) { border-color: var(--accent-soft); background-color: var(--accent-faint); }
#__next .another { padding: 18px 26px 18px 18px; border: 1.5px solid rgb(35 30 26 / 0.16); border-radius: var(--card-radius); background: none; box-shadow: none; }
#__next .another img { width: 76px; height: 76px; border-radius: 16px; }
#__next .another h2 { font-size: 1.375rem; }

/* The phone story step's cards are the cards, not the form around them. */
@media (max-width: 759px) {
  #__next .setup .form-card:has(> .story-cards) { padding: 0; border: 0; background: none; box-shadow: none; }
  /* In a story card's box the field has no frame of its own: the box takes the field's focus ring and its error. */
  #__next .story-box { padding: 0; overflow: hidden; }
  #__next .story-box:has(textarea:focus-visible) { outline: 3px solid rgb(47 90 73 / 0.35); outline-offset: 1px; }
  #__next .story-card.has-error .story-box { box-shadow: 0 0 0 2px var(--error); }
  #__next .story-box textarea { display: block; min-height: 0; padding: 20px 20px 12px; border: 0; border-radius: 0; background: none; font-size: 1.125rem; line-height: 1.55; resize: none; outline: none; }
  #__next .story-box #f-avoid { padding-bottom: 20px; }
  #__next .story-box > .chips { padding: 14px 16px 18px; border-top: 1px solid var(--rule); }
  #__next .story-box .chip { min-height: 44px; border-width: 1.5px; font-size: 1rem; }
  /* The family questions as rows between hairlines, each row's bin beside its first line. */
  #__next .story-box:has(> .question-rows) { padding: 6px 12px 10px 20px; }
  #__next .story-box > .question-rows { gap: 0; }
  #__next .story-box > .question-rows li { border-bottom: 1px solid var(--rule); }
  #__next .story-box > .question-rows textarea { min-height: 60px; padding: 17px 52px 17px 0; line-height: 1.4; }
  #__next .story-box .remove-row { top: 8px; right: 0; }
  #__next .story-box .remove-row .icon { width: 18px; height: 18px; }
  #__next .story-box > .add-row { margin-top: 6px; gap: 8px; font-size: 1.0625rem; }
}
.side-panel.panel, .next-panel { border-radius: var(--card-radius); }
#__next :is(.package-row, .choice-card, .size-tile, .copies-row) { border: var(--bezel) solid var(--bezel-ring); border-radius: var(--card-radius); background-color: var(--card); box-shadow: var(--card-shadow); }
#__next .size-tile { border-width: 4px; border-radius: 18px; }
#__next .choice-card { padding: 0; }
#__next .size-tile:has(input:checked) { border-color: var(--accent-soft); background-color: var(--accent-faint); box-shadow: 0 0 0 1.5px var(--accent); }
#__next .size-tile:has(input:disabled) { background-color: var(--paper-deep); }
#__next .package-row:hover { box-shadow: 0 0 0 1px var(--accent-line), inset 0 0 0 1px rgb(60 40 20 / 0.07); }
#__next .package-row:has(input:checked) { border-color: var(--accent-soft); background-color: var(--accent-faint); box-shadow: 0 0 0 2px var(--accent), 0 18px 34px -26px rgb(60 40 20 / 0.32); }
#__next main:not(.admin-main, .recipient) .notice:not(.toast-region .notice) { border-radius: 20px; }

/* Pill buttons; the main ones end in an icon circle: an arrow to go somewhere, a check to confirm, a plus to add. */
#__next :is(main:not(.admin-main, .recipient), .site-header) :is(.button, button.primary, button.secondary, button.danger, button.danger-outline, .ask-button) { border-radius: 999px; }
#__next :is(main:not(.admin-main, .recipient), .site-header) :is(.button, button.primary, button.secondary, button.danger, button.danger-outline):not(.sm, .icon-only) { min-height: 52px; }
#__next :is(main:not(.admin-main, .recipient), .site-header) :is(.button, button.primary):not(.secondary, .light, .on-dark, .sm, .google) { box-shadow: 0 10px 24px -14px rgb(34 68 58 / 0.6); }
#__next :is(main:not(.admin-main, .recipient), .site-header) :is(.button, button.secondary).secondary { border-color: var(--accent); background-color: #fff; color: var(--accent-hover); }
#__next :is(main:not(.admin-main, .recipient), .site-header) :is(.button, button.secondary).secondary:hover { background-color: var(--accent-faint); }
#__next :is(main:not(.admin-main, .recipient), .site-header) :is(.button, button):has(> .go-ico) { gap: var(--space-4); padding: 6px 6px 6px 24px; white-space: nowrap; }
#__next :is(main:not(.admin-main, .recipient), .site-header) :is(.button, button):has(> .go-ico) { justify-content: space-between; }
/* In a phone's card, as setup's foot without script, a long label wraps rather than running past the card's edge. */
@media (max-width: 759px) { #__next .setup .step-foot :is(.button, button):has(> .go-ico) { white-space: normal; text-align: left; } }
#__next .go-ico { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgb(255 255 255 / 0.16); }
#__next .go-ico .icon { width: 18px; height: 18px; stroke-width: 2; }
#__next :is(.secondary, .light) > .go-ico { display: grid; background: var(--accent-soft); color: var(--accent-hover); }
#__next .sm:has(> .go-ico) { padding: 4px 4px 4px 20px; }
#__next .sm > .go-ico { width: 34px; height: 34px; }
@media (prefers-reduced-motion: no-preference) {
  #__next :is(main:not(.admin-main, .recipient), .site-header) :is(.button, button):has(> .go-ico):hover .go-ico { transform: translateX(2px); }
}
/* The bottom bars keep their 48px buttons. */
#__next :is(.phone-bar, .buy-bar, .start-bar, .setup[data-stepped] .step-action, .offer[data-offer-step='account'] .account-action) :is(.button, button):not(.sm, .icon-only) { min-height: 48px; }
#__next :is(.phone-bar, .buy-bar, .start-bar, .setup[data-stepped] .step-action, .offer[data-offer-step='account'] .account-action) :is(.button, button):has(> .go-ico) { padding: 4px 4px 4px var(--space-5); }
#__next :is(.phone-bar, .buy-bar, .start-bar, .setup[data-stepped] .step-action, .offer[data-offer-step='account'] .account-action) .go-ico { width: 38px; height: 38px; }
@media (max-width: 759px) {
  /* A plain button, as in the packages screen's bar, leaves the package beside it more room. */
  #__next .offer[data-offer-step='account'] .account-action button.primary.go { padding: 0 var(--space-5); }
  #__next .offer[data-offer-step='account'] .account-action .go-ico { display: none; }
}

/* Eyebrows are tinted pills. */
#__next main:not(.admin-main, .recipient) .eyebrow {
  display: inline-flex; align-items: center; width: fit-content; margin: 0 0 var(--space-4); padding: 6px 14px; border-radius: 999px;
  background: var(--clay-soft); color: var(--clay); font: 600 0.875rem/1.3 var(--sans); letter-spacing: 0.08em;
}
#__next main:not(.admin-main, .recipient) .eyebrow:is(.sage, .panel.sage .eyebrow) { background: var(--accent-soft); color: var(--accent); }
#__next main:not(.admin-main, .recipient) :is(.eyebrow.honey, .next-step .eyebrow) { background: var(--warn-bg); color: var(--warn-ink); }
#__next main:not(.admin-main, .recipient) .next-step[data-status]:not([data-status='invited']) .eyebrow { background: var(--accent-soft); color: var(--accent); }
#__next main:not(.admin-main, .recipient) .call-plan .eyebrow { margin-bottom: var(--space-2); }

/* Status words as chips with a dot, in the tone's colours. */
#__next .person-line { margin: var(--space-2) 0 0; }
#__next .line-word { min-height: 32px; padding: 4px 14px 4px 12px; border-radius: 999px; background: var(--paper-deep); color: var(--ink); font-size: 1rem; line-height: 1.2; }
#__next .line-word.good { background: var(--accent-soft); color: var(--accent); }
#__next .line-word.wait { background: var(--warn-bg); color: var(--warn-ink); }
#__next :is(.person-page, .call-layout, .page-head, .book-editor) .badge:not(:has(.icon))::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
#__next :is(.person-page, .call-layout, .page-head, .book-editor) .badge { gap: var(--space-2); font-weight: 600; }

/* Facts with a small icon in front; a lead row has a round tinted icon, a bold line and a muted one. */
.icon-row { display: flex; align-items: center; gap: 12px; margin: var(--space-3) 0 0; color: var(--muted); }
.icon-row-ic { display: inline-flex; flex: none; color: var(--faint); }
.icon-row-ic .icon { width: 20px; height: 20px; }
.icon-row-text { min-width: 0; }
.icon-row-sub { display: block; color: var(--faint); }
.line-detail .icon-row-text::first-letter { text-transform: uppercase; }
.icon-row.lead { gap: 14px; margin: var(--space-5) 0 0; }
.icon-row.lead .icon-row-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--warn-bg); color: var(--warn-ink); }
.icon-row.lead strong { display: block; color: var(--ink); font: 500 1.25rem/1.3 var(--serif); }
.icon-row.lead .icon-row-sub { font-size: 1rem; }
.meta.facts { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
.meta.facts > span { display: inline-flex; align-items: center; gap: 6px; }
.meta.facts .icon { width: 18px; height: 18px; color: var(--faint); }
#__next .next-ic { width: 44px; height: 44px; }

/* The round back arrow, on paper. */
#__next .back-button { width: 48px; height: 48px; border: 0; background: var(--paper-deep); }
#__next .back-button:hover { background: #ece3d4; color: var(--ink); }
/* The step bar's row is as tall as its arrow on a screen without one too, so the title stays put between screens. */
#__next .step-top { min-height: 48px; }

/* The tabs: a plain row, the chosen one underlined; on phones it floats under the header while the page scrolls. */
#__next .page-tabs:not([hidden]) { margin: 0 0 var(--space-6); padding: 0; border: 0; background: var(--paper); }
#__next .tab-list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; padding: 0; border-radius: 0; background: none; box-shadow: inset 0 -1px 0 var(--rule); }
#__next .tab-list a { min-height: 48px; padding: 0 var(--space-2); border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--muted); font-weight: 600; }
#__next .tab-list a:hover { color: var(--ink); }
#__next .tab-list a[aria-selected='true'] { background: none; color: var(--ink); border-bottom-color: var(--accent); box-shadow: none; }
@media (min-width: 760px) { #__next .person-page .page-tabs:not([hidden]) { max-width: 600px; } }
@media (max-width: 759px) {
  #__next .page-tabs:not([hidden]) { top: var(--header-space); margin: 0 0 var(--space-5); padding-top: var(--space-2); }
  /* Stuck under the header: one frosted band from the top of the screen, edge to edge, that the pill header floats on. */
  #__next .page-tabs[data-stuck] {
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
    background: rgb(251 247 240 / 0.86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: 0 12px 24px -20px rgb(60 40 20 / 0.35);
  }
  #__next .page-tabs[data-stuck]::before {
    content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: calc(var(--header-space) + var(--space-2));
    background: rgb(251 247 240 / 0.95); pointer-events: none;
  }
  #__next .page-tabs[data-stuck] .tab-list { box-shadow: none; }
  html:has([data-tab-page][data-tab]) { scroll-padding-top: calc(var(--header-space) + 80px); }
}

/* The dashboard, at the mockup's sizes and rhythm. */
#__next .home .hello { margin: var(--space-4) 0 var(--space-6); }
#__next .home .hello h1 { font-size: 3.75rem; line-height: 1.05; }
#__next .next-step { margin: 0; padding: 40px 44px; gap: 40px; }
#__next .next-step h2 { margin: 0 0 var(--space-3); font-size: 2.5rem; line-height: 1.15; }
#__next .next-step-actions { margin-top: 26px; gap: var(--space-3) var(--space-5); }
#__next .home .people, #__next .next-step + .people { margin-top: var(--section-gap); }
#__next .people-head { margin: 0 0 22px; }
#__next .people-head h2 { font-size: 2rem; }
#__next .person-cards { gap: var(--card-gap); }
#__next .person-card { gap: 0; }
#__next .person-card h3 { margin: 0 0 var(--space-5); font-size: 1.875rem; line-height: 1.1; }
/* The name link reaches 44px to tap; inline padding leaves the card's layout as it was. */
#__next .person-card h3 a { padding-block: 5px; }
#__next .person-card .minutes { margin-bottom: var(--space-3); }
#__next .minutes-line { gap: 10px; margin-bottom: 14px; font-size: 1.0625rem; }
#__next .minutes-line strong { font-size: 2.5rem; line-height: 1; letter-spacing: -0.02em; }
#__next .minutes.large .minutes-line strong { font-size: 3.5rem; letter-spacing: -0.03em; }
#__next .minutes-bar { height: 10px; box-shadow: inset 0 0 0 1px var(--hair); }
#__next .person-act { margin-top: auto; padding-top: var(--space-5); }
#__next .person-act .button { font-size: 1.125rem; }
#__next .another { margin-top: var(--card-gap); }
/* Before the first call a card names them small and says when the call is, large. */
#__next .person-card.first-call h3 { margin: 0; font: 600 1.0625rem/1.2 var(--sans); letter-spacing: 0; }
#__next .first-call-label { margin: 14px 0 0; color: var(--muted); font-size: 0.9375rem; line-height: 1.2; }
#__next .first-call-when { margin: 2px 0 0; color: var(--ink); font: 500 1.75rem/1.15 var(--serif); letter-spacing: -0.015em; }
#__next .person-card.first-call .person-act { padding-top: 20px; }
#__next .another-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 18px; color: var(--accent); font-size: 1.0625rem; font-weight: 500; text-decoration: none; }
#__next .another-link .icon { width: 18px; height: 18px; stroke-width: 2; }

/* The person page. */
#__next .person-header h1 { font-size: 3.5rem; line-height: 1; }
#__next .person-header .meta { margin-top: var(--space-2); }
#__next .person-lead { gap: var(--card-gap); margin-bottom: var(--space-7); }
#__next .person-lead > .back-row { margin-bottom: 0; }
#__next .minutes-left { margin-top: var(--space-4); }
#__next .minutes-card .button { margin-top: var(--space-4); }
#__next .status-card h2 { margin: 0 0 10px; font-size: 1.875rem; line-height: 1.2; }
#__next .status-card .actions { margin-top: var(--space-5); }
#__next .person-page :is(.side-card, .book-plan, #more-calls) > :is(h2, h3):first-child, #__next .person-page .story-feature h2 { font-size: 1.75rem; }
#__next .person-page[data-tab] .with-side h2[data-panel], #__next .person-page[data-tab] .with-side > div > h2, #__next .book-chapters h2 { margin-top: calc(var(--section-gap) - var(--card-gap) - var(--space-4)); font-size: 1.75rem; }
#__next .date-tile { width: 60px; padding: 8px 0; border-radius: 16px; }
#__next .date-tile strong { font-size: 1.625rem; }

/* The call page. */
#__next .call-main > h1 { font-size: 3rem; }
#__next .call-main #stories > h2 { margin: var(--section-gap) 0 22px; }
#__next .call-main #chapter { margin-top: var(--card-gap); }

@media (max-width: 759px) {
  #__next .page:has(> .home) { padding-top: 40px; }
  #__next .home .hello { margin: 0; }
  #__next .home .hello h1 { font-size: 2.375rem; line-height: 1.1; letter-spacing: -0.02em; }
  #__next .home .people { margin-top: 36px; }
  #__next .next-step { padding: 28px var(--card-pad) 26px; }
  #__next .next-step h2 { font-size: 1.875rem; }
  #__next .next-step-actions { display: grid; gap: var(--space-3); margin-top: 22px; }
  #__next .people-head { margin-bottom: 14px; }
  #__next .people-head h2 { font-size: 1.5rem; line-height: 1.2; }
  #__next .person-header h1 { font-size: 2.75rem; }
  #__next .person-lead { margin-bottom: var(--space-6); }
  #__next .status-card h2 { font-size: 1.75rem; }
  #__next .minutes.large .minutes-line strong { font-size: 3rem; }
  #__next .call-main .story, #__next .call-main > .listen { padding: var(--card-pad); }
  #__next .message-card { padding: 32px 22px 26px; }
}
#__next .menu-sheet .nav-link[aria-current='page'] { background: none; }
#__next .menu-sheet > :last-child :is(.nav-link, .link-button), #__next .menu-sheet > .nav-link:last-child { border-bottom: 0; }
#__next main:not(.admin-main, .recipient) .panel .eyebrow { background: var(--surface); }

/* Small buttons that sit side by side in a row (a chapter's move, edit and leave-out): softly rounded, not pills. */
#__next main .call-actions :is(.button, button) { border-radius: var(--radius-button); }

/* The open phone menu: the page behind it is blurred and dimmed, so the menu is the only thing in focus. */
body:has(.site-header .menu[open])::after {
  content: ''; position: fixed; inset: 0; z-index: 19; background: rgb(40 30 20 / 0.18);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
@media (prefers-reduced-transparency: reduce) {
  body:has(.site-header .menu[open])::after { background: rgb(40 30 20 / 0.4); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* A past conversation: the date tile on the left, its words beside it (never wrapped under the tile). */
#__next .person-page .call-list > .call-row.past-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; column-gap: var(--space-4); }
#__next .past-row .call-text { min-width: 0; }
#__next .past-row .call-text > p:first-child { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
#__next .past-row > .icon { align-self: center; }
@media (max-width: 759px) {
  #__next .past-row .date-tile { width: 52px; padding: 6px 0; }
  #__next .past-row .date-tile strong { font-size: 1.375rem; }
}

/* The person's facts: one per line, icons in one column. */
.meta.facts { flex-direction: column; align-items: flex-start; gap: 8px; }
.meta.facts > span.phone-only { display: inline-flex; }
@media (min-width: 760px) { .meta.facts > span.phone-only { display: none; } }

/* The person's one-line facts. */
#__next .person-header .person-line { margin: 4px 0 0; color: var(--muted); }
/* The next call, under the minutes. */
#__next .minutes-next { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; color: var(--muted); }
#__next .minutes-next .icon { width: 18px; height: 18px; color: var(--faint); }
#__next .call-in-line { margin: var(--space-4) 0 0; }
/* Book plan rows: a mark, the area, and a small "Ask Grace" link when it is not covered yet. */
#__next .plan-list li { align-items: center; }
#__next .ask-link { min-height: 44px; padding: 0 4px; color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Upcoming rows: the status chip sits beside the day, the buttons under the text. */
#__next .person-page .call-list > .call-row:not(.past-row) { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: var(--space-4); row-gap: var(--space-3); }
#__next .person-page .call-row:not(.past-row) .call-when { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; }
#__next .person-page .call-row:not(.past-row) .call-actions { grid-column: 2; flex-basis: auto; order: 0; margin: 0; }
/* Book button: short words, the minutes left as a quiet tag. */
#__next .person-page details.book > summary { display: inline-flex; align-items: center; gap: 10px; }
#__next .book-left { font: 500 0.8125rem/1 var(--sans); color: var(--muted); padding: 4px 8px; border-radius: 99px; background: var(--paper-deep, rgba(0,0,0,.05)); }
/* Questions card: one field, a short button, the longer-calls offer as a quiet link. */
#__next .person-page .ask-card .longer-offer { margin: var(--space-4) 0 0; }
/* Eyebrows in tinted side panels are plain labels, flush with the heading under them. */
#__next main:not(.admin-main, .recipient) .panel .eyebrow:is(.eyebrow, .panel .eyebrow) { padding: 0; background: none; }

/* Upcoming tab: three cards of one shape (title, a quiet line under it, rows between hairlines, the action at the foot). */
#__next .person-page .upcoming-card { border: var(--bezel) solid var(--bezel-ring); border-radius: var(--card-radius); background-color: var(--card); box-shadow: var(--card-shadow); padding: var(--card-pad); margin-bottom: var(--card-gap); }
#__next .person-page :is(.upcoming-card, .ask-card, .focus-card) h2 { margin: 0; font-size: 1.5rem; line-height: 1.15; }
#__next .person-page .card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
#__next .pill-note { font: 500 0.8125rem/1 var(--sans); color: var(--muted); background: var(--paper-deep); padding: 6px 10px; border-radius: 99px; white-space: nowrap; }
#__next .person-page .card-sub { margin: 6px 0 0; font-size: 0.9375rem; color: var(--muted); }
#__next .person-page .upcoming-card :is(.call-list, .call-plan) { margin: var(--space-3) 0 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
#__next .person-page .upcoming-card .call-list > .call-row { padding: 16px 0; border-bottom: 1px solid var(--rule); }
#__next .person-page .upcoming-card .call-plan { padding-bottom: var(--space-3); border-bottom: 1px solid var(--rule); }
#__next .person-page .upcoming-card .call-when { font: 600 1.125rem/1.2 var(--serif); }
#__next .person-page .upcoming-card .call-time { margin: 4px 0 0; color: var(--muted); font-size: 0.9375rem; }
#__next .person-page .upcoming-card .call-text > p { margin-top: 0; }
#__next .person-page .upcoming-card details.book { margin: var(--space-4) 0 0; }
#__next .person-page .upcoming-card details.book > summary { display: flex; width: 100%; justify-content: center; gap: 8px; }
#__next .person-page .upcoming-card .longer-offer { display: flex; justify-content: center; margin: var(--space-3) 0 0; }
#__next .person-page .upcoming-card .longer-offer .link-button { color: var(--muted); font-size: 0.875rem; }
#__next .person-page .ask-card .questions { margin: var(--space-3) 0 0; }
#__next .person-page :is(.ask-card .add-question, .focus-form) { margin: var(--space-4) 0 0; }
#__next .person-page .ask-card .add-question { display: flex; gap: 8px; align-items: stretch; }
#__next .person-page .ask-card .add-question input { flex: 1; min-width: 0; }
#__next .person-page .focus-form { display: flex; flex-direction: column; gap: var(--space-3); }
#__next .person-page .focus-form textarea { width: 100%; box-sizing: border-box; resize: vertical; }
#__next .person-page .focus-form button { align-self: flex-start; }

/* Stories tab (design A): the newest story card, then "All conversations" as rows. */
#__next .person-page :is(.story-feature, .stories-card) { border: var(--bezel) solid var(--bezel-ring); border-radius: var(--card-radius); background-color: var(--card); box-shadow: var(--card-shadow); padding: var(--card-pad); margin: 0 0 var(--card-gap); }
#__next .person-page .feature-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
#__next .person-page .feature-day { font-size: 0.875rem; color: var(--muted); }
#__next .person-page .story-feature h2 { margin: var(--space-3) 0 0; font-size: 1.625rem; line-height: 1.15; }
#__next .person-page .story-feature .feature-quote { margin: var(--space-3) 0 0; padding: 0; border: 0; }
#__next .person-page .story-feature .feature-quote p { margin: 0; font: italic 500 1.1875rem/1.45 var(--serif); color: var(--ink); }
#__next .clip-player { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-4); padding: 10px 12px; border-radius: 16px; background: var(--paper-deep); }
#__next .clip-player audio { width: 100%; }
#__next :is(.clip-player, .ex-player, .hero-sample)[data-ready] audio { display: none; }
#__next .clip-player:not([data-ready]) :is(.clip-mid, .clip-time) { display: none; }
#__next .clip-play { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 0; padding: 0; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
#__next .clip-play .icon { width: 16px; height: 16px; }
#__next :is(.clip-play, .ex-play, .hero-sample-play) .ic-play .icon { fill: currentColor; stroke: none; }
/* The sample calls' icons are fuller: a triangle with round corners and two solid bars. */
#__next :is(.ex-play, .hero-sample-play) .ic-play .icon { stroke: currentColor; stroke-width: 2; }
#__next :is(.ex-play, .hero-sample-play) .ic-pause .icon { stroke-width: 4; }
#__next :is(.clip-play, .ex-play, .hero-sample-play) :is(.ic-play, .ic-pause) { display: inline-flex; }
#__next :is(.clip-play, .ex-play, .hero-sample-play) .ic-pause, #__next :is(.clip-play, .ex-play, .hero-sample-play)[aria-pressed='true'] .ic-play { display: none; }
#__next :is(.clip-play, .ex-play, .hero-sample-play)[aria-pressed='true'] .ic-pause { display: inline-flex; }
#__next .clip-mid { flex: 1; min-width: 0; display: grid; gap: 8px; }
#__next .clip-label { font-size: 0.9375rem; font-weight: 600; }
#__next .clip-track { display: block; height: 4px; border-radius: 4px; background: var(--hair); overflow: hidden; }
#__next .clip-bar { display: block; width: 100%; height: 4px; background: var(--accent); transform-origin: left; transform: scaleX(0); }
#__next .clip-time { font-size: 0.875rem; color: var(--muted); }
#__next .person-page .story-feature > .button { margin-top: var(--space-4); }
#__next .person-page .stories-card h2 { margin: 0; font-size: 1.5rem; line-height: 1.15; }
#__next .person-page .first-story { margin: 0 0 var(--card-gap); padding: 26px 22px 28px; }
#__next .person-page[data-tab] .first-story { margin-bottom: 0; }
#__next .person-page .first-story img { display: block; width: 150px; height: 150px; margin: 0 auto; object-fit: contain; }
#__next .person-page .first-story h2 { margin: 14px 0 0; font-size: 1.375rem; line-height: 1.3; text-wrap: wrap; }
#__next .story-list { list-style: none; margin: var(--space-3) 0 0; padding: 0; }
#__next .story-row { border-top: 1px solid var(--rule); }
#__next .story-link { display: grid; grid-template-columns: auto minmax(0, 1fr) 20px; align-items: center; column-gap: 14px; padding: 14px 0; color: var(--ink); text-decoration: none; }
#__next .story-row.off .story-link { grid-template-columns: auto minmax(0, 1fr); }
#__next .story-link .date-tile { margin: 0; }
#__next .story-row.off .date-tile { background: var(--paper-deep); color: var(--muted); }
#__next .story-title { display: block; font: 600 1.125rem/1.25 var(--serif); }
#__next .story-meta { display: block; margin-top: 4px; font-size: 0.875rem; color: var(--muted); }
#__next .story-link > .icon { color: var(--muted); }

/* Footer (design B): one colour to the very bottom, under the phone bar too. */
#__next .site-footer .foot-copy { color: var(--muted); }
@media (max-width: 759px) {
  #__next .site-footer .inner { flex-direction: column; align-items: stretch; gap: var(--space-3); }
  #__next .site-footer .foot-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
  #__next .site-footer .foot-copy { font-size: 0.75rem; }
  #__next .site-footer .about { font-size: 0.875rem; }
  #__next .site-footer nav { gap: 22px; padding-top: var(--space-2); border-top: 1px solid var(--hair); }
  body:has(.site-footer):is(:has(.phone-bar), :has(.buy-bar), :has(.start-bar[data-shown='true']), :has(.setup[data-stepped])) { padding-bottom: 0; }
  body:has(.phone-bar, .buy-bar, .start-bar[data-shown='true'], .setup[data-stepped]) .site-footer { padding-bottom: calc(var(--space-4) + var(--bar-height) + env(safe-area-inset-bottom)); }
  /* Half the desktop room between a page's last section and the footer. */
  #__next .page { padding-bottom: var(--space-6); }
  #__next .site-footer { margin-top: var(--space-3); }
}
/* Wider screens: the footer is one row (logo, sentence, links, year), as before. */
@media (min-width: 760px) {
  #__next .site-footer .foot-top { display: contents; }
  #__next .site-footer .about { order: 1; }
  #__next .site-footer nav { order: 2; }
  #__next .site-footer .foot-copy { order: 3; font-size: 0.9375rem; }
}

/*
 * Upcoming tab: before the first call, the number it comes from with Share; then what Grace will ask, a question added in
 * the card; then "After that", the next two calls with Change as a link and every date under "All 8 dates".
 */
#__next .person-page :is(.heads-up, .ask-card, .later-card) { margin: 0 0 var(--card-gap); }
#__next .person-page[data-tab] :is(.heads-up, .ask-card, .later-card) { margin-bottom: 0; }
#__next .person-page .heads-up { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 18px; border-radius: 20px; background: var(--accent-faint); }
/* Its own display outweighs the rule that hides the other tabs' cards, so it says it again. */
#__next .person-page[data-tab]:not([data-tab='next-call']) .heads-up { display: none; }
#__next .person-page .heads-up p { flex: 1; min-width: 0; margin: 0; font-size: 1rem; line-height: 1.45; }
#__next .person-page .heads-up strong { font-weight: 600; white-space: nowrap; }
#__next .share-button { display: inline-flex; flex: none; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--accent); border-radius: 999px; background: var(--surface); color: var(--accent); font: 600 1rem/1 var(--sans); cursor: pointer; }
#__next .share-button:hover { background: var(--accent-faint); }
#__next .share-button[hidden] { display: none; }
#__next .share-button .icon { width: 17px; height: 17px; stroke-width: 2; }
#__next .share-button :is(.share-ic, .share-done) { display: inline-flex; }
#__next .share-button .share-done, #__next .share-button[data-done] .share-ic { display: none; }
#__next .share-button[data-done] .share-done { display: inline-flex; }
#__next .person-page .ask-card > h2:first-child { margin: 0 0 6px; font-size: 1.375rem; line-height: 1.2; }
#__next .person-page .ask-card .questions { margin: 0; border-top: 1px solid var(--rule); }
#__next .question-row { flex: 1; min-width: 0; }
#__next .question-row > summary { display: block; line-height: 1.4; list-style: none; cursor: pointer; }
#__next .question-row > summary::-webkit-details-marker { display: none; }
#__next .question-text { display: block; }
#__next .question-row .small { display: block; margin-top: 2px; font-size: 0.875rem; line-height: 1.2; }
#__next .question-row > .question-actions { margin: 6px 0 -6px -10px; }
#__next .person-page .ask-card .add-question { gap: 10px; margin: 0; padding-top: 12px; border-top: 1px solid var(--rule); }
#__next .person-page .ask-focus { margin-top: 12px; border-top: 1px solid var(--rule); }
#__next .person-page .ask-focus > summary { display: flex; align-items: center; gap: 10px; min-height: 48px; padding-top: 12px; list-style: none; cursor: pointer; font-weight: 500; color: var(--accent); }
#__next .person-page .ask-focus > summary::-webkit-details-marker { display: none; }
#__next .person-page .ask-focus .focus-form { margin-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-3); }
#__next .person-page .ask-focus textarea { width: 100%; box-sizing: border-box; }
#__next .person-page .ask-focus .focus-form button { align-self: flex-start; }
#__next .person-page .later-card { border: var(--bezel) solid var(--bezel-ring); border-radius: var(--card-radius); background-color: var(--card); box-shadow: var(--card-shadow); padding: 22px 22px 12px; }
#__next .person-page .later-card h2 { margin: 0; font-size: 1.375rem; }
#__next .later-list { list-style: none; margin: 6px 0 0; padding: 0; }
#__next .later-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 14px; padding: 12px 0; border-top: 1px solid var(--rule); }
#__next .later-row .date-tile { align-content: center; width: 48px; height: 52px; margin: 0; padding: 0; border-radius: 12px; background: var(--paper-deep); color: var(--ink); }
#__next .later-row .date-tile span { color: var(--muted); font-size: 0.75rem; letter-spacing: 0; text-transform: none; }
#__next .later-row .date-tile strong { font-size: 1.375rem; line-height: 1.1; }
#__next .later-day { margin: 0; font-weight: 600; line-height: 1.3; }
#__next .later-time { margin: 2px 0 0; font-size: 0.9375rem; line-height: 1.3; color: var(--muted); white-space: nowrap; }
#__next .later-change > summary { display: flex; align-items: center; min-height: 44px; color: var(--accent); font-size: 1rem; font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; list-style: none; cursor: pointer; }
#__next .later-change > summary::-webkit-details-marker { display: none; }
#__next .later-change > summary:hover { color: var(--accent-hover); }
#__next .later-change-body { grid-column: 1 / -1; display: grid; gap: var(--space-3); padding-top: var(--space-3); }
#__next .later-row:has(.later-change[open]) .later-change { grid-column: 1 / -1; }
/* "All 8 dates" unfolds the whole list in place of the two rows above it. */
#__next .all-dates > summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; border-top: 1px solid var(--rule); color: var(--accent); font-size: 1.0625rem; font-weight: 500; list-style: none; cursor: pointer; }
#__next .all-dates > summary::-webkit-details-marker { display: none; }
#__next .all-dates > summary .icon { width: 18px; height: 18px; stroke-width: 2; }
#__next .all-dates[open] > summary .icon { transform: rotate(90deg); }
#__next .all-dates > .later-list { margin: 0; }
#__next .later-card:has(> .all-dates[open]) > .later-list { display: none; }
#__next .person-page .later-card details.book { margin: var(--space-4) 0 0; }
#__next .person-page .later-card details.book > summary { display: flex; width: 100%; justify-content: center; gap: 8px; }
#__next .person-page .later-card .longer-offer { display: flex; justify-content: center; margin: var(--space-3) 0 0; }
#__next .person-page .later-card .longer-offer .link-button { color: var(--muted); font-size: 0.875rem; }

/*
 * Book tab (design D, "Combined"): one book card (cover, progress, talk time left, printed size, Order copies and
 * Preview), the book plan as life-area rows, then the chapters with one ⋯ menu each (a native <details>) and the title
 * and dedication folded under a row at their foot.
 */
#__next .person-page .bk-tab > * { margin: 0 0 var(--card-gap); }
#__next .person-page .bk-tab > :last-child { margin-bottom: 0; }
#__next .person-page .bk-card { border: var(--bezel) solid var(--bezel-ring); border-radius: var(--card-radius); background-color: var(--card); box-shadow: var(--card-shadow); padding: 20px; }
#__next .person-page .bk-card h2 { margin: 0; font: 600 1.5rem/1.15 var(--serif); color: var(--ink); }
#__next .person-page .bk-card .icon { width: 18px; height: 18px; stroke-width: 2; }

/* The book card. */
#__next .person-page .bk-summary-top { display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 16px; align-items: center; }
#__next .person-page .bk-cover { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 76px; height: 104px; box-sizing: border-box; padding: 8px; border-radius: 4px 9px 9px 4px; background: var(--accent); color: var(--paper); text-align: center; box-shadow: inset 5px 0 0 rgb(0 0 0 / 0.18), 0 8px 16px -8px rgb(35 30 26 / 0.55); overflow: hidden; }
#__next .person-page .bk-cover-title { max-width: 100%; font: 600 0.8125rem/1.15 var(--serif); overflow-wrap: anywhere; }
#__next .person-page .bk-summary-text { min-width: 0; }
#__next .person-page .bk-count { margin: 6px 0 0; font-size: 0.9375rem; color: var(--muted); }
#__next .person-page .bk-bar { display: block; width: 100%; height: 8px; margin-top: 10px; border: 0; border-radius: 99px; background: #ece4d6; overflow: hidden; appearance: none; -webkit-appearance: none; color: var(--accent); }
#__next .person-page .bk-bar::-webkit-progress-bar { background: #ece4d6; border-radius: 99px; }
#__next .person-page .bk-bar::-webkit-progress-value { background: var(--accent); border-radius: 99px; }
#__next .person-page .bk-bar::-moz-progress-bar { background: var(--accent); border-radius: 99px; }
#__next .person-page .bk-facts { list-style: none; margin: 16px 0 0; padding: 0; border-bottom: 1px solid #ece4d6; }
#__next .person-page .bk-facts li { display: flex; align-items: center; gap: 12px; min-height: 52px; border-top: 1px solid #ece4d6; font-size: 0.9375rem; color: var(--ink); }
#__next .person-page .bk-facts .icon { color: var(--muted); }
#__next .person-page .bk-actions { display: flex; gap: 10px; margin-top: 16px; }
#__next .person-page .bk-actions > .button { flex: 1.4 1 0; min-width: 0; justify-content: center; }
#__next .person-page .bk-actions > form { display: flex; flex: 1 1 0; min-width: 0; }
#__next .person-page .bk-actions > form > button { width: 100%; justify-content: center; }
#__next .person-page .bk-none { padding: 22px; }
#__next .person-page .bk-none h2 { font-weight: 500; font-size: 1.625rem; }
#__next .person-page .bk-none p { margin: 8px 0 0; color: var(--muted); font-size: 1.0625rem; line-height: 1.6; }

/* Book plan: a mark (covered, started, not yet), the area, and a + that asks Grace about it (a check once asked). */
#__next .person-page .bk-area-list { list-style: none; margin: 4px 0 0; padding: 0; }
#__next .person-page .bk-area { display: grid; grid-template-columns: 24px minmax(0, 1fr) 44px; align-items: center; column-gap: 12px; min-height: 48px; border-bottom: 1px solid #ece4d6; }
#__next .person-page .bk-area:last-child { border-bottom: 0; }
#__next .person-page .bk-area-mark { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: 2px solid #c9b9a6; border-radius: 50%; color: #fff; }
#__next .person-page .bk-area[data-coverage='rich'] .bk-area-mark { width: 22px; height: 22px; box-sizing: border-box; border: 0; background: var(--accent); }
#__next .person-page .bk-area[data-coverage='rich'] .bk-area-mark .icon { width: 13px; height: 13px; stroke-width: 3; }
#__next .person-page .bk-area[data-coverage='thin'] .bk-area-mark { border-color: var(--accent); background: linear-gradient(90deg, var(--accent) 50%, transparent 50%); }
#__next .person-page .bk-area-name { font-size: 1rem; color: var(--muted); }
#__next .person-page .bk-area[data-coverage='rich'] .bk-area-name { color: var(--ink); }
#__next .person-page .bk-area form { display: contents; }
#__next .person-page .bk-area-ask, #__next .person-page .bk-area-added { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; background: none; color: var(--accent); }
#__next .person-page .bk-area-ask { cursor: pointer; }
#__next .person-page .bk-area-ask:hover { background: var(--accent-faint); }
#__next .person-page .bk-area-ask .icon { stroke-width: 2.25; }
#__next .person-page .bk-area-added .icon { width: 16px; height: 16px; stroke-width: 2.5; }

/* Chapters: a clay number, when it happened (a honey dot when short), the title, and the ⋯ menu. */
#__next .person-page .bk-chapter-list { list-style: none; margin: 4px 0 0; padding: 0; }
#__next .person-page .bk-chapter { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) 44px; column-gap: 12px; align-items: start; padding: 16px 0; border-bottom: 1px solid #ece4d6; }
#__next .person-page .bk-chapter-no { padding-top: 2px; font: 600 1.375rem/1.1 var(--serif); color: var(--clay); }
#__next .person-page .bk-chapter-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#__next .person-page .bk-chapter-when { display: flex; align-items: center; gap: 6px; font-size: 0.875rem; color: var(--muted); }
#__next .person-page .bk-short-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #c99a2e; }
#__next .person-page .bk-chapter-title { font: 600 1.1875rem/1.25 var(--serif); color: var(--ink); overflow-wrap: anywhere; }
#__next .person-page .bk-chapter.left-out .bk-chapter-no { color: #c9bdae; }
#__next .person-page .bk-chapter.left-out .bk-chapter-title { color: #a39888; }
#__next .person-page .bk-menu > summary { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-top: -4px; box-sizing: border-box; border: 1.5px solid #e1d6c4; border-radius: 12px; background: #fff; color: var(--accent); list-style: none; cursor: pointer; }
#__next .person-page .bk-menu > summary::-webkit-details-marker { display: none; }
#__next .person-page .bk-menu > summary .icon { width: 20px; height: 20px; fill: currentColor; stroke-width: 1.6; }
#__next .person-page .bk-menu[open] > summary { border-color: var(--accent); background: var(--accent-faint); }
#__next .person-page .bk-menu-list { position: absolute; z-index: 2; right: 0; top: 60px; display: flex; flex-direction: column; width: 210px; box-sizing: border-box; padding: 6px; border-radius: 18px; background: var(--card); box-shadow: 0 0 0 1px rgb(35 30 26 / 0.1), 0 18px 40px -12px rgb(60 40 20 / 0.35); }
#__next .person-page .bk-menu-list > form { display: contents; }
#__next .person-page .bk-menu-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 12px; box-sizing: border-box; border: 0; border-radius: 12px; background: none; color: var(--ink); font: 500 1rem/1.2 var(--sans); text-align: left; text-decoration: none; cursor: pointer; }
#__next .person-page .bk-menu-item:hover { background: var(--paper-deep); }
#__next .person-page .bk-menu-item .icon { color: var(--muted); }
#__next .person-page .bk-menu-item.danger, #__next .person-page .bk-menu-item.danger .icon { color: #8a3a28; }
#__next .person-page .bk-menu-rule { height: 1px; margin: 4px 8px; border: 0; background: #ece4d6; }
#__next .person-page .bk-empty { margin: 12px 0 0; color: var(--muted); }

/* Title and dedication: a row with a chevron that opens the form under it. */
#__next .person-page .bk-details { margin-top: 8px; }
#__next .person-page .bk-details > summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; list-style: none; cursor: pointer; font-weight: 600; font-size: 1rem; color: var(--ink); }
#__next .person-page .bk-details > summary::-webkit-details-marker { display: none; }
#__next .person-page .bk-details > summary .icon { color: var(--muted); transition: transform 0.15s ease; }
#__next .person-page .bk-details[open] > summary .icon { transform: rotate(90deg); }
#__next .person-page .bk-details > form { margin-top: var(--space-3); }
@media (prefers-reduced-motion: reduce) { #__next .person-page .bk-details > summary .icon { transition: none; } }

/* Top of the person page (design B): back link, then one card with the name, the next call and the minutes. */
#__next .person-page .back-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: 4px 0 8px; font-size: 0.9375rem; font-weight: 500; color: var(--muted); text-decoration: none; }
#__next .person-page .back-link .icon { width: 18px; height: 18px; }
#__next .person-page .person-lead > .back-row { display: none; }
#__next .person-page .person-top { border: var(--bezel) solid var(--bezel-ring); border-radius: var(--card-radius); background-color: var(--card); box-shadow: var(--card-shadow); padding: 22px 20px 6px; margin: 0 0 var(--card-gap); }
#__next .person-page .person-top .person-header { display: block; margin: 0 0 14px; }
#__next .person-page .person-top h1 { margin: 0; font-size: 2.25rem; line-height: 1.1; }
#__next .person-page .person-top .person-line { margin: 6px 0 0; font-size: 0.9375rem; color: var(--muted); }
#__next .person-page .top-rows { border-top: 1px solid var(--rule); }
#__next .person-page .top-row { display: flex; align-items: center; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
#__next .person-page .top-ic { width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; }
#__next .person-page .top-ic .icon { width: 20px; height: 20px; }
#__next .person-page .top-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
#__next .person-page .top-text strong { font-size: 1.0625rem; font-weight: 600; }
#__next .person-page .top-label { font-size: 0.875rem; color: var(--muted); }
#__next .person-page .top-minutes { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
#__next .person-page .top-text .minutes-bar { width: 100%; height: 6px; margin-top: 4px; }
#__next .person-page .top-add { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; margin: 6px 0 4px; font-weight: 600; color: var(--accent); text-decoration: none; }
#__next .person-page .top-add .icon { width: 16px; height: 16px; }
#__next .person-page .top-row:has(> .later-change[open]) { flex-wrap: wrap; }
#__next .person-page .top-row > .later-change[open] { flex-basis: 100%; }
@media (max-width: 759px) {
  /* Phones: only the tabs stay on screen, pinned to the top edge to edge; the header scrolls away with the page. */
  #__next:has(.person-page) .site-header { position: relative; top: 0; }
  html:has(.person-page) { scroll-padding-top: var(--space-4); }
  html:has(.person-page[data-tab]) { scroll-padding-top: calc(52px + var(--space-4)); }
  #__next .page:has(> .person-page) { padding-top: 20px; }
  #__next .person-page .back-link { gap: 8px; margin: 0 0 calc(10px - var(--card-gap)); font-size: 1rem; font-weight: 400; }
  #__next .person-page .back-link .icon { width: 16px; height: 16px; }
  #__next .person-page .person-lead { margin-bottom: 20px; }
  #__next .person-page .person-top { margin-bottom: 0; }
  #__next .person-page .person-top h1 { font-size: 2.125rem; }
  #__next .person-page .person-top .person-line { font-size: 1rem; line-height: 1.2; }
  #__next .person-page .top-row { gap: 14px; padding: 14px 0; }
  #__next .person-page .top-ic { width: 44px; height: 44px; }
  #__next .person-page .top-text { gap: 0; line-height: 1.25; }
  #__next .person-page .top-label { font-size: 0.9375rem; }
  #__next .person-page .top-text strong { font-size: 1.125rem; }
  #__next .person-page .page-tabs:not([hidden]) { top: 0; margin: 0 calc(-1 * var(--gutter)) 18px; padding: 0 var(--gutter); border-bottom: 1px solid var(--rule); background: var(--paper); }
  #__next .person-page .page-tabs[data-stuck] { -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
  #__next .person-page .page-tabs[data-stuck]::before { content: none; }
  #__next .person-page .tab-list { box-shadow: none; }
  #__next .person-page .tab-list a { min-height: 52px; font-weight: 500; }
  #__next .person-page .tab-list a[aria-selected='true'] { font-weight: 600; }
}

/* Details tab (design A): What Grace knows, then Keep the stories coming, both full cards. */
#__next .person-page :is(.knows-card, .more-card) { border: var(--bezel) solid var(--bezel-ring); border-radius: var(--card-radius); background-color: var(--card); box-shadow: var(--card-shadow); padding: 20px; margin: 0 0 var(--card-gap); }
#__next .person-page .knows-card h2, #__next .person-page .more-card > :is(h2, h3) { margin: 0; font-size: 1.5rem; line-height: 1.15; }
#__next .person-page .more-card > p { margin: 6px 0 0; font-size: 0.9375rem; color: var(--muted); }
#__next .person-page .more-card > p strong { color: var(--ink); }
#__next .person-page .knows-card { padding: 22px; }
#__next .person-page .knows-card h2 { font-size: 1.625rem; }
#__next .person-page .knows-card .card-sub { margin: 4px 0 0; font-size: 1rem; }
#__next .knows-list { list-style: none; margin: 12px 0 0; padding: 0; }
#__next .knows-list > li { padding: 14px 0; border-top: 1px solid var(--rule); line-height: 1.5; }
#__next .knows-call { display: flex; align-items: center; gap: 12px; font-size: 0.9375rem; color: var(--muted); }
#__next .knows-call .top-ic { width: 36px; height: 36px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; flex: none; }
#__next .knows-call .top-ic .icon { width: 18px; height: 18px; }
#__next .knows-call a { font-weight: 600; }
#__next .person-page .knows-card > a.button { min-height: 48px; margin-top: 6px; }
#__next .person-page .more-card form { margin-top: var(--space-4); }
#__next .person-page .more-add { display: flex; align-items: center; justify-content: center; gap: 8px; }
#__next .person-page .more-add .icon { width: 18px; height: 18px; }

/* No cheer line under the step bar: the heading and the button already say where you are. */
#__next .step-cheer { display: none; }

/* Person page on wider screens: the same cards as on phones, laid out as before — the person card on the left,
   the tabs and the tab's cards on the right, both starting on one line, one column of cards, no extra cards. */
#__next .person-top .top-rows:last-child .top-row:last-child { border-bottom: 0; }
@media (min-width: 760px) {
  #__next .person-page .page-tabs:not([hidden]) { max-width: none; background: none; }
  #__next .person-page[data-tab] .with-side { grid-template-columns: minmax(0, 1fr); }
  #__next .person-page[data-tab] .with-side > aside > [data-panel='details'] { grid-column: 1 / -1; }
  #__next .person-page :is(.person-top, .knows-card, .more-card, .later-card, .bk-card) { padding: var(--card-pad); }
  #__next .person-page :is(.story-feature, .stories-card, .later-card, .knows-card, .bk-card) h2,
  #__next .person-page .more-card > :is(h2, h3) { font-size: 1.5rem; line-height: 1.15; }
  #__next .person-page .person-top h1 { font-size: 2.75rem; }
  #__next .person-page .story-feature > .button { width: auto; display: inline-flex; padding-inline: var(--space-6); }
}
@media (min-width: 1100px) {
  #__next .person-page[data-tab] { grid-template-columns: 340px minmax(0, 1fr); column-gap: 48px; }
  #__next .person-page[data-tab] > .person-lead { position: sticky; top: calc(var(--header-space) + var(--space-5)); gap: var(--space-6); }
  #__next .person-page[data-tab] > .page-tabs:not([hidden]) { margin-top: 0; }
  #__next .person-page .person-lead > .back-link { min-height: 48px; margin: 0; }
}

/* Who calls them (design B4): the language as two segments, then the interviewers as one grouped list, a tick on the
   one chosen and a round button that plays their hello, its bars moving while it plays. */
#__next .voice-step { display: grid; gap: 28px; align-content: start; padding-top: 4px; }
/* One step at a time, the page heading already asks who should call them. */
#__next .setup[data-stepped] .voice-step > .repeat-title { display: none; }
#__next .voice-step > .step-foot { margin-top: 0; }
#__next .day-tiles.segmented { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 5px; border-radius: 999px; background: var(--paper-deep); box-shadow: inset 0 0 0 1px rgb(35 30 26 / 0.08); }
#__next .day-tiles.segmented .tile { min-height: 48px; border: 0; border-radius: 999px; background: none; color: var(--muted); font-weight: 600; }
#__next .day-tiles.segmented input:checked + .tile { background: var(--card); color: var(--ink); box-shadow: 0 0 0 1px rgb(35 30 26 / 0.08), 0 6px 14px -8px rgb(60 40 20 / 0.35); }
#__next .day-tiles.segmented label:hover input:not(:checked) + .tile { color: var(--ink); }
#__next .day-picker:has(.segmented) legend { margin-bottom: 4px; }
#__next .voice-picker { display: block; min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
#__next .voice-picker > legend:not(.visually-hidden) { float: none; width: auto; margin: 0 0 8px; padding: 0; font: 500 1.0625rem/1.4 var(--sans); }
#__next .voice-list { border: var(--bezel) solid var(--bezel-ring); border-radius: 26px; background: var(--card); box-shadow: 0 0 0 1px var(--hair), 0 18px 34px -26px rgb(60 40 20 / 0.32); }
#__next .voice-row { position: relative; }
#__next .voice-row + .voice-row::before { content: ''; position: absolute; top: 0; left: 54px; right: 0; height: 1px; background: var(--rule); }
#__next .voice-row label { position: relative; display: flex; align-items: center; gap: 14px; min-height: 96px; box-sizing: border-box; padding: 16px 80px 16px 16px; border-radius: 20px; cursor: pointer; }
#__next .voice-row input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
#__next .voice-row:has(input:focus-visible) label { outline: 3px solid var(--accent); outline-offset: -3px; }
#__next .voice-check { display: grid; place-items: center; width: 24px; height: 24px; flex: none; color: var(--accent); }
#__next .voice-check .icon { width: 22px; height: 22px; stroke-width: 2.5; visibility: hidden; }
#__next .voice-row input:checked + .voice-check .icon { visibility: visible; }
#__next .voice-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#__next .voice-name { font: 500 1.625rem/1.15 var(--serif); letter-spacing: -0.01em; }
#__next .voice-kind { font-size: 0.9375rem; line-height: 1.35; color: var(--muted); }
#__next .voice-row > .hello-play { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); }
#__next .voice-picker > .hint { display: block; margin-top: 6px; }
#__next .voice-picker > .error-text { display: block; margin-top: 6px; }
#__next .voice-picker.has-error .voice-list { box-shadow: 0 0 0 2px var(--error); }
/* In Edit details the list is one of the form's fields. */
#__next .form-card .voice-list { border: 1px solid var(--field-border); border-radius: var(--radius); background: var(--surface); box-shadow: none; }
#__next .form-card .voice-row + .voice-row::before { left: 48px; }
#__next .form-card .voice-row label { gap: 12px; min-height: 76px; padding: 12px 70px 12px 14px; border-radius: var(--radius); }
#__next .form-card .voice-check { width: 22px; height: 22px; }
#__next .form-card .voice-check .icon { width: 20px; height: 20px; }
#__next .form-card .voice-text { gap: 0; }
#__next .form-card .voice-name { font: 600 1.125rem/1.3 var(--sans); letter-spacing: 0; }
#__next .form-card .voice-row > .hello-play { right: 12px; width: 44px; height: 44px; }

/* The hello button; the outer bars rise and the inner ones dip, each at its own pace, while the voice plays. */
#__next .hello-play { display: grid; place-items: center; width: 48px; height: 48px; flex: none; padding: 0; border: 0; border-radius: 50%; background: var(--accent-faint); color: var(--accent); cursor: pointer; }
#__next .hello-play[hidden] { display: none; }
#__next .hello-play:hover { background: var(--accent-soft); }
#__next .hello-play[aria-pressed='true'] { background: var(--accent); color: #fffdf8; }
#__next .hello-play .icon { width: 24px; height: 24px; stroke-width: 2; }
#__next .hello-play .icon path { transform-box: view-box; transform-origin: 12px 12px; }
@keyframes hello-dip { 50% { transform: scaleY(0.5); } }
@keyframes hello-rise { 50% { transform: scaleY(2.2); } }
@media (prefers-reduced-motion: no-preference) {
  #__next .hello-play[aria-pressed='true'] .icon path { animation: hello-dip 0.9s ease-in-out infinite; }
  #__next .hello-play[aria-pressed='true'] .icon path:nth-child(1) { animation-name: hello-rise; animation-duration: 0.8s; }
  #__next .hello-play[aria-pressed='true'] .icon path:nth-child(2) { animation-duration: 1s; animation-delay: -0.3s; }
  #__next .hello-play[aria-pressed='true'] .icon path:nth-child(3) { animation-duration: 0.75s; animation-delay: -0.15s; }
  #__next .hello-play[aria-pressed='true'] .icon path:nth-child(4) { animation-duration: 0.95s; animation-delay: -0.45s; }
  #__next .hello-play[aria-pressed='true'] .icon path:nth-child(5) { animation-name: hello-rise; animation-duration: 0.85s; animation-delay: -0.25s; }
}
@media (forced-colors: active) { #__next .hello-play[aria-pressed='true'] { outline: 2px solid CanvasText; } }