/* ========================================================
   TechVervo — /vps/ plan register
   ------------------------------------------------------------
   The register is the second sheet of the homepage worksheet.
   Same material, same three type voices, same rule: a serif
   name, a mono measured value, a sans sentence. It loads its
   own stylesheet rather than home.css / pricing.css / vps.css
   so that the page is one system rather than five layered
   ones, and so nothing here can leak into /pricing/ or the
   checkout, which share those files.

   The object
   ---------
   A comparison MATRIX: one row per published attribute, one
   column per plan, with the selection living in the column.
   A register is a table, so it is a real <table> with column
   and row headers, and it is a real radio group. Nothing on
   this page is a card, and nothing is a rounded box.

   Why a matrix and not six columns of stacked cards: a card
   asks you to compare six things by flicking between them. A
   matrix puts all six in the same row, so the eye compares
   down a row rather than across a screen.

   On a narrow screen the matrix cannot survive, so it is
   re-laid-out — not squeezed — as one ruled block per plan in
   the same catalog order. The reading order is the point.

   Colour discipline: green is a measured or live value and
   nothing else. Never a button fill, never decoration.

   Load-bearing hooks (assets/vps-register.js):
     [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-text] [data-module]
     [data-plans-grid] [data-billing]
     [data-picked*] [data-included] [data-reg-foot]
     [data-f-plans] [data-f-regions] [data-f-images]
   ======================================================== */

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

  --paper: #f3efe6;
  --paper-2: #eae4d7;
  --paper-3: #fbf8f2;
  --paper-4: #e2dbcb; /* the ruled sheet the register sits on */

  --ink: #1e1a15;
  --ink-2: #5c5449;
  --ink-3: #6f6659;
  --ink-3-sunk: #5e564a;
  --rule: #ded4c1;
  --rule-soft: #e7e0d2;
  --rule-2: #c8bc9f;
  --rule-3: #b3a68a;

  --void: #161c17;
  --void-2: #0c110d;
  --void-ink: #eae5d8;
  --void-2nd: #a49c8c;
  --void-rule: rgba(234, 229, 216, 0.16);
  --void-rule-2: rgba(234, 229, 216, 0.09);

  --green: #0e9f6e;
  --green-deep: #0a6b4f;
  --green-lit: #2fd79a;
  --sand: #cdba97;

  --r: 2px;
  --max: 1560px;
  --pad: clamp(1.25rem, 3.2vw, 2.75rem);
  --rail-w: 21.5rem;
  --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 body overflow-x:hidden — that pair can
     detach the page scroll from window.scrollY and from anchors. */
  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; }
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, 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;
  max-width: 14ch;
}
.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); }

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

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

.foot-note {
  margin-top: 1.35rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.8;
  color: var(--ink-3-sunk);
  max-width: 62ch;
}
.foot-note strong { font-weight: 600; color: var(--ink); }

.link-arrow {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  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
   ======================================================== */
.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; }
.band--paper { background: var(--paper); }
.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;
}
.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. MASTHEAD — identical bar to the homepage
   ======================================================== */
.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__link[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
.nav__cta { display: flex; align-items: center; gap: 0.5rem; }

/* ========================================================
   7. FRAME
   ======================================================== */
.frame {
  display: grid;
  grid-template-columns: 4.75rem minmax(0, 1fr) var(--rail-w);
  gap: 0 clamp(2rem, 3vw, 3.25rem);
  align-items: start;
}
.sheet { min-width: 0; }
.sheet > .band { padding-inline: clamp(1rem, 1.5vw, 1.5rem); }

.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
   ======================================================== */
.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 clamp(1.25rem, 2vw, 1.75rem);
  border-left: 1px solid var(--rule);
}
.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--price { font-family: var(--mono); font-size: 1.75rem; font-weight: 600; letter-spacing: -0.035em; color: var(--green-deep); }
.mod__head span { font-size: 0.42em; letter-spacing: 0; color: var(--ink-3); margin-left: 0.15em; }
.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); counter-reset: moditem; }
.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;
}
.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;
}

