/* ═══════════════════════════════════════════════════════════════════════
   webpage.contact — Daylight

   Warm paper, ink, and one deep blue.

   The reader is a business owner in his fifties, on a phone, in daylight,
   deciding in about four seconds whether this is a real person he could
   call. That is the whole brief. The dark, glowing version this replaced
   was designed for people who look at websites for a living — it read as
   impressive to them and as unfamiliar to him.

   Blue rather than a warm accent because blue is the colour people trust
   with money, and it is the one thing on the page allowed to be saturated.

   Type inverts the usual pairing: a heavy grotesque for headlines (signage)
   over a serif for reading (letterhead). A serif body reads as a letter
   from a person; a grotesque body would have read as software.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --paper:   #faf7f2;   /* warm off-white, the ground                   */
  --paper-2: #f2ede4;   /* a shade down, for banded sections            */
  --card:    #ffffff;
  --ink:     #16181c;
  --ink-70:  #4c463d;   /* lede and body-secondary — 8.4:1              */
  --ink-50:  #6b6459;   /* small print — 5.5:1, clears AA               */
  --ink-40:  #6e6858;   /* held-back headlines — 5.2:1 paper, 4.8:1 band */
  --rule:    #ded7cb;
  --rule-2:  #cfc6b6;
  --blue:    #1b3a6b;   /* the only accent — 10.5:1 on paper            */
  --blue-2:  #12294c;   /* pressed / hover                              */
  --blue-05: #eef0f5;   /* the faintest wash of it                      */

  --display: Archivo, 'Helvetica Neue', Helvetica, sans-serif;
  --body: 'Source Serif 4', Georgia, 'Times New Roman', serif;

  --wrap: 1200px;
  --gap: clamp(1.25rem, 2.5vw, 1.75rem);
  --sect: clamp(4rem, 8vw, 7rem);
  --r: 2px;             /* editorial: things are cut, not rounded */
}

/* ── Reset ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1.05rem, .3vw + 1rem, 1.15rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
svg { display: block; width: 100%; height: 100%; }
button, input { font: inherit; color: inherit; }
a { color: inherit; }

:where(a, button, input, summary):focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 1rem; top: -5rem; z-index: 100;
  background: var(--blue); color: var(--paper);
  padding: .7rem 1.1rem;
  font-family: var(--display); font-weight: 700; font-size: .85rem;
  text-decoration: none; transition: top .15s;
}
.skip:focus { top: 1rem; }

/* The dark version's glow. On paper there is no light source to draw, so
   this is the faintest warm wash and nothing more — kept as an element so
   the markup did not have to change. */
.lamp {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  background: radial-gradient(52rem 30rem at 78% -8%, rgba(27, 58, 107, .045), transparent 66%);
}
/* Lifts content above the wash. `.callbar` is excluded because this sets
   `position: relative`, which out-specifies its own `position: fixed` — it
   stopped sticking to the viewport and sat at the end of the document. */
body > *:not(.lamp):not(.callbar) { position: relative; z-index: 1; }

/* ── Layout ──────────────────────────────────────────────────────────── */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.5rem, 780px); }
.section { padding-block: var(--sect); }
.head { max-width: 60ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.band { background: var(--paper-2); border-block: 1px solid var(--rule); }

/* ── Type ────────────────────────────────────────────────────────────── */
h1, h2, h3, .amount, .brand-word {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.0;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); }
h2 { font-size: clamp(2rem, 3.9vw, 3.1rem); }
h3 { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.022em; line-height: 1.25; }

/* The held-back half of a headline. Warm grey rather than a tint of the
   accent — a second blue would make the page look two-toned.

   Its own token, and not the pale #b6ad9e this started as: that measured
   2.08:1 on paper, under even the 3:1 large-text floor. This line is not
   decoration — it carries half of every sentence it appears in ("You're
   not.", "Nothing they don't."), and this whole direction is aimed at
   someone reading a phone in daylight, which is exactly the condition a
   2:1 grey disappears in. Held to 4.5:1 rather than 3:1 for that reason,
   and checked on --paper-2 as well, where the band section puts it. */
.dim { color: var(--ink-40); }

.eyebrow {
  font-family: var(--display);
  font-size: .73rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 1.1rem;
}

