/*
 * GasPad website. One stylesheet for every page.
 *
 * Built on the same system as kerbalert.co.uk: Plus Jakarta
 * Sans, one heavy display face, monochrome ink on white, generous sections,
 * real phone screens. The accent is the app's own "flame blue" (AccentColor in
 * the Xcode project: #1A56DB light, #4089FF dark), and status colours carry the
 * same meaning they do in the app: green passes, orange is At Risk, red is
 * Immediately Dangerous.
 */

@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-display: swap; font-weight: 400; src: url("../fonts/plus-jakarta-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-display: swap; font-weight: 500; src: url("../fonts/plus-jakarta-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-display: swap; font-weight: 600; src: url("../fonts/plus-jakarta-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-display: swap; font-weight: 700; src: url("../fonts/plus-jakarta-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-display: swap; font-weight: 800; src: url("../fonts/plus-jakarta-sans-latin-800-normal.woff2") format("woff2"); }

:root {
  color-scheme: light;

  --color-ink: #ffffff;          /* page */
  --color-surface: #ffffff;
  --color-band: #f4f6f9;         /* alternating sections, the tiled wall */
  --color-stroke: #e4e8ee;
  --color-paper: #0b1628;        /* text: near-black with a navy bias, from the icon's top bar */
  --color-muted: #5f6b7d;
  --color-muted-soft: #8a94a6;
  --color-flame: #1a56db;
  --color-flame-dim: #e8effc;
  --color-on-flame: #ffffff;
  --color-pass: #0f7a4d;
  --color-pass-dim: #e4f5ec;
  --color-risk: #b45309;
  --color-risk-dim: #fdf0e3;
  --color-danger: #c62828;
  --color-danger-dim: #fdeaea;
  --color-teal: #0e7490;
  --color-teal-dim: #e2f4f8;
  --color-indigo: #4f46e5;
  --color-indigo-dim: #ecebfd;
  --color-grey-dim: #eef0f3;
  --color-brown: #8a6a43;
  --color-brown-dim: #f4ede4;

  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  --container: 1160px;
  --gutter: clamp(20px, 5vw, 40px);
  --header-h: 64px;
  --radius: 16px;
  --radius-lg: 28px;
  --section-y: clamp(88px, 12vw, 168px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-ink: #070b12;
    --color-surface: #101722;
    --color-band: #0b111b;
    --color-stroke: #1d2735;
    --color-paper: #f3f5f9;
    --color-muted: #9aa4b5;
    --color-muted-soft: #66707f;
    --color-flame: #4089ff;
    --color-flame-dim: #0f203a;
    --color-on-flame: #ffffff;
    --color-pass: #3ccf8e;
    --color-pass-dim: #0c2619;
    --color-risk: #ffa94d;
    --color-risk-dim: #2d1c0b;
    --color-danger: #ff6b6b;
    --color-danger-dim: #33141a;
    --color-teal: #4fd1e8;
    --color-teal-dim: #0b2830;
    --color-indigo: #8b85ff;
    --color-indigo-dim: #1a1840;
    --color-grey-dim: #1a2230;
    --color-brown: #c9a77c;
    --color-brown-dim: #2a2116;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-ink: #070b12;
  --color-surface: #101722;
  --color-band: #0b111b;
  --color-stroke: #1d2735;
  --color-paper: #f3f5f9;
  --color-muted: #9aa4b5;
  --color-muted-soft: #66707f;
  --color-flame: #4089ff;
  --color-flame-dim: #0f203a;
  --color-on-flame: #ffffff;
  --color-pass: #3ccf8e;
  --color-pass-dim: #0c2619;
  --color-risk: #ffa94d;
  --color-risk-dim: #2d1c0b;
  --color-danger: #ff6b6b;
  --color-danger-dim: #33141a;
  --color-teal: #4fd1e8;
  --color-teal-dim: #0b2830;
  --color-indigo: #8b85ff;
  --color-indigo-dim: #1a1840;
  --color-grey-dim: #1a2230;
  --color-brown: #c9a77c;
  --color-brown-dim: #2a2116;
}

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

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background-color: var(--color-ink);
  color: var(--color-paper);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, svg, picture { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
a { color: inherit; }

:focus-visible { outline: 2px solid var(--color-flame); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--color-flame); color: var(--color-on-flame); }

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  padding: 10px 16px; border-radius: 999px;
  background: var(--color-paper); color: var(--color-ink);
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

.display {
  font-size: clamp(2.75rem, 1.2rem + 6.4vw, 6rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.h2 {
  font-size: clamp(2.125rem, 1.3rem + 3.3vw, 3.75rem);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -0.038em;
  text-wrap: balance;
}
.h3 { font-size: 1.25rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.015em; }
.lede {
  font-size: clamp(1.125rem, 1rem + 0.45vw, 1.3125rem);
  line-height: 1.5;
  color: var(--color-muted);
  text-wrap: pretty;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.875rem; font-weight: 700; letter-spacing: -0.005em;
  color: var(--color-flame);
}
.muted { color: var(--color-muted); }
.tnum { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- brand */

.brand {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px;
  color: var(--color-paper);
  text-decoration: none;
  transition: transform 160ms var(--ease-out);
}
.brand:active { transform: scale(0.97); }
.brand img { width: 32px; height: 32px; border-radius: 23%; }
.brand span { font-size: 1.3125rem; font-weight: 800; letter-spacing: -0.04em; }

.app-icon {
  width: 64px; height: 64px;
  border-radius: 23%;
  box-shadow: 0 0 0 1px var(--color-stroke);
}

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px;
  border: 0; border-radius: 999px;
  font: inherit; font-size: 0.9375rem; font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 200ms ease, box-shadow 200ms ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.97); transition-duration: 100ms; }
.btn svg { width: 18px; height: 18px; }
.btn--primary { background: var(--color-flame); color: var(--color-on-flame); }
.btn--ink { background: var(--color-paper); color: var(--color-ink); }
.btn--ghost { background: transparent; color: var(--color-paper); box-shadow: inset 0 0 0 1px var(--color-stroke); }
.btn--small { min-height: 36px; padding: 0 16px; font-size: 0.875rem; }
.btn--large { min-height: 52px; padding: 0 28px; font-size: 1.0625rem; }

.text-link {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--color-muted-soft);
  transition: text-decoration-color 200ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: color-mix(in srgb, var(--color-flame) 86%, var(--color-paper)); }
  .btn--ink:hover { background: color-mix(in srgb, var(--color-paper) 86%, var(--color-ink)); }
  .btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--color-muted-soft); }
  .text-link:hover { text-decoration-color: currentColor; }
}

