/* Continuum family pages: one stylesheet for the company site and the three app sites.
   Tokens follow the Continuum design language (spec §2.1 Slate neutrals, §2.2 accent pair, §2.6 spacing and radius).
   Each page sets <html data-app="haraka|dawdle|tracelet|continuum">. Only the accent pair and display weight change per app. */

/* ---------- 1. Tokens ---------- */
:root {
  color-scheme: light;
  /* Slate light (spec §2.1) */
  --bg: #f1f3f6; --surface: #ffffff; --inset: #e9edf1;
  --line: #dde2e8; --line-strong: #7c8693;
  --text: #151a21; --text-2: #3d4652; --text-3: #5a6471;
  --device: #090b0e;
  /* Accent slots: filled per app below. Light values are the UI tones (≥4.5:1 as text). */
  --accent: var(--a-main-l); --accent-text: var(--a-text-l); --on-accent: #ffffff;
  --second: var(--a-second-l); --tint: var(--a-tint-l);
  --band: #e9edf1; /* full-bleed tinted band */
  --hero-glow: transparent;
  /* Type: system faces only (SF Rounded display, SF Pro body). No web font download. */
  --font-display: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --display-weight: 600;
  /* Sizing system (landing-sizing, 2026-10-23): one headline size for every hero, steps of about 1.5x
     from header name to section heading to headline, and a header row that grows with the page. */
  --fs-h1: clamp(2.5rem, 1.75rem + 2.6vw, 3.75rem);  /* 40 → 60 px */
  --fs-h2: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);   /* 28 → 40 px */
  --fs-h3: 1.1875rem; --fs-body: 1.0625rem; --fs-lead: clamp(1.125rem, 1rem + .4vw, 1.25rem); /* lead 18 → 20 px, unchanged */
  --header-h: 76px; --fs-brand: 1.25rem; --fs-nav: .9375rem; --icon-header: 40px; --mark-header: 26px;
  --fs-small: .875rem; --fs-fine: .8125rem; /* 13 px floor for fine print */
  /* Spacing (spec sp.*) and radius (r.*) */
  --sp-3: 8px; --sp-4: 12px; --sp-5: 16px; --sp-6: 20px; --sp-7: 24px; --sp-8: 32px; --sp-9: 48px; --sp-10: 72px; --sp-11: 112px;
  --r-s: 8px; --r-m: 12px; --r-l: 16px; --r-xl: 24px; --r-badge: 22.37%;
  --gutter: 16px; --max: 1120px;
}
/* Per-app accent pairs (design-language icons addendum §2.2; DECISIONS.md Icons 2026-10-12) */
[data-app="haraka"]   { --a-main-l: #4f7604; --a-text-l: #4f7604; --a-second-l: #0496a6; --a-tint-l: #edf1e6;
                        --a-main-d: #a6d84a; --a-second-d: #3da8b5; --a-tint-d: #2a3528; --display-weight: 700; }
[data-app="tracelet"] { --a-main-l: #1865d7; --a-text-l: #1865d7; --a-second-l: #448bd0; --a-tint-l: #e8f0fb;
                        --a-main-d: #7aaeff; --a-second-d: #9db6cf; --a-tint-d: #243041; --display-weight: 600; }
[data-app="dawdle"]   { --a-main-l: #027a63; --a-text-l: #00715b; --a-second-l: #7282dc; --a-tint-l: #e6f2ef;
                        --a-main-d: #7cdfca; --a-text-d: #7cdfca; --a-second-d: #8495e8; --a-tint-d: #24363a; --display-weight: 550; }
[data-app="continuum"]{ --a-main-l: #151a21; --a-text-l: #151a21; --a-second-l: #5a6471; --a-tint-l: #e9edf1;
                        --a-main-d: #eef2f6; --a-second-d: #919ca9; --a-tint-d: #242b35; --display-weight: 600; }

/* Slate dark: follows the device setting */
@media (prefers-color-scheme: dark) {
  html:root {
    color-scheme: dark;
    --bg: #0e1217; --surface: #161b22; --inset: #242b35;
    --line: #2b333e; --line-strong: #6a7586;
    --text: #eef2f6; --text-2: #b7c0cb; --text-3: #919ca9;
    --accent: var(--a-main-d); --accent-text: var(--a-text-d, var(--a-main-d)); --on-accent: #151a21;
    --second: var(--a-second-d); --tint: var(--a-tint-d);
    --band: #131820;
  }
}

/* ---------- 1b. Per-app grounds (each app keeps its own atmosphere) ---------- */
/* Haraka: light lime page, white cards. */
[data-app="haraka"] { --bg: #f3f6ea; --surface: #ffffff; --band: #ecf0e1; --line: #dde3d0; }
/* Tracelet: light blue page, white cards. */
[data-app="tracelet"] { --bg: #eef3fb; --surface: #ffffff; --band: #e6edf8; --line: #d5deeb; }
/* Dawdle: Mint, kit tint grounds by day and Slate at night. */
[data-app="dawdle"] { --bg: #ebfcf8; --surface: #ffffff; --inset: #def2ed; --band: #def2ed; --line: #d4e7e0; --line-strong: #7c8693;
  --text: #151a21; --text-2: #3d4652; --text-3: #5a6471; }
/* Company: light teal-grey page, white cards, teal wave. */
[data-app="continuum"] { --bg: #eef3f2; --surface: #ffffff; --band: #e3ebe9; --line: #d6dfdd; --wave: #3fb5b0; }
@media (prefers-color-scheme: dark) {
  :root[data-app="tracelet"] { --bg: #0e1218; --surface: #161b23; --band: #141a23; --line: #2b3440; }
  :root[data-app="dawdle"] { --bg: #0e1217; --surface: #161b22; --inset: #242b35; --band: #131820; --line: #2b333e; --line-strong: #7c8693;
    --text: #eef2f6; --text-2: #b7c0cb; --text-3: #919ca9; }
  :root[data-app="continuum"] { --bg: #0f1113; --surface: #17191c; --band: #141618; --wave: #7ad8d4; }
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 24px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 var(--fs-body)/1.6 var(--font-body); -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
h1, h2, h3, p, figure, ul, ol, dl { margin: 0; }
img { max-width: 100%; height: auto; }
a { color: var(--accent-text); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
button, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--gutter); top: -100px; z-index: 10; padding: 10px 14px; border-radius: var(--r-s); background: var(--accent); color: var(--on-accent); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
.shell { width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto; }
@media (min-width: 720px) { :root { --gutter: 32px; } }
@media (min-width: 880px) { :root { --header-h: 80px; --fs-brand: 1.375rem; --fs-nav: 1rem; --icon-header: 44px; --mark-header: 28px; } }
@media (min-width: 1100px) { :root { --gutter: 48px; } }
.display { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: -.03em; line-height: 1.06; }
h1 { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--fs-h1); line-height: 1.04; letter-spacing: -.035em; text-wrap: balance; }
h2 { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -.025em; text-wrap: balance; }
h3 { font-size: var(--fs-h3); line-height: 1.35; font-weight: 600; letter-spacing: -.01em; }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--text-2); max-width: 36ch; }
.muted { color: var(--text-3); }
.fine { font-size: var(--fs-fine); line-height: 1.6; color: var(--text-3); }
.section { padding-block: var(--sp-10); }
.section + .section { border-top: 1px solid var(--line); }
.section-head { display: grid; gap: var(--sp-4); margin-bottom: var(--sp-9); max-width: 46rem; }
.section-head p { color: var(--text-2); font-size: var(--fs-lead); }
@media (max-width: 719px) { .section { padding-block: var(--sp-9); } .section-head { margin-bottom: var(--sp-8); } }

/* ---------- 3. App icon (brand mark) ---------- */
.app-icon { display: inline-block; flex: none; width: 40px; height: 40px; border-radius: var(--r-badge); background: center / cover no-repeat; box-shadow: 0 0 0 1px var(--line); }
.app-icon[data-icon="haraka"] { background-image: url(img/haraka-icon.webp); }
.app-icon[data-icon="dawdle"] { background-image: url(img/dawdle-icon.webp); }
.app-icon[data-icon="tracelet"] { background-image: url(img/tracelet-icon.webp); }
.app-icon.lg { width: 72px; height: 72px; }
.app-icon.xl { width: 96px; height: 96px; }
.app-icon.sm { width: 32px; height: 32px; }
.wave-mark { width: 26px; height: 26px; color: var(--text); flex: none; }

/* ---------- 4. Header ---------- */
.site-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); min-height: var(--header-h); padding-block: var(--sp-4); }
.brand { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; }
.brand-text { display: grid; line-height: 1.15; }
.brand-name { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-brand); letter-spacing: -.02em; color: var(--text); text-decoration: none; }
.brand-name:hover { color: var(--accent-text); }
.brand-by { font-size: var(--fs-fine); color: var(--text-3); text-decoration: none; width: fit-content; }
.brand-by:hover { color: var(--accent-text); text-decoration: underline; }
.brand-home { display: flex; align-items: center; gap: var(--sp-4); text-decoration: none; color: var(--text); }
.site-nav { display: flex; align-items: center; gap: var(--sp-6); font-size: var(--fs-nav); }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-2); text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--text); text-decoration: underline; text-underline-offset: 6px; }
.site-nav .nav-download { min-height: 44px; padding: 6px 18px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-weight: 600; }
.site-nav .nav-download:hover { color: var(--on-accent); text-decoration: none; opacity: .88; }
.site-nav .nav-download.is-soon { background: transparent; color: var(--text-3); box-shadow: inset 0 0 0 1px var(--line-strong); font-weight: 500; }
@media (max-width: 719px) {
  .site-nav { gap: var(--sp-4); }
  .site-nav .hide-phone { display: none; }
  .site-nav .nav-download { min-height: 44px; padding: 5px 14px; font-size: .875rem; }
}

/* ---------- 5. Buttons ---------- */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-6); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 12px 22px; border-radius: var(--r-m); background: var(--accent); color: var(--on-accent); font-size: 1rem; font-weight: 600; text-decoration: none; border: 0; }
.button:hover { opacity: .88; text-decoration: none; }
.button svg { width: 18px; height: 18px; flex: none; }
.button.is-soon { background: var(--tint); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); cursor: default; }
.button.is-soon:hover { opacity: 1; }
.button.quiet { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }
.text-link { display: inline-flex; align-items: center; min-height: 44px; gap: 6px; font-weight: 500; }

