:root{
  --brand: #054C6D;
  --brand-dark: #033950;
  --brand-light: #E2EEF5;
  --brand-2: #2E7396;
  --accent: #B8770F;
  --accent-dark: #96610C;
  --paper: #FAFBFC;
  --surface: #FFFFFF;
  --ink: #1B1E24;
  --ink-soft: #454A52;
  --muted: #84898F;
  --rule: #E3E6EA;
  --ok: #2F6F4A;
  --warn: #B07D08;
  --error: #B33124;
  --font-heading: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-body: Georgia, Charter, 'Times New Roman', serif;
}

/* ============ base ============ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: var(--brand); text-underline-offset: 2px; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 2px;
}
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 22px; }

h1, h2, h3, h4 { font-family: var(--font-heading); margin: 0; text-wrap: balance; }

/* Editable-content markers, consistent site-wide:
   *text*  -> em     : brand colour in headings, italic in running text
   **text** -> strong: accent colour in headings, bold in running text     */
h1 em, h2 em, h3 em { font-style: normal; color: var(--brand); }
h1 strong, h2 strong, h3 strong { font-weight: inherit; color: var(--accent); }

/* ============ header / nav ============ */
.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 50;
}
/* brand ink bar — the logo's petrol with an amber signature, echoing the mark */
.site-header::before {
  content: ""; display: block; height: 4px;
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand) 82%, var(--accent) 82%, var(--accent) 100%);
}
.site-header .wrap {
  display: flex; align-items: center; gap: 26px;
  min-height: 84px;
}
.brand-mark {
  font-family: var(--font-heading);
  font-weight: 800; font-size: 20px; letter-spacing: -.02em;
  color: var(--brand); text-decoration: none; white-space: nowrap;
  display: flex; align-items: center; gap: 12px;
}
.brand-mark b { color: var(--accent); }
.brand-mark img { display: block; height: 64px; width: auto; }
.brand-tagline {
  font-family: var(--font-heading);
  font-size: 11.5px; font-weight: 600; letter-spacing: .06em;
  color: var(--muted); max-width: 150px; line-height: 1.35;
  border-left: 2px solid var(--rule-strong, var(--rule)); padding-left: 12px;
  display: none;
}
@media (min-width: 1000px) { .brand-tagline { display: block; } }
@media (max-width: 820px) {
  .site-header .wrap { min-height: 66px; }
  .brand-mark img { height: 48px; }
}

/* footer brand block */
.site-footer .footer-logo { display: block; height: 52px; width: auto; margin-bottom: 12px; }

.site-nav { display: flex; align-items: center; gap: 24px; margin-left: auto; }
.site-nav a {
  font-family: var(--font-heading);
  font-size: 14px; font-weight: 600;
  color: var(--ink-soft); text-decoration: none;
}
.site-nav a:hover { color: var(--brand); }
.site-nav a.nav-cta {
  background: var(--brand); color: var(--surface);
  padding: 9px 18px; border-radius: 6px; font-weight: 700;
}
.site-nav a.nav-cta:hover { background: var(--brand-dark); color: var(--surface); }

.nav-toggle {
  display: none; margin-left: auto;
  background: none; border: 1px solid var(--rule); border-radius: 6px;
  padding: 8px 12px; font-size: 18px; line-height: 1; color: var(--ink);
  cursor: pointer;
}

@media (max-width: 820px) {
  .nav-toggle { display: block; }
  .site-nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--surface); border-bottom: 1px solid var(--rule);
    padding: 8px 0;
  }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 13px 24px; border-top: 1px solid var(--rule); }
  .site-nav a.nav-cta { margin: 10px 22px 8px; text-align: center; border-radius: 6px; }
}

/* ============ hero ============ */
.hero { padding: 56px 0 48px; }
.hero .wrap {
  display: grid; grid-template-columns: 1.25fr 1fr;
  gap: 40px; align-items: center;
}
.hero h1 {
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  font-weight: 800; letter-spacing: -.025em; line-height: 1.08;
  margin-bottom: 16px;
}
.hero h1 em { font-style: normal; color: var(--brand); }
.hero .lede {
  font-size: 17.5px; line-height: 1.6; color: var(--ink-soft);
  max-width: 46ch; margin: 0 0 24px;
}
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }
.btn {
  font-family: var(--font-heading);
  font-size: 15px; font-weight: 700;
  padding: 13px 24px; border-radius: 6px;
  text-decoration: none; display: inline-block; border: 0; cursor: pointer;
}
.btn.primary { background: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-dark); color: #fff; }
.btn.ghost { border: 1.5px solid var(--brand); color: var(--brand); background: transparent; }
.btn.ghost:hover { background: var(--brand-light); }