.lede {
  font-size: clamp(1.15rem, .5vw + 1.05rem, 1.35rem);
  color: var(--ink-70);
  max-width: 46ch;
  margin: 1.6rem 0 2.25rem;
}
.lede-sm { font-size: 1.1rem; color: var(--ink-70); max-width: 62ch; margin: 0 0 1rem; }
.lede-sm:last-child { margin-bottom: 0; }

/* ── Buttons ─────────────────────────────────────────────────────────── */
/* Square. A pill on paper reads as an app control; this should read as
   something printed. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  font-family: var(--display); font-weight: 700;
  font-size: .95rem; letter-spacing: -.005em;
  padding: .95rem 1.5rem;
  border: 1.5px solid transparent;
  border-radius: var(--r);
  text-decoration: none; cursor: pointer;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.btn-lg { font-size: 1rem; padding: 1.1rem 1.9rem; }
.btn-block { width: 100%; }

/* Named for the old palette; kept so the markup did not have to change. */
.btn-lamp { background: var(--blue); color: var(--paper); }
.btn-lamp:hover { background: var(--blue-2); }

.btn-glass { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-glass:hover { background: var(--ink); color: var(--paper); }

/* ── Top bar ─────────────────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.topbar.is-stuck { box-shadow: 0 6px 20px -14px rgba(22, 24, 28, .35); }
.topbar-inner { display: flex; align-items: center; gap: var(--gap); padding-block: .95rem; }
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; margin-right: auto; }
.brand-word { font-size: 1.15rem; letter-spacing: -.035em; text-transform: uppercase; }
/* An awning: a blue fascia with its shadow under it. */
.brand-mark {
  width: 24px; height: 19px; flex: none;
  background: var(--blue);
  border-bottom: 4px solid var(--ink);
}
.topnav { display: flex; gap: 1.6rem; }
.topnav a {
  text-decoration: none; font-size: .98rem; color: var(--ink-50);
  padding-block: .15rem; border-bottom: 2px solid transparent;
  transition: color .16s ease, border-color .16s ease;
}
.topnav a:hover { color: var(--ink); border-bottom-color: var(--blue); }

@media (max-width: 980px) { .topnav { display: none; } }

/* ── Entrance ────────────────────────────────────────────────────────── */
.rise { animation: rise .6s cubic-bezier(.22, 1, .36, 1) both; animation-delay: var(--d, 0ms); }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s cubic-bezier(.22, 1, .36, 1); }
.reveal.is-in { opacity: 1; transform: none; }

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

/* ── Hero ────────────────────────────────────────────────────────────── */
/* Left-aligned, not centred. A centred hero on paper reads as a poster;
   this should read as the top of a letter. */
.hero { padding-block: clamp(3rem, 6vw, 5rem) var(--sect); }
.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
.hero-copy { max-width: 34rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero-note {
  margin: 1.75rem 0 0;
  font-size: 1rem; font-style: italic; color: var(--ink-50);
  border-left: 3px solid var(--blue);
  padding-left: 1rem;
  max-width: 40ch;
}

/* The "open" pill is now a plain stated fact with a rule under it. */
.open-sign {
  display: inline-flex; align-items: center; gap: .6rem;
  margin: 0 0 1.4rem;
  font-family: var(--display);
  font-size: .78rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--blue);
}
.open-dot { width: 22px; height: 3px; flex: none; background: var(--blue); }

@media (max-width: 940px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero-copy { max-width: none; }
}

/* ── The signature: before/after frame ───────────────────────────────── */
.compare { margin: 0; position: relative; }
.frame-glow { display: none; }   /* nothing glows on paper */

.frame {
  position: relative;
  text-align: left;   /* the frame is a picture of a different page */
  border: 1px solid var(--rule-2);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--card);
  box-shadow: 0 24px 50px -34px rgba(22, 24, 28, .5);
}
.frame-bar {
  display: flex; align-items: center; gap: .4rem;
  padding: .7rem .95rem;
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
}
.frame-bar .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--rule-2); }
.frame-url { margin-left: .75rem; font-size: .8rem; color: var(--ink-50); }
.frame-drag {
  margin-left: auto;
  font-family: var(--display);
  font-size: .68rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--blue);
}
.frame-drag::after { content: ' \2192'; }

