/* Hallmark · macrostructure: Marquee Hero · genre: modern-minimal
 * theme: custom (violet 288° from the Wekoya mark) · tone: utilitarian
 * nav: minimal centre-weighted bar · footer: statement close · enrichment: none
 * pre-emit critique: P5 H5 E4 S5 R5 V4
 *
 * Third page on the same token system, after the dashboard (Workbench) and the
 * docs (Long Document). Shares tokens deliberately — a landing page that looks
 * unlike the product it sells makes the first screen after signup feel like a
 * different company.
 *
 * Marquee Hero because the one thing worth saying is short: this is priced in
 * naira and funded by bank transfer. That is a statement, not a diagram.
 *
 * No re-drawn terminal chrome anywhere. The commands are set as plain blocks;
 * a hand-built window frame with traffic-light dots would be decoration
 * pretending to be evidence.
 */

@import url("./tokens.css?v=20260816b");

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  overflow-x: clip;
}

body {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p,
li {
  overflow-wrap: anywhere;
  min-width: 0;
}

a {
  color: var(--color-accent-deep);
  text-underline-offset: 0.18em;
}

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.skip {
  position: absolute;
  left: var(--space-md);
  top: var(--space-md);
  z-index: var(--z-toast);
  padding: var(--space-xs) var(--space-md);
  background: var(--color-accent-deep);
  color: var(--color-on-accent);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transform: translateY(-200%);
}

.skip:focus-visible {
  transform: translateY(0);
}

.wrap {
  width: 100%;
  max-width: var(--shell-max);
  margin: 0 auto;
  padding-inline: var(--space-lg);
  /* Narrower gutters where every pixel counts. 24px each side on a 320px phone
     is 15% of the screen spent on nothing. */
  min-width: 0;
}

@media (max-width: 30rem) {
  .wrap {
    padding-inline: var(--space-md);
  }
}

/*
 * Sideways-scroll backstop.
 *
 * Anything that carries its own intrinsic width — a command, a table, a code
 * block — is the usual cause of a page that drifts left and right on a phone.
 * These make the containers shrinkable and keep the scrolling inside the one
 * element that needs it.
 */
pre,
table,
img,
svg {
  max-width: 100%;
}

/*
 * Visible scrollbars on the things that scroll sideways.
 *
 * Mobile browsers hide the scrollbar until a scroll is already in progress, so
 * a command or table that runs past the edge looks cut off rather than
 * scrollable. A thin permanent track is the only affordance saying "there is
 * more this way".
 */
.cmd__text,
.table-wrap,
pre {
  scrollbar-width: thin;
  scrollbar-color: var(--color-rule) transparent;
}

.cmd__text::-webkit-scrollbar,
.table-wrap::-webkit-scrollbar,
pre::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}

.cmd__text::-webkit-scrollbar-track,
.table-wrap::-webkit-scrollbar-track,
pre::-webkit-scrollbar-track {
  background: transparent;
}

.cmd__text::-webkit-scrollbar-thumb,
.table-wrap::-webkit-scrollbar-thumb,
pre::-webkit-scrollbar-thumb {
  background: var(--color-rule);
  border-radius: var(--radius-pill);
}

.cmd__text::-webkit-scrollbar-thumb:hover,
.table-wrap::-webkit-scrollbar-thumb:hover,
pre::-webkit-scrollbar-thumb:hover {
  background: var(--color-accent-edge);
}

.nav__inner,
.hero__actions,
.step,
.figures > * {
  min-width: 0;
}

/* --- nav ------------------------------------------------------------------ */

.nav {
  border-bottom: var(--rule-hair) solid var(--color-rule);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding-block: var(--space-sm);
}

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4ch;
  font-family: var(--font-display);
  font-weight: 620;
  font-size: var(--text-lg);
  letter-spacing: -0.022em;
  color: var(--color-ink);
  text-decoration: none;
}

.wordmark span {
  color: var(--color-accent-deep);
}

.nav__links {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.nav__link {
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  text-decoration: none;
  white-space: nowrap;
}

.nav__link:hover {
  color: var(--color-accent-deep);
}

/* --- buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 560;
  /* Never wraps to two lines — a clickable target that reflows is the most
     common mobile break in a hero. */
  white-space: nowrap;
  text-decoration: none;
  border: var(--rule-hair) solid transparent;
  border-radius: var(--radius-md);
  padding: 0.6rem var(--space-md);
  cursor: pointer;
  transition:
    background var(--dur-instant) var(--ease-out),
    border-color var(--dur-instant) var(--ease-out),
    transform var(--dur-instant) var(--ease-out);
}

