/* HVAC Uptime — site stylesheet.
 *
 * Brand Book v0.8. Colors: only var(--hvi-*) from the generated tokens.css, and color-mix() of
 * those. No hex, no rgb(), no named colors. A test enforces it.
 *
 * Surfaces: a section is .surface-dark or .surface-light. Each sets the
 * semantic variables below; components read only those. Status colors are
 * never used as text on a light surface (Muted Gray, the status colors and
 * Electric Cyan all fail AA there); chips and result cards therefore carry
 * their own dark surface wherever they sit.
 */

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 100%;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--hvi-midnight);
  color: var(--hvi-white);
  font-weight: 400;
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

/* ---------- surfaces ---------- */

.surface-dark {
  --bg: var(--hvi-midnight);
  --bg-card: var(--hvi-slate);
  --bg-field: var(--hvi-slate);
  --text: var(--hvi-white);
  --text-2: var(--hvi-muted);
  --link: var(--hvi-cyan);
  --focus: var(--hvi-cyan);
  --accent: var(--hvi-cyan);
  --eyebrow: var(--hvi-cyan);
  --badge-bg: var(--hvi-slate);
  --error-text: var(--hvi-critical);
  --border: color-mix(in srgb, var(--hvi-muted) 28%, transparent);
  --border-strong: color-mix(in srgb, var(--hvi-muted) 55%, transparent);
  background: var(--bg);
  color: var(--text);
}

.surface-dark--gradient {
  background: linear-gradient(180deg, var(--hvi-midnight) 0%, var(--hvi-gradient-end) 100%);
}

.surface-light {
  --bg: var(--hvi-white);
  --bg-card: var(--hvi-white);    /* a 3% tint took Muted Gray on Light to 4.49:1; the border separates the card */
  --bg-field: var(--hvi-white);
  --text: var(--hvi-midnight);
  --text-2: var(--hvi-muted-on-light);  /* D-HVAC-085: Muted Gray is 2.7:1 on Soft White */
  --link: var(--hvi-midnight);    /* cyan text on light is 1.7:1; cyan carries the underline instead */
  --focus: var(--hvi-blue);
  --accent: var(--hvi-midnight);  /* cyan as text on light is 1.7:1 */
  --eyebrow: var(--hvi-cyan-on-light);  /* plain cyan text is 1.7:1 on Soft White */
  --badge-bg: var(--hvi-midnight);
  --error-text: var(--hvi-midnight); /* the glyph carries the red */
  --border: color-mix(in srgb, var(--hvi-muted) 45%, transparent);
  --border-strong: color-mix(in srgb, var(--hvi-muted) 75%, transparent);
  background: var(--bg);
  color: var(--text);
}

/* A light surface lifted off Soft White, for a section that has to read as
   distinct. Muted Gray on Light is ruled at a value with no headroom below
   Soft White, so secondary text here is Midnight rather than the muted
   shade; the eyebrow shade is chosen to clear the floor on this surface. */
.surface-light--raised {
  --bg: color-mix(in srgb, var(--hvi-white) 92%, var(--hvi-muted));
  --bg-card: var(--hvi-white);
  --bg-field: var(--hvi-white);
  --text-2: var(--hvi-midnight);
  background: var(--bg);
}

/* ---------- layout ---------- */

.container {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: 16px;
}

@media (min-width: 720px) { .container { padding-inline: 32px; } }

.section { padding-block: 56px; }
@media (min-width: 720px) { .section { padding-block: 88px; } }

.stack > * + * { margin-top: 16px; }
.stack--lg > * + * { margin-top: 32px; }
.stack--xl > * + * { margin-top: 40px; }
@media (min-width: 720px) { .stack--xl > * + * { margin-top: 56px; } }

.grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 720px) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Copy beside a form: a wider gutter so the two read as separate blocks
   (founder request, 2026-10-18). */
.grid--split { gap: 32px; }
@media (min-width: 960px) { .grid--split { column-gap: 64px; } }

.measure { max-width: 66ch; }

/* ---------- type scale ---------- */

h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }

.display { font-size: 2.25rem; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; }
.h1      { font-size: 2rem;    line-height: 1.2;  font-weight: 700; letter-spacing: -0.015em; }
.h2      { font-size: 1.5rem;  line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; }
.h3      { font-size: 1.25rem; line-height: 1.35; font-weight: 600; }
.lead    { font-size: 1.125rem; line-height: 1.55; font-weight: 500; }
.body    { font-size: 1rem;    line-height: 1.6;  font-weight: 400; }
.small   { font-size: 0.875rem; line-height: 1.5; font-weight: 400; }
.label   { font-size: 0.8125rem; line-height: 1.4; font-weight: 600; letter-spacing: 0.02em; }
.label--caps { letter-spacing: 0.08em; }
.mono    { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.875em; }

@media (min-width: 720px) {
  .display { font-size: 3rem; }
  .h1 { font-size: 2.5rem; }
  .h2 { font-size: 2rem; }
  .h3 { font-size: 1.5rem; }
}

.text-2 { color: var(--text-2); }
.w400 { font-weight: 400; } .w500 { font-weight: 500; } .w600 { font-weight: 600; } .w700 { font-weight: 700; }

p + p { margin-top: 1em; }
.grid > p + p { margin-top: 0; }   /* a grid lays itself out; prose flow does not apply */

a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
.surface-light a { text-decoration-color: var(--hvi-cyan); text-decoration-thickness: 2px; }

/* ---------- focus and tap targets ---------- */

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--hvi-radius-sm);
}

.skip-link {
  position: absolute; left: 16px; top: -100px;
  padding: 12px 16px; min-height: 44px;
  background: var(--hvi-cyan); color: var(--hvi-midnight);
  border-radius: var(--hvi-radius-sm); text-decoration: none; font-weight: 600;
  z-index: 100;
}
.skip-link:focus { top: 16px; }

/* ---------- logo ---------- */
/* The delivered lockup, referenced and scaled uniformly by height alone
   (Brand Book v0.20 §4g). Nothing here draws, colours or crops the mark.
   Astra's v1.8 QA: the horizontal logo needs 128px of width before UPTIME
   reads (about 9px high) and prefers 256px. 48px tall is 146px wide, in a
   64px (phone) or 76px nav bar; the /design specimen shows the preferred 256. */

.brand-mark {
  display: inline-flex; align-items: center; min-height: 44px;
  text-decoration: none; line-height: 0;
}
.brand-mark__img { display: block; height: 48px; width: auto; }
.brand-mark--lg .brand-mark__img { height: 84px; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 24px;
  border-radius: var(--hvi-radius-sm);
  font: inherit; font-weight: 600; font-size: 1rem; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.btn--primary {
  background: var(--hvi-cyan); color: var(--hvi-midnight); border-color: var(--hvi-cyan);
}
.btn--primary:hover { background: color-mix(in srgb, var(--hvi-cyan) 88%, var(--hvi-white)); }
.btn--secondary {
  background: var(--hvi-slate); color: var(--hvi-white); border-color: var(--hvi-cyan);
}
.btn--secondary:hover { background: color-mix(in srgb, var(--hvi-slate) 85%, var(--hvi-cyan)); }
.btn--block { width: 100%; }
.btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- cards ---------- */

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--hvi-radius-md);
  padding: 20px;
}
.card--panel { border-radius: var(--hvi-radius-lg); padding: 24px; }
@media (min-width: 720px) { .card--panel { padding: 32px; } }
.card > * + * { margin-top: 12px; }

/* A panel lifted off Soft White without going dark. Muted Gray on Light has
   no headroom below Soft White, so copy here is Midnight and the hierarchy
   comes from size and weight; the caption keeps the cyan shade, which still
   clears the floor on this ground. */
.card--grey {
  --bg-card: color-mix(in srgb, var(--hvi-white) 90%, var(--hvi-muted));
  --text: var(--hvi-midnight);
  --text-2: var(--hvi-midnight);
  --eyebrow: var(--hvi-cyan-on-light);
  --border: color-mix(in srgb, var(--hvi-muted) 70%, transparent);
  background: var(--bg-card); color: var(--text);
}

/* A light card lifted off its section (founder request, 2026-10-16), for
   cards that would otherwise sit flat on a same-colour ground. Restrained, per
   the card rule: a firmer border and a soft two-layer Midnight shadow, both
   mixed from tokens. No glassmorphism, no heavy shadow. */