.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); }
.hero .micro { margin-bottom: 1.5rem; }
.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 REGISTER
   ======================================================== */
.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); }

.reg-wrap { overflow-x: auto; }
.reg { min-width: 660px; border-top: 2px solid var(--ink); }

/* The narrow layout is a separate composition, not a squeezed table.
   Only one of the two is ever displayed, and display:none keeps the
   other out of the accessibility tree. */
.regBlocks { display: none; }

.reg thead th {
  vertical-align: top;
  text-align: left;
  padding: 0.85rem 0.5rem 0.8rem;
  border-bottom: 1px solid var(--ink);
  font-weight: 400;
}
.reg thead th:first-child { padding-left: 0; }
/* the attribute-name column */
.reg__stub { width: 8.5rem; }
.reg__stub { vertical-align: bottom; }
.reg__stub span {
  display: block;
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3-sunk);
  padding-bottom: 0.4rem;
}

/* The taglines are different lengths, so the price is pinned to the
   bottom of a fixed-height stack: every price then sits on one
   baseline and the eye can scan across the row instead of down it.
   The stack is a span INSIDE the cell — making the th itself a flex
   container turns it out of the table and the columns collapse. */
.reg__col { position: relative; border-left: 1px solid transparent; }
.reg__stack { display: flex; flex-direction: column; height: 100%; }
.reg__stack .reg__tagline { flex: 1 1 auto; }
.reg__col[data-active="true"] { background: rgba(255, 255, 255, 0.55); border-left-color: var(--rule-2); border-right-color: var(--rule-2); }
.reg__col[data-active="true"]::before {
  content: "";
  position: absolute; left: -1px; right: -1px; top: 0;
  height: 2px;
  background: var(--green-deep);
}

.reg__pick { position: relative; display: flex; align-items: center; gap: 0.45rem; cursor: pointer; }
/* The label is the target for a radio, so extending it extends the
   hit area. A 16px dot on its own is a poor thing to aim a thumb at. */
.reg__pick::after { content: ""; position: absolute; inset: -0.3rem -0.6rem; }
.reg__radio {
  appearance: none;
  width: 13px; height: 13px;
  flex: none;
  margin: 0;
  border: 1px solid var(--ink-3);
  border-radius: 50%;
  background: var(--paper-3);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.reg__radio:checked { border-color: var(--green-deep); border-width: 4px; background: var(--green-deep); }
.reg__radio:hover { border-color: var(--ink); }
.reg__radio:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 2px; }

