/* Elder Guard, every page. Calm and editorial: Merriweather Light for the big headlines, Inter for everything
   else; navy bookends (header, hero, final call to action, footer) and paper for reading; the Doorway arch as
   the one motif. Order: fonts, tokens, base, layout, shell (skip link, header, menu, footer), components,
   page blocks, dark scheme, motion, print, forced colours. Palette colours only; alpha tints of palette
   colours are allowed. Pages use the role tokens (--bg, --text, --accent ...), never the raw palette, so the
   dark scheme and the navy bands (.dark) swap cleanly. */

/* Fonts: self-hosted Latin subsets (Inter instanced to weights 400-600, Merriweather Light only), with
   metric-matched system fallbacks (capsize method) so text keeps its size and line boxes while they arrive. */
@font-face { font-family: Inter; font-weight: 400 600; font-display: swap; src: url(fonts/inter-latin.woff2) format("woff2"); }
@font-face { font-family: Merriweather; font-weight: 300; font-display: swap; src: url(fonts/merriweather-light-latin.woff2) format("woff2"); }
@font-face { font-family: "Inter Fallback"; src: local("Arial"), local("Liberation Sans"); size-adjust: 106.5%; ascent-override: 90.96%; descent-override: 22.65%; line-gap-override: 0%; }
@font-face { font-family: "Merriweather Fallback"; src: local("Georgia"), local("DejaVu Serif"); size-adjust: 93.46%; ascent-override: 105.29%; descent-override: 29.21%; line-gap-override: 0%; }

:root {
  color-scheme: light dark;
  /* Palette (the only colours on the site) */
  --navy: #0b1622; --slate: #172b3e; --forest: #185f43; --green: #17664a; --leaf: #64d8a2; --azure: #5cd0ff;
  --silver: #eef4f8; --mist: #a3b6c5; --paper: #eef3f6; --card: #f8fafb; --ink: #172b3e; --muted: #465a6d;
  /* Colour roles, light scheme: the dark-on-light family. The light-on-dark family lives in .dark below. */
  --bg: var(--paper); --bg-2: var(--card); --surface: var(--card);
  --heading: var(--navy); --text: var(--ink); --text-2: var(--muted);
  --accent: var(--forest); --link: var(--forest);
  --btn-bg: var(--forest); --btn-fg: #fff; --btn-bg-hover: var(--green);
  --tint: rgb(100 216 162 / .16);          /* chips: a leaf tint; forest text on it is 6.2:1 */
  --rule: rgb(70 90 109 / .35);            /* hairlines inside one surface */
  --edge: rgb(70 90 109 / .7);             /* edges that separate surfaces: 3.2:1 on paper */
  --focus: var(--navy); --focus-halo: var(--silver);
  --shadow-1: 0 1px 2px rgb(11 22 34 / .06); --shadow-2: 0 8px 24px rgb(11 22 34 / .08);
  /* Type: two modular scales (18px x 1.2 at 360px, 20px x 1.25 at 1240px), interpolated with clamp() */
  --serif: Merriweather, "Merriweather Fallback", Georgia, serif;
  --sans: Inter, "Inter Fallback", Arial, system-ui, sans-serif;
  --step--1: clamp(1rem, 0.9773rem + 0.1136vw, 1.0625rem);        /* 16-17  small print; nothing smaller */
  --step-0: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);        /* 18-20  body */
  --step-1: clamp(1.35rem, 1.2631rem + 0.3864vw, 1.5625rem);       /* 22-25  lead, h3 */
  --step-2: clamp(1.62rem, 1.4837rem + 0.6057vw, 1.9531rem);       /* 26-31  sans h2 (legal pages) */
  --step-3: clamp(2rem, 1.8195rem + 0.8025vw, 2.4414rem);          /* 32-39  h2 */
  --step-4: clamp(2.3328rem, 2.0387rem + 1.3072vw, 3.0518rem);     /* 37-49  h2 on Home, legal h1 */
  --step-5: clamp(2.7994rem, 2.384rem + 1.8461vw, 3.8147rem);      /* 45-61  page h1 */
  --display: clamp(2.799rem, 1.9939rem + 3.58vw, 4.768rem);        /* 45-76  Home hero only */
  --stat: clamp(2.25rem, 1.7386rem + 2.2727vw, 3.5rem);            /* 36-56  numbers (Inter) */
  --body-elder: clamp(1.25rem, 1.1989rem + 0.2273vw, 1.375rem);    /* 20-22  For Elders body */
  /* Space: multiples of the body step */
  --space-2xs: clamp(0.5625rem, 0.5369rem + 0.1136vw, 0.625rem);   /* 9-10 */
  --space-xs: clamp(0.8438rem, 0.8054rem + 0.1705vw, 0.9375rem);   /* 13.5-15 */
  --space-s: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);       /* 18-20 */
  --space-m: clamp(1.6875rem, 1.6108rem + 0.3409vw, 1.875rem);     /* 27-30 */
  --space-l: clamp(2.25rem, 2.1477rem + 0.4545vw, 2.5rem);         /* 36-40 */
  --space-xl: clamp(3.375rem, 3.2216rem + 0.6818vw, 3.75rem);      /* 54-60 */
  --space-2xl: clamp(4.5rem, 4.2955rem + 0.9091vw, 5rem);          /* 72-80 */
  --space-3xl: clamp(6.75rem, 6.4432rem + 1.3636vw, 7.5rem);       /* 108-120 */
  --gutter: clamp(1.125rem, 0.5625rem + 2.5vw, 2.5rem);            /* 18-40  side gutter */
  --section: clamp(3.375rem, 1.6875rem + 7.5vw, 7.5rem);           /* 54-120 section padding */
  --block-gap: clamp(2.25rem, 1.125rem + 5vw, 5rem);               /* 36-80  between blocks */
  --overlap: clamp(3rem, 6vw, 5.5rem);                             /* how far the hero phone reaches into the paper */
  --head-h: 4rem;
  /* Radii (one family) and easing */
  --radius-s: .5rem; --radius: .75rem; --radius-l: 1.5rem; --arch: 999px 999px var(--radius-l) var(--radius-l);
  --ease-in: cubic-bezier(.2, 0, 0, 1); --ease-out: cubic-bezier(.4, 0, 1, 1);
}