.card--raised {
  border-color: color-mix(in srgb, var(--hvi-muted) 55%, transparent);
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--hvi-midnight) 8%, transparent),
    0 10px 28px -12px color-mix(in srgb, var(--hvi-midnight) 28%, transparent);
}

/* A card that lifts toward the pointer (founder request, 2026-10-17): a
   short rise, a deeper shadow and an accent border. Pointer devices only, so
   a tap never leaves a card stuck up; reduced motion keeps it still. On a
   dark section the shadow cannot darken Midnight, so a faint cyan glow does
   the lifting there. The shadow is a custom property set per surface, so the
   nearest surface wins (the body itself is a dark surface). */
.surface-dark {
  --pop-shadow: 0 22px 44px -20px color-mix(in srgb, var(--hvi-cyan) 35%, transparent);
}
.surface-light {
  --pop-shadow:
    0 2px 4px color-mix(in srgb, var(--hvi-midnight) 8%, transparent),
    0 22px 40px -18px color-mix(in srgb, var(--hvi-midnight) 45%, transparent);
}
/* Every card lifts, and every result card (founder direction, 2026-10-20:
   "all cards"), except a form: a form that moves under the pointer while
   someone types in it is harder to use. A result card keeps its status
   border; only its lift and shadow change. */
.card--pop, .card:not(form), .result { transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; }
@media (hover: hover) {
  .card--pop:hover, .card:not(form):hover, .result:hover {
    transform: translateY(-6px);
    box-shadow: var(--pop-shadow);
  }
  .card--pop:hover, .card:not(form):hover {
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) { .card--pop:hover, .card:not(form):hover, .result:hover { transform: none; } }

/* A dark card that keeps its own surface wherever it sits (status panels,
   product UI, Control Room fragments on a light page). */
.card--dark {
  --bg: var(--hvi-midnight); --bg-card: var(--hvi-slate); --bg-field: var(--hvi-slate);
  --text: var(--hvi-white); --text-2: var(--hvi-muted); --link: var(--hvi-cyan); --focus: var(--hvi-cyan);
  --accent: var(--hvi-cyan); --eyebrow: var(--hvi-cyan); --badge-bg: var(--hvi-midnight); --error-text: var(--hvi-critical);
  --border: color-mix(in srgb, var(--hvi-muted) 28%, transparent);
  --border-strong: color-mix(in srgb, var(--hvi-muted) 55%, transparent);
  background: var(--hvi-slate); color: var(--hvi-white);
}

/* ---------- status chips ----------
   A chip is a word plus a glyph plus a color, always all three. The chip
   carries a Midnight surface so its label meets AA on any page. */

.chip {
  --chip: var(--hvi-muted);
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 28px; padding: 3px 10px 3px 8px;
  border-radius: var(--hvi-radius-sm);
  background: var(--hvi-midnight);
  border: 1px solid var(--chip);
  color: var(--chip);
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; line-height: 1.2;
  white-space: nowrap;
}
.chip .icon { width: 14px; height: 14px; }
.chip--pass      { --chip: var(--hvi-success); }
.chip--partial   { --chip: var(--hvi-warning); }
.chip--fail      { --chip: var(--hvi-critical); }
.chip--unknown   { --chip: var(--hvi-muted); border-style: dashed; }
.chip--observed  { --chip: var(--hvi-muted); border-style: dashed; }
.chip--recovered { --chip: var(--hvi-success); }
.chip--attention { --chip: var(--hvi-warning); }
.chip--live      { --chip: var(--hvi-cyan); }
.chip--sample    { --chip: var(--hvi-muted); border-style: dashed; }

/* ---------- the four-state result grammar ----------
   PASS green · PARTIAL amber · FAIL red · UNKNOWN muted gray.
   UNKNOWN is never FAIL: different token, different glyph, dashed border, and
   a fixed sub-label that says so. Nothing below may be overridden per page. */

.result {
  --state: var(--hvi-muted);
  --bg: var(--hvi-slate); --bg-card: var(--hvi-midnight);
  --text: var(--hvi-white); --text-2: var(--hvi-muted); --link: var(--hvi-cyan); --focus: var(--hvi-cyan);
  --accent: var(--hvi-cyan); --eyebrow: var(--hvi-cyan); --badge-bg: var(--hvi-midnight); --error-text: var(--hvi-critical);
  --border: color-mix(in srgb, var(--hvi-muted) 28%, transparent);
  background: var(--hvi-slate); color: var(--hvi-white);
  border: 1px solid var(--state);
  border-radius: var(--hvi-radius-md);
  padding: 16px;
  display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: start;
}
.result--pass    { --state: var(--hvi-success); }
.result--partial { --state: var(--hvi-warning); }
.result--fail    { --state: var(--hvi-critical); }
.result--unknown { --state: var(--hvi-muted); border-style: dashed; }
.result--observed { --state: var(--hvi-muted); border-style: dashed; }

.result__glyph {
  grid-row: 1 / span 2;
  width: 32px; height: 32px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--state); border-radius: var(--hvi-radius-sm);
  color: var(--state);
}
.result--unknown .result__glyph,
.result--observed .result__glyph { border-style: dashed; }
.result__glyph .icon { width: 18px; height: 18px; }

.result__state {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
}
.result__label { color: var(--state); font-weight: 700; font-size: 0.875rem; letter-spacing: 0.04em; }
.result__sub { color: var(--hvi-muted); font-size: 0.8125rem; font-weight: 500; }
.result__title { font-weight: 600; font-size: 1rem; line-height: 1.4; }
.result__detail { grid-column: 2; color: var(--hvi-muted); font-size: 0.875rem; line-height: 1.5; }
.result__meta { grid-column: 2; color: var(--hvi-muted); font-size: 0.8125rem; }

/* ---------- data emphasis ---------- */

.stat { display: grid; gap: 4px; }
.stat__value { font-size: 2.5rem; line-height: 1; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat__value--accent { color: var(--accent); }
.stat__label { color: var(--text-2); font-size: 0.875rem; font-weight: 500; }
.stat__note { color: var(--text-2); font-size: 0.8125rem; }
@media (min-width: 720px) { .stat__value { font-size: 3.5rem; } }

/* ---------- chart series ---------- */

.series { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.series__item { display: flex; align-items: center; gap: 10px; font-size: 0.875rem; }
.series__swatch { width: 14px; height: 14px; border-radius: 3px; flex: none; }
/* Brand Book §4d: text and icons on any accent or status fill are Midnight. */
.series__swatch, .bars__bar { color: var(--hvi-midnight); }
.series__swatch--cyan     { background: var(--hvi-cyan); }
.series__swatch--blue     { background: var(--hvi-blue); }
.series__swatch--success  { background: var(--hvi-success); }
.series__swatch--warning  { background: var(--hvi-warning); }
.series__swatch--critical { background: var(--hvi-critical); }
.series__swatch--muted    { background: var(--hvi-muted); }
.series__swatch--muted-on-light { background: var(--hvi-muted-on-light); }

.bars { display: flex; align-items: flex-end; gap: 10px; height: 96px; }
.bars__bar { flex: 1; border-radius: 3px 3px 0 0; }
.bars__bar--cyan     { background: var(--hvi-cyan); }
.bars__bar--blue     { background: var(--hvi-blue); }
.bars__bar--success  { background: var(--hvi-success); }
.bars__bar--warning  { background: var(--hvi-warning); }
.bars__bar--critical { background: var(--hvi-critical); }
.bars__bar--muted    { background: var(--hvi-muted); }

/* ---------- forms ---------- */

.field { display: grid; gap: 6px; }
.field__label { font-weight: 600; font-size: 0.875rem; }
.field__help { color: var(--text-2); font-size: 0.8125rem; }
.field__error { color: var(--error-text); font-size: 0.8125rem; font-weight: 600; display: inline-flex; gap: 6px; align-items: center; }
.field__error .icon { width: 14px; height: 14px; color: var(--hvi-critical); }

.input, .select, .textarea {
  width: 100%; min-height: 44px; padding: 10px 14px;
  font: inherit; font-size: 1rem; line-height: 1.4;
  color: var(--text); background: var(--bg-field);
  border: 1px solid var(--border-strong); border-radius: var(--hvi-radius-sm);
}
.textarea { min-height: 120px; resize: vertical; }
.select { appearance: none; padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size: 5px 5px; background-repeat: no-repeat; }
.input::placeholder, .textarea::placeholder { color: var(--text-2); opacity: 1; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--hvi-muted); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--focus);
}
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--hvi-critical); border-width: 2px; }

