/* ============================================================
   Celerius landing page — light, minimalist.

   Rules of the system:
     - one background (white), one subtle band (--surface) for rhythm
     - hairline borders instead of cards-with-shadows
     - near-black type, a single blue accent used sparingly
     - no gradients, no glows, no drop shadows
   Mobile-first; no external assets.
   ============================================================ */

:root {
  --bg:        #ffffff;
  --surface:   #fafafa;
  --surface-2: #f4f4f5;
  --line:      #e4e4e7;
  --line-strong: #d4d4d8;

  --text:  #18181b;
  --muted: #52525b;
  /* Darkened from #71717a: the hero's tinted wash ate the old value's margin
     and pushed it to 4.27:1. This holds ≥4.5 on white AND over the tint. */
  --dim:   #6b6b73;

  --accent:       #2563eb;   /* fills + large text on white */
  --accent-hover: #1d4ed8;   /* button hover */
  --accent-ink:   #1d4ed8;   /* small text on white — guarantees AA */
  --accent-wash:  #eff4ff;   /* pale blue surface tint */
  --ok:     #16a34a;
  --danger: #dc2626;

  /* Filled controls are near-black: maximum contrast, no colour needed. */
  --fill:    #18181b;
  --on-fill: #ffffff;

  --r-sm: 6px;
  --r:    8px;
  --r-lg: 12px;

  --pad: 20px;

  color-scheme: light;
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { line-height: 1.2; margin: 0; letter-spacing: -.02em; font-weight: 650; }
h1 { font-size: clamp(2rem, 6.4vw, 3.4rem); letter-spacing: -.035em; }
h2 { font-size: clamp(1.5rem, 4vw, 2.15rem); letter-spacing: -.028em; }
h3 { font-size: 1.02rem; font-weight: 600; }
p  { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { max-width: 100%; }
a { color: var(--accent); }

.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 var(--pad); }
.wrap-narrow { max-width: 720px; }

.skip-link {
  position: absolute; left: -9999px; top: 8px; z-index: 100;
  background: var(--fill); color: var(--on-fill); padding: 10px 16px; border-radius: var(--r-sm);
}
.skip-link:focus { left: 16px; }

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

/* Second headline line — a smaller, lighter blue subhead under the main line. */
.grad {
  display: block;
  margin-top: 4px;
  color: var(--accent);
  font-size: clamp(1.2rem, 3.2vw, 1.85rem);
  font-weight: 400;
  letter-spacing: -.01em;
}

.kicker {
  text-transform: uppercase; letter-spacing: .13em; font-size: .7rem;
  font-weight: 600; color: var(--accent-ink); margin-bottom: 12px;
}

/* ── buttons ───────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 11px 20px; border-radius: var(--r-sm);
  border: 1px solid transparent;
  font-size: .94rem; font-weight: 550; text-decoration: none; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  white-space: nowrap;
}
.btn-primary { background: var(--accent); color: var(--on-fill); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--text); }
.btn-sm  { padding: 8px 15px; font-size: .87rem; }
.btn-lg  { padding: 13px 26px; font-size: .98rem; }
.btn-block { display: flex; width: 100%; }

/* ── header ────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; gap: 16px; height: 62px; }

/* ── header signal line ────────────────────────────────────
   A dot runs the length of the header's bottom hairline with a short trail
   behind it, both cycling sky → blue → indigo. All three already appear on the
   page (the brand mark, --accent, and the hero's second wash blob), so it adds
   motion without adding colour.

   It sweeps, then waits off-screen: the travel is done by 55% of the loop and
   the last 45% is an empty pause, which is what keeps it from reading as a
   busy progress bar. Solid fills only — a comet trail would want a
   linear-gradient, and the stylesheet stays free of those.

   The scan box is 7px tall and offset to centre the 1px trail exactly on the
   1px border. `bottom` resolves against the header's PADDING box, which sits
   1px above its border box — hence -4px rather than the -3px the geometry
   alone suggests. */
.hdr-scan {
  position: absolute; left: 0; right: 0; bottom: -4px; height: 7px;
  overflow: hidden; pointer-events: none;
}
.hdr-run {
  position: absolute; left: 0; top: 50%; margin-top: -2.5px;
  width: 88px; height: 5px;
  animation: hdr-travel 13s linear infinite;
}
.hdr-trail {
  position: absolute; left: 0; top: 50%; margin-top: -.5px;
  width: 83px; height: 1px;
  background: var(--accent);
  animation: hdr-hue 13s linear infinite;
}
.hdr-dot {
  position: absolute; right: 0; top: 0;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent);
  animation: hdr-hue 13s linear infinite;
}