/* The light-on-dark family: header, hero, final call to action, footer. The two families never mix. */
.dark {
  --bg: var(--navy); --bg-2: var(--slate); --surface: var(--slate);
  --heading: var(--silver); --text: var(--silver); --text-2: var(--mist);
  --accent: var(--leaf); --link: var(--leaf);
  --btn-bg: var(--leaf); --btn-fg: var(--navy); --btn-bg-hover: rgb(100 216 162 / .85);
  --tint: rgb(100 216 162 / .12);
  --rule: rgb(163 182 197 / .25); --edge: rgb(163 182 197 / .55);
  --focus: var(--silver); --focus-halo: var(--navy);
  background: var(--bg); color: var(--text);
}

/* Base */
*, ::before, ::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--head-h) + var(--space-s)); scroll-padding-bottom: var(--space-2xl); }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 var(--step-0)/1.6 var(--sans); overflow-wrap: break-word; }
body.elder { font-size: var(--body-elder); }
img, svg { max-width: 100%; }
img { height: auto; }
::selection { background: var(--leaf); color: var(--navy); }
h1, h2, h3, h4 { margin: 0 0 var(--space-xs); color: var(--heading); text-wrap: balance; }
h1 { max-inline-size: 18em; font: 300 var(--step-5)/1.1 var(--serif); letter-spacing: -.01em; }
h2 { max-inline-size: 20em; font: 300 var(--step-3)/1.15 var(--serif); letter-spacing: -.01em; }
h3 { max-inline-size: 30em; font: 600 var(--step-1)/1.3 var(--sans); }
h4 { font: 600 var(--step-0)/1.3 var(--sans); }
* + h2 { margin-top: var(--space-xl); }
* + h3 { margin-top: var(--space-m); }
p { margin: 0 0 var(--space-s); text-wrap: pretty; }
p, li, dd, dt, figcaption, .measure { max-inline-size: 34em; }
ul, ol { margin: 0 0 var(--space-s); padding-left: 1.25em; }
li { margin-bottom: var(--space-2xs); }
li > ul, li > ol { margin-top: var(--space-2xs); margin-bottom: 0; }
b, strong { font-weight: 600; }
small { font-size: var(--step--1); }
hr { margin: var(--space-l) 0; border: 0; border-top: 1px solid var(--rule); }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; box-shadow: 0 0 0 3px var(--focus-halo); }
.num { font-variant-numeric: tabular-nums; }
.addr { font-feature-settings: "ss02"; overflow-wrap: anywhere; }   /* web addresses, phone numbers: I, l and 1 differ */
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.eyebrow { margin: 0 0 var(--space-xs); color: var(--accent); font-size: var(--step--1); font-weight: 600; }
.eyebrow + h2 { margin-top: 0; }                                  /* the eyebrow belongs to its heading */
.lead { font-size: var(--step-1); line-height: 1.5; }
.fine { font-size: var(--step--1); color: var(--text-2); }
.muted { color: var(--text-2); }
.limit { margin: var(--space-2xs) 0 0; font-size: var(--step--1); color: var(--text-2); }
.icon { flex: none; width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.mark { display: block; }
.sprite { position: absolute; }                                     /* the hidden SVG symbol sheet at the top of each page */
.spaced { margin-top: var(--space-l); }

/* Layout: one container, an asymmetric grid, a reading measure */
.wrap { width: min(100% - 2 * var(--gutter), 75rem); margin-inline: auto; }
.narrow { width: min(100% - 2 * var(--gutter), 44rem); margin-inline: auto; }
.grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-l); }
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-l) var(--space-xl); align-items: center; }
@media (min-width: 48rem) {
  .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .col-4 { grid-column: span 4; } .col-5 { grid-column: span 5; } .col-6 { grid-column: span 6; }
  .col-7 { grid-column: span 7; } .col-8 { grid-column: span 8; } .col-12 { grid-column: span 12; }
  .start-3 { grid-column-start: 3; }
  .split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .split-rev { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .split-rev > :first-child { order: 2; }
}
.sec { padding-block: var(--section); }
.sec-alt { background: var(--bg-2); border-block: 1px solid var(--rule); }
.sec-head { margin-bottom: var(--space-xl); }
.sec-head > :last-child { margin-bottom: 0; }
.stack > * + * { margin-top: var(--block-gap); }

/* Skip link */
.skip { position: absolute; top: var(--space-xs); left: var(--space-xs); z-index: 20; padding: .75rem 1rem; border-radius: var(--radius-s); background: var(--silver); color: var(--navy); font-weight: 500; text-decoration: none; transform: translateY(-200%); --focus: var(--silver); --focus-halo: var(--navy); }
.skip:focus { transform: none; }

/* Header: 64px, opaque navy, sticky. Wide: the lockup, five links, one button. Narrow: the mark, the button
   and a Menu disclosure (a native details element, so it works without JavaScript). */
.site-head { position: sticky; top: 0; z-index: 10; }
.site-head .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); min-height: var(--head-h); padding-block: .25rem; }
.brand { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; margin-right: auto; }
.brand img { display: block; width: 2.35rem; height: 2.25rem; object-fit: contain; }
@media (min-width: 40rem) { .brand img { width: 11.06rem; } }
.site-nav { display: none; }
.site-nav ul { display: flex; gap: var(--space-m); margin: 0; padding: 0; list-style: none; }
.site-nav li { margin: 0; max-inline-size: none; }
.site-nav a { display: inline-flex; white-space: nowrap; align-items: center; min-height: 2.75rem; padding-block: .25rem; border-bottom: 2px solid transparent; color: var(--text-2); font-weight: 500; text-decoration: none; }
.site-nav a:hover { color: var(--text); text-decoration: underline; text-underline-offset: .3em; }
.site-nav [aria-current="page"] { border-bottom-color: var(--accent); color: var(--text); }
.site-head .btn-head { min-height: 3rem; padding-inline: .875rem; background: transparent; border-color: var(--link); color: var(--link); }
.site-head .btn-head:hover { background: var(--tint); border-color: var(--link); color: var(--link); }
@media (max-width: 24rem) { .site-head .wrap { gap: .5rem; } .site-head .btn-head { padding-inline: .6rem; } .menu > summary { padding-inline: .5rem; } }
.menu > summary { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; padding: .25rem .75rem; border: 1px solid var(--edge); border-radius: var(--radius-s); color: var(--text); font-weight: 500; list-style: none; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary .icon { width: 1.25rem; height: 1.25rem; transition: transform .25s var(--ease-in); }
.menu[open] > summary .icon { transform: rotate(180deg); }
.menu nav { position: absolute; top: 100%; left: 0; right: 0; padding: 0 var(--gutter) var(--space-m); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--edge); background: var(--bg); box-shadow: var(--shadow-2); }
.menu ul { margin: 0; padding: 0; list-style: none; }
.menu li { margin: 0; max-inline-size: none; }
.menu nav a { display: flex; align-items: center; min-height: 3.5rem; padding-block: .5rem; border-bottom: 1px solid var(--rule); color: var(--text); font-size: var(--step-1); font-weight: 500; text-decoration: none; }
.menu nav a:hover { text-decoration: underline; }
.menu nav [aria-current="page"] { color: var(--accent); text-decoration: underline; text-underline-offset: .3em; }
@media (min-width: 72rem) {
  .site-head .wrap { gap: var(--space-m); }
  .site-nav { display: block; }
  .site-head .btn-head { padding-inline: 1.25rem; }
  .menu { display: none; }
}
@media (max-height: 36rem) { .site-head { position: static; } }

