/* RecordsReady: white page, black type, one emergency red. Built from the
   2026-11-12 mockup (ppt-knowledge briefs/files/2026-11-12-recordsready-mockup). */

@font-face { font-family: "Archivo"; font-weight: 500; font-display: swap; src: url("../fonts/archivo-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 700; font-display: swap; src: url("../fonts/archivo-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 800; font-display: swap; src: url("../fonts/archivo-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 900; font-display: swap; src: url("../fonts/archivo-latin-900-normal.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-weight: 400; font-display: swap; src: url("../fonts/public-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-weight: 500; font-display: swap; src: url("../fonts/public-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-weight: 600; font-display: swap; src: url("../fonts/public-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-weight: 700; font-display: swap; src: url("../fonts/public-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 600; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2"); }

:root {
  --bg: #ffffff;
  --ink: #0d0f12;
  --ink-2: #4a5059;
  --line: #e4e6e9;
  --soft: #f5f6f7;
  --red: #d9241d;
  --red-ink: #b01a14;
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body: "Public Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --wrap: 1160px;
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.55; overflow-x: hidden; }
img { max-width: 100%; }
h1, h2, h3 { font-family: var(--display); line-height: 1.04; margin: 0; text-wrap: balance; letter-spacing: -0.02em; }
p { margin: 0; }
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.skip { position: absolute; left: -9999px; top: 0; }
.skip { min-height: 44px; display: inline-flex; align-items: center; }
.skip:focus { left: 12px; top: 12px; z-index: 50; background: var(--bg); padding: 10px 14px; border: 2px solid var(--ink); border-radius: 6px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; font-family: var(--display); font-weight: 800; font-size: 17px; text-decoration: none; padding: 16px 24px; border-radius: 6px; border: 2px solid var(--ink); cursor: pointer; background: var(--bg); color: var(--ink); }
.btn-primary { background: var(--red); border-color: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-ink); border-color: var(--red-ink); }
.btn-ghost:hover { background: var(--ink); color: var(--bg); }
.btn-dark { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn:disabled { background: #e4e6e9; border-color: #e4e6e9; color: var(--ink-2); cursor: not-allowed; }
.linkish { background: none; border: 0; text-decoration: underline; color: var(--ink-2); cursor: pointer; font: inherit; font-size: 15px; min-height: 44px; padding: 0 4px; }
.toast { font-size: 13.5px; color: var(--ink-2); }
.draft-note { display: inline-block; font-family: var(--mono); font-size: 12px; border: 1.5px dashed var(--red); color: var(--red-ink); padding: 6px 10px; border-radius: 6px; }

/* Logo */
.logo { display: flex; align-items: center; gap: 10px; min-height: 44px; font-family: var(--display); font-weight: 900; font-size: 21px; letter-spacing: -0.02em; text-decoration: none; white-space: nowrap; }
.logo-mark { width: 30px; height: 30px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 3px; border: 2.5px solid var(--ink); border-radius: 5px; flex: none; }
.logo-mark i { background: var(--ink); border-radius: 1px; }
.logo-mark i:nth-child(2), .logo-mark i:nth-child(4), .logo-mark i:nth-child(9) { background: transparent; }
.logo-mark i:nth-child(5) { background: var(--red); }
.logo .wm { display: inline-flex; align-items: baseline; }
.logo small { font-size: .72em; font-weight: 700; color: var(--ink-2); letter-spacing: -0.01em; }

/* Nav */
.nav { position: sticky; top: 0; z-index: 9; background: var(--bg); border-bottom: 1px solid var(--line); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 14px; }
.nav-links .btn { padding: 10px 16px; font-size: 15px; white-space: nowrap; }
.sm-label { display: none; }
@media (max-width: 560px) { .lg-label { display: none; } .sm-label { display: inline; } }
@media (max-width: 420px) { .nav-links .btn { padding: 10px 12px; font-size: 14px; } .logo { font-size: 19px; } }

/* Hero */
.hero { position: relative; color: #fff; background: #0d0f12 url("../img/p6519909.jpg") center 40% / cover no-repeat; }
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 12, 15, .9) 0%, rgba(10, 12, 15, .72) 48%, rgba(10, 12, 15, .2) 100%); }
.hero .wrap { position: relative; display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: center; padding-block: 48px 56px; }
.hero-copy { display: grid; gap: 22px; min-width: 0; }
.hero h1 { font-size: clamp(40px, 5.4vw, 68px); font-weight: 900; }
.hero h1 em { font-style: normal; color: var(--red); }
.hero .lede { font-size: 20px; color: #d7dadf; max-width: 40ch; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
/* The responder photo sits upper right with the scan card overlapping its lower left. */
.hero-visual { position: relative; min-width: 0; justify-self: end; width: min(460px, 100%); padding-bottom: 24px; }
.responder { margin: 0 0 0 auto; width: 74%; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; background: #22262c; box-shadow: 0 24px 48px rgba(0, 0, 0, .4); }
.responder picture { display: block; height: 100%; }
.responder img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-visual .scan-card { position: absolute; left: 0; bottom: 0; width: 220px; padding: 16px; gap: 10px; }
.hero-visual .scan-card .label { font-size: 22px; }
.hero-example { display: none; font-weight: 700; color: #fff; min-height: 44px; align-items: center; }
.scan-card { width: min(320px, 100%); background: var(--bg); color: var(--ink); border-radius: 12px; padding: 22px; display: grid; gap: 14px; box-shadow: 0 30px 60px rgba(0, 0, 0, .45); }
.scan-card .label { font-family: var(--display); font-weight: 900; font-size: 26px; line-height: 1; }
.scan-card .label span { color: var(--red); }
.qr { background: #fff; aspect-ratio: 1; width: 100%; display: grid; place-items: center; }
.qr svg { width: 100%; height: auto; display: block; }
.scan-card .hint { font-size: 13px; color: var(--ink-2); line-height: 1.4; }
.scan-card .hint a { font-weight: 700; color: var(--ink); display: inline-flex; align-items: center; min-height: 44px; }
@media (prefers-reduced-motion: no-preference) {
  .scan-card { animation: lift .7s .15s cubic-bezier(.2, .8, .2, 1) both; }
  @keyframes lift { from { transform: translateY(18px); } to { transform: none; } }
}
/* Tablet (600 to 1000px): the desktop layout, words left and the card right,
   with a shorter photo so the stats banner stays close. */
@media (min-width: 600px) and (max-width: 1000px) {
  .hero .wrap { grid-template-columns: 1fr 1fr; gap: 28px; padding-block: 36px 40px; }
  .hero h1 { font-size: clamp(36px, 5.6vw, 52px); }
  .hero .lede { font-size: 18px; }
  /* The card sets the height; the photo sits behind it at top right. */
  .hero-visual { padding: 36px 0 0; }
  .responder { position: absolute; top: 0; right: 0; width: 68%; aspect-ratio: 4 / 5; }
  .hero-visual .scan-card { position: relative; z-index: 1; width: clamp(164px, 21vw, 200px); padding: 14px; }
  .hero-visual .scan-card .label { font-size: 20px; }
}
/* Desktop (above 1000px): the whole scene. The wide photo fills the right
   column so the paramedic, the phone, the QR code on it and the ambulance all
   show; the scan card hangs off its lower left corner, over the left edge of
   the photo (trees, the back of the ambulance, the paramedic's back), never
   the paramedic's face, the phones or the QR code. */
@media (min-width: 1001px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 40px; padding-block: 44px 48px; }
  .hero-visual { justify-self: stretch; width: 100%; padding: 0 0 132px 0; }
  .responder { width: 100%; margin: 0; aspect-ratio: 16 / 9; }
  .responder img { object-position: 60% 50%; }
  .hero-visual .scan-card { left: -28px; bottom: 0; width: 196px; padding: 14px; gap: 8px; }
  .hero-visual .scan-card .label { font-size: 20px; }
}
@media (min-width: 1001px) and (max-width: 1199px) {
  .hero-visual .scan-card { width: 170px; padding: 12px; }
  .hero-visual .scan-card .label { font-size: 18px; }
}
@media (max-width: 599px) {
  .hero { background-position: 70% 30%; }
  .hero::before { background: linear-gradient(180deg, rgba(10, 12, 15, .55) 0%, rgba(10, 12, 15, .88) 70%); }
  .hero .wrap { grid-template-columns: 1fr; gap: 24px; padding-block: 32px 36px; }
  .hero-visual { justify-self: stretch; width: 100%; padding-bottom: 0; }
  .hero-visual .scan-card { display: none; }
  .responder { width: 100%; aspect-ratio: 16 / 9; }
  .hero-example { display: inline-flex; }
}

/* Stats banner: a tinted band, three side by side, stacked on phones. Nothing
   moves. The numbers, their lines and the sources each share a row across the
   band, so they line up; each source sits small at the bottom right. */
.stats { background: #eceef1; border-top: 4px solid var(--red); }
.stats .wrap { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto 1fr auto; }
.stat { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 8px; padding: 30px 28px 14px; border-left: 1px solid #d3d6db; min-width: 0; }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat:last-child { padding-right: 0; }
.stat b { font-family: var(--display); font-weight: 900; font-size: clamp(36px, 3.6vw, 46px); line-height: 1; letter-spacing: -0.02em; color: var(--red); white-space: nowrap; align-self: end; }
.stat p { font-size: 17px; font-weight: 600; max-width: 30ch; align-self: start; }
.stat .src { font-size: 12px; line-height: 1.35; color: var(--ink-2); min-height: 44px; display: inline-flex; align-items: flex-end; justify-self: end; align-self: end; text-align: right; max-width: 34ch; padding-bottom: 4px; }
@media (max-width: 760px) {
  .stats .wrap { grid-template-columns: 1fr; grid-template-rows: none; }
  .stat, .stat:first-child, .stat:last-child { grid-row: auto; grid-template-rows: none; border-left: 0; border-top: 1px solid #d3d6db; padding: 22px 0 8px; }
  .stat:first-child { border-top: 0; }
}

section.block .wrap { padding-block: 88px; }
.sec-head { display: grid; gap: 14px; max-width: 720px; margin-bottom: 52px; }
.sec-head h2 { font-size: clamp(34px, 4.4vw, 54px); font-weight: 900; }
.sec-head p { font-size: 19px; color: var(--ink-2); max-width: 56ch; }
.sec-head.center { margin-inline: auto; text-align: center; justify-items: center; }

/* Physician band */
.doc { border-bottom: 1px solid var(--line); }
.doc .wrap { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: center; padding-block: 80px; }
.doc h2 { font-size: clamp(32px, 4.2vw, 50px); font-weight: 900; }
.doc p { font-size: 18.5px; color: var(--ink-2); max-width: 52ch; }
.doc .copy { display: grid; gap: 16px; min-width: 0; }
.doc .badge { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; }
.doc .badge i { font-style: normal; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-family: var(--display); font-weight: 900; font-size: 13px; flex: none; }
.screened { border: 1.5px solid var(--line); border-radius: 12px; overflow: hidden; }
.screened div { display: flex; justify-content: space-between; gap: 12px; padding: 14px 18px; border-top: 1px solid var(--line); font-weight: 700; }
.screened div:first-child { border-top: 0; background: var(--soft); font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); font-weight: 600; }
.screened span { font-weight: 500; color: var(--ink-2); font-size: 14.5px; text-align: right; }
@media (max-width: 860px) { .doc .wrap { grid-template-columns: 1fr; gap: 36px; } }

/* Set it up once */
.once { border-bottom: 1px solid var(--line); }
.once .wrap { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; padding-block: 88px; }
.once-copy { display: grid; gap: 18px; min-width: 0; }
.once h2 { font-size: clamp(34px, 4.6vw, 56px); font-weight: 900; }
.once p { font-size: 19px; color: var(--ink-2); max-width: 50ch; }
.once-log { display: grid; position: relative; }
.once-log::before { content: ""; position: absolute; left: 6px; top: 0; bottom: 0; width: 3px; background: var(--ink); }
.once-log div { display: grid; grid-template-columns: 70px 1fr; gap: 2px 16px; padding: 14px 0 14px 32px; position: relative; }
.once-log div::before { content: ""; position: absolute; left: 0; top: 18px; width: 15px; height: 15px; border-radius: 50%; background: var(--bg); border: 3px solid var(--ink); }
.once-log small { grid-row: span 2; font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--ink-2); padding-top: 3px; }
.once-log b { font-size: 17px; }
.once-log span { font-size: 14.5px; color: var(--ink-2); }
.once-log .same::before { background: var(--red); border-color: var(--red); }
.once-log .same b { color: var(--red); }
@media (max-width: 860px) { .once .wrap { grid-template-columns: 1fr; gap: 40px; } }

/* Responder example */
.ems .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.ems-left { display: grid; gap: 36px; min-width: 0; }
.ems-left .sec-head { margin-bottom: 0; }
.pers-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pers-grid div { border-top: 3px solid var(--ink); padding-top: 14px; display: grid; gap: 6px; align-content: start; }
.pers-grid b { font-family: var(--display); font-size: 19px; font-weight: 800; }
.pers-grid span { color: var(--ink-2); font-size: 15.5px; }
@media (max-width: 520px) { .pers-grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .ems .wrap { grid-template-columns: 1fr; gap: 48px; } }

/* Phone picture: normal phone proportions (about 9 by 19.5); the screen scrolls inside, with a fade showing there is more. */
.phone-col { display: grid; justify-items: center; gap: 14px; min-width: 0; }
.phone { position: relative; width: min(370px, 100%); aspect-ratio: 9 / 19.5; border: 12px solid var(--ink); border-radius: 44px; background: var(--bg); overflow: hidden; box-shadow: 0 30px 60px rgba(13, 15, 18, .18); display: flex; flex-direction: column; }
.phone::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 85%); pointer-events: none; border-radius: 0 0 32px 32px; }
.phone-bar { display: flex; justify-content: space-between; font-family: var(--display); font-weight: 700; font-size: 13px; padding: 10px 22px 6px; flex: none; }
.url { margin: 4px 14px 6px; background: var(--soft); border-radius: 8px; font-size: 12px; text-align: center; padding: 6px; color: var(--ink-2); font-family: var(--mono); flex: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.phone-screen { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.phone-screen:focus-visible { outline-offset: -3px; }
.phone iframe { flex: 1; min-height: 0; width: 100%; border: 0; display: block; background: #fff; }
.phone-cap { font-size: 13px; color: var(--ink-2); text-align: center; max-width: 36ch; }
.rec { padding: 8px 18px 56px; display: grid; gap: 14px; }
.rec-alert { background: var(--red); color: #fff; font-family: var(--display); font-weight: 900; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; padding: 8px 12px; border-radius: 6px; }
/* The example tag sits above the red banner, so the banner stays whole. */
.rec-tag { justify-self: end; margin-bottom: -8px; font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); border: 1px solid var(--line); border-radius: 4px; padding: 2px 6px; }
.rec-name { display: grid; gap: 4px; padding-bottom: 12px; border-bottom: 2px solid var(--ink); }
.rec-name b { font-family: var(--display); font-weight: 900; font-size: 34px; line-height: 1; letter-spacing: -0.02em; }
.rec-name span { font-weight: 600; font-size: 15px; color: var(--ink-2); }
.rec .verified { font-size: 12.5px; font-weight: 700; color: var(--ink); background: var(--soft); border-radius: 6px; padding: 6px 10px; margin-top: -4px; }
.vitals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.vitals div { border: 2px solid var(--ink); border-radius: 8px; padding: 6px 8px; display: grid; }
.vitals small, .rec-sec small { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.vitals b { font-family: var(--display); font-weight: 900; font-size: 20px; }
.rec-sec { display: grid; gap: 6px; }
.rec-sec.allergy { border: 2.5px solid var(--red); border-radius: 8px; padding: 10px 12px; }
.rec-sec.allergy small { color: var(--red); }
.rec-sec ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rec-sec li { font-weight: 700; font-size: 16px; line-height: 1.3; }
.rec-sec li + li { margin-top: 0; }
.rec-sec li span { font-weight: 500; color: var(--ink-2); font-size: 14px; }
.rec-sec li .nm { font-weight: 700; font-size: 16px; color: var(--ink); }
.rec-sec.allergy li .nm { color: var(--red-ink); }
.rec details summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; justify-content: flex-start; align-content: center; gap: 6px; row-gap: 0; align-items: baseline; min-height: 44px; }
.rec details summary::-webkit-details-marker { display: none; }
.rec details summary::after { content: "\203A"; order: 2; margin-left: auto; font-weight: 900; color: var(--ink-2); transition: transform .15s; }
.rec details[open] summary::after { transform: rotate(90deg); }
.rec .allergy details summary::after { color: var(--red); }
.rec details summary .dt { order: 3; flex-basis: 100%; font-family: var(--mono); font-size: 11.5px; font-weight: 500; color: var(--ink-2); margin-top: 1px; }
.rec details .more { font-weight: 500; font-size: 13.5px; color: var(--ink-2); line-height: 1.4; margin: 4px 0 6px; padding-left: 10px; border-left: 2px solid var(--line); }
.contact { display: flex; justify-content: space-between; align-items: center; gap: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.contact b { display: block; font-size: 15px; }
.contact span { font-size: 13px; color: var(--ink-2); font-family: var(--mono); }
.contact .call { background: var(--ink); color: #fff; font-family: var(--display); font-weight: 800; font-size: 13px; padding: 8px 12px; border-radius: 6px; white-space: nowrap; }
.rec-foot { font-size: 11.5px; color: var(--ink-2); text-align: center; font-family: var(--mono); }

/* Town notice */
.town { background: var(--ink); color: #fff; }
.town .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding-block: 96px; }
.town img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; display: block; }
.town-copy { display: grid; gap: 22px; min-width: 0; }
.town h2 { font-size: clamp(34px, 4.4vw, 54px); font-weight: 900; }
.town p { color: #c9ccd1; font-size: 19px; max-width: 46ch; }
.town-form { display: grid; gap: 14px; border-top: 1px solid #2d3138; padding-top: 20px; }
.town-form h3 { font-size: 22px; font-weight: 800; }
.town-fields { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; }
.town-form .f2 { color: #fff; min-width: 0; }
.town-form select.field { appearance: auto; }
.town-form .err { color: #ff9b95; }
.town-form .err:empty { display: none; }
.town-thanks { font-family: var(--display); font-weight: 800; font-size: 22px; border-top: 1px solid #2d3138; padding-top: 20px; }
.town-thanks:focus { outline: none; }
@media (max-width: 480px) { .town-fields { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .town .wrap { grid-template-columns: 1fr; gap: 40px; } }

/* Setup options: Do It Yourself and Ready Together side by side, stacked on phones.
   The rows line up across the two cards (title, price, list, button); the
   email line under "Request a call" has a row of its own, so both buttons sit level. */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto 1fr auto auto; column-gap: 20px; max-width: 980px; margin-inline: auto; }
.plan { border: 1.5px solid var(--line); border-radius: 12px; padding: 30px; display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 16px; align-content: start; min-width: 0; }
.plan.dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.plan h3 { font-size: 28px; font-weight: 900; }
.plan .amt { font-family: var(--display); font-weight: 900; font-size: 44px; line-height: 1; align-self: start; }
.plan .amt small { font-size: 15px; font-weight: 600; color: #b9bec5; }
.plan ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; align-content: start; }
.plan li { padding-left: 26px; position: relative; font-size: 15.5px; }
.plan li::before { content: "\2713"; position: absolute; left: 0; color: var(--red); font-weight: 900; }
.plan.dark li::before { color: #ff6a60; }
.plan .btn { justify-self: start; align-self: end; }
.plan.dark .btn-ghost { background: #fff; color: var(--ink); border-color: #fff; }
.plan.dark .btn-ghost:hover { background: transparent; color: #fff; }
.plan-ask { display: contents; }
.plan-mail { margin-top: -8px; font-size: 14px; color: #c9ccd1; user-select: all; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .plans { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 20px; }
  .plan { grid-row: auto; grid-template-rows: none; }
}

/* How it works */
.how { background: var(--soft); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.step { display: grid; gap: 12px; align-content: start; border-top: 3px solid var(--ink); padding-top: 20px; }
.step .n { font-family: var(--display); font-weight: 900; font-size: 52px; line-height: .9; color: var(--red); }
.step h3 { font-size: 25px; font-weight: 800; }
.step p { color: var(--ink-2); }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; gap: 32px; } }

/* FAQ */
.faq-list { display: grid; border-top: 2px solid var(--ink); max-width: 860px; }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 44px; padding: 18px 0; font-family: var(--display); font-weight: 800; font-size: 20px; letter-spacing: -0.01em; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; font-size: 26px; line-height: 1; color: var(--red); flex: none; }
.faq-list details[open] summary::after { content: "\2212"; }
.faq-list .a { padding: 0 0 22px; color: var(--ink-2); font-size: 16.5px; max-width: 68ch; display: grid; gap: 10px; }
.faq-list .a b { color: var(--ink); }

/* Closing call to action */
.cta .wrap { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: center; padding-block: 104px; }
.cta h2 { font-size: clamp(38px, 5vw, 64px); font-weight: 900; }
.cta p { color: var(--ink-2); font-size: 19px; margin-top: 16px; max-width: 44ch; }
.signup { display: grid; gap: 12px; justify-items: start; }
.signup .fine { font-size: 13px; color: var(--ink-2); }
@media (max-width: 860px) { .cta .wrap { grid-template-columns: 1fr; } }

/* Footer */
.site-foot { border-top: 1px solid var(--line); background: var(--bg); }
.foot-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-block: 64px 48px; }
.foot-brand { display: grid; gap: 14px; align-content: start; }
.foot-brand p { font-size: 14.5px; color: var(--ink-2); max-width: 32ch; }
.foot-col { display: grid; gap: 0; align-content: start; }
.foot-col h2 { margin: 0 0 4px; font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); line-height: 1.5; }
.foot-col a { font-size: 14.5px; color: var(--ink-2); text-decoration: none; min-height: 44px; display: flex; align-items: center; }
.foot-col a:hover { color: var(--ink); text-decoration: underline; }
.foot-911 { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-block: 18px; font-size: 14px; color: var(--ink); display: flex; gap: 10px; align-items: center; }
.foot-911 b { background: var(--red); color: #fff; font-family: var(--display); font-weight: 900; padding: 3px 8px; border-radius: 4px; font-size: 13px; flex: none; }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-block: 22px 32px; font-size: 13px; color: var(--ink-2); }
.foot-bottom a { color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; vertical-align: middle; }
.foot-bottom span { line-height: 1.9; }
@media (max-width: 900px) { .foot-top { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }

/* ===== Setup ===== */
.su-bar { position: sticky; top: 0; background: var(--bg); border-bottom: 1px solid var(--line); z-index: 2; }
.su-bar .wrap { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-block: 10px; }
.su-bar a.exit { font-size: 14px; font-weight: 700; color: var(--ink-2); min-height: 44px; display: inline-flex; align-items: center; }
.progress { height: 4px; background: var(--line); }
.progress i { display: block; height: 100%; width: 0; background: var(--red); transition: width .4s; }
.su-inner { max-width: 760px; margin: 0 auto; padding: 32px max(20px, env(safe-area-inset-right, 0px)) 120px max(20px, env(safe-area-inset-left, 0px)); }
.scr { display: grid; gap: 26px; }
.scr h1 { font-size: clamp(32px, 4.6vw, 48px); font-weight: 900; }
.scr h1 em { font-style: normal; color: var(--red); }
.scr h1:focus { outline: none; }
.lead { font-size: 19px; color: var(--ink-2); }
.back { font: inherit; font-weight: 700; font-size: 15px; background: none; border: 0; color: var(--ink-2); cursor: pointer; padding: 0 8px 0 0; min-height: 44px; justify-self: start; text-decoration: none; display: inline-flex; align-items: center; }
.back:hover { color: var(--ink); }
.ack { font-weight: 700; font-size: 15px; color: var(--ink); display: flex; gap: 8px; align-items: center; }
.ack::before { content: "\2713"; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: 12px; flex: none; }
.opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.opt { position: relative; font: inherit; font-weight: 700; font-size: 17px; text-align: left; background: var(--bg); color: var(--ink); border: 2px solid var(--line); border-radius: 10px; padding: 18px; min-height: 44px; cursor: pointer; }
.opt small { display: block; font-weight: 500; color: var(--ink-2); font-size: 13.5px; }
.opt:hover { border-color: var(--ink); }
.opt.sel { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); padding-right: 48px; }
.opt.sel::after { content: "\2713"; position: absolute; top: 12px; right: 14px; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: 12px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.act { display: grid; gap: 16px; max-width: 560px; }
.f2 { display: grid; gap: 6px; font-weight: 700; font-size: 15px; }
.f2 .toast { font-weight: 500; }
.field { font: inherit; font-size: 16px; padding: 13px 14px; min-height: 48px; border: 1.5px solid #c9ccd1; border-radius: 8px; width: 100%; background: #fff; color: var(--ink); }
textarea.field { min-height: 96px; resize: vertical; }
.field.code { font-family: var(--mono); font-size: 24px; letter-spacing: .3em; max-width: 260px; }
.check { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; font-size: 15.5px; cursor: pointer; min-height: 44px; padding-block: 8px; }
.check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--ink); }
.check a { font-weight: 700; color: var(--ink); }
.legal-links { display: flex; gap: 20px; margin: -8px 0 0 34px; font-size: 15px; }
.legal-links a { font-weight: 700; color: var(--ink); min-height: 44px; display: inline-flex; align-items: center; }
.err { color: var(--red-ink); font-weight: 700; font-size: 15px; }
.note { border-left: 3px solid var(--ink); padding: 4px 0 4px 16px; color: var(--ink-2); font-size: 15.5px; }
.box { border: 1.5px solid var(--line); border-radius: 12px; padding: 22px; display: grid; gap: 12px; align-content: start; min-width: 0; }
.box h2 { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
.box.helpful { border-style: dashed; }
.keep { display: grid; gap: 10px; }
.keep .ln { display: flex; gap: 10px; align-items: start; font-size: 15.5px; }
.keep .ln i { font-style: normal; font-weight: 900; color: var(--red); }
.textnum { font-family: var(--mono); font-weight: 600; color: var(--ink); background: var(--soft); padding: 1px 6px; border-radius: 4px; white-space: nowrap; }
/* The Cloudflare check: hidden unless Cloudflare needs to ask something
   (interaction only); when it shows, it is compact and sits to the right of
   the button. */
.send-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 16px; }
.turnstile:empty { display: none; }

/* Caspia's words */
.thread { display: grid; gap: 14px; }
.msg { max-width: 88%; padding: 14px 16px; border-radius: 14px; font-size: 16.5px; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; }
.msg.bot { background: var(--soft); border-top-left-radius: 4px; justify-self: start; }
.msg.bot .who { display: block; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--red); margin-bottom: 4px; white-space: normal; }
.msg.me { background: var(--ink); color: #fff; border-top-right-radius: 4px; justify-self: end; }

/* Apple Health ways */
.ways { display: grid; gap: 14px; }
.way { border: 1.5px solid var(--line); border-radius: 12px; padding: 18px; display: grid; gap: 12px; }
.way b { font-family: var(--display); font-weight: 800; font-size: 18px; }
.way-link { display: grid; grid-template-columns: 160px 1fr; gap: 16px; align-items: center; }
.way-link .qr { width: 160px; border: 1.5px solid var(--line); border-radius: 8px; padding: 6px; }
@media (max-width: 480px) { .way-link { grid-template-columns: 1fr; } }

/* Waiting */
.fact { border: 2px solid var(--ink); border-radius: 12px; padding: 18px; display: grid; gap: 12px; }
.fact-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.timer { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.status { display: grid; gap: 6px; font-size: 15px; min-width: 0; }
.status div { display: flex; gap: 10px; align-items: center; color: var(--ink-2); }
.status div.on { color: var(--ink); font-weight: 700; }
.status div::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #c9ccd1; flex: none; }
.status div.on::before { background: var(--ink); border-color: var(--ink); }
.status div.now::before { border-color: var(--red); border-top-color: transparent; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.fact-card { margin: 0; display: grid; grid-template-columns: 1fr 1.1fr; gap: 18px; align-items: center; min-height: 190px; }
.fact-card.noimg { grid-template-columns: 1fr; min-height: 0; }
.fact-card.noimg .fact-img { display: none; }
.fact-card.noimg .yr { font-size: 40px; }
.fact-img { aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: var(--soft); display: grid; place-items: center; }
.fact-img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.fact-img.svg { background: #fff; border: 1.5px solid var(--line); }
.fact-img.svg img { width: 62%; height: auto; object-fit: contain; filter: none; }
.fact-card figcaption { display: grid; gap: 6px; min-width: 0; }
.fact .yr { font-family: var(--display); font-weight: 900; font-size: 30px; line-height: 1; }
.fact .ft { font-size: 16.5px; line-height: 1.45; }
.fact .cr { font-size: 11.5px; color: var(--ink-2); }
.fact-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.dashes { display: flex; gap: 5px; flex-wrap: wrap; }
.dashes i { width: 18px; height: 3px; border-radius: 2px; background: var(--line); }
.dashes i.on { background: var(--ink); }
@media (max-width: 560px) { .fact-card { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: no-preference) { .fact-card.anim { animation: fadein .5s ease both; } @keyframes fadein { from { opacity: .15; transform: translateY(6px); } to { opacity: 1; transform: none; } } }
@media (prefers-reduced-motion: reduce) { .status div.now::before { animation: none; } }

/* Preview */
.pv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.pv .phone { width: 100%; max-width: 370px; justify-self: center; }
.pv-side { display: grid; gap: 16px; position: sticky; top: 80px; min-width: 0; }
.done-grid { display: grid; gap: 20px; }
@media (max-width: 760px) { .pv { grid-template-columns: 1fr; } .pv-side { position: static; } }
.slot { display: grid; gap: 16px; }