.checkbox { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding-block: 8px; }
.checkbox input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--hvi-cyan); flex: none; }

/* ---------- icons ---------- */

.icon { width: 1em; height: 1em; flex: none; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- navigation ---------- */

.site-nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--hvi-midnight);
  border-bottom: 1px solid color-mix(in srgb, var(--hvi-muted) 22%, transparent);
  color: var(--hvi-white);
}
/* Every item centred on the bar's middle line (founder request, 2026-10-30). */
.site-nav__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 16px; }
/* The logo row: 64px on a phone, where the sticky bar would otherwise take
   too much of a small screen, and 76px from 720 up (founder, 2026-10-30).
   Kept on the logo, so the row holds its height with the menu open. */
.site-nav__bar > .brand-mark { margin-block: 8px; }
@media (min-width: 720px) { .site-nav__bar > .brand-mark { margin-block: 14px; } }
.site-nav__toggle {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; min-width: 44px; padding: 8px 12px;
  background: transparent; color: var(--hvi-white);
  border: 1px solid color-mix(in srgb, var(--hvi-muted) 55%, transparent);
  border-radius: var(--hvi-radius-sm); font: inherit; font-weight: 600; cursor: pointer;
}
.site-nav__toggle .icon { width: 18px; height: 18px; }
.site-nav__menu { display: none; padding-block: 8px 16px; }
.site-nav__menu[data-open="true"] { display: block; flex-basis: 100%; }  /* opens below the logo row on a phone */
.site-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.site-nav__link {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 8px 12px;
  color: var(--hvi-white); text-decoration: none; font-weight: 500; font-size: 0.9375rem;
  border-radius: var(--hvi-radius-sm); border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.site-nav__link:hover { color: var(--hvi-cyan); }
.site-nav__link[aria-current="page"] { color: var(--hvi-cyan); border-bottom-color: var(--hvi-cyan); border-radius: 0; }
.site-nav__cta { margin-top: 12px; white-space: nowrap; }

@media (min-width: 960px) {
  .site-nav__toggle { display: none; }
  .site-nav__bar { flex-wrap: nowrap; }
  .site-nav__menu, .site-nav__menu[data-open="true"] { display: flex; flex-basis: auto; align-items: center; gap: 16px; padding: 0; }
  .site-nav__list { flex-direction: row; gap: 4px; }
  .site-nav__cta { margin-top: 0; }
}

/* ---------- footer ---------- */

.site-footer {
  background: var(--hvi-midnight); color: var(--hvi-white);
  border-top: 1px solid color-mix(in srgb, var(--hvi-muted) 22%, transparent);
  padding-block: 40px;
}
.site-footer__grid { display: grid; gap: 24px; }
@media (min-width: 720px) { .site-footer__grid { grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 48px; } }
.site-footer__summary { max-width: 36ch; margin: 20px 0 0; }
/* The links in labelled columns, each read top to bottom: two columns on a
   phone, four from 720 (founder request, 2026-10-29). */
.site-footer__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; }
@media (min-width: 720px) { .site-footer__links { grid-template-columns: repeat(4, minmax(120px, auto)); gap: 24px 48px; } }
.site-footer__heading { margin: 0 0 6px; font-size: 0.8125rem; font-weight: 600; color: var(--hvi-white); }  /* headings white, links grey (founder, 2026-10-30) */
.site-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; }
.site-footer__links a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; color: var(--hvi-muted); text-decoration: none; font-size: 0.9375rem; }
.site-footer__links a:hover { color: var(--hvi-cyan); }
.site-footer__meta { color: var(--hvi-muted); font-size: 0.8125rem; margin-top: 24px; }

/* ---------- misc ---------- */

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.divider { border: 0; border-top: 1px solid var(--border); margin: 0; }

/* Plain text, no chip. Electric Cyan on dark; on Soft White the same hue
   darkened to the AA floor, because cyan itself is 1.7:1 there. */
.eyebrow {
  color: var(--eyebrow);
  font-weight: 600; font-size: 0.9375rem; line-height: 1.2;
  letter-spacing: 0.08em; text-transform: uppercase;
}

table.table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.table th, .table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.table th { font-weight: 600; color: var(--text-2); font-size: 0.8125rem; letter-spacing: 0.02em; }
.table-wrap { overflow-x: auto; position: relative; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- placeholder ----------
   Stands in for an asset that does not exist yet (the product video,
   D-HVAC-186; the Control Room screens, D-HVAC-135). Dashed and muted, the
   same visual family as UNKNOWN, so it reads as "not here yet" and never as
   a frame of the real thing: no UI chrome, no metric, no play control. */
/* zero-specificity reset, so a parent stack's spacing still applies */
:where(.placeholder) { margin: 0; }
.placeholder {
  display: grid; place-content: center; justify-items: center; gap: 10px;
  padding: 24px; text-align: center;
  background: var(--hvi-midnight); color: var(--hvi-white);
  border: 1px dashed var(--hvi-muted); border-radius: var(--hvi-radius-lg);
}
.placeholder--video { aspect-ratio: 16 / 9; width: 100%; max-width: 880px; margin-inline: auto; }
.placeholder--phone { aspect-ratio: 9 / 16; max-width: 300px; width: 100%; justify-self: center; }
.placeholder__label { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 1rem; }
.placeholder__label .icon { width: 16px; height: 16px; color: var(--hvi-muted); }
.placeholder__note { color: var(--hvi-white); font-size: 0.875rem; line-height: 1.5; max-width: 36ch; }

/* ---------- form status ---------- */
.form-status p { margin: 0; }

/* ---------- page layouts (compositions of the components above) ---------- */

.hero__grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .hero__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; } }
/* No media yet (the video slot is hidden until the approved video exists):
   the copy keeps its reading width and no empty column is left beside it. */
@media (min-width: 960px) { .hero__grid--solo { grid-template-columns: minmax(0, 1fr); } }
.hero__grid--solo .hero__copy { max-width: 760px; }
/* Home's headline and lead are set above the page scale so the hero leads
   with them (founder request, 2026-11-01). Hero only: every other page keeps
   .display and .lead as the scale defines them. */
.hero .display { font-size: 2.625rem; line-height: 1.08; }
.hero .lead { font-size: 1.25rem; line-height: 1.5; }
@media (min-width: 720px) {
  .hero .display { font-size: 3.75rem; }
  .hero .lead { font-size: 1.4375rem; }
}
@media (min-width: 960px) {
  .hero__grid--solo .hero__copy { max-width: 860px; }
  .hero .display { font-size: 4.25rem; }
}
.hero__panel { display: grid; gap: 20px; }
.hero__panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.hero__stats .stat__value { font-size: 1.75rem; white-space: nowrap; }
@media (min-width: 720px) { .hero__stats .stat__value { font-size: 2.25rem; } }

.feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.feed__item { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; padding: 12px; border: 1px solid var(--border); border-radius: var(--hvi-radius-sm); background: var(--hvi-midnight); }
.feed__text { font-size: 0.875rem; line-height: 1.5; color: var(--text); }

/* One marker everywhere: a Midnight tile carrying a cyan glyph or number.
   Decorative — the word beside it carries the meaning. */
.icon-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--hvi-radius-sm);
  background: var(--badge-bg); color: var(--hvi-cyan);
  font-weight: 700; font-size: 0.9375rem;
}
.icon-badge .icon { width: 20px; height: 20px; }
/* A tile that has to read on a card of its own colour (a Slate card on a
   dark section): a Midnight ground and a faint cyan edge (founder request,
   2026-10-30). The round variant is for the notification cards. */
.icon-badge--framed {
  background: var(--hvi-midnight);
  border: 1px solid color-mix(in srgb, var(--hvi-cyan) 45%, transparent);
  width: 40px; height: 40px;
}
.icon-badge--round { border-radius: 50%; }

/* A sequence of steps, drawn as a path rather than as equal boxes. The rule
   runs from each marker to the next, so the eye reads an order. */
.flow { list-style: none; padding: 0; display: grid; gap: 32px;
  --arrow: color-mix(in srgb, var(--text) 60%, transparent); }