/* Footer: the lockup, page links, legal links, the company, one fine-print line */
.site-foot { padding-block: var(--space-2xl) var(--space-xl); font-size: var(--step--1); }
.foot-grid { display: grid; gap: var(--space-l); }
@media (min-width: 48rem) { .foot-grid { grid-template-columns: 1.5fr 1fr 1fr 1.5fr; } }
.foot-brand img { display: block; width: 11.06rem; height: 2.25rem; margin-bottom: var(--space-s); }
.foot-brand p { margin: 0; color: var(--text-2); }
.foot-title { margin: 0 0 var(--space-2xs); font-weight: 600; }
.site-foot ul { margin: 0; padding: 0; list-style: none; }
.site-foot li { margin: 0; }
.site-foot li a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--text); text-decoration: none; }
.site-foot li a:hover { text-decoration: underline; }
.site-foot li [aria-current="page"] { color: var(--accent); text-decoration: underline; text-underline-offset: .3em; }
.foot-co p { margin: 0; color: var(--text-2); }
.foot-co a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.foot-fine { grid-column: 1 / -1; margin: var(--space-s) 0 0; padding-top: var(--space-s); border-top: 1px solid var(--rule); color: var(--text-2); max-inline-size: none; }

/* Buttons and quiet links: one filled button per view, verb-first labels, 48px tall (56px on For Elders) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3rem; padding: .625rem 1.5rem; border: 1px solid var(--btn-bg); border-radius: var(--radius-s); background: var(--btn-bg); color: var(--btn-fg); font-weight: 500; line-height: 1.3; text-align: center; text-decoration: none; transition: background-color .15s var(--ease-in), border-color .15s var(--ease-in); }
.btn:hover { background: var(--btn-bg-hover); border-color: var(--btn-bg-hover); color: var(--btn-fg); text-decoration: underline; }
.btn-ghost { background: transparent; border-color: var(--link); color: var(--link); }
.btn-ghost:hover { background: var(--tint); border-color: var(--link); color: var(--link); }
.btn-big { min-height: 3.5rem; padding-inline: 1.75rem; }
.link-quiet { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; padding-block: .25rem; font-weight: 500; }
.link-quiet .icon { width: 1.25rem; height: 1.25rem; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-m); margin-top: var(--space-m); }
.offer { margin: var(--space-s) 0 0; font-size: var(--step-0); color: var(--text-2); }

/* Lists: hairline rows, icon-and-text columns, link lists, ticks, chips, footnote marks, sources */
.hairlines { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.hairlines > li { margin: 0; padding-block: var(--space-s); border-bottom: 1px solid var(--rule); max-inline-size: none; }
.hairlines h3 { margin: 0 0 var(--space-2xs); }
.hairlines p:last-child { margin-bottom: 0; }
.icon-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-l); margin: 0; padding: 0; list-style: none; }
@media (min-width: 40rem) { .icon-cols { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } }
.icon-cols > li { margin: 0; max-inline-size: none; }
.icon-row { display: flex; gap: var(--space-s); align-items: flex-start; }
.icon-row > .icon { margin-top: .2em; color: var(--accent); }
.icon-row > div { min-width: 0; }   /* lets a long word wrap at large text sizes instead of widening the page */
.icon-row h3 { margin-top: 0; }
.icon-row > div > :last-child { margin-bottom: 0; }
.linklist { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.linklist li { margin: 0; max-inline-size: none; }
.linklist a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); min-height: 3.5rem; padding-block: .5rem; border-bottom: 1px solid var(--rule); font-weight: 500; }
.linklist .icon { color: var(--accent); }
.ticks { margin: var(--space-s) 0; padding: 0; list-style: none; }
.ticks li { position: relative; padding-left: 2rem; }
.ticks li::before { content: ""; position: absolute; left: .3rem; top: .45em; width: .5rem; height: .9rem; border: solid var(--accent); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.chip { display: inline-block; padding: .2rem .75rem; border-radius: 999px; background: var(--tint); color: var(--accent); font-size: var(--step--1); font-weight: 600; }
.fn { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; min-height: 1.5rem; margin-left: .25rem; padding: 0 .35rem; border: 1px solid var(--edge); border-radius: var(--radius-s); font-size: var(--step--1); font-weight: 500; line-height: 1; text-decoration: none; vertical-align: text-bottom; }
.fn:hover { text-decoration: underline; }
.sources { margin: var(--space-l) 0 0; padding-left: 1.5rem; font-size: var(--step--1); color: var(--text-2); }
.sources li { max-inline-size: 48em; }
.sources a { display: inline-block; padding-block: .2rem; }

/* Cards: card on paper is 1.07:1, so a card always carries an edge */
.card { padding: var(--space-m); border: 1px solid var(--edge); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-1); }
.card > :last-child { margin-bottom: 0; }
.card h3 { margin-top: 0; }
.cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-m); margin: 0; padding: 0; list-style: none; }
.cards > li { margin: 0; max-inline-size: none; }
@media (min-width: 48rem) { .cards { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); } }

