@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@500;700;800&family=Poppins:wght@400;500;600&display=swap");

:root {
  --color-ink: #1a1f1c;
  --color-ink-soft: #3f4a44;
  --color-paper: #ffffff;
  --color-cloud: #f4f6f4;
  --color-line: #e1e6e1;
  --color-accent: #2f5d3a;
  --color-accent-dark: #1f4027;
  --color-accent-light: #e7f0e8;
  --color-footer-bg: #1a1f1c;

  /* Filled-button colors, kept separate from --color-accent so the dark theme
     can darken them for contrast without dimming the links, focus rings, and
     hero gradients that share the accent. */
  --color-btn-bg: var(--color-accent);
  --color-btn-bg-hover: var(--color-accent-dark);

  --font-heading: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Poppins", "Helvetica Neue", Arial, sans-serif;

  --radius: 10px;
  --max-width: 1120px;
}

[data-theme="dark"] {
  --color-ink: #eef1ee;
  --color-ink-soft: #aab5ad;
  --color-paper: #14181a;
  --color-cloud: #1c211e;
  --color-line: #2d332f;
  --color-accent: #3f8f57;
  --color-accent-dark: #7cd39a;
  --color-accent-light: #1a2b20;

  /* #3f8f57 under white text is only 3.98:1, below the 4.5:1 AA threshold,
     and --color-accent-dark inverts to a *lighter* green in this theme, so
     the shared hover would have made it worse. Both are set explicitly. */
  --color-btn-bg: #2f7a45;
  --color-btn-bg-hover: #256237;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-paper);
  line-height: 1.6;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 0.5em;
  color: var(--color-ink);
}

h1 { font-size: clamp(2rem, 4vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 2.6vw, 2.25rem); }
h3 { font-size: 1.25rem; font-weight: 700; }

p { margin: 0 0 1em; }

a {
  color: var(--color-accent-dark);
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Header */
.site-header {
  border-bottom: 1px solid var(--color-line);
  background: var(--color-paper);
  position: sticky;
  top: 0;
  z-index: 20;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  flex-wrap: wrap;
}

.site-logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--color-ink);
}

.site-logo img {
  height: 34px;
  width: auto;
  display: block;
}

.site-logo span {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.2;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.site-nav a {
  text-decoration: none;
  color: var(--color-ink-soft);
  font-size: 0.95rem;
  font-weight: 500;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--color-accent-dark);
}

.site-nav .nav-cta {
  background: var(--color-btn-bg);
  color: #fff;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius);
}

.site-nav .nav-cta:hover {
  background: var(--color-btn-bg-hover);
  color: #fff;
}

/* Mobile nav */
.header-call {
  display: none;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-paper);
  cursor: pointer;
}

.nav-toggle-bar {
  display: block;
  height: 2px;
  width: 20px;
  background: var(--color-ink);
}

@media (max-width: 800px) {
  .header-call {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: auto;
    font-size: 1.25rem;
    text-decoration: none;
  }

  .nav-toggle {
    display: flex;
  }

  .site-nav {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    order: 3;
    padding-top: 0.75rem;
  }

  .site-nav.is-open {
    display: flex;
  }

  .site-nav a {
    width: 100%;
    padding: 0.75rem 0;
    border-top: 1px solid var(--color-line);
  }

  /* Covered by the always-visible .header-call button at this width */
  .site-nav a[href^="tel:"] {
    display: none;
  }

  .site-nav .nav-cta {
    text-align: center;
    margin-top: 0.5rem;
  }
}

/* Buttons */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  text-decoration: none;
  padding: 0.85rem 1.6rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
}

.btn-primary {
  background: var(--color-btn-bg);
  color: #fff;
}

.btn-primary:hover {
  background: var(--color-btn-bg-hover);
}

.btn-outline {
  background: transparent;
  border-color: var(--color-line);
  color: var(--color-ink);
}

.btn-outline:hover {
  border-color: var(--color-accent);
  color: var(--color-accent-dark);
}