.flow__step { position: relative; display: grid; gap: 12px; align-content: start; }
.flow__step .icon-badge { margin-bottom: 10px; }   /* the marker sits clear of its title */
@media (min-width: 720px) {
  .flow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 32px; }
  /* marker, title, detail: three rows that line up across the columns
     however the titles wrap */
  @supports (grid-template-rows: subgrid) {
    .flow { grid-template-rows: auto auto auto; }
    .flow__step { grid-row: span 3; grid-template-rows: subgrid; gap: 0; }
  }
  /* the shaft, stopping short of the head */
  .flow__step:not(:last-child)::after {
    content: ""; position: absolute; left: 52px; right: -13px; top: 16px;
    border-top: 2px solid var(--arrow);
  }
  /* a solid head, set off from the marker it points at */
  .flow__step:not(:last-child)::before {
    content: ""; position: absolute; right: -22px; top: 12px;
    width: 0; height: 0;
    border-left: 9px solid var(--arrow);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
  }
}

/* Phases of a running system, not steps to take. One panel divided by
   rules, so it reads as a single object with a before and an after —
   nothing like the flow's separate markers. */
.phase-band { display: grid; gap: 24px; }
.phase-band > * + * { margin-top: 0; }   /* the band is a grid; the card's stacking does not apply */
.phase > * + * { margin-top: 10px; }
.phase__when, .callout__label {
  display: flex; align-items: center; gap: 8px;
  color: var(--eyebrow); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em;
}
.phase__when .icon, .callout__label .icon { width: 14px; height: 14px; }

/* An offer that has to be seen: the accent carries it, not a louder box. */
.callout, .scope-note { border-left: 3px solid var(--hvi-cyan); }
/* The two package blocks on Pricing: one heading level, one frame, one icon
   treatment, equal weight (founder direction, 2026-10-30). */
.package-block + .package-block { margin-top: 32px; padding-top: 40px; border-top: 1px solid var(--border); }
.package-block__name { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.package-block__name .plan-badge { margin-left: 0; font-size: 0.875rem; }
.plan-badge.plan-badge--included { background: var(--hvi-cyan); color: var(--hvi-midnight); }
.package-block__upgrade { margin: 28px 0 0; }
.callout strong { font-weight: 600; }
.phase + .phase { border-top: 1px solid var(--border); padding-top: 24px; }
@media (min-width: 720px) {
  .phase-band { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .phase { padding-inline: 32px; }
  .phase:first-child { padding-left: 0; }
  .phase:last-child { padding-right: 0; }
  .phase + .phase { border-top: 0; padding-top: 0; border-left: 1px solid var(--border); }
  /* moment, statement, detail, aligned across the three phases */
  @supports (grid-template-rows: subgrid) {
    .phase-band { grid-template-rows: auto auto auto; row-gap: 10px; }
    .phase { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
    .phase > * + * { margin-top: 0; }
  }
}

/* Home's "After activation" as three cards, each headed by a Midnight band
   (founder request, 2026-10-18): the moment in cyan beside a Slate disc
   carrying its icon. Title and detail align across the three cards. */
:where(.phase-cards) { margin: 0; }
.phase-cards { list-style: none; padding: 0; display: grid; gap: 20px; }
.phase-card { padding: 0; overflow: hidden; display: grid; align-content: start; }
.phase-card > * + * { margin-top: 0; }
.phase-card__head {
  margin: 0; display: flex; align-items: center; gap: 14px; padding: 18px 24px;
  background: var(--hvi-midnight); color: var(--hvi-cyan);
  border-bottom: 3px solid var(--hvi-cyan);
}
.phase-card__icon {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--hvi-slate); color: var(--hvi-cyan);
  border: 1px solid color-mix(in srgb, var(--hvi-cyan) 40%, transparent);
}
.phase-card__icon .icon { width: 22px; height: 22px; }
.phase-card__when { font-size: 0.875rem; font-weight: 700; letter-spacing: 0.1em; }
.phase-card__title { margin: 0; padding: 22px 24px 8px; }
.phase-card__text { margin: 0; padding: 0 24px 26px; }
@media (min-width: 720px) {
  .phase-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  @supports (grid-template-rows: subgrid) {
    .phase-cards { grid-template-rows: auto auto auto; row-gap: 0; }
    .phase-card { grid-row: span 3; grid-template-rows: subgrid; }
  }
}
/* Home's working day: four branches, two by two, each card its own height
   order (no shared subgrid rows across the two rows). */
@media (min-width: 720px) {
  .phase-cards.phase-cards--four { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; row-gap: 20px; }
  .phase-cards--four .phase-card { grid-row: auto; grid-template-rows: none; }
}

/* Control Room's "what it answers, in this order": words, not a picture. */
.cr-order { align-self: center; }
:where(.cr-order__list) { margin: 0; }
.cr-order__list { list-style: none; padding: 0; display: grid; gap: 16px; counter-reset: cr; }
.cr-order__list li { counter-increment: cr; position: relative; padding-left: 44px; color: var(--text-2); font-size: 0.9375rem; line-height: 1.55; }
.cr-order__list li strong { color: var(--text); font-weight: 600; }
.cr-order__list li::before {
  content: counter(cr); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; background: var(--hvi-midnight); color: var(--hvi-cyan); font-weight: 700; font-size: 0.875rem;
  border: 1px solid color-mix(in srgb, var(--hvi-cyan) 40%, transparent);
}

/* How It Works' setup section: three facts as icon rows beside a drawing
   of the guided form (founder request, 2026-10-20). */
:where(.setup-facts) { margin: 0; }
.setup-facts { list-style: none; padding: 0; display: grid; gap: 18px; margin-top: 24px; } /* clear of the heading (founder request, 2026-10-29) */
.setup-fact { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; }
/* the first line of each fact sits on the centre of its 44px mark (founder
   request, 2026-11-01): half the gap between the mark and one line */
.setup-fact p { margin: 0; line-height: 1.6; padding-top: calc((44px - 1.6em) / 2); }
.setup-fact strong { color: var(--text); font-weight: 600; }
.setup-fact__icon {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--hvi-midnight); color: var(--hvi-cyan);
  box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--hvi-midnight) 45%, transparent);
}
.setup-fact__icon .icon { width: 20px; height: 20px; }
.setup .setup-sheet { align-self: center; }
#campaign .grid--split { align-items: start; }
.campaign-reasons { grid-column: 1 / -1; }
@media (min-width: 960px) {
  .campaign-reasons .plain-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
}
.setup-sheet { margin: 0; padding: 0; overflow: hidden; display: grid; }
.setup-sheet > * + * { margin-top: 0; }
.setup-sheet__head {
  display: flex; align-items: center; gap: 12px; padding: 18px 24px;
  background: var(--hvi-midnight); color: var(--hvi-white); font-weight: 600; font-size: 0.9375rem;
  border-bottom: 3px solid var(--hvi-cyan);
}
.setup-sheet__head-icon { color: var(--hvi-cyan); display: inline-grid; }
.setup-sheet__head-icon .icon { width: 20px; height: 20px; }
:where(.setup-sheet__rows, .setup-sheet__after) { margin: 0; }
.setup-sheet__rows { list-style: none; padding: 8px 24px; display: grid; }
.setup-sheet__row {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--border); color: var(--text); font-weight: 500; font-size: 0.9375rem;
}
.setup-sheet__row:last-child { border-bottom: 0; }
.setup-sheet__row-icon {
  width: 36px; height: 36px; border-radius: var(--hvi-radius-sm); display: grid; place-items: center;
  background: color-mix(in srgb, var(--hvi-midnight) 6%, var(--hvi-white)); color: var(--hvi-midnight);
  border: 1px solid var(--border);
}
.setup-sheet__row-icon .icon { width: 18px; height: 18px; }
.setup-sheet__tick { color: var(--hvi-cyan-on-light); display: inline-grid; }
.setup-sheet__tick .icon { width: 18px; height: 18px; }
.setup-sheet__after {
  list-style: none; padding: 16px 24px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
  background: color-mix(in srgb, var(--hvi-white) 90%, var(--hvi-muted)); border-top: 1px solid var(--border);
}
.setup-sheet__after li {
  display: grid; justify-items: center; gap: 8px; text-align: center;
  font-size: 0.8125rem; font-weight: 600; color: var(--hvi-midnight); position: relative;
}
.setup-sheet__after li + li::before {     /* the arrow between the three steps */
  content: ""; position: absolute; left: -10px; top: 15px; width: 10px; height: 10px;
  background: var(--hvi-cyan-on-light); clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.setup-sheet__after-icon {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--hvi-midnight); color: var(--hvi-cyan);
}
.setup-sheet__after-icon--live { background: var(--hvi-cyan); color: var(--hvi-midnight); } /* §4d */
.setup-sheet__after-icon .icon { width: 18px; height: 18px; }