.btn--primary {
  background: var(--color-accent-deep);
  color: var(--color-on-accent);
}

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

.btn--primary:active {
  transform: translateY(1px);
  background: var(--color-accent-press);
}

.btn--quiet {
  background: var(--color-paper);
  color: var(--color-ink);
  border-color: var(--color-rule);
}

.btn--quiet:hover {
  border-color: var(--color-accent-edge);
  color: var(--color-accent-deep);
}

.btn--quiet:active {
  transform: translateY(1px);
  background: var(--color-paper-2);
}

.btn:disabled {
  background: var(--color-paper-3);
  color: var(--color-muted);
  border-color: var(--color-rule);
  cursor: not-allowed;
  transform: none;
}

/* --- hero ----------------------------------------------------------------- */

.hero {
  padding-block: clamp(var(--space-2xl), 6vw, var(--space-3xl)) var(--space-2xl);
}

.hero__headline {
  font-family: var(--font-display);
  /* Sized for a short headline. The copy is held under 50 characters so this
     ceiling is honest rather than a shout. */
  font-size: clamp(2.35rem, 1.3rem + 4.6vw, 4.25rem);
  font-weight: 640;
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin: 0 0 var(--space-md);
  max-width: 18ch;
}

.hero__headline em {
  font-style: normal;
  color: var(--color-accent-deep);
}

.hero__sub {
  font-size: var(--text-lg);
  color: var(--color-ink-2);
  max-width: 46ch;
  margin: 0 0 var(--space-xl);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
  margin-bottom: var(--space-md);
}

.hero__note {
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin: 0;
}

/* --- install picker ------------------------------------------------------- */

/*
 * One card: a segmented control, the command for the selected platform, and a
 * line saying what that platform needs. Grouping them inside a single bordered
 * surface is what makes the tabs read as controlling the command rather than
 * floating above two unrelated boxes.
 */
.install {
  margin-top: var(--space-xl);
  max-width: 38rem;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-lg);
  background: var(--color-paper);
  padding: var(--space-sm);
}

/* A segmented control, not two loose buttons. */
.install__tabs {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  margin-bottom: var(--space-sm);
  border-radius: var(--radius-md);
  background: var(--color-paper-3);
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.install__tabs::-webkit-scrollbar {
  display: none;
}

.install__tab {
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 560;
  white-space: nowrap;
  padding: 0.35rem var(--space-md);
  border-radius: calc(var(--radius-md) - 2px);
  border: 0;
  background: none;
  color: var(--color-muted);
  cursor: pointer;
  transition:
    color var(--dur-instant) var(--ease-out),
    background var(--dur-instant) var(--ease-out);
}

.install__tab:hover {
  color: var(--color-ink);
}

/* The selected segment lifts out of the track. */
.install__tab[aria-selected="true"] {
  color: var(--color-accent-deep);
  background: var(--color-paper);
  box-shadow: var(--shadow-raised);
}

.install__note {
  margin: var(--space-sm) 0 0;
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.install__note code {
  color: var(--color-ink-2);
  font-size: 0.92em;
}

/*
 * The hidden attribute must win.
 *
 * .cmd sets display:flex, and any display declaration overrides the browser's
 * own [hidden] { display: none } — so both commands rendered at once and the
 * tabs appeared to do nothing. This is the rule that makes the picker a picker.
 */
[hidden] {
  display: none !important;
}

/* --- command block -------------------------------------------------------- */

.cmd {
  display: flex;
  align-items: stretch;
  gap: var(--space-xs);
  /* width + min-width together are what stop a long command — the curl line is
     50 characters — from widening its container and taking the page with it. */
  width: 100%;
  min-width: 0;
  max-width: 38rem;
  margin: var(--space-sm) 0 0;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-md);
  background: var(--color-paper-2);
  padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-md);
}

.install .cmd {
  margin-top: 0;
}

.cmd__text {
  display: block;
  flex: 1 1 auto;
  /* A flex item defaults to min-width:auto, which refuses to shrink below its
     content. Without this the command sets the floor for the whole page. */
  min-width: 0;
  overflow-x: auto;
  /* Keeps the command on one line so it stays copy-pasteable by eye; the
     scrolling happens inside this box, never on the page. */
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 2;
  white-space: nowrap;
  color: var(--color-ink);
}

.cmd__copy {
  flex: none;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 560;
  padding: 0 var(--space-sm);
  border-radius: var(--radius-sm);
  border: var(--rule-hair) solid var(--color-rule);
  background: var(--color-paper);
  color: var(--color-ink-2);
  cursor: pointer;
  white-space: nowrap;
  transition:
    color var(--dur-instant) var(--ease-out),
    border-color var(--dur-instant) var(--ease-out);
}