/* ---------- 6. Hero ---------- */
.hero-copy { display: grid; gap: var(--sp-7); justify-items: start; }
.kicker { font-size: .9375rem; color: var(--text-3); font-weight: 500; }
.kicker::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: var(--second); vertical-align: 1px; }

/* Device pair: one phone in front, a companion (watch or second phone) behind */
.devices { --phone-w: 268px; position: relative; display: flex; justify-content: center; align-items: flex-end; gap: var(--sp-7); min-width: 0; }
.devices figure { display: grid; justify-items: center; gap: var(--sp-4); }
.devices .companion { --phone-w: 212px; margin-bottom: 40px; }
.devices .companion .watch { --watch-w: 132px; }
@media (max-width: 879px) { .devices { --phone-w: 224px; gap: var(--sp-5); } .devices .companion { --phone-w: 150px; margin-bottom: 32px; } .devices .companion .watch { --watch-w: 104px; } }
@media (max-width: 400px) { .devices { --phone-w: 200px; gap: 12px; } .devices .companion { --phone-w: 128px; } .devices .companion .watch { --watch-w: 96px; } }
figcaption { font-size: var(--fs-fine); line-height: 1.4; color: var(--text-3); text-align: center; }
.capture-note { font-size: var(--fs-fine); color: var(--text-3); text-align: left; margin-top: var(--sp-5); }