/* How It Works' workflow ribbon: six chevron segments from request to live
   (founder request, 2026-10-20). Midnight segments with white text and a
   cyan icon; the last one an Electric Cyan fill with Midnight text (§4d).
   Across the page from 960px, down it on a phone. */
.workflow { display: grid; gap: 14px; }
.workflow__label { margin: 0; }
:where(.workflow__steps) { margin: 0; }
.workflow__steps { list-style: none; padding: 0; display: grid; gap: 6px;
  /* a shadow under the steps (founder request, 2026-10-20): on the row, since each step's clip-path would cut its own */
  filter: drop-shadow(0 12px 18px color-mix(in srgb, var(--hvi-midnight) 30%, transparent)); }
.workflow__step {
  --notch: 18px;
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center;
  padding: 16px 20px calc(16px + var(--notch)) 20px;
  background: var(--hvi-midnight); color: var(--hvi-white);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--notch)), 50% 100%, 0 calc(100% - var(--notch)));
}
.workflow__step + .workflow__step { margin-top: calc(-1 * var(--notch) + 4px); padding-top: calc(16px + var(--notch));
  clip-path: polygon(0 0, 50% var(--notch), 100% 0, 100% calc(100% - var(--notch)), 50% 100%, 0 calc(100% - var(--notch))); }
.workflow__step:last-child { padding-bottom: 16px;
  clip-path: polygon(0 0, 50% var(--notch), 100% 0, 100% 100%, 0 100%); }
/* each step lifts on hover (founder request, 2026-10-20); the chevron's
   clip-path would cut off a shadow, so the lift and a lighter fill carry it */
.workflow__step { transition: transform 180ms ease, background-color 180ms ease; }
@media (hover: hover) {
  .workflow__step:hover { transform: translateY(-6px); background: var(--hvi-slate); }
  .workflow__step--live:hover { background: var(--hvi-cyan); }
}
@media (prefers-reduced-motion: reduce) { .workflow__step:hover { transform: none; } }
.workflow__icon {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--hvi-slate); color: var(--hvi-cyan); border: 1px solid color-mix(in srgb, var(--hvi-cyan) 40%, transparent);
}
.workflow__icon .icon { width: 18px; height: 18px; }
.workflow__number { font-weight: 700; font-size: 1rem; line-height: 1; font-variant-numeric: tabular-nums; }
.workflow__text { display: grid; gap: 2px; line-height: 1.35; }
.workflow__text strong { font-weight: 700; font-size: 0.9375rem; }
.workflow__text span { font-size: 0.8125rem; color: var(--hvi-muted); }
.workflow__step--live { background: var(--hvi-cyan); color: var(--hvi-midnight); }
.workflow__step--live .workflow__text span { color: var(--hvi-midnight); }
.workflow__step--live .workflow__icon { background: var(--hvi-midnight); color: var(--hvi-cyan); border-color: var(--hvi-midnight); }
@media (min-width: 960px) {
  .workflow__steps { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; }
  .workflow__step, .workflow__step + .workflow__step, .workflow__step:last-child {
    grid-template-columns: 1fr; justify-items: start; align-content: start; gap: 12px;
    margin-top: 0; margin-left: calc(-1 * var(--notch) + 4px);
    padding: 20px calc(16px + var(--notch)) 20px calc(16px + var(--notch));
    clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% 50%, calc(100% - var(--notch)) 100%, 0 100%, var(--notch) 50%);
  }
  .workflow__step:first-child { margin-left: 0; padding-left: 20px;
    clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% 50%, calc(100% - var(--notch)) 100%, 0 100%); }
  .workflow__step:last-child { padding-right: 20px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, var(--notch) 50%); }
}

/* Pricing's "what happens after you send this": the setup order, numbered. */
:where(.setup-steps) { margin: 0; }
.setup-steps { list-style: none; padding: 0; display: grid; gap: 14px; counter-reset: setup; }
.setup-steps > li {
  counter-increment: setup; position: relative; padding-left: 44px;
  color: var(--text-2); font-size: 0.9375rem; line-height: 1.55;
}
.setup-steps > li strong { color: var(--text); font-weight: 600; }
.setup-steps > li::before {
  content: counter(setup); position: absolute; left: 0; top: -2px;
  width: 30px; height: 30px; border-radius: var(--hvi-radius-sm); display: grid; place-items: center;
  background: var(--hvi-slate); color: var(--hvi-cyan); font-weight: 700; font-size: 0.875rem;
  border: 1px solid color-mix(in srgb, var(--hvi-cyan) 40%, transparent);
}

/* Control Room's install steps: a drawn phone per step, numbered below. */
:where(.install-steps) { margin: 0; }
.install-steps { list-style: none; padding: 0; gap: 20px; }
.install-step { display: grid; gap: 18px; align-content: start; padding: 28px 24px 24px; }
.install-step > * + * { margin-top: 0; }
.install-step .scene { max-height: 300px; }
.install-step__caption { margin: 0; display: flex; align-items: center; gap: 12px; font-weight: 600; color: var(--text); line-height: 1.4; }
.install-step__num {
  flex: none; width: 32px; height: 32px; border-radius: var(--hvi-radius-sm); display: grid; place-items: center;
  background: var(--hvi-midnight); color: var(--hvi-cyan); font-size: 0.9375rem; font-weight: 700;
}

/* the section above is already light; its bottom padding is the whole gap */
.pricing-band { padding-top: 0; }
.pricing-band__panel { display: grid; gap: 24px; }
@media (min-width: 960px) { .pricing-band__panel { grid-template-columns: 1fr auto; align-items: center; gap: 48px; } }
.pricing-band__price { display: grid; gap: 12px; justify-items: start; }

/* a hard break that only applies where the line is long enough to need it */
@media (max-width: 719px) { .br-wide { display: none; } }

/* Pricing's plan panel: the plan text, then the two ways to pay side by
   side, then the actions. The yearly box is outlined in cyan because it
   carries the saving. */
.plan-panel { display: grid; gap: 24px; }
.plan-panel > * + * { margin-top: 0; }
.plan-option {
  display: grid; gap: 12px; align-content: start; justify-items: start;
  padding: 20px; border-radius: var(--hvi-radius-md);
  background: var(--hvi-midnight); border: 1px solid var(--border-strong);
}
.plan-option--highlight { border: 2px solid var(--hvi-cyan); }
.plan-option__name { margin: 0; font-weight: 600; font-size: 0.9375rem; color: var(--text); }
.plan-panel__actions { align-items: center; }

/* The monthly / yearly switch: two radios as one segmented control. The
   chosen side is an Electric Cyan fill, so its text is Midnight (§4d). It
   only appears where :has() can act on it; elsewhere both boxes show. */
.plan-toggle { display: none; margin: 0; padding: 4px; border: 1px solid var(--border-strong); border-radius: 999px;
  background: var(--hvi-midnight); justify-self: start; gap: 4px; }
.plan-toggle__option {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 999px;
  font-weight: 600; font-size: 0.9375rem; color: var(--hvi-white); cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}