/* Pictures of the app: a cropped screen in a bordered frame, or a whole screen in a brandless CSS phone */
.shot { margin: 0; overflow: hidden; border: 1px solid var(--edge); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-1); max-inline-size: none; }
.shot img { display: block; width: 100%; height: auto; }
.shot figcaption { padding: var(--space-xs) var(--space-s); border-top: 1px solid var(--rule); font-size: var(--step--1); color: var(--text-2); }
.phone { width: min(100%, 20rem); margin: 0; padding: .625rem; border: 1px solid var(--edge); border-radius: 2.5rem; background: var(--navy); box-shadow: var(--shadow-2); max-inline-size: none; }
.phone img { display: block; width: 100%; height: auto; border-radius: 1.9rem; }
.phone figcaption { padding: var(--space-xs) var(--space-s) var(--space-2xs); color: var(--mist); font-size: var(--step--1); text-align: center; }
.phone-center { margin-inline: auto; }

/* Home hero: navy, split 7/5; the Elder's screen in a CSS phone inside a faint arch, reaching into the paper */
.hero .wrap { display: grid; gap: var(--space-l); padding-top: var(--space-xl); }
.hero h1 { font-size: var(--display); line-height: 1.05; margin-bottom: var(--space-s); }
.hero .lead { color: var(--text-2); margin-bottom: var(--space-s); }
.hero-copy { padding-bottom: var(--space-s); }
.hero-visual { position: relative; z-index: 2; width: min(100%, 22rem); margin: 0 auto calc(-1 * var(--overlap)); }
.arch { position: relative; padding: var(--space-l) var(--space-m) 0; border: 1.5px solid rgb(238 244 248 / .18); border-bottom: 0; border-radius: 999px 999px 0 0; overflow: hidden; }
.hero .phone { position: relative; width: 100%; padding-bottom: 0; border-bottom: 0; border-radius: 2.5rem 2.5rem 0 0; }
.hero .phone img { border-radius: 1.9rem 1.9rem 0 0; }
.hero + .sec { padding-top: calc(var(--section) + var(--overlap)); }
@media (min-width: 64rem) {
  .hero .wrap { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: var(--space-2xl); padding-top: var(--space-3xl); }
  .hero-copy { padding-bottom: var(--space-2xl); }
  .hero-visual { width: min(100%, 24rem); margin-inline: auto 0; }
}

