/* ============================================================
   FLOWFINDS SOLUTIONS LTD. — design system
   Monochrome. Rectangular. Typography-led.
   No border-radius, no gradients, no shadows — anywhere.
   (One exception: alpha mask feathers that composite product
   photography into the black page. Not a visible design element.)
   ============================================================ */

@font-face {
  font-family: "Inter var";
  src: url("/assets/fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --black: #000;
  --white: #fff;
  --ink: #171a20;            /* near-black for text on white (Tesla ink) */
  --grey: #8b8f94;
  --grey-dark: #5c5e62;
  --grey-light: #d0d1d2;
  --hair-dark: rgba(255, 255, 255, 0.18);
  --hair-light: rgba(23, 26, 32, 0.15);
  --font: "Inter var", -apple-system, BlinkMacSystemFont, "Helvetica Neue",
    Helvetica, "Segoe UI", Arial, sans-serif;
  --ls-wide: 0.22em;
  --ls-mid: 0.16em;
}

* { margin: 0; padding: 0; box-sizing: border-box; border-radius: 0 !important; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

body {
  font-family: var(--font);
  font-weight: 400;
  background: var(--black);
  color: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 16px;
  line-height: 1.5;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; background: none; border: none; color: inherit; cursor: pointer; }

::selection { background: var(--white); color: var(--black); }
.on-white ::selection { background: var(--ink); color: var(--white); }

/* ---------------- type ---------------- */

.eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--grey);
}

h1, .h1 {
  font-size: clamp(42px, 7.2vw, 92px);
  font-weight: 300;
  letter-spacing: -0.015em;
  line-height: 1.04;
}

h2, .h2 {
  font-size: clamp(32px, 4.6vw, 56px);
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.08;
}

/* phones: the 42px h1 floor leaves "Memory modules." 1px from wrapping at 360px.
   Below 480px, scale with the viewport so headlines never touch the edges. */
@media (max-width: 480px) {
  h1, .h1 { font-size: clamp(30px, 10.4vw, 42px); }
}

.sub {
  font-size: clamp(15px, 1.6vw, 18px);
  font-weight: 400;
  color: var(--grey);
  max-width: 560px;
  margin: 0 auto;
}
.on-white .sub { color: var(--grey-dark); }

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

.btn {
  display: inline-block;
  min-width: 220px;
  padding: 15px 42px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
  border: 1px solid var(--white);
  color: var(--white);
  background: transparent;
  transition: background 0.25s ease, color 0.25s ease;
  cursor: pointer;
}
.btn:hover { background: var(--white); color: var(--black); }

.btn.solid { background: var(--white); color: var(--black); }
.btn.solid:hover { background: transparent; color: var(--white); }

.btn.sm { min-width: 0; padding: 9px 22px; font-size: 10.5px; }

.on-white .btn { border-color: var(--ink); color: var(--ink); }
.on-white .btn:hover { background: var(--ink); color: var(--white); }
.on-white .btn.solid { background: var(--ink); color: var(--white); border-color: var(--ink); }
.on-white .btn.solid:hover { background: transparent; color: var(--ink); }

.btn-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

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

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  height: 60px;
  background: transparent;
  transition: background 0.3s ease;
}
.nav.scrolled, .nav.open, .nav.solid { background: var(--black); }

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--white);
}
.wordmark span { color: var(--grey); font-weight: 400; }
/* ponytail: mask (not <img>) so the mark inherits currentColor from one source file */
.wm-mark {
  width: 22px; height: 22px; flex: none;
  background: currentColor;
  -webkit-mask: url(/assets/img/logo/flowfinds-mark.svg) center/contain no-repeat;
  mask: url(/assets/img/logo/flowfinds-mark.svg) center/contain no-repeat;
}

.nav-links { display: flex; gap: 34px; }
.nav-links a {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  color: var(--white);
  opacity: 0.85;
  transition: opacity 0.2s;
}
.nav-links a:hover { opacity: 1; }
/* A nav link that wraps to two lines is taller than the 60px bar it sits in */
.nav-links > li > a, .nav-links > a { white-space: nowrap; }

.burger { display: none; flex-direction: column; gap: 7px; padding: 10px 2px; }
.burger i { display: block; width: 26px; height: 1px; background: var(--white); transition: transform 0.3s ease, opacity 0.3s ease; }
.nav.open .burger i:first-child { transform: translateY(4px) rotate(45deg); }
.nav.open .burger i:last-child { transform: translateY(-4px) rotate(-45deg); }

/* Burger cuts in at 1140px. It was 1080, which held for the seven standard
   links but not for a product page: site.js injects an eighth ("Store layout")
   and at 1081–1140 the row grew until it touched the wordmark — measured gap
   0px at 1100px wide, with the injected link wrapping onto a second line. */
@media (max-width: 1140px) {
  .nav-links {
    position: fixed;
    inset: 60px 0 0 0;
    background: var(--black);
    flex-direction: column;
    gap: 0;
    padding: 24px 32px;
    display: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav.open .nav-links { display: flex; }
  .nav-links a {
    font-size: 13px;
    padding: 20px 0;
    border-bottom: 1px solid var(--hair-dark);
    opacity: 1;
  }
  .burger { display: flex; }
}

/* ---------------- bands (full-bleed sections) ---------------- */

.band {
  width: 100%;
  padding: 120px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--black);
  color: var(--white);
  overflow: hidden;
}
.band.on-white { background: var(--white); color: var(--ink); }
.band.tall { min-height: 100svh; justify-content: center; }
.band.hero {
  min-height: 100svh;
  justify-content: flex-start;
  padding-top: 118px;
  padding-bottom: 44px;
}

.band-inner { width: 100%; max-width: 1120px; margin: 0 auto; }

.band .eyebrow { margin-bottom: 18px; }
.band h1, .band h2 { margin-bottom: 14px; }
.band .sub { margin-bottom: 36px; }

/* hero composition: copy on top, art in the middle, specs at the bottom */
.hero-fig {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 8px 0 24px;
}
.hero-fig img {
  max-height: clamp(260px, calc(100svh - 520px), 620px);
  max-width: min(96vw, 900px);
  width: auto;
  height: auto;
}

/* 2026-08-17: transparent knockouts retired by owner decision. EVERY product
   photo on the site is now a white-background studio shot, so nothing dissolves
   into the black page any more and .blend/.img.blend is gone. */

/* product image inside a band */
.band-art { margin: 40px auto; }
.band-art img { width: min(78vw, 640px); margin: 0 auto; }
.band-art.wide img { width: min(86vw, 760px); }

/* ---------------- product hero ----------------
   The picture leads and is the largest thing in the block. Everything beside
   it is trimmed to the decisions actually made here, which are capacity,
   price and order, so the whole hero is readable without scrolling through
   it. Side by side on a desktop, stacked on a phone.
   The section no longer forces 100svh: it is now as tall as its content. */
.band.tall { min-height: 0; padding-top: 118px; padding-bottom: 44px; }
.band.tall .hero-copy { width: 100%; }

.band.tall .band-art:first-child { margin: 0 auto 20px; }
.band.tall .band-art:first-child img {
  width: auto;
  max-width: min(94vw, 640px);
  max-height: 52svh;
}

.band.tall .eyebrow { margin-bottom: 6px; }
.band.tall h1 { font-size: clamp(26px, 3.4vw, 40px); margin-bottom: 8px; }
.band.tall .sub { font-size: 14px; line-height: 1.55; max-width: 440px; margin: 0 auto 12px; }