.plan-toggle__option:hover { color: var(--hvi-cyan); }
.plan-toggle__badge { font-size: 0.75rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; border: 1px solid currentColor; }
.plan-toggle__input:checked + .plan-toggle__option { background: var(--hvi-cyan); color: var(--hvi-midnight); }
.plan-toggle__input:focus-visible + .plan-toggle__option { outline: 2px solid var(--focus); outline-offset: 2px; }
@supports selector(:has(*)) {
  .plan-toggle { display: inline-flex; }
  .plan-panel:has(#plan-view-yearly:checked) .plan-option--monthly,
  .plan-panel:has(#plan-view-monthly:checked) .plan-option--yearly { display: none; }
}

/* The plan card under the switch: a light card centred on the dark hero,
   name, one line, the price, the button, what is included. */
.plan-panel { justify-items: center; }
.plan-toggle { justify-self: center; }
.plan-card { width: 100%; max-width: 520px; padding: 32px 28px; display: grid; gap: 14px; text-align: center; justify-items: center; }
.plan-card > * + * { margin-top: 0; }
.plan-card__name { margin: 0; }
.plan-card__desc { margin: 0; max-width: 40ch; }
.plan-card .plan-options { display: grid; gap: 18px; width: 100%; }
.plan-card .plan-option { background: none; border: 0; padding: 0; justify-items: center; gap: 4px; }
.plan-price { margin: 0; font-size: 3.5rem; line-height: 1.05; font-weight: 700; letter-spacing: -0.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.plan-price::first-letter { font-size: 0.45em; vertical-align: 0.95em; font-weight: 600; } /* the $ raised, the figure one word */
.plan-price__unit { margin: 0; font-size: 0.875rem; font-weight: 600; color: var(--text); }
.plan-price__note { margin: 4px 0 0; max-width: 36ch; }
.plan-card .plan-option--yearly { position: relative; }
/* the yearly saving as a box beside the price, with an icon and straight
   text: Midnight, white words, a cyan icon (founder request, 2026-10-20) */
.saving.saving--sticker {
  position: absolute; left: calc(50% + 80px); top: 4px; margin: 0;
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px;
  border: 1px solid color-mix(in srgb, var(--hvi-cyan) 55%, transparent); border-radius: var(--hvi-radius-md);
  background: var(--hvi-midnight); color: var(--hvi-white); text-align: left; line-height: 1.15;
  box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--hvi-midnight) 55%, transparent);
}
.saving.saving--sticker .saving__icon {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--hvi-slate); color: var(--hvi-cyan); border: 1px solid color-mix(in srgb, var(--hvi-cyan) 40%, transparent);
}
.saving.saving--sticker .saving__icon .icon { width: 16px; height: 16px; }
.saving.saving--sticker .saving__words { display: grid; gap: 2px; }
.saving.saving--sticker strong { font-size: 0.9375rem; font-weight: 700; white-space: nowrap; }
.saving.saving--sticker .saving__words span { font-size: 0.75rem; font-weight: 500; color: var(--hvi-muted); white-space: nowrap; }
@media (max-width: 479px) {     /* no room beside the figure: the box sits under it */
  .saving.saving--sticker { position: static; margin-top: 10px; }
}
.plan-card .btn { margin-top: 6px; }
.plan-card__features-title { margin: 10px 0 0; justify-self: stretch; text-align: center; font-weight: 600; color: var(--eyebrow); padding-top: 18px; border-top: 1px solid var(--border); }
:where(.plan-card__features) { margin: 0; }
.plan-card__features { list-style: none; padding: 0; display: grid; gap: 10px; justify-self: stretch; text-align: left; }
@media (min-width: 600px) { .plan-card__features { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; } } /* two columns (founder request, 2026-10-20) */
.plan-card__features li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 0.9375rem; color: var(--text); }
.plan-card__features .icon { width: 16px; height: 16px; margin-top: 3px; color: var(--hvi-cyan-on-light); }
.plan-card__usage { margin: 4px 0 0; justify-self: stretch; text-align: center; }
.plan-card__all { font-size: 0.9375rem; font-weight: 600; }

/* Two packages side by side from 960 (D-HVAC-262): Uptime Core priced and
   purchasable, Uptime Pro badged Coming soon with its authorized description
   only (D-HVAC-265, D-HVAC-267). The Pro card carries no button, link or
   form, so it is shorter and sits at the top of its row. The two cards are
   the same width (founder request, 2026-11-01). */
.plan-cards { display: grid; gap: 20px; width: 100%; max-width: 1080px; justify-items: center; align-items: start; }
@media (min-width: 960px) {
  .plan-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-panel--two .plan-card { max-width: none; }
}
.plan-card--pro { align-content: start; }
.plan-card--pro .plan-card__desc { max-width: 34ch; color: var(--text-2); }
.plan-badge {
  display: inline-block; margin-left: 4px; padding: 3px 10px; border-radius: 999px; vertical-align: 0.15em;
  font-size: 0.8125rem; font-weight: 700;
  background: var(--hvi-midnight); color: var(--hvi-white);
}

/* The category-level comparison: three columns from 720, stacked below it. */
/* Ruled on both axes (founder request, 2026-10-29): an outer border, a line
   under each row and, from 720, a line between columns. White on the raised
   section, and it lifts on hover like a card (card--pop in the template). */
.compare { display: grid; border: 1px solid var(--border-strong); border-radius: var(--hvi-radius-md); overflow: hidden; background: var(--hvi-white); }
.compare__row { display: grid; gap: 6px 0; padding: 14px 18px; border-bottom: 1px solid var(--border); color: var(--text-2); font-size: 0.9375rem; line-height: 1.5; }
.compare__row:last-child { border-bottom: 0; }
.compare__row [role="rowheader"] { color: var(--text); font-weight: 600; }
.compare__row--head { display: none; }
@media (min-width: 720px) {
  .compare__row { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); padding: 0; }
  .compare__row > * { padding: 14px 18px; }
  .compare__row > * + * { border-left: 1px solid var(--border); }
  .compare__row--head { display: grid; color: var(--text); font-weight: 700; }
}
@media (max-width: 719px) {
  .compare__row [role="cell"]::before { content: attr(data-label) ": "; font-weight: 600; color: var(--text); }
}

/* The annual saving on the pricing panel: Electric Cyan on the dark card,
   outlined so it reads as the one highlighted line in the price block. */
.saving {
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
  padding: 6px 12px; border: 1px solid var(--hvi-cyan); border-radius: var(--hvi-radius-sm);
  color: var(--hvi-cyan); font-weight: 600; font-size: 0.9375rem; line-height: 1.3;
  background: color-mix(in srgb, var(--hvi-cyan) 10%, var(--hvi-midnight));
}
.saving .icon { width: 16px; height: 16px; }

/* the closing call to action, centered as a full stop */
.cta-close { text-align: center; }
.cta-close .measure { margin-inline: auto; }
.cta-close .actions { justify-content: center; }

.note { line-height: 1.55; }
.note__label { color: var(--text); font-weight: 600; }

.nots dt, .nots dd, .events dt, .events dd { margin: 0; }
.nots dd, .events dd { margin-top: 8px; }

/* ---------- photo backdrop ----------
   Texture, not subject. A photograph sits beneath a dark section and a
   Midnight overlay sits on top of it. The section remains a Midnight
   surface; the image is never something text is placed on. Secondary copy
   directly on a backdrop is Soft White, not Muted Gray; opaque cards inside
   keep their own hierarchy. The overlay opacity is the guarantee: at
   --backdrop-overlay, even a pure-white pixel composites to a surface on
   which Soft White and Electric Cyan keep 4.5:1. Two tests hold it: one
   recomputes that bound from the tokens, one samples the rendered pixels
   behind every text element at 1440 and 390. Dark surfaces only. */

.backdrop { position: relative; isolation: isolate; --backdrop-overlay: 0.76; --text-2: var(--hvi-white); /* secondary copy is Soft White over a photograph; cards inside keep Muted Gray */ }
.backdrop::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image: var(--backdrop);
  background-size: cover; background-position: center;
  filter: saturate(0.4);
}
/* The photographs are 728–1920px wide. Past 1600px a full-bleed cover blew
   them up two to three times and they broke apart on large screens (founder
   report, 2026-11-01), so from there the photo stays 1600px wide, centred,
   and fades into the section's own Midnight at both sides. Laptop widths are
   unchanged. The mask reads only alpha; the token is just an opaque colour. */
@media (min-width: 1601px) {
  .backdrop::before {
    left: 50%; right: auto; width: 1600px; transform: translateX(-50%);
    -webkit-mask-image: linear-gradient(90deg, transparent, var(--hvi-midnight) 18%, var(--hvi-midnight) 82%, transparent);
    mask-image: linear-gradient(90deg, transparent, var(--hvi-midnight) 18%, var(--hvi-midnight) 82%, transparent);
  }
}
.backdrop::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, var(--hvi-midnight) 0%, color-mix(in srgb, var(--hvi-midnight) calc(var(--backdrop-overlay) * 100%), transparent) 22%, color-mix(in srgb, var(--hvi-midnight) calc(var(--backdrop-overlay) * 100%), transparent) 78%, var(--hvi-midnight) 100%);
}