@keyframes hdr-travel {
  0%        { transform: translateX(-88px); }
  55%, 100% { transform: translateX(100vw); }
}
@keyframes hdr-hue {
  0%        { background-color: #38bdf8; }
  20%       { background-color: #2563eb; }
  40%       { background-color: #6366f1; }
  55%, 100% { background-color: #38bdf8; }
}

/* The global reduced-motion rule stops the animation, which would strand the
   dot at the left edge. Take the whole thing out instead. */
@media (prefers-reduced-motion: reduce) { .hdr-scan { display: none; } }

.brand {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 650; font-size: 1.35rem; color: var(--text);
  text-decoration: none; letter-spacing: -.02em;
}
.brand-mark { width: 19px; height: 19px; flex: none; }
/* Override the inline gradient fill baked into the SVG markup. */
.brand-mark path { fill: var(--text); }
/* The brand mark is now the real logo (c_logo.png, 101x95), not the inline SVG:
   keep its aspect ratio instead of forcing a square, and render its own colours
   (it is not theme-recoloured the way the old SVG path was). */
img.brand-mark { width: auto; height: 23px; }

/* The auto margin lives on .lang-switch, not here — the switch precedes the
   toggle in the bar, so pushing the switch right carries the toggle with it. */
.nav-toggle {
  width: 38px; height: 38px; display: grid; place-content: center; gap: 5px;
  background: transparent; border: 1px solid var(--line-strong); border-radius: var(--r-sm); cursor: pointer;
}
.nav-toggle span { display: block; width: 17px; height: 1.5px; background: var(--text); transition: .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav-menu {
  display: none; position: absolute; top: 62px; left: 0; right: 0;
  flex-direction: column; gap: 2px; padding: 10px var(--pad) 16px;
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.nav-menu.open { display: flex; }
.nav-menu a {
  color: var(--muted); text-decoration: none; font-weight: 500; font-size: .96rem;
  padding: 10px 2px;
}
.nav-menu a:hover { color: var(--text); }
.nav-menu .btn { margin-top: 10px; color: var(--on-fill); }

/* Language switch — a two-position switch showing both languages, with a thumb
   that slides between them.

   Both halves are fixed-width codes on purpose. With unequal labels ("EN" vs
   "Filipino") the thumb would have to resize as well as move, and a thing that
   changes shape while it travels stops reading as a switch. Equal halves let it
   be one fixed rectangle that simply slides.

   The whole pill is the link, so tapping anywhere flips it — you don't have to
   hit the inactive half. Hover and keyboard focus slide the thumb across as a
   preview of where you'd land; the click itself is a page navigation, so the
   new page just renders it already on that side.

   Option order is EN-then-FIL on BOTH pages. That's what makes it a switch:
   the positions are fixed and the thumb moves. Swapping the labels per page
   would leave the thumb standing still. */
.lang-switch {
  position: relative;
  display: inline-flex; align-items: center; align-self: center;
  margin-left: auto;          /* pushes itself and the toggle to the right */
  padding: 3px;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.lang-thumb {
  position: absolute; left: 3px; top: 3px; bottom: 3px;
  width: 44px;
  background: var(--accent);
  border-radius: 999px;
  transition: transform .22s cubic-bezier(.4, 0, .2, 1);
}
/* position:relative alone paints these over the thumb — both are positioned and
   these come later in the DOM, so no z-index is needed. */
.lang-opt {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 26px;
  font-size: .78rem; font-weight: 600; line-height: 1; white-space: nowrap;
  transition: color .22s ease;
}

/* Resting state. White on --accent measures 5.17:1, the muted half 7.73:1. */
.lang-en  { color: var(--on-fill); }
.lang-fil { color: var(--muted); }
.lang-switch--fil .lang-thumb { transform: translateX(100%); }
.lang-switch--fil .lang-en    { color: var(--muted); }
.lang-switch--fil .lang-fil   { color: var(--on-fill); }

/* The flip happens on the click, not on the pointer passing over. Hover used to
   slide the thumb as a preview and it read as twitchy — the switch moved at
   anyone brushing past it, without a decision having been made.

   `:active` covers both input paths: pressing the mouse, and activating the
   focused link with Enter. Keyboard focus is signalled by the global focus ring
   on its own; it no longer moves the thumb.

   These are 0,0,3,0 against the resting rules' 0,0,2,0, so they win — and the
   --fil pair must come last, since it ties with the generic pair on the
   Filipino page and only source order breaks it. */
.lang-switch:active .lang-thumb { transform: translateX(100%); }
.lang-switch:active .lang-en    { color: var(--muted); }
.lang-switch:active .lang-fil   { color: var(--on-fill); }

.lang-switch--fil:active .lang-thumb { transform: translateX(0); }
.lang-switch--fil:active .lang-en    { color: var(--on-fill); }
.lang-switch--fil:active .lang-fil   { color: var(--muted); }

/* `:active` ends at mouseup, but the click that follows is a page navigation
   that has not painted yet — assets are served `no-store`, so every load is a
   fresh fetch. Left alone the thumb spends those milliseconds transitioning
   back to where it started, and you watch it travel out and return before the
   new page replaces it. script.js pins this class on click so the committed
   position holds until the next page paints.

   Same specificity as the :active pair (0,0,3,0), so these must follow them,
   and --fil must follow the generic pair for the same reason. */
.lang-switch.is-flipping .lang-thumb { transform: translateX(100%); }
.lang-switch.is-flipping .lang-en    { color: var(--muted); }
.lang-switch.is-flipping .lang-fil   { color: var(--on-fill); }

.lang-switch--fil.is-flipping .lang-thumb { transform: translateX(0); }
.lang-switch--fil.is-flipping .lang-en    { color: var(--on-fill); }
.lang-switch--fil.is-flipping .lang-fil   { color: var(--muted); }

@media (min-width: 860px) {
  .nav-toggle { display: none; }
  .nav-menu {
    display: flex; position: static; flex-direction: row; align-items: center;
    gap: 28px; margin-left: auto; padding: 0; background: none; border: 0;
  }
  .nav-menu .btn { margin-top: 0; }
  /* order:1 moves the switch past .nav-menu to the end of the bar; the menu's
     own auto margin already pushes the pair right, so the switch drops its.
     The 12px tops the bar's 16px gap up to 28px — the same rhythm .nav-menu
     uses internally, and enough that the blue pill doesn't collide with the
     blue CTA it now follows. */
  .lang-switch { order: 1; margin-left: 12px; }
}

/* ── hero ──────────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; padding: 60px 0 52px; }
.hero-inner { position: relative; z-index: 1; }

/* Background wash: two very pale tints drifting slowly behind the headline.
   Built from radial-gradients with a transparent falloff rather than a blurred
   shape — no `filter`, so the browser only composites a transform.
   Peak alpha is .08. Raising it further starts pushing `--dim` text under the
   4.5:1 line — it was already the tightest colour in the palette. */
.hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hb { position: absolute; display: block; border-radius: 50%; will-change: transform; }
.hb-1 {
  width: 620px; height: 620px; top: -240px; left: -140px;
  background: radial-gradient(circle at 50% 50%, rgba(37, 99, 235, .08), rgba(37, 99, 235, 0) 70%);
  animation: drift-a 26s ease-in-out infinite alternate;
}
.hb-2 {
  width: 540px; height: 540px; top: -120px; right: -120px;
  background: radial-gradient(circle at 50% 50%, rgba(99, 102, 241, .07), rgba(99, 102, 241, 0) 70%);
  animation: drift-b 34s ease-in-out infinite alternate;
}

/* The peaks above are budgeted for ONE blob under the text. That holds on wide
   screens, where the two sit ~960px apart — but .hb-1 is anchored left and
   .hb-2 right while both are wider than a phone, so as the viewport narrows
   they slide together. At 375px their centres are ~45px apart and the two
   tints STACK, which took the eyebrow's --dim to 4.47:1 — under AA. Below 620px
   the peaks come down so the *composited* wash stays inside the same budget.
   If you retune any of this, measure the composite, not one layer. */
@media (max-width: 620px) {
  .hb-1 { background: radial-gradient(circle at 50% 50%, rgba(37, 99, 235, .05), rgba(37, 99, 235, 0) 70%); }
  .hb-2 { background: radial-gradient(circle at 50% 50%, rgba(99, 102, 241, .04), rgba(99, 102, 241, 0) 70%); }
}

@keyframes drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(70px, 46px, 0) scale(1.14); }
}
@keyframes drift-b {
  from { transform: translate3d(0, 0, 0) scale(1.06); }
  to   { transform: translate3d(-56px, 34px, 0) scale(.94); }
}

/* The dot is an inline marker, not a flex item. As a flex item it sat in its
   own column, so as soon as the text wrapped — which the Filipino eyebrow does
   at phone width, and any long municipality name will — the dot was stranded
   on the left with the text block beside it. Inline, it just leads the first
   line and the rest wraps under it. */
.eyebrow {
  color: var(--dim); font-size: .82rem; font-weight: 500;
  margin-bottom: 20px;
}
.pulse {
  display: inline-block; vertical-align: middle;
  width: 6px; height: 6px; border-radius: 50%; background: var(--ok);
  margin-right: 8px;
}

.lede {
  color: var(--muted); font-size: clamp(1rem, 2.2vw, 1.1rem);
  max-width: 50ch; margin-top: 22px;
}
.lede strong { color: var(--text); font-weight: 600; }

.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }

.hero-stats {
  display: grid; grid-template-columns: repeat(2, 1fr);
  margin: 52px 0 0; border-top: 1px solid var(--line);
}
.hero-stats > div {
  padding: 18px 18px 18px 0;
  border-bottom: 1px solid var(--line);
}
.hero-stats dt { color: var(--dim); font-size: .74rem; text-transform: uppercase; letter-spacing: .09em; }
.hero-stats dd {
  margin: 6px 0 0; font-size: 1.55rem; font-weight: 650; letter-spacing: -.035em; color: var(--text);
}
.hero-stats dd span { font-size: .95rem; color: var(--dim); font-weight: 500; }

@media (min-width: 720px) {
  .hero { padding: 88px 0 76px; }
  .hero-stats { grid-template-columns: repeat(4, 1fr); max-width: 760px; border-bottom: 1px solid var(--line); }
  .hero-stats > div { border-bottom: 0; }
}

/* ── trust strip ───────────────────────────────────────── */
.strip { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.strip-grid { display: grid; gap: 30px; padding-top: 48px; padding-bottom: 48px; }
.strip-item svg {
  width: 22px; height: 22px; fill: none; stroke: var(--accent);
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 14px;
}
.strip-item svg .tick { stroke: var(--accent); }
.strip-item h3 { margin-bottom: 6px; }
.strip-item p { color: var(--muted); font-size: .92rem; }

@media (min-width: 640px) { .strip-grid { grid-template-columns: repeat(2, 1fr); gap: 36px 44px; } }
@media (min-width: 1000px) { .strip-grid { grid-template-columns: repeat(4, 1fr); } }

/* ── sections ──────────────────────────────────────────── */
.section { padding: 68px 0; }
.section-alt { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-head { max-width: 600px; margin-bottom: 44px; }
.section-sub { color: var(--muted); margin-top: 14px; }
@media (min-width: 720px) { .section { padding: 96px 0; } }

/* ── plans ─────────────────────────────────────────────── */
.plans { display: grid; gap: 16px; }
@media (min-width: 620px)  { .plans { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .plans { grid-template-columns: repeat(4, 1fr); gap: 0; } }

.plan {
  position: relative; display: flex; flex-direction: column;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r); padding: 26px 22px;
}
/* On wide screens the cards butt together into one ruled row. */
@media (min-width: 1000px) {
  .plan { border-radius: 0; border-left-width: 0; }
  .plan:first-child { border-left-width: 1px; border-radius: var(--r) 0 0 var(--r); }
  .plan:last-child  { border-radius: 0 var(--r) var(--r) 0; }
}
.plan.featured { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-wash); z-index: 1; border-left-width: 1px; }

.badge {
  position: absolute; top: -10px; left: 22px;
  background: var(--accent); color: var(--on-fill);
  font-size: .66rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px;
}
.plan-for { color: var(--dim); font-size: .83rem; margin-top: 6px; }

.price { margin: 20px 0 2px; font-size: 2.2rem; font-weight: 650; letter-spacing: -.045em; }
.price .cur { font-size: 1.05rem; font-weight: 500; vertical-align: super; margin-right: 1px; color: var(--dim); }
.price .per { font-size: .86rem; font-weight: 500; color: var(--dim); letter-spacing: 0; }

.speeds { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sp-num  { font-size: 1.15rem; font-weight: 650; letter-spacing: -.03em; }
.sp-unit { font-size: .74rem; color: var(--muted); margin-left: 2px; }
.sp-lbl  { display: block; font-size: .66rem; color: var(--dim); text-transform: uppercase; letter-spacing: .08em; margin-top: 2px; }

.plan-feats { margin-bottom: 24px; display: grid; gap: 8px; }
.plan-feats li { position: relative; padding-left: 20px; color: var(--muted); font-size: .89rem; }
.plan-feats li::before {
  content: ""; position: absolute; left: 2px; top: .5em;
  width: 8px; height: 4px; border-left: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent);
  transform: rotate(-45deg);
}
.plan .btn { margin-top: auto; }

/* recommender */
.recommender { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line); }
.recommender h3 { margin-bottom: 18px; }
.rec-controls { display: grid; gap: 16px; }
@media (min-width: 640px) { .rec-controls { grid-template-columns: 1fr 1fr; gap: 20px; max-width: 720px; } }
.rec-controls label { display: block; }
.rec-controls span { display: block; color: var(--dim); font-size: .78rem; margin-bottom: 7px; }
select, input {
  width: 100%; background: var(--bg); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  padding: 11px 12px; font: inherit; font-size: .94rem;
}
select:hover, input:hover { border-color: var(--text); }
.rec-out { margin-top: 20px; color: var(--muted); font-size: .94rem; min-height: 1.6em; max-width: 68ch; }
.rec-out em { color: var(--text); font-style: normal; font-weight: 650; }

/* ── guarantee band ────────────────────────────────────── */
.guarantee {
  padding: 62px 0 88px;
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 720px) { .guarantee { padding: 84px 0 116px; } }

.guarantee-inner { display: grid; gap: 40px; }
@media (min-width: 900px) {
  .guarantee-inner { grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: start; }
}
.guarantee-lead h2 { margin-bottom: 16px; }
.guarantee-lead p { color: var(--muted); max-width: 42ch; }

.guarantee-points { display: grid; gap: 24px; }
.guarantee-points li { position: relative; padding-left: 28px; }
.guarantee-points li::before {
  content: ""; position: absolute; left: 0; top: 6px;
  width: 10px; height: 5px;
  border-left: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent);
  transform: rotate(-45deg);
}
.guarantee-points h3 { margin-bottom: 5px; }
.guarantee-points p { color: var(--muted); font-size: .92rem; max-width: 52ch; }

/* ── why ───────────────────────────────────────────────── */
.why-copy { max-width: 62ch; }
.why-copy h2 { margin-bottom: 18px; }
.why-copy p { color: var(--muted); margin-bottom: 14px; }
.why-copy strong { color: var(--text); }
.why-list { display: grid; gap: 14px; margin-top: 26px; }
.why-list li { position: relative; padding-left: 18px; color: var(--muted); font-size: .94rem; }
.why-list li::before {
  content: ""; position: absolute; left: 0; top: .68em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}
.why-list strong { color: var(--text); }

/* ── steps + coverage ──────────────────────────────────── */
.steps { display: grid; gap: 28px; }
@media (min-width: 820px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 40px; } }
.steps li { padding-top: 20px; border-top: 2px solid var(--accent); }
.step-n {
  display: block; margin-bottom: 12px;
  font-size: .78rem; font-weight: 600; color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
}
.step-n::after { content: " / 3"; color: var(--line-strong); }
.steps h3 { margin-bottom: 7px; }
.steps p { color: var(--muted); font-size: .92rem; }

.coverage-box { margin-top: 44px; padding-top: 32px; border-top: 1px solid var(--line); }
.coverage-box h3 { margin-bottom: 16px; }
.areas { display: flex; flex-wrap: wrap; gap: 8px; }
.areas li {
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  padding: 6px 13px; font-size: .87rem; color: var(--muted);
}
.areas li.soon { border-style: dashed; }
.areas li.soon span { color: var(--dim); font-size: .74rem; margin-left: 4px; }
.areas-note { color: var(--dim); font-size: .87rem; margin-top: 18px; max-width: 60ch; }

/* ── signup ────────────────────────────────────────────── */
.signup-grid { display: grid; gap: 44px; align-items: start; }
@media (min-width: 900px) { .signup-grid { grid-template-columns: 1fr .85fr; gap: 64px; } }

.contact-list { display: grid; gap: 14px; margin: 28px 0 24px; }
.contact-list li { display: flex; align-items: center; gap: 12px; }
.contact-list svg {
  width: 17px; height: 17px; flex: none; fill: none; stroke: var(--text);
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.contact-list svg .solid { fill: var(--text); stroke: none; }
.contact-list a { color: var(--text); text-decoration: none; font-weight: 500; }
.contact-list a:hover { text-decoration: underline; }
.hours { color: var(--dim); font-size: .87rem; }

.signup-form { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px 22px; }
.signup-form h3 { margin-bottom: 20px; }
.signup-form label { display: block; color: var(--dim); font-size: .78rem; margin: 16px 0 6px; }
.signup-form label:first-of-type { margin-top: 0; }
.signup-form .btn { margin-top: 24px; }
.form-note { color: var(--dim); font-size: .78rem; margin-top: 12px; text-align: center; }

/* ── faq ───────────────────────────────────────────────── */
.faq { display: grid; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 20px 32px 20px 0;
  font-weight: 600; font-size: .98rem; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%;
  width: 7px; height: 7px; margin-top: -5px;
  border-right: 1.5px solid var(--dim); border-bottom: 1.5px solid var(--dim);
  transform: rotate(45deg); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -1px; }
.faq details p { color: var(--muted); font-size: .93rem; padding-bottom: 22px; max-width: 68ch; }

/* ── final cta ─────────────────────────────────────────── */
.final-cta { text-align: center; padding: 80px 0; border-top: 1px solid var(--line); }
.final-cta h2 { margin-bottom: 12px; }
.final-cta p { color: var(--muted); margin-bottom: 28px; }

/* ── footer ────────────────────────────────────────────── */
.site-footer { background: var(--surface); border-top: 1px solid var(--line); padding: 48px 0 30px; }
.footer-grid { display: grid; gap: 28px; }
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1fr auto; align-items: start; } }
.footer-tag { color: var(--dim); font-size: .87rem; margin-top: 12px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.footer-links a { color: var(--muted); text-decoration: none; font-size: .9rem; }
.footer-links a:hover { color: var(--text); }
.footer-legal {
  display: grid; gap: 6px; margin-top: 36px; padding-top: 22px;
  border-top: 1px solid var(--line); color: var(--dim); font-size: .79rem;
}
@media (min-width: 720px) {
  .footer-legal { grid-template-columns: 1fr auto; }
  .footer-legal p:last-child { text-align: right; }
}

/* ============================================================
   Mobile: centred layout

   Below 640px every section centres — headings, body copy, icons, chips,
   list markers and buttons. 640px is where the multi-column grids start
   (.strip-grid, .rec-controls), so this covers exactly the single-column
   range.

   Two kinds of thing need more than an inherited `text-align`:

   1. Blocks with a `max-width` (.lede, .section-head, the various `p`s)
      centre their TEXT but stay pinned left as boxes until they also get
      auto inline margins.
   2. The marker lists (.plan-feats, .why-list, .guarantee-points) position
      their ticks and dots absolutely at the left edge. Centre the text and
      the marker stays stranded out at the margin, so they're re-hung below.
   ============================================================ */
@media (max-width: 640px) {

  /* ── nav ── */
  .nav-menu { text-align: center; }

  /* ── hero ── */
  .hero-inner { text-align: center; }
  .lede { margin-inline: auto; }
  .hero-cta { justify-content: center; }
  .hero-stats > div { padding-right: 0; }

  /* ── trust strip ── */
  .strip-item { text-align: center; }

  /* ── section heads ── */
  .section-head { text-align: center; margin-inline: auto; }

  /* ── plans ── */
  .plan { text-align: center; }
  .badge { left: 50%; transform: translateX(-50%); }

  /* ── recommender ── */
  .recommender { text-align: center; }
  .rec-out { margin-inline: auto; }

  /* ── guarantee ── */
  .guarantee-lead, .guarantee-points { text-align: center; }
  .guarantee-lead p, .guarantee-points p { margin-inline: auto; }

  /* ── why ── */
  .why-copy { text-align: center; margin-inline: auto; }

  /* ── steps + coverage ── */
  .steps li, .coverage-box { text-align: center; }
  .areas { justify-content: center; }
  .areas-note { margin-inline: auto; }

  /* ── signup ── */
  .signup-grid > div, .signup-form { text-align: center; }
  .contact-list li { justify-content: center; }

  /* ── faq ── */
  .faq { text-align: center; }
  /* Symmetric padding so the centred label clears the chevron on both sides. */
  .faq summary { padding-inline: 32px; }
  .faq details p { margin-inline: auto; }

  /* ── footer ── */
  .footer-grid > div, .footer-legal { text-align: center; }
  .footer-links { justify-content: center; }

  /* ── list markers ──
     .plan-feats and .why-list hold inline content, so their marker can simply
     become an inline box that travels with the first line of text. */
  .plan-feats li, .why-list li { padding-left: 0; }
  .plan-feats li::before,
  .why-list li::before {
    position: static; display: inline-block; vertical-align: middle;
    margin-right: 9px;
  }

  /* .guarantee-points items wrap an <h3> + <p>, both block-level — an inline
     marker would land on a line of its own above the heading. It stays
     absolute and moves to sit centred above the text instead. */
  .guarantee-points li { padding-left: 0; padding-top: 22px; }
  .guarantee-points li::before { left: 50%; margin-left: -5px; top: 0; }
}