/* Hero */
.hero {
  padding: 4.5rem 0 3.5rem;
  background: linear-gradient(180deg, var(--color-accent-light) 0%, var(--color-paper) 100%);
}

.hero .container {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 2.5rem;
  align-items: center;
}

.hero img {
  width: 100%;
  border-radius: var(--radius);
  display: block;
}

.hero .eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: 0.75rem;
}

.hero .stat {
  margin-top: 1.5rem;
  font-weight: 600;
  color: var(--color-ink-soft);
}

@media (max-width: 800px) {
  .hero .container {
    grid-template-columns: 1fr;
  }
}

.hero-photo {
  min-height: 70vh;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  padding: 3rem 0;
}

.hero-photo-overlay {
  width: 100%;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.45) 45%, rgba(0, 0, 0, 0) 80%);
  padding: 2.5rem 0;
}

.hero-photo .eyebrow,
.hero-photo h1,
.hero-photo p,
.hero-photo .stat {
  color: #fff;
}

.hero-photo .container {
  max-width: var(--max-width);
  display: block;
}

/* Keep hero copy on the dark side of the scrim. The gradient is clear by 80%
   of the viewport, so a full-container measure ran the text out over the
   bright part of the photo and it stopped being readable. 34rem is also a far
   saner reading measure than the 1120px container. */
.hero-photo .container p {
  max-width: 34rem;
}

@media (max-width: 800px) {
  .hero-photo {
    min-height: 60vh;
  }
  .hero-photo-overlay {
    background: rgba(0, 0, 0, 0.6);
  }
}

/* Sections */
.section {
  padding: 3.5rem 0;
}

.section-alt {
  background: var(--color-cloud);
}

.section-header {
  max-width: 640px;
  margin: 0 auto 2.5rem;
  text-align: center;
}

/* Cards / grids */
.grid {
  display: grid;
  gap: 1.5rem;
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 800px) {
  .grid-3, .grid-2 {
    grid-template-columns: 1fr;
  }
}

.plan-swipe-hint {
  display: none;
  text-align: center;
  margin: 0.75rem 0 0;
  color: var(--color-ink-soft);
  font-size: 0.8rem;
}

@media (max-width: 800px) {
  .plan-grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-top: 0.75rem;
    padding-bottom: 0.5rem;
    margin: 0 -1.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .plan-grid .plan-card {
    flex: 0 0 85%;
    scroll-snap-align: center;
  }

  .plan-swipe-hint {
    display: block;
  }
}

.card {
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 1.75rem;
}

/* Store product cards: equal-height columns so the Buy Now CTA lines up
   across a row no matter how long each description runs. */
.card[data-category] {
  display: flex;
  flex-direction: column;
}

.card[data-category] .btn {
  margin-top: auto;
  align-self: flex-start;
}

/* The rule above outranks the UA stylesheet's [hidden] { display: none },
   which is how the category filter hides cards -- restore it explicitly. */
.card[data-category][hidden] {
  display: none;
}

.glow-map {
  aspect-ratio: 4 / 3;
  margin: 1.5rem 0;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #0a0e17;
}

.glow-map canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.glow-map-label {
  color: #eafff5;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.card .price {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--color-accent-dark);
  margin: 0.25rem 0 1rem;
}

.card .price-note {
  font-size: 0.85rem;
  color: var(--color-ink-soft);
  font-weight: 400;
}

.card .product-photo {
  display: block;
  height: 160px;
  width: 100%;
  object-fit: contain;
  margin-bottom: 1rem;
  border-radius: var(--radius);
  /* Product shots are a mix of transparent PNGs and JPGs matted on white.
     Without an explicit plate the JPGs render as hard white rectangles on
     the dark theme's cards, so every photo gets the same white plate. */
  background: #fff;
  padding: 0.75rem;
}

.product-photo-link {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: var(--radius);
}

.product-photo-link:hover .product-photo,
.product-photo-link:focus-visible .product-photo {
  opacity: 0.85;
}

