/* ========================================================
   TechVervo — homepage
   ------------------------------------------------------------
   "THE PERSISTED BENCHMARK"

   The organising idea
   ------------------
   The page is a worksheet with a margin of figures. A rail
   runs down the right of the whole document and never leaves:
   it holds the five published rate-card numbers in the hero,
   the plan you are currently pointing at, the specification
   you are building, the region you picked, what that plan
   covers, the short answers. The sheet on the left is where
   you read; the rail is where the arithmetic is.

   The reason is not decoration. A hosting buyer wants to
   check the number, not admire the layout, so the number is
   given permanent real estate and the writing is given a
   narrow measure. When the two want the same space, the
   writing yields — which is the opposite of the usual
   arrangement and is what makes the page feel like an
   instrument rather than a brochure.

   Every figure is read from /assets/vps-catalog.json or
   produced by TVPrice. The catalog is the single pricing
   source for this site, including /vps/ and /vps/configure/
   (see assets/vps-plans-shared.js). Nothing here invents a
   statistic, a discount or a testimonial.

   Three voices, three jobs
   ------------------------
     Instrument Serif -> the NAME of a thing
     JetBrains Mono   -> a MEASURED VALUE
     Inter            -> a SENTENCE

   Two materials
   -------------
     warm paper   and   deep green-black
   A change of surface always means a change of content.

   Colour discipline: green means "measured or live" and
   nothing else. Never a button fill, never decoration.
   On paper it is the deep variant; on ink the bright one.
   Both clear 4.5:1 against their own surface.

   No glass, no shadows on content, no decorative gradients,
   no cards, no pills. Structure comes from hairlines, rule
   weight and surface, the way a printed schedule works.

   JS CONTRACT (assets/vps-home.js) — load-bearing hooks:
     [data-topbar] [data-nav-toggle] [data-nav-panel]
     [data-auth-cta] [data-year] [data-net-status]
     [data-index] [data-index-link]
     [data-rail] [data-rail-cta] [data-module]
     [data-plans-grid] [data-billing]
     [data-configurator] [data-config-region] [data-config-os]
     [data-config-options] [data-config-slider] [data-config-val]
     [data-included] [data-covers] [data-regions]
     [data-map-svg] [data-map-lines] [data-map-nodes]
     [data-faq-list] [data-hero-*] [data-footer-badges]
     [data-ratecard-foot]
     .reveal
   ======================================================== */

/* ========================================================
   1. TOKENS
   ======================================================== */
:root {
  color-scheme: light;

  /* Paper */
  --paper: #f3efe6;
  --paper-2: #eae4d7; /* sunk */
  --paper-3: #fbf8f2; /* raised */
  --paper-4: #e2dbcb; /* the ruled sheet the schedule sits on */

  /* Ink */
  --ink: #1e1a15;
  --ink-2: #5c5449; /* secondary prose — 6.4:1 on paper */
  --ink-3: #6f6659; /* micro labels — 4.9:1 on paper */
  --ink-3-sunk: #5e564a;
  --rule: #ded4c1;
  --rule-soft: #e7e0d2;
  --rule-2: #c8bc9f;
  --rule-3: #b3a68a;

  /* Ink band */
  --void: #161c17;
  --void-2: #0c110d;
  --void-ink: #eae5d8;
  --void-2nd: #a49c8c; /* 6.4:1 on --void */
  --void-rule: rgba(234, 229, 216, 0.16);
  --void-rule-2: rgba(234, 229, 216, 0.09);

  /* Accents */
  --green: #0e9f6e;
  --green-deep: #0a6b4f; /* measured value on paper */
  --green-lit: #2fd79a; /* measured value on ink */
  --sand: #cdba97;

  --r: 2px;
  --max: 1560px;
  --pad: clamp(1.25rem, 3.2vw, 2.75rem);
  --rail-w: 21.5rem;
  --index-w: 4.75rem;
  --rail-top: 96px;

  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ========================================================
   2. RESET
   ======================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  /* No height:100% and no overflow-x:hidden on body — that pair can
     turn <body> into its own scroll container and detach the page
     scroll from window.scrollY and from anchor navigation. The two
     horizontal scrollers on this page clip their own overflow. */
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  background: var(--paper);
  color: var(--ink);
  letter-spacing: -0.012em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; padding: 0; margin: 0; }
p, h1, h2, h3, h4, dl, dd { margin: 0; }
table { border-collapse: collapse; width: 100%; }

:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 3px; }
.band--ink :focus-visible, .footer :focus-visible { outline-color: var(--sand); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; left: 14px; top: 14px; z-index: 300;
  padding: 10px 16px; background: var(--ink); color: var(--paper-3);
  font-weight: 600; font-size: 14px; border-radius: var(--r);
  transform: translateY(-180%);
  transition: transform 0.14s ease;
}
.skip-link:focus { transform: translateY(0); }

.container {
  width: min(var(--max), 100% - (var(--pad) * 2));
  margin-inline: auto;
}

/* ========================================================
   3. TYPE
   ======================================================== */
.display {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.6rem, 1rem + 4.4vw, 4.2rem);
  line-height: 1;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
.display em, .h2 em { font-style: italic; font-weight: 400; color: var(--green-deep); }
.band--ink .display em, .band--ink .h2 em { color: var(--sand); }

.h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.8rem, 1.1rem + 2.1vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: -0.018em;
  text-wrap: balance;
  max-width: 20ch;
}