/* Inner pages open with a short navy band */
.band-head .wrap { padding-block: var(--space-2xl) var(--space-xl); }
.band-head h1 { margin-bottom: var(--space-xs); }
.band-head .lead { margin: 0; color: var(--text-2); }
.band-head .lead + .actions { margin-top: var(--space-m); }

/* How it works: three steps with a tabular number, one sentence and a cropped screen */
.steps { display: grid; gap: var(--space-xl) var(--space-l); margin: 0; padding: 0; list-style: none; }
.step { position: relative; margin: 0; max-inline-size: none; }
.step-num { display: inline-grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: var(--space-s); border: 1px solid var(--accent); border-radius: 50%; background: var(--bg); color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }
.step h3 { margin: 0 0 var(--space-2xs); }
.step .shot { margin-top: var(--space-s); }
@media (min-width: 48rem) {
  .steps { position: relative; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps::before { content: ""; position: absolute; top: 1.5rem; left: 1.5rem; right: 1.5rem; border-top: 1px solid var(--accent); }
}

/* Two roles: a zig-zag of screen and text */
.role + .role { margin-top: var(--block-gap); }
.role .phone { margin-inline: auto; }

/* Statistics: a number, a dated caption with a footnote mark, and what the app does about it */
.stats { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-l); margin: 0; padding: 0; list-style: none; }
@media (min-width: 48rem) { .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.stat { margin: 0; padding-top: var(--space-s); border-top: 1px solid var(--edge); max-inline-size: none; }
.stat-num { display: block; margin-bottom: var(--space-2xs); color: var(--heading); font-size: var(--stat); font-weight: 600; line-height: 1.1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.stat p { margin-bottom: var(--space-xs); }
.stat-action { display: flex; gap: var(--space-xs); align-items: flex-start; margin: 0; font-weight: 500; }
.stat-action .icon { margin-top: .15em; color: var(--accent); }
.stat-action > span { min-width: 0; }

/* Pricing: one card, every term in body text, no strikethrough and no ribbon */
.plan { max-width: 38rem; margin-inline: auto; }
.plan .card { padding: var(--space-l); }
.price { margin: var(--space-xs) 0 var(--space-s); color: var(--heading); font-size: var(--stat); font-weight: 600; line-height: 1.1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.price small { font-size: var(--step-0); font-weight: 400; color: var(--text-2); }

/* Product Q&A: native details, rows at least 56px, a chevron drawn with borders (nothing for speech to read) */
.qa { border-top: 1px solid var(--rule); }
.qa details { border-bottom: 1px solid var(--rule); }
.qa summary { overflow-wrap: anywhere; display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); min-height: 3.5rem; padding: var(--space-xs) 0; color: var(--heading); font-size: var(--step-1); font-weight: 500; line-height: 1.35; list-style: none; cursor: pointer; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ""; flex: none; width: .7rem; height: .7rem; margin: 0 .5rem .35rem 0; border: solid var(--accent); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .25s var(--ease-in); }
.qa [open] > summary::after { transform: rotate(-135deg); margin-bottom: -.35rem; }
.qa summary:hover { color: var(--link); text-decoration: underline; text-underline-offset: .25em; }
.qa .body { padding: 0 0 var(--space-m); }
.qa .body > :last-child { margin-bottom: 0; }

/* Expanding lists (How-to guides): a "+" that turns into a minus; the sign is hidden from speech */
.plus { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.plus > li { margin: 0; max-inline-size: none; }
.plus > li, .plus > details { border-bottom: 1px solid var(--rule); }
.plus summary { overflow-wrap: anywhere; display: flex; align-items: baseline; gap: var(--space-s); min-height: 3.5rem; padding: var(--space-xs) 0; color: var(--heading); font-size: var(--step-1); font-weight: 500; line-height: 1.35; list-style: none; cursor: pointer; }
.plus summary::-webkit-details-marker { display: none; }
.plus summary::before { content: "+" / ""; flex: none; width: 1.25rem; color: var(--accent); font-size: 1.75rem; font-weight: 400; line-height: 1; text-align: center; }
.plus [open] > summary::before { content: "\2212" / ""; }
.plus summary:hover { color: var(--link); text-decoration: underline; text-underline-offset: .25em; }
.plus .body { padding: 0 0 var(--space-m) calc(1.25rem + var(--space-s)); }
.plus .body > :last-child { margin-bottom: 0; }

/* Final call to action: the Doorway, one line, one button */
.cta { text-align: center; }
.cta .wrap > * { margin-inline: auto; }
.cta .mark { width: 6rem; height: 6rem; margin: 0 auto var(--space-m); color: var(--heading); }
.cta h2 { font-size: var(--step-4); }
.cta .actions { justify-content: center; }
.cta .lead { color: var(--text-2); }

/* Tables: a caption, scoped headers, a labelled scroller; .table-stack turns rows into blocks on narrow screens */
.table-wrap { margin-block: var(--space-m); overflow-x: auto; border: 1px solid var(--edge); border-radius: var(--radius); background: var(--surface); }
table { width: 100%; border-collapse: collapse; }
caption { padding: var(--space-s) var(--space-s) 0; color: var(--heading); font-weight: 600; text-align: left; }
th, td { padding: var(--space-xs) var(--space-s); border-top: 1px solid var(--rule); text-align: left; vertical-align: top; }
thead th { border-top: 0; color: var(--text-2); font-size: var(--step--1); font-weight: 600; }
tbody th { color: var(--heading); font-weight: 600; }
td > :last-child, th > :last-child { margin-bottom: 0; }
@media (max-width: 40rem) {
  .table-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .table-stack tr { display: block; padding-block: var(--space-xs); border-top: 1px solid var(--rule); }
  .table-stack tr:first-child { border-top: 0; }
  .table-stack th, .table-stack td { display: block; padding: .25rem var(--space-s); border: 0; }
  .table-stack td::before { content: attr(data-label); display: block; color: var(--text-2); font-size: var(--step--1); font-weight: 600; }
}

/* Local navigation (Features): sticky under the header on wide, tall screens */
.localnav { border-bottom: 1px solid var(--rule); background: var(--bg); }
.localnav ul { display: flex; flex-wrap: wrap; gap: 0 var(--space-m); margin: 0; padding: 0; list-style: none; }
.localnav li { margin: 0; max-inline-size: none; }
.localnav a { display: inline-flex; align-items: center; min-height: 3rem; border-bottom: 2px solid transparent; color: var(--text); font-weight: 500; text-decoration: none; }
.localnav a:hover { border-bottom-color: var(--accent); text-decoration: underline; text-underline-offset: .3em; }
@media (min-width: 48rem) and (min-height: 40rem) {
  .localnav { position: sticky; top: var(--head-h); z-index: 5; }
  html:has(.localnav) { scroll-padding-top: calc(var(--head-h) + 3.75rem); }
}

/* Blocks that only make sense on a wide screen (the Install QR code) */
@media (max-width: 47.99rem) { .wide-only { display: none; } }

/* Install: two role cards, two store slots (plain text until the listings exist), a QR code for wide screens */
.stores { display: grid; gap: var(--space-s); margin-block: var(--space-m); }
@media (min-width: 40rem) { .stores { grid-template-columns: 1fr 1fr; } }
.store-slot { display: flex; flex-direction: column; justify-content: center; min-height: 3.5rem; padding: var(--space-s) var(--space-m); border: 1px dashed var(--edge); border-radius: var(--radius); color: var(--text-2); }
.store-slot b { color: var(--text); }
.qr-block { display: none; }
@media (min-width: 48rem) { .qr-block { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-m); align-items: center; } }
.qr { flex: none; width: 11.5rem; padding: .5rem; border: 1px solid var(--edge); border-radius: var(--radius-s); background: #fff; }
.qr img { display: block; width: 100%; height: auto; }

/* Legal pages: a reading column, restyled only */
.legal { width: min(100% - 2 * var(--gutter), 44rem); margin-inline: auto; padding-block: var(--space-xl) var(--space-2xl); }
.legal h1 { font-size: var(--step-4); }
.legal h2 { font: 600 var(--step-2)/1.25 var(--sans); letter-spacing: 0; }
.legal table { margin: var(--space-s) 0 var(--space-m); font-size: var(--step--1); }
.legal th, .legal td { border: 1px solid var(--rule); overflow-wrap: anywhere; }
.legal th { background: var(--bg-2); }
.legal .card { margin-block: var(--space-m); }

/* Back to top (How-to): a named button, hidden on short screens */
.to-top { position: fixed; right: var(--space-s); bottom: var(--space-s); z-index: 6; display: inline-flex; align-items: center; gap: .4rem; min-height: 3rem; padding: .5rem 1rem; border: 1px solid var(--edge); border-radius: 999px; background: var(--surface); color: var(--text); box-shadow: var(--shadow-2); font: inherit; font-weight: 500; cursor: pointer; }
.to-top .icon { width: 1.25rem; height: 1.25rem; }
@media (max-height: 40rem) { .to-top { display: none; } }

/* Dark scheme: the same tokens, swapped. Bookends sit on slate so they still read as bands; cards go navy. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--navy); --bg-2: var(--slate); --surface: var(--slate);
    --heading: var(--silver); --text: var(--silver); --text-2: var(--mist);
    --accent: var(--leaf); --link: var(--leaf);
    --btn-bg: var(--leaf); --btn-fg: var(--navy); --btn-bg-hover: rgb(100 216 162 / .85);
    --tint: rgb(100 216 162 / .12);
    --rule: rgb(163 182 197 / .25); --edge: rgb(163 182 197 / .55);
    --focus: var(--silver); --focus-halo: var(--navy);
    --shadow-1: 0 1px 2px rgb(0 0 0 / .3); --shadow-2: 0 8px 24px rgb(0 0 0 / .35);
  }
  .dark { --bg: var(--slate); --bg-2: var(--navy); --surface: var(--navy); }
  .site-head { border-bottom: 1px solid var(--rule); }
  .site-foot, .cta { border-top: 1px solid var(--rule); }
}

/* Motion: feedback only; nothing moves by itself, and nothing at all under reduced motion */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) { *, ::before, ::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* Print */
@media print {
  .site-head, .site-foot, .to-top, .menu, .localnav, .skip { display: none !important; }
  body, .dark { background: #fff; color: #000; }
  a { color: inherit; }
  .hero-visual, .phone { display: none; }
}

/* Windows contrast themes: real borders, outline focus, generated marks in the text colour */
@media (forced-colors: active) {
  .btn, .card, .store-slot, .shot, .phone, .menu nav, .table-wrap, .to-top, .fn { border: 1px solid; }
  .site-nav [aria-current="page"], .localnav a:hover { border-bottom-color: currentColor; }
  .ticks li::before, .qa summary::after { border-color: currentColor; }
  .arch { border-color: currentColor; }
  /* The lockup is white artwork: keep its navy plate, or it vanishes on a light contrast theme's Canvas */
  .brand img, .foot-brand img { box-sizing: content-box; padding: .25rem .375rem; border-radius: var(--radius-s); background: var(--navy); forced-color-adjust: none; }
  :focus-visible { box-shadow: none; }
}