.cmd__copy:hover {
  color: var(--color-accent-deep);
  border-color: var(--color-accent-edge);
}

.cmd__copy:active {
  background: var(--color-paper-3);
}

/* Silent success: the label changes, nothing flies in from the corner. */
.cmd__copy[data-state="done"] {
  color: var(--color-positive);
  border-color: color-mix(in oklch, var(--color-positive) 40%, transparent);
}

.cmd__copy[data-state="error"] {
  color: var(--color-critical);
  border-color: color-mix(in oklch, var(--color-critical) 40%, transparent);
}

/* --- generic section ------------------------------------------------------ */

.band {
  padding-block: var(--space-3xl);
  border-top: var(--rule-hair) solid var(--color-rule);
}

.band--tint {
  background: var(--color-paper-2);
}

.band__head {
  max-width: 48ch;
  margin-bottom: var(--space-xl);
}

.band__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 620;
  letter-spacing: -0.024em;
  line-height: 1.15;
  margin: 0 0 var(--space-xs);
}

.band__lede {
  font-size: var(--text-lg);
  color: var(--color-ink-2);
  margin: 0;
}

/* --- problem list --------------------------------------------------------- */

.pain {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-md);
  max-width: var(--measure);
}

.pain li {
  padding-left: var(--space-md);
  border-left: 2px solid var(--color-action-edge);
}

.pain strong {
  display: block;
  font-weight: 600;
}

.pain span {
  color: var(--color-ink-2);
}

/* --- steps ---------------------------------------------------------------- */

.steps {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-xl);
}

.step {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: var(--space-md);
  align-items: start;
}

.step::before {
  content: counter(step);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-accent-deep);
  border: var(--rule-hair) solid var(--color-accent-edge);
  border-radius: var(--radius-pill);
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
}

.step h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  margin: 0.15rem 0 var(--space-2xs);
}

.step p {
  margin: 0 0 var(--space-xs);
  color: var(--color-ink-2);
  max-width: var(--measure);
}

.step pre {
  margin: 0;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-md);
  overflow-x: auto;
  font-size: var(--text-sm);
}

.band--tint .step pre {
  background: var(--color-paper);
}

code {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* --- figures -------------------------------------------------------------- */

.figures {
  display: grid;
  /* minmax(0,·) so a long figure cannot force the track wider than the screen. */
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  gap: var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-rule);
  padding-top: var(--space-xl);
}

.figure__value {
  font-family: var(--font-display);
  font-size: var(--text-figure);
  font-weight: 640;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 0 0 var(--space-2xs);
}

.figure__label {
  margin: 0;
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  max-width: 26ch;
}

/* --- price table ---------------------------------------------------------- */

.table-wrap {
  overflow-x: auto;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-md);
  background: var(--color-paper);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

th,
td {
  text-align: left;
  padding: var(--space-sm) var(--space-md);
  border-bottom: var(--rule-hair) solid var(--color-rule-2);
  vertical-align: top;
}

th {
  font-weight: 600;
  background: var(--color-paper-2);
  white-space: nowrap;
}

tbody tr:last-child td {
  border-bottom: 0;
}

/* --- questions ------------------------------------------------------------ */

.qa {
  display: grid;
  gap: var(--space-lg);
  max-width: var(--measure);
}

.qa h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  margin: 0 0 var(--space-2xs);
}

.qa p {
  margin: 0;
  color: var(--color-ink-2);
}

/* --- close ---------------------------------------------------------------- */

.close {
  padding-block: var(--space-3xl);
  border-top: var(--rule-hair) solid var(--color-rule);
}

.close__line {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3rem);
  font-weight: 620;
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin: 0 0 var(--space-lg);
  max-width: 20ch;
}

.foot {
  border-top: var(--rule-hair) solid var(--color-rule);
  padding-block: var(--space-lg);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
  align-items: baseline;
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.foot a {
  color: var(--color-ink-2);
  text-decoration: none;
  white-space: nowrap;
}

.foot a:hover {
  color: var(--color-accent-deep);
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 1ms !important;
  }
}

/* ── Download page ─────────────────────────────────────────────────────────
 *
 * Four platform cards. The grid uses minmax(0, 1fr) rather than 1fr so a long
 * asset name cannot force a track wider than its share and push the row into a
 * horizontal scroll.
 */
.dl-hero {
  padding-block: var(--space-2xl) var(--space-xl);
}

