/* Lowlight (WordPress): site styles. Tokens from DESIGN.md with the changes in RESEARCH.md section 5.
   Blocksy draws the header, footer, container, buttons and fields from the Customizer; this file
   styles the coded sections, plus the few header and footer details the Customizer has no setting for. */


:root {
  /* Surfaces */
  --void: #0b0e12;
  --carbon: #181a1d;
  --graphite: #1f2124;
  --slate: #303235;
  --fog: #5d5e61; /* lines only, never text */

  /* Text */
  --steel: #818284; /* muted text on void and carbon only */
  --ash: #a3a4a5;
  --silver: #bababb;
  --bone: #dedede;

  /* Accent: green means active or status; teal is the one filled button */
  --green: #00d892;
  --green-ring: rgb(0 216 146 / 0.15);
  --teal: #002923;
  --emerald: #005441;
  --violet: #c58aff;
  --coral: #ff6285;
  /* Chart series, darker steps validated on Carbon (dataviz validate_palette.js, dark mode) */
  --c-ours: #00ad74;
  --c-theirs: #9a6bd6;

  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --radius: 1px;
  --max: 1200px;
  --gutter: 24px;
  --header: 64px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 767px) {
  :root { --gutter: 16px; }
}

/* Base. Blocksy sets the page colour, text, fonts and container; the coded sections inside
   <main> start from a clean slate. */
html { color-scheme: dark; scroll-padding-block-start: calc(var(--header) + 16px); }
body { -webkit-font-smoothing: antialiased; }
/* Element-level specificity (0,0,1): wins over Blocksy's own element rules (ul padding, p and
   ul margins), which load earlier, and loses to every class rule below. */
