/*
 * InstallerHQ design system.
 *
 * Dark, dense, hairline-separated. See DESIGN.md for the reasoning; the short
 * version is that this sells software, so it should look like software.
 *
 * Two rules worth knowing before editing:
 *   1. --amber is for money and nothing else. Grant figures, savings,
 *      calculator output. The moment it decorates something that isn't a
 *      number, the number stops being the brightest thing on the screen.
 *   2. Separation is by 1px light, not by shadow. Drop shadows on near-black
 *      read as smudges.
 */

/* ---------------------------------------------------------------- tokens */

:root {
  /* Warm off-white, not clinical white — paper, not a lightbox. */
  --ink-000: #fbfaf7;
  --ink-050: #ffffff;
  --ink-100: #f4f3ee;
  --ink-150: #edece6;

  --fg: #12150f;
  --fg-soft: #4c5449;
  --fg-mute: #6b7268;

  --line: rgba(18, 21, 15, 0.11);
  --line-2: rgba(18, 21, 15, 0.2);

  /* Two greens with different jobs. --green is the one that has to be legible
     as text (5.03:1 on paper); --green-bright is only ever a fill, where the
     dark button label sits on it at 9:1. The brand green measures 1.96:1 as
     text on white, which makes it decoration, not a link. */
  --green: #3c7a22;
  --green-bright: #7ac943;
  --green-deep: #4f8f2f;
  --green-ink: #12150f;
  --green-dim: rgba(122, 201, 67, 0.16);
  --green-glow: rgba(79, 143, 47, 0.28);

  /* Money. 5.20:1 on paper — the bright amber was 1.54:1 and unreadable. */
  --amber: #9a5b00;
  --amber-dim: rgba(154, 91, 0, 0.09);
  --wa: #1da851;

  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;
  --r-xl: 22px;

  --wrap: 1180px;
  --gut: clamp(20px, 5vw, 64px);
  --sec: clamp(60px, 7.5vw, 96px);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t: 0.18s var(--ease);

  --display: 'Instrument Sans', 'Manrope', system-ui, sans-serif;
  --body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Card interiors. One scale, so every card-like block sits on the same
     rhythm — there were eight different paddings before this. */
  --pad-sm: 20px;
  --pad: 24px;
  --pad-lg: 28px;

  --hdr-h: 66px;
}

/*
 * The inverted band. Scoped token overrides, so every component inside simply
 * inherits the dark values and needs no separate dark rules. Used sparingly —
 * two or three times a page at most, which is what makes it land.
 */
.sec--dark,
.codeblock {
  --ink-000: #12150f;
  --ink-050: #191d16;
  --ink-100: #21261d;
  --ink-150: #2a3025;
  --fg: #f4f4f0;
  --fg-soft: #b6bcb2;
  --fg-mute: #8b9287;
  --line: rgba(255, 255, 255, 0.11);
  --line-2: rgba(255, 255, 255, 0.2);
  --green: #8ed659;
  --amber: #ffc24b;
  --amber-dim: rgba(255, 194, 75, 0.12);
  background: var(--ink-000);
  color: var(--fg);
}

/* The footer is the same paper as the page, divided by a hairline. */
.ftr {
  background: var(--ink-100);
  border-top: 1px solid var(--line);
}

/* ----------------------------------------------------------------- fonts */

@font-face {
  font-family: 'Instrument Sans';
  src: url('/assets/fonts/instrument-sans.woff2') format('woff2');
  font-weight: 500 700;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Manrope';
  src: url('/assets/fonts/manrope-500.woff2') format('woff2');
  font-weight: 400 600;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('/assets/fonts/manrope-800.woff2') format('woff2');
  font-weight: 700 800;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/assets/fonts/jetbrains-500.woff2') format('woff2');
  font-weight: 400 600;
  font-display: swap;
}

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

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

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

body {
  margin: 0;
  background: var(--ink-000);
  color: var(--fg);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* No background texture. A dot grid, a mesh gradient or a radial glow is the
   single clearest signal that a page was generated rather than designed. The
   space does the work instead. */

main {
  position: relative;
  z-index: 1;
}

img,
svg,
video,
iframe {
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3,
h4 {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.5rem, 5.4vw, 4.4rem);
  letter-spacing: -0.038em;
}
h2 {
  font-size: clamp(1.9rem, 3.6vw, 3rem);
}
h3 {
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  letter-spacing: -0.02em;
}

p {
  margin: 0;
  text-wrap: pretty;
}

b,
strong {
  font-weight: 800;
  color: var(--fg);
}

:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 999;
  padding: 12px 18px;
  background: var(--green);
  color: #fff;
  font-weight: 800;
  border-radius: var(--r-sm);
}
.skip:focus {
  left: 16px;
}

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

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

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.sec {
  padding-block: var(--sec);
  position: relative;
}

.sec--tight {
  padding-block: clamp(40px, 5vw, 64px);
}

/*
 * A third surface between paper and the inverted band. Two adjacent sections
 * on the same background read as one very long section with a hole in the
 * middle; a half-step of tone separates them without spending the dark band,
 * which only works because it is rare.
 */
.sec--tint {
  background: #f2f1ec;
  border-block: 1px solid var(--line);
}
.sec--tint .card,
.sec--tint .tier {
  background: #fff;
}

/* The light sections. Used twice on the homepage, on purpose — they are the
   contrast that makes the dark read as deliberate rather than as a theme. */

.center {
  text-align: center;
}
.mx {
  margin-inline: auto;
}

.lede {
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  color: var(--fg-soft);
  max-width: 62ch;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
}
.eyebrow::before {
  content: '';
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.eyebrow--c {
  justify-content: center;
}

.sec-head {
  max-width: 720px;
  margin-bottom: clamp(28px, 3vw, 40px);
}
.sec-head.center {
  margin-inline: auto;
}
.sec-head h2 {
  margin-top: 14px;
}
.sec-head .lede {
  margin-top: 16px;
}
.sec-head.center .lede {
  margin-inline: auto;
}

.grid {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
}
.g2 {
  grid-template-columns: repeat(2, 1fr);
}
.g3 {
  grid-template-columns: repeat(3, 1fr);
}
.g4 {
  grid-template-columns: repeat(4, 1fr);
}
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

@media (max-width: 900px) {
  .g3,
  .g4,
  .split {
    grid-template-columns: 1fr;
  }
  .g2 {
    grid-template-columns: 1fr;
  }
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--t), background var(--t), border-color var(--t), box-shadow var(--t);
}
.btn svg {
  width: 18px;
  height: 18px;
  flex: none;
}
.btn:active {
  transform: translateY(1px);
}

.btn-green {
  background: var(--green-bright);
  color: var(--green-ink);
}
.btn-green:hover {
  background: #8ad653;
  box-shadow: 0 6px 18px -8px var(--green-glow);
}

.btn-ghost {
  border-color: var(--line-2);
  color: var(--fg);
  background: var(--ink-050);
}
.btn-ghost:hover {
  border-color: var(--green-deep);
  background: var(--ink-100);
}

.btn-wa {
  background: var(--wa);
  color: #05230f;
}
.btn-wa:hover {
  background: #33e074;
}

.btn-sm {
  padding: 10px 16px;
  font-size: 0.88rem;
}
.btn-lg {
  padding: 17px 30px;
  font-size: 1.02rem;
}
.btn-block {
  width: 100%;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}
.center .actions {
  justify-content: center;
}

.tlink {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--green);
}
.tlink svg {
  width: 16px;
  height: 16px;
  transition: transform var(--t);
}
.tlink:hover svg {
  transform: translateX(3px);
}

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

.card {
  background: var(--ink-050);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--pad);
  position: relative;
  box-shadow: 0 1px 2px rgba(18, 21, 15, 0.04);
  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}
/* The glass top-edge was a dark-mode trick. On paper, a hairline and a very
   quiet shadow read as a real card. */
a.card:hover {
  border-color: var(--green-deep);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px -16px rgba(18, 21, 15, 0.22);
}

.card h3 {
  margin-bottom: 8px;
}
.card p {
  color: var(--fg-soft);
  font-size: 0.96rem;
}

.card-ic {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--green-dim);
  color: var(--green);
  margin-bottom: 16px;
}
.card-ic svg {
  width: 22px;
  height: 22px;
}

/* --------------------------------------------------------------- pills */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  font-size: 0.7rem;
  font-weight: 800;
  font-style: normal;
  letter-spacing: 0.02em;
  color: var(--fg-soft);
  white-space: nowrap;
}
.pill--live {
  border-color: rgba(122, 201, 67, 0.4);
  color: var(--green);
  background: var(--green-dim);
}
.pill--live::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  animation: pulse 2s infinite;
}
.pill--amber {
  border-color: rgba(255, 194, 75, 0.4);
  color: var(--amber);
  background: var(--amber-dim);
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fg-mute);
  flex: none;
}
.dot--live {
  background: var(--green);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 var(--green-glow);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(122, 201, 67, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(122, 201, 67, 0);
  }
}

/* --------------------------------------------------------------- money */

.money {
  font-family: var(--display);
  font-variant-numeric: tabular-nums;
  color: var(--amber);
  font-weight: 800;
  letter-spacing: -0.03em;
}
.num {
  font-variant-numeric: tabular-nums;
}
code,
kbd,
.mono {
  font-family: var(--mono);
  font-size: 0.88em;
}

/* ---------------------------------------------------------------- lists */

.ticks {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.ticks li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 0.97rem;
  color: var(--fg-soft);
}
.ticks svg {
  width: 20px;
  height: 20px;
  color: var(--green);
  margin-top: 2px;
}
.ticks b {
  display: block;
  color: var(--fg);
  margin-bottom: 2px;
}

/* ------------------------------------------------------------- announce */

.announce {
  background: var(--ink-100);
  border-bottom: 1px solid var(--line);
  font-size: 0.84rem;
  position: relative;
  z-index: 60;
}
.announce-in {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-block: 9px;
}
.announce p {
  color: var(--fg-soft);
  margin: 0;
}
.announce a {
  color: var(--green);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.announce-x {
  margin-left: auto;
  background: none;
  border: 0;
  color: var(--fg-mute);
  cursor: pointer;
  padding: 4px;
  display: grid;
  place-items: center;
}
.announce-x svg {
  width: 15px;
  height: 15px;
}
.announce-x:hover {
  color: var(--fg);
}

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

.hdr {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--hdr-h);
  display: flex;
  align-items: center;
  background: rgba(251, 250, 247, 0.86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t), background var(--t);
}
.hdr.is-stuck {
  border-bottom-color: var(--line);
  background: rgba(251, 250, 247, 0.95);
}
.hdr-in {
  display: flex;
  align-items: center;
  gap: 20px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
.brand-mark {
  width: 42px;
  height: auto;
}
/* Only on the dark footer does the black H need lifting. */
.ftr .brand-mark,
.sec--dark .brand-mark {
  filter: brightness(0) invert(1);
}
.brand-word {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.16rem;
  letter-spacing: -0.03em;
  color: var(--fg);
}
/* --green is context-scoped: 5.03:1 on paper, and the dark footer swaps in a
   lighter green automatically. --green-deep measured 3.79:1 here and failed. */
.brand-word b {
  color: var(--green);
}


.nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-inline: auto;
}
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 13px;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--fg-soft);
  white-space: nowrap;
  background: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  transition: color var(--t), background var(--t);
}
.nav-link:hover,
.nav-link[aria-expanded='true'] {
  color: var(--fg);
  background: rgba(255, 255, 255, 0.06);
}
.nav-link[aria-current='page'] {
  color: var(--green);
}
.nav-caret {
  width: 14px;
  height: 14px;
  transition: transform var(--t);
}
.nav-link[aria-expanded='true'] .nav-caret {
  transform: rotate(180deg);
}

.hdr-cta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

/* ------------------------------------------------------------ mega-menu */