/* Phone frame (drawn, from the Haraka page): bezel, corners and side buttons scale together */
.screen-zoom { display: block; position: relative; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.phone { --bezel: calc(var(--phone-w) * .03125); --corner: calc(var(--phone-w) * .15);
  width: var(--phone-w); max-width: 100%; padding: var(--bezel); border-radius: var(--corner); background: var(--device);
  box-shadow: inset 0 0 0 1px #717985, inset 0 0 0 3px #2b3037; }
.phone .display { display: block; position: relative; overflow: hidden; border-radius: calc(var(--corner) - var(--bezel)); background: #000; }
.phone .display img { display: block; width: 100%; height: auto; }
.phone .display::after { content: ""; position: absolute; top: 2.3%; left: 37.5%; width: 25%; height: 3.2%; border-radius: 999px; background: #000; }
.phone::before, .phone::after { content: ""; position: absolute; width: calc(var(--phone-w) * .009); min-width: 2px; background: #555c66; border-radius: 2px; }
.phone::before { left: calc(var(--phone-w) * -.007); top: 22%; height: 13%; }
.phone::after { right: calc(var(--phone-w) * -.007); top: 27%; height: 10%; }
.watch { width: var(--watch-w); padding: calc(var(--watch-w) * .055); border-radius: calc(var(--watch-w) * .26); background: var(--device); box-shadow: inset 0 0 0 1px #747d89, inset 0 0 0 3px #343b46; }
.watch img { display: block; width: 100%; height: auto; border-radius: calc(var(--watch-w) * .205); }
.watch::after { content: ""; position: absolute; right: -4%; top: 25%; width: 5%; height: 14%; background: #454d59; border: 1px solid #747d89; border-radius: 3px; }

/* ---------- 7. Trust strip ---------- */
.facts { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3) var(--sp-8); padding-block: var(--sp-6); border-block: 1px solid var(--line); list-style: none; padding-inline: 0; margin: 0; }
.facts li { display: flex; align-items: center; gap: 10px; font-weight: 500; color: var(--text-2); }
.facts li::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--second); }
@media (max-width: 719px) { .facts { flex-direction: column; align-items: flex-start; gap: var(--sp-3); } }

/* ---------- 8. Feature cards ---------- */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-8) var(--sp-9); }
.feature { display: grid; gap: var(--sp-3); align-content: start; padding-top: var(--sp-6); border-top: 2px solid var(--second); }
.feature p { color: var(--text-2); max-width: 38ch; }
.features-intro { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--sp-9); align-items: start; }
.features-intro .features { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 879px) { .features-intro { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); } }

/* ---------- 10. Plans ---------- */
.plans { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--sp-9); align-items: start; }
.plans-intro { display: grid; gap: var(--sp-5); }
.plans-intro p { color: var(--text-2); }
@media (max-width: 879px) { .plans { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); } }
.billing { font-size: var(--fs-fine); line-height: 1.6; color: var(--text-3); margin-top: var(--sp-5); max-width: 70ch; }
.plus-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.plus-grid article { display: grid; gap: 6px; align-content: start; padding: var(--sp-6); border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); }
.plus-grid article p { color: var(--text-2); }
@media (max-width: 559px) { .plus-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 11. Privacy and questions ---------- */
.privacy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-9); align-items: start; }
.privacy > div { display: grid; gap: var(--sp-5); align-content: start; }
.privacy p { color: var(--text-2); }
@media (max-width: 879px) { .privacy { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); } }
.faq { display: grid; gap: 0; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-5); min-height: 56px; padding-block: 12px; font-weight: 600; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; font-weight: 400; line-height: 1; color: var(--accent-text); }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding-bottom: var(--sp-5); }

/* ---------- 12. Closing call to action ---------- */
.closing { display: grid; justify-items: center; text-align: center; gap: var(--sp-6); padding: var(--sp-10) var(--sp-7); border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); }
.closing .display { font-size: var(--fs-h2); max-width: 20ch; }
.closing .fine { max-width: 60ch; }
@media (max-width: 719px) { .closing { padding: var(--sp-9) var(--sp-5); } }

/* ---------- 13. Family footer ---------- */
.site-footer { margin-top: var(--sp-10); padding-block: var(--sp-9) var(--sp-8); border-top: 1px solid var(--line); font-size: .9375rem; }
.family-title { font-size: var(--fs-small); font-weight: 600; color: var(--text-3); margin-bottom: var(--sp-5); }
.family { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-4); list-style: none; padding: 0; margin: 0 0 var(--sp-9); }
.family a { display: flex; align-items: center; gap: var(--sp-4); min-height: 72px; padding: var(--sp-4); border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); color: var(--text); text-decoration: none; }
.family a:hover { border-color: var(--line-strong); }
.family a .app-icon { width: 48px; height: 48px; }
.family strong { display: block; font-weight: 600; }
.family span.line { display: block; font-size: var(--fs-small); color: var(--text-3); }
.footer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4) var(--sp-8); }
.footer-row nav { display: flex; flex-wrap: wrap; gap: 0 var(--sp-6); }
.footer-row nav a, .footer-by { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-2); text-decoration: none; }
.footer-row nav a:hover, .footer-by:hover { color: var(--text); text-decoration: underline; }
.footer-by { gap: 10px; font-weight: 600; color: var(--text); }
.footer-note { margin-top: var(--sp-6); max-width: 72ch; font-size: var(--fs-fine); color: var(--text-3); }
.footer-copy { display: block; margin-top: var(--sp-4); font-size: var(--fs-fine); color: var(--text-3); }