:where(#main) img { display: block; max-width: 100%; height: auto; }
:where(#main) a { color: inherit; }
:where(#main) :is(h1, h2, h3, h4, p, ul, ol, figure, dl) { margin: 0; }
:where(#main) :is(ul, ol) { padding: 0; list-style: none; }
/* Blocksy indents every list (padding-inline-start: var(--theme-list-indent)); no list in these sections is indented */
#main :is(ul, ol) { padding-inline-start: 0; margin-inline-start: 0; }
:where(#main) :is(button, input, select, textarea) { font: inherit; color: inherit; }
:where(#main) :is(h1, h2, h3, h4) { font-weight: 400; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.js-only { display: none !important; }
.js .js-only { display: revert !important; }
.js .term-try.js-only, .js .term-in.js-only { display: flex !important; }

.ic { width: 20px; height: 20px; fill: currentColor; }

/* The LED: a square, never a dot */
.led {
  display: inline-block; flex: none;
  width: 7px; height: 7px; border-radius: var(--radius);
  background: var(--green);
  box-shadow: 0 0 0 3px var(--green-ring);
}

/* Buttons (.btn.btn so a <button type="submit"> keeps this look over Blocksy's form button styles) */
.btn.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px;
  border: 1px solid transparent; border-radius: var(--radius);
  font: 400 13px/1 var(--mono); letter-spacing: 0.053em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.15s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn.btn-primary { background: var(--teal); border-color: var(--teal); color: var(--green); }
.btn.btn-primary:hover { background: var(--emerald); border-color: var(--emerald); }
.btn.btn-ghost { border-color: var(--ash); color: var(--silver); }
.btn.btn-ghost:hover { border-color: var(--bone); color: var(--bone); }

/* Hero */
.hero { position: relative; overflow-x: clip; }
.hero-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  min-height: calc(100dvh - var(--header));
  min-height: max(600px, min(calc(100dvh - var(--header)), 900px));
  padding-block: 48px 64px;
}
.hero-copy {
  grid-column: 1 / 7; align-self: center;
  display: flex; flex-direction: column; align-items: flex-start; gap: 24px;
  position: relative; z-index: 1;
}
.badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 12px;
  background: var(--carbon); box-shadow: inset 0 0 0 1px var(--green-ring); border-radius: var(--radius);
  font: 400 11px/1.2 var(--mono); letter-spacing: 0.064em; text-transform: uppercase; color: var(--green);
}
.badge .led { width: 6px; height: 6px; box-shadow: none; }
.hero h1 {
  color: var(--bone);
  font-size: clamp(40px, 4.6vw, 64px); line-height: 1.06; letter-spacing: -0.02em; font-weight: 400;
  max-width: 14.5em; text-wrap: balance;
}
.lede { font-size: 18px; line-height: 1.5; color: var(--ash); max-width: 32em; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 8px; }

.hero-stage {
  grid-column: 7 / 13; align-self: stretch;
  position: relative;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: 48px;
}
/* Rack-elevation grid behind the hero: 1U dashed rows, solid lines every 4U, a few
   occupied units with their LEDs. Anchored to the right edge, fading out toward the copy. */
.hero-pattern {
  position: absolute; z-index: 0; pointer-events: none;
  inset-block: 0; inset-inline-end: 0;
  width: 1600px; height: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent 30%, #000 62%);
  mask-image: linear-gradient(to right, transparent 30%, #000 62%);
}
.hero-pattern .grid-u { stroke: var(--slate); stroke-dasharray: 2 4; }
.hero-pattern .grid-r { stroke: var(--slate); }
.hero-pattern .unit { fill: var(--carbon); stroke: var(--slate); }
.hero-pattern .unit-led { fill: var(--green); }
.hero-pattern .unit-led.idle { fill: var(--fog); }

/* Terminal */
.term {
  position: relative; z-index: 1;
  background: var(--carbon); border: 1px solid var(--slate); border-radius: var(--radius);
  font: 400 13px/1.6 var(--mono); color: var(--silver);
  min-width: 0;
}
.term-bar {
  display: flex; align-items: stretch; justify-content: space-between;
  height: 40px; padding-inline: 8px 16px; border-block-end: 1px solid var(--slate);
}
.term-bar [role="tablist"] { display: flex; }
.term-bar [role="tab"] {
  position: relative; padding: 0 12px; background: none; border: 0; cursor: pointer;
  font: 400 12px/1 var(--mono); letter-spacing: 0.053em; color: var(--silver);
}
.term-bar [role="tab"]:hover { color: var(--bone); }
.term-bar [role="tab"][aria-selected="true"] { color: var(--green); }
.term-bar [role="tab"][aria-selected="true"]::after {
  content: ""; position: absolute; inset-inline: 12px; inset-block-end: -1px; height: 1px; background: var(--green);
}
.term-bar [role="tab"]:focus-visible { outline-offset: -4px; }
.term-tag {
  align-self: center;
  font: 400 10px/1 var(--mono); letter-spacing: 0.064em; text-transform: uppercase; color: var(--steel);
}
.term-out, .term-api {
  height: 320px; overflow: auto; overscroll-behavior: contain;
  padding: 16px 20px;
  scrollbar-width: thin; scrollbar-color: var(--slate) transparent;
}
.term-out:focus-visible, .term-api:focus-visible { outline-offset: -2px; }
.t-line { white-space: pre; min-height: 1.6em; }
.t-wrap { white-space: pre-wrap; }
.t-echo { color: var(--bone); margin-block-start: 8px; }
.t-echo:first-child { margin-block-start: 0; }
.t-gap { margin-block-start: 8px; }
.t-prompt { color: var(--green); }
.t-k { color: var(--violet); }
.t-v, .t-n { color: var(--bone); }
.t-n { color: var(--coral); }
.t-ok { color: var(--green); }
.t-err { color: var(--coral); }
.t-dim { color: var(--steel); }
.t-h { color: var(--ash); letter-spacing: 0.04em; }
.t-json { margin: 4px 0 0; font: inherit; white-space: pre; }

.term-try {
  align-items: center; gap: 12px;
  padding: 10px 16px 10px 20px; border-block-start: 1px solid var(--slate);
}
.term-try-label { font-size: 10px; letter-spacing: 0.064em; text-transform: uppercase; color: var(--steel); flex: none; }
.term-try ul {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  margin-block: -4px; padding-block: 4px; padding-inline-end: 4px;
}
.term-try ul::-webkit-scrollbar { display: none; }
.chip {
  white-space: nowrap; cursor: pointer;
  min-height: 32px; padding: 0 10px;
  background: var(--graphite); border: 1px solid var(--slate); border-radius: var(--radius);
  font: 400 12px/1 var(--mono); color: var(--ash);
  transition: color 0.15s, border-color 0.15s;
}
.chip:hover { color: var(--bone); border-color: var(--ash); }
.chip:active { transform: translateY(1px); }

.term-in {
  align-items: center; gap: 10px;
  height: 48px; padding-inline: 20px;
  border-block-start: 1px solid var(--slate);
  background: var(--graphite);
}
.term-in:focus-within { box-shadow: inset 0 0 0 1px var(--green); }
.term-in input {
  flex: 1; min-width: 0; height: 100%;
  background: none; border: 0; outline: 0;
  font: 400 13px/1 var(--mono); color: var(--bone); caret-color: var(--green);
}
.term-in input::placeholder { color: var(--ash); }

/* Sections */
.section { padding-block: 112px; }
.section-title {
  color: var(--bone); font-weight: 400;
  font-size: clamp(28px, 3vw, 40px); line-height: 1.15; letter-spacing: -0.015em;
  max-width: 20em; text-wrap: balance;
}
.section-lede { margin-block-start: 16px; font-size: 17px; color: var(--ash); max-width: 56ch; }
.link-arrow {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font: 400 12px/1 var(--mono); letter-spacing: 0.053em; text-transform: uppercase;
  color: var(--silver); text-decoration: none;
}
.link-arrow .ic { width: 16px; height: 16px; transition: transform 0.2s var(--ease); }
.link-arrow:hover { color: var(--bone); }
.link-arrow:hover .ic { transform: translateX(3px); }

/* In every plan: one strip of facts */
.facts { border-block: 1px solid var(--slate); background: var(--carbon); }
.facts-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.facts-list li { display: flex; flex-direction: column; gap: 8px; padding: 28px 20px; border-inline-start: 1px solid var(--slate); }
.facts-list li:first-child { border-inline-start: 0; padding-inline-start: 0; }
.fact-k { font: 400 11px/1.3 var(--mono); letter-spacing: 0.064em; text-transform: uppercase; color: var(--steel); }
.fact-v { color: var(--bone); font-size: 16px; line-height: 1.35; }

/* Products: VPS large with its photo, web and WordPress beside it */
.products { padding-block: 112px 56px; }
.bento {
  display: grid; gap: 16px; margin-block-start: 48px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto auto;
}
.cell {
  display: flex; flex-direction: column; gap: 12px;
  padding: 28px; min-width: 0;
  background: var(--carbon); border: 1px solid var(--slate); border-radius: var(--radius);
}
.cell h3 { color: var(--bone); font-size: 25px; line-height: 1.2; font-weight: 400; letter-spacing: -0.01em; }
.cell p { color: var(--ash); max-width: 46ch; }
.cell-spec { font: 400 12px/1.5 var(--mono); letter-spacing: 0.02em; color: var(--steel) !important; }
.cell-foot {
  margin-block-start: auto; padding-block-start: 16px; border-block-start: 1px solid var(--slate);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
}
.cell-price { font: 400 14px/1 var(--mono); color: var(--bone); }
.cell-vps { grid-column: 1 / 8; grid-row: 1 / 3; padding: 0; gap: 0; overflow: hidden; }
.cell-vps img { width: 100%; aspect-ratio: 3 / 2; max-height: 400px; object-fit: cover; border-block-end: 1px solid var(--slate); }
.cell-vps .cell-body { display: flex; flex-direction: column; gap: 12px; flex: 1; padding: 28px; }
.cell-web { grid-column: 8 / 13; grid-row: 1; background: var(--graphite); }
.cell-web .cell-spec { color: var(--ash) !important; } /* steel is under 4.5:1 on graphite */
.cell-wp {
  grid-column: 8 / 13; grid-row: 2;
  background-color: var(--carbon);
  background-image:
    linear-gradient(to right, rgb(48 50 53 / 0.55) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(48 50 53 / 0.55) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: -1px -1px;
}

/* Five-year bill */
.bill { padding-block: 56px 112px; }
.bill-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px 24px; align-items: stretch; }
/* The form sits at the foot of the left column, so both columns end on the same line */
.bill-copy { grid-column: 1 / 6; display: flex; flex-direction: column; min-width: 0; }
.bill-copy .section-lede { margin-block-end: 32px; }
.bill-fig { grid-column: 6 / 13; margin: 0; padding: 24px; background: var(--carbon); border: 1px solid var(--slate); border-radius: var(--radius); min-width: 0; }
.bill-form { display: flex; flex-direction: column; gap: 16px; margin-block-start: auto; }
/* Two matching panels: the Lowlight plan, and the offer it is compared with */
.bill-panel {
  margin: 0; padding: 20px; min-width: 0;
  background: var(--carbon); border: 1px solid var(--slate); border-radius: var(--radius);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 12px; align-items: start;
}
.bill-panel-plan { grid-template-columns: minmax(0, 1fr); gap: 12px; }
/* The legend is floated so it sits inside the panel as a grid row, not on the border */
.panel-title { float: left; grid-column: 1 / -1; width: 100%; padding: 0; margin: 0; font-weight: 400; color: var(--silver); font-size: 15px; }
.panel-title span { color: var(--steel); }
.panel-note { font: 400 12px/1.4 var(--mono); color: var(--steel); }
.presets { grid-column: 1 / -1; flex-wrap: wrap; gap: 8px; }
.js .presets.js-only { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.preset {
  min-height: 36px; padding: 0 12px; cursor: pointer;
  background: var(--graphite); border: 1px solid var(--slate); border-radius: var(--radius);
  font: 400 12px/1 var(--mono); color: var(--ash);
  transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}
.preset:hover { color: var(--bone); border-color: var(--ash); }
.preset[aria-pressed="true"] { background: var(--teal); border-color: var(--emerald); color: var(--green); }
.preset:active { transform: translateY(1px); }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { margin: 0; font-size: 14px; color: var(--ash); } /* Blocksy gives labels a bottom margin; the field's gap spaces them here */
.range-head label, .check { margin: 0; }
.field input, .bill-panel select {
  width: 100%; height: 44px; padding: 0 12px;
  background: var(--graphite); border: 1px solid var(--slate); border-radius: var(--radius);
  font: 400 15px/1 var(--mono); color: var(--bone);
}
.field input:hover, .bill-panel select:hover { border-color: var(--steel); }
.field input:focus-visible, .bill-panel select:focus-visible { outline: 0; border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.field input[aria-invalid="true"] { border-color: var(--coral); }
.field input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.field input[type="number"]::-webkit-inner-spin-button, .field input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.field-err { font-size: 13px; color: var(--coral); }

.bill-legend { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-block-end: 16px; font: 400 12px/1 var(--mono); color: var(--ash); }
.bill-keys { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.bill-keys span { display: inline-flex; align-items: center; gap: 8px; }
.bill-unit { color: var(--steel); }
.key { display: inline-block; width: 18px; height: 0; border-block-start: 2px solid var(--c-ours); }
.key-theirs { border-block-start: 2px dashed var(--c-theirs); }
.bill-plot { position: relative; }
.bill-chart { display: block; outline-offset: 4px; touch-action: pan-y; }
.bill-svg { display: block; width: 100%; height: auto; overflow: visible; }
.bill-svg .bill-gridline { stroke: var(--slate); stroke-width: 1; }
.bill-svg .bill-tick { font: 400 11px var(--mono); fill: var(--steel); }
.bill-svg .bill-end { font: 400 12px var(--mono); fill: var(--bone); }
.bill-svg .bill-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.bill-svg .bill-ours { stroke: var(--c-ours); }
.bill-svg .bill-theirs { stroke: var(--c-theirs); stroke-dasharray: 6 4; }
.bill-svg [hidden] { display: none; }
.bill-svg .bill-cross { stroke: var(--ash); stroke-width: 1; }
.bill-svg .bill-dot { stroke: var(--carbon); stroke-width: 2; }
.bill-svg .bill-dot-ours { fill: var(--c-ours); }
.bill-svg .bill-dot-theirs { fill: var(--c-theirs); }
.bill-tip {
  position: absolute; inset-block-start: -8px; inset-inline-start: 0;
  display: flex; gap: 12px; padding: 6px 10px; pointer-events: none; white-space: nowrap;
  background: var(--graphite); border: 1px solid var(--slate); border-radius: var(--radius);
  font: 400 12px/1.2 var(--mono); color: var(--bone);
}
.bill-tip span { display: inline-flex; align-items: center; gap: 6px; }
.bill-tip[hidden] { display: none; }
.bill-tip-m { color: var(--ash); }
.bill-summary { margin-block: 16px; font-size: 15px; color: var(--silver); }
.bill-table-wrap { overflow-x: auto; }
/* border: 0 first, because Blocksy draws a box around every table cell */
.bill-table { width: 100%; border: 0; border-collapse: collapse; font: 400 13px/1.3 var(--mono); }
.bill-table th, .bill-table td { padding: 10px 8px; text-align: end; border: 0; border-block-start: 1px solid var(--slate); white-space: nowrap; }
.bill-table thead td { border: 0; }
.bill-table thead th { color: var(--steel); font-size: 11px; letter-spacing: 0.04em; border-block-start: 0; }
.bill-table th { font-weight: 400; }
.bill-table tbody th { text-align: start; color: var(--ash); padding-inline-start: 0; }
.bill-table td { color: var(--bone); }

/* Limits: what plans often say, and what we print */
.limits { padding-block: 112px; border-block-start: 1px solid var(--slate); }
.limits-head, .limits-list li {
  display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1.4fr); align-items: baseline; gap: 16px;
}
.limits-head { margin-block-start: 48px; padding-block-end: 12px; font: 400 11px/1 var(--mono); letter-spacing: 0.064em; text-transform: uppercase; color: var(--steel); }
.limits-head span:last-child { grid-column: 3; }
.limits-list { margin-block-end: 24px; }
.limits-list li { padding-block: 22px; border-block-start: 1px solid var(--slate); font-size: 19px; line-height: 1.35; }
.limits-list li:last-child { border-block-end: 1px solid var(--slate); }
.lim-said { color: var(--steel); }
.lim-ic { width: 18px; height: 18px; color: var(--steel); align-self: center; }
.lim-ours { color: var(--bone); }

/* Data centres and their 90 days */
.sites { padding-block: 112px; background: var(--carbon); border-block: 1px solid var(--slate); }
.sites-head, .site {
  display: grid; align-items: center; gap: 24px;
  grid-template-columns: 56px minmax(0, 1.1fr) minmax(0, 1.2fr) minmax(0, 2fr) 96px;
}
.sites-head { margin-block-start: 48px; padding-block-end: 12px; font: 400 11px/1 var(--mono); letter-spacing: 0.064em; text-transform: uppercase; color: var(--steel); }
.sites-head span:first-child { grid-column: 1 / 3; }
.sites-head span:last-child { text-align: end; }
.site { padding-block: 18px; border-block-start: 1px solid var(--slate); }
.site:last-child { border-block-end: 1px solid var(--slate); }
.site-code { font: 400 13px/1 var(--mono); color: var(--violet); }
.site-city { color: var(--bone); }
.site-country { color: var(--ash); }
.site-power { font-size: 14px; color: var(--ash); }
.strip { display: block; width: 100%; height: 24px; }
.strip .day { fill: var(--c-ours); }
.strip .day-inc { fill: var(--coral); }
.site-up { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; font: 400 13px/1 var(--mono); color: var(--bone); }
.site-up .led { width: 6px; height: 6px; box-shadow: none; }
.sites-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-block-start: 32px; }
.incident { display: flex; flex-direction: column; gap: 8px; max-width: 70ch; }
.incident-meta { font: 400 11px/1.4 var(--mono); letter-spacing: 0.064em; text-transform: uppercase; color: var(--coral); }
.incident-meta span { color: var(--ash); margin-inline-start: 8px; }
.incident-title { color: var(--silver); }

/* Migration in three steps */
.migrate { padding-block: 112px; }
.migrate-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 48px; }
.steps { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; counter-reset: none; }
.steps li { padding-block-start: 24px; border-block-start: 1px solid var(--slate); display: flex; flex-direction: column; gap: 12px; }
.step-n { font: 400 12px/1 var(--mono); letter-spacing: 0.064em; color: var(--steel); }
.steps h3 { color: var(--bone); font-size: 20px; line-height: 1.3; font-weight: 400; }
.steps p { color: var(--ash); max-width: 36ch; }

/* Questions */
.faq { padding-block: 112px; border-block-start: 1px solid var(--slate); }
.faq-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px 24px; }
.faq-grid .section-title { grid-column: 1 / 5; }
.faq-list { grid-column: 5 / 13; }
.qa { border-block-start: 1px solid var(--slate); }
.qa:last-child { border-block-end: 1px solid var(--slate); }
.qa summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding-block: 22px; cursor: pointer; list-style: none;
  color: var(--bone); font-size: 18px; line-height: 1.35;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover .qa-ic { color: var(--bone); }
.qa-ic { flex: none; width: 18px; height: 18px; color: var(--steel); transition: transform 0.25s var(--ease); }
.qa[open]:not([data-dir="close"]) .qa-ic { transform: rotate(45deg); }
.qa p { padding-block-end: 24px; color: var(--ash); max-width: 62ch; }

@media (max-width: 1023px) {
  .facts-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .facts-list li:nth-child(4) { border-inline-start: 0; padding-inline-start: 0; }
  .facts-list li:nth-child(n + 4) { border-block-start: 1px solid var(--slate); }
  .bill-copy, .bill-fig { grid-column: 1 / -1; }
  .sites-head, .site { grid-template-columns: 56px minmax(0, 1fr) minmax(0, 2fr) 96px; }
  .site-power, .sites-head span:nth-child(2) { display: none; }
}
@media (max-width: 767px) {
  .products, .limits, .sites, .migrate, .faq { padding-block: 72px; }
  .products { padding-block-end: 40px; }
  .bill { padding-block: 40px 72px; }
  .facts-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts-list li { padding: 20px 16px; }
  .facts-list li:nth-child(odd) { border-inline-start: 0; padding-inline-start: 0; }
  .facts-list li:nth-child(4) { border-inline-start: 1px solid var(--slate); padding-inline-start: 16px; }
  .facts-list li:nth-child(n + 3) { border-block-start: 1px solid var(--slate); }
  .facts-list li:last-child { grid-column: 1 / -1; }
  .bento { grid-template-columns: minmax(0, 1fr); margin-block-start: 32px; }
  .cell-vps, .cell-web, .cell-wp { grid-column: 1; grid-row: auto; }
  .cell:not(.cell-vps), .cell-vps .cell-body { padding: 22px; }
  .bill-copy .section-lede { margin-block-end: 24px; }
  .bill-panel { padding: 14px; gap: 14px 10px; }
  .bill-panel-plan { gap: 10px; }
  .bill-keys { gap: 8px 14px; }
  .field input, .bill-panel select { font-size: 16px; } /* 16px stops iOS zooming in on focus */
  .field label { font-size: 13px; }
  .bill-fig { padding: 16px; margin-inline: calc(-1 * var(--gutter) + 0px); border-inline: 0; }
  .limits-head { display: none; }
  .limits-list { margin-block-start: 32px; }
  .limits-list li { grid-template-columns: minmax(0, 1fr); gap: 6px; font-size: 17px; }
  .lim-ic { display: none; }
  .lim-said { font-size: 15px; }
  .sites-head { display: none; }
  .site { grid-template-columns: 48px minmax(0, 1fr) auto; row-gap: 12px; }
  .site .strip { grid-column: 1 / -1; grid-row: 2; }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-block-start: 40px; }
  .faq-grid .section-title, .faq-list { grid-column: 1 / -1; }
  .footer-in { grid-template-columns: minmax(0, 1fr); }
  .footer-cols { gap: 48px; }
}

/* Tablet and phone: copy, then the terminal framed by the photo */
@media (max-width: 899px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    padding-block: 40px 0;
    row-gap: 40px;
  }
  .hero-copy, .hero-stage { grid-column: 1; }
  .hero-pattern {
    -webkit-mask-image: linear-gradient(to bottom, transparent 35%, #000 60%);
    mask-image: linear-gradient(to bottom, transparent 35%, #000 60%);
  }
  .hero-stage { padding-block: 40px 56px; }
}
@media (max-width: 767px) {
  .hero h1 { font-size: clamp(36px, 10vw, 44px); }
  .lede { font-size: 17px; }
  .term { font-size: 12px; }
  .term-out, .term-api { height: 300px; padding: 14px 16px; }
  .term-in { padding-inline: 16px; }
  .term-in input { font-size: 16px; } /* 16px stops iOS zooming in on focus */
  .term-try { padding-inline: 16px 8px; }
}

/* Entrance and LEDs. Only when JS has added .js, and never under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .js .hero-copy > *, .js .hero-stage .term { animation: rise 0.7s var(--ease) both; }
  .js .hero-copy > :nth-child(2) { animation-delay: 0.06s; }
  .js .hero-copy > :nth-child(3) { animation-delay: 0.12s; }
  .js .hero-copy > :nth-child(4) { animation-delay: 0.18s; }
  .js .hero-stage .term { animation-delay: 0.24s; }
  .badge .led { animation: blink 2.4s steps(1) infinite; }
  .hero-pattern .unit-led.blink { animation: blink 3.1s steps(1) infinite; }
  .hero-pattern .unit-led.blink:nth-of-type(3n) { animation-duration: 4.3s; animation-delay: -1.2s; }
  .hero-pattern .unit-led.blink:nth-of-type(3n + 1) { animation-duration: 2.2s; animation-delay: -0.6s; }
}
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes blink { 0%, 92% { opacity: 1; } 96% { opacity: 0.25; } }

/* Blocksy header and footer: the details the Customizer has no setting for */
[data-id="logo"] .site-title a { display: inline-flex; align-items: center; gap: 10px; }
[data-id="logo"] .site-title a::before,
.footer-logo .led {
  content: ""; display: inline-block; flex: none;
  width: 7px; height: 7px; border-radius: var(--radius);
  background: var(--green); box-shadow: 0 0 0 3px var(--green-ring);
}
.ct-header [data-id="button"] .ct-button { padding-inline: 14px; letter-spacing: 0.053em; }
.ct-header .menu-item.current-menu-item > a { color: var(--bone); }
#offcanvas [data-id="button"] { margin-block-start: 24px; }
#offcanvas [data-id="button"] .ct-button { width: 100%; }
.footer-brand { display: flex; flex-direction: column; gap: 16px; }
.footer-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--bone) !important; font-size: 20px; letter-spacing: -0.01em; text-decoration: none; }
.footer-brand .concept { font-size: 14px; color: var(--ash); max-width: 46ch; }
.footer-brand .concept a, .ct-footer-copyright a { color: var(--bone); text-decoration: underline; text-decoration-color: var(--fog); text-underline-offset: 3px; }
.ct-footer .widget-title { letter-spacing: 0.064em; text-transform: uppercase; margin-block-end: 16px; }
.ct-footer .widget_nav_menu li { margin-block-end: 2px; }
.ct-footer .widget_nav_menu a { display: inline-block; padding-block: 6px; text-decoration: none; }

/* ===== Inner pages ===== */

/* Page head: title and one line over a quieter rack grid */
.page-head { position: relative; overflow-x: clip; border-block-end: 1px solid var(--slate); }
.page-head .hero-pattern { height: 100%; }
.page-head-in {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 48px;
  padding-block: 88px 64px;
}
.page-head-copy { display: flex; flex-direction: column; gap: 20px; max-width: 46rem; }
.page-head h1 { color: var(--bone); font-size: clamp(40px, 5vw, 64px); line-height: 1.04; letter-spacing: -0.02em; }
.page-head .lede { font-size: 18px; color: var(--ash); max-width: 38em; }
.badge-lg { font-size: 12px; padding: 10px 14px; }

/* Segmented switches (buttons with aria-pressed) */
.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--slate); border-radius: var(--radius); background: var(--carbon); }
.js .seg.js-only { display: inline-flex !important; }
.seg button {
  min-height: 40px; padding: 0 16px; cursor: pointer;
  background: none; border: 0; border-inline-start: 1px solid var(--slate); border-radius: 0;
  font: 400 12px/1 var(--mono); letter-spacing: 0.053em; text-transform: uppercase; color: var(--ash);
  transition: color 0.15s, background-color 0.15s;
}
.seg button:first-child { border-inline-start: 0; }
.seg button:hover { color: var(--bone); }
.seg button[aria-pressed="true"] { background: var(--teal); color: var(--green); }
.seg button:focus-visible { outline-offset: -2px; }