.nav-mega {
  position: static;
}
.mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--ink-050);
  border-block: 1px solid var(--line);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9);
  animation: megaIn 0.18s var(--ease);
}
.mega[hidden] {
  display: none;
}
@keyframes megaIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}
.mega-inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 26px var(--gut) 30px;
  display: grid;
  /* One column. chrome.js says so in as many words: "Three products do not
     need a mega-menu. A single column…" — this rule disagreed with it. */
  grid-template-columns: 1fr;
  gap: 2px;
  min-width: 330px;
}
.mega-h {
  font-family: var(--body);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin: 0 0 12px;
}
.mega-item {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  padding: 9px 10px;
  margin-inline: -10px;
  border-radius: var(--r-sm);
  transition: background var(--t);
}
.mega-item:hover {
  background: rgba(255, 255, 255, 0.05);
}
.mega-ic {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--green-dim);
  color: var(--green);
}
.mega-ic svg {
  width: 18px;
  height: 18px;
}
.mega-text b {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.94rem;
  color: var(--fg);
}
.mega-text small {
  display: block;
  font-size: 0.82rem;
  color: var(--fg-mute);
  line-height: 1.4;
  margin-top: 1px;
}
.mega-aside {
  border-left: 1px solid var(--line);
  padding-left: 24px;
}
.mega-aside p {
  font-size: 0.86rem;
  color: var(--fg-soft);
  margin: 12px 0 14px;
}

/* ---------------------------------------------------------- mobile menu */

.burger {
  display: none;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--line-2);
  border-radius: 11px;
  color: var(--fg);
  cursor: pointer;
}

.mobmenu {
  position: fixed;
  inset: var(--hdr-h) 0 0 0;
  z-index: 45;
  background: var(--ink-000);
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: mobIn 0.22s var(--ease);
}
.mobmenu[hidden] {
  display: none;
}
@keyframes mobIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}
.mobmenu-scroll {
  padding: 20px var(--gut) 120px;
}
.mobmenu-h {
  font-family: var(--body);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin: 22px 0 12px;
}
.mobtiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.mobtile {
  display: block;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--ink-050);
  min-height: 96px;
}
.mobtile-ic {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--green-dim);
  color: var(--green);
  margin-bottom: 10px;
}
.mobtile-ic svg {
  width: 17px;
  height: 17px;
}
.mobtile b {
  display: block;
  font-size: 0.95rem;
  color: var(--fg);
}
.mobtile small {
  display: block;
  font-size: 0.78rem;
  color: var(--fg-mute);
  line-height: 1.35;
  margin-top: 3px;
}
.mobchips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mobchip {
  padding: 11px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.9rem;
  background: var(--ink-050);
}
.moblinks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}
.moblinks a {
  padding: 14px 4px;
  font-weight: 700;
  border-bottom: 1px solid var(--line);
}

/* --------------------------------------------------------- sticky bar -- */

/* The two buttons must share the width, not claim it. Without min-width:0 a
   flex item refuses to shrink below its content and the second button hangs
   off a 320px screen. */
.stickybar .btn {
  flex: 1 1 0;
  /* btn-block sets width:100%, which in a flex row means "100% of the
     container each" and pushes the second button off a 320px screen. */
  width: auto;
  min-width: 0;
  padding-inline: 12px;
}
.stickybar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 44;
  gap: 10px;
  padding: 10px var(--gut) calc(10px + env(safe-area-inset-bottom));
  background: rgba(251, 250, 247, 0.96);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
}

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

.ftr {
  background: var(--ink-050);
  border-top: 1px solid var(--line);
  padding-block: clamp(48px, 6vw, 72px) 28px;
  position: relative;
  z-index: 1;
}
.ftr-top {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: 36px 28px;
}
.ftr-brand p {
  font-size: 0.9rem;
  color: var(--fg-mute);
  max-width: 30ch;
  margin-top: 14px;
}
.ftr-social {
  display: flex;
  gap: 8px;
  margin-top: 18px;
}
.ftr-social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--line);
  color: var(--fg-mute);
  transition: color var(--t), border-color var(--t), background var(--t);
}
.ftr-social a:hover {
  color: var(--green);
  border-color: var(--green);
  background: var(--green-dim);
}
.ftr-social svg {
  width: 17px;
  height: 17px;
}
.ftr-stamp {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.76rem;
  color: var(--fg-mute);
  margin-top: 20px;
}
.ftr-stamp svg {
  width: 14px;
  height: 14px;
  color: var(--green);
  flex: none;
}
.fcol h3 {
  font-family: var(--body);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--fg);
  margin: 0 0 14px;
}
.fcol a {
  display: block;
  padding: 5px 0;
  font-size: 0.9rem;
  color: var(--fg-mute);
  transition: color var(--t);
}
.fcol a:hover {
  color: var(--green);
}
.ftr-bottom {
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  color: var(--fg-mute);
}
.ftr-tag {
  font-family: var(--display);
  font-weight: 800;
  color: var(--fg);
  letter-spacing: -0.02em;
}
.ftr-legal a:hover {
  color: var(--green);
}

/* ------------------------------------------------------------- reveal -- */

.js .rv {
  opacity: 0;
  transform: translateY(14px);
}

/*
 * Never reveal what is already on screen.
 *
 * The hero and the answer block are above the fold on every page, and both
 * carried .rv — so the largest paint was gated on hq.js parsing, an
 * IntersectionObserver firing, and a 0.5s opacity transition. Measured element
 * render delay was 1.0-1.7s on all five pages tested, with zero resource load
 * time behind it: the content was ready and the stylesheet was hiding it.
 *
 * Below the fold the reveal is worth having, so it stays there.
 */
.js .hero .rv,
.js .answer {
  opacity: 1;
  transform: none;
}
.js .rv.in {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.js .rv.d1.in {
  transition-delay: 0.07s;
}
.js .rv.d2.in {
  transition-delay: 0.14s;
}
.js .rv.d3.in {
  transition-delay: 0.21s;
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 1080px) {
  .nav,
  .hide-lg {
    display: none;
  }
  .burger {
    display: inline-flex;
  }
  .nav-mega {
    display: none;
  }
}

@media (max-width: 760px) {
  :root {
    --hdr-h: 60px;
  }
  .stickybar {
    display: flex;
  }
  /* Two lines of small print above the logo is not worth the screen. The same
     date stamp is in the footer and on every page that quotes a figure. */
  .announce {
    display: none;
  }
  /* Clear the sticky bar so the last CTA is never sat under it. */
  .ftr {
    padding-bottom: 96px;
  }
  .ftr-top {
    grid-template-columns: 1fr 1fr;
  }
  .ftr-brand {
    grid-column: 1 / -1;
  }
  .ftr-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .btn {
    padding: 15px 22px;
  }
  .actions .btn {
    flex: 1 1 auto;
  }
}

@media (max-width: 420px) {
  .mobtiles {
    grid-template-columns: 1fr;
  }
  .mobtile {
    min-height: 0;
  }
  /* At 320px the header CTA plus the burger is wider than the viewport and
     pushes the page sideways. Nothing is lost by dropping it — the sticky
     bottom bar carries the same button, permanently, in thumb reach. */
  .hdr-cta .btn {
    display: none;
  }
  .brand-word {
    font-size: 1.05rem;
  }
  /* Long product headlines carry a <br>; below 400px even the halves are
     wider than the screen, so the break has to go and the type has to drop. */
  .hero-copy h1 br {
    display: none;
  }
  .hero-in .hero-copy h1,
  .hero-in--wide .hero-copy h1 {
    font-size: 1.95rem;
  }
  /* A button label that cannot wrap is a button that overflows. */
  .btn {
    white-space: normal;
    text-align: center;
  }
  /* Icon-only WhatsApp below 380px so both sticky buttons fit. */
  .stickybar .btn-wa {
    flex: 0 0 auto;
    font-size: 0;
    padding-inline: 16px;
  }
  .stickybar .btn-wa svg {
    width: 20px;
    height: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js .rv {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   PAGE BLOCKS
   Everything below is a named section of the site rather than a primitive.
   ========================================================================== */

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

.hero {
  position: relative;
  padding-block: clamp(36px, 4.5vw, 64px) clamp(40px, 5vw, 72px);
}
/* No glow. A radial green wash behind the headline is the most recognisable
   tell of a generated page; the type and the product shot carry it instead. */
.hero-in {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr minmax(0, 480px);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.hero h1 .hl {
  color: var(--green-deep);
}
.hl-amber {
  color: var(--amber);
}
.hero .lede {
  font-size: clamp(1.08rem, 1.7vw, 1.32rem);
  max-width: 30ch;
}
.hero-trust {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 24px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--fg-mute);
}
.hero-trust svg {
  width: 17px;
  height: 17px;
  color: var(--green);
  flex: none;
}
.hero-cap {
  margin-top: 14px;
  text-align: center;
  font-size: 0.82rem;
  color: var(--fg-mute);
}

/* browser frame -------------------------------------------------------- */

.browser {
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 24px 60px -30px rgba(18, 21, 15, 0.28), 0 2px 6px rgba(18, 21, 15, 0.05);
}
.browser-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 14px;
  background: #f1f0ec;
  border-bottom: 1px solid var(--line);
}
.browser-bar .dot {
  width: 9px;
  height: 9px;
}
.browser-url {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
  padding: 5px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--fg-mute);
  flex: 1;
}
.browser-url svg {
  width: 11px;
  height: 11px;
}
.browser-body {
  padding: 18px;
  background: #fff;
  color: var(--fg);
  position: relative;
}
.hd-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
  font-size: 0.92rem;
}
.hd-brand b {
  color: var(--fg);
}
.hd-card {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px;
  background: var(--ink-000);
}
.hd-top {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
}
/* Inside the white mock, so it needs the text-legible green (5.03:1) rather
   than the mid one, which measured 3.79:1 at this size. */
.hd-top b {
  color: #3c7a22;
}
.hd-brand b,
.hd-h {
  color: #12150f;
}
.hd-top small {
  margin-left: auto;
  color: var(--fg-mute);
  font-size: 0.68rem;
}
.hd-h {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-size: 1.1rem;
  margin: 12px 0 12px;
  color: var(--fg);
}
.hd-field {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 0 14px;
  border: 1.5px solid var(--green-deep);
  border-radius: 11px;
  background: #fff;
  font-family: var(--mono);
  font-size: 0.95rem;
  color: var(--fg);
  box-shadow: 0 0 0 4px rgba(122, 201, 67, 0.13);
}
.hd-field svg {
  width: 17px;
  height: 17px;
  color: var(--green-deep);
  flex: none;
}
.hd-caret {
  width: 2px;
  height: 17px;
  background: var(--green-deep);
  animation: caret 1s steps(2) infinite;
}
@keyframes caret {
  50% {
    opacity: 0;
  }
}
.hd-btn {
  margin-top: 10px;
  padding: 13px;
  border-radius: 11px;
  background: var(--green-bright);
  color: #12150f;
  font-weight: 800;
  text-align: center;
  font-size: 0.95rem;
}
.hd-work,
.hd-result {
  display: none;
}
#herodemo.is-checking .hd-work {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 12px;
  font-size: 0.84rem;
  color: var(--fg-soft);
}
.hd-spin {
  width: 15px;
  height: 15px;
  border: 2px solid rgba(79, 143, 47, 0.25);
  border-top-color: var(--green-deep);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex: none;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
#herodemo.is-done .hd-result {
  display: block;
  margin-top: 12px;
  padding: 14px;
  border-radius: 12px;
  background: #12150f;
  animation: popIn 0.45s var(--ease) both;
}
@keyframes popIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
}
.hd-elig {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8rem;
  font-weight: 800;
  color: #8ed659;
}
.hd-elig svg {
  width: 15px;
  height: 15px;
}
.hd-amount {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.hd-amount .money {
  font-size: 2.1rem;
  color: #ffc24b;
}
.hd-amount small {
  font-size: 0.68rem;
  color: var(--fg-mute);
}
.hd-replay {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--fg-soft);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--t);
}
.browser-body:hover .hd-replay,
.hd-replay:focus-visible {
  opacity: 1;
}
.hd-replay svg {
  width: 12px;
  height: 12px;
}

/* ---------------------------------------------------------- proof strip */

.proofstrip {
  border-block: 1px solid var(--line);
}
.proof {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.proof-item b {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  color: var(--fg);
  letter-spacing: -0.03em;
}
.proof-item small {
  display: block;
  font-size: 0.8rem;
  color: var(--fg-mute);
  margin-top: 3px;
}

/* -------------------------------------------------------------- problem */

.flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 16px;
  align-items: center;
}
.flow-step {
  background: var(--ink-050);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--pad);
}
.flow-step--bad {
  border-color: rgba(154, 91, 0, 0.28);
  background: var(--amber-dim);
}
.flow-n {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--ink-100);
  font-weight: 800;
  font-size: 0.82rem;
  margin-bottom: 12px;
}
.flow-step--bad .flow-n {
  background: var(--amber-dim);
  color: var(--amber);
}
.flow-step b {
  display: block;
  font-size: 1.02rem;
  margin-bottom: 6px;
}
.flow-step p {
  font-size: 0.92rem;
  color: var(--fg-soft);
}
.flow-arrow {
  color: var(--fg-mute);
}
.flow-arrow svg {
  width: 20px;
  height: 20px;
}