/* newsletter cover fan */
.covers {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  transform: rotate(-1.5deg); max-width: 420px; justify-self: end;
}
.cover {
  aspect-ratio: 8.5 / 11; border-radius: 4px;
  box-shadow: 0 8px 22px -6px var(--brand-light), 0 4px 10px rgba(0,0,0,.14);
  display: flex; align-items: flex-end; padding: 12px;
  font-family: var(--font-heading); font-size: 12px; font-weight: 700; color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.cover.has-img { padding: 0; background: var(--surface); }
.cover.has-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: opacity .4s ease;
}
.cover.v1 { background: linear-gradient(160deg, var(--brand) 0%, var(--brand-2) 75%); }
.cover.v2 { background: linear-gradient(160deg, var(--accent-dark) 0%, var(--accent) 75%); margin-top: 22px; }
.cover.v3 { background: linear-gradient(160deg, #2E7D6B 0%, #57A896 75%); margin-top: -22px; }
.cover.v4 { background: linear-gradient(160deg, #7A4E9E 0%, #A47CC7 75%); }

@media (max-width: 820px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .covers { justify-self: center; max-width: 320px; }
}

/* ============ stat band ============ */
.statband {
  background: var(--surface);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.statband .wrap { display: flex; flex-wrap: wrap; padding: 0; }
.statband .stat {
  flex: 1 1 150px; padding: 22px 26px;
  border-right: 1px solid var(--rule);
}
.statband .stat:first-child { border-left: 1px solid var(--rule); }
.statband .stat b {
  display: block;
  font-family: var(--font-heading);
  font-size: 27px; font-weight: 800; letter-spacing: -.02em;
  color: var(--brand); font-variant-numeric: tabular-nums;
}
.statband .stat span {
  font-family: var(--font-heading);
  font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}

/* ============ sections ============ */
.section { padding: 60px 0; }
.section.alt { background: var(--surface); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.section h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800; letter-spacing: -.02em; margin-bottom: 10px;
}
.section .sub {
  font-size: 16.5px; color: var(--ink-soft); max-width: 62ch; margin: 0 0 30px;
}
.kicker {
  font-family: var(--font-heading);
  font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent);
  display: block; margin-bottom: 10px;
}

.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.card {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 8px;
  padding: 24px; display: flex; flex-direction: column; gap: 10px;
}
.section.alt .card { background: var(--paper); }
.card h3 { font-size: 17px; font-weight: 700; }
.card p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-soft); }
.card .num {
  font-family: var(--font-heading);
  font-size: 26px; font-weight: 800; color: var(--accent); line-height: 1;
}

/* county / coverage chips */
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  font-family: var(--font-heading);
  font-size: 13.5px; font-weight: 600;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 99px;
  padding: 7px 15px; color: var(--ink-soft);
}
.chip b { color: var(--brand); font-variant-numeric: tabular-nums; }
.chip-btn { cursor: pointer; }
.chip-btn:hover { border-color: var(--brand); }
.chip-btn.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.chip-btn.active b { color: #fff; }

/* coverage map */
.map-shell { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); position: relative; }
#coverageMap { height: min(62vh, 560px); width: 100%; background: var(--surface-2, var(--surface)); }
.map-totals {
  position: absolute; left: 14px; bottom: 14px; z-index: 900;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
  padding: 10px 16px;
  font-family: var(--font-heading); font-size: 14px; color: var(--ink-soft);
}
.map-totals b { color: var(--brand); font-variant-numeric: tabular-nums; }

/* about page quotes */
.quote-card blockquote { margin: 0 0 10px; font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--ink); font-style: italic; }
.quote-card figcaption { font-family: var(--font-heading); font-size: 13px; font-weight: 600; color: var(--muted); }