.frame-screen {
  position: relative;
  /* 3/2 rather than 16/9. Rescaling fixed the mobile overflow outright but
     left 70px on desktop, and the rest had to come from the frame: a full
     web page is a taller thing than a 16/9 letterbox, and shrinking the
     type far enough to fit one would have made the mock-ups unreadable. */
  aspect-ratio: 3 / 2;
  /* Both mock-ups inside are sized in cqw off this box.
     They used to size in vw, so their type scaled with the browser
     window while the frame scaled with its grid column: at 1440 the clamp
     pinned to 16px inside a 545px-wide frame and the contents overflowed by
     118px. What that cut was the ending — the new site's trust strip, and
     the old site's hit counter. */
  container-type: inline-size;
  overflow: hidden;
  cursor: ew-resize;
  user-select: none;
  touch-action: pan-y;
}
.shot { position: absolute; inset: 0; }

/* Before — clipped from the left by the handle. */
.shot-before { clip-path: inset(0 calc(100% - var(--split, 48%)) 0 0); background: #fff; }
.bf-inner {
  font-family: 'Times New Roman', Times, serif;
  color: #000; background: #fff;
  font-size: 2.35cqw;
  line-height: 1.4;
  height: 100%; display: flex; flex-direction: column;
}
.bf-banner {
  font-weight: bold; color: #000080; text-align: center;
  font-size: 1.3em; padding: .65em .5em;
  text-decoration: underline;
  background: #e8e8f0; border-bottom: 2px solid #000080;
  flex: none;
}
.bf-body { flex: 1; display: flex; min-height: 0; }
.bf-side {
  width: 30%; flex: none;
  background: #dcdce8; border-right: 2px solid #000080;
  padding: .8em .7em;
  display: flex; flex-direction: column; gap: .35em;
}
.bf-side-head { font-weight: bold; color: #000080; border-bottom: 1px solid #9a9ab0; padding-bottom: .3em; }
.bf-side a { color: #0000ee; }
.bf-counter {
  margin-top: auto; text-align: center;
  background: #000; color: #0f0;
  font-family: 'Courier New', monospace; letter-spacing: .12em;
  padding: .35em .4em;
}
.bf-main { padding: .9em 1em; display: flex; flex-direction: column; }
.bf-construction { color: #c00; margin-bottom: .8em; }
.bf-text { margin: 0 0 .7em; }
.bf-text a { color: #0000ee; }
.bf-services { margin: 0 0 .7em; padding-left: 1.4em; }
.bf-services li { margin-bottom: .15em; }
.bf-small { font-size: .9em; }
.bf-footer { color: #666; font-size: .85em; margin-top: auto; padding-top: 1em; }

/* After — the same direction as this site, which is the point. */
.shot-after {
  background: var(--paper);
  display: flex; flex-direction: column;
  font-size: 2.35cqw;
  color: var(--ink);
}
.af-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: .8em 1.1em; flex: none;
  background: var(--card);
  border-bottom: 1px solid var(--rule);
}
.af-logo { font-family: var(--display); font-weight: 800; font-size: 1.02em; letter-spacing: -.03em; }
.af-logo em { font-style: normal; color: var(--blue); }
.af-call {
  font-family: var(--display); font-weight: 700; font-size: .82em;
  background: var(--blue); color: var(--paper);
  padding: .5em .9em;
}
.af-hero {
  flex: 1;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1.4em; align-items: center;
  padding: 1.3em 1.2em;
}
.af-eyebrow {
  font-family: var(--display);
  font-size: .72em; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--blue);
  margin: 0 0 .55em;
}
.af-hero h3 { font-size: 2.15em; line-height: 1.02; margin: 0 0 .85em; font-weight: 800; }
.af-btns { display: flex; gap: .45em; }
.af-btn {
  font-family: var(--display); font-weight: 700; font-size: .82em;
  background: var(--blue); color: var(--paper); padding: .6em .95em;
}
.af-btn.ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.af-card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--blue);
  padding: .95em .9em;
  display: flex; flex-direction: column; gap: .32em;
}
.af-card-status { display: flex; align-items: center; gap: .4em; font-weight: 600; font-size: .82em; color: #1f6b40; }
.af-live { width: 6px; height: 6px; border-radius: 50%; background: #1f6b40; }
.af-card-num { font-family: var(--display); font-weight: 800; font-size: 1.2em; letter-spacing: -.03em; }
.af-card-sub { font-size: .87em; color: var(--ink-50); line-height: 1.45; }
.af-card-btn {
  margin-top: .35em; text-align: center;
  font-family: var(--display); font-weight: 700; font-size: .8em;
  border: 1.5px solid var(--ink);
  padding: .6em;
}
.af-strip {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--rule); flex: none;
  background: var(--card);
}
.af-strip > div {
  padding: .65em .8em; text-align: center;
  border-right: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: .12em;
}
.af-strip > div:last-child { border-right: 0; }
.af-strip strong { font-family: var(--display); font-weight: 700; font-size: .95em; }
.af-strip span { color: var(--ink-50); font-size: .85em; }

/* Handle */
.handle {
  position: absolute; top: 0; bottom: 0;
  left: var(--split, 48%);
  width: 2px; margin-left: -1px;
  background: var(--blue);
  pointer-events: none;
}
.handle-grip {
  position: absolute; top: 50%; left: 50%;
  translate: -50% -50%;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 4px 14px rgba(22, 24, 28, .35);
}
.handle-grip::before, .handle-grip::after {
  content: ''; position: absolute; top: 50%; translate: 0 -50%;
  width: 0; height: 0; border-block: 5px solid transparent;
}
.handle-grip::before { left: 10px; border-right: 7px solid var(--paper); }
.handle-grip::after  { right: 10px; border-left: 7px solid var(--paper); }

.compare-range { width: 100%; margin-top: 1rem; accent-color: var(--blue); }
.compare-hint {
  display: flex; justify-content: space-between; gap: 1rem;
  margin: .5rem 0 0; font-size: .88rem; color: var(--ink-50);
}
.compare-hint span:last-child { text-align: right; }

/* ── Quiet panel ─────────────────────────────────────────────────────── */
.quiet-panel {
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--blue);
  padding: clamp(1.75rem, 4vw, 3rem);
}
.quiet-panel h2 { margin-bottom: 1.25rem; }

/* ── Who it's for ────────────────────────────────────────────────────── */
.trades { padding-block: clamp(2rem, 4vw, 2.75rem); border-bottom: 1px solid var(--rule); }
.trades-label {
  margin: 0 0 1rem;
  font-family: var(--display);
  font-size: .73rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--blue);
}
.trade-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.trade-list li {
  font-size: .95rem; color: var(--ink-70);
  background: var(--card);
  border: 1px solid var(--rule);
  padding: .35rem .8rem;
}

/* ── What you get ────────────────────────────────────────────────────── */
/* Three columns, not auto-fit: there are six, and auto-fit settled on four
   at desktop width, leaving two empty cells. */
.gets {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 1px;
  grid-template-columns: repeat(3, 1fr);
  background: var(--rule);
  border: 1px solid var(--rule);
}
.get { background: var(--paper); padding: 1.7rem 1.6rem; }
.get-ico {
  display: block; width: 30px; height: 30px;
  margin-bottom: 1.1rem;
  color: var(--blue);
}
.get-ico svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.get h3 { margin-bottom: .5rem; }
.get p { margin: 0; color: var(--ink-70); font-size: 1rem; }

@media (max-width: 900px) { .gets { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .gets { grid-template-columns: 1fr; } }

/* ── Running it ──────────────────────────────────────────────────────── */
.runs { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--gap); grid-template-columns: repeat(3, 1fr); }
.run { border-top: 3px solid var(--blue); padding-top: 1.1rem; }
.run h3 { margin-bottom: .5rem; }
.run p { margin: 0; color: var(--ink-70); font-size: 1rem; }
.run em { font-style: normal; color: var(--blue); font-weight: 600; }

@media (max-width: 900px) { .runs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .runs { grid-template-columns: 1fr; } }

/* ── Add-ons ─────────────────────────────────────────────────────────── */
.extras { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--rule); }
.extra {
  display: grid;
  grid-template-columns: minmax(9rem, 14rem) 1fr auto;
  gap: .6rem 1.5rem;
  align-items: baseline;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--rule);
}
.extra-name { font-family: var(--display); font-weight: 700; font-size: 1.05rem; letter-spacing: -.025em; }
.extra-note { color: var(--ink-50); font-size: .98rem; }
.extra-price {
  font-family: var(--display); font-weight: 800;
  font-size: 1.2rem; color: var(--blue); white-space: nowrap;
}
.extra-price small { font-family: var(--body); font-weight: 400; font-size: .85rem; color: var(--ink-50); }