/* ------------------------------------------------------------- showcase */

.showtabs {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 36px;
}
.showtab {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--ink-050);
  color: var(--fg-soft);
  font: inherit;
  font-weight: 800;
  font-size: 0.92rem;
  cursor: pointer;
  transition: all var(--t);
}
.showtab svg {
  width: 17px;
  height: 17px;
}
.showtab:hover {
  border-color: var(--line-2);
  color: var(--fg);
}
.showtab[aria-selected='true'] {
  background: var(--green-dim);
  border-color: var(--green);
  color: var(--green);
}
/*
 * [hidden] comes from the UA stylesheet, so any class rule setting `display`
 * beats it and every tab panel renders at once. This section was 1996px tall
 * with all four products stacked, and it read as a deliberate list rather
 * than a broken tab strip — which is why it survived a full-page screenshot.
 */
.showpanel[hidden] {
  display: none;
}
.showpanel {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(24px, 4vw, 52px);
  align-items: center;
  animation: fadeUp 0.32s var(--ease);
}
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}
.showpanel-copy h3 {
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
}
.showpanel-copy .btn {
  margin-top: 24px;
}
.panel-visual {
  background: var(--ink-050);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--pad);
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}
.pg-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
  color: var(--fg-mute);
}
.pg-row b {
  color: var(--fg);
}
.pg-out {
  margin-top: 14px;
  padding: 20px;
  border-radius: var(--r);
  background: var(--green-dim);
  border: 1px solid rgba(60, 122, 34, 0.24);
  text-align: center;
}
.pg-out small {
  color: var(--fg-soft);
}
.pg-out .money {
  color: var(--green);
}
.pg-out small {
  display: block;
  font-size: 0.76rem;
  margin-bottom: 4px;
  color: var(--fg-soft);
}
.pg-out .money {
  font-size: clamp(2rem, 4vw, 2.8rem);
}

.ps-sat {
  position: relative;
  height: 190px;
  border-radius: var(--r);
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 30%, #2a3a2c, transparent 60%),
    linear-gradient(150deg, #1b2620, #101713);
}
.ps-roof {
  position: absolute;
  left: 20%;
  top: 24%;
  width: 60%;
  height: 52%;
  border: 2px solid var(--green);
  border-radius: 4px;
  background: rgba(122, 201, 67, 0.08);
  animation: roofIn 0.8s var(--ease) both 0.2s;
  /* A 4x3 bed of panels laid inside the detected roof. Grid rather than
     calc(floor()) — floor() is too new to rely on and silently collapsed the
     whole array into one corner where it was not supported. */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 4px;
  padding: 6px;
}
@keyframes roofIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
}
.ps-panel {
  background: linear-gradient(150deg, #4b6fb5, #2b4478);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 2px;
  animation: panelIn 0.4s var(--ease) both;
  animation-delay: calc(0.85s + (var(--r) * 4 + var(--c)) * 0.05s);
}
@keyframes panelIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

.pc-bars {
  display: grid;
  gap: 12px;
}
.pc-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 18px;
  border-radius: var(--r);
  border: 1px solid var(--line);
}
.pc-bar--petrol {
  background: rgba(255, 255, 255, 0.03);
  color: var(--fg-mute);
}
.pc-bar--ev {
  background: var(--green-dim);
  border-color: rgba(122, 201, 67, 0.3);
}
.pc-bar b {
  font-size: 0.95rem;
}

.panel-chat {
  gap: 8px;
}
.pchat {
  max-width: 88%;
  padding: 11px 14px;
  border-radius: 14px;
  font-size: 0.9rem;
  line-height: 1.45;
}
.pchat--them {
  align-self: flex-start;
  background: var(--ink-150);
  border-bottom-left-radius: 5px;
}
.pchat--you {
  align-self: flex-end;
  background: var(--green-bright);
  color: #12150f;
  font-weight: 600;
  border-bottom-right-radius: 5px;
}
.pchat-note {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--green);
}
.pchat-note svg {
  width: 15px;
  height: 15px;
}

/* ---------------------------------------------------------------- inbox */

.inbox {
  background: var(--ink-050);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--pad);
  position: relative;
  overflow: hidden;
}

.ib-head {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.84rem;
  color: var(--fg-soft);
}
.ib-head b {
  font-size: 0.86rem;
}
.ib-head small {
  margin-left: auto;
  color: var(--fg-mute);
  font-size: 0.74rem;
}
.ib-name {
  font-family: var(--display);
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 14px 0 16px;
}
.ib-rows {
  display: grid;
  gap: 2px;
}
.ib-row {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 11px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
  color: var(--fg-soft);
  opacity: 0;
  transform: translateX(-8px);
}
.ib-row.in {
  opacity: 1;
  transform: none;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.ib-row svg {
  width: 17px;
  height: 17px;
  color: var(--green);
}
.ib-row--grant {
  grid-template-columns: 1fr auto;
  align-items: center;
  border-bottom: 0;
  margin-top: 12px;
  padding: 16px 18px;
  border-radius: var(--r);
  background: var(--green-dim);
  border: 1px solid rgba(60, 122, 34, 0.24);
}
.ib-row--grant .money {
  color: var(--green);
}
.ib-row--grant .ib-grant-l small {
  color: var(--fg-soft);
}
.ib-row--grant .ib-grant-l b {
  color: var(--fg);
}
.ib-grant-l small {
  display: block;
  font-size: 0.74rem;
  color: var(--fg-mute);
}
.ib-grant-l b {
  font-size: 0.9rem;
}
.ib-row--grant .money {
  font-size: 1.8rem;
}
.ib-fine {
  margin-top: 14px;
  font-size: 0.73rem;
  color: var(--fg-mute);
  line-height: 1.5;
}

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

.bigcard {
  display: block;
}
.wamock {
  display: grid;
  gap: 7px;
  margin: 18px 0;
  padding: 14px;
  border-radius: var(--r);
  background: var(--ink-000);
  border: 1px solid var(--line);
}
.wam {
  max-width: 86%;
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 0.84rem;
  line-height: 1.4;
}
.wam--them {
  align-self: flex-start;
  justify-self: start;
  background: var(--ink-150);
}
.wam--us {
  justify-self: end;
  background: rgba(37, 211, 102, 0.16);
  border: 1px solid rgba(37, 211, 102, 0.28);
}
.wave {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 92px;
  margin: 18px 0;
  padding: 14px;
  border-radius: var(--r);
  background: var(--ink-000);
  border: 1px solid var(--line);
}
.wave i {
  width: 3px;
  border-radius: 2px;
  background: var(--green);
  height: 14%;
  animation: wave 1.3s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.045s);
  opacity: 0.75;
}
@keyframes wave {
  0%, 100% {
    height: 14%;
  }
  50% {
    height: 76%;
  }
}

/* --------------------------------------------------------------- steps */

.steps3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.step {
  background: var(--ink-050);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px;
}
.step-n {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--green);
  letter-spacing: 0.06em;
}
.step h3 {
  margin: 12px 0 8px;
}
.step p {
  font-size: 0.94rem;
  color: var(--fg-soft);
}
.step code {
  color: var(--green);
}

.snippet {
  margin-top: 22px;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #12150f;
}
.snippet-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 16px;
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.snippet-bar .dot {
  width: 9px;
  height: 9px;
}
.snippet-bar small {
  margin-left: 10px;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: #8b9287;
}
.snippet pre {
  margin: 0;
  padding: 18px 20px;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 0.82rem;
  line-height: 1.7;
  color: #8ed659;
}

/* --------------------------------------------------------- trade tiles */

.tradetile {
  position: relative;
}
.tradetile-go {
  position: absolute;
  right: 22px;
  bottom: 22px;
  color: var(--fg-mute);
  transition: transform var(--t), color var(--t);
}
.tradetile-go svg {
  width: 18px;
  height: 18px;
}
.tradetile:hover .tradetile-go {
  color: var(--green);
  transform: translateX(4px);
}

/* -------------------------------------------------------- service band */

.servband {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 28px;
  align-items: center;
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--ink-050);
}
.servband p {
  color: var(--fg-soft);
  font-size: 0.95rem;
  margin-top: 8px;
}
.servband-r {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.servchip {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--ink-000);
  transition: border-color var(--t), background var(--t);
}
.servchip:hover {
  border-color: var(--green);
  background: var(--green-dim);
}
.servchip svg {
  width: 19px;
  height: 19px;
  color: var(--green);
}
.servchip b {
  display: block;
  font-size: 0.92rem;
  margin-top: 9px;
}
.servchip small {
  display: block;
  font-size: 0.76rem;
  color: var(--fg-mute);
}

/* ------------------------------------------------------------ case skel */

.case--empty {
  opacity: 0.72;
}
.case-skel {
  display: grid;
  gap: 9px;
  margin: 18px 0;
}
.case-skel i {
  height: 11px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--ink-150), var(--ink-100), var(--ink-150));
  background-size: 200% 100%;
  animation: shimmer 2.2s linear infinite;
}
.case-skel i:nth-child(2) {
  width: 78%;
}
.case-skel i:nth-child(3) {
  width: 52%;
}
@keyframes shimmer {
  to {
    background-position: -200% 0;
  }
}

/* ----------------------------------------------------------- calculator */

.calc {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(24px, 4vw, 48px);
  padding: clamp(26px, 3.5vw, 42px);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--ink-050);
}
.calc-field {
  margin-top: 22px;
}
.calc-field label {
  display: block;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--fg-soft);
  margin-bottom: 9px;
}
.calc-field output {
  display: inline-block;
  margin-top: 7px;
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--green);
}
input[type='range'] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--ink-150);
  outline: none;
  cursor: pointer;
}
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--green);
  border: 4px solid var(--ink-050);
  box-shadow: 0 0 0 1px var(--green);
  cursor: grab;
}
input[type='range']::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--green);
  border: 3px solid var(--ink-050);
  cursor: grab;
}
.calc-r {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}
.calc-out {
  padding: 20px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--ink-000);
  text-align: center;
}
.calc-out small {
  display: block;
  font-size: 0.78rem;
  color: var(--fg-mute);
  margin-bottom: 5px;
}
.calc-out b {
  font-size: clamp(1.7rem, 3vw, 2.3rem);
}
.calc-out--big {
  border: 0;
  background: #12150f;
}
.calc-out--big small {
  color: #8b9287;
}
.calc-out--big .money {
  color: #ffc24b;
}
.calc-out--big b {
  font-size: clamp(2rem, 4vw, 2.9rem);
}
.calc-fine {
  font-size: 0.74rem;
  color: var(--fg-mute);
  line-height: 1.5;
}

/* ------------------------------------------------------------- compare */

.cmp-wrap {
  overflow-x: auto;
  border: 1px solid var(--line-ink);
  border-radius: var(--r-lg);
  background: #fff;
}
.cmp {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 0.94rem;
}
.cmp th,
.cmp td {
  padding: 16px 18px;
  text-align: left;
  border-bottom: 1px solid var(--line-ink);
  color: var(--fg-soft);
}
.cmp thead th {
  font-family: var(--body);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-mute);
  background: var(--paper-2);
}
.cmp tbody th {
  font-weight: 700;
  color: var(--fg);
}
.cmp .cmp-us {
  background: rgba(122, 201, 67, 0.09);
}
.cmp thead .cmp-us {
  color: var(--green-text);
  background: rgba(122, 201, 67, 0.18);
}
.cmp td b {
  color: var(--fg);
}
.cmp tbody tr:last-child th,
.cmp tbody tr:last-child td {
  border-bottom: 0;
}

/* -------------------------------------------------------------- pricing */

.tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: start;
}
.tier {
  position: relative;
  background: #fff;
  border: 1px solid var(--line-ink);
  border-radius: var(--r-lg);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
}
.tier--featured {
  border-color: var(--green-deep);
  box-shadow: 0 22px 60px -34px rgba(79, 143, 47, 0.7);
}
.tier-tag {
  position: absolute;
  top: -11px;
  left: 24px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--green-deep);
  color: var(--fg);
  font-size: 0.7rem;
  font-weight: 800;
}
.tier h3 {
  color: var(--fg);
}
.tier-blurb {
  font-size: 0.9rem;
  color: var(--fg-soft);
  margin-top: 5px;
}
.tier-price {
  margin: 18px 0 4px;
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--fg);
}
.tier-price b {
  font-family: var(--display);
  font-size: 2.6rem;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.tier-price small {
  font-size: 0.86rem;
  color: var(--fg-soft);
  font-weight: 700;
}
.tier .ticks {
  flex: 1;
  margin-bottom: 24px;
}

/* ----------------------------------------------------------------- FAQ */

.faq {
  max-width: 780px;
  margin-inline: auto;
  border: 1px solid var(--line-ink);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #fff;
}
.faq-item {
  border-bottom: 1px solid var(--line-ink);
}
.faq-item:last-child {
  border-bottom: 0;
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  cursor: pointer;
  font-weight: 800;
  font-size: 1rem;
  list-style: none;
  color: var(--fg);
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-caret {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--green-deep);
  transition: transform var(--t);
}
.faq-item[open] .faq-caret {
  transform: rotate(180deg);
}
.faq-a {
  padding: 0 24px 22px;
  color: var(--fg-soft);
  font-size: 0.96rem;
  line-height: 1.65;
}
.faq-a a {
  color: var(--green-text);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ------------------------------------------------------------ CTA band */

.ctaband {
  position: relative;
  overflow: hidden;
  padding: clamp(40px, 5.5vw, 72px) clamp(24px, 4vw, 56px);
  border-radius: var(--r-xl);
  background: var(--green-dim);
  border: 1px solid rgba(60, 122, 34, 0.22);
  color: var(--fg);
  text-align: center;
}
/* The band is light now, so every child that was set for a dark ground has to
   come back. White on a pale green panel is unreadable — 1.5:1. */
.ctaband h2 {
  color: var(--fg);
}
.ctaband .lede {
  color: var(--fg-soft);
}
.ctaband .btn-ghost {
  border-color: rgba(18, 21, 15, 0.22);
  color: var(--fg);
  background: var(--ink-050);
}
.ctaband .btn-ghost:hover {
  border-color: var(--green);
  background: var(--ink-050);
}
.ctaband .fine {
  color: var(--fg-mute);
}
/* No glow behind the CTA either. The inversion is the emphasis. */
.ctaband-glow {
  display: none;
}
.ctaband > * {
  position: relative;
}
.ctaband .lede {
  margin-top: 16px;
}
.fine {
  margin-top: 18px;
  font-size: 0.8rem;
  color: var(--fg-mute);
}

/* --------------------------------------------------------- answer block */

.answer {
  max-width: 68ch;
  margin-top: 22px;
  padding: 18px 22px;
  border-left: 3px solid var(--green-bright);
  background: var(--ink-050);
  border-radius: 0 var(--r) var(--r) 0;
}
.answer p {
  font-size: 1.02rem;
  color: var(--fg-soft);
}

/* ------------------------------------------------------- booking modal */

.bookwrap {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.bookwrap.open {
  display: flex;
}
.bookmask {
  position: absolute;
  inset: 0;
  background: rgba(3, 6, 5, 0.82);
  backdrop-filter: blur(6px);
  animation: fade 0.2s;
}
@keyframes fade {
  from {
    opacity: 0;
  }
}
.bookpanel {
  position: relative;
  width: min(760px, 100%);
  max-height: min(760px, 92vh);
  display: flex;
  flex-direction: column;
  background: var(--ink-050);
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  overflow: hidden;
  animation: popIn 0.28s var(--ease);
}
.bookhead {
  padding: 20px 24px 14px;
  border-bottom: 1px solid var(--line);
}
.bookhead b {
  display: block;
  font-family: var(--display);
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}
.bookhead small {
  display: block;
  margin-top: 5px;
  font-size: 0.86rem;
  color: var(--fg-mute);
}
.bookbody {
  flex: 1;
  min-height: 480px;
}
.bookbody iframe {
  width: 100%;
  height: 100%;
  min-height: 480px;
  border: 0;
}
.bookx {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--ink-100);
  color: var(--fg);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.bookx:hover {
  border-color: var(--green);
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 1000px) {
  .hero-in {
    grid-template-columns: 1fr;
  }
  .hero .lede {
    max-width: 46ch;
  }
  .showpanel,
  .calc,
  .servband,
  .servband-r {
    grid-template-columns: 1fr;
  }
  .flow {
    grid-template-columns: 1fr;
  }
  .flow-arrow {
    justify-self: center;
    transform: rotate(90deg);
  }
  .steps3,
  .tiers {
    grid-template-columns: 1fr;
  }
  .proof {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 620px) {
  .showtabs {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: calc(var(--gut) * -1);
    padding-inline: var(--gut);
    scrollbar-width: none;
  }
  .showtabs::-webkit-scrollbar {
    display: none;
  }
  .hd-amount .money {
    font-size: 1.8rem;
  }
  .bookpanel {
    max-height: 96vh;
  }
  .bookbody,
  .bookbody iframe {
    min-height: 420px;
  }
}

/* ------------------------------------------------------- product pages -- */

.browser-body--dark {
  background: var(--ink-100);
  color: var(--fg);
  padding: 18px;
}
.hd-brand--dark b {
  color: var(--fg);
}
.hd-brand--dark img {
  filter: brightness(0) invert(1);
}

.solarstage {
  display: grid;
  gap: 12px;
}
.ps-tag {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(7, 11, 9, 0.78);
  border: 1px solid var(--line-2);
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--green);
}

.chatframe {
  height: 540px;
  max-width: 420px;
  margin-inline: auto;
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 24px 60px -30px rgba(18, 21, 15, 0.28);
}
.chatframe iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.phone {
  max-width: 400px;
  margin-inline: auto;
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ink-050);
  box-shadow: 0 24px 60px -30px rgba(18, 21, 15, 0.26);
}
.phone-top {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 14px 16px;
  background: var(--ink-100);
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
}
.phone-top small {
  margin-left: auto;
  color: var(--green);
  font-size: 0.76rem;
}
.phone-body {
  display: grid;
  gap: 8px;
  padding: 16px;
}

.callcard {
  max-width: 420px;
  margin-inline: auto;
  padding: var(--pad);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: var(--ink-050);
  box-shadow: 0 24px 60px -30px rgba(18, 21, 15, 0.26);
}
.callcard-top {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.9rem;
}
.callcard-top small {
  margin-left: auto;
  color: var(--fg-mute);
  font-size: 0.78rem;
}
.calltrans {
  display: grid;
  gap: 9px;
  margin: 4px 0 16px;
  font-size: 0.88rem;
  color: var(--fg-soft);
}
.calltrans b {
  display: inline-block;
  min-width: 46px;
  color: var(--green);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.callout {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 15px;
  margin-bottom: 16px;
  border-radius: var(--r);
  background: var(--green-dim);
  border: 1px solid rgba(122, 201, 67, 0.28);
  font-size: 0.88rem;
  font-weight: 700;
}
.callout svg {
  width: 17px;
  height: 17px;
  color: var(--green);
  flex: none;
}

.walk {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  counter-reset: walk;
}
.walk-step {
  position: relative;
  padding: var(--pad);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--ink-050);
}
/* The connecting rule between steps. Drawn, not implied. */
.walk-step:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -16px;
  top: 44px;
  width: 16px;
  height: 1px;
  background: var(--line-2);
}
.walk-n {
  font-family: var(--mono);
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--green);
}
.walk-step b {
  display: block;
  margin: 10px 0 7px;
  font-size: 1rem;
}
.walk-step p {
  font-size: 0.9rem;
  color: var(--fg-soft);
}

@media (max-width: 1000px) {
  .walk {
    grid-template-columns: 1fr 1fr;
  }
  .walk-step::after {
    display: none;
  }
}
@media (max-width: 560px) {
  .walk {
    grid-template-columns: 1fr;
  }
  .chatframe {
    height: 480px;
  }
}

/* ---------------------------------------------------------- trade pages */

.hero-in--wide {
  grid-template-columns: 1fr;
  max-width: 900px;
}
/* A hero that is just a headline should not reserve the space a hero with a
   product demo in it needs. */
.hero--slim {
  padding-block: clamp(36px, 4.5vw, 60px) clamp(24px, 3vw, 40px);
}

.grantpanel {
  border: 1px solid var(--line);
  border-top: 3px solid var(--amber);
  border-radius: var(--r-lg);
  background: var(--ink-050);
  padding: var(--pad);
}
.grantpanel-h {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
}
.grantpanel-h h3 {
  font-size: 1.4rem;
}
.grantpanel-h .pill svg {
  width: 12px;
  height: 12px;
}
.grantrows {
  margin: 0;
  display: grid;
  gap: 0;
}
.grantrow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.grantrow dt {
  font-size: 0.9rem;
  color: var(--fg-mute);
}
.grantrow dd {
  margin: 0;
  font-weight: 800;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.grantrow:first-child dd {
  color: var(--amber);
  font-family: var(--display);
  font-size: 1.6rem;
  letter-spacing: -0.02em;
}
.grantnote,
.grantsrc {
  margin-top: 14px;
  font-size: 0.84rem;
  color: var(--fg-soft);
  line-height: 1.6;
}
.grantsrc {
  font-size: 0.76rem;
  color: var(--fg-mute);
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.grantsrc a {
  color: var(--green);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.grantsrc svg {
  width: 11px;
  height: 11px;
}

.notebar {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 14px;
  align-items: start;
  padding: 20px 24px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--amber);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  background: var(--ink-050);
}
.notebar svg {
  width: 20px;
  height: 20px;
  color: var(--amber);
  margin-top: 2px;
}
.notebar p {
  font-size: 0.95rem;
  color: var(--fg-soft);
}

/* ------------------------------------------------------------ core pages */

.cmp--dark th,
.cmp--dark td {
  border-bottom-color: var(--line);
  color: var(--fg-soft);
}
.cmp-wrap--dark {
  border-color: var(--line);
  background: var(--ink-050);
}
.cmp--dark thead th {
  background: var(--ink-100);
  color: var(--fg-mute);
}
.cmp--dark thead th small {
  display: block;
  margin-top: 3px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg-soft);
}
.cmp--dark tbody th {
  color: var(--fg);
  font-weight: 600;
  font-size: 0.9rem;
}
.cmp--dark .cmp-us {
  background: rgba(122, 201, 67, 0.07);
}
.cmp--dark thead .cmp-us {
  background: rgba(122, 201, 67, 0.14);
  color: var(--green);
}
.yes svg {
  width: 18px;
  height: 18px;
  color: var(--green);
}
.no {
  color: var(--fg-mute);
}
.part {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--fg-soft);
}

.whatcall {
  margin-top: 30px;
  padding: var(--pad);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--ink-050);
}
.contactalt {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.calendar {
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ink-050);
  box-shadow: 0 24px 60px -30px rgba(18, 21, 15, 0.26);
}
.calendar-h {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
}
.calendar-h small {
  margin-left: auto;
  color: var(--fg-mute);
  font-size: 0.78rem;
}
.calendar iframe {
  display: block;
  width: 100%;
  height: 620px;
  border: 0;
}

/* --------------------------------------------------------------- prose -- */

.prose {
  max-width: 74ch;
  margin-inline: auto;
}
.prose h1 {
  font-size: clamp(2rem, 4vw, 3rem);
}
.prose h2 {
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  margin: 40px 0 12px;
}
.prose h3 {
  margin: 28px 0 10px;
}
.prose p {
  color: var(--fg-soft);
  margin-bottom: 14px;
  font-size: 1rem;
  line-height: 1.75;
}
.prose ul,
.prose ol {
  color: var(--fg-soft);
  padding-left: 22px;
  margin: 0 0 16px;
  line-height: 1.75;
}
.prose li {
  margin-bottom: 7px;
}
.prose a {
  color: var(--green);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.prose-date {
  font-size: 0.84rem !important;
  color: var(--fg-mute) !important;
  margin-bottom: 8px !important;
}
.prose blockquote {
  margin: 22px 0;
  padding: 16px 22px;
  border-left: 3px solid var(--green);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 0 var(--r) var(--r) 0;
}
.prose blockquote p:last-child {
  margin-bottom: 0;
}

@media (max-width: 760px) {
  .calendar iframe {
    height: 560px;
  }
}

/* ----------------------------------------------------------------- blog */

.post {
  display: flex;
  flex-direction: column;
}
.post h3 {
  margin: 14px 0 8px;
  font-size: 1.12rem;
}
.post p {
  flex: 1;
  font-size: 0.92rem;
}
.post-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--green);
}
.post-meta svg {
  width: 15px;
  height: 15px;
  transition: transform var(--t);
}
.post:hover .post-meta svg {
  transform: translateX(3px);
}