/* ---------------------------------------------------------------- store badges */

.badges { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }
.badge { display: block; line-height: 0; }
.badge img { height: 48px; width: auto; }
.badge--google img { height: 71.4px; margin: -11.7px -11.4px; }

/* ---------------------------------------------------------------- header */

.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  height: var(--header-h);
  background: color-mix(in srgb, var(--color-ink) 78%, transparent);
  -webkit-backdrop-filter: saturate(1.8) blur(18px);
  backdrop-filter: saturate(1.8) blur(18px);
  box-shadow: 0 1px 0 transparent;
  transition: box-shadow 200ms ease;
}
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--color-stroke); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 100%; }
.site-nav { display: none; }
.site-nav ul { display: flex; gap: 4px; padding: 0; list-style: none; }
.site-nav a {
  display: inline-flex; align-items: center;
  min-height: 40px; padding: 0 12px;
  border-radius: 999px;
  font-size: 0.9375rem; font-weight: 500;
  color: var(--color-muted);
  text-decoration: none;
  transition: color 200ms ease;
}
.site-nav a[aria-current="page"] { color: var(--color-paper); }
@media (hover: hover) and (pointer: fine) { .site-nav a:hover { color: var(--color-paper); } }
@media (min-width: 900px) { .site-nav { display: block; } }

/* ---------------------------------------------------------------- sections */

.section { padding-block: var(--section-y); }
.section--tint { background: var(--color-band); }
.section__head { max-width: 780px; }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head .lede { margin-top: 20px; }
.section__head .eyebrow { margin-bottom: 16px; }

/* ---------------------------------------------------------------- hero */

.hero {
  position: relative;
  padding-top: clamp(40px, 7vw, 96px);
  overflow: hidden;
  isolation: isolate;
  --phone-w: clamp(260px, 29vw, 330px);
}
.hero__copy { max-width: 1120px; margin-inline: auto; text-align: center; }
.hero__title { font-size: clamp(2.75rem, 1rem + 5.4vw, 5.25rem); }
.hero__title .line { display: block; }
.hero__title .line + .line { color: var(--color-flame); }
.hero__lede { max-width: 620px; margin: 24px auto 0; }
.hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; }
.hero__note { margin-top: 16px; font-size: 0.875rem; color: var(--color-muted); }

/* The stage: the phone stands in front of a tiled kitchen wall, the way an
   engineer's phone does on the worktop, with the CP12 it has just made tucked
   behind it and the copies it's sending to either side. The wall clips the
   phone's lower edge. */
.hero__stage {
  position: relative;
  height: calc(var(--phone-w) * 2.09 - 40px);
  margin-top: clamp(48px, 7vw, 80px);
}
.tiles {
  position: absolute;
  inset: 34% 0 0;
  background-color: var(--color-band);
  background-image:
    linear-gradient(var(--color-stroke) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-stroke) 1px, transparent 1px);
  background-size: 64px 40px;
  background-position: center top;
  box-shadow: inset 0 1px 0 var(--color-stroke);
}
.worktop {
  position: absolute;
  inset: auto 0 0;
  height: 28px;
  z-index: 3;
  background: var(--color-ink);
  box-shadow: 0 -1px 0 var(--color-stroke), 0 -10px 0 color-mix(in srgb, var(--color-band) 55%, var(--color-stroke));
}
.hero__phone {
  position: absolute;
  left: 50%;
  bottom: -40px;
  width: var(--phone-w);
  translate: -50% 0;
  z-index: 2;
}