.lede {
  font-size: clamp(1.0313rem, 0.98rem + 0.26vw, 1.125rem);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 44ch;
  text-wrap: pretty;
}
.band--ink .lede { color: rgba(234, 229, 216, 0.76); }

.micro {
  display: block;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.band--ink .micro { color: var(--void-2nd); }
.band--sunk .micro { color: var(--ink-3-sunk); }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.head { margin-bottom: clamp(1.75rem, 3vw, 2.75rem); }
.head .h2 { margin-top: 0.85rem; }
.head .lede { margin-top: 1rem; }

.foot-note {
  margin-top: 1.5rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.8;
  color: var(--ink-3);
  max-width: 60ch;
}
.foot-note strong { font-weight: 600; color: var(--ink); }
.band--ink .foot-note { color: var(--void-2nd); }
.band--ink .foot-note strong { color: var(--void-ink); }

.link-arrow {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  margin-top: 0.9rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--green-deep);
  border-bottom: 1px solid var(--rule-2);
  padding-bottom: 2px;
  transition: color 0.15s ease, border-color 0.15s ease, gap 0.15s ease;
}
.link-arrow:hover { color: var(--ink); border-color: var(--ink); gap: 0.7rem; }
.band--ink .link-arrow { color: var(--sand); border-color: var(--void-rule); }
.band--ink .link-arrow:hover { color: var(--void-ink); border-color: var(--sand); }

/* ========================================================
   4. BUTTONS — ink, never green. Square: this is equipment.
   ======================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.7rem 1.3rem;
  border: 1px solid var(--ink);
  border-radius: var(--r);
  background: var(--ink);
  color: var(--paper-3);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.008em;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn:hover { background: #0e0b08; border-color: #0e0b08; color: #fff; }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule-2); }
.btn--ghost:hover { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--lg { padding: 0.92rem 1.6rem; font-size: 0.9375rem; }

.band--ink .btn, .footer .btn {
  background: var(--void-ink); border-color: var(--void-ink); color: var(--void);
}
.band--ink .btn:hover, .footer .btn:hover { background: #fff; border-color: #fff; color: #060907; }
.band--ink .btn--ghost, .footer .btn--ghost {
  background: transparent; color: var(--void-ink); border-color: var(--void-rule);
}
.band--ink .btn--ghost:hover, .footer .btn--ghost:hover {
  background: transparent; color: #fff; border-color: var(--void-ink);
}

/* ========================================================
   5. SURFACES
   ======================================================== */
.band { padding: clamp(2.75rem, 4.5vw, 4.25rem) 0; position: relative; }
.sheet > .band { padding-inline: clamp(1rem, 1.5vw, 1.5rem); }
.band--paper { background: var(--paper); }
.band--sunk { background: var(--paper-2); }
.band--ruled { background: var(--paper-4); border-block: 1px solid var(--rule-2); }
.band--ink {
  background: var(--void);
  color: var(--void-ink);
  border-top: 1px solid var(--void-rule);
  overflow: hidden;
  isolation: isolate;
}
/* A hairline survey grid, barely there: structure, not texture. */
.band--ink::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(234, 229, 216, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(234, 229, 216, 0.04) 1px, transparent 1px);
  background-size: 88px 88px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 60%);
  mask-image: linear-gradient(180deg, #000, transparent 60%);
}

/* ========================================================
   6. ANNOUNCEMENT + MASTHEAD
   ======================================================== */