/* ---------- 14. Screen dialog ---------- */
dialog.screen-dialog { width: min(440px, calc(100% - 32px)); max-height: calc(100% - 32px); padding: var(--sp-6); border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); color: var(--text); }
dialog.screen-dialog::backdrop { background: rgb(8 10 14 / .64); }
.dialog-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-5); margin-bottom: var(--sp-5); }
.dialog-head h2 { font-size: 1.25rem; letter-spacing: -.01em; }
.dialog-close { min-height: 44px; padding: 8px 14px; border-radius: var(--r-s); border: 1px solid var(--line); background: var(--bg); cursor: pointer; }
dialog.screen-dialog img { display: block; width: 100%; border-radius: var(--r-l); }
dialog.screen-dialog p { margin-top: var(--sp-4); font-size: var(--fs-fine); color: var(--text-3); }
body.dialog-open { overflow: hidden; }

/* ---------- 15. Reading pages (support, privacy, terms) ---------- */
.doc { width: min(46rem, 100% - 2 * var(--gutter)); margin-inline: auto; padding-block: var(--sp-8) var(--sp-9); }
.doc-tabs { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-8); padding: 0; list-style: none; }
.doc-tabs a { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 14px; border-radius: 999px; color: var(--text-2); text-decoration: none; box-shadow: inset 0 0 0 1px var(--line); font-size: .9375rem; }
.doc-tabs a[aria-current="page"] { background: var(--tint); color: var(--text); box-shadow: inset 0 0 0 2px var(--accent); font-weight: 600; }
.doc-body { color: var(--text-2); }
.doc-body h1 { color: var(--text); margin-bottom: var(--sp-5); font-size: var(--fs-h1); }
.doc-body h2 { color: var(--text); font-size: clamp(1.375rem, 1.2rem + .8vw, 1.75rem); margin: var(--sp-9) 0 var(--sp-4); scroll-margin-top: calc(56px + var(--sp-6)); }
.doc-body h3 { color: var(--text); margin: 0 0 var(--sp-3); }
.doc-body p, .doc-body ul, .doc-body ol { margin: 0 0 var(--sp-5); }
.doc-body ul, .doc-body ol { padding-left: 1.3em; display: grid; gap: 6px; }
.doc-body li::marker { color: var(--text-3); }
.doc-body strong { color: var(--text); font-weight: 600; }
.doc-body hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-9) 0 var(--sp-5); }
.doc-body .meta { font-size: var(--fs-small); color: var(--text-3); }
.doc-body .lede, .doc-body .lead { font-size: var(--fs-lead); color: var(--text-2); max-width: none; }
.doc-body .eyebrow { display: block; margin-bottom: var(--sp-3); font-size: .9375rem; font-weight: 500; color: var(--accent-text); }
.doc-body .callout { margin: 0 0 var(--sp-6); padding: var(--sp-5) var(--sp-6); border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--second); }
.doc-body .callout > :last-child { margin-bottom: 0; }
.doc-body .contact { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--sp-5); margin: var(--sp-7) 0 var(--sp-5); padding: var(--sp-6); border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); }
.doc-body .contact p { margin: 2px 0 0; }
.doc-body .contact strong { font-size: 1.0625rem; }
.doc-body .btn { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px 20px; border-radius: var(--r-m); background: var(--accent); color: var(--on-accent); font-weight: 600; text-decoration: none; }
.doc-body .btn:hover { opacity: .88; }
.doc-body .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-4); margin: 0 0 var(--sp-7); }
.doc-body .grid article { padding: var(--sp-6); border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); }
.doc-body .grid article p:last-child { margin-bottom: 0; }
.doc-body .note { font-size: .9375rem; color: var(--text-2); }
.doc-body .page-header h1 { margin-bottom: var(--sp-5); }
.doc-body section > h2:first-child { margin-top: var(--sp-9); }
/* Contents list (legal restyle, 2026-10-23): links to each section heading; two columns on wide screens. */
.doc-contents { margin: var(--sp-7) 0 0; padding: var(--sp-5) var(--sp-6); border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); }
.doc-contents-title { margin: 0 0 var(--sp-3); font-size: var(--fs-small); font-weight: 600; letter-spacing: .02em; color: var(--text); }
.doc-body .doc-contents ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0 var(--sp-6); }
.doc-contents a { display: flex; align-items: center; min-height: 44px; padding-block: 4px; line-height: 1.35; text-decoration: none; }
.doc-contents a:hover { text-decoration: underline; }
@media (min-width: 720px) { .doc-body .doc-contents ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.doc-body .container { width: auto; padding: 0; }
.doc-body .page-header .hero-wave { margin-top: var(--sp-7); }

/* ---------- 16. Small helpers ---------- */
.h3 { font-family: var(--font-body); font-size: var(--fs-h3); line-height: 1.35; font-weight: 600; letter-spacing: -.01em; }
html[data-listing="live"] [data-when="soon"], html:not([data-listing="live"]) [data-when="live"] { display: none; }
span.phone { display: block; position: relative; }

/* ---------- 17. Continuum line (company mark, from continuum.sa) ---------- */
.hero-wave { display: block; width: 100%; height: auto; color: var(--line-strong); }
.hero-wave path { fill: none; stroke-linecap: round; }
.hero-wave path.track { stroke: currentColor; stroke-width: 1.25; opacity: .6; }
.hero-wave path.accent { stroke: var(--text); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; animation: continuum-draw 2.6s cubic-bezier(.22, 1, .36, 1) .3s forwards; }
@keyframes continuum-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .hero-wave path.accent { animation: none; stroke-dashoffset: 0; } }