/* Pricing */
.period-bar { position: sticky; top: var(--header-sticky-height, 64px); z-index: 5; background: var(--void); border-block-end: 1px solid var(--slate); }
.admin-bar .period-bar { top: calc(var(--header-sticky-height, 64px) + 32px); }
.period-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-block: 14px; }
.period-note { font: 400 12px/1.4 var(--mono); color: var(--steel); }
.family { padding-block: 80px 0; }
.family-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; margin-block-end: 32px; }
.plan-rows { border-block-start: 1px solid var(--slate); }
.plan-row {
  display: grid; align-items: center; gap: 16px;
  grid-template-columns: 96px repeat(4, minmax(0, 1fr)) minmax(0, 1.2fr);
  padding-block: 18px; border-block-end: 1px solid var(--slate);
}
.plan-row-head { padding-block: 12px; font: 400 11px/1 var(--mono); letter-spacing: 0.064em; text-transform: uppercase; color: var(--steel); }
.pr-price-h { text-align: end; }
.pr-id { font: 400 14px/1 var(--mono); color: var(--violet); }
.pr-spec { color: var(--silver); }
.pr-label { display: none; }
.pr-price { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.pr-amount { font: 400 18px/1 var(--mono); color: var(--bone); }
.pr-per { font: 400 11px/1 var(--mono); color: var(--steel); }
.addons { padding-block: 96px; }
#main .addon-list { margin-block-start: 32px; border-block-start: 1px solid var(--slate); }
.addon-list li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 16px; padding-block: 18px; border-block-end: 1px solid var(--slate); }
.addon-name { color: var(--bone); }
.addon-note { color: var(--ash); }
.addon-price { font: 400 14px/1.4 var(--mono); color: var(--bone); text-align: end; }