/* Capacity buttons stay on one row: they shrink together rather than wrapping
   to a second line or a grid. A horizontal scrollbar is the fallback for a
   line with more capacities than a narrow phone can fit at the floor size,
   which beats either wrapping or shrinking text to the point of no longer
   reading as a button. */
.band.tall .cap-select {
  margin: 0 0 12px;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.band.tall .cap-select::-webkit-scrollbar { display: none; }
.band.tall .cap-select button,
.band.tall .cap-select label > span {
  flex: 1 1 0;
  min-width: 52px;
  padding: 9px 6px;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.band.tall .price-line { margin-bottom: 14px; }

/* Order first, full width, then the one fact that belongs directly under a
   purchase decision. Stock and any saving note stay in .buy-facts but the
   markup puts warranty first, so it is the line touching the button. */
.band.tall .btn-row { margin: 0 0 10px; }
.band.tall .btn-row .btn { flex: 1 1 100%; width: 100%; }
.band.tall .buy-facts {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 12px;
  margin: 0 0 10px;
  font-size: 12px;
}
.band.tall .buy-note { margin-top: 10px; font-size: 11.5px; line-height: 1.5; }
.band.tall .specs-strip { margin-top: 26px; }

@media (min-width: 900px) {
  .band.tall { padding-top: 128px; padding-bottom: 52px; }
  .band.tall .band-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0 48px;
    text-align: left;
  }
  .band.tall .band-art:first-child { flex: 0 1 52%; margin: 0; }
  .band.tall .band-art:first-child img { max-width: 100%; max-height: 66svh; }
  .band.tall .hero-copy { flex: 0 1 38%; width: auto; }
  .band.tall .sub { margin-left: 0; margin-right: 0; }
  .band.tall .cap-select { justify-content: flex-start; }
  .band.tall .buy-facts { align-items: flex-start; justify-content: flex-start; }
  .band.tall .specs-strip { flex: 1 1 100%; margin-top: 38px; }
}

/* ponytail: supplier shots are white-background studio photos. On the black theme they
   read as a content break (and white-on-white modules lose their edges entirely), so they
   sit on a deliberate white card with a defined border instead of bleeding into the page.
   Drop the .panel class from a page once it gets a real black-theme cutout. */
.band-art.panel {
  display: flex;
  justify-content: center;
}
/* Every white-background product shot sitting on the black theme gets the same
   card, so a module's edges never disappear into the page. */
.band-art.panel img,
.hero-half:not(.light) img,
.shop-card img {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .18);
  border-radius: 14px;
  padding: 3%;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .55);
}

/* ---------------- spec digit blocks (SpaceX) ---------------- */

.specs-strip {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 0;
  margin-top: 48px;
  width: 100%;
}
.spec-block {
  padding: 0 clamp(18px, 4vw, 56px);
  border-left: 1px solid var(--hair-dark);
  text-align: center;
}
.spec-block:first-child { border-left: none; }
.on-white .spec-block { border-left-color: var(--hair-light); }
.on-white .spec-block:first-child { border-left: none; }

.spec-num {
  font-size: clamp(34px, 4.6vw, 64px);
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.spec-num sup { font-size: 0.42em; font-weight: 400; vertical-align: super; }
.spec-label {
  margin-top: 6px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  color: var(--grey);
}

@media (max-width: 640px) {
  .specs-strip { flex-wrap: wrap; row-gap: 28px; }
  .spec-block { flex: 1 1 40%; padding: 0 8px; }
  .spec-block:nth-child(odd) { border-left: none; }
}

/* ---------------- price line ---------------- */

.price-line {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.04em;
  margin-bottom: 28px;
}
.price-line .amount { font-weight: 500; }
.price-line .per { color: var(--grey); }
/* Reference price + saving. Three sizes, one rule each, no new component.
   The charged figure is the only thing at full size and full contrast; the
   struck figure drops a step and goes grey so it reads as history, not as a
   second price; the saving is set as a rectangular tag in the same letterspaced
   small-caps the rest of the site uses for labels. Rectangular and monochrome
   because the design system forbids radius, gradient and shadow — a rounded
   coloured "sale pill" would be off-system here. currentColor at low alpha for
   the rule, so the tag works on .on-white bands without a second rule. */
.price-line .was {
  margin-left: 9px;
  font-size: 0.8em;
  font-weight: 400;
  color: var(--grey-dark);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.price-line .off {
  margin-left: 9px;
  /* Right padding is a step short of the left: the trailing letter-spacing on
     the last glyph already contributes ~1.5px, so equal padding reads off-centre. */
  padding: 3px 5px 2px 6px;
  border: 1px solid color-mix(in srgb, currentColor 34%, transparent);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--ls-mid);
  line-height: 1;
  white-space: nowrap;
  vertical-align: 2px;
}
/* Fine print drops to its own line: the charged price, its reference and the
   saving are one thought, the VAT/shipping note is another. Inline they read as
   one undifferentiated string of middots. */
.price-line .per { display: block; margin-top: 8px; font-size: 13px; color: var(--grey-dark); }

/* dispatch / warranty / returns line next to buy buttons */
.buy-line {
  margin-top: 16px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  color: var(--grey);
  line-height: 2.1;
}
.buy-line a { color: inherit; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.buy-line a:hover { color: var(--white); }
.on-white .buy-line a:hover { color: var(--ink); }

/* ---------------- buy column ---------------- */

/* ONE measure for the whole buy area. Before this the lede, the capacity ladder,
   the claim line, the destination selector and the order button each found their
   own width and nothing lined up with anything. The ladder is the widest thing
   in the column and therefore sets the measure; everything else aligns to it.
   Deliberately not a grid or a component — a max-width and auto margins is the
   whole mechanism. */
.buy-col { width: 100%; max-width: 640px; margin: 0 auto; }
.buy-col .sub,
.buy-col .price-compare,
.buy-col .dest-box,
.buy-col .biz-box,
.buy-col .fx-note,
.buy-col .fx-switch { max-width: 100%; }
.buy-col .cap-select { margin-left: 0; margin-right: 0; }
/* the injected market/currency lines are centred with the column, not flushed left */
.buy-col .fx-switch, .buy-col .fx-note { margin-left: auto; margin-right: auto; }

/* Facts about the SELECTED variant. One per row, readable size, sentence case.
   They were three lines of 10.5px uppercase run together into one paragraph —
   the stock sentence and the savings sentence collided with no separator, which
   is a correctness bug as much as a legibility one. An empty span (an uncounted
   SKU, a claim with no evidence) collapses and leaves no stray separator. */
.buy-facts {
  margin: 14px 0 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--grey);
}
.buy-facts > span:empty { display: none; }
.on-white .buy-facts { color: var(--grey-dark); }

/* The single line under the order button. Replaced four stacked micro-caps
   blocks; the card brands live in the footer and the warranty/returns terms in
   the specification table, so neither is repeated here. */
.buy-note {
  margin-top: 18px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--grey);
}
.on-white .buy-note { color: var(--grey-dark); }
.buy-note a { color: inherit; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.buy-note a:hover { color: var(--white); }
.on-white .buy-note a:hover { color: var(--ink); }

/* ---------------- price comparison ---------------- */

/* Reads as a specification detail, not a promotion: the hairline rules, small
   caps and type scale of .spec-table, no fill, no gradient, no shadow (the
   design system forbids all three). Loud discount styling on a €900 component
   cheapens it. The lawful basis stays in full behind a native <details>, so the
   honest detail is one click away instead of dominating the buy area. */
/* Centred block, left-aligned rows: the buy column around it is centred, and a
   left-flushed panel in a centred column reads as misplaced. */
.price-compare { max-width: 440px; margin: 0 auto 26px; text-align: left; }
/* Each host flushes the figure to its OWN measure. A's buy column is centred and
   takes the full measure (.buy-col rule further up); B's buy column is
   left-aligned, and a 440px block auto-centred inside it sat 25px in from
   everything above and below it. Same override the destination and business
   boxes already carry for B a few hundred lines down. */
.buy-col .price-compare { margin-top: 22px; }
.b-wrap .price-compare { max-width: 100%; margin-left: 0; margin-right: 0; }
.price-compare figcaption,
.price-compare dt,
.price-compare summary {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  color: var(--grey);
  line-height: 1.7;
}
.price-compare figcaption { padding-bottom: 10px; }
.price-compare dl { border-top: 1px solid var(--hair-light); }
.price-compare dl > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding: 11px 0;
  border-bottom: 1px solid var(--hair-light);
}
.band:not(.on-white) .price-compare dl,
.band:not(.on-white) .price-compare dl > div { border-color: var(--hair-dark); }
.price-compare dd { font-size: 15px; white-space: nowrap; }
.price-compare dd s { color: var(--grey); }
.price-compare details { margin-top: 12px; }
.price-compare summary { cursor: pointer; list-style: none; }
.price-compare summary::-webkit-details-marker { display: none; }
.price-compare summary::after { content: " +"; }
.price-compare details[open] summary::after { content: " \2212"; }
.price-compare summary:hover { color: var(--white); }
.on-white .price-compare summary:hover { color: var(--ink); }
.price-compare details p {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.65;
  color: var(--grey-dark);
}
.band:not(.on-white) .price-compare details p { color: var(--grey); }
.price-compare details a { border-bottom: 1px solid currentColor; }