.artcrumb {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--fg-mute);
  margin-bottom: 22px;
}
.artcrumb a {
  color: var(--green);
}
.artcrumb svg {
  width: 13px;
  height: 13px;
}
.arthead {
  max-width: 800px;
}
.arthead h1 {
  font-size: clamp(2rem, 4.2vw, 3.3rem);
}
.artmeta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 0.84rem;
  color: var(--fg-mute);
}
.artauthor {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  color: var(--fg);
}
.artauthor img {
  filter: brightness(0) invert(1);
}

.artgrid {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.artside {
  position: sticky;
  top: calc(var(--hdr-h) + 24px);
  display: grid;
  gap: 18px;
}
.toc {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px;
  background: var(--ink-050);
}
.toc-h {
  font-family: var(--body);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin: 0 0 12px;
}
.toc ol {
  margin: 0;
  padding: 0 0 0 18px;
  display: grid;
  gap: 8px;
}
.toc a {
  font-size: 0.88rem;
  color: var(--fg-soft);
  line-height: 1.45;
}
.toc a:hover {
  color: var(--green);
}
.artcta {
  border: 1px solid var(--line);
  border-left: 3px solid var(--green-bright);
  border-radius: var(--r-lg);
  padding: 20px;
  background: var(--ink-050);
}
.artcta b {
  display: block;
  font-size: 0.98rem;
}
.artcta p {
  font-size: 0.86rem;
  color: var(--fg-soft);
  margin: 8px 0 16px;
}

.artnote {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 12px;
  margin-top: 36px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--ink-050);
}
.artnote svg {
  width: 18px;
  height: 18px;
  color: var(--green);
  margin-top: 3px;
}
.artnote p {
  font-size: 0.84rem !important;
  color: var(--fg-mute) !important;
  margin: 0 !important;
  line-height: 1.6;
}

@media (max-width: 900px) {
  .artgrid {
    grid-template-columns: 1fr;
  }
  .artside {
    position: static;
  }
  .artcta {
    display: none;
  }
}

/* A hero with a demo beside it has roughly half the width for its headline,
   so the homepage's display size does not fit. Scaled to the column. */
.hero-in:not(.hero-in--wide) .hero-copy h1 {
  font-size: clamp(2.1rem, 3.4vw, 3.1rem);
}
.hero-in--wide .hero-copy h1 {
  font-size: clamp(2.4rem, 4.6vw, 3.9rem);
}

/* ---------------------------------------------------- "under the bonnet" */

.whygrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 40px;
}
.why {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 16px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
}
.why-n {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--green);
  padding-top: 3px;
}
.why h3 {
  font-size: 1.06rem;
  margin-bottom: 7px;
}
.why p {
  font-size: 0.95rem;
  color: var(--fg-soft);
  line-height: 1.65;
}

@media (max-width: 860px) {
  .whygrid {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* ==========================================================================
   2026 restructure — three products
   --------------------------------------------------------------------------
   Same tokens as everything above. What changes here is rhythm: each section
   gets a different shape so no two in a row look alike, which was the thing
   that made the old homepage read as generated rather than designed.
   ========================================================================== */

/* -------------------------------------------------- hero: stacked product */

.hero-names {
  margin-top: 26px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-size: 0.92rem; font-weight: 600;
}
.hero-names a { color: var(--fg-soft); text-decoration: none; }
.hero-names a:hover { color: var(--green); }
.hero-names i { color: var(--line-2); font-style: normal; }

.herostack { position: relative; display: grid; gap: 14px; align-content: center; }
.hcard {
  margin: 0;
  background: var(--ink-050);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 26px 60px -34px rgba(18, 21, 15, 0.45);
  overflow: hidden;
}
.hcard-top {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 0.78rem; font-weight: 700;
  background: var(--ink-100);
}
.hcard-dot { width: 7px; height: 7px; border-radius: 99px; background: var(--green-bright); }
.hcard-body { padding: 14px; display: grid; gap: 10px; }
.hcard-q { font-size: 0.88rem; font-weight: 650; }
.hcard-field {
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  padding: 9px 11px; font-size: 0.86rem; background: var(--ink-000);
}
.hcard-res {
  display: grid; gap: 2px; padding: 12px 14px;
  border-radius: var(--r); background: var(--green-dim);
  border: 1px solid rgba(60, 122, 34, 0.24); text-align: center;
}
.hcard-res small { font-size: 0.68rem; color: var(--fg-soft); }
.hcard-res .money { font-size: 1.6rem; font-weight: 800; color: var(--green); line-height: 1.1; }
/* The satellite is the tallest thing in the stack; capped so the SolarCheck
   card cannot push its own figure down behind the card below it. */
.hcard .ps-sat { min-height: 124px; }

/* The layered version needs ~540px of column. Below that the cards simply
   stack, because at 1024 they pushed the whole page sideways. */
/*
 * Two cards, not three.
 *
 * The SolarCheck card carried a baked screenshot of the roof renderer from
 * before it was fixed — the heat map across the whole street and the array in
 * scattered strips — at the top of the homepage, which is the worst place on
 * the site to show the weakest asset. It came out, and the real checker is
 * embedded further down the page instead.
 *
 * These are absolute, so dropping a card leaves a hole rather than reflowing.
 * Repositioned as an overlapping pair. The .hcard--2 rules are gone rather
 * than orphaned: a positioned rule with nothing to position is the sort of
 * thing that gets re-used by accident and puts a card in a strange place.
 */
@media (min-width: 1120px) {
  .herostack { display: block; min-height: 470px; }
  .hcard { position: absolute; }
  /* Overlap is the look; covering another card's figure is a bug. The
     GrantCheck card renders 314px tall at 296 wide, and its last line is the
     "official government data" note — so the chat card starts at 288 and takes
     28px of bottom padding, not the sentence. */
  .hcard--1 { top: 0; left: 8px; width: 296px; z-index: 3; }
  .hcard--3 { top: 288px; left: 190px; width: 268px; z-index: 4; }
}
@media (min-width: 1120px) and (prefers-reduced-motion: no-preference) {
  .hcard { animation: hfloat 7s var(--ease) infinite; }
  .hcard--3 { animation-delay: -3.5s; }
}
@keyframes hfloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* --------------------------------------- the questions they arrive with */

.qlist { list-style: none; display: grid; gap: 12px; max-width: 860px; margin: 0 auto; }
.qrow {
  display: grid; grid-template-columns: 1fr auto auto;
  align-items: center; gap: 16px;
  padding: 18px 22px;
  background: var(--ink-050); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.qrow-q { font-size: clamp(1rem, 2.2vw, 1.18rem); font-weight: 650; }
.qrow-arrow { color: var(--line-2); display: inline-flex; }
.qrow-arrow svg { width: 20px; height: 20px; }
.qrow-a {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 750; font-size: 0.9rem; color: var(--green);
  text-decoration: none; white-space: nowrap;
}
.qrow-ic { display: inline-flex; }
.qrow-ic svg { width: 17px; height: 17px; }
.qclose { margin-top: 30px; text-align: center; font-size: clamp(1.05rem, 2.4vw, 1.3rem); color: var(--fg-soft); }
.qclose b { color: var(--fg); }
@media (max-width: 640px) {
  .qrow { grid-template-columns: 1fr; gap: 10px; padding: 16px 18px; }
  .qrow-arrow { display: none; }
}

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

.prods { display: grid; gap: clamp(56px, 8vw, 104px); }
.prod {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.prod--flip .prod-copy { order: 2; }
.prod-n { display: block; font-family: var(--mono); font-size: 0.8rem; color: var(--green); letter-spacing: 0.08em; }
.prod-name { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-weight: 800; font-size: 1.02rem; }
.prod-name svg { width: 19px; height: 19px; color: var(--green); }
.prod-copy h3 {
  font-family: var(--display);
  font-size: clamp(1.7rem, 3.6vw, 2.5rem);
  line-height: 1.08; letter-spacing: -0.02em; margin-top: 12px;
}
.prod-copy .lede { margin-top: 16px; }
.prod-steps { list-style: none; margin: 26px 0 28px; display: grid; gap: 2px; counter-reset: ps; }
.prod-steps li {
  display: grid; gap: 2px; padding: 13px 0 13px 34px;
  border-top: 1px solid var(--line); position: relative; counter-increment: ps;
}
.prod-steps li::before {
  content: counter(ps);
  position: absolute; left: 0; top: 13px;
  font-family: var(--mono); font-size: 0.72rem; color: var(--green);
}
.prod-steps b { font-size: 0.97rem; }
.prod-steps span { font-size: 0.9rem; color: var(--fg-mute); line-height: 1.55; }
@media (max-width: 900px) {
  .prod { grid-template-columns: 1fr; }
  .prod--flip .prod-copy { order: 0; }
}

/* ------------------------------------------------ the product UI mock-ups */

.ui {
  border-radius: var(--r-lg); border: 1px solid var(--line);
  background: var(--ink-050); overflow: hidden;
  box-shadow: 0 30px 70px -40px rgba(18, 21, 15, 0.5);
}
.ui-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px; background: var(--ink-100); border-bottom: 1px solid var(--line);
}
.ui-bar > span { width: 9px; height: 9px; border-radius: 99px; background: var(--line-2); }
.ui-url { margin-left: 10px; display: inline-flex; align-items: center; gap: 6px; font-size: 0.74rem; font-weight: 600; color: var(--fg-soft); }
.ui-url svg { width: 12px; height: 12px; }
.ui-body { padding: clamp(16px, 3vw, 24px); display: grid; gap: 12px; }
.ui-h { font-weight: 700; font-size: 1.02rem; }
.ui-field {
  display: flex; align-items: center; gap: 2px;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  padding: 11px 13px; background: var(--ink-000); font-size: 0.95rem;
}
.ui-caret { width: 1.5px; height: 1.05em; background: var(--green); display: inline-block; }
@media (prefers-reduced-motion: no-preference) { .ui-caret { animation: blink 1.1s steps(2) infinite; } }
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.ui-btn {
  border: 0; cursor: default; background: var(--green-bright); color: var(--green-ink);
  font-family: inherit; font-weight: 750; font-size: 0.95rem;
  padding: 12px 16px; border-radius: var(--r-sm);
}
.ui-result {
  display: grid; gap: 3px; justify-items: center; text-align: center;
  padding: 18px 16px; border-radius: var(--r);
  background: var(--green-dim); border: 1px solid rgba(60, 122, 34, 0.24);
}
.ui-result small { font-size: 0.72rem; color: var(--fg-soft); }
.ui-result .money { font-size: clamp(2rem, 5vw, 2.7rem); font-weight: 800; color: var(--green); line-height: 1.05; }
.ui-badge {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 6px;
  padding: 4px 10px; border-radius: 99px;
  background: rgba(60, 122, 34, 0.14); color: var(--green);
  font-size: 0.74rem; font-weight: 700;
}
.ui-badge svg { width: 13px; height: 13px; }
.ui-steps { display: flex; gap: 6px; flex-wrap: wrap; }
.ui-step {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 99px; background: var(--ink-100); color: var(--fg-mute);
}
.ui-step.is-done { background: var(--green-dim); color: var(--green); }
.ui-step.is-on { background: var(--green); color: #fff; }
.ui-refuse {
  display: flex; align-items: center; gap: 8px;
  margin-top: 4px; padding-top: 12px; border-top: 1px dashed var(--line-2);
  font-size: 0.84rem; font-weight: 700; color: var(--green);
}
.ui-refuse svg { width: 16px; height: 16px; }
.ps-sat--lg { min-height: 190px; }

/* ----------------------------------------------------------- the system */

.sysflow { display: grid; justify-items: center; gap: 0; }
.sys-node {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 22px; border-radius: 99px;
  border: 1px solid var(--line-2); background: var(--ink-050); font-weight: 700;
}
.sys-node svg { width: 18px; height: 18px; color: var(--green); }
.sys-node--end { background: var(--green-bright); color: var(--green-ink); border-color: transparent; }
.sys-node--end svg { color: var(--green-ink); }
.sys-fan { width: 1px; height: 30px; background: var(--line-2); }
.sys-mid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; width: 100%; max-width: 820px; }
.sys-card {
  display: grid; gap: 8px; justify-items: center; text-align: center;
  padding: var(--pad); border-radius: var(--r-lg);
  border: 1px solid var(--line); background: var(--ink-050);
}
.sys-card small { font-size: 0.86rem; color: var(--fg-mute); line-height: 1.45; }
.sys-card b { display: inline-flex; align-items: center; gap: 7px; font-size: 0.95rem; }
.sys-card svg { width: 16px; height: 16px; color: var(--green); }
@media (max-width: 760px) { .sys-mid { grid-template-columns: 1fr; max-width: 420px; } }

/* ------------------------------------------------------------ the inbox */

.inbox {
  background: var(--ink-050); border: 1px solid var(--line);
  border-radius: var(--r-xl); overflow: hidden;
  box-shadow: 0 30px 70px -40px rgba(18, 21, 15, 0.45);
}
.inbox-top {
  display: flex; align-items: center; gap: 9px;
  padding: 14px 20px; border-bottom: 1px solid var(--line);
  background: var(--ink-100); font-weight: 750; font-size: 0.86rem;
}
.inbox-top small { margin-left: auto; color: var(--fg-soft); font-weight: 600; }
.inbox-name {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  padding: 18px 20px 12px; font-family: var(--display); font-size: 1.32rem; font-weight: 700;
}
.inbox-name span { font-size: 0.86rem; font-weight: 500; color: var(--fg-mute); }
.inbox-rows { list-style: none; display: grid; gap: 1px; padding: 0 20px; }
.inbox-rows li {
  display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: center;
  padding: 9px 0; border-top: 1px solid var(--line); font-size: 0.91rem;
}
.inbox-rows svg { width: 16px; height: 16px; color: var(--fg-mute); }
.inbox-out {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin: 16px 20px 20px; padding: 14px 18px;
  border-radius: var(--r); background: var(--green-dim);
  border: 1px solid rgba(60, 122, 34, 0.24);
}
.inbox-out small { display: block; font-size: 0.7rem; color: var(--fg-soft); }
.inbox-out b { font-size: 0.92rem; }
.inbox-out .money { font-size: 1.55rem; font-weight: 800; color: var(--green); }
.inbox-note { padding: 0 20px 18px; font-size: 0.76rem; color: var(--fg-mute); }

/* ------------------------------------------------------ steps and embed */

.steps {
  list-style: none; display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
}
.steps li { background: var(--ink-050); padding: var(--pad); display: grid; gap: 8px; align-content: start; }
.steps-n { font-family: var(--mono); font-size: 0.74rem; color: var(--green); letter-spacing: 0.08em; }
.steps b { font-size: 1.02rem; }
.steps p { font-size: 0.9rem; color: var(--fg-mute); line-height: 1.55; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

.embed { margin-top: 26px; border-radius: var(--r-lg); background: var(--fg); padding: 18px 20px; overflow-x: auto; }
.embed-lab {
  display: block; margin-bottom: 8px; font-size: 0.7rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55);
}
.embed pre { margin: 0; }
.embed code { font-family: var(--mono); font-size: 0.82rem; line-height: 1.6; color: #cfe8b8; white-space: pre; }

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

.democard {
  display: grid; gap: 9px; align-content: start;
  padding: var(--pad); background: var(--ink-050);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  text-decoration: none; color: inherit;
  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}
.democard:hover { border-color: var(--green); transform: translateY(-2px); box-shadow: 0 20px 44px -30px rgba(18, 21, 15, 0.4); }
.democard-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--r-sm);
  background: var(--green-dim); color: var(--green);
}
.democard-ic svg { width: 20px; height: 20px; }
.democard h3 { font-size: 1.18rem; }
.democard p { font-size: 0.92rem; color: var(--fg-mute); }
.democard-go { margin-top: 6px; display: inline-flex; align-items: center; gap: 7px; font-weight: 750; font-size: 0.9rem; color: var(--green); }
.democard-go svg { width: 15px; height: 15px; }

/* -------------------------------------------------- AnswerHQ try prompts */

.trybox {
  max-width: 620px; margin: 0 auto; padding: var(--pad);
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--ink-050);
}
.trybox-h { font-weight: 750; margin-bottom: 12px; }
.trybox-list { list-style: none; display: grid; gap: 8px; margin-bottom: 14px; }
.trybox-list li { padding: 11px 14px; border-radius: var(--r-sm); background: var(--ink-100); font-size: 0.93rem; }

/* --------------------------------------------------- pricing per product */

.tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: start; }
.tier-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--r-sm);
  background: var(--green-dim); color: var(--green); margin-bottom: 4px;
}
.tier-ic svg { width: 18px; height: 18px; }
@media (max-width: 1080px) { .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .tiers { grid-template-columns: 1fr; } }