/* Web hosting: plan cards */
.hosting { padding-block: 64px 96px; }
.seg-wide { margin-block-end: 40px; }
.plan-panel + .plan-panel { margin-block-start: 64px; }
.js .plan-panel + .plan-panel { margin-block-start: 0; }
.plan-panel[hidden] { display: none; }
.plan-panel-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; margin-block-end: 24px; }
.plan-panel-head h3 { color: var(--bone); font-size: 25px; }
.plan-panel-head p { color: var(--ash); }
.plan-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.plan-card { display: flex; flex-direction: column; gap: 12px; padding: 28px; background: var(--carbon); border: 1px solid var(--slate); border-radius: var(--radius); }
.plan-card:nth-child(2) { background: var(--graphite); }
#main .plan-card-id { font: 400 14px/1 var(--mono); color: var(--violet); margin: 0; }
.plan-card-price { color: var(--ash); }
.plan-card-price .amount { font-size: 40px; line-height: 1; color: var(--bone); letter-spacing: -0.02em; margin-inline-end: 6px; }
.plan-card-renew { display: inline-flex; align-items: center; gap: 8px; font: 400 12px/1 var(--mono); color: var(--green); }
.plan-card-renew .ic { width: 16px; height: 16px; }
.plan-card-specs { margin: 8px 0 0; border-block-start: 1px solid var(--slate); }
.plan-card-specs div { display: flex; justify-content: space-between; gap: 16px; padding-block: 10px; border-block-end: 1px solid var(--slate); }
.plan-card-specs dt { color: var(--ash); font-size: 14px; }
.plan-card-specs dd { margin: 0; color: var(--bone); font-size: 14px; text-align: end; }