/* newsletter reader */
.reader-grid { display: grid; grid-template-columns: 200px 1fr; gap: 40px; align-items: start; }
.reader-issues { background: var(--paper); border: 1px solid var(--rule); border-radius: 8px; padding: 18px 20px; }
.reader-year { font-family: var(--font-heading); font-size: 13px; font-weight: 800; color: var(--ink); margin: 12px 0 4px; }
.reader-year:first-of-type { margin-top: 0; }
.reader-month { display: block; font-family: var(--font-heading); font-size: 14px; padding: 7px 10px; border-radius: 6px; color: var(--ink-soft); text-decoration: none; }
.reader-month:hover { background: var(--brand-light); }
.reader-month.active { background: var(--brand); color: #fff; font-weight: 700; }
.reader-cover { display: flex; flex-direction: column; align-items: flex-start; }
.reader-cover-img { max-width: 340px; width: 100%; border-radius: 4px; box-shadow: 0 10px 30px -8px rgba(0,0,0,.3); display: block; }
@media (max-width: 700px) { .reader-grid { grid-template-columns: 1fr; } .reader-issues { order: 2; } }

/* newsletter finder */
.nl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.nl-card {
  background: var(--paper); border: 1px solid var(--rule); border-radius: 8px;
  padding: 16px 18px; display: flex; align-items: center; gap: 14px;
  justify-content: space-between; flex-wrap: wrap;
}
.nl-card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nl-card-body b { font-family: var(--font-heading); font-size: 15px; }
.nl-card-body span { font-family: var(--font-heading); font-size: 12.5px; color: var(--muted); }
.nl-print { font-family: var(--font-heading); font-size: 12px; color: var(--muted); font-style: italic; }
.btn-sm { padding: 8px 14px; font-size: 13px; }

/* find-your-newsletter search */
.finder {
  display: flex; max-width: 540px;
  background: var(--surface); border: 2px solid var(--brand); border-radius: 8px;
  overflow: hidden;
}
.finder input {
  flex: 1; min-width: 0; border: 0; background: transparent;
  padding: 14px 18px; font-size: 15.5px; font-family: var(--font-heading); color: var(--ink);
}
.finder input:focus { outline: none; }
.finder button {
  border: 0; background: var(--brand); color: var(--surface);
  font-family: var(--font-heading); font-weight: 700; font-size: 14.5px;
  padding: 0 24px; cursor: pointer;
}
.finder button:hover { background: var(--brand-dark); }

/* contact strip */
.contact-strip {
  background: var(--brand); color: var(--surface);
  padding: 48px 0;
}
.contact-strip h2 { color: var(--surface); font-size: clamp(1.4rem, 2.8vw, 1.9rem); font-weight: 800; margin-bottom: 8px; }
.contact-strip p { color: var(--brand-light); font-size: 16px; margin: 0 0 22px; max-width: 56ch; }
.contact-strip .btn.primary { background: var(--accent); }
.contact-strip a.phone {
  font-family: var(--font-heading);
  color: var(--surface); font-weight: 800; font-size: 20px; text-decoration: none;
}

/* ============ footer ============ */
.site-footer {
  background: var(--surface); border-top: 1px solid var(--rule);
  padding: 40px 0 32px;
  font-family: var(--font-heading); font-size: 14px; color: var(--ink-soft);
}
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 28px 60px; }
.site-footer h4 {
  font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 10px;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.site-footer a { color: var(--ink-soft); text-decoration: none; }
.site-footer a:hover { color: var(--brand); text-decoration: underline; }
.site-footer .legal {
  flex-basis: 100%; margin-top: 10px; padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-size: 12.5px; color: var(--muted);
  display: flex; flex-wrap: wrap; gap: 6px 22px;
}

/* ============ advertise page ============ */
.floor-badge {
  font-family: var(--font-heading);
  display: inline-block; margin: 0 0 22px;
  background: var(--brand-light); color: var(--brand-dark);
  border: 1px solid var(--brand); border-radius: 99px;
  padding: 8px 18px; font-size: 15px;
}
.floor-badge b { font-size: 17px; }

.size-diagram { display: flex; flex-direction: column; gap: 12px; max-width: 720px; }
.size-row { display: grid; grid-template-columns: 130px 1fr 110px; gap: 14px; align-items: center; }
.size-name { font-family: var(--font-heading); font-size: 14px; font-weight: 700; }
.size-bar {
  display: block; height: 26px; border-radius: 4px;
  background: linear-gradient(160deg, var(--brand) 0%, var(--brand-2) 100%);
  min-width: 24px;
}
.size-pct { font-family: var(--font-heading); font-size: 12.5px; color: var(--muted); white-space: nowrap; }
/* Placement premiums for a size sit under its bar, not in a row of their own. */
.size-positions {
  grid-column: 2 / -1; margin-top: -4px;
  font-size: 12.5px; font-style: italic; color: var(--muted);
}
@media (max-width: 560px) {
  .size-row { grid-template-columns: 100px 1fr; }
  .size-pct { display: none; }
  .size-positions { grid-column: 1 / -1; }
}

/* community picker */
.picker {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 8px;
  overflow: hidden; margin-bottom: 24px;
}
.picker-tools {
  display: flex; gap: 10px; padding: 12px; border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
}
.picker-tools input[type="search"] {
  flex: 1 1 220px; min-width: 0;
  border: 1px solid var(--rule); border-radius: 6px;
  padding: 10px 14px; font-size: 15px; font-family: var(--font-heading);
  background: var(--paper); color: var(--ink);
}
.picker-tools select {
  border: 1px solid var(--rule); border-radius: 6px;
  padding: 10px 12px; font-size: 14px; font-family: var(--font-heading);
  background: var(--paper); color: var(--ink);
}
.picker-list {
  max-height: 320px; overflow-y: auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 2px; padding: 8px;
}
.pick-item {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  column-gap: 10px; align-items: center;
  padding: 8px 10px; border-radius: 6px; cursor: pointer;
  font-family: var(--font-heading);
}
.pick-item:hover { background: var(--brand-light); }
.pick-item input { grid-row: 1 / span 2; width: 17px; height: 17px; accent-color: var(--brand); }
.pick-name { font-size: 14px; font-weight: 600; color: var(--ink); }
.pick-meta { grid-column: 2; font-size: 12px; color: var(--muted); }
.pick-empty { padding: 22px; font-family: var(--font-heading); color: var(--muted); grid-column: 1 / -1; }
.picker-total {
  padding: 13px 16px; border-top: 1px solid var(--rule);
  font-family: var(--font-heading); font-size: 14.5px; color: var(--ink-soft);
  background: var(--paper);
}
.picker-total b { color: var(--brand); font-variant-numeric: tabular-nums; }

/* lead form */
.lead-form { max-width: 720px; }
.lead-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.lead-fields .wide { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-family: var(--font-heading); font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.field input, .field textarea, .field select {
  border: 1px solid var(--rule); border-radius: 6px;
  padding: 11px 14px; font-size: 15px; font-family: var(--font-heading);
  background: var(--surface); color: var(--ink); width: 100%;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: 2px solid var(--brand); outline-offset: 0; border-color: var(--brand); }
@media (max-width: 620px) { .lead-fields { grid-template-columns: 1fr; } }
.fine { font-family: var(--font-heading); font-size: 12.5px; color: var(--muted); margin-top: 10px; }

.hp { position: absolute; left: -9999px; top: -9999px; height: 1px; overflow: hidden; }

/* SMS consent checkbox under the phone field */
.sms-consent {
  display: flex; gap: 8px; align-items: flex-start;
  margin-top: 8px; cursor: pointer;
  font-family: var(--font-heading); font-size: 12.5px; line-height: 1.45;
  color: var(--muted); font-weight: 500;
}
.sms-consent input { margin-top: 2px; accent-color: var(--brand); flex: none; width: 15px; height: 15px; }
.sms-consent b { color: var(--ink-soft); }
/* The 10DLC disclaimer carries the privacy/terms links inline. The label wraps
   only the sentence, so the links are clickable without ticking the box. */
.sms-consent label { cursor: pointer; }
.sms-consent a { color: var(--brand); text-decoration: underline; }

.notice {
  font-family: var(--font-heading); font-size: 15px; line-height: 1.5;
  border-radius: 8px; padding: 16px 20px; margin-bottom: 24px; max-width: 720px;
}
.notice.ok  { background: var(--brand-light); border: 1px solid var(--ok); color: var(--ink); }
.notice.err { background: var(--surface); border: 1.5px solid var(--error); color: var(--ink); }

/* ============ county landing pages / contact / media kit (2026-09-11) ============ */
.county-list a.chip { text-decoration: none; color: var(--ink); display: inline-flex; flex-direction: column; gap: 1px; padding: 8px 15px; border-radius: 10px; line-height: 1.3; }
.county-list a.chip b { font-weight: 500; font-size: 12px; color: var(--muted); }
.county-list a.chip:hover { border-color: var(--brand); color: var(--brand); }
.compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare { width: 100%; border-collapse: collapse; font-family: var(--font-heading); font-size: 14.5px; min-width: 640px; background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; }
.compare th, .compare td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.compare thead th { font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--paper); }
.compare thead th:last-child, .compare td:last-child { background: var(--brand-light); }
.compare tbody th { font-weight: 700; color: var(--ink-soft); width: 22%; }
.compare td b { color: var(--brand); }
.faq { max-width: 760px; }
.faq details { background: var(--paper); border: 1px solid var(--rule); border-radius: 8px; padding: 0 20px; margin-bottom: 10px; }
.faq summary { cursor: pointer; font-family: var(--font-heading); font-weight: 700; font-size: 16.5px; padding: 15px 0; list-style: none; position: relative; padding-right: 28px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 0; top: 12px; font-size: 22px; color: var(--accent); line-height: 1; }
.faq details[open] summary::after { content: '\2013'; }
.faq p { margin: 0 0 16px; font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); }
.field-label { font-family: var(--font-heading); font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 14px; border: 1px solid var(--rule); border-radius: 8px; padding: 12px 14px; background: var(--surface); max-height: 320px; overflow: auto; }
.pick-grid .pick-item { display: grid; grid-template-columns: 18px 1fr; gap: 2px 8px; align-items: start; padding: 6px 2px; cursor: pointer; font-family: var(--font-heading); }
.pick-grid .pick-item input { margin-top: 3px; accent-color: var(--brand); }
.pick-grid .pick-name { font-size: 14px; font-weight: 600; color: var(--ink); }
.pick-grid .pick-meta { grid-column: 2; font-size: 12px; color: var(--muted); }
.contact-cards .contact-big { font-family: var(--font-heading); font-size: 20px; font-weight: 800; text-decoration: none; }
.contact-cards p { font-size: 15px; }
.section.alt .faq details { background: var(--surface); }