/* ------------------------------------------------------- nav, simplified */

/* Merged into the base .mega-inner rule above — a second block 2,777 lines
   later that did not reset grid-template-columns left the "simplified" nav
   laying out as the old four-track full-width bar. */
.mega-go { width: 15px; height: 15px; color: var(--line-2); margin-left: auto; }
.mega-item { display: flex; align-items: center; gap: 12px; }

/* ---------------------------------------------------------------- safety */

/* A reveal animation must never be the reason content cannot be read. */
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hcard { animation: none !important; }
}

/* ==========================================================================
   Restored + typography pass
   --------------------------------------------------------------------------
   .demoframe and .fineprint were written in a previous session and never
   committed, so a `git checkout` of this file silently took them with it. The
   live demo iframes collapsed to the browser's default 150px and showed a
   cropped band of the widget. That is what "the website is messed up" was.
   ========================================================================== */

.demoframe {
  max-width: 560px;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--ink-050);
  box-shadow: 0 30px 70px -40px rgba(18, 21, 15, 0.42);
}
/* Tall enough for the whole first step plus the result, on the narrowest
   phone. An iframe has no intrinsic height — leaving it to the default is
   what cropped it. */
.demoframe iframe {
  display: block;
  width: 100%;
  height: 720px;
  border: 0;
  background: var(--ink-050);
}
@media (max-width: 600px) {
  .demoframe { border-radius: var(--r-lg); }
  .demoframe iframe { height: 660px; }
}

.fineprint {
  margin-top: 16px;
  text-align: center;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--fg-soft);
  max-width: 520px;
  margin-inline: auto;
}

/* The flow connectors on the dark system section. */
.sys-node--start { background: var(--ink-100); }
.sys-fan--up,
.sys-fan--single { width: 1px; }

/* ------------------------------------------------------------ typography */

/* Headings were set tight but ragged. Three changes, all of them the sort of
   thing that reads as "designed" without changing the typeface:
   balanced line breaks so no heading ends on an orphan, optical sizing so the
   display face thins correctly at large sizes, and lining tabular figures so
   money lines up and never jitters while a counter animates. */
h1, h2, h3, .prod-copy h3, .hero-copy h1 {
  text-wrap: balance;
  font-optical-sizing: auto;
}
h2 { letter-spacing: -0.03em; }
h3 { letter-spacing: -0.015em; }

.money,
.mono,
.tier-price b,
.num {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}

/* A comfortable measure. Long lines are the most common reason body copy
   reads as unconsidered, and the lede was running full-width in places. */
.lede { max-width: 62ch; text-wrap: pretty; }
p { text-wrap: pretty; }

/* Slightly more air between stacked paragraphs than the browser default,
   and a hair more line-height on small text where it was cramped. */
small, .fine, .fineprint { line-height: 1.6; }

/* ------------------------------------------------- GrantCheck, per trade */

.niches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.niche {
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-template-areas: "ic head" "amt amt" "note note";
  gap: 8px 14px;
  align-content: start;
  padding: var(--pad);
  background: var(--ink-050);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.niche-ic {
  grid-area: ic;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--r-sm);
  background: var(--green-dim); color: var(--green);
}
.niche-ic svg { width: 20px; height: 20px; }
.niche-head { grid-area: head; align-self: center; }
.niche-head h3 { font-size: 1.1rem; line-height: 1.2; }
.niche-scheme { font-size: 0.8rem; color: var(--fg-mute); margin-top: 2px; }
.niche-amt {
  grid-area: amt;
  margin-top: 6px;
  font-family: var(--display);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--green);
  font-variant-numeric: tabular-nums lining-nums;
}
.niche-note { grid-area: note; font-size: 0.89rem; line-height: 1.55; color: var(--fg-soft); }

@media (max-width: 900px) { .niches { grid-template-columns: 1fr; } }

/* ------------------------------------------------ why the product matters */

.wm-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.wm {
  padding: var(--pad);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--ink-050);
}
.wm--good { background: var(--green-dim); border-color: rgba(60, 122, 34, 0.24); }
.wm-lab {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.74rem; font-weight: 750;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--fg-mute);
}
.wm--good .wm-lab { color: var(--green); }
.wm-lab svg { width: 14px; height: 14px; }
.wm-quote {
  margin-top: 14px;
  font-family: var(--display);
  font-size: clamp(1.1rem, 2.2vw, 1.34rem);
  font-weight: 600;
  line-height: 1.34;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.wm--bad .wm-quote { color: var(--fg-soft); }
.wm-note { margin-top: 12px; font-size: 0.91rem; line-height: 1.6; color: var(--fg-mute); }

.wm-list {
  list-style: none;
  /* An <ol> carries a 40px inline-start padding from the UA stylesheet. The
     grid items sit inside the content box, so that padding rendered as a grey
     strip of the container's own backing colour down the left of the list. */
  padding: 0;
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  counter-reset: wm;
}
.wm-list li {
  background: var(--ink-050);
  padding: var(--pad) var(--pad) var(--pad) 52px;
  position: relative;
  counter-increment: wm;
}
.wm-list li::before {
  content: counter(wm, decimal-leading-zero);
  position: absolute; left: 22px; top: 25px;
  font-family: var(--mono); font-size: 0.72rem; color: var(--green);
}
.wm-list b { font-size: 1rem; }
.wm-list p { margin-top: 5px; font-size: 0.9rem; line-height: 1.58; color: var(--fg-mute); }

.wm-close {
  margin: 26px auto 0;
  max-width: 62ch;
  text-align: center;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--fg-soft);
  text-wrap: pretty;
}

@media (max-width: 860px) {
  .wm-pair, .wm-list { grid-template-columns: 1fr; }
}

/* ------------------------------------- hero: real product screenshots ---- */

/* These were CSS approximations of the products. They read as cheap because
   they were: an invented interface next to a claim that the software is the
   point. These are screenshots of the live GrantCheck and SolarCheck. */
.hcard img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
}
.hcard img { border-radius: 0; }

/* The screenshots are portrait and tall. Cropping from the top keeps the part
   that carries the answer — the question and the figure — and drops the
   footnotes, which are unreadable at this size anyway. */
.hcard img { aspect-ratio: auto; object-fit: contain; }


/* ------------------------------------------------------------- measure ---- */

/* Body copy in long-form and legal pages ran the full container — 964px on
   /about, which is roughly 130 characters. Anything past about 75 is hard to
   track back to the start of the next line. */
.prose p,
.prose li,
.legal p,
.legal li,
.sec p:not(.lede):not(.fine):not(.fineprint):not(.hero-trust):not([class*="-note"]) {
  max-width: 72ch;
}
.center p,
.sec-head p,
.mx p { margin-inline: auto; }

/* Product hero: a screenshot inside the browser frame rather than a re-creation. */
.browser--shot img { display: block; width: 100%; height: auto; }
.browser--shot { overflow: hidden; }

/* ------------------------------------------------------------- founder ---- */

.founder {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  max-width: 880px;
  margin-inline: auto;
}
.founder-shot {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ink-100);
}
.founder-shot img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.founder-copy p + p { margin-top: 14px; }
.founder-todo {
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  border: 1px dashed var(--line-2);
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--fg-mute);
}
@media (max-width: 760px) {
  .founder { grid-template-columns: 1fr; }
  .founder-shot { max-width: 240px; margin-inline: auto; }
}

/* The blog index groups by category; the group heading is the label, so the
   cards inside it no longer repeat it as a pill. */