/* ---------- 18. Company pages ---------- */
.company-hero { padding-block: var(--sp-9) var(--sp-8); display: grid; gap: var(--sp-7); justify-items: start; }
.company-hero h1 { max-width: 14ch; }
.company-hero .lead { max-width: 44ch; }
.apps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); list-style: none; padding: 0; margin: 0; }
.apps a { display: grid; gap: var(--sp-4); align-content: start; height: 100%; padding: var(--sp-7); border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); color: var(--text); text-decoration: none; }
.apps a { box-shadow: 0 1px 2px rgb(16 24 40 / .04), 0 10px 28px -14px rgb(16 24 40 / .14); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.apps a:hover { border-color: var(--line-strong); transform: translateY(-2px); box-shadow: 0 1px 2px rgb(16 24 40 / .05), 0 16px 36px -14px rgb(16 24 40 / .2); }
.apps .app-name { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; }
.apps .app-line { color: var(--text-2); }
.apps .app-meta { font-size: var(--fs-small); color: var(--text-3); }
.apps .app-go { font-weight: 600; color: var(--accent-text); }
@media (max-width: 879px) { .apps { grid-template-columns: minmax(0, 1fr); } }
.app-rows { display: grid; gap: var(--sp-6); list-style: none; padding: 0; margin: 0; }
.app-rows > li { --c-tint: #e9edf1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); overflow: hidden; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); }
.app-rows > li[data-card="haraka"] { --c-tint: #dbe6c3; --c-glow: #eff4e2; --c-dot: #0496a6; --c-accent: #4f7604; --c-on: #ffffff; }
.app-rows > li[data-card="dawdle"] { --c-tint: #c6e9df; --c-glow: #e6f7f2; --c-dot: #7282dc; --c-accent: #027a63; --c-on: #ffffff; }
.app-rows > li[data-card="tracelet"] { --c-tint: #cfdff8; --c-glow: #e9f1fd; --c-dot: #448bd0; --c-accent: #1865d7; --c-on: #ffffff; }
@media (prefers-color-scheme: dark) {
  .app-rows > li[data-card="haraka"] { --c-tint: #2a3528; --c-glow: #36452f; --c-dot: #3da8b5; --c-accent: #a6d84a; --c-on: #151a21; }
  .app-rows > li[data-card="dawdle"] { --c-tint: #24363a; --c-glow: #2e464b; --c-dot: #8495e8; --c-accent: #7cdfca; --c-on: #151a21; }
  .app-rows > li[data-card="tracelet"] { --c-tint: #243041; --c-glow: #2f3e55; --c-dot: #9db6cf; --c-accent: #7aaeff; --c-on: #151a21; }
}
.app-rows .copy { display: grid; gap: var(--sp-4); justify-items: start; align-content: center; padding: var(--sp-9) var(--sp-8); }
.app-rows > li { box-shadow: 0 1px 2px rgb(16 24 40 / .04), 0 18px 40px -20px rgb(16 24 40 / .18); }
.app-rows .copy .app-icon { width: 72px; height: 72px; margin-bottom: var(--sp-3); }
.card-actions .button { background: var(--c-accent); color: var(--c-on); }
.app-rows h2 { font-size: var(--fs-h2); }
.app-rows .app-line { font-size: var(--fs-lead); color: var(--text); font-weight: 500; }
.app-rows p { color: var(--text-2); max-width: 52ch; }
.app-rows .app-meta { font-size: var(--fs-small); color: var(--text-3); }
.card-facts { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); list-style: none; padding: 0; margin: 0; }
.card-facts li { display: flex; align-items: center; gap: 8px; font-size: var(--fs-small); font-weight: 500; color: var(--text-2); }
.card-facts li::before { content: ""; width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--c-dot); }
.card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-5); margin-top: var(--sp-3); }
.card-actions .store-badge { margin: -12px; }
.card-shot { position: relative; min-height: 360px; background: linear-gradient(160deg, var(--c-glow) 0%, var(--c-tint) 55%); }
.card-shot .phone { --phone-w: 260px; position: absolute; left: 50%; top: var(--sp-9); transform: translateX(-50%); box-shadow: 0 30px 60px -20px rgb(16 24 40 / .35); }
@media (max-width: 879px) {
  .app-rows > li { grid-template-columns: minmax(0, 1fr); }
  .app-rows .copy { padding: var(--sp-7) var(--sp-6); }
  .card-shot { min-height: 300px; }
  .card-shot .phone { --phone-w: 220px; top: var(--sp-7); }
  .app-rows .copy .app-icon { width: 64px; height: 64px; }
}
.cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-8) var(--sp-9); }
.cells > div { display: grid; gap: var(--sp-3); align-content: start; padding-top: var(--sp-6); border-top: 1px solid var(--line-strong); }
.cells p { color: var(--text-2); }
@media (max-width: 879px) { .cells { grid-template-columns: minmax(0, 1fr); } }
.footer-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sp-8); margin-bottom: var(--sp-8); }
.footer-cols h2 { font-family: var(--font-body); font-size: var(--fs-small); font-weight: 600; color: var(--text-3); letter-spacing: 0; margin-bottom: var(--sp-3); }
.footer-cols ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.footer-cols li a { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; color: var(--text-2); text-decoration: none; }
.footer-cols li a:hover { color: var(--text); text-decoration: underline; }
@media (max-width: 719px) { .footer-cols { grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); } }