/* ---------------- capacity selector ---------------- */

.cap-select { display: flex; justify-content: center; margin: 8px 0 26px; }
.cap-select button,
.cap-select label > span {
  min-width: 84px;
  padding: 13px 10px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  border: 1px solid var(--hair-dark);
  border-left-width: 0;
  color: var(--grey);
  transition: color 0.2s, background 0.2s;
}
.cap-select button:first-child,
.cap-select label:first-child > span { border-left-width: 1px; }
.cap-select button:hover,
.cap-select label:hover > span { color: var(--white); }
.cap-select button[aria-pressed="true"],
.cap-select label > input:checked + span {
  background: var(--white);
  color: var(--black);
  border-color: var(--white);
}
/* Native radio behind a styled label: real keyboard arrow-key navigation, real
   screen-reader group semantics, and the visible box is just its label. */
.cap-select label { position: relative; display: flex; cursor: pointer; }
.cap-select label > span { display: block; text-align: center; flex: 1 1 auto; }
.cap-select label > input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.cap-select label > input:focus-visible + span { outline: 1px solid var(--white); outline-offset: -4px; }
@media (max-width: 640px) {
  /* four fixed 84px buttons overflow the content column below ~380px — share the row instead */
  .cap-select button,
  .cap-select label { min-width: 0; flex: 1 1 0; }
  .cap-select button,
  .cap-select label > span { min-width: 0; padding: 13px 6px; }
}
/* A SIX-rung ladder cannot share one phone row. Sharing it gives each rung 57px
   at 390px, and "128 GB (2×64)" then breaks into three lines — no overflow, but
   it reads as broken, and this is the page German Meta traffic lands on. Two
   columns give every rung its whole label on one line.
   Scoped with :has() to ladders of five or more, because the short-label rows
   (8/16/32/64 GB) already fit across and a 2×2 grid would only make them taller.
   Where :has() is unsupported the rule drops and the row behaves as it does
   today. Three lines start below 440px; the breakpoint sits clear of it.
   A grid cannot share borders, so the rungs become separate cells — the same
   shape theme-b.css already uses. DOM order is unchanged, so tab order,
   aria-pressed and the data-sku/data-price contract are untouched. */
@media (max-width: 480px) {
  .cap-select:has(> :nth-child(5)) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .cap-select:has(> :nth-child(5)) > button,
  .cap-select:has(> :nth-child(5)) > label > span { border-left-width: 1px; padding: 14px 8px; }
  /* an odd last rung takes the full width rather than sitting as a half orphan */
  .cap-select:has(> :nth-child(5)) > button:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ---------------- gallery ---------------- */

.gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}
.gallery img { width: 100%; }
@media (max-width: 640px) { .gallery { grid-template-columns: 1fr; } }

/* ---------------- spec table ---------------- */

.spec-table {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  border-collapse: collapse;
  text-align: left;
}
.spec-table tr { border-top: 1px solid var(--hair-light); }
.spec-table tr:last-child { border-bottom: 1px solid var(--hair-light); }
.band:not(.on-white) .spec-table tr { border-color: var(--hair-dark); }
.spec-table th {
  padding: 17px 12px 17px 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  color: var(--grey-dark);
  width: 44%;
  vertical-align: top;
}
.band:not(.on-white) .spec-table th { color: var(--grey); }
.spec-table td { padding: 15px 0; font-size: 15px; }

/* ---------------- 3-up feature columns ---------------- */

.trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}
.trio h3 {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.trio p { font-size: 14.5px; color: var(--grey); line-height: 1.65; }
.on-white .trio p { color: var(--grey-dark); }
@media (max-width: 760px) { .trio { grid-template-columns: 1fr; gap: 40px; } }

/* ---------------- prose (legal pages) ---------------- */

.prose {
  max-width: 680px;
  margin: 0 auto;
  text-align: left;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--ink);
}
.prose h1 { font-size: clamp(34px, 4.6vw, 52px); margin-bottom: 10px; }
.prose .eyebrow { display: block; margin-bottom: 16px; }
.prose h2 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  margin: 44px 0 12px;
}
.prose p, .prose li { color: var(--grey-dark); margin-bottom: 14px; }
.prose ul { margin: 0 0 14px 0; }
.prose li { padding-left: 18px; position: relative; }
.prose li::before { content: "—"; position: absolute; left: 0; color: var(--grey-light); }
.prose strong { color: var(--ink); font-weight: 500; }

/* ---------------- footer ---------------- */

footer {
  background: var(--black);
  color: var(--grey);
  padding: 56px 32px 40px;
  border-top: 1px solid var(--hair-dark);
}
.foot-inner { max-width: 1120px; margin: 0 auto; text-align: center; }
.foot-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 26px;
  margin-bottom: 28px;
}
.foot-links a {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  color: var(--grey);
  transition: color 0.2s;
}
.foot-links a:hover { color: var(--white); }
.foot-pay {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 14px;
}
.fine { font-size: 11.5px; letter-spacing: 0.04em; color: var(--grey-dark); line-height: 1.8; }

/* ---------------- reveal on scroll (only when JS is present) ---------------- */

.rv { transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
.js .rv { opacity: 0; transform: translateY(26px); }
.js .rv.in { opacity: 1; transform: none; }
.rv-1 { transition-delay: 0.08s; }
.rv-2 { transition-delay: 0.16s; }
.rv-3 { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; } }

/* ---------------- checkout notice ---------------- */

.order-note {
  display: none;
  margin: 18px auto 0;
  max-width: 480px;
  border: 1px solid var(--hair-dark);
  padding: 14px 18px;
  font-size: 13px;
  color: var(--grey);
  letter-spacing: 0.03em;
}
.on-white .order-note { border-color: var(--hair-light); color: var(--grey-dark); }
.order-note.show { display: block; }
.order-note a { text-decoration: underline; }

/* ---------------- status page ---------------- */