.product-photo-link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.category-toggle {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

/* Store card titles link through to the product page. Sits above the Buy Now
   button, which is positioned by margin-top:auto from whatever is below it, so
   this doesn't disturb the equal-height row alignment. */
.card h3 a {
  color: inherit;
  text-decoration: none;
}

.card h3 a:hover {
  text-decoration: underline;
}

.card h3 a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Product detail pages */
.breadcrumb {
  border-bottom: 1px solid var(--color-line);
  padding: 0.75rem 0;
  font-size: 0.9rem;
}

.breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}

.breadcrumb li + li::before {
  content: "/";
  margin-right: 0.5rem;
  color: var(--color-ink-soft);
}

.breadcrumb [aria-current="page"] {
  color: var(--color-ink-soft);
}

.product-lede {
  padding-top: 2.5rem;
}

.product-header {
  align-items: start;
  gap: 2.5rem;
}

.product-figure .product-photo {
  display: block;
  width: 100%;
  max-height: 400px;
  object-fit: contain;
  border-radius: var(--radius);
  /* Same reason as the card photos: vendor shots are a mix of transparent and
     white-matted, so they all get the same plate rather than some of them
     becoming white slabs on the dark theme. */
  background: #fff;
  padding: 1.5rem;
}

.product-buy h1 {
  margin-bottom: 0.25rem;
}

.product-tagline {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-ink-soft);
  margin-bottom: 1rem;
}

.product-buy .price {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 2rem;
  color: var(--color-accent-dark);
  margin: 0 0 0.75rem;
}

.product-buy .price-note {
  font-size: 0.9rem;
  color: var(--color-ink-soft);
  font-weight: 400;
}

.stock-note {
  display: inline-block;
  background: var(--color-accent-light);
  border-radius: var(--radius);
  padding: 0.5rem 0.85rem;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.product-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.25rem 0 0.75rem;
}

.prose-narrow {
  max-width: 68ch;
  margin: 0 auto;
}

.fit-lists {
  margin-top: 2rem;
}

.tick-list,
.cross-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tick-list li,
.cross-list li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 0.6rem;
}

.tick-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-accent);
  font-weight: 700;
}

.cross-list li::before {
  content: "✕";
  position: absolute;
  left: 0;
  color: var(--color-ink-soft);
  font-weight: 700;
}

.spec-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
}

.spec-table th,
.spec-table td {
  text-align: left;
  vertical-align: top;
  padding: 0.7rem 0.5rem;
  border-bottom: 1px solid var(--color-line);
}

.spec-table th {
  font-family: var(--font-heading);
  font-weight: 700;
  width: 34%;
  color: var(--color-ink);
}

.spec-note {
  display: block;
  font-size: 0.85rem;
  color: var(--color-ink-soft);
  margin-top: 0.25rem;
}

@media (max-width: 560px) {
  .spec-table th,
  .spec-table td {
    display: block;
    width: auto;
    border-bottom: 0;
    padding: 0.25rem 0;
  }

  .spec-table tr {
    display: block;
    border-bottom: 1px solid var(--color-line);
    padding: 0.6rem 0;
  }
}

.related-grid {
  max-width: 720px;
  margin: 0 auto;
}

.related-card {
  display: block;
  color: inherit;
  text-decoration: none;
}

.related-card:hover {
  border-color: var(--color-accent);
}

.related-card:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.related-card h3 {
  margin-bottom: 0.25rem;
}

/* Inline SVG figures on product pages.
   Colours come from the theme tokens rather than being baked into the markup,
   which is the main reason these are inline SVG and not generated images --
   custom properties cascade into inline SVG but not into <img src="*.svg">. */
.chart-figure {
  margin: 1.5rem 0 2rem;
}

.chart-figure svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.chart-figure figcaption {
  font-size: 0.85rem;
  color: var(--color-ink-soft);
  margin-top: 0.75rem;
}

.runtime-chart text {
  font-family: var(--font-body);
  fill: var(--color-ink);
}