.announce { background: var(--ink); color: var(--paper-3); font-size: 0.8125rem; }
.announce__inner { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0; flex-wrap: wrap; }
.announce strong { font-weight: 600; }
.announce__tag {
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--void);
  background: var(--sand);
  padding: 0.15rem 0.4rem;
  border-radius: 1px;
}
.announce__inner a {
  font-family: var(--mono);
  font-size: 0.75rem;
  border-bottom: 1px solid var(--void-rule);
  margin-left: auto;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.announce__inner a:hover { color: var(--sand); border-color: var(--sand); }

.masthead {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  transition: box-shadow 0.2s ease;
}
.masthead[data-scrolled="true"] {
  box-shadow: 0 1px 0 var(--rule-2), 0 10px 24px -22px rgba(30, 26, 21, 0.7);
}
.masthead__row { display: flex; align-items: center; gap: 1.5rem; min-height: 62px; padding-block: 0.6rem; }

.brand { display: inline-flex; align-items: center; gap: 0.55rem; flex: none; padding: 0.2rem 0; }
.brand__mark { width: 22px; height: 22px; flex: none; background: var(--ink); position: relative; border-radius: 1px; }
.brand__mark::after {
  content: "";
  position: absolute; inset: 6px 4px;
  background: var(--paper);
  clip-path: polygon(0 0, 100% 0, 62% 50%, 100% 50%, 22% 100%, 42% 50%, 0 50%);
}
.brand__name { font-family: var(--serif); font-size: 1.35rem; letter-spacing: -0.012em; line-height: 1; }

.masthead__status {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.masthead__status b { font-weight: 600; color: var(--ink); }
.masthead__status:empty { display: none; }
@media (max-width: 1279px) { .masthead__status { display: none; } }

.masthead__actions { display: flex; align-items: center; gap: 0.5rem; flex: none; }
.masthead__actions .btn { padding: 0.5rem 0.95rem; font-size: 0.8125rem; }

.nav { display: none; }
.nav__toggle { display: none; }
.nav__panel { display: flex; align-items: center; gap: 1.25rem; }
.nav__group { display: flex; align-items: center; gap: 0.9rem; }
.nav__groupLabel {
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rule-3);
}
.nav__link {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-2);
  padding: 0.2rem 0;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.nav__link:hover { color: var(--ink); border-bottom-color: var(--ink); }
.nav__cta { display: flex; align-items: center; gap: 0.5rem; }

/* ========================================================
   7. THE FRAME — index | sheet | rail
   ======================================================== */
.frame {
  display: grid;
  grid-template-columns: var(--index-w) minmax(0, 1fr) var(--rail-w);
  gap: 0 clamp(2rem, 3vw, 3.25rem);
  align-items: start;
}
.sheet { min-width: 0; }

/* Hero full-bleed: while the hero is the section being read the frame
   drops the rail column and the rail steps out, so the hero band runs
   to the page edge. Scoped to the widths where the rail is a true right
   sidebar (> 1080px); below that it is a fixed bottom instrument. */
@media (min-width: 1081px) {
  .frame--hero .rail { display: none; }
}
@media (min-width: 1201px) {
  .frame--hero { grid-template-columns: var(--index-w) minmax(0, 1fr); }
}
@media (min-width: 1081px) and (max-width: 1200px) {
  .frame--hero { grid-template-columns: minmax(0, 1fr); }
}

/* --- index rail --- */
.index {
  position: sticky;
  top: var(--rail-top);
  align-self: start;
  padding: 2.25rem 0 0;
}
.index__list { border-left: 1px solid var(--rule); }
.index__link {
  display: block;
  padding: 0.45rem 0 0.45rem 0.85rem;
  margin-left: -1px;
  border-left: 2px solid transparent;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.index__link i { font-style: normal; display: block; font-size: 0.625rem; color: var(--rule-3); }
.index__link span { display: block; margin-top: 0.1rem; }
.index__link:hover { color: var(--ink); }
.index__link[aria-current="true"] { color: var(--ink); border-left-color: var(--green-deep); }
.index__link[aria-current="true"] i { color: var(--green-deep); }

/* ========================================================
   8. THE RAIL — the primary object
   ======================================================== */
.rail {
  position: sticky;
  top: var(--rail-top);
  align-self: start;
  max-height: calc(100vh - var(--rail-top) - 2rem);
  overflow-y: auto;
  scrollbar-width: thin;
  padding: 2.25rem 0 1rem;
  border-left: 1px solid var(--rule);
  padding-left: clamp(1.25rem, 2vw, 1.75rem);
}
.rail__inner { position: relative; }

.mod { display: none; }
.mod[data-active="true"] { display: block; animation: mod-in 0.28s ease both; }
@keyframes mod-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.mod__label {
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--rule);
}
.mod__head {
  font-family: var(--serif);
  font-size: 2.4rem;
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin-top: 0.9rem;
  overflow-wrap: anywhere;
}
.mod__head--sm {
  font-family: var(--mono);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.mod__head span { font-size: 0.42em; letter-spacing: 0; color: var(--ink-3); margin-left: 0.15em; }
.mod__head--price {
  font-family: var(--mono);
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.035em;
  color: var(--green-deep);
}
.mod__sub {
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--ink-3);
  margin-top: 0.45rem;
}

.mod__rows { margin-top: 1.1rem; border-top: 1px solid var(--rule); }
.mod__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.mod__row b { font-weight: 600; color: var(--ink); text-align: right; }
.mod__row--total { border-bottom: 2px solid var(--ink); }
.mod__row--total b { color: var(--green-deep); font-size: 0.9375rem; }
.mod__row--formula { color: var(--ink-2); }
.mod__row--formula b { color: var(--ink-2); font-weight: 400; }

.mod__list { margin-top: 1rem; border-top: 1px solid var(--rule); }
.mod__list li {
  display: flex;
  gap: 0.6rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--ink);
}
.mod__list li::before {
  content: counter(moditem, decimal-leading-zero);
  counter-increment: moditem;
  font-family: var(--mono);
  font-size: 0.625rem;
  color: var(--ink-3);
  flex: none;
  padding-top: 0.15rem;
}
.mod__list { counter-reset: moditem; }