/* The CP12 behind the phone: an A4 landscape sheet, drawn in HTML. */
.hero__sheet {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 60px;
  width: clamp(300px, 34vw, 430px);
  translate: calc(-100% - var(--phone-w) * 0.18) 0;
  rotate: -4deg;
  display: none;
}
@media (min-width: 900px) { .hero__sheet { display: block; } }

.hero__chips {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 22%;
  translate: calc(var(--phone-w) / 2 + 32px) 0;
  display: none;
  gap: 10px;
}
@media (min-width: 960px) { .hero__chips { display: grid; } }

.chip {
  display: flex; align-items: center; gap: 12px;
  width: max-content;
  padding: 10px 16px 10px 10px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--color-surface) 82%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.8);
  backdrop-filter: blur(18px) saturate(1.8);
  box-shadow: inset 0 0 0 1px var(--color-stroke), 0 14px 32px -16px rgb(11 22 40 / 0.35);
  font-size: 0.875rem;
  line-height: 1.3;
  opacity: 0;
  translate: -12px 0;
  transition: opacity 320ms var(--ease-out), translate 420ms var(--ease-out);
}
.chip.is-on { opacity: 1; translate: 0 0; }
.chip b { display: block; font-weight: 700; letter-spacing: -0.01em; }
.chip span span { display: block; color: var(--color-muted); font-size: 0.8125rem; }
.chip__icon {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 11px;
  background: var(--color-pass-dim); color: var(--color-pass);
  flex: none;
}
.chip__icon svg { width: 18px; height: 18px; }
.chip:nth-child(2) { margin-left: 28px; }
.chip:nth-child(3) { margin-left: 8px; }

/* ---------------------------------------------------------------- phone frame */

/* A generic modern phone drawn in CSS, as on kerbalert.co.uk. The screen is
   390 x 844 points; screenshots are 390 x 797, the screen below the status bar. */
.phone {
  position: relative;
  padding: 3.2%;
  border-radius: 15.5% / 7.2%;
  background: #1b1b1c;
  box-shadow:
    inset 0 0 0 1.5px #3a3a3c,
    inset 0 0 0 5px #0c0c0d,
    0 1px 1px rgb(0 0 0 / 0.08),
    0 24px 48px -28px rgb(11 22 40 / 0.45),
    0 48px 96px -56px rgb(11 22 40 / 0.35);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .phone {
    background: #232325;
    box-shadow: inset 0 0 0 1.5px #4a4a4e, inset 0 0 0 5px #0c0c0d, 0 0 0 1px rgb(255 255 255 / 0.06), 0 30px 80px -30px rgb(0 0 0 / 0.9);
  }
}
:root[data-theme="dark"] .phone {
  background: #232325;
  box-shadow: inset 0 0 0 1.5px #4a4a4e, inset 0 0 0 5px #0c0c0d, 0 0 0 1px rgb(255 255 255 / 0.06), 0 30px 80px -30px rgb(0 0 0 / 0.9);
}

.phone__screen {
  --app-bg: #f2f2f7;
  --app-card: #ffffff;
  --app-text: #000000;
  --app-text-2: rgb(60 60 67 / 0.6);
  --app-flame: #1a56db;
  --app-pass: #34c759;
  position: relative;
  aspect-ratio: 390 / 844;
  overflow: hidden;
  border-radius: 12.4% / 5.8%;
  background: var(--app-bg);
  color: var(--app-text);
  isolation: isolate;
  container-type: inline-size;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .phone__screen {
    --app-bg: #000000; --app-card: #1c1c1e; --app-text: #ffffff; --app-text-2: rgb(235 235 245 / 0.6); --app-flame: #4089ff; --app-pass: #30d158;
  }
}
:root[data-theme="dark"] .phone__screen {
  --app-bg: #000000; --app-card: #1c1c1e; --app-text: #ffffff; --app-text-2: rgb(235 235 245 / 0.6); --app-flame: #4089ff; --app-pass: #30d158;
}
.phone__island {
  position: absolute; z-index: 5;
  top: 1.35%; left: 50%;
  width: 31%; height: 3.6%;
  translate: -50% 0;
  border-radius: 999px;
  background: #000;
}
.phone__status {
  position: absolute; z-index: 4;
  inset: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  height: 5.6%;
  padding: 0 8% 0 11%;
  font-size: 3.4cqi;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--app-text);
  background: var(--app-bg);
}
.phone__status svg { height: 0.95em; width: auto; }
.phone__status-icons { display: flex; align-items: center; gap: 5px; }
.phone__shot { position: absolute; inset: 5.6% 0 0; }
.phone__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* ---------------------------------------------------------------- hero: sending screen */

/* Live, not a screenshot: GasPad's sending page (SendProgressView). Issue and
   Send, then each copy ticks off as its email goes, landlord, tenant and the
   engineer's own. Sizes are in cqi so it scales with the phone. */