/* ============ payment pages (minimal chrome) ============ */
.minimal-help { margin-left: auto; font-family: var(--font-heading); font-size: 13.5px; color: var(--muted); }
.minimal-help a { font-weight: 700; text-decoration: none; }
.site-footer.minimal { margin-top: 40px; padding: 20px 0; }

.pay-wrap { max-width: 560px; margin: 40px auto 0; padding: 0 18px; }
.pay-card {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,.06); padding: 26px 28px;
}
.pay-kicker {
  font-family: var(--font-heading); font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
  display: block; margin-bottom: 6px;
}
.pay-title { font-size: 1.35rem; font-weight: 800; letter-spacing: -.015em; margin-bottom: 4px; }
.pay-sub { font-family: var(--font-heading); font-size: 14px; color: var(--muted); margin: 0 0 20px; }

.pay-opt {
  display: flex; align-items: center; gap: 12px;
  border: 1.5px solid var(--rule); border-radius: 8px;
  padding: 14px 16px; margin-bottom: 10px; cursor: pointer;
  font-family: var(--font-heading); font-size: 15px;
}
.pay-opt:hover { border-color: var(--brand); }
.pay-opt input { accent-color: var(--brand); width: 17px; height: 17px; }
.pay-opt:has(input:checked) { border-color: var(--brand); background: var(--brand-light); }
.pay-opt .amt { margin-left: auto; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--brand); }

.pay-btn {
  width: 100%; margin-top: 10px;
  background: var(--accent); color: #fff; border: 0; border-radius: 8px;
  padding: 15px; font-family: var(--font-heading); font-size: 16px; font-weight: 700;
  cursor: pointer;
}
.pay-btn:hover { background: var(--accent-dark); }

.pay-ok {
  text-align: center; padding: 18px 0;
  font-family: var(--font-heading); font-size: 16px; font-weight: 700; color: var(--ok);
}
.pay-note { font-family: var(--font-heading); font-size: 13px; color: var(--muted); margin-top: 12px; }
.pay-err {
  text-align: center; padding: 26px 8px;
  font-family: var(--font-heading); font-size: 15.5px; color: var(--error);
}
.pay-meta { display: flex; flex-direction: column; gap: 10px; margin: 18px 0; }
.pay-meta .row {
  display: flex; justify-content: space-between; gap: 16px;
  font-family: var(--font-heading); font-size: 15px;
  border-bottom: 1px dotted var(--rule); padding-bottom: 8px;
}
.pay-meta .row b { font-variant-numeric: tabular-nums; }