.rail__foot { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.rail__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0.9rem;
  background: var(--ink);
  color: var(--paper-3);
  border: 1px solid var(--ink);
  font-size: 0.8125rem;
  font-weight: 600;
  transition: background 0.15s ease, color 0.15s ease;
}
.rail__cta:hover { background: #0e0b08; color: #fff; }
.rail__ctaArrow { transition: transform 0.15s ease; }
.rail__cta:hover .rail__ctaArrow { transform: translateX(3px); }
.rail__note {
  margin-top: 0.7rem;
  font-family: var(--mono);
  font-size: 0.625rem;
  line-height: 1.6;
  color: var(--ink-3);
}

/* ========================================================
   9. HERO
   ======================================================== */
.hero {
  padding-top: clamp(2.5rem, 4vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 4vw, 3.5rem);
  /* Full-bleed hero art: the server illustration anchors to the
     right, a paper gradient keeps the copy column on the left clean. */
  display: flex;
  align-items: center;
  min-height: clamp(22rem, 42vh, 34rem);
  background-image:
    linear-gradient(90deg, var(--paper) 0%, rgba(243, 239, 230, 0.97) 36%, rgba(243, 239, 230, 0.62) 100%),
    url('/assets/hero-bg.jpeg');
  background-size: auto, cover;
  background-position: left center, right center;
  background-repeat: no-repeat;
}
.hero__copy { max-width: 46rem; }

/* Mobile: drop the art, let the copy breathe on plain paper. */
@media (max-width: 760px) {
  .hero {
    display: block;
    min-height: 0;
    background-image: none;
  }
}
.hero .micro { margin-bottom: 1.5rem; }
.hero .display { max-width: 13ch; }
.hero .lede { margin-top: 1.4rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-top: 1.9rem; }
.hero__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem 2rem;
  margin-top: 2.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
}
.hero__facts dt {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.hero__facts dd {
  font-family: var(--mono);
  font-size: 0.9375rem;
  font-weight: 500;
  margin-top: 0.2rem;
  font-variant-numeric: tabular-nums;
}

/* ========================================================
   10. THE SCHEDULE
   Seven columns. The rates live in the rail, so a row does
   not repeat the five published numbers for the sixth time.
   ======================================================== */
.billing {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.billing__label { flex: none; }
.billing__set { display: inline-flex; border: 1px solid var(--rule-2); border-radius: var(--r); overflow: hidden; background: var(--paper-3); }
.billing__opt {
  appearance: none;
  border: 0;
  border-right: 1px solid var(--rule);
  background: transparent;
  padding: 0.5rem 0.9rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  transition: background 0.15s ease, color 0.15s ease;
}
.billing__opt:last-child { border-right: 0; }
.billing__opt:hover { background: var(--paper-2); }
.billing__opt[aria-pressed="true"] { background: var(--ink); color: var(--paper-3); }
.billing__opt span { font-size: 0.625rem; color: var(--ink-3); }
.billing__opt[aria-pressed="true"] span { color: var(--sand); }

/* The unit is stated per plan by the backoffice, so it travels with the
   number instead of being committed to in the column header. */
.sched__cell b { display: block; font-weight: 600; }
.sched__cell small {
  display: block;
  margin-top: 0.12rem;
  font-family: var(--mono);
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.sched-wrap { overflow-x: auto; }
.sched { border-top: 2px solid var(--ink); }
.sched__row { position: relative; border-bottom: 1px solid var(--rule-2); transition: background 0.15s ease; }
.sched thead th {
  padding: 0.6rem 0.6rem 0.55rem 0;
  text-align: right;
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3-sunk);
  border-bottom: 1px solid var(--ink);
  white-space: nowrap;
  vertical-align: bottom;
}
.sched thead th:first-child { text-align: left; padding-left: 0; }
.sched thead th:last-child { padding-right: 0; }
.sched thead th small { display: block; font-size: 0.5625rem; font-weight: 500; letter-spacing: 0.08em; color: var(--rule-3); margin-top: 0.2rem; }

.sched tbody td {
  padding: 0.8rem 0.6rem 0.8rem 0;
  text-align: right;
  vertical-align: baseline;
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  white-space: nowrap;
}
.sched tbody td:first-child { text-align: left; padding-left: 0; }
.sched tbody td:last-child { padding-right: 0; width: 1%; }

.sched__plan { position: relative; display: block; }
.sched__plan::after { content: ""; position: absolute; inset: -0.8rem -0.75rem -0.8rem -0.9rem; }
.sched__name {
  font-family: var(--serif);
  font-size: 1.4rem;
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--ink);
  display: block;
}
.sched__tagline {
  display: block;
  font-family: var(--sans);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--ink-2);
  margin-top: 0.2rem;
  max-width: 24rem;
  white-space: normal;
}
.sched__flag {
  display: inline-block;
  margin-top: 0.3rem;
  font-family: var(--mono);
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--green-deep);
}
/* The featured plan is marked in the margin, not filled. */
.sched__row--marked td:first-child::before {
  content: "";
  position: absolute;
  left: -0.9rem; top: 0.6rem; bottom: 0.6rem;
  width: 2px;
  background: var(--green-deep);
}
.sched__row:hover, .sched__row:focus-within { background: rgba(255, 255, 255, 0.55); }
.sched__row:hover .sched__name, .sched__row:focus-within .sched__name { text-decoration: underline; text-underline-offset: 3px; text-underline-thickness: 1px; }
.sched__row[data-active="true"] { background: rgba(255, 255, 255, 0.75); }

.sched__price b { font-weight: 600; font-size: 1.125rem; letter-spacing: -0.03em; color: var(--ink); }
.sched__billed { display: block; font-size: 0.625rem; color: var(--ink-3-sunk); margin-top: 0.2rem; }
.sched__go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem; height: 2rem;
  border: 1px solid var(--rule-2);
  border-radius: var(--r);
  color: var(--ink-2);
  font-size: 0.875rem;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.sched__row:hover .sched__go { background: var(--ink); border-color: var(--ink); color: var(--paper-3); }
.sched__empty { padding: 2.25rem 0; font-family: var(--mono); font-size: 0.8125rem; color: var(--ink-2); }

@media (min-width: 1081px) {
  .sched { min-width: 660px; }
  .sched-wrap { margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); }
}

/* ========================================================
   11. THE BUILDER — controls only; the receipt is the rail
   ======================================================== */