/* "In every plan" feature list */
.included { padding-block: 96px; border-block-start: 1px solid var(--slate); background: var(--carbon); }
.included-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px 24px; }
.included-grid .section-title { grid-column: 1 / 5; }
.included-list { grid-column: 5 / 13; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
.included-list li { display: flex; gap: 14px; }
.included-list .ic { flex: none; width: 18px; height: 18px; margin-block-start: 3px; color: var(--green); }
#main .included-list h3 { color: var(--bone); font-size: 17px; margin-block-end: 6px; }
.included-list p { color: var(--ash); font-size: 15px; }

/* Band: one line and one button */
.band { padding-block: 72px; border-block-start: 1px solid var(--slate); }
.band-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; }
.band .section-title { max-width: 24em; font-size: clamp(24px, 2.4vw, 32px); }

/* VPS configurator */
.config { padding-block: 72px 32px; }
.config-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px 24px; align-items: start; }
.ll-vps .family { padding-block-end: 96px; }
.config-controls { grid-column: 1 / 7; min-width: 0; }
.config-out { grid-column: 7 / 13; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; min-width: 0; }
.config-form { display: flex; flex-direction: column; gap: 28px; margin-block-start: 32px; }
.seg-plans button { min-width: 64px; text-transform: none; letter-spacing: 0.02em; }
.range-head { display: flex; justify-content: space-between; align-items: baseline; margin-block-end: 10px; }
.range-head label { color: var(--silver); }
.range-head output { font: 400 15px/1 var(--mono); color: var(--bone); }
.range-scale { display: flex; justify-content: space-between; margin-block-start: 6px; font: 400 11px/1 var(--mono); color: var(--steel); }
#main input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 24px; background: none; margin: 0; padding: 0; border: 0; cursor: pointer; }
#main input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: var(--slate); }
#main input[type="range"]::-moz-range-track { height: 2px; background: var(--slate); }
#main input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -8px; background: var(--teal); border: 1px solid var(--green); border-radius: var(--radius); }
#main input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; background: var(--teal); border: 1px solid var(--green); border-radius: var(--radius); }
#main input[type="range"]:focus-visible { outline-offset: 4px; }
.config-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 24px; }
.config-row .field { flex: 1 1 200px; }
#main .config-row select {
  width: 100%; height: 44px; padding: 0 12px;
  background: var(--graphite); border: 1px solid var(--slate); border-radius: var(--radius);
  font: 400 15px/1 var(--mono); color: var(--bone);
}
.check { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--silver); cursor: pointer; }
#main .check input { width: 18px; height: 18px; margin: 0; accent-color: var(--green); }
.rack { margin: 0; padding: 16px; background: var(--carbon); border: 1px solid var(--slate); border-radius: var(--radius); }
.rack figcaption, .plot-fig figcaption { margin-block-start: 12px; font: 400 10px/1.4 var(--mono); letter-spacing: 0.064em; text-transform: uppercase; color: var(--steel); }
.rack-svg { display: block; width: 100%; height: auto; }
.rack-svg .rack-slot { fill: none; stroke: var(--slate); stroke-width: 1; stroke-dasharray: 2 4; }
.rack-svg .rack-frame { fill: none; stroke: var(--fog); stroke-width: 1; }
.rack-svg .rack-u { font: 400 11px var(--mono); fill: var(--steel); }
.rack-svg .rack-unit rect:first-child { fill: var(--graphite); stroke: var(--fog); stroke-width: 1; }
.rack-svg .rack-unit[data-kind="cpu"] rect:first-child { fill: var(--teal); stroke: var(--emerald); }
.rack-svg .rack-led { fill: var(--green); }
.rack-svg .rack-unit text { font: 400 12px var(--mono); fill: var(--bone); letter-spacing: 0.06em; }
.quote { display: flex; flex-direction: column; gap: 16px; padding: 24px; background: var(--carbon); border: 1px solid var(--slate); border-radius: var(--radius); }
.quote-match { display: inline-flex; align-items: center; gap: 10px; font: 400 12px/1 var(--mono); letter-spacing: 0.04em; color: var(--green); }
.quote-price { color: var(--ash); }
.quote-price .amount { font-size: 44px; line-height: 1; letter-spacing: -0.02em; color: var(--bone); margin-inline-end: 2px; }
.quote-list { margin: 0; border-block-start: 1px solid var(--slate); }
.quote-list div { display: flex; justify-content: space-between; gap: 12px; padding-block: 10px; border-block-end: 1px solid var(--slate); }
.quote-list dt { color: var(--ash); font-size: 14px; }
.quote-list dd { margin: 0; font: 400 14px/1.3 var(--mono); color: var(--bone); }
.quote-cmd { padding: 10px 12px; background: var(--void); border: 1px solid var(--slate); font: 400 12px/1.5 var(--mono); color: var(--bone); overflow-wrap: anywhere; }
.quote-cmd code { font: inherit; background: none; padding: 0; color: inherit; }
.config-note { grid-column: 1 / -1; font-size: 14px; color: var(--steel); }