.blog-cat {
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  letter-spacing: -0.02em;
}

/* An h2 that needs to look like an h3: heading order is for structure, size is
   for hierarchy, and the two should not be forced to agree. */
.h3-size { font-size: clamp(1.1rem, 2.2vw, 1.3rem); letter-spacing: -0.015em; }


/* Header hit areas. The brand lockup measured 27px high and the nav links 36;
   the guideline is 44. Padding rather than bigger type, so nothing moves
   visually — and min-height rather than more padding, so the header keeps its
   height. Hidden mega-menu items measure 0 and are excluded. */
.brand,
.nav-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
/* The header CTA keeps its own size: forcing 44px on it pushed the row past
   390px. It is already 36px with generous horizontal padding, which is a
   comfortable target in practice. */

/* -------------------------------------------- GrantCheck demo, per trade */

.demotabs {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin-bottom: 18px;
}
.demotab {
  font: inherit; font-weight: 700; font-size: 0.9rem;
  padding: 10px 18px; min-height: 44px;
  border-radius: 99px; cursor: pointer;
  border: 1px solid var(--line-2);
  background: var(--ink-050); color: var(--fg-soft);
  transition: background var(--t), color var(--t), border-color var(--t);
}
.demotab:hover { border-color: var(--green); color: var(--fg); }
.demotab.is-on { background: var(--green); border-color: var(--green); color: #fff; }

/* ==========================================================================
   The SolarCheck film
   --------------------------------------------------------------------------
   A 9:16 ad under the SolarCheck hero. Every rule here exists to stop it
   costing anything before it is wanted:

   - .vplayer reserves the aspect ratio, so the box is the right size before
     the video element has a source. No layout shift, ever, including for the
     visitor who never scrolls this far.
   - The unloaded state is the dark ink rather than a white hole, because that
     is what the film's own letterbox is and the swap should be invisible.
   - Controls sit top-right. The captions are burnt into the bottom third of
     the frame and a control over them would cover the words.

   The band is .sec--tint, and the hero above it is paper: the half-step of
   tone is what stops the film reading as part of the hero.
   ========================================================================== */

.film {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: clamp(28px, 4.5vw, 64px);
  align-items: center;
}

.film-media {
  margin: 0;
  min-width: 0;
}

.vplayer {
  position: relative;
  aspect-ratio: 9 / 16;
  width: 100%;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: #12150f;
  border: 1px solid var(--line);
  box-shadow: 0 30px 70px -40px rgba(18, 21, 15, 0.42);
}

.vplayer-v {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #12150f;
}

/* Top-right, clear of the burnt-in captions. */
.vplayer-ctl {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.vplayer-btn,
.vplayer-sound {
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 8px 14px;
  border-radius: 99px;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.26);
  /* Over moving footage, so the contrast target is met against the scrim
     rather than against whatever frame happens to be underneath. Opaque
     enough (0.86) that white text clears 4.5:1 on the brightest frame.

     No backdrop-filter. A blurred backdrop over a <video> inside a rounded,
     overflow-hidden box makes Chrome paint the filtered region beyond the
     element and beyond the clip — it rendered as a bright green halo bleeding
     past the corner radius, sampled off the lawn in the aerial shot. A solid
     scrim is both correct and cheaper to composite. */
  background: rgba(10, 13, 9, 0.86);
  color: #f4f4f0;
  transition: background var(--t), border-color var(--t);
}
/* [hidden] is a UA rule and loses to the class above, so the play button
   rendered permanently over footage that was already playing. Same trap the
   showcase panels hit — see .showpanel[hidden]. */
.vplayer-btn[hidden],
.vplayer-sound[hidden] {
  display: none;
}

.vplayer-btn:hover,
.vplayer-sound:hover {
  background: rgba(10, 13, 9, 0.9);
  border-color: var(--green-bright);
}
.vplayer-btn svg { width: 14px; height: 14px; }

/* The play affordance when autoplay is refused or motion is not wanted: big,
   centred, unmissable — not a 36px pill in the corner. */
.vplayer-btn[data-center] {
  position: absolute;
  inset: 0;
  margin: auto;
  width: max-content;
  height: max-content;
  font-size: 0.95rem;
  padding: 14px 24px;
  min-height: 48px;
  background: var(--green-bright);
  border-color: var(--green-bright);
  color: var(--green-ink);
}
.vplayer-btn[data-center]:hover { background: #8ed659; }

.vplayer-fallback {
  position: absolute;
  inset: auto 12px 12px;
  text-align: center;
  color: #f4f4f0;
  font-weight: 700;
  font-size: 0.85rem;
}

.film-cap {
  margin-top: 14px;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--fg-mute);
  text-align: center;
}

.film-copy h2 { margin-top: 14px; }
.film-copy .lede { margin-top: 16px; }

.film-beats {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 18px;
}
.film-beats li {
  display: grid;
  gap: 4px;
  padding-left: 18px;
  border-left: 2px solid var(--green-dim);
}
.film-beats b { font-size: 0.98rem; }
.film-beats p {
  margin: 0;
  color: var(--fg-soft);
  font-size: 0.94rem;
  line-height: 1.6;
}

.film-fine {
  margin-top: 24px;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--fg-mute);
}
.film-jump {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
}

@media (max-width: 900px) {
  .film {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  /* Copy first on a phone. A 9:16 video with no heading above it is 500px of
     unexplained motion before the visitor knows what they are looking at. */
  .film-copy { order: -1; }
  .vplayer {
    max-width: min(320px, 74vw);
    margin-inline: auto;
    border-radius: var(--r-lg);
  }
  .film-beats { gap: 16px; }
}

/* ==========================================================================
   "We also run ads" — the quiet band on /how-it-works
   --------------------------------------------------------------------------
   This is the only place on the site that mentions anything outside the three
   products, and every rule below exists to keep it that way. No card, no
   icon, no border box: cards are the visual language of a product, and a card
   here would read as a fourth thing to choose between. Hairline-separated
   rows are the shape of a footnote, which is what this is.

   The measure is deliberately narrower than .lede and the whole block is
   indented from the section head above it, so it sits visually *below* the
   product grid rather than beside it.
   ========================================================================== */

.also {
  max-width: 760px;
  margin-inline: auto;
  padding-top: clamp(24px, 3vw, 36px);
  border-top: 1px solid var(--line);
}

.also-head h2 { color: var(--fg-soft); }

.also-lede {
  margin-top: 10px;
  max-width: 62ch;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--fg-mute);
}

.also-list {
  list-style: none;
  margin: clamp(20px, 2.5vw, 28px) 0 0;
  padding: 0;
}

.also-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 4px 24px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.also-row:last-child { border-bottom: 1px solid var(--line); }

.also-row b {
  font-size: 0.95rem;
  /* Not --green. A green label here would give these the same accent the
     product names carry and undo the whole point of the band. */
  color: var(--fg);
}
.also-row p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--fg-soft);
}

.also-foot {
  margin-top: 18px;
  font-size: 0.86rem;
  line-height: 1.65;
  color: var(--fg-mute);
}
.also-foot .tlink { font-size: inherit; }

@media (max-width: 640px) {
  .also-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* Three-across variant of the numbered list.
   .wm-list is a two-column grid whose cells are separated by letting a 1px
   background show through the gaps. That only looks deliberate when the
   columns divide evenly into the item count — with three items the fourth
   cell has no <li> in it and the backing colour renders as an empty grey
   block. Three columns, and the row is full. */
.wm-list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .wm-list--3 { grid-template-columns: 1fr; }
}

/* The SolarCheck result caption, with no colour ramp.
   The heat map and the drawn panels came off the roof picture, so the
   Shaded -> Best sun scale underneath it described a legend for something no
   longer on screen, and the caption promised "panel positions and sunlight".
   The bar and the two labels are hidden here rather than deleted from the
   widget, so the markup stays comparable with the version customers run. */
.sunkey--plain .sunkey-bar,
.sunkey--plain .sunkey-lo,
.sunkey--plain .sunkey-hi { display: none; }
.sunkey--plain small { margin-top: 0; }

/* The origin story on /about. Prose, measured for reading rather than for
   scanning: a narrative in the same 62ch column as a .lede would be, with the
   first paragraph carrying the weight and the rest stepping down. */
.story { max-width: 68ch; }
.story p + p { margin-top: 16px; }
.story p:not(.lede) { color: var(--fg-soft); line-height: 1.72; }

/* ==========================================================================
   Pricing
   --------------------------------------------------------------------------
   Four tiers, equal weight, one flagged. No "most popular" badge on the
   dearest one — the flag goes on the checker-plus-chat bundle because that is
   genuinely what most installers take, and a flag on the top tier is the
   oldest trick on a pricing page and installers can smell it.
   ========================================================================== */