.status-mark {
  width: 64px; height: 64px;
  border: 1px solid var(--white);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 30px;
  font-size: 24px; font-weight: 300;
}
.ref-chip {
  display: inline-block;
  border: 1px solid var(--hair-dark);
  padding: 10px 22px;
  font-size: 13px;
  letter-spacing: 0.18em;
  margin: 10px 0 26px;
}

/* small helpers */
.mt-0 { margin-top: 0; } .mt-24 { margin-top: 24px; } .mt-48 { margin-top: 48px; }
.mb-8 { margin-bottom: 8px; } .mb-48 { margin-bottom: 48px; }
.dim { color: var(--grey); }

/* ============================================================
   RESEARCH LAYER — compatibility, compare, guide, testing,
   installation, FAQ. Same system: monochrome, rectangular,
   typography-led. Nothing rounded, nothing shaded.
   ============================================================ */

/* ---------------- link tiles ---------------- */

.link-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}
.link-grid a {
  display: block;
  border: 1px solid var(--hair-dark);
  padding: 26px 22px 22px;
  text-align: left;
  transition: background 0.2s ease, color 0.2s ease;
}
.on-white .link-grid a { border-color: var(--hair-light); }
/* ponytail: product thumb on the homepage grid cards. Fixed-ratio white tile so the
   mixed sources (transparent cutouts + white studio shots) all read the same. */
.link-grid .link-thumb {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 520 / 180;
  object-fit: contain;
  background: #fff;
  border-radius: 6px;
  margin-bottom: 18px;
}
.link-grid .t {
  display: block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.link-grid .d { display: block; font-size: 13.5px; line-height: 1.55; color: var(--grey); }
.on-white .link-grid .d { color: var(--grey-dark); }
.link-grid a:hover { background: var(--white); color: var(--black); }
.link-grid a:hover .d { color: var(--grey-dark); }
.on-white .link-grid a:hover { background: var(--ink); color: var(--white); }
.on-white .link-grid a:hover .d { color: var(--grey-light); }
@media (max-width: 760px) { .link-grid { grid-template-columns: 1fr; } }

/* ---------------- compatibility checker ---------------- */

.chk { width: 100%; max-width: 860px; margin: 0 auto; text-align: left; }
.chk-step {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  color: var(--grey);
  margin: 40px 0 14px;
}
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-row label { position: relative; display: block; cursor: pointer; }
.chip-row label > input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip {
  display: block;
  padding: 14px 18px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--hair-dark);
  color: var(--grey);
  cursor: pointer;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.chip:hover { color: var(--white); border-color: var(--white); }
.chip[aria-pressed="true"],
.chip-row label > input:checked + .chip { background: var(--white); color: var(--black); border-color: var(--white); }
.chip-row label > input:focus-visible + .chip { outline: 1px solid var(--white); outline-offset: 2px; }
/* On a white band the chip's own hairline and its selected white fill both
   disappear — the "Pick by workload" row was an invisible control. */
.on-white .chip { border-color: var(--hair-light); color: var(--grey-dark); }
.on-white .chip:hover { color: var(--ink); border-color: var(--ink); }
.on-white .chip[aria-pressed="true"],
.on-white .chip-row label > input:checked + .chip { background: var(--ink); color: var(--white); border-color: var(--ink); }
.on-white .chip-row label > input:focus-visible + .chip { outline-color: var(--ink); }

/* Native controls. Left unstyled these paint the OS's own white boxes with
   black text — on a black page that is the single loudest thing on screen, and
   inside .chk on a WHITE band the inherited white text made typed input
   invisible. Both bands are declared, no control is left to the browser. */
.chk input[type="text"],
.chk input[type="number"],
.chk input[type="email"],
.chk select,
.chk textarea {
  width: 100%;
  background: transparent;
  border: 1px solid var(--hair-dark);
  color: var(--white);
  font-family: inherit;
  font-size: 15px;
  letter-spacing: 0.02em;
  padding: 16px;
}
.chk select {
  /* appearance:none removes the OS box; the caret is two gradient wedges so it
     inherits currentColor and needs no image asset. */
  -webkit-appearance: none;
  appearance: none;
  padding-right: 44px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-size: 6px 6px, 6px 6px;
  background-position: right 22px center, right 16px center;
  background-repeat: no-repeat;
}
.chk select option { background: var(--black); color: var(--white); }
.chk textarea { resize: vertical; min-height: 130px; line-height: 1.6; }
.chk input:focus, .chk select:focus, .chk textarea:focus { outline: none; border-color: var(--white); }
.chk ::placeholder { color: var(--grey-dark); }
.chk input[type="checkbox"], .chk input[type="radio"] {
  width: 14px; height: 14px; margin-right: 6px;
  accent-color: var(--white); vertical-align: -2px; cursor: pointer;
}
/* Two stacked controls under one step (the GB/speed pair, the slots/mode pair)
   sat flush against each other with no gap at all. */
.chk input[type="number"] + input[type="number"],
.chk input[type="number"] + select,
.chk select + select { margin-top: 8px; }
.chk button[type="submit"] { margin-top: 28px; }

.on-white .chk input[type="text"],
.on-white .chk input[type="number"],
.on-white .chk input[type="email"],
.on-white .chk select,
.on-white .chk textarea { border-color: var(--hair-light); color: var(--ink); }
.on-white .chk select option { background: var(--white); color: var(--ink); }
.on-white .chk input:focus,
.on-white .chk select:focus,
.on-white .chk textarea:focus { border-color: var(--ink); }
.on-white .chk input[type="checkbox"], .on-white .chk input[type="radio"] { accent-color: var(--ink); }
.chk-plat-note { margin-top: 14px; font-size: 13.5px; color: var(--grey); line-height: 1.6; }
.verdicts { margin-top: 10px; }
.verdict { border: 1px solid var(--hair-dark); padding: 22px; margin-top: 8px; }
.verdict .vh { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.verdict .vn { font-size: 15px; font-weight: 500; letter-spacing: 0.02em; }
.vs {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid var(--grey-dark);
  color: var(--grey-dark);
  white-space: nowrap;
}
.vs.ok { color: var(--black); background: var(--white); border-color: var(--white); }
.vs.maybe { color: var(--white); border-color: var(--white); }
.verdict .vr { margin-top: 10px; font-size: 13.5px; color: var(--grey); line-height: 1.6; max-width: 640px; }
.verdict .va {
  margin-top: 14px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
}
.verdict .va a { border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.chk-fine { margin-top: 24px; font-size: 13px; color: var(--grey-dark); line-height: 1.65; }
.band:not(.on-white) .chk-fine { color: var(--grey); }

/* ---------------- comparison table ---------------- */

.table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp-table {
  width: 100%;
  min-width: 760px;
  max-width: 1060px;
  margin: 0 auto;
  border-collapse: collapse;
  text-align: left;
}
.cmp-table th, .cmp-table td {
  border-top: 1px solid var(--hair-light);
  padding: 16px 20px 16px 0;
  font-size: 14px;
  line-height: 1.55;
  vertical-align: top;
}
.cmp-table tr:last-child th, .cmp-table tr:last-child td { border-bottom: 1px solid var(--hair-light); }
.cmp-table th[scope="row"] {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  color: var(--grey-dark);
  width: 19%;
  padding-right: 12px;
}
.cmp-table thead th { border-top: none; font-size: 13.5px; font-weight: 600; letter-spacing: 0.04em; }
.cmp-table thead .cmp-price { display: block; margin-top: 6px; font-size: 13px; font-weight: 400; color: var(--grey-dark); }
.cmp-table td { width: 27%; }

/* ---------------- FAQ ---------------- */

.faq { width: 100%; max-width: 760px; margin: 0 auto; text-align: left; }
.faq details { border-top: 1px solid var(--hair-light); }
.faq details:last-child { border-bottom: 1px solid var(--hair-light); }
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding: 22px 0;
  font-size: 15.5px;
  font-weight: 500;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 22px; font-weight: 300; color: var(--grey); line-height: 1; flex: none; }
.faq details[open] summary::after { content: "\2212"; }
.faq .fa { padding: 0 0 26px; font-size: 14.5px; line-height: 1.7; color: var(--grey-dark); max-width: 660px; }
.faq .fa a { text-decoration: underline; }
.faq .fa p { margin-bottom: 12px; }
.faq .fa p:last-child { margin-bottom: 0; }

/* ---------------- numbered steps (installation) ---------------- */

.steps {
  max-width: 680px;
  margin: 0 auto;
  text-align: left;
  list-style: none;
  counter-reset: step;
}
.steps li {
  position: relative;
  padding: 22px 0 22px 64px;
  border-top: 1px solid var(--hair-light);
  counter-increment: step;
  font-size: 15px;
  line-height: 1.7;
  color: var(--grey-dark);
}
.steps li:last-child { border-bottom: 1px solid var(--hair-light); }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 24px;
  font-size: 20px;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.steps li strong { display: block; color: var(--ink); font-weight: 500; margin-bottom: 4px; }

/* ============================================================
   STRUCTURE LAYER — product-line architecture: sticky in-page
   anchor bar, nav dropdown panels, tile grids, performance
   bars, grouped spec tables, columned footer, shop cards.
   Same system: monochrome, rectangular, typography-led.
   ============================================================ */

/* ---------------- sticky in-page anchor bar ---------------- */

.subnav {
  position: sticky;
  top: 60px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 52px;
  padding: 0 32px;
  background: var(--black);
  color: var(--white);
  border-top: 1px solid var(--hair-dark);
  border-bottom: 1px solid var(--hair-dark);
}
.subnav-name {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.subnav-links {
  display: flex;
  gap: 26px;
  flex: 1 1 auto;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.subnav-links::-webkit-scrollbar { display: none; }
.subnav-links a {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  color: var(--grey);
  padding: 19px 0 17px;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
  transition: color 0.2s;
}
.subnav-links a:hover { color: var(--white); }
.subnav-links a.active { color: var(--white); border-bottom-color: var(--white); }
.subnav .btn { min-width: 0; padding: 9px 22px; font-size: 10.5px; flex: none; }
@media (max-width: 640px) {
  .subnav { padding: 0 16px; gap: 14px; }
  .subnav-name { display: none; }
  .subnav-links { gap: 20px; }
}

/* anchored sections stop below the fixed nav + sticky bar */
section[id], div[id].band { scroll-margin-top: 122px; }

/* ---------------- nav dropdown panels ---------------- */

.nav-links { align-items: center; }
.nav-item { position: relative; }
.nav-drop-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  color: var(--white);
  opacity: 0.85;
  padding: 21px 0;
  transition: opacity 0.2s;
}
.nav-drop-btn::after { content: "+"; font-size: 13px; font-weight: 300; line-height: 1; }
.nav-item.open .nav-drop-btn::after { content: "\2212"; }
.nav-drop-btn:hover, .nav-item.open .nav-drop-btn { opacity: 1; }
.nav-panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--black);
  border: 1px solid var(--hair-dark);
  padding: 26px 30px;
  text-align: left;
  gap: 44px;
}
.nav-item.open .nav-panel { display: flex; }
@media (hover: hover) and (min-width: 1081px) {
  /* :hover is the no-JS fallback. .hovering is set by site.js and held for
     220ms after the pointer leaves, so a diagonal move from the narrow trigger
     to a link at the far edge of the wide panel does not close it mid-reach.
     :focus-within gives keyboard users the same panel. */
  .nav-item:hover .nav-panel,
  .nav-item.hovering .nav-panel,
  .nav-item:focus-within .nav-panel { display: flex; }
  .nav-item:hover .nav-drop-btn,
  .nav-item.hovering .nav-drop-btn,
  .nav-item:focus-within .nav-drop-btn { opacity: 1; }
}
.np-col { min-width: 168px; }
.np-h {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 12px;
  white-space: nowrap;
}
.nav-links .np-col a {
  display: block;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--white);
  opacity: 0.85;
  padding: 7px 0;
  white-space: nowrap;
}
.nav-links .np-col a:hover { opacity: 1; }
.np-col a .p { color: var(--grey); }
@media (max-width: 1080px) {
  .nav-item { width: 100%; }
  .nav-drop-btn { display: none; }
  .nav-panel {
    display: block;
    position: static;
    transform: none;
    border: none;
    padding: 0;
  }
  .np-col { min-width: 0; }
  .np-h { padding: 20px 0 4px; margin-bottom: 0; border-bottom: 1px solid var(--hair-dark); }
  .nav-links .np-col a { font-size: 13px; padding: 20px 0; border-bottom: 1px solid var(--hair-dark); opacity: 1; }
}

