/*
  For Care Homes — marketing site.

  The palette is the product's own (plum, cream, mint from the app's theme
  tokens) rather than the violet-and-coral of the original one-page landing.
  That page predates the rebrand; every screenshot on this site is plum, and a
  wrapper in a different accent would read as a different company's site.
*/
:root {
  --cream: #fbf9f6;
  --paper: #ffffff;
  --paper-soft: #f4f0ea;
  --ink: #1f1240;
  --ink-soft: #5f5872;
  --ink-faint: #8b8499;
  --line: #e6e0d6;
  --line-strong: #d8d0c2;
  --brand: #3d2680;
  --brand-hover: #55379f;
  --brand-soft: #e8e0f9;
  --brand-ink: #3d2680;
  --mint: #1cbb97;
  --mint-soft: #d5f3ea;
  --mint-ink: #0e7a62;
  --warn: #8f5b08;
  --warn-soft: #fbf0dc;
  --danger: #b3271b;
  --danger-soft: #fbe9e7;
  --nav: #150c29;
  --nav-fg: #ffffff;
  --nav-muted: #cdbff0;
  --shadow-1: 0 1px 2px rgba(31, 18, 64, .05);
  --shadow-2: 0 14px 34px -16px rgba(31, 18, 64, .22);
  --shadow-3: 0 30px 70px -28px rgba(61, 38, 128, .38);
  --radius: 16px;
  --serif: Fraunces, ui-serif, Georgia, "Iowan Old Style", Cambria, serif;
  --sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --wrap: 1140px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cream: #150c29; --paper: #22143f; --paper-soft: #2c1a5c;
    --ink: #f4f0ea; --ink-soft: #cdbff0; --ink-faint: #9d8fc4;
    --line: #3d2680; --line-strong: #55379f;
    --brand: #b9a4ee; --brand-hover: #cdbff0; --brand-soft: #2c1a5c; --brand-ink: #e8e0f9;
    --mint: #1cbb97; --mint-soft: #123f36; --mint-ink: #6fe0c1;
    --warn: #e8b45e; --warn-soft: #3a2a10;
    --danger: #f3a49b; --danger-soft: #3d1a16;
    --nav: #0d0719; --shadow-2: 0 14px 34px -16px rgba(0,0,0,.6); --shadow-3: 0 30px 70px -28px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"] {
  --cream: #150c29; --paper: #22143f; --paper-soft: #2c1a5c;
  --ink: #f4f0ea; --ink-soft: #cdbff0; --ink-faint: #9d8fc4;
  --line: #3d2680; --line-strong: #55379f;
  --brand: #b9a4ee; --brand-hover: #cdbff0; --brand-soft: #2c1a5c; --brand-ink: #e8e0f9;
  --mint: #1cbb97; --mint-soft: #123f36; --mint-ink: #6fe0c1;
  --warn: #e8b45e; --warn-soft: #3a2a10;
  --danger: #f3a49b; --danger-soft: #3d1a16;
  --nav: #0d0719; --shadow-2: 0 14px 34px -16px rgba(0,0,0,.6); --shadow-3: 0 30px 70px -28px rgba(0,0,0,.8);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

body {
  margin: 0; background: var(--cream); color: var(--ink);
  font-family: var(--sans); font-size: 17px; line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
img { max-width: 100%; height: auto; }
a { color: var(--brand); text-decoration-color: color-mix(in srgb, var(--brand) 35%, transparent); text-underline-offset: 3px; }
a:hover { color: var(--brand-hover); }
:where(a, button, input, summary):focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 6px; }

h1, h2, h3 { font-family: var(--serif); font-weight: 700; letter-spacing: -.02em; line-height: 1.08; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(38px, 5.6vw, 62px); }
h2 { font-size: clamp(29px, 3.6vw, 42px); }
h3 { font-size: 21px; letter-spacing: -.01em; line-height: 1.25; }
p { margin: 0 0 1rem; }
.lede { font-size: clamp(17px, 1.6vw, 20px); color: var(--ink-soft); max-width: 64ch; }
.eyebrow { font-size: 12.5px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--mint-ink); margin: 0 0 12px; }