.bank { border-top: 1px solid var(--void-rule); padding-top: 1rem; }
.bank + .bank { margin-top: 1.5rem; }
.bank__label { margin-bottom: 0.7rem; }

.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip span {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--void-rule);
  border-radius: var(--r);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--void-2nd);
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.chip span em { font-style: normal; font-size: 0.5625rem; letter-spacing: 0.08em; opacity: 0.75; }
.chip:hover span { border-color: var(--void-2nd); color: var(--void-ink); }
.chip input:checked + span { background: var(--void-ink); border-color: var(--void-ink); color: var(--void); }
.chip input:checked + span em { color: var(--green-deep); opacity: 1; }
.chip input:focus-visible + span { outline: 2px solid var(--sand); outline-offset: 2px; }

/* A works-order control: an engraved track of ticks with a hard
   rectangular handle. A restyled range input, so keyboard and
   assistive support come for free. */
.qty { border-top: 1px solid var(--void-rule-2); }
.qty__row {
  display: grid;
  grid-template-columns: 6.5rem minmax(5rem, 1fr) 5.5rem 6.5rem 4.5rem;
  align-items: center;
  gap: 0 1rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--void-rule-2);
}
.qty__name {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--void-ink);
}
.qty__name small { display: block; font-weight: 400; font-size: 0.625rem; letter-spacing: 0.02em; text-transform: none; color: var(--void-2nd); margin-top: 0.1rem; }

.qty__track { position: relative; height: 20px; }
.qty__ticks {
  position: absolute; inset: 0;
  color: var(--void-rule);
  background-image: repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px calc(100% / var(--ticks, 4)));
}
.qty__fill {
  position: absolute; left: 0; top: 4px; bottom: 4px;
  width: var(--fill, 0%);
  background: var(--green-lit);
  opacity: 0.55;
  transition: width 0.08s linear;
}
.qty__track input[type="range"] {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0; padding: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.qty__track input[type="range"]::-webkit-slider-runnable-track { height: 100%; background: transparent; }
.qty__track input[type="range"]::-moz-range-track { height: 100%; background: transparent; }
.qty__track input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 3px; height: 22px;
  background: var(--void-ink);
  border: 0; border-radius: 0;
  margin-top: -1px;
  box-shadow: 0 0 0 1px rgba(12, 17, 13, 0.7);
}
.qty__track input[type="range"]::-moz-range-thumb {
  width: 3px; height: 22px;
  background: var(--void-ink);
  border: 0; border-radius: 0;
  box-shadow: 0 0 0 1px rgba(12, 17, 13, 0.7);
}
.qty__track input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--sand); outline-offset: 2px; }
.qty__track input[type="range"]:focus-visible::-moz-range-thumb { outline: 2px solid var(--sand); outline-offset: 2px; }

.qty__value {
  font-family: var(--mono);
  font-size: 1rem;
  font-weight: 600;
  color: var(--void-ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.qty__value span { font-size: 0.6875rem; font-weight: 400; color: var(--void-2nd); margin-left: 0.2rem; }
.qty__rate { font-family: var(--mono); font-size: 0.6875rem; color: var(--void-2nd); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.qty__line { font-family: var(--mono); font-size: 0.9375rem; font-weight: 600; color: var(--green-lit); text-align: right; font-variant-numeric: tabular-nums; }

.builder__foot {
  margin-top: 1.25rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  line-height: 1.8;
  color: var(--void-2nd);
  max-width: 56ch;
}

/* ========================================================
   12. INCLUDED — three ruled columns of hanging definitions
   ======================================================== */
.groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(1.5rem, 2.6vw, 2.5rem);
  border-top: 2px solid var(--ink);
}
.group { padding: 1.2rem 0 0; }
.group + .group { border-left: 1px solid var(--rule); padding-left: clamp(1.25rem, 2vw, 2rem); }
.group__title {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--rule);
}
.group__title span { color: var(--ink-3); font-weight: 500; }

.def { padding: 0.8rem 0; border-bottom: 1px solid var(--rule-soft); }
.def:last-child { border-bottom: 0; }
.def__top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; }
.def__term { font-size: 0.9063rem; font-weight: 600; letter-spacing: -0.01em; }
.def__ref { font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.1em; color: var(--rule-3); flex: none; }
.def__text { font-size: 0.8125rem; line-height: 1.55; color: var(--ink-2); margin-top: 0.22rem; text-wrap: pretty; }
.def__price { font-family: var(--mono); font-size: 0.75rem; font-weight: 600; color: var(--green-deep); flex: none; }
.def__only { font-family: var(--mono); font-size: 0.625rem; color: var(--ink-3); letter-spacing: 0.03em; }

.groups__unavailable, .atlas__unavailable {
  grid-column: 1 / -1;
  padding: 1.5rem 0;
  font-size: 0.9375rem;
  color: var(--ink-2);
  max-width: 40ch;
}

/* ========================================================
   13. ATLAS
   ======================================================== */