/* ---------------- feature tile grid (platform band) ---------------- */

.tile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  text-align: left;
}
.tile-grid .tile { border: 1px solid var(--hair-dark); padding: 26px 22px 22px; }
.on-white .tile-grid .tile { border-color: var(--hair-light); }
.tile-grid h3 {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.tile-grid p { font-size: 13.5px; line-height: 1.55; color: var(--grey); }
.on-white .tile-grid p { color: var(--grey-dark); }
@media (max-width: 760px) { .tile-grid { grid-template-columns: 1fr; } }

/* ---------------- performance bars ---------------- */

.perf { width: 100%; max-width: 720px; margin: 44px auto 0; text-align: left; }
.perf-row { margin-bottom: 24px; }
.perf-row:last-of-type { margin-bottom: 0; }
.perf-row .pl {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  color: var(--grey);
}
.perf-row .pl .pv { color: var(--white); font-weight: 500; white-space: nowrap; }
.on-white .perf-row .pl .pv { color: var(--ink); }
.perf-bar { height: 32px; border: 1px solid var(--hair-dark); position: relative; overflow: hidden; }
.on-white .perf-bar { border-color: var(--hair-light); }
.perf-bar i {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: var(--w);
  background: var(--white);
  transition: width 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}
.on-white .perf-bar i { background: var(--ink); }
.js .rv:not(.in) .perf-bar i { width: 0; }
.perf-cap { margin-top: 20px; font-size: 12.5px; line-height: 1.6; color: var(--grey); }
.on-white .perf-cap { color: var(--grey-dark); }

/* ---------------- grouped spec table ---------------- */

.spec-table tr.grp, .cmp-table tr.grp { border-top: none; }
.spec-table tr.grp th, .cmp-table tr.grp th {
  padding: 36px 0 10px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--ink);
  width: auto;
}
.band:not(.on-white) .spec-table tr.grp th { color: var(--white); }
.spec-table tr.grp:first-child th, .cmp-table tbody tr.grp:first-child th { padding-top: 8px; }

/* expandable full-spec group (native details) */
.spec-x { width: 100%; max-width: 720px; margin: 0 auto; text-align: left; }
.spec-x summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding: 20px 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  border-top: 1px solid var(--hair-light);
}
.band:not(.on-white) .spec-x summary { border-color: var(--hair-dark); }
.spec-x summary::-webkit-details-marker { display: none; }
.spec-x summary::after { content: "+"; font-size: 18px; font-weight: 300; color: var(--grey); line-height: 1; }
.spec-x[open] summary::after { content: "\2212"; }