/* ======================================================================
   Round 2: each app's own character (review R2–R6, R11, N7, N8)
   ====================================================================== */

/* Full-bleed bands */
.band { background: var(--band); }
.band > .section { border-top: 0; }
.section.flush-top { border-top: 0; }

/* Hero ground: Dawdle's Mint field */
[data-app="dawdle"] body { background: var(--bg); }
[data-app="dawdle"] h1 { letter-spacing: -.04em; }

/* Privacy beside the closing block (Dawdle and Tracelet, as on their pages) */
.privacy-closing { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-9); align-items: start; }
.privacy-closing > div { display: grid; gap: var(--sp-5); align-content: start; }
.privacy-closing p { color: var(--text-2); }
.privacy-closing .closing-side { padding-left: var(--sp-9); border-left: 1px solid var(--line); justify-items: start; }
.privacy-closing .closing-side .display { font-size: var(--fs-h2); }
@media (max-width: 879px) {
  .privacy-closing { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
  .privacy-closing .closing-side { padding: var(--sp-8) 0 0; border-left: 0; border-top: 1px solid var(--line); }
}

/* Phone pages: shorter (R6) */
@media (max-width: 719px) {
  .facts { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: var(--sp-3) var(--sp-6); padding-block: var(--sp-5); }
  .features { gap: var(--sp-6); }
  .feature { gap: 4px; padding-top: var(--sp-4); border-top-width: 1px; }
  .features-intro { gap: var(--sp-6); }
  .plus-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  .plus-grid article { padding: var(--sp-4); }
  .plus-grid article h3 { font-size: 1rem; }
  .plus-grid article p { font-size: .9375rem; line-height: 1.5; }
  .section { padding-block: var(--sp-8); }
  .hero-copy { gap: var(--sp-5); }
  .closing { padding: var(--sp-8) var(--sp-5); gap: var(--sp-5); }
  .site-footer { margin-top: var(--sp-8); padding-top: var(--sp-8); }
  .family { margin-bottom: var(--sp-7); }
}
@media (max-width: 359px) { .plus-grid { grid-template-columns: minmax(0, 1fr); } }

/* Footer: contact line */
.footer-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-top: var(--sp-5); }
.footer-contact { font-size: var(--fs-small); color: var(--text-2); }
.contact-address { margin: calc(-1 * var(--sp-3)) 0 var(--sp-5); font-size: .9375rem; color: var(--text-2); }

/* Dialog: sharp enlarged screen */
dialog.screen-dialog { width: min(460px, calc(100% - 32px)); }

/* ---------- Company: studio character (R4, N7) ---------- */
[data-app="continuum"] { --font-display: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-body: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace; --display-weight: 500; }
[data-app="continuum"] h1 { letter-spacing: -.03em; line-height: 1.04; }
[data-app="continuum"] .wave-mark { color: var(--wave); }
[data-app="continuum"] .kicker { font-family: var(--font-mono); font-size: .75rem; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
[data-app="continuum"] .kicker::before { width: 18px; height: 1px; border-radius: 0; background: var(--line-strong); vertical-align: 3px; }
[data-app="continuum"] .footer-cols h2, [data-app="continuum"] .footer-copy { font-family: var(--font-mono); font-weight: 400; letter-spacing: .12em; text-transform: uppercase; font-size: .75rem; }
.wave-bleed { width: 100%; overflow: hidden; margin-block: var(--sp-6) 0; }
.wave-bleed .hero-wave path.accent { stroke: var(--wave); }
.apps .app-name { font-weight: 500; }
@media (max-width: 719px) {
  .devices { --phone-w: 208px; } .devices .companion { --phone-w: 136px; }
  .panel { --phone-w: 200px; gap: var(--sp-6); }
  .section-head { margin-bottom: var(--sp-6); }
  .family a { min-height: 60px; padding: var(--sp-3) var(--sp-4); }
}

/* Self-hosted company type, OFL licence beside the font files. */
@font-face { font-family: Geist; src: url(fonts/Geist.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url(fonts/GeistMono.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
/* Apple badge: 48 px high, 12 px (one-quarter height) clear space on every side. */
.store-badge { display: inline-flex; padding: 12px; flex: none; line-height: 0; }
.store-badge picture, .store-badge img { display: block; width: auto; height: 48px; }
.store-badge:hover { opacity: 1; }
/* Round 5: approved direction B, shared by all app landings. */
.walk-head { display: grid; gap: var(--sp-4); margin-bottom: var(--sp-9); }
.walk-head p { color: var(--text-2); font-size: var(--fs-lead); }
/* Plans: two plain lists side by side; Pro is marked by a heavier accent rule, not a filled card. */
.plan-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-9); align-items: start; }
.plan { border-top: 1px solid var(--line-strong); padding-top: var(--sp-6); }
.plan.pro { border-top: 4px solid var(--accent); padding-top: calc(var(--sp-6) - 3px); }
.plan h3 { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.5rem; letter-spacing: -.02em; }
.plan .plan-line { color: var(--text-3); font-size: var(--fs-small); margin-top: 2px; }
.plan ul { list-style: none; padding: 0; margin-top: var(--sp-6); display: grid; gap: var(--sp-4); }
.plan li { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--line); }
.plan li span { color: var(--text-2); }
.plan li strong { font-weight: 600; text-align: left; }
.plan.pro li strong { color: var(--accent-text); }
.plans-note { margin-top: var(--sp-7); font-size: var(--fs-small); color: var(--text-3); }
@media (max-width: 719px) { .plan-pair { grid-template-columns: 1fr; gap: var(--sp-8); } }

.privacy-block { max-width: 40rem; display: grid; gap: var(--sp-5); }
.privacy-block p { color: var(--text-2); }

/* ---------- Direction B: type-led ---------- */
/* First view (Faisal 2026-10-23): headline, badge and the screens all show without scrolling.
   The fan takes whatever height is left in the viewport after the copy, within limits. */
.b-hero { --copy-h: 372px; text-align: center; padding-top: var(--sp-8); display: grid; justify-items: center; gap: var(--sp-5); }
.b-hero h1 { font-size: var(--fs-h1); line-height: 1.02; letter-spacing: -.04em; max-width: 20ch; text-wrap: balance; }
.b-hero .lead { margin-inline: auto; text-align: center; max-width: 44ch; }
/* Retain Apple's one-quarter-height clear space. */
/* The three facts are the first thing read: full text colour, semibold, each with the app's accent dot. */
.hero-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; list-style: none; padding: 0; margin: 0;
  font-size: 1.0625rem; font-weight: 600; color: var(--text); }