.atlas__plot { position: relative; margin-top: 0.5rem; }
.atlas__svg { width: 100%; height: auto; display: block; }
.atlas__cartouche {
  position: absolute;
  left: 0; bottom: 4%;
  max-width: 21rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--void-rule);
  background: var(--void-2);
}
.atlas__cartoucheTitle {
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--void-ink);
  padding-bottom: 0.55rem;
  margin-bottom: 0.55rem;
  border-bottom: 1px solid var(--void-rule-2);
}
.atlas__legendRow {
  display: flex; align-items: baseline; gap: 0.55rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  line-height: 1.5;
  color: var(--void-2nd);
  padding: 0.15rem 0;
}
.atlas__glyph { flex: none; width: 1.4rem; height: 1px; background: var(--void-rule); position: relative; top: -0.3em; }
.atlas__glyph--route { background: repeating-linear-gradient(90deg, var(--void-2nd) 0 3px, transparent 3px 6px); }
.atlas__glyph--node { height: 9px; width: 9px; border-radius: 50%; border: 1px solid var(--green-lit); background: rgba(47, 215, 154, 0.18); top: -0.05em; }

.infra-line { stroke: var(--void-rule); stroke-width: 1; stroke-dasharray: 3 4; }
.map-leader { stroke: var(--void-rule-2); stroke-width: 1; }
.map-node__hit { fill: var(--green-lit); opacity: 0.1; }
.map-node__ring { fill: none; stroke: var(--green-lit); stroke-width: 1; opacity: 0.5; }
.map-node__core { fill: var(--green-lit); }
.map-node__code { fill: var(--void-ink); font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; }
.map-node__count { fill: var(--void-2nd); font-family: var(--mono); font-size: 9px; letter-spacing: 0.04em; }

.regions { margin-top: clamp(1.5rem, 2.5vw, 2.25rem); }
.regions__head, .regions__row {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1.2fr) minmax(0, 1fr) 5.5rem 4.5rem 4.5rem;
  gap: 0.75rem;
  align-items: baseline;
}
.regions__head {
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--void-rule);
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--void-2nd);
}
.regions__row {
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--void-rule-2);
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--void-2nd);
  font-variant-numeric: tabular-nums;
}
.regions__row:last-child { border-bottom: 0; }
.regions__code { color: var(--void-ink); font-weight: 600; letter-spacing: 0.06em; }
.regions__city { color: var(--void-ink); font-family: var(--sans); font-size: 0.875rem; font-weight: 500; }
.regions__n { text-align: right; }
.regions__n b { color: var(--green-lit); font-weight: 600; }
.regions__meta { display: none; }
.regions__gauge { display: none; }
.regions__gauge { height: 3px; background: var(--void-rule-2); }
.regions__gauge i { display: block; height: 100%; width: var(--gauge, 0%); background: var(--green-lit); opacity: 0.65; }

/* ========================================================
   14. THE RANGE + WHAT EACH PLAN COVERS
   ======================================================== */
.range {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 3.5vw, 3rem);
  align-items: start;
}
.range__list { border-top: 2px solid var(--ink); }
.range__item {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: 0.9rem 1rem;
  align-items: baseline;
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule);
}
.range__num { font-family: var(--mono); font-size: 0.6875rem; color: var(--rule-3); letter-spacing: 0.08em; }
.range__name { font-family: var(--serif); font-size: 1.375rem; line-height: 1.15; letter-spacing: -0.012em; }
.range__desc { font-size: 0.875rem; line-height: 1.55; color: var(--ink-2); margin-top: 0.28rem; max-width: 42ch; }
.range__go { grid-column: 2; font-family: var(--mono); font-size: 0.75rem; color: var(--green-deep); }
.range__go span { display: inline-block; transition: transform 0.15s ease; }
.range__go:hover span { transform: translateX(3px); }

.covers { border-top: 2px solid var(--ink); }
.covers__title { padding: 0.8rem 0 0.6rem; }
.covers__list { border-top: 1px solid var(--rule); }
.covers__item {
  display: block;
  width: 100%;
  text-align: left;
  appearance: none;
  border: 0;
  border-bottom: 1px solid var(--rule-soft);
  background: transparent;
  padding: 0.7rem 0;
  cursor: pointer;
  transition: background 0.15s ease;
}
.covers__item:hover, .covers__item:focus-visible { background: rgba(255, 255, 255, 0.5); }
.covers__plan { display: block; font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-3); }
.covers__use { display: block; font-size: 0.875rem; color: var(--ink); margin-top: 0.25rem; line-height: 1.45; }
.covers__item[data-active="true"] { background: rgba(255, 255, 255, 0.7); }
.covers__item[data-active="true"] .covers__plan { color: var(--green-deep); }

/* ========================================================
   15. QUESTIONS — printed open in two columns
   ======================================================== */