/* Data centres: the plot and the cards */
.nearest { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; background: var(--carbon); border: 1px solid var(--slate); border-radius: var(--radius); max-width: 22rem; }
.js .nearest.js-only { display: flex !important; }
.js .nearest.js-only[hidden] { display: none !important; }
.nearest-k { font: 400 11px/1 var(--mono); letter-spacing: 0.064em; text-transform: uppercase; color: var(--steel); }
.nearest-v { font-size: 20px; color: var(--bone); }
.nearest-note { font-size: 13px; color: var(--steel); }
.plot { padding-block: 64px 0; }
.plot-fig { margin: 0; padding: 20px; background: var(--carbon); border: 1px solid var(--slate); border-radius: var(--radius); }
.plot-svg { display: block; width: 100%; height: auto; overflow: visible; }
.plot-grid { stroke: var(--slate); stroke-width: 1; stroke-dasharray: 2 4; }
.plot-equator { stroke-dasharray: none; }
.plot-tick { font: 400 10px var(--mono); fill: var(--steel); }
.plot-ring { fill: none; stroke: var(--green-ring); stroke-width: 1; }
.plot-dot { fill: var(--green); }
.plot-label { font: 400 12px var(--mono); fill: var(--bone); letter-spacing: 0.04em; }
.plot-site.is-near .plot-ring { stroke: var(--green); }
.dc { padding-block: 32px 96px; }
.dc-list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.dc-card { grid-column: span 2; display: flex; flex-direction: column; gap: 12px; padding: 24px; background: var(--carbon); border: 1px solid var(--slate); border-radius: var(--radius); }
.dc-card:nth-child(4), .dc-card:nth-child(5) { grid-column: span 3; }
.dc-card.is-near { border-color: var(--emerald); }
.dc-code { display: inline-flex; align-items: center; gap: 10px; font: 400 12px/1 var(--mono); letter-spacing: 0.04em; color: var(--violet); }
.dc-card h3 { color: var(--bone); font-size: 25px; }
.dc-card h3 span { color: var(--ash); }
.dc-why { color: var(--ash); }
#main .dc-facts { margin: auto 0 0; padding-block-start: 8px; border-block-start: 1px solid var(--slate); }
.dc-facts div { display: flex; justify-content: space-between; gap: 12px; padding-block: 8px; }
.dc-facts dt { color: var(--ash); font-size: 14px; }
.dc-facts dd { margin: 0; font: 400 14px/1.3 var(--mono); color: var(--bone); text-align: end; }
#main .dc-note { margin-block-start: 24px; max-width: 70ch; font-size: 14px; color: var(--steel); }