/* ---------- the evidence page ---------- */

.report-head { border-bottom: 1px solid color-mix(in srgb, var(--hvi-muted) 22%, transparent); }
.report-head .brand-mark { margin-bottom: 8px; }

.timeline-list { list-style: none; padding: 0; display: grid; gap: 10px; }
.timeline-list__item { display: grid; grid-template-columns: 1fr; gap: 2px; font-size: 0.9375rem; line-height: 1.5; }
@media (min-width: 720px) {
  .timeline-list__item { grid-template-columns: 180px minmax(0, 1fr); gap: 20px; align-items: baseline; }
}
.timeline-list__when { color: var(--text-2); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }

.plain-list { list-style: none; padding: 0; display: grid; gap: 10px; }
.plain-list__item { display: flex; align-items: center; gap: 12px; font-size: 0.9375rem; }

/* ---------- legal pages ----------
   Prose to be read, not scanned: one column, left aligned, normal weight.
   No hero, no accent panel, no call to action. */
/* The title carries the weight; section heads are regular and one step
   above body text at every width (founder request, 2026-10-22). */
.legal h2 { margin-top: 8px; font-weight: 400; font-size: 1.25rem; line-height: 1.35; letter-spacing: 0; }
.legal-address { font-style: normal; line-height: 1.7; }

/* ---------- How It Works, Control Room, Demo, FAQ ----------
   Compositions of the components above; no new colour, type or radius. */

/* a numbered or bulleted list laid out as cards */
:where(.loop) { margin: 0; }
.loop { list-style: none; padding: 0; }
.loop .icon-badge { margin-bottom: 10px; }

/* the Demo gallery: one disclosure per proof object */
.gallery > * + * { margin-top: 0; }
.gallery__summary {
  display: flex; align-items: center; gap: 16px; min-height: 44px;
  cursor: pointer; list-style: none;
}
.gallery__summary::-webkit-details-marker { display: none; }
.gallery__summary::after {
  content: "+"; margin-left: auto; font-size: 1.5rem; font-weight: 500; line-height: 1;
  color: var(--text);
}
.gallery[open] > .gallery__summary::after { content: "\2212"; }
.gallery__body { margin-top: 20px; }
/* the diagnostic examples inside an entry: closed by default, secondary to
   the situation (website review, 2026-10-31) */
.gallery__evidence { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border); }
.gallery__evidence > summary { cursor: pointer; padding: 10px 0; font-weight: 600; }
.gallery__evidence > summary::marker { color: var(--text); }
.gallery__evidence[open] > .grid { margin-top: 14px; }
.gallery__evidence > a { display: inline-block; margin-top: 16px; }
/* What happens → what it does → what the team still does, as three short
   rows; side by side from 960. */
/* More air between the lines (founder request, 2026-10-29): the package line
   stands apart from the labels, and each label from its text. */
.gallery__package { margin: 0 0 18px; }
.gallery__facts { margin: 0; display: grid; gap: 22px; }
.gallery__facts dd { margin: 10px 0 0; max-width: 60ch; line-height: 1.65; }
@media (min-width: 960px) { .gallery__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } }

/* the FAQ (finish-website handoff, 2026-10-16): category headings always
   visible; each question a native <details>, closed until asked. The row is
   the tap target, and an answer opens beneath it, so nothing above moves. */
.faq__heading { margin: 0 0 12px; }
.faq__list { max-width: 72ch; border-top: 1px solid var(--border-strong); }
.faq__item { border-bottom: 1px solid var(--border); scroll-margin-top: 96px; }
.faq__q {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 56px; padding: 14px 4px 14px 0;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "+"; flex: none; width: 24px; text-align: center;
  font-size: 1.5rem; font-weight: 500; line-height: 1; color: var(--text);
}
.faq__item[open] > .faq__q::after { content: "\2212"; }
.faq__q h3 { margin: 0; font-size: 1.125rem; }
/* A retired question's id, kept so old links still open its successor; out of the layout. */
.faq__anchor { position: absolute; }
.faq__q:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: var(--hvi-radius-sm); }
.faq__a { display: grid; gap: 10px; padding: 0 0 22px; }
.faq__a > * { margin: 0; }
.faq__points { margin: 0; padding-left: 1.25em; display: grid; gap: 6px; }


/* A numbered ledger of rules (Diagnostic Evidence's refusals): one row per
   rule, number · rule · why, separated by hairlines rather than boxed. */
:where(.ledger) { margin: 0; }
.ledger { list-style: none; padding: 0; border-top: 1px solid var(--border-strong); }
.ledger__row {
  display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 8px 16px; align-items: baseline;
  padding: 24px 0; border-bottom: 1px solid var(--border);
}
.ledger__num {
  color: var(--eyebrow); font-weight: 600; font-size: 1.25rem; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
}
.ledger__title { margin: 0; }
.ledger__body { margin: 0; grid-column: 2; max-width: 60ch; }
@media (min-width: 720px) {
  .ledger__row { grid-template-columns: 4rem minmax(0, 5fr) minmax(0, 7fr); gap: 32px; padding: 28px 0; }
  .ledger__num { font-size: 1.5rem; }
  .ledger__body { grid-column: 3; }
}

/* ---------- the instrument panel (Diagnostic Evidence's eight tests) ----------
   A numbered list grouped by source and a readout, on the grey panel (founder
   request, 2026-10-16: grey, not blue). Cyan appears only as marks, never as
   text, because cyan text on a light ground fails AA. Without the script
   every readout shows in order. With it (.is-ready), a phone gets an
   accordion and a desktop a list beside one readout: the readouts share the
   right-hand column, stretch to the list's height, and carry the test's icon
   in the space beneath the two halves. */