/* ============ signing / renewal offer (sign.php) ============ */
.sign-wrap { max-width: 640px; margin: 28px auto 0; padding: 0 16px; }
/* Desktop: the guided journey earns a wider, more composed column. */
@media (min-width: 900px) {
  .sign-wrap { max-width: 880px; margin-top: 40px; }
  .j-hello { padding: 30px 34px; }
  .j-hello .j-name { font-size: 26px; }
  .j-hello .j-sub { font-size: 15px; }
  .curad { padding: 16px 18px; gap: 20px; }
  .curad img { width: 180px; max-height: 230px; }
  .curad-meta b { font-size: 15px; }
  .curad-meta span { font-size: 13px; }
  .earlybird { font-size: 13.5px; padding: 13px 16px; }
  .fork-grid { gap: 14px; margin-top: 10px; }
  .fork-btn { padding: 19px 18px; font-size: 15.5px; }
  .fork-btn small { font-size: 12.5px; margin-top: 5px; }
}
/* Large screens: a contract is a document, not an article — the line-item and
   re-rate tables read better with real room. Capped so the 11px terms text
   doesn't stretch into unreadably long lines. */
@media (min-width: 1280px) {
  .sign-wrap { max-width: 1040px; }
  .sign-doc { padding: 28px 34px; }
}
.curad img { box-shadow: 0 1px 6px rgba(0,0,0,.08); }
.sign-doc {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 10px;
  padding: 22px 24px; box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
.sign-doc table.lines { width: 100%; border-collapse: collapse; margin: 16px 0; }
.sign-doc table.lines td { padding: 9px 4px; border-bottom: 1px solid var(--rule); font-size: 14px; }
.sign-doc table.lines td.amt { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sign-doc .total td { font-weight: 700; border-bottom: none; padding-top: 12px; }

.offer-label {
  font-family: var(--font-heading); font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  margin: 22px 0 10px;
}
.tier {
  border: 1.5px solid var(--rule); border-radius: 10px; background: var(--surface);
  padding: 14px 16px; cursor: pointer; position: relative; margin-bottom: 11px;
  font-family: var(--font-heading); transition: border-color .12s;
}
.tier:hover { border-color: var(--brand-2); }
.tier.sel { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-light); }
.tier.current-tier { background: var(--paper); border-left: 5px solid var(--brand); }
/* Downgrade tier: present (it's a real choice) but visually quiet — the offer
   sells up, it doesn't advertise down. Selecting it restores full opacity. */
.tier.muted { opacity: .7; }
.tier.muted:hover, .tier.muted.sel { opacity: 1; }

/* ---- Mock 2: bundle configurator (package headers) ---- */
.seg { display: flex; border: 1.5px solid var(--rule); border-radius: 10px; overflow: hidden; margin-bottom: 14px; background: var(--paper); }
.seg button {
  flex: 1; border: none; background: transparent; padding: 10px 6px;
  font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer;
}
.seg button.on { background: var(--brand); color: #fff; }
.bline {
  display: flex; align-items: center; gap: 11px; border: 1.5px solid var(--rule);
  border-radius: 10px; padding: 11px 12px; margin-bottom: 9px; background: var(--paper);
  transition: opacity .12s, border-color .12s;
}
.bline.off { opacity: .55; background: var(--paper); border-style: dashed; }
.bline .b-main { flex: 1; min-width: 0; }
.bline .b-main b { font-size: 13.5px; }
.bline .b-main .sub { font-size: 11.5px; color: var(--muted); }
.bline .b-price { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bline .b-price b { font-size: 14.5px; }
.bline .b-per { font-size: 11px; color: var(--muted); }
.bline .b-rm {
  flex-shrink: 0; border: 1px solid var(--rule); background: var(--paper);
  color: var(--muted); border-radius: 7px; font-size: 11.5px; padding: 5px 10px; cursor: pointer;
}
.bline .b-rm:hover { border-color: var(--brand-2); color: var(--ink); }
.bline.off .b-rm { background: var(--brand); border-color: var(--brand); color: #fff; }
/* Proportional page glyph — the shaded block is the share of the newsletter
   page the ad occupies; it grows when the line is upgraded. */
.b-viz {
  display: block; width: 27px; height: 35px; flex-shrink: 0; align-self: center;
  border: 1.5px solid var(--rule-strong, var(--rule)); border-radius: 3px;
  background: var(--surface); position: relative; overflow: hidden;
}
.b-viz i {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: calc(var(--f, .25) * 100%);
  background: var(--brand-light); border-top: 1.5px solid var(--brand);
  transition: height .25s ease;
}
.tier .t-viz { position: absolute; right: 14px; bottom: 14px; }
/* Per-line upgrade pill: "⬆ Half page — only $32 more/iss · 2× the space" */
.b-up {
  display: inline-block; margin-top: 7px; cursor: pointer;
  border: 1px solid var(--accent); border-radius: 20px;
  background: var(--surface); color: var(--accent-dark, var(--accent));
  font-family: var(--font-heading); font-size: 12px; font-weight: 600; padding: 4px 11px;
}
.b-up:hover { border-color: var(--accent-dark, var(--accent)); }
.b-up.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.bline.off .b-up { display: none; }
/* The quiet scale-back: present (a real choice) but never competing with the
   upgrade — plain muted text, one step down. */
.b-down {
  display: block; margin-top: 5px; padding: 0; cursor: pointer;
  border: none; background: none; text-align: left;
  font-family: var(--font-heading); font-size: 11.5px; color: var(--muted);
  text-decoration: underline; text-underline-offset: 2px;
}
.b-down:hover { color: var(--ink-soft); }
.b-down.on { color: var(--brand); text-decoration: none; font-weight: 600; }
.bline.off .b-down { display: none; }
/* ---- v3 guided journey: landing fork, current ad, gift banner ---- */
.j-hello .j-kicker {
  font-family: var(--font-heading); font-size: 12px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--accent, var(--brand));
}
.j-hello .j-name { margin: 4px 0 6px; font-size: 23px; }
.j-hello .j-sub { color: var(--muted); font-size: 14.5px; margin: 0 0 16px; max-width: 52ch; }
.curad {
  display: flex; gap: 14px; align-items: center;
  border: 1px solid var(--rule); border-radius: 10px; background: var(--paper);
  padding: 12px; margin-bottom: 14px;
}
.curad img {
  flex-shrink: 0; width: 132px; max-height: 170px; object-fit: contain;
  border: 1px solid var(--rule-strong, var(--rule)); border-radius: 4px; background: #fff;
}
.curad-meta { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.curad-meta b { font-size: 14px; }
.curad-meta span { font-size: 12.5px; color: var(--muted); }
.curad-chip {
  align-self: flex-start; font-family: var(--font-heading); font-size: 11px; font-weight: 700;
  border-radius: 20px; padding: 3px 10px;
  background: var(--brand-light); color: var(--brand) !important;
}
/* Community fact-sheet popup ("More details" on add-ons) */
.a-more {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--font-heading); font-size: 11.5px; font-weight: 600;
  color: var(--brand); text-decoration: underline; text-underline-offset: 2px;
}
.ad-modal {
  position: fixed; inset: 0; z-index: 90; display: none;
  background: rgba(15, 20, 25, .45); padding: 20px 16px; overflow-y: auto;
}
.ad-modal.on { display: flex; align-items: center; justify-content: center; }
.ad-modal-card {
  position: relative; background: var(--surface); border-radius: 12px;
  padding: 22px 24px; max-width: 440px; width: 100%;
  box-shadow: 0 10px 40px rgba(0,0,0,.25);
}
.ad-modal-card h3 { margin: 0 0 2px; font-size: 18px; }
.ad-modal-sub { color: var(--muted); font-size: 12.5px; margin-bottom: 10px; }
.ad-modal-card ul { margin: 10px 0; padding-left: 19px; font-size: 13.5px; line-height: 1.6; }
.ad-modal-card li { margin-bottom: 4px; }
.ad-modal-note { color: var(--muted); font-size: 12px; margin: 10px 0 0; }
.ad-modal-x {
  position: absolute; top: 10px; right: 12px; background: none; border: none;
  font-size: 24px; line-height: 1; color: var(--muted); cursor: pointer; padding: 4px;
}
.ad-modal-x:hover { color: var(--ink); }

/* Back to the landing from either door */
.j-back {
  display: inline-block; margin: 0 0 12px; padding: 0; background: none; border: none;
  cursor: pointer; font-family: var(--font-heading); font-size: 13px; font-weight: 600;
  color: var(--muted); text-decoration: underline; text-underline-offset: 3px;
}
.j-back:hover { color: var(--brand); }

/* "Your renewal at a glance" — the plan behind the keep door */
.j-plan {
  border: 1px solid var(--rule); border-radius: 10px; background: var(--paper);
  padding: 12px 14px; margin: 0 0 14px;
}
.j-plan-label {
  font-family: var(--font-heading); font-size: 10.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
}
.j-plan-line {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 5px 0; border-bottom: 1px dashed var(--rule); font-size: 13.5px;
}
.j-plan-line span { min-width: 0; }
.j-plan-line small { display: block; color: var(--muted); font-size: 12px; }
.j-plan-line em, .j-plan-total em { font-style: normal; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.j-plan-total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding-top: 8px; font-size: 14px; font-weight: 700;
}
.earlybird {
  display: flex; gap: 10px; align-items: flex-start;
  border: 1px solid #fcd34d; background: #fffbeb; border-radius: 10px;
  padding: 11px 13px; font-size: 13px; color: #92400e; margin: 0 0 14px;
}
.earlybird .eb-i { font-size: 17px; line-height: 1.2; }
.earlybird b { color: #78350f; }
.fork-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 4px 0 6px; }
@media (min-width: 640px) { .fork-grid { grid-template-columns: 1fr 1fr; } }
.fork-btn { text-align: center; padding: 15px 16px; line-height: 1.35; }
.fork-btn small { display: block; font-weight: 400; font-size: 12px; opacity: .9; margin-top: 3px; }
.fork-btn.fork-ghost { background: var(--surface); color: var(--ink); border: 1.5px solid var(--brand); }
.fork-btn.fork-ghost:hover { background: var(--brand-light); }
.fork-btn.fork-ghost small { color: var(--muted); }

/* "Want to change up your plan?" doorway into the configurator */
.plan-invite {
  border: 1.5px dashed var(--rule-strong, var(--rule)); border-radius: 12px;
  background: var(--surface); padding: 18px 20px; margin: 18px 0 14px;
  text-align: center;
}
.plan-invite b { font-family: var(--font-display, inherit); font-size: 16px; }
.plan-invite .pi-sub { color: var(--muted); font-size: 13.5px; margin: 4px 0 12px; }
.plan-invite .sign-cta { display: inline-block; width: auto; padding: 11px 26px; }
.bnote { border-radius: 8px; padding: 9px 12px; font-size: 12.5px; margin: 4px 0 10px; }
.bnote.ok { background: var(--brand-light); color: var(--brand); }
.bnote.warn { background: var(--accent-light, #fff7e6); color: var(--accent, #92400e); }

/* ---- Step D: decline doorway (retention save-offers) ---- */
.save-view {
  position: fixed; inset: 0; z-index: 80; display: none;
  background: var(--paper); overflow-y: auto;
  padding: 26px 16px 60px;
}
.save-view.on { display: block; }
.save-inner { max-width: 560px; margin: 0 auto; }
.sv-h { margin: 0 0 6px; font-size: 19px; font-family: var(--font-display, inherit); }
.sv-sub { color: var(--muted); font-size: 13.5px; margin: 0 0 14px; }
.soffer {
  position: relative; border: 1.5px solid var(--rule); border-radius: 12px;
  background: var(--paper); padding: 13px 14px; margin-bottom: 10px;
  cursor: pointer; transition: border-color .12s;
}
.soffer:hover { border-color: var(--brand-2); }
.soffer.sel { border-color: var(--brand); background: var(--brand-light); }
.soffer b { font-size: 14px; }
.soffer .sv-blurb { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.sv-pill {
  float: right; margin-left: 10px; font-size: 10.5px; font-weight: 700;
  border-radius: 20px; padding: 2px 9px; background: var(--accent-light, var(--brand-light));
  color: var(--accent, var(--brand));
}
#offerApply:disabled { opacity: .5; cursor: default; }
.sign-cta.sv-ghost { background: var(--surface); color: var(--ink); border: 1px solid var(--rule); }
.sign-cta.sv-ghost:hover { background: var(--paper); }
.sign-cta.sv-quiet { background: #e5e7eb; color: var(--ink-soft); }
.sign-cta.sv-quiet:hover { background: #d8dbdf; }
.applied-badge {
  display: none; border: 1px solid var(--brand); border-radius: 10px;
  background: var(--brand-light); color: var(--brand);
  padding: 10px 13px; font-size: 13px; margin-bottom: 14px;
}
.applied-badge.on { display: block; }
.tier h4 { margin: 4px 0 2px; font-size: 15px; }
.tier .t-price { font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tier .t-price small { font-size: 12px; font-weight: 400; color: var(--muted); }
.tier ul { margin: 8px 0 0; padding-left: 17px; font-size: 12.5px; color: var(--ink-soft); }
.tier .ribbon {
  position: absolute; top: -9px; left: 14px;
  font-size: 10.5px; font-weight: 700; border-radius: 20px; padding: 2px 9px;
}
.ribbon.rec { background: var(--good-wash, var(--brand-light)); color: var(--ok); border: 1px solid var(--ok); }
.ribbon.cur { background: var(--brand-light); color: var(--brand); border: 1px solid var(--brand); }
.tier .picked, .addon .chk {
  position: absolute; top: 12px; right: 12px; width: 22px; height: 22px;
  border-radius: 50%; border: 1.5px solid var(--rule-strong, var(--rule));
  background: var(--surface); display: grid; place-items: center;
  color: #fff; font-size: 13px;
}
.tier.sel .picked { background: var(--brand); border-color: var(--brand); }

.addon {
  display: flex; align-items: center; gap: 11px; position: relative;
  border: 1.5px dashed var(--rule-strong, var(--rule)); border-radius: 10px;
  padding: 12px 44px 12px 14px; margin-bottom: 9px; background: var(--surface);
  cursor: pointer; font-family: var(--font-heading); transition: border-color .12s;
}
.addon:hover { border-color: var(--brand-2); }
.addon.sel { border-style: solid; border-color: var(--brand); background: var(--brand-light); }
.addon.sel .chk { background: var(--brand); border-color: var(--brand); }
.addon .a-main { flex: 1; min-width: 0; }
.addon .a-main b { font-size: 13.5px; }
.addon .a-main .sub { font-size: 11.5px; color: var(--muted); }
.addon .a-price { white-space: nowrap; font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.offer-reach { font-family: var(--font-heading); font-size: 12.5px; color: var(--muted); margin-top: 4px; }

/* End-of-flow signing card — deliberately NOT sticky (Darin 2026-08-16): a
   pinned Sign button covers the content being reviewed and pushes the ask
   before the reader is ready. Signing sits at the end, in reading order,
   reached after the contract and any changes. */
.sign-bar {
  margin: 24px 0 40px;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 12px;
  padding: 18px 20px; box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
.sign-total {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-heading); font-weight: 700; font-size: 15px;
  padding-bottom: 10px;
}
.sign-total .per { font-weight: 400; color: var(--muted); font-size: 12px; }
.sign-bar label.fld { display: block; font-family: var(--font-heading); font-size: 13px; color: var(--ink-soft); margin: 0 0 6px; }
.sign-bar input[type=text] {
  width: 100%; height: 46px; font-size: 18px; padding: 0 12px;
  border: 1px solid var(--rule-strong, var(--rule)); border-radius: 8px;
  background: var(--surface); color: var(--ink);
}
.sign-bar #typed_name { font-family: 'Brush Script MT', cursive; }
.sign-agree { display: flex; align-items: flex-start; gap: 10px; font-family: var(--font-heading); font-size: 13.5px; margin: 14px 0; color: var(--ink-soft); }
.sign-agree input { width: 22px; height: 22px; margin-top: 1px; flex-shrink: 0; accent-color: var(--brand); }
.sign-cta {
  width: 100%; border: none; border-radius: 8px; padding: 14px;
  font-family: var(--font-heading); font-size: 16px; font-weight: 700; cursor: pointer;
  background: var(--accent); color: #fff;
}
.sign-cta:hover { background: var(--accent-dark); }
.sign-decline { display: block; text-align: center; margin-top: 12px; color: var(--muted); font-family: var(--font-heading); font-size: 13px; text-decoration: underline; background: none; border: none; width: 100%; cursor: pointer; }
.sign-state {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 10px;
  padding: 34px 24px; text-align: center; font-family: var(--font-heading);
}
.sign-state .big { font-size: 18px; font-weight: 700; margin: 10px 0 6px; }
.sign-state .muted { color: var(--muted); font-size: 13.5px; }
.sign-err {
  background: var(--surface); border: 1.5px solid var(--error); color: var(--error);
  border-radius: 8px; padding: 10px 12px; font-family: var(--font-heading); font-size: 14px; margin-bottom: 14px;
}
textarea.sign-plain, input.sign-plain { width: 100%; font-size: 15px; padding: 10px 12px; border: 1px solid var(--rule-strong, var(--rule)); border-radius: 8px; font-family: var(--font-heading); resize: vertical; background: var(--surface); color: var(--ink); }

/* ============ package builder (/get-a-quote) ============
   Reuses .picker, .tier, .seg, .b-viz, .lead-form, .notice from above —
   the sign.php kit minus every $ figure. Additive only. */
.sf-ribbon {
  background: var(--warn); color: #fff; font-family: var(--font-heading); font-size: 13px;
  text-align: center; padding: 8px 14px;
}
.sf-ribbon code { background: rgba(0,0,0,.18); padding: 1px 6px; border-radius: 4px; }
.sf-steps {
  list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px;
  font-family: var(--font-heading); font-size: 13px; color: var(--muted);
}
.sf-steps li { display: flex; align-items: center; gap: 7px; }
.sf-steps li b {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--rule); background: var(--surface); color: var(--muted); font-size: 12px;
}
.sf-steps li.cur { color: var(--ink); font-weight: 700; }
.sf-steps li.cur b { border-color: var(--brand); background: var(--brand); color: #fff; }
.sf-steps li.done b { border-color: var(--ok); background: var(--ok); color: #fff; }
.sf-tiers { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 12px; max-width: 960px; margin-bottom: 8px; }
.sf-tiers .tier { margin-bottom: 0; padding-right: 60px; min-height: 118px; }
.sf-tiers .tier .picked { top: 12px; right: 12px; }
.sf-tiers .tier .t-viz { right: 16px; bottom: 16px; width: 32px; height: 42px; }
.sf-share { font-family: var(--font-heading); font-size: 12.5px; color: var(--muted); }
.sf-na-msg { margin-top: 8px; color: var(--warn); }
.tier.sf-na { cursor: not-allowed; }
.sf-two { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; max-width: 960px; margin-top: 18px; }
@media (max-width: 680px) { .sf-two { grid-template-columns: 1fr; } }
.seg button { position: relative; }
.sf-best {
  display: inline-block; margin-left: 6px; font-size: 10.5px; font-weight: 700; border-radius: 20px; padding: 1px 8px;
  background: var(--good-wash, var(--brand-light)); color: var(--ok); border: 1px solid var(--ok);
}
.seg button.on .sf-best { background: #fff; }
.sf-summary {
  font-family: var(--font-heading); font-size: 14.5px; color: var(--ink-soft);
  background: var(--surface); border: 1px solid var(--rule); border-left: 5px solid var(--brand);
  border-radius: 8px; padding: 12px 16px; margin: 0 0 20px; max-width: 720px;
}
.sf-summary b { color: var(--brand); font-variant-numeric: tabular-nums; }
.sf-summary-list { margin-top: 6px; font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.sf-summary-list span { color: var(--muted); }
.sf-card {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 12px;
  padding: 24px 26px; max-width: 720px; box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
.sf-card h3 { margin: 0 0 8px; font-size: 20px; }
.sf-done { border-color: var(--ok); }
.sf-bar {
  position: sticky; bottom: 0; z-index: 30;
  background: var(--surface); border-top: 1px solid var(--rule); box-shadow: 0 -6px 18px rgba(0,0,0,.06);
  padding: 12px 0; font-family: var(--font-heading);
}
.sf-bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sf-bar-reach { font-size: 14.5px; color: var(--ink-soft); line-height: 1.4; }
.sf-bar-reach b { color: var(--brand); font-variant-numeric: tabular-nums; }
.sf-bar .btn[disabled] { opacity: .5; cursor: not-allowed; }
@media (max-width: 560px) {
  .sf-bar .wrap { flex-direction: column; align-items: stretch; }
  .sf-bar-reach { font-size: 13px; text-align: center; }
}

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