/* Status board and incident log */
.board { padding-block: 72px 80px; }
#main .board-help { margin-block-start: 12px; font-size: 14px; color: var(--steel); }
.js .board-help.js-only { display: block !important; }
.board .strip { cursor: crosshair; }
.board .strip:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
.strip .day.is-on, .strip .day-inc.is-on { fill: var(--bone); }
#main .board-readout { min-height: 48px; margin-block-start: 20px; display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; font: 400 13px/1.5 var(--mono); color: var(--silver); }
.readout-day { color: var(--bone); }
#main .readout-inc { color: var(--coral); text-decoration: underline; text-underline-offset: 3px; }
.board-legend { display: flex; gap: 20px; margin-block-start: 8px; font: 400 11px/1 var(--mono); color: var(--steel); }
.board-legend span { display: inline-flex; align-items: center; gap: 8px; }
.lg { display: inline-block; width: 3px; height: 14px; }
.lg-ok { background: var(--c-ours); }
.lg-inc { background: var(--coral); }
.log { padding-block: 96px; border-block-start: 1px solid var(--slate); }
.log-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px 24px; }
.log-grid .section-title { grid-column: 1 / 5; }
.log-list, .log-empty, .log-note { grid-column: 5 / 13; }
.log-item { padding-block: 24px; border-block-start: 1px solid var(--slate); display: flex; flex-direction: column; gap: 8px; scroll-margin-top: 96px; }
.log-item:target { border-block-start-color: var(--coral); }
.log-item:last-child { border-block-end: 1px solid var(--slate); }
.log-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font: 400 12px/1.4 var(--mono); color: var(--steel); }
.log-meta time { color: var(--coral); }
.log-item h3 { color: var(--bone); font-size: 20px; }
.log-fix { color: var(--ash); }
.log-fix span { font: 400 11px/1 var(--mono); letter-spacing: 0.064em; text-transform: uppercase; color: var(--steel); margin-inline-end: 6px; }
.log-note { font-size: 14px; color: var(--steel); max-width: 62ch; }