.dl-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-action);
  margin: 0 0 var(--space-xs);
}

.dl-headline {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 620;
  letter-spacing: -0.028em;
  line-height: 1.1;
  margin: 0 0 var(--space-sm);
  /* A long product name must break rather than widen the page. */
  overflow-wrap: anywhere;
  min-width: 0;
}

.dl-sub {
  font-size: var(--text-lg);
  color: var(--color-ink-2);
  max-width: 58ch;
  margin: 0 0 var(--space-xl);
}

.dl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.dl-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2xs);
  padding: var(--space-md);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-md);
  background: var(--color-paper);
  min-width: 0;
}

.dl-card--mine {
  border-color: var(--color-action);
}

.dl-card__badge {
  font-size: var(--text-sm);
  color: var(--color-action);
  margin: 0;
}

.dl-card__name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  margin: 0;
}

.dl-card__meta {
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  margin: 0 0 var(--space-sm);
}

.dl-card__btn {
  margin-top: auto;
}

.dl-card__alt {
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  margin: var(--space-xs) 0 0;
}

.dl-fallback {
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  margin: 0;
}

/* The PowerShell route, sitting under the platform grid rather than inside the
   Windows card: the command runs to 46 characters and the cards are 15rem, so
   in-card it would scroll inside a box barely wider than itself. */
.dl-ps {
  max-width: 42rem;
  /* min-width:0 so the command inside can shrink; without it the nowrap
     .cmd__text sets a floor and takes the page width with it. */
  min-width: 0;
  margin: 0 0 var(--space-lg);
  padding: var(--space-md);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-md);
  background: var(--color-paper-2);
}

.dl-ps__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  margin: 0 0 var(--space-2xs);
  overflow-wrap: anywhere;
  min-width: 0;
}

.dl-ps__body {
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  max-width: 58ch;
  margin: 0;
}

.dl-notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--space-lg);
  margin: 0;
}

.dl-notes dt {
  font-weight: 600;
  margin-bottom: var(--space-2xs);
}

.dl-notes dd {
  margin: 0;
  color: var(--color-ink-2);
  max-width: 52ch;
}

/* The one-line pointer to this page from the install block. */
.install__aside {
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  margin: var(--space-sm) 0 0;
}

/*
 * The download call to action.
 *
 * Deliberately louder than .btn--primary: it is the one thing on this page we
 * want pressed, and next to two quiet buttons it should not be a matter of
 * reading all three to find it. Bigger type, more padding, and the mark's
 * violet carried in a shadow rather than a second colour, so it reads as
 * emphasis rather than a different kind of control.
 */
.btn--download {
  background: var(--color-accent-deep);
  color: var(--color-on-accent);
  border-color: transparent;
  padding-block: 0.85rem;
  padding-inline: 1.5rem;
  font-size: var(--text-base);
  font-weight: 600;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  box-shadow: 0 1px 2px oklch(50% 0.19 288 / 0.28), 0 8px 20px -6px oklch(50% 0.19 288 / 0.45);
}

.btn--download:hover {
  background: var(--color-accent);
  box-shadow: 0 1px 2px oklch(50% 0.19 288 / 0.32), 0 10px 26px -6px oklch(50% 0.19 288 / 0.55);
}

.btn--download:active {
  transform: translateY(1px);
  background: var(--color-accent-press);
}

.btn--download:focus-visible {
  outline: 2px solid var(--color-accent-deep);
  outline-offset: 3px;
}

/* The platform line, once we know it. Quieter than the label above it. */
.btn__sub {
  font-size: var(--text-sm);
  font-weight: 450;
  opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
  .btn--download:active {
    transform: none;
  }
}

/*
 * Beta feedback.
 *
 * Three short selects on one row where there is room, stacked where there is
 * not. They are preselected from the browser, so for most people this is one
 * field and a button — which is the only reason a form on a marketing page
 * gets filled in at all.
 */
.feedback {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 46rem;
}