.qa {
  columns: 2;
  column-gap: clamp(1.75rem, 3.5vw, 3rem);
  column-rule: 1px solid var(--rule);
  border-top: 2px solid var(--ink);
  padding-top: 0.4rem;
}
.qa__item { break-inside: avoid; padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.qa__q { display: flex; gap: 0.55rem; font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.012em; line-height: 1.35; }
.qa__q i { font-style: normal; font-family: var(--mono); font-size: 0.6875rem; font-weight: 500; color: var(--ink-3); flex: none; padding-top: 0.2rem; }
.qa__a { font-size: 0.8438rem; line-height: 1.6; color: var(--ink-2); margin-top: 0.4rem; padding-left: 1.5rem; text-wrap: pretty; }

/* ========================================================
   16. CLOSE
   ======================================================== */
.close .display { max-width: 16ch; }
.close .lede { margin-top: 1.25rem; }
.close__actions { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-top: 1.75rem; }

/* ========================================================
   17. FOOTER
   ======================================================== */
.footer { background: var(--void); color: var(--void-ink); border-top: 1px solid var(--void-rule); padding: clamp(2.25rem, 4vw, 3.25rem) 0 1.5rem; }
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: clamp(2rem, 4vw, 4rem);
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--void-rule);
}
.footer__brand .brand__mark { background: var(--void-ink); }
.footer__brand .brand__mark::after { background: var(--void); }
.footer__brand p { margin-top: 0.9rem; font-size: 0.875rem; line-height: 1.6; color: var(--void-2nd); max-width: 30rem; }
.footer__badges {
  margin-top: 1.1rem;
  display: flex; flex-wrap: wrap; gap: 0.35rem 0.5rem;
  font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--void-2nd);
}
.footer__badges span { border: 1px solid var(--void-rule); padding: 0.2rem 0.45rem; border-radius: 1px; }
.footer__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
.footer__head {
  font-family: var(--mono); font-size: 0.625rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--void-2nd); margin-bottom: 0.8rem;
}
.footer__link { display: block; font-size: 0.8438rem; line-height: 1.5; color: rgba(234, 229, 216, 0.78); padding: 0.35rem 0; transition: color 0.15s ease; }
.footer__link:hover { color: var(--void-ink); }
.footer__bottom {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem; padding-top: 1.35rem;
  font-family: var(--mono); font-size: 0.6875rem; color: var(--void-2nd);
}
.footer__legal { display: flex; gap: 1.25rem; }
.footer__social { display: flex; gap: 0.1rem; }
.footer__social a { color: var(--void-2nd); padding: 0.5rem; transition: color 0.15s ease; }
.footer__social a:hover { color: var(--void-ink); }
.footer__social svg { width: 16px; height: 16px; }

.reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal[data-visible="true"] { opacity: 1; transform: none; }

/* ========================================================
   18. RESPONSIVE
   The rail never disappears: below 1080px it becomes one
   fixed bar carrying the same headline figure, because the
   one thing a phone user should never lose sight of on this
   page is what it costs.
   ======================================================== */
@media (max-width: 1400px) {
  :root { --rail-w: 19.5rem; --index-w: 4.25rem; }
}

@media (max-width: 1279px) {
  :root { --index-w: 0px; }
  .frame { grid-template-columns: minmax(0, 1fr) var(--rail-w); }
  .index { display: none; }
}