.runtime-chart .rt-label {
  font-size: 14px;
  font-weight: 500;
}

.runtime-chart .rt-watts,
.runtime-chart .rt-value {
  font-size: 13px;
  fill: var(--color-ink-soft);
}

.runtime-chart .rt-value {
  font-family: var(--font-heading);
  font-weight: 700;
  fill: var(--color-ink);
}

.runtime-chart .rt-track {
  fill: var(--color-line);
}

.runtime-chart .rt-bar {
  fill: var(--color-accent);
}

.coverage-diagram text {
  font-family: var(--font-body);
}

.coverage-diagram .cv-signal-stop-core {
  stop-color: var(--color-accent);
  stop-opacity: 0.38;
}

.coverage-diagram .cv-signal-stop-mid {
  stop-color: var(--color-accent);
  stop-opacity: 0.22;
}

.coverage-diagram .cv-signal-stop-edge {
  stop-color: var(--color-accent);
  stop-opacity: 0;
}

.coverage-diagram .cv-halo-stop-core {
  stop-color: var(--color-accent);
  stop-opacity: 0.14;
}

.coverage-diagram .cv-halo-stop-edge {
  stop-color: var(--color-accent);
  stop-opacity: 0;
}

.coverage-diagram .cv-wall {
  fill: none;
  stroke: var(--color-ink-soft);
  stroke-width: 2;
}

.coverage-diagram .cv-wall-inner {
  stroke: var(--color-ink-soft);
  stroke-width: 2;
  opacity: 0.5;
}

.coverage-diagram .cv-room {
  font-size: 13px;
  fill: var(--color-ink-soft);
}

.coverage-diagram .cv-unit {
  fill: var(--color-accent);
}

.coverage-diagram .cv-unit-label {
  font-size: 13px;
  font-weight: 600;
  fill: var(--color-ink);
}

.coverage-diagram .cv-weak {
  font-size: 13px;
  font-style: italic;
  fill: var(--color-ink-soft);
}

/* Repeats a graphic's figures for assistive tech. role="img" collapses an SVG
   to one node, so its <title> alone cannot convey a five-row chart. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Plan comparison cards */
.plan-grid {
  align-items: stretch;
}

.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 1.75rem;
}

.plan-card.featured {
  border-color: var(--color-accent);
  border-width: 2px;
  box-shadow: 0 12px 30px -18px rgba(0, 0, 0, 0.35);
}

.plan-badge {
  position: absolute;
  top: -0.75rem;
  left: 1.75rem;
  background: var(--color-accent);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  white-space: nowrap;
}

.plan-badge-value,
.plan-badge-new {
  background: var(--color-ink-soft);
}

.plan-speed {
  margin: 0.75rem 0 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.speed-row {
  display: grid;
  grid-template-columns: 4.2rem 1fr 3.8rem;
  align-items: center;
  gap: 0.6rem;
}

.speed-label {
  font-size: 0.75rem;
  color: var(--color-ink-soft);
}

.speed-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--color-cloud);
  overflow: hidden;
}

.speed-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--color-accent);
}

.speed-value {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-ink);
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 420px) {
  .speed-row {
    grid-template-columns: 3.6rem 1fr 3.4rem;
    gap: 0.4rem;
  }

  .speed-label,
  .speed-value {
    font-size: 0.7rem;
  }
}

.plan-card .price {
  margin-bottom: 0.15rem;
}

.price-alt {
  font-size: 0.85rem;
  color: var(--color-ink-soft);
  margin-bottom: 1rem;
}

.price-save {
  color: var(--color-accent);
  font-weight: 600;
}

.plan-features {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  flex-grow: 1;
}

.plan-features li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.5rem;
  font-size: 0.92rem;
  color: var(--color-ink-soft);
}

.plan-features li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--color-accent);
  font-weight: 700;
}

.plan-card .btn {
  align-self: stretch;
  text-align: center;
}

/* FCC Broadband Facts label -- an expand-in-place <details>, not a link to
   another page, so the full label is still "in close proximity to the
   plan's advertisement" once opened rather than off on its own page. */