/* ── Chrome ── */
.topbar { background: var(--nav); color: var(--nav-fg); font-size: 13.5px; }
.topbar .wrap { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; padding-block: 9px; text-align: center; }
.topbar strong { color: #fff; }
.topbar a { color: var(--nav-muted); }

header.site { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--cream) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
header.site .wrap { display: flex; align-items: center; gap: 18px; padding-block: 18px; }
/* The logo is an SVG lockup, not type — the header uses the compact mark
   (wordmark + pulse, no strapline, which is unreadable at 34px) and swaps
   colourway on theme; the footer ground is always dark, so it always takes
   the on-dark lockup and can afford the full strapline. */
/* Sized by WIDTH, because the brand guideline's minimums are widths:
   compact lockup 120px, primary 180px. The header takes the compact lockup
   (wordmark + beat, descriptor dropped) at 132px — comfortably over its floor
   and still leaving the beat well above the 1.25px rule weight. The footer
   ground is always dark, so it takes the full primary lockup with the
   descriptor, at 232px. */
.brand { display: inline-flex; align-items: center; text-decoration: none; flex: 0 0 auto; }
.brand picture, .brand img { display: block; }
.brand img { width: 132px; height: auto; }
@media (max-width: 520px) { .brand img { width: 122px; } }
.footer-brand img { width: 232px; }
@media (max-width: 520px) { .footer-brand img { width: 190px; } }
nav.main { margin-left: auto; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
nav.main a { padding: 8px 12px; border-radius: 9px; font-size: 15px; font-weight: 600; color: var(--ink-soft); text-decoration: none; }
nav.main a:hover { background: var(--paper-soft); color: var(--ink); }
nav.main a[aria-current="page"] { color: var(--brand-ink); background: var(--brand-soft); }
@media (max-width: 900px) { nav.main { width: 100%; margin-left: 0; justify-content: flex-start; } header.site .wrap { flex-wrap: wrap; } }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border-radius: 11px; font-weight: 700; font-size: 15.5px; text-decoration: none; border: 1px solid transparent; cursor: pointer; }
.btn-primary { background: var(--brand); color: #fff; box-shadow: var(--shadow-2); }
.btn-primary:hover { background: var(--brand-hover); color: #fff; }
:root[data-theme="dark"] .btn-primary, :root:not([data-theme="light"]) .btn-primary { color: #150c29; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .btn-primary { color: #fff; } }
.btn-ghost { border-color: var(--line-strong); color: var(--ink); background: var(--paper); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand-ink); }

/* ── Sections ── */
section { padding-block: clamp(56px, 7vw, 96px); }
section.tight { padding-block: clamp(40px, 5vw, 64px); }
.center { text-align: center; margin-inline: auto; }
.center .lede { margin-inline: auto; }

.hero { padding-top: clamp(44px, 6vw, 76px); padding-bottom: clamp(40px, 5vw, 64px); }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }
.hero ul.ticks { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 9px; }
.hero ul.ticks li { position: relative; padding-left: 27px; color: var(--ink-soft); font-size: 15.5px; }
.hero ul.ticks li::before { content: "✓"; position: absolute; left: 0; top: -1px; color: var(--mint-ink); font-weight: 800; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.fineprint { margin-top: 12px; font-size: 13.5px; color: var(--ink-faint); }

/* ── Cards & grids ── */
.grid { display: grid; gap: 18px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .g3, .g4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }

.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-1); }
.card h3 { margin-bottom: 8px; font-family: var(--sans); font-size: 17.5px; font-weight: 800; letter-spacing: -.01em; }
.card p { color: var(--ink-soft); font-size: 15.5px; margin: 0; }
.card .icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: var(--brand-soft); color: var(--brand-ink); font-size: 19px; margin-bottom: 14px; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 4vw, 56px); align-items: center; }
.split.rev > figure { order: 2; }
@media (max-width: 900px) { .split, .split.rev { grid-template-columns: 1fr; } .split.rev > figure { order: 0; } }

figure.shot { margin: 0; }
figure.shot img { display: block; width: 100%; border-radius: 14px; border: 1px solid var(--line); box-shadow: var(--shadow-3); background: var(--paper-soft); }
figure.shot.phone img { max-width: 300px; border-radius: 26px; }
figure.shot figcaption { margin-top: 10px; font-size: 13px; color: var(--ink-faint); }
.phones { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }
.phones figure { flex: 0 1 232px; margin: 0; }
.phones img { width: 100%; border-radius: 24px; border: 1px solid var(--line); box-shadow: var(--shadow-3); }
.phones figcaption { margin-top: 9px; font-size: 12.5px; color: var(--ink-faint); text-align: center; }