.ptable {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.ptier {
  background: var(--ink-050);
  padding: var(--pad-lg) var(--pad);
  display: grid;
  align-content: start;
  gap: 10px;
  position: relative;
}
.ptier--on { background: #f5faf1; }
.ptier-flag {
  position: absolute;
  top: 0; right: 0;
  font-size: 0.64rem; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 5px 10px;
  color: #fff; background: var(--green);
  border-bottom-left-radius: var(--r-sm);
}
.ptier-name { font-size: 1.02rem; letter-spacing: -0.01em; margin: 0; }
.ptier-name span { font-weight: 500; color: var(--fg-mute); }
.ptier-price { margin: 0; display: flex; align-items: baseline; gap: 4px; }
.ptier-price b {
  font-family: var(--display);
  font-size: clamp(1.7rem, 3.4vw, 2.1rem);
  letter-spacing: -0.03em;
  /* Money, so --amber. The green is for the brand, not for numbers. */
  color: var(--amber);
}
.ptier-price span { font-size: 0.86rem; color: var(--fg-mute); font-weight: 600; }
.ptier-one { margin: 0; font-size: 0.9rem; line-height: 1.6; color: var(--fg-soft); }

@media (max-width: 960px) { .ptable { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ptable { grid-template-columns: 1fr; } }

/* The managed tier, on the dark band. */
.managed {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
  padding: var(--pad-lg);
  background: var(--ink-050);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.managed-price { display: grid; gap: 2px; align-content: start; }
.managed-price span { font-size: 0.84rem; color: var(--fg-mute); font-weight: 600; }
.managed-price b {
  font-family: var(--display);
  font-size: clamp(2.1rem, 5vw, 2.8rem);
  letter-spacing: -0.03em;
  color: var(--amber);
  line-height: 1.05;
}
.managed-list { margin: 0; }

@media (max-width: 760px) {
  .managed { grid-template-columns: 1fr; gap: 22px; }
}

/* The face on the homepage. Small and low: it is a signature, not a hero. */
.whobuilds {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: clamp(18px, 3vw, 28px);
  align-items: center;
  max-width: 760px;
  margin-inline: auto;
  padding: var(--pad);
  background: var(--ink-050);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.whobuilds img {
  width: 96px; height: 96px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.whobuilds h2 { margin: 0 0 8px; }
.whobuilds p { margin: 0; font-size: 0.93rem; line-height: 1.65; color: var(--fg-soft); }
.whobuilds-sig { margin-top: 12px !important; font-size: 0.86rem !important; color: var(--fg-mute) !important; }
@media (max-width: 560px) {
  .whobuilds { grid-template-columns: 1fr; text-align: left; }
}

/* The four figures on the homepage. A strip, not a second pricing table —
   the page it links to does the explaining. */
.pstrip {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  max-width: 860px;
  margin-inline: auto;
}
.pstrip li {
  background: var(--ink-050);
  padding: var(--pad-sm);
  display: grid;
  gap: 2px;
  text-align: center;
}
.pstrip b {
  font-family: var(--display);
  font-size: clamp(1.4rem, 3vw, 1.75rem);
  letter-spacing: -0.03em;
  color: var(--amber);   /* money */
}
.pstrip span { font-size: 0.88rem; font-weight: 700; }
.pstrip small { font-size: 0.78rem; color: var(--fg-mute); }

@media (max-width: 680px) { .pstrip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Trade cards. A row of doors, not a grid of products — each one leads to a
   page with a working checker already set to that trade, so the figure is the
   thing worth showing and it sits at the end of the row where a price would. */
.tradecards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 16px);
  margin-top: clamp(28px, 4vw, 40px);
}
.tradecard {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 18px var(--pad-sm);
  background: var(--ink-050);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--t), transform var(--t);
}
.tradecard:hover { border-color: var(--green); transform: translateY(-2px); }
.tradecard-ic {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--r-sm);
  background: var(--green-dim); color: var(--green);
}
.tradecard-ic svg { width: 20px; height: 20px; }
.tradecard h3 { font-size: 1rem; margin: 0; }
.tradecard p { margin: 3px 0 0; font-size: 0.86rem; line-height: 1.5; color: var(--fg-soft); }
.tradecard-fig {
  font-family: var(--display);
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  color: var(--amber);   /* money */
  white-space: nowrap;
}
@media (max-width: 720px) {
  .tradecards { grid-template-columns: 1fr; }
  .tradecard { grid-template-columns: 36px minmax(0, 1fr); }
  .tradecard-fig { grid-column: 2; font-size: 0.95rem; }
}

/* The searches a homeowner actually types, on a trade page. */
.searches {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px; max-width: 860px;
}
.searches li {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  background: var(--ink-050);
  border: 1px solid var(--line);
  border-radius: 99px;
  font-size: 0.92rem;
  color: var(--fg-soft);
}
.searches svg { width: 17px; height: 17px; color: var(--fg-mute); flex: none; }
@media (max-width: 720px) { .searches { grid-template-columns: 1fr; } }

/* Trades in the mega-menu. A second row under the three products, visually
   subordinate to them: the products are what we sell, the trades are doors
   into the same three things. */
.mega-trades {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  /* It is a sibling of .mega-inner, not a child, so it needs the same wrap
     and gutter or it starts flush against the viewport edge. */
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 14px var(--gut) 20px;
  border-top: 1px solid var(--line);
}
.mega-lab {
  font-size: 0.68rem; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-mute); margin-right: 4px;
}
.mega-trade {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; min-height: 36px;
  border-radius: 99px;
  border: 1px solid var(--line);
  font-size: 0.85rem; font-weight: 650;
  color: var(--fg-soft); text-decoration: none;
  transition: border-color var(--t), color var(--t);
}
.mega-trade:hover { border-color: var(--green); color: var(--fg); }
.mega-trade svg { width: 15px; height: 15px; color: var(--green); }

.own-close {
  margin: clamp(22px, 3vw, 30px) auto 0;
  max-width: 62ch;
  text-align: center;
  font-size: clamp(1rem, 2.1vw, 1.14rem);
  line-height: 1.6;
  color: var(--fg-soft);
}

.own-close {
  margin: clamp(22px, 3vw, 30px) auto 0;
  max-width: 62ch;
  text-align: center;
  font-size: clamp(1rem, 2.1vw, 1.14rem);
  line-height: 1.6;
  color: var(--fg-soft);
}

/* ==========================================================================
   Lead portal vs your own site
   --------------------------------------------------------------------------
   The version before this was rows with both sides typeset identically —
   same weight, same colour, same size — so there was nothing to tell you
   which column was the good one. A comparison you have to read twice to
   understand is not doing its job.

   The right-hand column is tinted continuously down the table and carries the
   darker text and a tick; the left is muted with a cross. You can see the
   answer before you read a word, which is the point.

   The tint is a 7% wash of the brand green rather than the green itself —
   --green-bright is a fill, never a background you set type on.
   ========================================================================== */

.cmp {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ink-050);
  max-width: 980px;
  margin-inline: auto;
}


/* Five trades in a two-column grid leaves the last one stranded beside a
   hole. A lone final card spans instead, which reads as a decision. */
.tradecard:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* ==========================================================================
   Lead portal vs your own site
   --------------------------------------------------------------------------
   Two cards, four short lines each. Earlier attempts put this in a table:
   first as two independent columns the reader had to pair up, then as aligned
   rows. The rows worked structurally and still read badly, because every cell
   was a sentence — eight paragraphs of prose asking to be compared. The point
   is graspable in about three seconds and the layout was asking for thirty.

   Four items a side, none longer than a line, and one money line underneath.
   About twenty-five words a card instead of a hundred.

   Named .vsown rather than .cmp: .cmp is already a table class from the
   retired comparison page and carries min-width: 620px for a horizontally
   scrollable wrapper. Reusing it silently gave this block a 620px floor and
   sent the entire homepage into sideways scroll on a phone.
   ========================================================================== */

.vsown {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 22px);
  max-width: 940px;
  margin-inline: auto;
}

.vsown-card {
  display: flex;
  flex-direction: column;
  padding: var(--pad-lg);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--ink-050);
}
.vsown-card--you {
  border-color: rgba(60, 122, 34, 0.3);
  background: #f6faf2;
}

.vsown-top { padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.vsown-lab {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 99px;
  background: var(--ink-150);
  color: var(--fg-mute);
}
.vsown-card--you .vsown-lab { background: var(--green); color: #fff; }
.vsown-top p {
  margin: 12px 0 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--fg-soft);
}
.vsown-card--you .vsown-top p { color: var(--fg); }

.vsown-list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
  flex: 1;
}
.vsown-list li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--fg-soft);
}
.vsown-card--you .vsown-list li { color: var(--fg); }
.vsown-list svg { width: 17px; height: 17px; margin-top: 2px; color: var(--fg-mute); }
.vsown-card--you .vsown-list svg { color: var(--green); }

.vsown-money {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--fg-mute);
}
.vsown-money b { color: var(--fg); }
.vsown-card--you .vsown-money { color: var(--fg-soft); }
.vsown-card--you .vsown-money b { color: var(--green); }

@media (max-width: 760px) {
  .vsown { grid-template-columns: 1fr; }
  .vsown-card { padding: var(--pad); }
}

/* ==========================================================================
   How a lead portal works — the four steps
   --------------------------------------------------------------------------
   Three attempts at this as a comparison table failed for the same reason:
   a table asks you to read two things and hold them against each other, and
   the point here is a sequence. It is a process — they build, they advertise,
   they capture, they sell — and the sting is only in the last step.

   So: a numbered flow, four steps, one line each. The last step is marked,
   because that is the one the installer pays for. Then the verdict, then the
   flip. Nothing to cross-reference.
   ========================================================================== */

.pflow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 18px);
  counter-reset: flow;
}
.pflow-step {
  position: relative;
  padding: var(--pad);
  background: var(--ink-050);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
/* The step that costs money. Amber is the money colour on this site. */
.pflow-step--end {
  border-color: rgba(154, 91, 0, 0.3);
  background: var(--amber-dim);
}
.pflow-n {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--ink-150);
  color: var(--fg-mute);
  font-family: var(--mono);
  font-size: 0.82rem;
  font-weight: 700;
}
.pflow-step--end .pflow-n { background: var(--amber); color: #fff; }
.pflow-step b { display: block; font-size: 1rem; }
.pflow-step p { margin: 6px 0 0; font-size: 0.9rem; line-height: 1.55; color: var(--fg-soft); }

/* The arrow between steps. Decorative, so it goes when they stack. */
@media (min-width: 900px) {
  .pflow-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50%;
    right: calc(clamp(12px, 1.6vw, 18px) * -1);
    width: clamp(12px, 1.6vw, 18px);
    height: 1px;
    background: var(--line-2);
  }
}
@media (max-width: 900px) { .pflow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pflow { grid-template-columns: 1fr; } }

.pflow-verdict {
  margin: clamp(24px, 3vw, 32px) auto 0;
  max-width: 64ch;
  text-align: center;
  font-size: clamp(1.02rem, 2.2vw, 1.18rem);
  line-height: 1.6;
  color: var(--fg-soft);
}

/* The flip. One statement, the only green thing in the section. */
.flip {
  margin: clamp(28px, 4vw, 44px) auto 0;
  max-width: 760px;
  padding: clamp(26px, 4vw, 40px);
  text-align: center;
  border-radius: var(--r-xl);
  border: 1px solid rgba(60, 122, 34, 0.3);
  background: #f4faef;
}
.flip-lab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
}
.flip-lab svg { width: 15px; height: 15px; }
.flip-line {
  margin: 16px 0 0;
  font-family: var(--display);
  font-size: clamp(1.3rem, 3.2vw, 1.9rem);
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.flip-line b { color: var(--green); }
.flip-sub {
  margin: 14px auto 0;
  max-width: 54ch;
  font-size: 0.97rem;
  line-height: 1.6;
  color: var(--fg-soft);
}

/* ==========================================================================
   Accessibility corrections
   --------------------------------------------------------------------------
   Every value here was measured against the live site, not judged.
   ========================================================================== */

/*
 * WCAG 2.2 SC 2.4.11 Focus Not Obscured.
 *
 * .stickybar is position:fixed and 73px tall, and scroll-padding-bottom was
 * auto — so the browser scrolled a focused element flush to the viewport
 * bottom, directly underneath it. Six footer links were measured 100% hidden
 * while focused. One line clears all of them.
 */
html { scroll-padding-bottom: 89px; }

/*
 * --fg-mute measures 4.75:1 on the paper background — a quarter of a point of
 * headroom — so it fails as soon as anything tints the surface beneath it.
 * A darker muted tone for tinted grounds.
 */
:root { --fg-mute-tint: #5a6057; }

.ctaband p.fine,   /* #6B7268 on #E6F2DA measured 4.28:1, on every page */
.film-cap,         /* on #F2F1EC, 4.39:1 */
.pflow-n {         /* on #EDECE6, 4.19:1 */
  color: var(--fg-mute-tint);
}
/* #3C7A22 on the #D1E5C6 pill measured 3.94:1. Darken the text, not the pill —
   the pill is the brand tint and the text is the thing that has to be read. */
.ui-badge { color: #2f6119; }

/* A decorative separator, not content. 1.54:1 is fine for a dot nobody needs
   to read, but it should not be exposed as text at all — see hero-names in
   the template, which now hides it from assistive tech. */
.hero-names i { color: var(--fg-mute); }

/*
 * Hit targets. The house rule is 48px; these were the ones that missed.
 * #burger is the only route to the nav on a phone and was the worst offender.
 */
#burger { width: 48px; height: 48px; }
.ftr-social a { width: 44px; height: 44px; }
.vplayer-sound, .vplayer-btn { min-height: 44px; }

/* A horizontally scrolling region has to be reachable without a mouse. */
.snippet pre { overflow-x: auto; }
.snippet pre:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }

/* ==========================================================================
   In-body blog cards
   --------------------------------------------------------------------------
   These classes are written by hand inside blog.json bodies and have never
   existed in this stylesheet. The effect was not subtle: .bc-top holds a bare
   <svg> with no width or height attributes, so with no CSS it expanded to the
   full prose column — roughly 600px of green megaphone, twice per post, on six
   live posts. Three of them were added this week.

   This is the same failure as the .cmp and .flow collisions: markup and
   stylesheet drifting apart with nothing asserting they agree. A build check
   for it goes in alongside.
   ========================================================================== */

.blog-grid,
.blog-more {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 16px);
  margin: clamp(26px, 3.5vw, 36px) 0;
}

.blog-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: var(--pad-sm);
  background: var(--ink-050);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--t), transform var(--t);
}
.blog-card:hover { border-color: var(--green); transform: translateY(-2px); }
/* These sit inside .prose, where `.prose a` underlines every link. A card is
   not a link in a sentence — the whole tile is the target. */
.prose .blog-card,
.prose .blog-card:hover { text-decoration: none; }

.bc-top {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  background: var(--green-dim);
  color: var(--green);
}
/* The actual bug: unsized inline SVG in a prose column. */
.bc-top svg { width: 21px; height: 21px; display: block; }

.bc-body { display: grid; gap: 4px; min-width: 0; }
.bc-tag {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.bc-body h3 { font-size: 0.98rem; margin: 0; letter-spacing: -0.01em; }
.bc-body p {
  margin: 0;
  font-size: 0.87rem;
  line-height: 1.5;
  color: var(--fg-soft);
  max-width: none;
}
.bc-link {
  margin-top: 4px;
  font-size: 0.84rem;
  font-weight: 750;
  color: var(--green);
}

/* The closing call to action inside a post body. */
.blog-cta {
  margin: clamp(26px, 3.5vw, 36px) 0 0;
  padding: var(--pad);
  border-radius: var(--r-lg);
  border: 1px solid rgba(60, 122, 34, 0.3);
  background: #f6faf2;
  font-size: 0.97rem;
  line-height: 1.6;
  max-width: none;
}

@media (max-width: 640px) {
  .blog-grid,
  .blog-more { grid-template-columns: 1fr; }
}