/* ---------------- compare table: sticky reference lines ---------------- */

/* the base .band clips overflow, which disables position:sticky inside it —
   the compare table band opts out so its header row can pin */
.band.no-clip { overflow: visible; }

@media (min-width: 900px) {
  .table-scroll { overflow-x: visible; }
  .cmp-table thead th {
    position: sticky;
    top: 112px;
    z-index: 5;
    background: var(--white);
    padding-top: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--hair-light);
  }
}
@media (max-width: 899px) {
  .cmp-table th[scope="row"],
  .cmp-table thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--white);
  }
}

/* ---------------- shop band card ---------------- */

.shop-card {
  border: 1px solid var(--hair-dark);
  padding: 44px 28px 40px;
  max-width: 560px;
  margin: 0 auto;
}
.on-white .shop-card { border-color: var(--hair-light); }
.shop-card img { margin: 0 auto 26px; max-height: 220px; width: auto; }
.shop-card .sc-name {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

/* ---------------- columned footer ---------------- */

.foot-cols {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 36px;
  max-width: 1120px;
  margin: 0 auto 44px;
  text-align: left;
}
.foot-h {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 14px;
}
.foot-cols a {
  display: block;
  font-size: 12.5px;
  letter-spacing: 0.03em;
  color: var(--grey);
  padding: 5px 0;
  transition: color 0.2s;
}
.foot-cols a:hover { color: var(--white); }
@media (max-width: 760px) { .foot-cols { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .foot-cols { grid-template-columns: 1fr; } }

/* ---------------- split hero (RAM | NVMe) ---------------- */

.hero-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  max-width: 1120px;
  margin: 40px auto 0;
  border: 1px solid var(--hair-dark);
}
.hero-half {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px 32px 44px;
  gap: 6px;
}
.hero-half.light { background: var(--white); color: var(--ink); }
.hero-half img {
  width: min(60%, 300px);
  height: auto;
  margin-bottom: 22px;
}
.hero-half h2 { font-size: clamp(22px, 2.6vw, 32px); margin-bottom: 6px; }
.hero-half .cat {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 14px;
}
.hero-half .sub { font-size: 14.5px; margin-bottom: 22px; }
.hero-half.light .sub { color: var(--grey-dark); }
.hero-half .from { font-size: 13px; color: var(--grey); margin-top: 14px; }
.hero-half.light .from { color: var(--grey-dark); }
.hero-half.light .btn { border-color: var(--ink); color: var(--ink); }
.hero-half.light .btn:hover { background: var(--ink); color: var(--white); }
.hero-half.light .btn.solid { background: var(--ink); color: var(--white); }
.hero-half.light .btn.solid:hover { background: transparent; color: var(--ink); }
@media (max-width: 760px) { .hero-split { grid-template-columns: 1fr; } }

/* ---------------- shipping destination selector ---------------- */

/* Markup is injected by assets/site.js above every buy CTA; the skin is here
   because only a stylesheet knows this page's palette. Native <select>, native
   <input>, native <button> throughout — appearance:none removes the OS chrome,
   nothing removes the OS behaviour. Same caret trick as .chk select: two
   gradient wedges inheriting currentColor, so there is no image asset. */
.dest-box { width: 100%; max-width: 360px; margin: 0 auto 16px; text-align: left; }
.dest-change {
  display: block;
  margin: 0 auto 12px;
  padding: 0;
  font: inherit;
  font-size: 12px;
  text-decoration: underline;
  color: var(--grey);
  background: none;
  border: none;
  cursor: pointer;
}
.on-white .dest-change { color: var(--grey-dark); }
.dest-change[hidden] { display: none; }
.b-wrap .dest-box, .b-hero .dest-box { margin-left: 0; }
.dest-box[hidden], .dest-no[hidden] { display: none; }
.dest-lb span {
  display: block;
  margin-bottom: 8px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  color: var(--grey);
}
.dest-sel {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  box-sizing: border-box;
  padding: 14px 44px 14px 14px;
  font-family: inherit;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--white);
  background-color: transparent;
  border: 1px solid var(--hair-dark);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-size: 6px 6px, 6px 6px;
  background-position: right 22px center, right 16px center;
  background-repeat: no-repeat;
  cursor: pointer;
  transition: border-color 0.2s;
}
.dest-sel option { background: var(--black); color: var(--white); }
.dest-sel:hover { border-color: var(--grey-dark); }
.dest-sel:focus { outline: none; border-color: var(--white); }
.dest-sel:focus-visible { outline: 1px solid var(--white); outline-offset: 2px; }
.dest-box.invalid .dest-sel { border-color: #c0392b; }
.dest-no {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  padding: 16px;
  border: 1px solid var(--hair-dark);
  font-size: 13px;
  line-height: 1.6;
  color: var(--grey);
}
.dest-no p { margin: 0; }
.dest-notify { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.dest-notify input, .dest-notify button {
  font-family: inherit;
  font-size: 13px;
  padding: 11px 12px;
  box-sizing: border-box;
  background: transparent;
  color: var(--white);
  border: 1px solid var(--hair-dark);
}
.dest-notify input::placeholder { color: var(--grey-dark); }
.dest-notify input:focus, .dest-notify button:focus-visible { outline: none; border-color: var(--white); }
.dest-notify button { letter-spacing: 0.08em; text-transform: uppercase; font-size: 11px; font-weight: 500; cursor: pointer; }
.dest-notify button:hover { background: var(--white); color: var(--black); border-color: var(--white); }

.on-white .dest-lb span { color: var(--grey-dark); }
.on-white .dest-sel, .on-white .dest-notify input, .on-white .dest-notify button {
  color: var(--ink);
  border-color: var(--hair-light);
}
.on-white .dest-sel option { background: var(--white); color: var(--ink); }
.on-white .dest-sel:focus, .on-white .dest-notify input:focus { border-color: var(--ink); }
.on-white .dest-no { border-color: var(--hair-light); color: var(--grey-dark); }
.on-white .dest-notify button:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }

/* ---------------- stock allocation line (below CTA, above biz-box) ---------------- */

.buy-stock { display: block; margin: 10px 0 0; font-size: 12px; line-height: 1.5; text-align: center; color: var(--ink-dim, #666); }

/* ---------------- "people also bought" rail ---------------- */
/* Navigation, not a buy button: every item is a link to that product's own
   page, where its own Order button charges its own catalog price. No new
   SKU, no new pricing decision — just cross-linking real, already-priced,
   already-stocked lines. */

.gr-rail { margin-top: 16px; text-align: left; }
.gr-rail-label { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--grey, #999); margin: 0 0 10px; }
.gr-rail-items { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 2px; }
.gr-item { flex: 0 0 auto; width: 116px; text-align: center; text-decoration: none; color: inherit; }
.gr-item img { width: 100px; height: 100px; object-fit: cover; border: 1px solid var(--hair-dark, #333); border-radius: 2px; }
.gr-item .gr-item-name { display: block; font-size: 12px; margin-top: 6px; line-height: 1.3; }
.gr-item .gr-item-price { display: block; font-size: 11px; color: var(--grey, #999); margin-top: 2px; }
.b-wrap .gr-rail-label, .b-hero .gr-rail-label,
.b-wrap .gr-item .gr-item-price, .b-hero .gr-item .gr-item-price { color: var(--b-mute, #777); }
.b-wrap .gr-item img, .b-hero .gr-item img { border-color: var(--b-line, #ddd); }

/* ---------------- business (VAT) details box ---------------- */

.biz-box { max-width: 360px; margin: 10px 0 0; text-align: left; }
.b-wrap .biz-box, .b-hero .biz-box { margin: 10px 0 0; }
.btn-row + .biz-box { margin-inline: auto; }
/* The box already spans the buy column's measure (.buy-col rule further up), but
   the toggle inside it is an inline-flex row, so it sat hard against the left
   edge under a centred ORDER button while the price, facts and note above and
   below it were all centred. Centre the row, not the box: the fields underneath
   keep the full measure and their own left-aligned inputs. B's buy column is
   left-aligned, so it is deliberately not included. */
.buy-col .biz-toggle { display: flex; justify-content: center; }
.biz-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--grey);
  cursor: pointer;
}
.on-white .biz-toggle, .b-wrap .biz-toggle { color: var(--grey-dark); }
.biz-toggle:hover { opacity: .8; }
/* accent-color only tints the CHECKED state, so an unchecked box still painted
   the OS's white square on a black page. appearance:none replaces the box;
   :checked draws the tick with a border, which needs no font and no image. */
.biz-toggle input {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  margin: 0;
  background: transparent;
  border: 1px solid var(--hair-dark);
  cursor: pointer;
  position: relative;
  transition: border-color 0.2s, background 0.2s;
}
.biz-toggle:hover input { border-color: var(--grey-dark); }
.biz-toggle input:focus-visible { outline: 1px solid var(--white); outline-offset: 2px; }
.biz-toggle input:checked { background: var(--white); border-color: var(--white); }
.biz-toggle input:checked::after {
  content: "";
  position: absolute;
  left: 4px; top: 1px;
  width: 4px; height: 8px;
  border: solid var(--black);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(43deg);
}
.on-white .biz-toggle input, .b-wrap .biz-toggle input { border-color: var(--hair-light); }
.on-white .biz-toggle input:checked, .b-wrap .biz-toggle input:checked { background: var(--ink); border-color: var(--ink); }
.on-white .biz-toggle input:checked::after, .b-wrap .biz-toggle input:checked::after { border-color: var(--white); }
.on-white .biz-toggle input:focus-visible, .b-wrap .biz-toggle input:focus-visible { outline-color: var(--ink); }
/* ponytail: max-height reveal — no JS animation, no measuring. Two inputs never
   exceed 200px; raise it here if a third field is ever added. */
.biz-fields {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.28s ease, opacity 0.22s ease;
}
.biz-box.open .biz-fields {
  max-height: 120px;
  opacity: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 7px;
}
.biz-fields input {
  width: 100%;
  min-width: 0;
  padding: 7px 9px;
  font: inherit;
  font-size: 12px;
  color: inherit;
  background: transparent;
  border: 1px solid var(--hair-dark);
  border-radius: 0;
}
.on-white .biz-fields input, .b-wrap .biz-fields input { border-color: var(--hair-light); }
.biz-fields input:focus { outline: none; border-color: currentColor; }
.biz-err { display: none; grid-column: 1 / -1; margin: 0; font-size: 11px; color: #c0392b; }
.biz-box.invalid .biz-err { display: block; }
.biz-box.invalid .biz-fields input:placeholder-shown { border-color: #c0392b; }
@media (prefers-reduced-motion: reduce) { .biz-fields { transition: none; } }

/* ---------------- factory proof ----------------
   Two uniform rows: 16:9 video pair, then 4:3 still pair. Mixing the ratios in
   one grid left ragged rows; two grids is less CSS than making them agree. */

.fac-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto 8px;
  text-align: left;
}
.fac-grid:last-of-type { margin-bottom: 0; }
@media (min-width: 761px) { .fac-grid { grid-template-columns: 1fr 1fr; } }
.fac-grid figure { margin: 0; }
.fac-grid img, .fac-grid video {
  display: block;
  width: 100%;
  height: auto;
  background: #000;
}
.fac-grid figcaption {
  font-size: 13px;
  line-height: 1.55;
  color: var(--grey);
  padding: 10px 2px 0;
}
.on-white .fac-grid figcaption { color: var(--grey-dark); }

/* ---------------- reviews carousel ----------------
   One review at a time. Built from the same primitives as the rest of the
   page (hairline borders, --grey body copy, centred band-inner column) so it
   reads as part of the layout rather than a widget dropped into it.
   Summary line above, card, then prev/next with a position counter. */
.rv-carousel { max-width: 620px; margin: 0 auto; text-align: left; }

.rv-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-bottom: 30px;
}
.rv-summary .rv-avg { font-size: 34px; font-weight: 600; line-height: 1; letter-spacing: -0.02em; }
.rv-summary .rv-stars { font-size: 15px; letter-spacing: 2px; color: #e0a020; }
.rv-summary .rv-count { font-size: 13px; color: var(--grey); }
.on-white .rv-summary .rv-count { color: var(--grey-dark); }
.rv-summary .rv-variant {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 4px 10px;
  border: 1px solid var(--hair-dark);
  color: var(--grey);
}
.on-white .rv-summary .rv-variant { border-color: var(--hair-light); color: var(--grey-dark); }

.rv-card {
  border: 1px solid var(--hair-dark);
  padding: 30px 32px;
  min-height: 190px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.on-white .rv-card { border-color: var(--hair-light); }
.rv-card .rv-card-stars { font-size: 13px; letter-spacing: 2px; color: #e0a020; margin: 0 0 12px; }
.rv-card h3 { font-size: 17px; line-height: 1.35; margin: 0 0 10px; }
.rv-card .rv-body { font-size: 14.5px; line-height: 1.65; color: var(--grey); margin: 0 0 14px; }
.on-white .rv-card .rv-body { color: var(--grey-dark); }
.rv-card .rv-name { font-size: 12px; letter-spacing: 0.04em; color: var(--grey); margin: 0; }
.on-white .rv-card .rv-name { color: var(--grey-dark); }

.rv-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 22px; }
.rv-nav button {
  width: 40px;
  height: 40px;
  padding: 0;
  font: inherit;
  font-size: 18px;
  line-height: 1;
  color: inherit;
  background: transparent;
  border: 1px solid var(--hair-dark);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.on-white .rv-nav button { border-color: var(--hair-light); }
.rv-nav button:hover { border-color: currentColor; }
.rv-nav button:disabled { opacity: 0.25; cursor: default; }
.rv-nav button:disabled:hover { border-color: var(--hair-dark); }
.rv-counter { font-size: 12.5px; color: var(--grey); min-width: 62px; text-align: center; font-variant-numeric: tabular-nums; }
.on-white .rv-counter { color: var(--grey-dark); }

@media (max-width: 700px) {
  .rv-card { padding: 24px 20px; min-height: 210px; }
  .rv-summary { margin-bottom: 24px; }
  .rv-summary .rv-avg { font-size: 28px; }
}

/* ---------------- pick by machine ----------------
   A single select instead of a row of chips, so the recommendation is
   something the visitor asks for rather than something already sitting on
   the page before they have said anything. */
.aud { max-width: 560px; margin: 0 auto; text-align: left; }
.aud-sel {
  display: block;
  width: 100%;
  padding: 13px 40px 13px 14px;
  font: inherit;
  font-size: 15px;
  color: inherit;
  background: transparent
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M5 8l5 5 5-5" stroke="%238b8f94" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>')
    no-repeat right 12px center;
  background-size: 16px;
  border: 1px solid var(--hair-dark);
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
}
.on-white .aud-sel { border-color: var(--hair-light); }
.aud-sel:focus { outline: none; border-color: currentColor; }
.aud-sel option { background: var(--black); color: var(--white); }
.on-white .aud-sel option { background: var(--white); color: var(--ink); }

.aud-body[hidden] { display: none; }
.aud-body { margin-top: 22px; }
.aud-body h3 { font-size: 17px; margin: 0 0 8px; }
.aud-body p { font-size: 14px; line-height: 1.65; color: var(--grey); margin: 0 0 8px; }
.on-white .aud-body p { color: var(--grey-dark); }
.aud-body p.dim { font-size: 13px; }
.aud-body strong { color: inherit; font-weight: 600; }

.aud-cta[hidden] { display: none; }
.aud-cta { margin-top: 18px; }

/* ---------------- will it fit ----------------
   One question, one answer. Replaces the platform chip row, the board box and
   the verdict list that used to fill the compatibility section. */
.fit { max-width: 620px; margin: 0 auto; text-align: left; }
.fit-label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 10px;
}
.on-white .fit-label { color: var(--grey-dark); }
.fit-row { display: flex; gap: 10px; flex-wrap: wrap; }
.fit-row input {
  flex: 1 1 240px;
  min-width: 0;
  padding: 13px 14px;
  font: inherit;
  font-size: 15px;
  color: inherit;
  background: transparent;
  border: 1px solid var(--hair-dark);
  border-radius: 0;
}
.on-white .fit-row input { border-color: var(--hair-light); }
.fit-row input:focus { outline: none; border-color: currentColor; }
.fit-row .btn { flex: 0 0 auto; }
.fit-hint { font-size: 12.5px; line-height: 1.6; color: var(--grey); margin: 12px 0 0; }
.on-white .fit-hint { color: var(--grey-dark); }
.fit-hint strong { color: inherit; font-weight: 600; }

.fit-out:empty { display: none; }
.fit-card { border: 1px solid var(--hair-dark); border-left-width: 3px; padding: 20px 22px; margin-top: 22px; }
.on-white .fit-card { border-color: var(--hair-light); }
.fit-card.is-yes { border-left-color: #2f9e6b; }
.fit-card.is-no { border-left-color: #c0392b; }
.fit-card.is-ask { border-left-color: #d9a020; }
.fit-verdict { font-size: 17px; font-weight: 500; margin: 0 0 10px; }
.fit-card p { font-size: 14px; line-height: 1.65; color: var(--grey); margin: 0 0 10px; }
.on-white .fit-card p { color: var(--grey-dark); }
.fit-card p:last-child { margin-bottom: 0; }
.fit-card .fit-verdict { color: inherit; }
.fit-card a { text-decoration: underline; }
.fit-card strong { color: inherit; font-weight: 600; }
@media (max-width: 620px) {
  .fit-row .btn { flex: 1 1 100%; }
  .fit-card { padding: 18px 16px; }
}

/* ---------------- how it arrives ----------------
   Portrait clip, so it is capped rather than allowed to run the full band
   width. Same hairline frame as the review card above it. */
.arrives-media { max-width: 380px; margin: 0 auto; }
.arrives-media video {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--hair-dark);
  background: #000;
}
.on-white .arrives-media video { border-color: var(--hair-light); }
.arrives-media figcaption {
  font-size: 13px;
  line-height: 1.55;
  color: var(--grey);
  padding: 12px 2px 0;
  text-align: left;
}
.on-white .arrives-media figcaption { color: var(--grey-dark); }
@media (max-width: 700px) { .arrives-media { max-width: 300px; } }

/* ---------------- video hero (homepage) ----------------
   Full-bleed silent loop behind minimal copy. The poster sits on the section
   as a background-image, so it covers the load, a failed fetch, a blocked
   autoplay and prefers-reduced-motion with one declaration — the <video> is
   purely additive on top of it.
   ponytail: no player library, no JS beyond picking the 1280 file on phones. */
.video-hero {
  position: relative;
  width: 100%;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  background: var(--black) url(/assets/img/hero-ddr5-poster.jpg) center / cover no-repeat;
}
.video-hero video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* scrim: dark under the nav and under the copy, clear through the middle */
.video-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0) 26%,
    rgba(0, 0, 0, 0) 36%,
    rgba(0, 0, 0, 0.58) 64%,
    rgba(0, 0, 0, 0.9) 100%
  );
  pointer-events: none;
}
.vh-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1120px;
  padding: 0 24px 92px;
  text-align: center;
}
.vh-title {
  font-size: clamp(30px, 4.6vw, 56px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.015em;
}
.vh-sub {
  max-width: 620px;
  margin: 16px auto 0;
  font-size: clamp(13px, 1.25vw, 16px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}
.vh-inner .btn-row { margin-top: 34px; }
.vh-inner .btn { min-width: 240px; }
.vh-scroll {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%) rotate(45deg);
  z-index: 1;
  width: 13px;
  height: 13px;
  border-right: 1px solid rgba(255, 255, 255, 0.85);
  border-bottom: 1px solid rgba(255, 255, 255, 0.85);
  animation: vh-nudge 2.4s ease-in-out infinite;
}
@keyframes vh-nudge {
  0%, 100% { transform: translateX(-50%) rotate(45deg) translate(0, 0); opacity: 0.55; }
  50%      { transform: translateX(-50%) rotate(45deg) translate(3px, 3px); opacity: 1; }
}
@media (max-width: 700px) {
  .vh-inner { padding-bottom: 84px; }
  .vh-inner .btn-row { margin-top: 26px; }
  .vh-inner .btn { min-width: 0; flex: 1 1 100%; }
}
/* Motion off: no video download (site.js checks too), poster only. */
@media (prefers-reduced-motion: reduce) {
  .video-hero video, .vh-scroll { display: none; }
}
/* The band below the video hero no longer needs to clear the fixed nav, and a
   second full-height screen straight after the video read as dead space. */
.video-hero + .band.hero { min-height: 0; padding-top: 96px; }

/* ---------------- iOS: no zoom on focus ----------------
   Mobile Safari zooms the viewport whenever a focused form control is under
   16px, and never zooms back out. That hit the chat box, the destination
   select and the business/VAT fields. Fixing it with maximum-scale would take
   pinch-zoom away from everyone, so the control text is 16px on small screens
   instead — the one thing Safari actually checks.
   ponytail: one rule, no per-widget overrides. */
@media (max-width: 900px) {
  input, select, textarea,
  .ff-chat-email, .ff-chat-msg-in,
  .dest-sel, .biz-company, .biz-vat {
    font-size: 16px !important;
  }
}

/* ---------------- product-page configurator hand-off ----------------
   Three fields on the product page that forward to /compatibility, which owns
   the real questionnaire and the guarantee logic. Kept here rather than inline
   because three product pages share it. */
.cfg { max-width: 900px; margin: 0 auto; text-align: left; }
.cfg-row { display: grid; grid-template-columns: 1fr 1fr 160px; gap: 14px; margin-bottom: 18px; }
.cfg-row label { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--grey); }
.on-white .cfg-row label { color: var(--grey-dark); }
.cfg-row input, .cfg-row select {
  display: block; width: 100%; margin-top: 7px; padding: 13px 14px;
  font: inherit; font-size: 14px; letter-spacing: normal; text-transform: none;
  background: transparent; color: inherit; border: 1px solid var(--hair-dark); border-radius: 0;
}
.on-white .cfg-row input, .on-white .cfg-row select { border-color: var(--hair-light); }
.cfg-row input:focus, .cfg-row select:focus { outline: 1px solid currentColor; outline-offset: -2px; }
.cfg .btn { width: 100%; max-width: 420px; }
@media (max-width: 760px) { .cfg-row { grid-template-columns: 1fr; } }

/* ponytail: fast-shipping line reads as a selling point, not fine print. */
.delivery-est { font-weight: 700; }