ul.checks { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
ul.checks li { position: relative; padding-left: 28px; color: var(--ink-soft); }
ul.checks li::before { content: "✓"; position: absolute; left: 0; color: var(--mint-ink); font-weight: 800; }
ul.checks li strong { color: var(--ink); }

.band { background: var(--paper); border-block: 1px solid var(--line); }
.band-brand { background: var(--brand-soft); border-block: 1px solid color-mix(in srgb, var(--brand) 22%, transparent); }

.stat { text-align: center; }
.stat b { display: block; font-family: var(--serif); font-size: 40px; line-height: 1; color: var(--ink); }
.stat span { font-size: 14px; color: var(--ink-soft); }

.price { background: var(--paper); border: 1px solid var(--line-strong); border-radius: 22px; padding: 34px; box-shadow: var(--shadow-3); max-width: 560px; margin-inline: auto; }
.price .amount { font-family: var(--serif); font-size: 62px; line-height: 1; }
.price .per { color: var(--ink-soft); font-size: 17px; }
.badge { display: inline-block; padding: 5px 12px; border-radius: 999px; background: var(--warn-soft); color: var(--warn); font-size: 12.5px; font-weight: 800; margin-bottom: 14px; }

details.faq { border-bottom: 1px solid var(--line); padding: 4px 0; }
details.faq summary { cursor: pointer; padding: 16px 0; font-weight: 700; font-size: 17px; list-style: none; display: flex; gap: 12px; align-items: baseline; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; margin-left: auto; color: var(--ink-faint); font-weight: 700; }
details.faq[open] summary::after { content: "–"; }
details.faq p { color: var(--ink-soft); margin: 0 0 16px; max-width: 72ch; }

/* ── Prose (blog, legal) ── */
.prose { max-width: 72ch; margin-inline: auto; }
.prose h2 { font-size: 28px; margin: 44px 0 12px; }
.prose h3 { font-size: 20px; margin: 30px 0 8px; font-family: var(--sans); font-weight: 800; }
.prose p, .prose li { color: var(--ink-soft); }
.prose li { margin-bottom: 8px; }
.prose strong { color: var(--ink); }
.prose blockquote { margin: 26px 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--mint); color: var(--ink-soft); font-size: 18px; }
.prose table { width: 100%; border-collapse: collapse; margin: 22px 0; font-size: 15px; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.prose th { font-weight: 800; color: var(--ink); }
.scroll-x { overflow-x: auto; }

.post-meta { font-size: 14px; color: var(--ink-faint); margin-bottom: 8px; }
.post-card { display: flex; flex-direction: column; gap: 8px; text-decoration: none; }
.post-card h3 { color: var(--ink); }
.post-card:hover h3 { color: var(--brand-ink); }
.tag { display: inline-block; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--mint-ink); }

/* ── Footer ── */
footer.site { background: var(--nav); color: var(--nav-muted); padding-block: 54px 34px; margin-top: 40px; }
footer.site a { color: var(--nav-muted); text-decoration: none; font-size: 15px; }
footer.site a:hover { color: #fff; text-decoration: underline; }
footer.site h4 { color: #fff; font-size: 13px; text-transform: uppercase; letter-spacing: .1em; margin: 0 0 14px; }
footer.site ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
footer.site .brand { color: #fff; }
footer.site .cols { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 30px; }
@media (max-width: 900px) { footer.site .cols { grid-template-columns: repeat(2, 1fr); } }
.legal { margin-top: 34px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14); font-size: 13.5px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; background: var(--paper); padding: 10px 16px; border-radius: 8px; z-index: 100; }

/* ── The round: three steps, in the order they happen ── */
.steps { counter-reset: step; display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }
.step-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.step-card .step-no {
  font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--mint-ink); display: block; margin-bottom: 10px;
}
.step-card h3 { font-family: var(--sans); font-size: 18px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 8px; }
.step-card p { color: var(--ink-soft); font-size: 15.5px; margin: 0; }

/* ── The five dose states ──
   These are the product's own clinical colours, byte-identical to the app's
   --state-* tokens. They are a walled-off system: no brand colour ever
   signals a clinical state, which is why mint appears nowhere in this block.
   Every row carries a colour, a word and a dot — remove any one and it still
   reads, on a cracked screen, in sunlight, or photocopied. */
.states { display: grid; gap: 12px; grid-template-columns: repeat(5, 1fr); }
@media (max-width: 980px) { .states { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .states { grid-template-columns: 1fr; } }
.state { border-radius: 14px; padding: 18px; border: 1px solid transparent; }
.state .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 8px; vertical-align: 1px; }
.state b { font-size: 15.5px; font-weight: 800; letter-spacing: -.01em; }
.state p { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.state-given   { background: #E6F2EA; border-color: #2A7A4B33; } .state-given b, .state-given .dot   { color: #2A7A4B; background-color: currentColor; }
.state-due     { background: #FBF0DC; border-color: #8F5B0833; } .state-due b, .state-due .dot       { color: #8F5B08; background-color: currentColor; }
.state-refused { background: #F9E8F0; border-color: #A32B6E33; } .state-refused b, .state-refused .dot { color: #A32B6E; background-color: currentColor; }
.state-missed  { background: #FBE9E7; border-color: #B3271B33; } .state-missed b, .state-missed .dot { color: #B3271B; background-color: currentColor; }
.state-na      { background: #EEF0F2; border-color: #5B647233; } .state-na b, .state-na .dot         { color: #5B6472; background-color: currentColor; }
.state b { background: none !important; }
.state p { color: #3f3a4a; }
.state-note { margin-top: 16px; font-size: 14px; color: var(--ink-soft); }