/* Migrate: request form and receipt */
.migrate-page { padding-block: 32px 0; }
#main .migrate-page .steps { margin-block-start: 32px; }
.request { padding-block: 96px; }
.request-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px 24px; align-items: start; }
.request-copy { grid-column: 1 / 5; }
.request-box { grid-column: 6 / 13; padding: 28px; background: var(--carbon); border: 1px solid var(--slate); border-radius: var(--radius); }
.migrate-form { display: flex; flex-direction: column; gap: 20px; }
.migrate-form[hidden], .receipt[hidden] { display: none; }
.field-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field .opt { color: var(--steel); }
#main .migrate-form :is(input, select, textarea) {
  width: 100%; min-height: 44px; padding: 10px 12px;
  background: var(--graphite); border: 1px solid var(--slate); border-radius: var(--radius);
  font: 400 16px/1.4 var(--sans); color: var(--bone);
}
#main .migrate-form textarea { resize: vertical; }
#main .migrate-form :is(input, select, textarea):focus-visible { outline: 0; border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
#main .migrate-form [aria-invalid="true"] { border-color: var(--coral); }
.migrate-form .btn { align-self: flex-start; }
.receipt { display: flex; flex-direction: column; gap: 16px; }
.receipt:focus { outline: none; }
.receipt-head { display: inline-flex; align-items: center; gap: 10px; font-size: 20px; color: var(--bone); }
.receipt > p:not(.receipt-head) { color: var(--ash); }
.receipt-list { margin: 0; border-block-start: 1px solid var(--slate); }
.receipt-list div { display: flex; justify-content: space-between; gap: 16px; padding-block: 10px; border-block-end: 1px solid var(--slate); }
.receipt-list dt { color: var(--ash); }
.receipt-list dd { margin: 0; color: var(--bone); text-align: end; overflow-wrap: anywhere; }
.receipt .btn { align-self: flex-start; }

/* About */
.prose-page { padding-block: 72px 96px; }
.prose-grid { display: flex; flex-direction: column; }
.prose-block { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px 24px; padding-block: 32px; border-block-start: 1px solid var(--slate); }
.prose-block:last-child { border-block-end: 1px solid var(--slate); }
.prose-block h2 { grid-column: 1 / 5; color: var(--bone); font-size: 22px; line-height: 1.3; }
.prose-body { grid-column: 5 / 13; display: flex; flex-direction: column; gap: 14px; max-width: 64ch; }
.prose-body p { color: var(--silver); }
#main .prose-body a { color: var(--bone); text-decoration: underline; text-decoration-color: var(--fog); text-underline-offset: 3px; }

/* 404 */
.notfound-line { font: 400 13px/1.5 var(--mono); color: var(--silver); }
.notfound-links { display: flex; flex-wrap: wrap; gap: 4px 24px; }

@media (max-width: 1023px) {
  .plan-row { grid-template-columns: 80px repeat(4, minmax(0, 1fr)) minmax(0, 1fr); gap: 12px; }
  .plan-cards { grid-template-columns: minmax(0, 1fr); }
  .plan-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); column-gap: 32px; align-content: start; }
  .plan-card-specs { grid-column: 2; grid-row: 1 / span 4; }
  #main .plan-card-specs { margin-block-start: 0; }
  .included-grid .section-title, .included-list { grid-column: 1 / -1; }
  .config-controls, .config-out { grid-column: 1 / -1; }
  .dc-card, .dc-card:nth-child(4), .dc-card:nth-child(5) { grid-column: span 3; }
  .dc-card:nth-child(5) { grid-column: 1 / -1; }
  .log-grid .section-title, .log-list, .log-empty, .log-note { grid-column: 1 / -1; }
  .request-copy, .request-box { grid-column: 1 / -1; }
  .prose-block h2, .prose-body { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .page-head-in { padding-block: 56px 40px; }
  .nearest { max-width: none; width: 100%; padding: 24px; }
  /* On phones the title and line fill the width: the grid fades out behind them */
  .page-head .hero-pattern { -webkit-mask-image: linear-gradient(to bottom, #000, transparent 45%); mask-image: linear-gradient(to bottom, #000, transparent 45%); opacity: 0.6; }
  .seg, .js .seg.js-only { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .seg button { border-inline-start: 0; border-block-start: 1px solid var(--slate); }
  .seg button:nth-child(even) { border-inline-start: 1px solid var(--slate); }
  .seg button:nth-child(-n + 2) { border-block-start: 0; }
  .js .seg-plans.js-only { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .seg-plans button { min-width: 0; }
  .seg-plans button:nth-child(n) { border-inline-start: 1px solid var(--slate); border-block-start: 1px solid var(--slate); }
  .seg-plans button:nth-child(3n + 1) { border-inline-start: 0; }
  .seg-plans button:nth-child(-n + 3) { border-block-start: 0; }
  .period-note { display: none; }
  .family { padding-block: 56px 0; }
  .plan-row-head { display: none; }
  .plan-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; padding-block: 20px; }
  .pr-id { grid-column: 1; }
  .pr-price { grid-column: 2; grid-row: 1; }
  .pr-spec { display: flex; flex-direction: column; gap: 2px; }
  .pr-label { display: block; font: 400 10px/1.4 var(--mono); letter-spacing: 0.064em; text-transform: uppercase; color: var(--steel); }
  .addon-list li { grid-template-columns: minmax(0, 1fr) auto; }
  .addon-note { grid-column: 1; grid-row: 2; font-size: 14px; }
  .addon-price { grid-row: 1 / span 2; grid-column: 2; }
  .hosting { padding-block: 40px 72px; }
  .seg-wide { margin-block-end: 28px; }
  .plan-card { display: flex; padding: 22px; }
  #main .plan-card-specs { margin-block-start: 8px; }
  .included, .addons, .log, .request { padding-block: 72px; }
  .included-list { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .config { padding-block: 48px 16px; }
  .config-out { grid-template-columns: minmax(0, 1fr); }
  .rack-svg { max-width: 300px; margin-inline: auto; }
  .quote-price .amount { font-size: 36px; }
  .dc-list { grid-template-columns: minmax(0, 1fr); }
  .dc-card, .dc-card:nth-child(4), .dc-card:nth-child(5) { grid-column: 1; }
  .plot-fig { padding: 12px; }
  /* The plot scales down to about 0.45 of its drawn size on a phone, so its text and markers
     are set larger in drawing units to come out at a readable 12px and 9px */
  .plot-label { font-size: 26px; }
  .plot-tick { font-size: 20px; }
  .plot-dot, .plot-ring { transform-box: fill-box; transform-origin: center; }
  .plot-dot { transform: scale(2); }
  .plot-ring { transform: scale(1.5); }
  .plot-label[text-anchor="start"] { transform: translateX(6px); }
  .plot-label[text-anchor="end"] { transform: translateX(-6px); }
  .board { padding-block: 48px 64px; }
  .request-box { padding: 20px; }
  .field-pair { grid-template-columns: minmax(0, 1fr); }
  .prose-page { padding-block: 40px 72px; }
}