.instrument { display: grid; gap: 0; }
.instrument > * + * { margin-top: 0; }
.instrument__group { padding: 4px 0 12px; }
.instrument__item + .instrument__group { padding-top: 24px; }
.instrument__note { margin: 6px 0 0; max-width: 46ch; }
.instrument__trigger {
  display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto; align-items: center; gap: 12px;
  width: 100%; min-height: 48px; padding: 12px 14px; margin: 2px 0;
  background: transparent; color: var(--text); font: inherit; font-weight: 600; font-size: 1rem; text-align: left;
  border: 0; border-left: 3px solid transparent; border-radius: var(--hvi-radius-sm); cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.instrument__trigger:hover { background: color-mix(in srgb, var(--hvi-white) 55%, transparent); }
.instrument__trigger[aria-expanded="true"] {
  background: var(--hvi-white); border-left-color: var(--hvi-cyan);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--hvi-midnight) 8%, transparent);
}
.instrument__num { color: var(--text-2); font-size: 0.875rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.instrument__arrow { width: 16px; height: 16px; color: var(--text); transition: transform 120ms ease; }
.instrument__trigger[aria-expanded="true"] .instrument__arrow { transform: rotate(90deg); }

.instrument__panel {
  --bg-card: var(--hvi-white);
  position: relative; margin: 8px 0 16px; padding: 24px; border-radius: var(--hvi-radius-md);
  background: var(--hvi-white); border: 1px solid var(--border);
  box-shadow: 0 10px 28px -14px color-mix(in srgb, var(--hvi-midnight) 30%, transparent);
  display: grid; gap: 14px; align-content: start;
}
.instrument__panel > * { margin: 0; }
.instrument__panel[hidden] { display: none; }
.instrument__title { margin: 0; }
.instrument__halves { display: grid; gap: 12px; position: relative; z-index: 1; }
.instrument__half {
  padding: 16px 18px; border-radius: var(--hvi-radius-sm);
  background: color-mix(in srgb, var(--hvi-white) 90%, var(--hvi-muted));
  border-left: 3px solid var(--hvi-cyan);
}
.instrument__half .body { margin: 8px 0 0; color: var(--hvi-midnight); }
.instrument__half--refuses { border-left-color: var(--hvi-midnight); }
.instrument__half-label { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; font-size: 0.875rem; letter-spacing: 0.02em; color: var(--hvi-midnight); }
.instrument__half-label .icon { width: 16px; height: 16px; color: var(--hvi-midnight); }

/* the test's scene: a small animated line drawing filling the readout's
   lower half (founder request, 2026-10-16). Decorative; the heading and the
   two halves carry the meaning. Greys and Midnight, cyan as the only accent,
   slow loops; prefers-reduced-motion stops them and each scene reads at rest. */
.instrument__scene { align-self: stretch; line-height: 0; min-height: 150px; display: grid; align-items: center; }
.scene { display: block; width: 100%; height: auto; max-height: 320px; overflow: visible; }
.scene .sc-fill { fill: color-mix(in srgb, var(--hvi-white) 88%, var(--hvi-muted)); stroke: none; }
.scene .sc-ink { fill: none; stroke: color-mix(in srgb, var(--hvi-midnight) 72%, var(--hvi-white)); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.scene .sc-line { fill: none; stroke: color-mix(in srgb, var(--hvi-muted) 60%, var(--hvi-white)); stroke-width: 2; stroke-linecap: round; }
.scene .sc-accent { fill: none; stroke: var(--hvi-cyan); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.scene .sc-thick { stroke-width: 4; }
.scene .sc-dash { stroke-dasharray: 6 9; }
.scene .sc-dot { fill: var(--hvi-cyan); }
.scene .sc-dot-muted { fill: var(--hvi-muted); }
.scene .sc-scan { fill: color-mix(in srgb, var(--hvi-cyan) 22%, transparent); }

/* the install steps' phone parts (Control Room, founder request 2026-10-18) */
.scene .sc-screen { fill: var(--hvi-white); stroke: color-mix(in srgb, var(--hvi-muted) 45%, var(--hvi-white)); stroke-width: 1; }
.scene .sc-tile { fill: color-mix(in srgb, var(--hvi-muted) 30%, var(--hvi-white)); }
.scene .sc-tile-dark { fill: var(--hvi-midnight); }
.scene .sc-dim { fill: color-mix(in srgb, var(--hvi-midnight) 10%, transparent); }
.scene .sc-sheet { fill: var(--hvi-white); stroke: color-mix(in srgb, var(--hvi-muted) 55%, var(--hvi-white)); stroke-width: 1; }
.scene .sc-row { fill: color-mix(in srgb, var(--hvi-cyan) 16%, var(--hvi-white)); }
.scene .sc-text { fill: var(--hvi-midnight); font-family: inherit; font-size: 5.8px; font-weight: 600; }
.scene .sc-text--label { font-size: 5.6px; font-weight: 500; }
.scene .sc-mover {
  offset-rotate: 0deg; offset-distance: 0%;
  animation: sc-move var(--dur, 4s) ease-in-out var(--delay, 0s) infinite;
}
.scene .sc-spin { animation: sc-spin 12s linear infinite; }
.scene .sc-spin-slow { animation: sc-spin 6s linear infinite; }
.scene .sc-ring { animation: sc-ring 2.4s ease-in-out infinite; }
.scene .sc-twinkle { animation: sc-twinkle 3.2s ease-in-out infinite; }
.scene .sc-pulse { animation: sc-pulse 3s ease-in-out infinite; }
.scene .sc-scan { animation: sc-scan 4.5s ease-in-out infinite; }
.scene .sc-later { animation-delay: -0.8s; }
.scene .sc-latest { animation-delay: -1.6s; }
.scene .sc-scan-later { animation-delay: -1.2s; }

@keyframes sc-move {
  0% { offset-distance: 0%; opacity: 0; }
  10% { opacity: 1; }
  85% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
@keyframes sc-spin { to { transform: rotate(360deg); } }
@keyframes sc-ring { 0%, 100% { opacity: 0.15; } 40%, 60% { opacity: 1; } }
@keyframes sc-twinkle { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
@keyframes sc-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@keyframes sc-scan { 0% { transform: translateY(0); } 50% { transform: translateY(140px); } 100% { transform: translateY(0); } }

/* at rest (reduced motion): every moving dot shows at the middle of its path */
@media (prefers-reduced-motion: reduce) {
  .scene .sc-mover { offset-distance: 55%; opacity: 1; }
}

@media (min-width: 960px) {
  .instrument.is-ready {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: 32px;
    grid-template-rows: repeat(var(--instrument-rows), auto) 1fr;
  }
  .instrument.is-ready .instrument__group,
  .instrument.is-ready .instrument__trigger { grid-column: 1; }
  .instrument.is-ready .instrument__item { display: contents; }
  .instrument.is-ready .instrument__panel {
    grid-column: 2; grid-row: 1 / -1; margin: 0; padding: 32px;
    grid-template-rows: auto auto auto 1fr;
  }
  .instrument.is-ready .instrument__arrow { transform: none; opacity: 0; }
  .instrument.is-ready .instrument__trigger[aria-expanded="true"] .instrument__arrow { opacity: 1; transform: none; }
  .instrument__halves { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- the included capabilities (Pricing) ----------
   A set, not a sequence (D-HVAC-268 §1, Brand Book v0.20 §10): unconnected
   cards, no numbers, arrows or connectors. The Control Room is the surface
   they report into, so it is the dark frame around them, its label at the
   top, rather than a last card. One column on a phone, two from 720, all
   five side by side from 1200. */
.capability-set { border-radius: var(--hvi-radius-lg); padding: 20px; display: grid; gap: 20px; }
@media (min-width: 720px) { .capability-set { padding: 32px; gap: 28px; } }
.capability-set__surface > * + * { margin-top: 8px; }
.capability-set__surface .h3 { margin-top: 10px; }
:where(.capabilities) { margin: 0; }
.capabilities { list-style: none; padding: 0; display: grid; gap: 16px; }
@media (min-width: 720px) { .capabilities { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) {
  .capabilities { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .capabilities--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.capability { display: grid; align-content: start; gap: 10px; }
.capability > * + * { margin-top: 0; }
.capability__name, .capability__detail { margin: 0; }

/* ---------- the receipt (Pricing's "what you pay for") ----------
   One sheet, three line items, dashed rules between them: shown apart. */
.receipt {
  max-width: 880px; background: var(--hvi-white); border-radius: var(--hvi-radius-md);
  border: 1px solid color-mix(in srgb, var(--hvi-muted) 55%, transparent);
  border-top: 6px solid var(--hvi-midnight);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--hvi-midnight) 8%, transparent),
              0 18px 40px -20px color-mix(in srgb, var(--hvi-midnight) 35%, transparent);
  padding: 8px 24px;
}
/* It lifts on hover like a card (founder request, 2026-10-29; card--pop in
   the template), and keeps its Midnight top edge while the sides take the
   accent. */
@media (hover: hover) { .receipt.card--pop:hover { border-top-color: var(--hvi-midnight); } }
.receipt__row {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 32px; align-items: baseline;
  padding: 22px 0; border-bottom: 2px dashed color-mix(in srgb, var(--hvi-muted) 55%, transparent);
}
.receipt__row:last-child { border-bottom: 0; }
.receipt__row p { margin: 0; }
.receipt__label { margin: 0 0 6px; }
.receipt__value { font-weight: 700; font-size: 1.5rem; letter-spacing: -0.01em; color: var(--hvi-midnight); font-variant-numeric: tabular-nums; white-space: nowrap; }
.receipt__value--muted { font-size: 1.125rem; font-weight: 600; }
.receipt__unit { font-size: 0.875rem; font-weight: 500; margin-left: 2px; }
.receipt__alt { display: block; margin-top: 4px; font-size: 1.125rem; font-weight: 600; }  /* the yearly price beneath the monthly */
@media (min-width: 720px) {
  .receipt { padding: 8px 40px; }
  .receipt__row { grid-template-columns: minmax(0, 1fr) auto; }
  .receipt__value { text-align: right; }
}

/* ---------- the Contact page's details card ----------
   Beside the form and as tall as it: the light lockup, then one row per way
   to reach us, each with its icon in a Midnight disc. */
.contact-page { align-items: stretch; }
.contact-card { font-style: normal; display: grid; align-content: start; gap: 0; }
.contact-card > * + * { margin-top: 0; }
.contact-card__mark { display: block; padding-bottom: 28px; }
.contact-row {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 18px; align-items: center;
  padding: 22px 0; border-top: 1px solid var(--border);
}
.contact-row__icon {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: var(--hvi-midnight); color: var(--hvi-cyan);
  box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--hvi-midnight) 55%, transparent);
}
.contact-row__icon .icon { width: 22px; height: 22px; }
.contact-row__label { margin: 0 0 4px; font-size: 0.75rem; }
.contact-row__value { margin: 0; font-size: 1.0625rem; font-weight: 500; line-height: 1.5; color: var(--text); }