.broadband-facts {
  margin-top: 0.85rem;
  font-size: 0.8rem;
}

.broadband-facts summary {
  cursor: pointer;
  color: var(--color-accent-dark);
  font-weight: 600;
  text-align: center;
}

.broadband-facts summary:hover {
  text-decoration: underline;
}

.bf-card {
  margin-top: 0.75rem;
  padding: 0.85rem 1rem 1rem;
  border: 2px solid var(--color-ink);
  border-radius: 4px;
  background: var(--color-paper);
  color: var(--color-ink);
}

.bf-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.1rem;
  margin: 0;
  padding-bottom: 0.35rem;
  border-bottom: 2px solid var(--color-ink);
}

.bf-provider,
.bf-plan {
  margin: 0.3rem 0 0;
  font-weight: 600;
}

.bf-kind {
  margin: 0 0 0.5rem;
  padding-bottom: 0.5rem;
  color: var(--color-ink-soft);
  border-bottom: 1px solid var(--color-line);
}

.bf-section {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-line);
}

.bf-section:last-of-type {
  border-bottom: none;
}

.bf-section-title {
  margin: 0 0 0.35rem;
  font-weight: 700;
}

.bf-row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.1rem 0;
}

.bf-row-primary {
  font-weight: 700;
  font-size: 0.95rem;
}

.bf-row-primary span:last-child {
  font-size: 1.1rem;
}

.bf-link {
  flex-wrap: wrap;
}

.bf-note {
  margin: 0;
  color: var(--color-ink-soft);
}

.bf-footer {
  margin: 0.6rem 0 0;
  font-size: 0.72rem;
  color: var(--color-ink-soft);
}

.bf-upi {
  margin: 0.3rem 0 0;
  font-size: 0.72rem;
  color: var(--color-ink-soft);
  word-break: break-all;
}

.plan-note {
  text-align: center;
  margin-top: 1.5rem;
  color: var(--color-ink-soft);
  font-size: 0.9rem;
}

.plan-footnote {
  text-align: center;
  margin-top: 0.75rem;
  color: var(--color-ink-soft);
}

.plan-footnote .badge {
  margin-bottom: 0;
  margin-right: 0.5rem;
  vertical-align: middle;
}

.badge {
  display: inline-block;
  background: var(--color-accent-light);
  color: var(--color-accent-dark);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  margin-bottom: 0.75rem;
}

/* Testimonials */
.testimonial {
  border-left: 3px solid var(--color-accent);
  padding-left: 1.25rem;
}

.testimonial cite {
  display: block;
  margin-top: 0.75rem;
  font-style: normal;
  font-weight: 600;
  color: var(--color-ink-soft);
  font-size: 0.9rem;
}

/* Lists of links (cams page) */
.link-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 700px) {
  .link-list {
    grid-template-columns: 1fr;
  }
}

.link-list a {
  display: block;
  padding: 1rem 1.25rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--color-ink);
  font-weight: 500;
}

.link-list a:hover {
  border-color: var(--color-accent);
  color: var(--color-accent-dark);
}

.link-list a::after {
  content: " ↗";
  color: var(--color-accent);
}

/* Forms */
form.lead-form {
  display: grid;
  gap: 1rem;
  max-width: 560px;
}

.lead-form label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.35rem;
  font-size: 0.9rem;
}

.lead-form input,
.lead-form textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-paper);
  color: var(--color-ink);
}

.lead-form input:focus,
.lead-form textarea:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.lead-form .field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 600px) {
  .lead-form .field-row {
    grid-template-columns: 1fr;
  }
}

.form-note {
  font-size: 0.85rem;
  color: var(--color-ink-soft);
}

.form-status {
  font-weight: 600;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  display: none;
}

.form-status.success {
  display: block;
  background: var(--color-accent-light);
  color: var(--color-accent-dark);
}

.form-status.error {
  display: block;
  background: #fbe8e8;
  color: #9c2b2b;
}