.reg__name {
  font-family: var(--serif);
  font-size: 1.3rem;
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.reg__tagline {
  display: block;
  margin-top: 0.35rem;
  padding-left: 1.4rem;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--ink-3);
  min-height: 4.2em;
}
.reg__price {
  display: block;
  margin-top: 0.5rem;
  padding-left: 1.4rem;
  font-family: var(--mono);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.reg__col[data-active="true"] .reg__price { color: var(--green-deep); }
.reg__unit { display: block; padding-left: 1.4rem; font-family: var(--mono); font-size: 0.625rem; color: var(--ink-3); }

.reg tbody th {
  text-align: left;
  vertical-align: baseline;
  padding: 0.6rem 0.5rem 0.6rem 0;
  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(--rule-2);
  white-space: nowrap;
}
.reg tbody td {
  padding: 0.6rem 0.5rem;
  text-align: right;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  border-bottom: 1px solid var(--rule-2);
  border-left: 1px solid transparent;
  white-space: nowrap;
}
.reg tbody tr:last-child th, .reg tbody tr:last-child td { border-bottom: 0; }
.reg td[data-active="true"] { background: rgba(255, 255, 255, 0.55); border-left-color: var(--rule-2); }

/* A quantity and the unit the backoffice stated for it. The unit sits under
   the number because it is not constant across plans: two are SSD RAID 10
   rather than NVMe, and two state transfer in GB where the others state TB. */
.reg__spec { display: block; font-weight: 600; color: var(--ink); }
.reg__specUnit {
  display: block;
  margin-top: 0.1rem;
  font-family: var(--mono);
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.reg__sum { font-weight: 600; color: var(--ink); }
.reg__sum--on { color: var(--green-deep); }
.reg__na { color: var(--rule-3); }
.reg__empty { padding: 2.25rem 0; font-family: var(--mono); font-size: 0.8125rem; color: var(--ink-2); }

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

/* --- the selection, in words as well as marks --- */
/* The selection box answers one question — which plan, at what price, and what
   does it come with — so it is built as three zones rather than one run of
   text. The specification is a set of labelled figures, the same rows the
   register above is showing, and the price stands apart because it is the
   figure the decision turns on. */
.picked {
  margin-top: 1.5rem;
  padding: 1rem 1.15rem 1.15rem;
  border: 1px solid var(--ink);
  background: var(--paper-3);
}
.picked__label { font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.picked__body {
  display: grid;
  grid-template-columns: minmax(7rem, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.1rem 1.75rem;
  margin-top: 0.55rem;
}
.picked__name {
  font-family: var(--serif);
  font-size: 1.75rem;
  line-height: 1.05;
  letter-spacing: -0.015em;
}

/* One cell per allocated resource, mirroring the register's rows so the box
   reads as a summary of the row just chosen rather than a second, differently
   shaped version of it. */
.picked__specs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 1.25rem; }
.picked__specs > div { border-top: 1px solid var(--rule-2); padding-top: 0.4rem; }
.picked__specs dt {
  font-family: var(--mono);
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.picked__specs dd {
  margin: 0.15rem 0 0;
  font-family: var(--mono);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.picked__specs dd small {
  display: block;
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.picked__act { display: flex; flex-direction: column; align-items: flex-end; gap: 0.6rem; }
.picked__price { font-family: var(--serif); font-size: 1.5rem; line-height: 1; letter-spacing: -0.01em; color: var(--ink); }
.picked__per { font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.picked__go {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1.1rem;
  background: var(--ink);
  color: var(--paper-3);
  transition: background 0.15s ease, gap 0.15s ease;
}
.picked__go:hover { background: #0e0b08; color: #fff; gap: 0.85rem; }

/* Narrow screens drop the price under the figures rather than squeezing four
   labelled columns and a button into one row. The button then takes the full
   width: a plan name like "Super-flux" wrapped inside a button sitting beside
   the price, which is not a place to spend the width. */
@media (max-width: 860px) {
  .picked__body { grid-template-columns: minmax(0, 1fr); gap: 0.9rem; }
  .picked__specs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem 1.25rem; }
  .picked__act { flex-direction: column; align-items: stretch; gap: 0.7rem; }
  .picked__go { justify-content: center; }
}

/* ========================================================
   11. INCLUDED
   ======================================================== */
.groups {
  display: grid;
  grid-template-columns: repeat(2, 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 { grid-column: 1 / -1; padding: 1.5rem 0; font-size: 0.9375rem; color: var(--ink-2); max-width: 40ch; }

/* ========================================================
   12. NEXT STEP
   ======================================================== */
.steps { border-top: 1px solid var(--void-rule); }
.steps__item {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: 0.5rem 1rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--void-rule-2);
}
.steps__num { font-family: var(--mono); font-size: 0.6875rem; color: var(--void-2nd); letter-spacing: 0.08em; padding-top: 0.3rem; }
.steps__name { font-family: var(--serif); font-size: 1.3rem; line-height: 1.15; letter-spacing: -0.012em; font-weight: 400; }
.steps__text { font-size: 0.875rem; line-height: 1.55; color: var(--void-2nd); margin-top: 0.3rem; max-width: 46ch; }

.talk { margin-top: clamp(1.75rem, 3vw, 2.5rem); padding-top: 1.25rem; border-top: 1px solid var(--void-rule); }
.talk__text { margin-top: 0.75rem; font-size: 0.9375rem; line-height: 1.6; color: rgba(234, 229, 216, 0.8); max-width: 52ch; }
.talk__text .link-arrow { margin: 0 0.15rem; }
.talk__note { margin-top: 0.6rem; font-family: var(--mono); font-size: 0.75rem; color: var(--void-2nd); }

/* ========================================================
   13. 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__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__link[aria-current="page"] { 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__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; }

/* ========================================================
   14. RESPONSIVE
   The rail collapses to one fixed bar, as on the homepage:
   the figure you are choosing stays on screen.
   ======================================================== */
@media (max-width: 1400px) {
  :root { --rail-w: 19.5rem; }
}

@media (max-width: 1279px) {
  .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; }

  .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))); }
  .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, .mod__head--price { 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; }

  /* Without this the footer's two columns survive into 320px and the
     link text pushes the document 6px wide. Same rule as the
     homepage, which is why the two footers stay identical. */
  .footer__top { grid-template-columns: minmax(0, 1fr); }

  .nav { display: block; margin-left: auto; }
  .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 matrix becomes one ruled block per plan ---------
   A table's rows are attributes and its columns are plans, so a
   narrow screen cannot be served by squeezing: the plan has to
   become the block. Same data, composed again, same order. */
@media (max-width: 860px) {
  .reg-wrap { overflow: visible; margin-inline: 0; padding-inline: 0; }
  .reg { display: none; }
  .regBlocks { display: block; border-top: 2px solid var(--ink); }

  .regBlock {
    position: relative;
    padding: 1.15rem 0 1.15rem 0.85rem;
    border-bottom: 1px solid var(--rule-2);
  }
  .regBlock:last-child { border-bottom: 0; }
  .regBlock[data-active="true"] { background: rgba(255, 255, 255, 0.5); }
  .regBlock[data-active="true"]::before {
    content: "";
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 2px;
    background: var(--green-deep);
  }
  .regBlock__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
  .regBlock__head .reg__pick { align-items: flex-start; }
  .regBlock__head .reg__name { font-size: 1.55rem; }
  .regBlock__price {
    font-family: var(--mono);
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: -0.03em;
    text-align: right;
    white-space: nowrap;
  }
  .regBlock[data-active="true"] .regBlock__price { color: var(--green-deep); }
  .regBlock__price em {
    display: block;
    font-style: normal;
    font-size: 0.5625rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .regBlock__tag { margin-top: 0.45rem; font-size: 0.8438rem; line-height: 1.45; color: var(--ink-2); }

  .regBlock__rows { margin-top: 0.9rem; border-top: 1px solid var(--rule); }
  .regBlock__rows > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--rule-soft);
  }
  .regBlock__rows > div:last-child { border-bottom: 0; }
  .regBlock__rows dt {
    font-family: var(--mono);
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--ink-3-sunk);
  }
  .regBlock__rows dd {
    font-family: var(--mono);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    text-align: right;
  }
  .regBlock__rows .reg__na { color: var(--ink-3); }
}

@media (max-width: 720px) {
  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; }

  .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; }

  .picked { grid-template-columns: minmax(0, 1fr); }
  .picked__go { grid-column: 1; grid-row: auto; margin-top: 0.85rem; justify-content: center; }

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

  .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, .rail__cta, .picked__go { padding-block: 0.7rem; }
  .index__link, .link-arrow, .footer__link { padding-block: 0.45rem; }
  .reg__radio { width: 17px; height: 17px; }
  .reg__pick::after { inset: -0.55rem -0.75rem; }
}

@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; }
}

@media print {
  .masthead, .index, .rail, .picked__go, .footer, .hero__actions { 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, .steps__text { color: #000; }
  .reg { min-width: 0; }
  .reg-wrap { overflow: visible; }
}