.hero-facts li { display: flex; align-items: center; gap: 8px; }
@media (max-width: 479px) { .hero-facts { font-size: .9375rem; gap: 4px 14px; } .hero-facts li { gap: 6px; } }
.hero-facts li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.fan { --fan-h: clamp(260px, calc(100svh - var(--copy-h)), 560px); --phone-w: calc(var(--fan-h) * .62);
  position: relative; display: flex; justify-content: center; align-items: flex-end;
  margin-top: var(--sp-4); height: var(--fan-h); overflow: hidden; width: 100%; border-bottom: 1px solid var(--line); }
.fan .phone { position: absolute; bottom: calc(var(--fan-h) * -.36); box-shadow: 0 30px 60px rgb(10 30 34 / .22); }
.fan .left, .fan .right { --phone-w: calc(var(--fan-h) * .54); bottom: calc(var(--fan-h) * -.5); }
.fan .left { transform: translateX(-64%) rotate(-7deg); }
.fan .right { transform: translateX(64%) rotate(7deg); }
.fan .centre { z-index: 2; }
/* Two short features without screens: the fan above already shows them. */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-9); max-width: 880px; margin: 0 auto var(--sp-10); }
.pair p { margin-top: var(--sp-3); color: var(--text-2); }
.pair ul { padding-left: 1.25em; margin-top: var(--sp-3); color: var(--text-2); }
.pair .detail { font-size: var(--fs-small); color: var(--text-3); }

.rows { display: grid; gap: var(--sp-10); }
.row { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: center; gap: var(--sp-11); }
.row figure { --phone-w: 240px; }
.row .copy { display: grid; gap: var(--sp-5); }
.row .copy p { color: var(--text-2); font-size: var(--fs-lead); }
.row .copy .pro-tag { width: fit-content; padding: 2px 10px; border-radius: 999px; background: var(--tint); color: var(--accent-text); font-size: var(--fs-small); font-weight: 600; }

.b-end { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-9); align-items: start; }
.b-close { display: grid; justify-items: start; gap: var(--sp-5); padding: var(--sp-9); border-radius: var(--r-xl); background: var(--tint); }
.b-close .display { font-size: var(--fs-h2); }
.b-close .muted { color: var(--text-3); font-size: var(--fs-small); }

@media (max-width: 879px) {
  .b-hero { --copy-h: 430px; padding-top: var(--sp-6); }
  .rows { gap: var(--sp-10); }
  .pair { grid-template-columns: 1fr; gap: var(--sp-7); }
  .row { grid-template-columns: 1fr; gap: var(--sp-7); }
  .row figure { --phone-w: 220px; justify-self: center; order: -1; }
  .b-end { grid-template-columns: 1fr; }
  .b-close { padding: var(--sp-8); }
}

/* Zoom controls keep the mock's frame geometry and remain keyboard reachable. */
.row { width: 100%; }
.row figure { margin: 0; width: 100%; display: grid; justify-items: center; }
.row .watch { --watch-w: 132px; }
.row figcaption { margin-top: var(--sp-5); }
.row .copy ul { color: var(--text-2); padding-left: 1.25em; }
.row .copy .detail { font-size: var(--fs-small); color: var(--text-3); }
.b-hero .kicker::before { display: none; }
.fan .screen-zoom:focus-visible { z-index: 3; outline-offset: -4px; }
.b-close .fine { color: var(--text-3); }
@media (max-width: 879px) { .row .watch { --watch-w: 104px; } }
@media (max-width: 400px) { .row .watch { --watch-w: 96px; } }


/* Round 6: approved sticky-phone tour (4300ba4), progressively enhanced. */
.tour { width: 100%; }
.tour-steps { list-style: none; padding: 0; margin: 0; }
.tour-step { display: grid; align-content: center; gap: var(--sp-5); padding-block: var(--sp-8); }
.tour-step p { color: var(--text-2); font-size: var(--fs-lead); }
.tour-step ul { color: var(--text-2); padding-left: 1.25em; }
.tour-step .detail { font-size: var(--fs-small); color: var(--text-3); }
.tour-step .pro-tag { width: fit-content; padding: 2px 10px; border-radius: 999px; background: var(--tint); color: var(--accent-text); font-size: var(--fs-small); font-weight: 600; }
.tour-step .inline-phone { --phone-w: 220px; justify-self: center; order: -1; }
.tour-phone { display: none; }
.tour-phone .display { display: grid; }
.tour-phone .display img { grid-area: 1 / 1; opacity: 0; transition: opacity .45s ease; }
.tour-phone .display img.on { opacity: 1; }
.tour + .rows { margin-top: var(--sp-10); }
@media (min-width: 880px) {
  .tour-ready { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--sp-11); }
  .tour-ready .tour-phone { display: grid; justify-items: center; position: sticky; top: max(24px, calc(50vh - 290px)); height: fit-content; align-self: start; --phone-w: 270px; }
  .tour-ready .tour-step { min-height: 70vh; padding-block: var(--sp-5); }
  .tour-ready .inline-phone { display: none; }
}
/* Keep inactive text at full contrast; only the phone image fades. */
@media (prefers-reduced-motion: reduce) { .tour-phone .display img { transition: none; } }