@media (max-width: 700px) {
  .extra { grid-template-columns: 1fr auto; gap: .25rem 1rem; }
  .extra-note { grid-column: 1 / -1; }
}

/* ── Reviews ─────────────────────────────────────────────────────────── */
.reviews { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--gap); }
.reviews:has(.review) { grid-template-columns: repeat(3, 1fr); margin-bottom: var(--gap); }
.review {
  background: var(--card);
  border: 1px solid var(--rule);
  padding: 1.6rem 1.5rem;
  display: flex; flex-direction: column; gap: .85rem;
}
.review-stars { margin: 0; color: var(--blue); letter-spacing: .12em; font-size: 1rem; }
.review-quote { margin: 0; font-size: 1.05rem; quotes: '\201C' '\201D'; }
.review-quote::before { content: open-quote; }
.review-quote::after { content: close-quote; }
.review-by { margin: 0; display: grid; gap: .1rem; margin-top: auto; }
.review-who { font-family: var(--display); font-weight: 700; }
.review-biz { font-size: .92rem; color: var(--ink-50); }
.review-src {
  align-self: flex-start;
  font-family: var(--display); font-size: .82rem; font-weight: 700;
  color: var(--blue); text-decoration: none;
  border: 1.5px solid var(--blue);
  padding: .35rem .7rem;
}
.review-src:hover { background: var(--blue); color: var(--paper); }