@media (max-width: 1080px) {
  :root { --max: 100%; --rail-top: 0px; }
  .frame { grid-template-columns: minmax(0, 1fr); }
  .sheet { padding-bottom: 5.5rem; } /* room for the fixed instrument */

  .rail {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    top: auto;
    z-index: 90;
    max-height: none;
    overflow: visible;
    padding: 0;
    border-left: 0;
    border-top: 1px solid var(--rule-2);
    background: var(--paper);
    box-shadow: 0 -1px 0 var(--rule-2), 0 -12px 28px -26px rgba(30, 26, 21, 0.8);
  }
  .rail__inner {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.6rem var(--pad) max(0.75rem, calc(0.6rem + env(safe-area-inset-bottom)));
  }
  /* The bar shows the module's label and headline figure — the
     detail rows stay in the sheet, where there is room for them. */
  .mod { display: none; }
  .mod[data-active="true"] { display: block; flex: 1 1 auto; min-width: 0; animation: none; }
  .mod__label {
    border-bottom: 0;
    padding-bottom: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.5625rem;
    letter-spacing: 0.12em;
  }
  .mod__head { font-size: 1.0625rem; margin-top: 0.15rem; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mod__head--sm { font-size: 0.9375rem; }
  .mod__sub, .mod__rows, .mod__list { display: none; }

  .rail__foot { margin: 0; padding: 0; border: 0; flex: none; }
  .rail__cta { padding: 0.55rem 0.8rem; white-space: nowrap; }
  .rail__note { display: none; }

  .groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .group:nth-child(3) { border-left: 0; padding-left: 0; }
  .range { grid-template-columns: minmax(0, 1fr); }
  .footer__top { grid-template-columns: minmax(0, 1fr); }
  .nav { display: block; margin-left: auto; }

  .qty__row {
    grid-template-columns: 4.25rem minmax(4rem, 1fr) auto;
    grid-template-areas: "name track value" "rate track line";
    row-gap: 0.15rem; column-gap: 0.75rem;
  }
  .qty__name { grid-area: name; }
  .qty__name small { display: none; }
  .qty__track { grid-area: track; }
  .qty__value { grid-area: value; }
  .qty__rate { grid-area: rate; text-align: left; }
  .qty__line { grid-area: line; }
}

/* --- nav becomes a panel --- */
@media (max-width: 1080px) {
  .nav__toggle {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 40px; height: 40px;
    margin-left: 0.25rem;
    border: 1px solid var(--rule-2);
    border-radius: var(--r);
    background: transparent;
    cursor: pointer;
  }
  .nav__toggleBars, .nav__toggleBars::before, .nav__toggleBars::after { display: block; width: 16px; height: 1.5px; background: var(--ink); }
  .nav__toggleBars { position: relative; }
  .nav__toggleBars::before, .nav__toggleBars::after { content: ""; position: absolute; left: 0; }
  .nav__toggleBars::before { top: -5px; }
  .nav__toggleBars::after { top: 5px; }
  .nav__toggle[aria-expanded="true"] .nav__toggleBars { background: transparent; }
  .nav__toggle[aria-expanded="true"] .nav__toggleBars::before { top: 0; transform: rotate(45deg); }
  .nav__toggle[aria-expanded="true"] .nav__toggleBars::after { top: 0; transform: rotate(-45deg); }

  .nav__panel {
    display: none;
    position: fixed; inset: 0; top: 0; z-index: 200;
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0;
    padding: clamp(1.25rem, 5vw, 2.5rem) var(--pad) 2rem;
    background: var(--paper);
    overflow-y: auto;
  }
  .nav__panel[data-open="true"] { display: flex; }
  .nav__panel .nav__group { display: block; border-left: 0; padding-left: 0; }
  .nav__groupLabel { display: block; margin: 1.5rem 0 0.4rem; }
  .nav__group:first-of-type .nav__groupLabel { margin-top: 3.5rem; }
  .nav__link { display: block; font-size: 1.25rem; font-weight: 600; padding: 0.5rem 0; letter-spacing: -0.015em; }
  .nav__cta { margin-top: auto; padding-top: 2rem; gap: 0.6rem; }
  .nav__cta .btn { flex: 1 1 0; }
}

/* --- the schedule breaks into priced blocks --- */
@media (max-width: 700px) {
  html { scroll-padding-top: 78px; }
  .masthead__row { min-height: 56px; }
  .masthead__actions .btn--ghost { display: none; }
  .masthead__actions { margin-left: auto; }
  .masthead__actions .btn { padding: 0.5rem 0.9rem; }
  .announce__inner { font-size: 0.75rem; }
  .announce__inner a { margin-left: 0; }

  .head .h2 { max-width: none; }
  .head .lede { max-width: none; }
  .hero .display { max-width: none; }
  .hero__actions .btn { flex: 1 1 auto; }
  .hero__facts { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }

  .billing { gap: 0.5rem; }
  .billing__set { display: flex; width: 100%; }
  .billing__opt { flex: 1 1 0; justify-content: center; padding: 0.55rem 0.35rem; }

  .sched thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sched, .sched__row, .sched__row td { display: block; }
  .sched-wrap { overflow: visible; }
  .sched { min-width: 0; }
  .sched__row { padding: 1.05rem 0 1.05rem 0.85rem; }
  .sched__row td { padding: 0; text-align: left; white-space: normal; }
  .sched__row--marked td:first-child::before { left: 0; top: 1.05rem; bottom: 1.05rem; }
  .sched__plan { position: static; }
  .sched__plan::after { inset: 0; }
  .sched__name { font-size: 1.6rem; }
  .sched__tagline { max-width: none; }
  .sched__cell { display: inline-block; width: 7.5rem; margin-bottom: 0.7rem; vertical-align: top; }
  .sched__row td.sched__cell { display: inline-block; }
  .sched__cell::before {
    content: attr(data-label);
    display: block;
    font-family: var(--mono);
    font-size: 0.5625rem; font-weight: 600;
    letter-spacing: 0.11em; text-transform: uppercase;
    color: var(--ink-3-sunk);
    margin-bottom: 0.15rem;
  }
  .sched__price { text-align: right !important; }
  .sched__price b { display: inline-block; font-size: 1.5rem; }
  .sched__billed { display: inline-block; margin-left: 0.5rem; }
  .sched__go { position: absolute; right: 0; top: 1.05rem; }
  .sched__empty { display: block; }

  .groups { grid-template-columns: minmax(0, 1fr); }
  .group + .group { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); }
  .qa { columns: 1; }
  .qa__a { padding-left: 0; }

  .atlas__plot { display: none; }
  .atlas__unavailable { font-family: var(--mono); font-size: 0.8125rem; color: var(--void-2nd); }
  .regions__head { display: none; }
  .regions__row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "code n" "city city" "gauge gauge" "meta meta";
    row-gap: 0.4rem;
    padding: 0.85rem 0;
  }
  .regions__country, .regions__lat, .regions__net { display: none; }
  .regions__code { grid-area: code; }
  .regions__city { grid-area: city; }
  .regions__n { grid-area: n; }
  .regions__gauge { display: block; grid-area: gauge; }
  .regions__meta { display: block; grid-area: meta; font-size: 0.6875rem; color: var(--void-2nd); }
  .regions__meta span + span::before { content: " · "; }

  .range__item { grid-template-columns: 2rem minmax(0, 1fr); }
  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
}

@media (pointer: coarse) {
  .billing__opt, .chip span, .rail__cta { padding-block: 0.7rem; }
  .qty__track { height: 28px; }
  .qty__track input[type="range"]::-webkit-slider-thumb { height: 30px; margin-top: -4px; }
  .qty__track input[type="range"]::-moz-range-thumb { height: 30px; }
  .qty__row { padding: 1rem 0; }
  .index__link, .link-arrow, .range__go, .covers__item, .footer__link { padding-block: 0.45rem; }
  .announce__inner a { padding: 0.5rem 0; }
}

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

@media print {
  .announce, .masthead, .index, .rail, .sched__go, .builder__foot, .footer { display: none !important; }
  body { background: #fff; color: #000; }
  .frame { grid-template-columns: 1fr; }
  .band { padding: 1rem 0; page-break-inside: avoid; }
  .band--ink { background: #fff; color: #000; }
  .band--ink .lede, .band--ink .micro { color: #000; }
}