.feedback__row {
  display: grid;
  /* minmax(0,…) rather than 1fr: a long option label would otherwise widen a
     track past the container and push the row into horizontal scroll. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-sm);
}

.feedback__field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.feedback__label {
  font-size: var(--text-sm);
  color: var(--color-ink-2);
}

.feedback select,
.feedback input,
.feedback textarea {
  width: 100%;
  padding: 0.6rem 0.75rem;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--color-ink);
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-sm);
}

.feedback textarea {
  resize: vertical;
  min-height: 7rem;
}

.feedback select:focus-visible,
.feedback input:focus-visible,
.feedback textarea:focus-visible {
  outline: 2px solid var(--color-accent-deep);
  outline-offset: 1px;
  border-color: transparent;
}

.feedback__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}

.feedback__status {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-ink-2);
}

.feedback__status[data-tone="ok"] {
  color: var(--color-accent-deep);
}

.feedback__status[data-tone="error"] {
  color: var(--color-critical, oklch(55% 0.2 25));
}

@media (max-width: 40rem) {
  .feedback__row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/*
 * The standalone feedback page.
 *
 * Narrower than a marketing section: it is one form and nothing else, and a
 * full-width measure on a page with a single column reads as unfinished.
 */
.feedback-page {
  padding-block: var(--space-2xl) var(--space-3xl);
  max-width: 46rem;
}

.feedback-page__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 620;
  letter-spacing: -0.024em;
  line-height: 1.15;
  margin: 0 0 var(--space-xs);
}

.feedback-page__lede {
  font-size: var(--text-lg);
  color: var(--color-ink-2);
  margin: 0 0 var(--space-xl);
}

.feedback-page__note {
  margin-top: var(--space-lg);
}
/* ======================= pricing · Catalogue ==========================
 *
 * A visual index of inventory: one uniform row per model, the same five fields
 * every time, sorted so the comparison the reader came to make is the one the
 * order already answers.
 *
 * A table rather than a card grid on purpose. Fifteen models with three prices
 * each is a comparison, and cards make you re-find the same number in fifteen
 * places. On a phone each row folds into a labelled block rather than scrolling
 * sideways — a price you have to drag to read is a price nobody checks.
 * ===================================================================== */

.pr-head {
  padding: var(--space-3xl) 0 var(--space-xl);
  display: grid;
  gap: var(--space-md);
  max-width: 46rem;
}

.pr-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.pr-sub {
  margin: 0;
  max-width: var(--measure);
  color: var(--color-ink-2);
}

.pr-loading {
  padding: var(--space-xl) 0;
  color: var(--color-muted);
}

.pr-retry {
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.pr-retry:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* --- the catalogue ----------------------------------------------------- */

.pr-table {
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-paper);
}

.pr-row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr));
  align-items: baseline;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-bottom: var(--rule-hair) solid var(--color-rule-2);
}

.pr-row:last-child {
  border-bottom: 0;
}

.pr-row--head {
  background: var(--color-paper-2);
  border-bottom-color: var(--color-rule);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.pr-row__name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.pr-row__model {
  overflow-wrap: anywhere;
}

.pr-row__meta {
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.pr-cell__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm);
}

/* Context is context, not money — it should not compete with the three
   figures the reader is actually comparing. */
.pr-cell__value--quiet {
  color: var(--color-muted);
}

.pr-none {
  color: var(--color-muted);
}

.pr-unit {
  margin: var(--space-md) 0 0;
  font-size: var(--text-sm);
  color: var(--color-muted);
  max-width: var(--measure);
}

/* --- how billing works -------------------------------------------------- */

.pr-notes {
  padding: var(--space-3xl) 0 var(--space-xl);
  display: grid;
  gap: var(--space-lg);
}

.pr-notes__title {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.pr-notes__grid {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.pr-note h3 {
  margin: 0 0 var(--space-2xs);
  font-size: var(--text-base);
  font-weight: 500;
}

.pr-note p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-ink-2);
}

/* --- narrow screens -----------------------------------------------------
 *
 * Each row becomes its own block: the model on its own line, then the four
 * figures in a two-up grid with the labels the header row was carrying. The
 * header is hidden because it no longer labels anything.
 * --------------------------------------------------------------------- */

@media (max-width: 48rem) {
  .pr-row--head {
    display: none;
  }

  .pr-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--space-sm);
    padding: var(--space-lg);
  }

  .pr-row__name {
    grid-column: 1 / -1;
  }

  .pr-cell {
    display: flex;
    flex-direction: column;
    gap: 1px;
  }

  /* The label the header row used to carry, moved onto the cell itself. */
  .pr-cell::before {
    content: attr(data-label);
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-muted);
  }
}

/* --- vendor groups ------------------------------------------------------
 *
 * Sixty-three models is an inventory, not a shortlist. The grouping is what
 * makes it navigable: you skim to the maker you recognise instead of reading
 * every row to find it.
 * --------------------------------------------------------------------- */

.pr-group {
  margin-bottom: var(--space-2xl);
}

.pr-group__name {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  margin: 0 0 var(--space-sm);
  font-size: var(--text-base);
  font-weight: 500;
  text-transform: capitalize;
}

.pr-group__count {
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted);
}