/* honeypot field, hidden from real users */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Wizard */
.wizard {
  max-width: 560px;
}

.wizard-progress {
  margin-bottom: 1.5rem;
}

.wizard-progress-track {
  background: var(--color-line);
  border-radius: var(--radius);
  height: 8px;
  overflow: hidden;
}

.wizard-progress-fill {
  background: var(--color-accent);
  height: 100%;
  transition: width 0.2s ease;
}

.wizard-progress-label {
  font-size: 0.85rem;
  color: var(--color-ink-soft);
  margin-top: 0.5rem;
}

.wizard-step {
  border: 0;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.wizard-step[hidden],
.lead-form[hidden] {
  display: none;
}

.wizard-step legend {
  padding: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  margin-bottom: 0.25rem;
  outline: none;
}

.wizard-actions {
  display: flex;
  gap: 0.75rem;
}

.plan-option-list {
  display: grid;
  gap: 0.75rem;
}

/* Equal specificity to the browser's default `[hidden] { display: none }`,
   so without this the class's own `display: grid` would win and the list
   would stay visible even while `hidden` -- exactly what toggling it via JS
   needs to work. */
.plan-option-list[hidden] {
  display: none;
}

.plan-confirm {
  border: 1px solid var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent) inset;
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  margin-bottom: 0.75rem;
}

.plan-confirm-label {
  font-size: 0.85rem;
  color: var(--color-ink-soft);
  margin: 0 0 0.15rem;
}

/* Reused from .plan-option-body's span markup, but these are <p>s here, so
   the global `p { margin: 0 0 1em; }` needs overriding to keep them tight. */
.plan-confirm .plan-option-name,
.plan-confirm .plan-option-meta {
  margin: 0 0 0.15rem;
}

.plan-confirm [data-plan-change] {
  margin-top: 0.5rem;
}

.plan-option {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  cursor: pointer;
}

.plan-option:has(input:checked) {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent) inset;
}

.plan-option input {
  width: auto;
  margin: 0;
  flex-shrink: 0;
}

.plan-option-body {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.plan-option-name {
  font-weight: 700;
}

.plan-option-meta {
  font-size: 0.85rem;
  color: var(--color-ink-soft);
}

.cf-turnstile {
  margin: 0.25rem 0 0.75rem;
}

.link-button {
  display: inline-block;
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-accent);
  text-decoration: underline;
  cursor: pointer;
  margin-top: -0.5rem;
  margin-bottom: 0.5rem;
}

.link-button:hover {
  color: var(--color-accent-dark);
}

.wizard-out-of-territory {
  margin-top: 1rem;
  display: grid;
  gap: 1rem;
}

.wizard-out-of-territory[hidden] {
  display: none;
}

.wizard-out-of-territory h2 {
  outline: none;
}

.wizard-success h2 {
  outline: none;
}

.wizard-success-icon {
  margin: 0;
  font-size: 2rem;
  color: var(--color-accent-dark);
}

.wizard-success-links {
  margin: 0;
  padding-left: 1.25rem;
}

/* Blog */
.post-list {
  display: grid;
  gap: 1.75rem;
}

.post-card .post-date {
  font-size: 0.85rem;
  color: var(--color-ink-soft);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.post-body img {
  max-width: 100%;
  border-radius: var(--radius);
  margin: 1.5rem 0;
}

.post-body h2 { margin-top: 1.75rem; }

/* Footer */
.site-footer {
  background: var(--color-footer-bg);
  color: #d7ddd9;
  padding: 3rem 0 2rem;
  margin-top: 3rem;
}

.site-footer a {
  color: #fff;
}

.site-footer .grid {
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 2rem;
}

@media (max-width: 800px) {
  .site-footer .grid {
    grid-template-columns: 1fr;
  }
}

.site-footer h3 {
  color: #fff;
  font-size: 1rem;
}

.site-footer .fine-print {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 1.5rem;
  font-size: 0.85rem;
  color: #9aa79f;
}

img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
}