@media (max-width: 900px) { .reviews:has(.review) { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .reviews:has(.review) { grid-template-columns: 1fr; } }

.reviews-empty {
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--blue);
  padding: clamp(1.6rem, 3.5vw, 2.5rem);
  max-width: 68ch;
}
.reviews-empty h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); margin-bottom: .9rem; }
.reviews-empty > p { margin: 0 0 1.3rem; color: var(--ink-70); }
.guarantees { list-style: none; padding: 0; margin: 0 0 1.4rem; display: grid; gap: .9rem; }
.guarantees li { position: relative; padding-left: 1.9rem; color: var(--ink-70); font-size: 1rem; }
.guarantees li strong { color: var(--ink); display: block; font-family: var(--display); font-weight: 700; }
.guarantees li::before {
  content: ''; position: absolute; left: 0; top: .4em;
  width: 12px; height: 7px;
  border-left: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  rotate: -45deg;
}
.reviews-empty-note {
  margin: 0; padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
  font-size: .98rem; color: var(--ink-50);
}

/* ── Pricing ─────────────────────────────────────────────────────────── */
.paths { display: grid; gap: var(--gap); grid-template-columns: repeat(2, 1fr); align-items: start; }
.path {
  position: relative;
  background: var(--card);
  border: 1px solid var(--rule);
  padding: 2rem 1.9rem;
  display: flex; flex-direction: column;
}
.path.is-picked {
  background: var(--blue); color: var(--paper);
  border-color: var(--blue);
}
.path-flag {
  display: inline-block; align-self: flex-start;
  margin: 0 0 .9rem;
  font-family: var(--display);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  background: var(--paper); color: var(--blue);
  padding: .35rem .7rem;
}
.path-name { font-size: 1.35rem; margin-bottom: .8rem; }
.path-price { margin: 0 0 .35rem; display: flex; align-items: baseline; gap: .45rem; }
.amount { font-size: clamp(2.5rem, 4vw, 3.1rem); }
.per { font-size: 1rem; color: var(--ink-50); }
.path.is-picked .per { color: #b8c6dc; }
.path-for { margin: 0 0 1.5rem; font-size: 1rem; color: var(--ink-50); }
.path.is-picked .path-for { color: #c3d0e4; }
.path-list { list-style: none; padding: 0; margin: 0 0 1.75rem; display: grid; gap: .65rem; font-size: 1rem; }
.path-list li { position: relative; padding-left: 1.6rem; }
.path-list li::before {
  content: ''; position: absolute; left: 0; top: .45em;
  width: 11px; height: 6px;
  border-left: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  rotate: -45deg;
}
.path.is-picked .path-list li::before { border-color: var(--paper); }
.path-list em { font-style: normal; font-weight: 600; }
.path.is-picked a { color: var(--paper); }
.path .btn { margin-top: auto; }
.path.is-picked .btn-lamp { background: var(--paper); color: var(--blue); }
.path.is-picked .btn-lamp:hover { background: #fff; }

.pricing-note {
  margin: 2rem 0 0; max-width: 70ch;
  font-size: 1rem; color: var(--ink-70);
  border-left: 3px solid var(--blue);
  padding-left: 1.1rem;
}
.pricing-note strong { font-family: var(--display); font-weight: 700; color: var(--ink); }

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

/* ── Steps ───────────────────────────────────────────────────────────── */
.steps { list-style: none; counter-reset: s; padding: 0; margin: 0; display: grid; }
.step {
  counter-increment: s;
  display: grid; grid-template-columns: 3rem 1fr; gap: 1.25rem;
  padding: 1.6rem 0;
  border-top: 1px solid var(--rule);
}
.step:last-child { border-bottom: 1px solid var(--rule); }
.step::before {
  content: counter(s, decimal-leading-zero);
  font-family: var(--display); font-weight: 800; font-size: 1.05rem;
  color: var(--blue); line-height: 1.6;
}
.step h3 { margin-bottom: .4rem; }
.step p { margin: 0; color: var(--ink-70); font-size: 1rem; }

/* ── FAQ ─────────────────────────────────────────────────────────────── */
.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  list-style: none; cursor: pointer;
  padding: 1.2rem 2.5rem 1.2rem 0;
  position: relative;
  font-family: var(--display); font-weight: 700;
  font-size: 1.1rem; letter-spacing: -.025em;
  transition: color .16s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--blue); }
.faq summary::after {
  content: ''; position: absolute; right: .4rem; top: 50%;
  width: 10px; height: 10px;
  border-right: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  translate: 0 -65%; rotate: 45deg;
  transition: rotate .2s ease, translate .2s ease;
}
.faq details[open] summary::after { rotate: -135deg; translate: 0 -25%; }
.faq p { margin: 0; padding: 0 2.5rem 1.5rem 0; color: var(--ink-70); max-width: 68ch; }

/* ── CTA ─────────────────────────────────────────────────────────────── */
.cta { padding-block: var(--sect); }
.cta-inner {
  background: var(--blue); color: var(--paper);
  padding: clamp(2rem, 5vw, 3.5rem);
}
.cta h2 { margin-bottom: 1.1rem; color: var(--paper); }
/* The same role on blue, so it moves the other way — a value that clears
   on paper would be near-invisible here. 4.8:1; the old #7f9ac4 was 3.93,
   which passes for large text but not for the line that states the offer. */
.cta .dim { color: #93abd0; }
.cta .eyebrow { color: #b8c6dc; }
.cta .lede-sm { color: #c3d0e4; margin-bottom: 2.25rem; }
.cta-form { display: grid; gap: .9rem; max-width: 26rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field { display: grid; gap: .4rem; }
.field label {
  font-family: var(--display);
  font-size: .76rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: #b8c6dc;
}
.field input {
  width: 100%;
  padding: .85rem .95rem;
  background: var(--paper);
  border: 1.5px solid var(--paper);
  border-radius: var(--r);
  color: var(--ink);
}
.field input::placeholder { color: #8b8377; }
.field input:focus { border-color: var(--ink); }
.field.is-bad input { border-color: #c4402f; }
.field-error { margin: 0; font-size: .88rem; color: #ffc9c0; }
.cta-note { margin: .5rem 0 0; font-size: .92rem; color: #b8c6dc; }
.cta-note.is-good { color: #a8e0b8; }
.cta-alt { margin: 2rem 0 0; font-size: 1.05rem; color: #c3d0e4; }
.cta-alt a { color: var(--paper); font-family: var(--display); font-weight: 700; text-decoration: none; border-bottom: 2px solid rgba(250, 247, 242, .5); }
.cta-alt a:hover { border-bottom-color: var(--paper); }

/* ── Footer ──────────────────────────────────────────────────────────── */
.foot { border-top: 1px solid var(--rule); padding-block: 2.5rem; }
.foot-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem var(--gap); }
.foot-brand { display: inline-flex; align-items: center; gap: .6rem; margin-right: auto; }
.foot-links { display: flex; flex-wrap: wrap; gap: 1.3rem; }
.foot-links a { text-decoration: none; font-size: .96rem; color: var(--ink-50); }
.foot-links a:hover { color: var(--ink); }
.foot-legal { width: 100%; margin: 0; font-size: .88rem; color: var(--ink-50); }

/* ── The options table on a phone ────────────────────────────────────── */
.table-scroll { overflow-x: auto; border: 1px solid var(--rule); -webkit-overflow-scrolling: touch; }
.opts { border-collapse: collapse; width: 100%; min-width: 720px; font-size: .98rem; background: var(--card); }
.opts th, .opts td {
  text-align: left; padding: .95rem 1.1rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.opts thead th {
  font-family: var(--display); font-weight: 700;
  font-size: 1rem; letter-spacing: -.025em;
  background: var(--paper-2);
  border-bottom-color: var(--rule-2);
}
.opts thead th span {
  display: block;
  font-family: var(--body); font-weight: 400;
  font-size: .85rem; color: var(--ink-50);
  letter-spacing: 0; margin-top: .2rem;
}
.opts tbody th { font-family: var(--display); font-weight: 700; color: var(--ink-50); font-size: .95rem; width: 12rem; }
.opts td { color: var(--ink-70); }
.opts tbody tr:last-child th, .opts tbody tr:last-child td { border-bottom: 0; }
.opts .is-mine { color: var(--ink); background: var(--blue-05); font-weight: 600; }
.opts thead .is-mine { color: var(--blue); background: #e2e7f0; }

/* Four columns cannot fit 348px. Scrolling it sideways hid 372px — and what
   was hidden was the webpage.contact column, so a phone visitor saw "Do it
   yourself" and never the answer the section exists to give. */
@media (max-width: 760px) {
  .table-scroll { overflow-x: visible; border: 0; }
  .opts { min-width: 0; display: block; background: transparent; }
  .opts thead { display: none; }
  .opts tbody { display: grid; gap: .8rem; }

  .opts tbody tr {
    display: flex; flex-direction: column; gap: .1rem;
    background: var(--card);
    border: 1px solid var(--rule);
    padding: 1.1rem 1.2rem;
  }
  .opts tbody th {
    /* Ahead of the highlighted cell, which is order:-1. Without this the
       card read "webpage.contact — $650" and only then "What it costs", i.e. an
       answer before its question. */
    order: -2;
    width: auto; padding: 0 0 .7rem;
    border-bottom: 1px solid var(--rule);
    margin-bottom: .55rem;
    font-size: 1.1rem; color: var(--ink);
  }
  .opts tbody td {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 1rem; padding: .42rem 0; border: 0;
    text-align: right; background: transparent;
  }
  .opts tbody td::before {
    content: attr(data-opt);
    color: var(--ink-50); font-size: .9rem;
    text-align: left; flex: none;
  }
  /* Yours first under every criterion. Source order puts it last, which on a
     phone means four scrolls of other people's answers first. */
  .opts tbody td.is-mine {
    order: -1;
    color: var(--blue); font-weight: 700;
    margin-bottom: .3rem; padding-bottom: .55rem;
    border-bottom: 1px dashed var(--rule-2);
  }
  .opts tbody td.is-mine::before { color: var(--blue); font-weight: 700; }
}

/* ── Mobile call bar ─────────────────────────────────────────────────── */
.callbar { display: none; }

@media (max-width: 760px) {
  .callbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: flex; gap: .55rem;
    padding: .6rem .8rem calc(.6rem + env(safe-area-inset-bottom));
    background: var(--paper);
    border-top: 1px solid var(--rule-2);
    box-shadow: 0 -6px 20px -14px rgba(22, 24, 28, .4);
  }
  .callbar-btn {
    flex: 1;
    display: inline-flex; align-items: center; justify-content: center;
    padding: .85rem .6rem;
    font-family: var(--display); font-weight: 700; font-size: .95rem;
    text-decoration: none;
    background: var(--blue); color: var(--paper);
  }
  .callbar-btn.ghost { background: transparent; border: 1.5px solid var(--ink); color: var(--ink); }
  .foot { padding-bottom: 6rem; }
}

/* ── Small screens ───────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .topbar .btn { font-size: .82rem; padding: .65rem .95rem; white-space: nowrap; }
  .brand-word { font-size: 1rem; }
  .topbar-inner { gap: .75rem; }

  .frame-screen { aspect-ratio: 4 / 3; }
  /* The handle sits at 32% here, and the new site's headline started at the
     far left — the clip ate the front of the sentence. Indent past it. */
  .af-hero { grid-template-columns: 1fr; gap: .6em; padding: 1em 1em 1em 36%; }
  .af-card { display: none; }
  .af-hero h3 { font-size: 1.28em; }
  .af-eyebrow { font-size: .7em; }
  /* The URL is decoration; the drag hint is the affordance. */
  .frame-url { display: none; }
  .frame-drag { margin-left: auto; white-space: nowrap; font-size: .66rem; }

  .compare-hint { font-size: .8rem; }
  .step { grid-template-columns: 2.2rem 1fr; gap: .9rem; }
}