.send {
  position: absolute;
  inset: 5.6% 0 0;
  display: flex; flex-direction: column; align-items: center;
  padding: 9cqi 6cqi 0;
  text-align: center;
}
/* The record being sent, as a small A4 landscape page. */
.send__pdf {
  position: relative;
  width: 56cqi;
  aspect-ratio: 297 / 210;
  padding: 2.4cqi;
  border-radius: 1.6cqi;
  background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08), 0 6px 18px rgb(0 0 0 / 0.1);
  display: grid; grid-template-rows: auto 1fr auto; gap: 1.6cqi;
  text-align: left;
}
.send__pdf i { display: block; border-radius: 0.6cqi; background: #e6ebf3; }
.send__pdf .bar { height: 3.6cqi; background: #1a56db; }
.send__pdf .rows { display: grid; gap: 1.2cqi; align-content: start; }
.send__pdf .rows i { height: 1.3cqi; }
.send__pdf .rows i:nth-child(2) { width: 82%; }
.send__pdf .rows i:nth-child(3) { width: 90%; }
.send__pdf .rows i:nth-child(4) { width: 64%; }
.send__pdf .rows i:nth-child(5) { width: 88%; }
.send__pdf .rows i:nth-child(6) { width: 76%; }
.send__pdf .rows i:nth-child(7) { width: 52%; }
.send__pdf .due { width: 40%; height: 4.2cqi; background: #1a56db; }
.send__pdf b {
  position: absolute; right: -2.6cqi; bottom: -2.6cqi;
  padding: 1cqi 2.2cqi;
  border-radius: 999px;
  background: var(--app-card);
  color: var(--app-text);
  font: 600 3cqi/1.2 Inter, var(--font-sans);
  letter-spacing: 0.01em;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.14);
}
.send__mark {
  position: relative;
  display: grid; place-items: center;
  width: 19cqi; height: 19cqi;
  border-radius: 50%;
  background: color-mix(in srgb, var(--app-flame) 14%, transparent);
  color: var(--app-flame);
  transition: background-color 300ms ease, color 300ms ease;
}
.send__mark svg {
  position: absolute;
  width: 9cqi; height: 9cqi;
  transition: opacity 250ms var(--ease-out), scale 350ms var(--ease-out), filter 250ms ease;
}
.send__mark .is-done { opacity: 0; scale: 0.6; filter: blur(3px); }
.send.is-sent .send__mark { background: color-mix(in srgb, var(--app-pass) 16%, transparent); color: var(--app-pass); }
.send.is-sent .send__mark .is-going { opacity: 0; scale: 0.6; filter: blur(3px); }
.send.is-sent .send__mark .is-done { opacity: 1; scale: 1; filter: none; }
.send__title {
  margin-top: 8cqi;
  font: 700 7cqi/1.15 Inter, var(--font-sans);
  letter-spacing: -0.02em;
}
.send__detail {
  margin-top: 1.6cqi;
  font: 400 4cqi/1.35 Inter, var(--font-sans);
  color: var(--app-text-2);
  max-width: 70cqi;
  text-wrap: balance;
}
/* Swap the words with a blurred cross-fade so the change reads as one thing. */
.swap { display: grid; }
.swap > * { grid-area: 1 / 1; transition: opacity 250ms ease, filter 250ms ease; }
.swap > .is-later { opacity: 0; filter: blur(2px); }
.send.is-sent .swap > .is-now { opacity: 0; filter: blur(2px); }
.send.is-sent .swap > .is-later { opacity: 1; filter: none; }

.copies {
  display: grid; gap: 3cqi;
  width: 100%;
  margin-top: 6cqi;
  padding: 0;
  list-style: none;
}
.copy {
  display: flex; align-items: center; gap: 3.4cqi;
  padding: 3.6cqi 4cqi;
  border-radius: 4.5cqi;
  background: #fff;
  color: #000;
  text-align: left;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 4px 14px rgb(0 0 0 / 0.06);
  transition: translate 500ms var(--ease-out), opacity 400ms var(--ease-out);
}
.copy__doc {
  display: grid; place-items: center;
  width: 9cqi; height: 11.5cqi;
  border-radius: 1.5cqi;
  background: #eef3fd;
  color: #1a56db;
  flex: none;
}
.copy__doc svg { width: 5.4cqi; height: 5.4cqi; }
.copy__text { flex: 1; min-width: 0; }
.copy__text b { display: block; font: 600 4.3cqi/1.25 Inter, var(--font-sans); letter-spacing: -0.01em; }
.copy__text span { display: block; font: 400 3.3cqi/1.3 Inter, var(--font-sans); color: #8e8e93; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.copy__tick {
  position: relative;
  display: grid; place-items: center;
  width: 6.4cqi; height: 6.4cqi;
  border-radius: 50%;
  flex: none;
}
.copy__tick::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 0.6cqi solid #d1d1d6;
  border-top-color: #1a56db;
  animation: spin 700ms linear infinite;
  transition: opacity 200ms ease;
}
.copy__tick svg {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 50%;
  padding: 1.3cqi;
  background: #34c759;
  color: #fff;
  opacity: 0;
  scale: 0.5;
  transition: opacity 200ms var(--ease-out), scale 300ms var(--ease-out);
}
.copy.is-sent .copy__tick::before { opacity: 0; animation: none; }
.copy.is-sent .copy__tick svg { opacity: 1; scale: 1; }
@keyframes spin { to { rotate: 360deg; } }

.send__done {
  margin-top: 6cqi;
  display: grid; place-items: center;
  width: 100%; height: 13cqi;
  border-radius: 999px;
  background: var(--app-flame);
  color: #fff;
  font: 600 4.4cqi/1 Inter, var(--font-sans);
  opacity: 0.35;
  transition: opacity 300ms ease;
}
.send.is-sent .send__done { opacity: 1; }
.send__invoice {
  margin-top: 4cqi;
  font: 500 4cqi/1 Inter, var(--font-sans);
  color: var(--app-flame);
}

/* ---------------------------------------------------------------- the record (CP12 sheet) */

/* An A4 landscape Landlord Gas Safety Record, in the layout GasPad draws
   (GasPad/PDF/GasSafetyPDF.swift). Paper is always white, as in the app. */
.sheet {

  padding: 3.4% 3.6%;
  border-radius: 6px;
  background: #fff;
  color: #0b1628;
  box-shadow: 0 1px 2px rgb(11 22 40 / 0.08), 0 24px 60px -24px rgb(11 22 40 / 0.4);
  font-family: Inter, var(--font-sans);
  font-size: clamp(5px, 0.62vw, 8px);
  line-height: 1.3;
  container-type: inline-size;
  overflow: hidden;
}
.sheet__bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.71cqi 2.2cqi;
  border-radius: 0.98cqi;
  background: #1a56db;
  color: #fff;
}
.sheet__bar b { font-size: 2.93cqi; font-weight: 800; letter-spacing: -0.01em; }
.sheet__bar span { font-size: 1.83cqi; font-weight: 600; opacity: 0.9; }
.sheet__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.95cqi; margin-top: 2.2cqi; }
.sheet__box { padding: 1.46cqi 1.71cqi; border-radius: 0.98cqi; box-shadow: inset 0 0 0 1px #dfe5ee; }
.sheet__box h4 { margin: 0 0 0.73cqi; font-size: 1.65cqi; font-weight: 700; color: #1a56db; text-transform: uppercase; letter-spacing: 0.04em; }
.sheet__box p { font-size: 1.89cqi; color: #3c4656; }
.sheet__box p b { color: #0b1628; font-weight: 600; }
.sheet table { width: 100%; margin-top: 2.2cqi; border-collapse: collapse; font-size: 1.77cqi; }
.sheet th { padding: 0.98cqi 0.73cqi; background: #eef3fd; color: #1a56db; font-weight: 700; text-align: left; white-space: nowrap; }
.sheet td { padding: 1.1cqi 0.73cqi; border-bottom: 1px solid #e6eaf0; color: #3c4656; white-space: nowrap; }
.sheet td.ok { color: #0f7a4d; font-weight: 700; }
.sheet__checks { display: flex; flex-wrap: wrap; gap: 0.9cqi 2.4cqi; margin-top: 1.8cqi; padding: 1.1cqi 1.4cqi; border-radius: 0.8cqi; background: #f5f7fb; font-size: 1.5cqi; color: #3c4656; }
.sheet__checks b { color: #0f7a4d; font-weight: 700; }
.sheet__foot { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 1.95cqi; margin-top: 2.2cqi; align-items: end; }
.sheet__due {
  padding: 1.46cqi 1.71cqi;
  border-radius: 0.98cqi;
  background: #1a56db;
  color: #fff;
}
.sheet__due small { display: block; font-size: 1.52cqi; font-weight: 700; letter-spacing: 0.06em; opacity: 0.85; }
.sheet__due b { font-size: 3.17cqi; font-weight: 800; letter-spacing: -0.02em; }
.sheet__sig svg { width: 70%; height: 5.37cqi; color: #0b1628; }
.sheet__sig p { padding-top: 0.73cqi; border-top: 1px solid #c9d1dd; font-size: 1.65cqi; color: #5f6b7d; }
.sheet__credit { margin-top: 1.71cqi; display: flex; justify-content: space-between; font-size: 1.46cqi; color: #8a94a6; }

/* ---------------------------------------------------------------- how it works */

.steps {
  display: grid;
  gap: clamp(64px, 8vw, 48px);
  margin-top: clamp(56px, 8vw, 96px);
  padding: 0;
  list-style: none;
}
.step { display: grid; justify-items: center; text-align: center; }
.step .phone { width: min(280px, 72vw); }
.step__num {
  display: grid; place-items: center;
  width: 32px; height: 32px; margin-top: 36px;
  border-radius: 50%;
  background: var(--color-flame);
  color: var(--color-on-flame);
  font-size: 0.9375rem; font-weight: 700;
}
.step .h3 { margin-top: 14px; }
.step p { max-width: 330px; margin-top: 8px; color: var(--color-muted); }
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: 40px; }
}

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

.forms {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
  gap: 12px;
  margin-top: clamp(48px, 6vw, 72px);
  padding: 0;
  list-style: none;
}
.form {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 24px;
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--color-stroke);
}
.form__icon {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 13px;
  background: var(--color-flame-dim); color: var(--color-flame);
}
.form__icon svg { width: 22px; height: 22px; }
.form .h3 { margin-top: 20px; font-size: 1.125rem; }
.form p { margin-top: 6px; margin-bottom: 18px; color: var(--color-muted); font-size: 0.9688rem; line-height: 1.5; }
.form--teal .form__icon { background: var(--color-teal-dim); color: var(--color-teal); }
.form--risk .form__icon { background: var(--color-risk-dim); color: var(--color-risk); }
.form--indigo .form__icon { background: var(--color-indigo-dim); color: var(--color-indigo); }
.form--danger .form__icon { background: var(--color-danger-dim); color: var(--color-danger); }
.form--brown .form__icon { background: var(--color-brown-dim); color: var(--color-brown); }
.form--grey .form__icon { background: var(--color-grey-dim); color: var(--color-muted); }

.pill {
  margin-top: auto;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--color-grey-dim);
  color: var(--color-paper);
  font-size: 0.8125rem; font-weight: 700; line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
.pill--flame { background: var(--color-flame-dim); color: var(--color-flame); }
.pill--danger { background: var(--color-danger-dim); color: var(--color-danger); }
.pill--risk { background: var(--color-risk-dim); color: var(--color-risk); }

/* ---------------------------------------------------------------- feature rows */

.feature { display: grid; gap: clamp(48px, 7vw, 96px); align-items: center; }
.feature__media { display: flex; justify-content: center; }
.feature__media .phone { width: min(320px, 78vw); }
.feature__media .sheet { width: 100%; max-width: 640px; rotate: -1.5deg; }
.feature__copy .h2 { font-size: clamp(2rem, 1.3rem + 2.2vw, 3.125rem); }
.feature__copy .lede { margin-top: 20px; }
.checks { display: grid; gap: 14px; margin-top: 32px; padding: 0; list-style: none; }
.checks li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; }
.checks svg { width: 22px; height: 22px; margin-top: 2px; color: var(--color-pass); }
@media (min-width: 900px) {
  .feature { grid-template-columns: 1fr 1fr; }
  .feature--sheet { grid-template-columns: 1.25fr 1fr; gap: clamp(48px, 5vw, 72px); }
  .feature--flip .feature__media { order: 2; }
}

/* ---------------------------------------------------------------- tools */

.tools {
  display: grid;
  gap: 12px;
  margin-top: 40px;
  padding: 0;
  list-style: none;
}
.tool {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  align-items: start;
  padding: 20px;
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--color-stroke);
}
.tool .form__icon { width: 44px; height: 44px; }
.tool b { display: block; font-weight: 700; letter-spacing: -0.01em; }
.tool p { margin-top: 2px; color: var(--color-muted); font-size: 0.9688rem; line-height: 1.5; }

/* ---------------------------------------------------------------- privacy */

.promises {
  display: grid;
  gap: 1px;
  margin-top: clamp(48px, 6vw, 72px);
  padding: 0;
  list-style: none;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-stroke);
  box-shadow: 0 0 0 1px var(--color-stroke);
}
.promise { padding: clamp(24px, 3vw, 36px); background: var(--color-surface); }
.promise svg { width: 26px; height: 26px; color: var(--color-flame); }
.promise .h3 { margin-top: 20px; }
.promise p { margin-top: 8px; color: var(--color-muted); }
@media (min-width: 700px) { .promises { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .promises { grid-template-columns: repeat(3, 1fr); } }

/* ---------------------------------------------------------------- plans */

.plans {
  display: grid;
  gap: clamp(40px, 6vw, 72px);
  align-items: center;
  padding: clamp(32px, 6vw, 80px);
  border-radius: clamp(24px, 3vw, 40px);
  background: var(--color-flame-dim);
}
.plans__badge { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tag-plan {
  padding: 3px 10px;
  border-radius: 6px;
  background: var(--color-flame);
  color: var(--color-on-flame);
  font-size: 0.875rem; font-weight: 800; letter-spacing: -0.02em;
}
.tag-soon {
  padding: 3px 10px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-flame) 45%, transparent);
  color: var(--color-flame);
  font-size: 0.8125rem; font-weight: 700;
}
.plans .h2 { margin-top: 20px; }
.plans .lede { margin-top: 20px; color: var(--color-paper); opacity: 0.8; }
.plans .checks svg { color: var(--color-flame); }
.prices { display: grid; gap: 12px; }
.price {
  padding: 24px 26px;
  border-radius: 22px;
  background: var(--color-surface);
  box-shadow: 0 1px 2px rgb(11 22 40 / 0.05), 0 12px 32px -12px rgb(11 22 40 / 0.18);
}
.price small { font-size: 0.875rem; font-weight: 700; color: var(--color-muted); }
.price p { margin-top: 2px; }
.price b { font-size: clamp(2.25rem, 1.6rem + 2vw, 3rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.price span { color: var(--color-muted); font-weight: 600; }
.price em { display: block; margin-top: 6px; font-style: normal; font-size: 0.9375rem; color: var(--color-muted); }
.price__btn { width: 100%; margin-top: 18px; }
.btn.is-off { cursor: default; color: var(--color-muted); }
.btn.is-off:active { transform: none; }
.prices__code { margin: 0; padding: 12px 16px; border-radius: 14px; background: var(--color-surface); border: 1px solid var(--color-flame); color: var(--color-paper); font-size: 0.9375rem; font-weight: 600; text-wrap: pretty; }
.prices__code[hidden], [data-unsub-button][hidden] { display: none; }
.unsub__status:empty { display: none; }
.offer { display: grid; gap: 40px; align-items: start; padding-bottom: 72px; }
@media (min-width: 900px) { .offer { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 64px; } }
.offer .price__btn { margin-top: 20px; }
.offer__code { margin-top: 16px; padding: 12px 16px; border-radius: 14px; background: var(--color-flame-dim); font-size: 0.9375rem; font-weight: 600; color: var(--color-paper); text-wrap: pretty; }
.offer__code[hidden], .offer__note[hidden], .offer [data-offer-buy][hidden] { display: none; }
.offer__how h2 { margin-bottom: 12px; }
.prices__note { margin-top: 4px; font-size: 0.875rem; color: var(--color-muted); text-wrap: pretty; }
.price--best { box-shadow: inset 0 0 0 2px var(--color-flame), 0 12px 32px -12px rgb(26 86 219 / 0.35); }
@media (min-width: 900px) { .plans { grid-template-columns: 1.15fr 0.85fr; } }

/* ---------------------------------------------------------------- faq */

.faq { max-width: 820px; margin: clamp(40px, 5vw, 64px) auto 0; border-top: 1px solid var(--color-stroke); }
.faq details { border-bottom: 1px solid var(--color-stroke); interpolate-size: allow-keywords; }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 64px; padding: 18px 0;
  font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em;
  cursor: pointer; list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { flex: none; width: 20px; height: 20px; color: var(--color-muted); transition: transform 200ms var(--ease-out); }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq details::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size 260ms var(--ease-out), content-visibility 260ms allow-discrete;
}
.faq details[open]::details-content { block-size: auto; }
.faq__answer { padding: 0 48px 24px 0; color: var(--color-muted); }
.faq__answer p + p { margin-top: 0.8em; }
.faq__answer a { color: var(--color-paper); }
.faq__more { margin-top: 32px; text-align: center; color: var(--color-muted); }

/* ---------------------------------------------------------------- download */

.download { text-align: center; }
.download .app-icon { width: 88px; height: 88px; margin: 0 auto 32px; }
.download .lede { max-width: 560px; margin: 20px auto 0; }
.download .badges { justify-content: center; margin-top: 36px; }

/* ---------------------------------------------------------------- note */

.note-wrap { padding-block: clamp(48px, 7vw, 80px); }
.note {
  display: flex; gap: 14px; align-items: flex-start;
  max-width: 820px; margin-inline: auto;
  padding: 20px 24px;
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px var(--color-stroke);
  font-size: 0.9375rem;
  color: var(--color-muted);
}
.note svg { flex: none; width: 22px; height: 22px; margin-top: 1px; color: var(--color-danger); }
.note strong, .note a { color: var(--color-paper); }
.note a { font-weight: 700; white-space: nowrap; }

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

.site-footer { padding: 72px 0 40px; border-top: 1px solid var(--color-stroke); font-size: 0.9375rem; }
.site-footer__top { display: grid; gap: 40px; }
.site-footer__brand p { margin-top: 12px; color: var(--color-muted); max-width: 22rem; }
.site-footer__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
.site-footer h2 { font-size: 0.875rem; font-weight: 700; color: var(--color-paper); }
.site-footer ul { display: grid; gap: 2px; margin-top: 12px; padding: 0; list-style: none; }
.site-footer li a {
  display: inline-flex; align-items: center;
  min-height: 34px;
  color: var(--color-muted);
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color 200ms ease;
}
@media (hover: hover) and (pointer: fine) { .site-footer li a:hover { color: var(--color-paper); } }
.site-footer__legal {
  display: grid; gap: 10px;
  margin-top: 56px; padding-top: 24px;
  border-top: 1px solid var(--color-stroke);
  font-size: 0.8125rem; line-height: 1.55;
  color: var(--color-muted);
}
@media (min-width: 900px) {
  .site-footer__top { grid-template-columns: 1.2fr 2fr; }
  .site-footer__cols { grid-template-columns: repeat(3, 1fr); }
}

/* ---------------------------------------------------------------- long-form pages */

.page-head { padding-block: clamp(48px, 8vw, 104px) clamp(32px, 5vw, 56px); }
.page-head .eyebrow { margin-bottom: 14px; }
.page-head .h2 { max-width: 820px; }
.page-head .lede { max-width: 680px; margin-top: 16px; }
.page-meta { margin-top: 20px; font-size: 0.875rem; color: var(--color-muted); }

.doc { display: grid; gap: 48px; padding-bottom: var(--section-y); }
.toc { align-self: start; font-size: 0.9375rem; }
.toc h2 { font-size: 0.875rem; font-weight: 700; }
.toc ol { display: grid; gap: 2px; margin-top: 12px; padding: 0; list-style: none; }
.toc a { display: block; padding: 5px 0; color: var(--color-muted); text-decoration: none; transition: color 200ms ease; }
@media (hover: hover) and (pointer: fine) { .toc a:hover { color: var(--color-paper); } }
@media (min-width: 1000px) {
  .doc { grid-template-columns: 240px minmax(0, 720px); gap: 80px; }
  .toc { position: sticky; top: calc(var(--header-h) + 32px); }
}

.prose { max-width: 720px; }
.prose > * + * { margin-top: 1em; }
.prose h2 { margin-top: 2.4em; font-size: 1.5rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.025em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.8em; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em; }
.prose p, .prose li { color: color-mix(in srgb, var(--color-paper) 82%, var(--color-ink)); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 0.45em; }
.prose a { font-weight: 600; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.prose th, .prose td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--color-stroke); text-align: left; vertical-align: top; }
.prose th { font-weight: 700; }
.table-scroll { overflow-x: auto; }
.callout { padding: 20px 24px; border-radius: var(--radius); background: var(--color-band); }
.callout > * + * { margin-top: 0.6em; }

/* A fact only the owner can supply. Loud on purpose so none ship unfilled. */
mark.fill {
  padding: 0 4px;
  border-radius: 4px;
  background: var(--color-risk-dim);
  color: var(--color-paper);
  box-shadow: inset 0 0 0 1px var(--color-risk);
}

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

.help-grid { display: grid; gap: 12px; margin-bottom: clamp(56px, 7vw, 88px); }
.help-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 24px;
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px var(--color-stroke);
  text-decoration: none;
  transition: transform 160ms var(--ease-out), box-shadow 200ms ease;
}
.help-card:active { transform: scale(0.985); }
.help-card svg { width: 24px; height: 24px; margin-bottom: 8px; color: var(--color-flame); }
.help-card p { color: var(--color-muted); }
.help-card b { overflow-wrap: anywhere; }
@media (hover: hover) and (pointer: fine) { .help-card:hover { box-shadow: inset 0 0 0 1px var(--color-muted-soft); } }
@media (min-width: 800px) { .help-grid { grid-template-columns: repeat(3, 1fr); } }

.steps-list { counter-reset: s; padding: 0 !important; list-style: none; }
.steps-list li { position: relative; padding-left: 44px; counter-increment: s; }
.steps-list li::before {
  content: counter(s);
  position: absolute; left: 0; top: 0;
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--color-flame); color: var(--color-on-flame);
  font-size: 0.875rem; font-weight: 700;
}

/* ---------------------------------------------------------------- 404 */

.lost { display: grid; justify-items: center; padding-block: clamp(72px, 12vw, 160px); text-align: center; }
.lost .app-icon { width: 96px; height: 96px; opacity: 0.9; }
.lost .h2 { margin-top: 32px; }
.lost .lede { max-width: 460px; margin-top: 16px; }
.lost .btn { margin-top: 32px; }

/* ---------------------------------------------------------------- motion */

/* One orchestrated entrance on first paint; everything else a quiet fade-up
   as it scrolls into view, once. Keyframes are fine here: none of it is
   interactive, so nothing needs interrupting mid-flight. The sending screen
   and chips use transitions, which retarget if they're cut short. */
@keyframes rise { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } }
@keyframes phone-rise { from { opacity: 0; transform: translateY(90px); } }
@keyframes sheet-in { from { opacity: 0; transform: translate(60px, 30px) rotate(4deg); } }

.js .hero__title .line,
.js .hero__lede,
.js .hero__cta { animation: rise 900ms var(--ease-out) both; }
.js .hero__title .line:nth-child(2) { animation-delay: 90ms; }
.js .hero__lede { animation-delay: 200ms; }
.js .hero__cta { animation-delay: 300ms; }
.js .hero__phone .phone { animation: phone-rise 1100ms var(--ease-drawer) 380ms both; }
.js .hero__sheet .sheet { animation: sheet-in 1200ms var(--ease-out) 750ms both; }

@keyframes reveal-in { from { opacity: 0; transform: translateY(24px); } }
.js .reveal.is-in { animation: reveal-in 800ms var(--ease-out) backwards; }
.js .reveal.is-in[data-delay="1"] { animation-delay: 70ms; }
.js .reveal.is-in[data-delay="2"] { animation-delay: 140ms; }
.js .reveal.is-in[data-delay="3"] { animation-delay: 210ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .hero__title .line,
  .js .hero__lede,
  .js .hero__cta,
  .js .hero__phone .phone,
  .js .hero__sheet .sheet { animation: fade 400ms ease both; }
  .js .reveal.is-in { animation: fade 400ms ease backwards; }
  .chip { translate: 0 0; transition: opacity 300ms ease; }
  .copy__tick::before { animation: none; }
  .btn:active, .brand:active, .help-card:active { transform: none; }
  .faq details::details-content { transition: none; }
}
@keyframes fade { from { opacity: 0; } }

@media (prefers-reduced-transparency: reduce) {
  .site-header { background: var(--color-ink); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .chip { background: var(--color-surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

@media (prefers-contrast: more) {
  :root { --color-stroke: #8a94a6; --color-muted: #3b4556; }
}