/* Round 6b: one shell grid and natural, balanced heading wraps. */
main h1, main h2, main h3 { text-wrap: balance; }
@media (max-width: 879px) { .tour-step, .row .copy, .plan { text-align: left; } }

/* Round 11 (Faisal, 2026-10-23): the header row stays at the top and gets smaller after scrolling. */
html { scroll-padding-top: 80px; }
.site-header { position: sticky; top: 0; z-index: 20; transition: min-height .2s ease, padding .2s ease; }
.site-header::before { content: ""; position: absolute; z-index: -1; inset-block: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: transparent; border-bottom: 1px solid transparent; transition: background-color .2s ease, border-color .2s ease; }
.site-header .app-icon { width: var(--icon-header); height: var(--icon-header); transition: width .2s ease, height .2s ease; }
.site-header .wave-mark { width: var(--mark-header); height: var(--mark-header); }
.site-header.is-stuck { min-height: 56px; padding-block: 8px; }
.site-header.is-stuck::before { background: var(--bg); border-bottom-color: var(--line); }
.site-header.is-stuck .app-icon { width: 36px; height: 36px; }
@media (min-width: 880px) { .tour-ready .tour-phone { top: max(80px, calc(50vh - 262px)); } }
@media (prefers-reduced-motion: reduce) { .site-header, .site-header::before, .site-header .app-icon { transition: none; } }

@media (prefers-reduced-motion: reduce) { .apps a { transition: none; } .apps a:hover { transform: none; } }

/* ======================================================================
   Visual polish (2026-10-23): a few shared rules, no per-page hacks.
   Cards share one border, radius and shadow; text columns keep a reading
   measure; the end of each page sits closer to its footer.
   ====================================================================== */
:root {
  --shadow-card: 0 1px 2px rgb(16 24 40 / .04), 0 10px 28px -14px rgb(16 24 40 / .14);
  --shadow-card-hover: 0 1px 2px rgb(16 24 40 / .05), 0 16px 36px -14px rgb(16 24 40 / .2);
  --measure: 38rem;
}
@media (prefers-color-scheme: dark) {
  html:root { --shadow-card: 0 1px 2px rgb(0 0 0 / .32); --shadow-card-hover: 0 1px 2px rgb(0 0 0 / .32), 0 14px 32px -16px rgb(0 0 0 / .7); }
}

/* 1. One card recipe: white (Slate surface at night), hairline, 16 px corners, soft shadow. */
.family a, .plus-grid article, .apps a, .plan { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow-card); }
.family a { transition: box-shadow .2s ease, border-color .2s ease; }
.family a:hover, .apps a:hover { border-color: var(--line-strong); box-shadow: var(--shadow-card-hover); }

/* 2. Reading measure for intros and feature text. */
.walk-head { max-width: 46rem; }
.tour-step > :not(.inline-phone), .row .copy > * { max-width: var(--measure); }
.plans-note { max-width: 70ch; }
.faq details p { max-width: 62ch; color: var(--text-2); }
.b-hero .lead { text-wrap: balance; }
/* Haraka's second privacy heading gets a section-sized gap; links do not stretch across the column. */
.privacy-block > h2:not(:first-child) { margin-top: var(--sp-7); }
.privacy-block > .text-link { justify-self: start; }

/* 3. Tour: less empty height between steps on wide screens. The phone still changes at mid-screen. */
@media (min-width: 880px) { .tour-ready .tour-step { min-height: 60vh; } }

/* 4. Plans: each plan in a card on the band; Pro keeps its accent rule as the card's top edge. */
.plan-pair { gap: var(--sp-6); }
.plan, .plan.pro { padding: var(--sp-7) var(--sp-8); border-top-width: 1px; }
.plan.pro { border-top-color: var(--line); box-shadow: inset 0 4px 0 var(--accent), var(--shadow-card); }
.plan li:last-child { padding-bottom: 0; border-bottom: 0; }
@media (max-width: 719px) { .plan-pair { gap: var(--sp-5); } .plan, .plan.pro { padding: var(--sp-6) var(--sp-5); } }

/* 5. Closing panel keeps its app tint (Faisal, 2026-10-23); only one icon size on all three pages. */
.b-close .app-icon { width: 72px; height: 72px; }
@media (max-width: 719px) { .b-close .app-icon { width: 64px; height: 64px; } }

/* 6. Questions: the row answers the pointer; the sign keeps a fixed column. */
.faq summary { transition: color .15s ease; }
.faq summary:hover { color: var(--accent-text); }
.faq summary::after { flex: none; width: 1em; text-align: center; }

/* 7. Buttons and links: one hover and press feedback; the header pill keeps a 44 px target. */
.button, .site-nav .nav-download, .doc-body .btn { transition: opacity .15s ease, background-color .15s ease; }
.button:active, .site-nav .nav-download:active { opacity: .76; }
.button.quiet:hover { opacity: 1; background: var(--surface); }
.site-nav .nav-download { position: relative; }
.site-nav .nav-download::after { content: ""; position: absolute; inset: -4px -2px; }

/* 8. Footer: the last section's own padding is the gap; no second gap above the hairline. */
.site-footer { margin-top: 0; }
/* Company footer links reach the 44 px target too. */
.footer-cols li a { min-height: 44px; }