/* ===================================================================
   DTF Station Global — stylesheet.

   2026-09-05: PORTED FROM THE US SITE.
   This file used to carry the older Apple-style system (#34c9d4 accent,
   gold->teal gradient, SF stack, 1120px, 52px nav, black bands). The US
   site (~/Projects/dtfstation-us-site) moved past it over August: Poppins,
   the #49BFBC brand teal with a derived readable ink, the gold/teal brand
   wash, 28px radii, a soft far-thrown shadow language, and no black slabs
   anywhere. Jason asked for that design copied here exactly, keeping this
   site's 7 locales, its functions and its product roster.

   WHERE IT CAME FROM
     shared/design/tokens.css      -> "TOKENS" below
     shared/design/components.css  -> "COMPONENTS" below
     site/src/styles/main.css      -> "BASE" below
   The US files are scoped to `.gs` because they share a page with a legacy
   Shopify stylesheet. Nothing competes here, so the scoping is dropped and
   the tokens sit on :root. That is the ONLY intentional divergence — every
   value is otherwise verbatim. Read the US files for the reasoning behind
   any single number; the important notes are carried across below.

   GLOBAL-ONLY COMPONENTS (locale picker, dealer locator, ICC finder, ROI
   calculator, downloads, videos, events, blog) have no US counterpart.
   They are restyled INTO this language rather than copied, and live in the
   last section. They keep their class names and markup, so the i18n hooks,
   the JS and the locale build are untouched.
   =================================================================== */

/* ===================================================================
   BASE
   =================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  /* Literal as well as tokenised: this rule is read before :root resolves
     on a cold cache, and an unstyled first paint should still be the right
     ground. #fbfbfd is the brand canvas, not pure white — see --bg. */
  background: #fbfbfd;
  position: relative;
  font-family: var(--font);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }

/* ---------- THE BRAND WASH ----------
   Jason asked for the teal-and-gold background from the social posts,
   "throughout the page". FIXED to the viewport, not scrolling: the wash is
   defined in a 4:5 card as gold in one corner and teal in two others.
   Painted onto a 5,000px document those radials stretch into meaningless
   bands and the corner relationship — the whole point — is lost. Fixed, you
   are always looking at one washed surface and the content scrolls over it.

   This replaces the blurred gradient "orbs" the old design put behind each
   hero. Those were per-section decorations; this is one continuous ground,
   which is why the hero rules below no longer paint anything of their own.

   z-index -1 keeps it under everything without a stacking context on every
   section. pointer-events:none so it can never eat a click.

   This is also why cards are pure #fff while the page is #fbfbfd: white now
   reads as slightly raised against a tinted ground. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--brand-wash);
}

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

/* ===================================================================
   TOKENS   (verbatim from us-site/shared/design/tokens.css)
   =================================================================== */
:root {
  /* --- ink --- */
  --ink: #202124;
  --ink-soft: #5f6368;
  /* Deepened twice on 2026-09-03. This token carries every eyebrow, spec
     label, card kicker, form hint and the footer legal line, so a failure
     here is sitewide. The ground it has to clear is not a flat colour — it
     is the strongest pixel of the brand wash inside the content column,
     rgb(205,235,236) in the teal corner. #5c6167 is 4.98:1 there and clears
     4.5 on every card and tint ground too. Do not lighten without
     re-sampling a rendered plate. */
  --ink-faint: #5c6167;
  --line: #dadce0;
  --line-soft: #e8eaed;

  /* --- ground --- */
  --bg: #fbfbfd;
  --bg-alt: #f8f9fa;

  /* --- the brand wash ---
     Three soft radials over --bg: gold from the top-left, teal from the
     top-right and the bottom-right. Positions, opacities and falloffs are
     the locked social-card values.

     WARNING: --wash-gold IS A BACKGROUND VALUE AND NEVER A TEXT COLOUR.
     Gold was removed from --grad precisely because gold text fails on
     white. It is back only as a wash behind content. */
  --wash-gold: 253, 205, 129;
  --wash-teal: 73, 191, 188;
  --brand-wash:
    radial-gradient(80% 86% at -8% -6%,  rgba(var(--wash-gold), .50), rgba(var(--wash-gold), 0) 72%),
    radial-gradient(76% 82% at 108% -4%, rgba(var(--wash-teal), .32), rgba(var(--wash-teal), 0) 70%),
    radial-gradient(74% 80% at 106% 104%, rgba(var(--wash-teal), .36), rgba(var(--wash-teal), 0) 72%);

  /* The same wash tuned for a CARD — half strength, pulled to the corners,
     because a card is a fraction of the viewport and the page values would
     read as a colour cast rather than a wash. */
  --brand-wash-card:
    radial-gradient(92% 104% at -4% -10%, rgba(var(--wash-gold), .34), rgba(var(--wash-gold), 0) 70%),
    radial-gradient(88% 100% at 104% 108%, rgba(var(--wash-teal), .30), rgba(var(--wash-teal), 0) 72%);

  /* --- card surfaces ---
     Cards and banners are DELIBERATELY ONE SURFACE: white, with a hairline
     edge so they still read as cards against a washed page. Jason's call —
     a page of teal/sand/blush/sage cards read as busy rather than as a
     system. The colour tints stay defined because the selected states on
     .cfg-opt / .chip-printer / .pf-opt read --tint-teal, and because
     restoring per-family colour should be a one-line change, not a
     re-derivation. */
  --tint-neutral: #ffffff;
  /* Drawn INSIDE the border-radius via inset box-shadow, so it never fights
     `overflow:hidden` on a media well the way a real border does (a border
     would also add 2px to the box and knock the mosaic's 6-column maths
     out). */
  --edge: inset 0 0 0 1px var(--line-soft);
  --edge-hover: inset 0 0 0 1px var(--line);
  --tint-teal: #ECF8F8;
  --tint-sand: #fdf3e0;
  --tint-mist: #eef1f5;
  --tint-sage: #e7f3ec;
  --tint-blush: #fbeceb;
  --tint-slate: #f1f3f4;
  --tint-ink: #202124;

  /* --- brand ---
     #49BFBC is a FILL colour, not a text colour, and the difference is not
     cosmetic — it is 2.22:1 on white, which fails AA for text (4.5) and even
     the 3.0 floor for UI. White text on it is the same 2.22:1. So:

       --accent      #49BFBC  fills, rules, graphics, anything on dark
       --accent-hover#40B5B2  the fill one step down, for button hover
       --accent-ink  #28716F  SAME HUE darkened until it passes on white AND
                              over the brand wash (4.56:1) — text, links

     Buttons filled with --accent take DARK text, not white (7.86:1). Do not
     "fix" that back to white: it is what makes this colour usable at full
     strength instead of muddied. */
  --accent: #49BFBC;
  --accent-hover: #40B5B2;
  --accent-ink: #28716F;
  --accent-tint: #ECF8F8;
  --link: #28716F;

  /* Paints TEXT (.grad-text), so every stop has to be readable on white. It
     runs ink -> --accent-ink rather than through the brand fill: #49BFBC as
     gradient text would be 2.22:1 and the last words of every headline using
     it would disappear. Was a gold -> green -> teal sweep from the old
     brand; the gold is now in the background wash instead. */
  --grad: linear-gradient(100deg, #141b1c 0%, #28716F 100%);

  /* --- geometry --- */
  --r-card: 28px;
  --r-banner: 32px;
  --r-chip: 999px;
  --nav-h: 64px;
  --maxw: 1240px;
  --gap: 16px;

  /* Poppins, Jason's call. Loaded from Google Fonts in every page head —
     the token alone does nothing if the face is not fetched.

       400  body copy
       500  eyebrows, labels, buttons, nav
       600  headings
       700  the big figures

     NOTO SANS KR IS NOT DECORATION. Poppins ships latin + latin-ext +
     devanagari and has NO Korean glyphs, so on /ko/ every character would
     fall through to whatever the device happened to have — a different face
     with a different weight and rhythm on one of our seven locales, and no
     error to tell us. Noto Sans KR sits directly after Poppins so Latin text
     (product names, model numbers, units) still renders in Poppins on
     Korean pages while Hangul resolves to a face we chose. Polish, French,
     Spanish and Portuguese are all covered by latin-ext and need nothing. */
  --font: Poppins, "Noto Sans KR", "Google Sans", Inter, -apple-system,
          BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Tracking, named rather than repeated, so the whole system moves together
     if the face changes again. Poppins is noticeably wider per character
     than the old SF stack, so headline tracking was eased off across the
     board — its own geometry is already tight and piling on -0.035em made
     caps collide. */
  --track-display: -0.02em;
  --track-heading: -0.015em;
  --track-eyebrow: 0.08em;

  /* SHADOW LANGUAGE — the single biggest "premium vs. utility" tell on the
     page. What was here was Material's elevation shadow: tight, close, dark.
     It says "this is a control you can press". This is the opposite — large,
     soft, far-thrown, low opacity, which says "this object is sitting on a
     surface under a big soft light".

     The shape that matters is the NEGATIVE SPREAD. A big blur with no spread
     pull-back reads as grey haze around the whole box; pulling it back by
     roughly half the blur keeps the shadow under the object where a real one
     would be, so the card looks lifted rather than smudged.

     Tinted with the ink hue rather than neutral grey — a pure-grey shadow on
     a warm-white page reads as dirt. */
  --shadow-card: 0 1px 2px rgba(20, 24, 26, .04), 0 18px 40px -24px rgba(20, 24, 26, .22);
  --shadow-lift: 0 2px 6px rgba(20, 24, 26, .05), 0 40px 72px -34px rgba(20, 24, 26, .34);

  /* Product shots are cut-outs on flat colour, which is why they looked
     pasted on. A drop-shadow filter follows the ALPHA CHANNEL — the actual
     silhouette of the machine — instead of its bounding box, so the printer
     casts a shadow shaped like a printer. This replaces the old
     `mix-blend-mode: multiply` trick, which only darkened the shot against
     the ground and did nothing on a white card. */
  --shadow-product: drop-shadow(0 24px 34px rgba(20, 24, 26, .18));
  --shadow-product-lg: drop-shadow(0 40px 56px rgba(20, 24, 26, .26));
  --shadow-product-dark: drop-shadow(0 40px 60px rgba(0, 0, 0, .65));

  /* ---- BACK-COMPAT ALIASES ----
     28 pages of markup and six build scripts were written against the old
     token names. Rather than sed 1,900 attributes and risk the i18n hooks,
     the old names are kept and REPOINTED at the new values. Anything still
     saying var(--radius) or var(--accent-dark) therefore gets the new design
     for free. Do not use these in new rules — they exist to stop the port
     from touching markup it has no reason to touch. */
  --radius: var(--r-card);
  --accent-dark: var(--accent-ink);
  --bg-dark: var(--tint-ink);
  --grad-soft: linear-gradient(100deg, rgba(var(--wash-gold), .16), rgba(var(--wash-teal), .16));
}

@media (max-width: 640px) {
  :root { --r-card: 22px; --r-banner: 24px; --gap: 12px; }
}

/* ===================================================================
   COMPONENTS   (from us-site/shared/design/components.css)
   Design language: clean white canvas, but image-forward — content lives
   inside large rounded cards rather than on bare white. Banners are
   structural here, not decoration.
   =================================================================== */

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Type scale ----------
   REBUILT UPWARDS. The effect being restored is SCALE CONTRAST — one very
   large line against small, quiet body copy. That ratio is doing almost all
   the work in this look; it is not the typeface, the colour or the radii. A
   display line only 3x the body size reads as a document heading. At 5x it
   reads as a statement.

   Body copy deliberately did NOT grow to match. Widening the gap is the
   whole point; scaling everything up together just makes a bigger
   document. */
.display   { font-size: clamp(40px, 6.4vw, 76px); line-height: 1.02; letter-spacing: var(--track-display); font-weight: 600; }
.title-lg  { font-size: clamp(30px, 4.4vw, 52px); line-height: 1.07; letter-spacing: var(--track-display); font-weight: 600; }
.title-md  { font-size: clamp(23px, 2.7vw, 32px); line-height: 1.2; font-weight: 600; }
.lede      { font-size: clamp(17px, 1.5vw, 20px); color: var(--ink-soft); line-height: 1.55; }
.meta      { font-size: 13px; color: var(--ink-faint); }
/* Uppercase Poppins is wider than the old face and needs a touch more air
   between letters to stop reading as a solid block. */
.eyebrow {
  font-size: 12.5px; font-weight: 500; letter-spacing: var(--track-eyebrow);
  text-transform: uppercase; color: var(--ink-faint);
}
/* `on-dark` on an eyebrow used to mean "you are on the black wholesale band".
   Nothing on this site is a flat dark fill any more — the band, the CTA, the
   ROI panel and the flagship tier are all washed white — so the white it used
   to paint is now white-on-white on eleven headings across nine pages.
   The one genuinely dark surface left is a PHOTOGRAPHIC banner, where the
   type sits on a scrim; that case is handled by `.banner.on-dark.has-bg
   .eyebrow` further down and is unaffected by this. */
.eyebrow.on-dark { color: var(--ink-faint); }

h1, h2, h3, h4 { letter-spacing: var(--track-heading); font-weight: 600; line-height: 1.15; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .4em;
  font-size: 15px; font-weight: 500;
  padding: 11px 24px; border-radius: var(--r-chip);
  border: 1px solid transparent; cursor: pointer;
  transition: background .2s, box-shadow .2s, border-color .2s, transform .2s;
  white-space: nowrap; justify-content: center; text-align: center;
  font-family: var(--font);
}
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: #000; box-shadow: var(--shadow-lift); }
/* Dark text on the accent fill, not white — see the note under --accent. */
.btn-accent { background: var(--accent); color: var(--ink); }
.btn-accent:hover { background: var(--accent-hover); box-shadow: var(--shadow-lift); }
.btn-ghost { border-color: var(--line); color: var(--ink); background: transparent; }
.btn-ghost:hover { background: rgba(60, 64, 67, .06); border-color: #c4c7c5; }
.on-dark .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .4); }
.on-dark .btn-ghost:hover { background: rgba(255, 255, 255, .12); }
.on-dark .btn-primary { background: #fff; color: var(--ink); }

/* Text link with a sliding arrow */
.btn-text {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 15px; font-weight: 500; color: var(--link);
  background: none; border: 0; cursor: pointer; font-family: var(--font);
}
.btn-text .arw { transition: transform .2s; }
.btn-text:hover .arw { transform: translateX(4px); }
.on-dark .btn-text { color: var(--accent); }
/* The old stylesheet's generic text link. Repointed off the Google-blue
   #0a84c0, which read as a stray third brand colour next to the teal. */
.tlink { color: var(--link); font-weight: 500; }
.tlink:hover { text-decoration: underline; }

/* ---------- Section rhythm ----------
   The space around a thing is what tells you it is worth looking at. The old
   sheet ran a flat `section{padding:100px 0}`; this is the same generosity
   made fluid, so a phone does not inherit desktop air it has no room for. */
section { padding: clamp(64px, 7.5vw, 104px) 0; }
section.tight { padding: clamp(32px, 3.6vw, 52px) 0; }

.sec-head { margin-bottom: clamp(32px, 3.6vw, 52px); max-width: 720px; }
.sec-head p { margin-top: 12px; color: var(--ink-soft); font-size: clamp(16px, 1.35vw, 19px); line-height: 1.6; }
.sec-head h2 { font-size: clamp(32px, 4.6vw, 58px); line-height: 1.04; letter-spacing: var(--track-display); text-wrap: balance; }
.sec-head .eyebrow { display: block; margin-bottom: 14px; }
/* The old sheet centred every section head. The US design left-aligns them —
   a centred heading over left-aligned content below reads as a title card
   rather than the start of a section. `.center` is kept for the handful of
   places that genuinely want it (the closing CTA, the trust strip). */
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head.left { text-align: left; max-width: 640px; margin-left: 0; margin-right: 0; }

/* ---------- Section lead-in ----------
   eyebrow -> large heading -> paragraph, in a measure narrow enough to read.
   The measure is 40rem on purpose: these headings run to 58px and the page
   is 1240px wide — a heading allowed the full width would run to 90
   characters a line and stop reading as a statement. */
.lead { max-width: 40rem; margin-bottom: clamp(40px, 5vw, 64px); }
.lead-tight { margin-bottom: 32px; }
.lead h2 {
  font-size: clamp(32px, 4.6vw, 58px);
  line-height: 1.04;
  letter-spacing: var(--track-display);
  margin: 14px 0 0;
  text-wrap: balance;
}
.lead-tight h2 { font-size: clamp(26px, 3.2vw, 40px); }
.lead p {
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 20px 0 0;
}

/* Was a tonal shift, then a translucent white veil, now NO GROUND AT ALL.
   Once the wash was strengthened, any veil over it read as a pale horizontal
   stripe cutting across a diagonal gradient — the seam became the most
   visible edge on the page, which is exactly what the veil existed to avoid.
   The wash is the tonal interest now and spacing carries the structure.
   Kept as a no-op class because the markup writes it. */
.band-alt { background: none; }

/* ---------- Category chips (round browse row) ---------- */
.chips {
  display: flex; gap: 10px; overflow-x: auto; padding: 4px 0 12px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 20px 8px 8px; border-radius: var(--r-chip);
  border: 1px solid var(--line); background: #fff;
  font-size: 14px; font-weight: 500; color: var(--ink);
  transition: background .18s, border-color .18s, box-shadow .18s;
}
.chip:hover { background: var(--bg-alt); border-color: #c4c7c5; box-shadow: var(--shadow-card); }
.chip .ic {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; overflow: hidden;
  background: var(--tint-slate); flex: 0 0 auto;
}
.chip .ic img { width: 84%; height: 84%; object-fit: contain; }
/* A chip with no icon well — the plain pill the old dark bands used. */
.chip.plain { padding: 8px 16px; }

/* ===================================================================
   BANNERS — the reason for this design.
   .banner is a single wide rounded card; .mosaic is the grid of them.
   =================================================================== */
.banner {
  position: relative; overflow: hidden;
  border-radius: var(--r-banner);
  background: var(--tint-neutral); box-shadow: var(--edge);
  display: grid; align-items: center;
  /* 380, was 460. These banners are one product each and the copy never
     fills that height, so the extra was empty space pushing everything
     below the fold. */
  min-height: 380px;
}
.banner .banner-body { padding: 48px clamp(28px, 4vw, 64px); max-width: 560px; z-index: 2; }
.banner .banner-body h1,
.banner .banner-body h2 { margin-bottom: 14px; }
/* A banner body is a 560px column, not the full page, so section type set
   for the full width overshoots inside it. One step down from .title-lg —
   still clearly bigger than it was, but sized for the column it occupies.
   `.display` is deliberately NOT included: an h1 banner is the page's
   headline and is meant to fill the box. */
.banner .banner-body .title-lg { font-size: clamp(27px, 3.3vw, 42px); }
.banner .banner-body p { margin-bottom: 24px; }
.banner .banner-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.banner .banner-art {
  position: absolute; inset: 0 0 0 auto; width: 52%;
  display: grid; place-items: center; padding: 32px;
}
/* The cap is on the IMAGE, not just the cell — a tall or near-square shot
   (ink bottles, a floor-standing shaker) will otherwise grow the whole
   banner to fit itself and tower over the copy beside it.
   The radius is for JPGs, which carry a baked-in white background and so
   read as a deliberate photo plate rather than a hard white box.
   Transparent PNGs are unaffected: no opaque area for the radius to clip. */
.banner .banner-art img {
  max-height: 280px; width: auto; object-fit: contain;
  border-radius: 18px;
  filter: var(--shadow-product);
}
.banner.split .banner-art img { max-height: 260px; }
.banner.on-dark .banner-art img,
.banner.t-ink .banner-art img { filter: var(--shadow-product-dark); }
/* A JPG with a baked-in white background is a rectangle, not a silhouette,
   so drop-shadow would trace a hard box around it. */
.banner .banner-art img[src$=".jpg"],
.banner .banner-art img[src$=".jpeg"] { filter: none; }

/* split layout: text left, art right, both in flow (better on tall art) */
.banner.split { grid-template-columns: 1fr 1fr; min-height: 340px; }
.banner.split .banner-art { position: static; width: auto; }

/* art on the left instead of the right — lets a run of stacked banners
   alternate instead of marching down the page in one rhythm.
   THE TEXT STAYS LEFT-ALIGNED. Only the columns swap. Right-aligning a
   paragraph to match the flip makes it noticeably harder to read: every line
   starts at a different x, so the eye loses the return point. */
.banner.flip .banner-art { inset: 0 auto 0 0; }
.banner.flip .banner-body { justify-self: end; }
.banner.split.flip { direction: rtl; }
.banner.split.flip > * { direction: ltr; }

/* Flagship banner treatment. Jason: "I don't like the black background.
   Let's keep everything white and clean." A flat near-black fill is no
   longer used anywhere; the flagship reads as special through the brand
   wash, scale and type instead of through a black rectangle.

   THE `:not(.has-bg)` IS LOAD-BEARING. `on-dark` also goes on PHOTOGRAPHIC
   banners, where the surface is a lit photograph under a scrim and the type
   has to stay white. Only the flat fill changes. */
.banner.on-dark:not(.has-bg) {
  background-color: var(--bg);
  background-image: var(--brand-wash-card);
  color: var(--ink);
  box-shadow: var(--edge);
}
.banner.on-dark:not(.has-bg) .lede { color: var(--ink-soft); }
.banner.on-dark:not(.has-bg) .eyebrow { color: var(--ink-faint); }
.banner.on-dark:not(.has-bg) .btn-ghost { color: var(--ink); border-color: var(--line); }
.banner.on-dark:not(.has-bg) .btn-ghost:hover { background: rgba(60, 64, 67, .06); }
.banner.on-dark:not(.has-bg) .btn-primary { background: var(--ink); color: #fff; }
.banner.on-dark:not(.has-bg) .banner-art img { filter: var(--shadow-product); }

/* Photographic banners keep the near-black ground the scrim is built on. */
.banner.on-dark.has-bg { background: var(--tint-ink); color: #fff; }
.banner.on-dark.has-bg .lede { color: rgba(255, 255, 255, .72); }
.banner.on-dark.has-bg .eyebrow { color: rgba(255, 255, 255, .6); }

/* A banner whose whole surface is a link (campaign artwork, no CTA). */
a.banner { display: grid; }
a.banner:hover { box-shadow: var(--shadow-lift); }

/* Full-bleed artwork banner: a designed image with its own baked-in type.
   No overlay is drawn, so nothing can collide with the artwork. */
.banner.is-art { min-height: 0; padding: 0; display: block; }
.banner.is-art img { width: 100%; height: auto; border-radius: 0; }

/* ---------- Mosaic grid ---------- */
.mosaic {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(6, 1fr);
}
.mosaic > * { grid-column: span 2; }          /* default: thirds */
.mosaic > .span-half { grid-column: span 3; }
.mosaic > .span-full { grid-column: span 6; }
.mosaic > .span-two-thirds { grid-column: span 4; }

/* ---------- Product / content card ---------- */
.card {
  position: relative; display: flex; flex-direction: column;
  border-radius: var(--r-card); overflow: hidden;
  background: var(--tint-neutral); min-height: 340px;
  box-shadow: var(--edge);
  transition: transform .22s ease, box-shadow .22s ease;
}
/* The lift shadow must RESTATE the edge — box-shadow is one property, so a
   hover rule setting only --shadow-lift drops the hairline mid-transition
   and the card visibly loses its outline under the cursor. */
.card:hover { transform: translateY(-3px); box-shadow: var(--edge-hover), var(--shadow-lift); }
.card .card-media {
  flex: 1; display: grid; place-items: center;
  padding: 28px 28px 8px; min-height: 180px;
}
.card .card-media img {
  max-height: 210px; width: auto; object-fit: contain;
  filter: var(--shadow-product);
}
.card.t-ink .card-media img { filter: var(--shadow-product-dark); }
.card .card-media img[src$=".jpg"],
.card .card-media img[src$=".jpeg"] { filter: none; }
.card .card-body { padding: 0 28px 28px; }
.card .card-body h3 { font-size: 19px; margin-bottom: 6px; }
.card .card-body p { font-size: 14px; color: var(--ink-soft); margin-bottom: 14px; }
.card .card-kicker {
  font-size: 12px; font-weight: 500; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 8px;
}
/* text-first card (no product shot) */
.card.text-only { min-height: 240px; justify-content: flex-end; }
.card.text-only .card-body { padding: 28px; }

/* ---------- The old .card shape, brought onto the new surface ----------
   equipment.html and the category grids write `.card` with a `.k / h3 /
   .tag / .cta / .shot` body rather than the `.card-media / .card-body`
   pair. Rather than rewrite that markup in five files (and risk its i18n
   hooks), the old inner parts are restyled onto the new card. Same
   surface, same edge, same lift, same product shadow. */
.card .k {
  font-size: 12px; font-weight: 500; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-faint);
}
.card > h3 { font-size: clamp(21px, 2.4vw, 27px); margin: 10px 0 6px; letter-spacing: var(--track-heading); }
.card .tag { font-size: 15px; color: var(--ink-soft); line-height: 1.5; }
.card .cta { margin-top: 16px; }
.card .shot {
  margin-top: auto; padding-top: 24px;
  display: flex; align-items: flex-end; justify-content: center; height: 250px;
}
/* mix-blend-mode:multiply is gone everywhere — it only darkened a cut-out
   against its ground and did nothing on a white card. The alpha-following
   drop-shadow is what makes these read as photographed objects. */
.card .shot img {
  width: auto; max-width: 100%; object-fit: contain;
  filter: var(--shadow-product);
}
.card .shot img[src$=".jpg"], .card .shot img[src$=".jpeg"] { filter: none; }
.card .shot img.sz-x6 { max-height: 238px; }
.card .shot img.sz-v36r { max-height: 228px; }
.card .shot img.sz-arc { max-height: 198px; }
.card .shot img.sz-prisma { max-height: 224px; }
/* The old sheet gave .card 40px of padding and centred text. The new card
   pads its body instead, so the legacy shape needs its own padding back. */
.card.pad { padding: 36px; }
/* Any card built from the legacy parts — identified by the .shot media well
   it ends with — pads itself instead. The well keeps its full width by
   cancelling that padding back out, so the product still fills the card. */
.card:has(> .shot) { padding: 0; }
/* MEDIA FIRST. The US card is media-on-top, body-below; this site's markup
   was written the other way round (kicker, title, copy, link, then the shot).
   Reordering in CSS rather than in the HTML puts the product where the design
   puts it without moving a single data-i18n hook across 28 pages.
   `order:-1` + `flex:1` on the well reproduces `.card-media`'s behaviour: the
   image sits on top and absorbs the height difference, so a row of cards with
   uneven copy still lines its titles up. */
.card:has(> .shot) > .shot {
  order: -1; flex: 1; margin: 0; height: auto;
  min-height: 180px; padding: 28px 28px 8px;
  align-items: center;
}
.card:has(> .shot) > .k { padding: 28px 28px 0; }
.card:has(> .shot) > h3 { padding: 0 28px; margin: 10px 0 6px; }
.card:has(> .shot) > .tag { padding: 0 28px; }
.card:has(> .shot) > .cta { padding: 0 28px 28px; margin-top: 14px; }
.card.cat { text-align: left; }
.card.cat .shot img { max-height: 190px; }

/* The homepage equipment grid. Two up, on the system's --gap rather than the
   old sheet's 22px, so it lines up with the mosaic and the category grids. */
.grid-eq { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); }

/* ===================================================================
   THE JPG RULE, in one place.

   --shadow-product is a drop-shadow filter, which follows the ALPHA channel.
   On a cut-out PNG that traces the machine's silhouette, which is the whole
   point of it. On a JPG it traces the BOUNDING BOX, because a JPG has no
   transparency — so the shot gets a hard rectangular shadow and reads as a
   white card pasted onto the surface.

   The US system handles this per component (`.banner .banner-art
   img[src$=".jpg"]`, `.card .card-media img[src$=".jpg"]`). This site has
   eleven such wells rather than two, and several of its product shots are
   JPGs — the Seismo V36R, the Chroma Ink bottles, the powder pouches, the
   Glide Pro carton. Repeating the rule eleven times is how one gets missed,
   so every well is listed once here.

   The treatment is the one the US border-radius was written for: no shadow,
   and a radius so the baked-in white ground reads as a deliberate photo
   plate rather than an accidental white box.
   =================================================================== */
.split .media.supplies-media img[src$=".jpg"],
.split .media.supplies-media img[src$=".jpeg"],
.cfg-hero .panel img[src$=".jpg"],
.cfg-hero .panel img[src$=".jpeg"],
.cmp-prod-img img[src$=".jpg"],
.cmp-prod-img img[src$=".jpeg"],
.ov-hero .shot img[src$=".jpg"],
.ov-hero .shot img[src$=".jpeg"],
.cfg-card .cm-img img[src$=".jpg"],
.cfg-card .cm-img img[src$=".jpeg"],
img.hero-product[src$=".jpg"],
img.hero-product[src$=".jpeg"] {
  filter: none;
  border-radius: 18px;
}

/* ---------- Spec rows ---------- */
.spec-row {
  display: flex; justify-content: space-between; gap: 24px;
  padding: 14px 0; border-bottom: 1px solid var(--line-soft);
  font-size: 15px;
}
.spec-row .l { color: var(--ink-soft); }
.spec-row .v { font-weight: 500; text-align: right; }
.pdp-specs { max-width: 720px; }

/* ---------- Key-spec chips ---------- */
.pdp-keyspecs { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; }
.pdp-keyspecs .kv {
  background: var(--bg-alt); border-radius: 16px;
  padding: 12px 18px; min-width: 116px;
}
.pdp-keyspecs .kv .n { font-size: 19px; font-weight: 500; }
.pdp-keyspecs .kv .l { font-size: 12px; color: var(--ink-faint); margin-top: 2px; }

/* ---------- CTA band ----------
   The closing CTA, on every page. Was a near-black slab; washed and light
   now for the same reason as the flagship banner. It still reads as a
   distinct object because of the wash, the radius and the centred type — it
   no longer has to shout in black to do that. */
/* `:not(.btn-text)` IS LOAD-BEARING. This site's markup predates the band:
   index.html writes `class="btn-text cta"` on the four "Learn more ›" links
   inside the equipment cards, where `.cta` was only ever a 14px top margin in
   the old sheet. Without the guard those four links each become an 88px-tall
   washed slab. The band is kept because it is part of the ported system and
   new sections will want it; the guard is what lets both meanings coexist
   until the old one is renamed. */
.cta:not(.btn-text) {
  border-radius: var(--r-banner);
  background-color: var(--bg);
  background-image: var(--brand-wash-card);
  color: var(--ink);
  box-shadow: var(--edge);
  padding: clamp(52px, 6.5vw, 88px) clamp(28px, 5vw, 64px); text-align: center;
}
.cta:not(.btn-text) h2 { margin-bottom: 14px; font-size: clamp(30px, 4.4vw, 50px); letter-spacing: var(--track-display); line-height: 1.06; }
.cta:not(.btn-text) p { color: var(--ink-soft); max-width: 34rem; margin: 0 auto 30px; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.55; }
/* .cta carries `on-dark` in the markup on several pages, which would flip
   the button to white-on-white and the ghost border to translucent. */
.cta.on-dark { color: var(--ink); }
.cta.on-dark .btn-primary { background: var(--ink); color: #fff; }
.cta.on-dark .btn-ghost { color: var(--ink); border-color: var(--line); }
.cta.on-dark .btn-ghost:hover { background: rgba(60, 64, 67, .06); }
.cta.on-dark p { color: var(--ink-soft); }

/* ---------- Forms ---------- */
.form-wrap {
  background: var(--tint-slate); border-radius: var(--r-banner);
  padding: clamp(24px, 4vw, 40px);
  /* Left, not centred. Section heads are left-aligned in this design, so a
     720px card centred in a 1240px page starts ~260px in and reads as
     detached from its own heading. The max-width is the readable measure and
     stays; only the auto margins go. Long-form article pages (.post-body and
     friends) keep their centred column — that is a different pattern and the
     US site centres it too. */
  max-width: 720px; margin: 0;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 13px; font-weight: 500; color: var(--ink-soft); }
/* CHECKBOXES AND RADIOS ARE EXCLUDED, and that exclusion is load-bearing —
   it is carried over from the US system's .form-card rule, where the note
   reads "a 100%-wide checkbox is a full-bleed grey bar". Here the failure is
   worse: the consent row on every form is a flex label holding a checkbox and
   a long paragraph. Give the checkbox width:100% and it claims the whole row,
   the paragraph is squeezed into a one-word-per-line column, and the form
   looks broken on become-dealer, sample-request and the homepage enquiry. */
.field input:not([type="checkbox"]):not([type="radio"]),
.field select,
.field textarea {
  font-family: var(--font); font-size: 15px; color: var(--ink);
  background: #fff; border: 1px solid var(--line);
  border-radius: 12px; padding: 11px 14px; width: 100%;
  transition: border-color .18s, box-shadow .18s;
}
.field input[type="checkbox"],
.field input[type="radio"] { accent-color: var(--accent-ink); width: 16px; height: 16px; }
.field textarea { min-height: 132px; resize: vertical; }
.field input:not([type="checkbox"]):not([type="radio"]):focus,
.field select:focus,
.field textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.field ::placeholder { color: var(--ink-faint); }
.form-note { font-size: 13px; color: var(--ink-faint); margin-top: 14px; }
.form-ok    { color: var(--accent-ink); font-weight: 500; }
.form-error { color: #c5221f; font-weight: 500; }

/* ---------- Distributor logo strip ---------- */
.dist-strip { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.dist-strip a,
.dist-strip span {
  padding: 11px 20px; border-radius: var(--r-chip);
  background: #fff; border: 1px solid var(--line);
  font-size: 14px; color: var(--ink-soft); transition: .18s;
}
.dist-strip a:hover { border-color: #9aa0a6; color: var(--ink); box-shadow: var(--shadow-card); }

/* ===================================================================
   NAV
   =================================================================== */
/* The bar was 92% opaque over a 12px blur, which is a white bar with a
   rounding error: nothing visibly passes under it, so the frosted-glass
   effect was being paid for and not seen. 72% over a 20px saturated blur is
   where content genuinely blurs through as it scrolls beneath. Contrast is
   unaffected — the nav text sits on white either way.

   STICKY, not fixed. Fixed took the bar out of flow, which is why every
   hero on this site carried `padding-top: calc(var(--nav-h) + 80px)` to
   duck under it. Sticky keeps the same behaviour on scroll and lets those
   heroes use ordinary section padding. */
header.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(20, 24, 26, .07);
}
/* Without a backdrop-filter the 72% fill is just a see-through bar and the
   links collide with whatever scrolls under them. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  header.nav { background: rgba(255, 255, 255, .97); }
}
.nav-inner {
  max-width: var(--maxw); margin: 0 auto; height: var(--nav-h);
  padding: 0 24px; display: flex; align-items: center; gap: 28px;
}
/* The logo is a flex item next to a nowrap link row: without this it is the
   thing that gets shrunk to nothing when a long locale fills the bar. */
.nav-logo { flex: 0 0 auto; }
.nav-logo img { height: 28px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 4px; list-style: none; margin-left: 8px; }
.nav-links > li > a,
.nav-links .drop-toggle {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 14px; font-weight: 500; color: var(--ink-soft);
  padding: 8px 12px; border-radius: var(--r-chip);
  background: none; border: 0; cursor: pointer; transition: .18s;
}
.nav-links > li > a:hover,
.nav-links .drop-toggle:hover { background: rgba(60, 64, 67, .07); color: var(--ink); }
.nav-links a.active { color: var(--ink); background: var(--tint-slate); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* The dropdown toggle is a real LINK here, not a button as on the US site:
   equipment.html, supplies.html and dealers.html are real pages, so the
   category itself must still navigate. The caret sits beside it as a sibling
   so the link text stays a clean i18n target. Hover or keyboard focus on the
   <li> opens the menu; on touch the whole tree is expanded inside the burger
   panel (see the 860px rule below), so no JS is involved. */
.has-drop { position: relative; display: inline-flex; align-items: center; }
.has-drop > .caret {
  font-size: 13px; line-height: 1; color: var(--ink-faint); transform: rotate(90deg);
  margin-left: -8px; padding-right: 10px; align-self: center; position: relative; top: -1px;
  transition: transform .18s, color .18s;
}
.has-drop:hover > .caret, .has-drop:focus-within > .caret { transform: rotate(-90deg); color: var(--ink); }
.nav-links > li > a.drop-toggle { padding-right: 8px; }
.drop-menu {
  list-style: none; position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 240px; background: #fff;
  border: 1px solid var(--line-soft); border-radius: 16px;
  box-shadow: var(--shadow-lift); padding: 8px;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s, transform .18s, visibility .18s;
  z-index: 120;
}
.drop-menu::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.has-drop:hover .drop-menu,
.has-drop:focus-within .drop-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.drop-menu a {
  display: block; padding: 10px 14px; border-radius: 10px;
  font-size: 14px; color: var(--ink-soft); white-space: nowrap;
}
.drop-menu a:hover { background: var(--bg-alt); color: var(--ink); }
.drop-menu .drop-sep { height: 1px; margin: 6px 12px; background: var(--line-soft); }

.burger { display: none; background: none; border: 0; cursor: pointer; flex-direction: column; gap: 5px; padding: 8px; }
.burger span { width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: .3s; }

/* The "Find a dealer" pill in the bar. Accent fill, dark type — the one
   place the brand teal appears at full strength above the fold. */
.nav-shop {
  font-size: 14px; font-weight: 500; padding: 8px 18px;
  border-radius: var(--r-chip); background: var(--accent); color: var(--ink);
  transition: background .2s, box-shadow .2s;
}
.nav-shop:hover { background: var(--accent-hover); box-shadow: var(--shadow-card); }

/* Dealer login — the front door to the Dealer Portal, sitting just before
   the "Find a dealer" pill. Deliberately a quiet text link, not a second
   pill: the accent pill must stay the only loud thing in the bar, and the
   longer locales (fr "Espace revendeur", es-419 "Acceso para distribuidores")
   push the bar onto two lines if this takes pill padding. Hidden below
   1100px, where the row gets tight and the same destination is one tap away
   in the Dealers dropdown. */
.nav-portal {
  font-size: 14px; font-weight: 500; padding: 8px 12px;
  border-radius: var(--r-chip); color: var(--ink-soft);
  white-space: nowrap; transition: .18s;
}
.nav-portal:hover { background: rgba(60, 64, 67, .07); color: var(--ink); }

/* ---------- Nav dropdown (Dealers) — this site's own markup ---------- */
.nav-drop { position: relative; }
.nav-drop > a { display: inline-flex; align-items: center; gap: 5px; }
.nav-drop > a::after {
  content: ""; width: 6px; height: 6px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px); opacity: .5; transition: .2s;
}
.nav-sub {
  position: absolute; top: calc(100% + 8px); left: 50%;
  transform: translate(-50%, 6px);
  min-width: 210px; background: #fff;
  border: 1px solid var(--line-soft); border-radius: 16px;
  box-shadow: var(--shadow-lift); padding: 8px;
  opacity: 0; visibility: hidden;
  transition: opacity .18s, transform .18s, visibility .18s; z-index: 120;
}
.nav-sub::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.nav-drop:hover .nav-sub,
.nav-drop:focus-within .nav-sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.nav-sub a {
  display: block; font-size: 14px; color: var(--ink-soft);
  padding: 10px 14px; border-radius: 10px; transition: .12s;
}
.nav-sub a:hover { background: var(--bg-alt); color: var(--ink); }

/* ===================================================================
   FOOTER
   Was a near-black slab with white type. Light and translucent now, so the
   brand wash carries through to the bottom of the page instead of stopping
   at a flat dark band — the same call that took black out of the banners
   and the CTA. Enough opacity to still read as a distinct footer zone.

   NOTE FOR THE MARKUP: the footer logo must be the DARK wordmark now. The
   pages that still point at logo-long-white.png are switched in the same
   change as this file.
   =================================================================== */
footer {
  background: rgba(240, 242, 244, .55);
  color: var(--ink-soft);
  margin-top: 72px;
  padding: 56px 0 32px;
  font-size: 14px;
}
.foot-top {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px;
  padding-bottom: 40px; border-bottom: 1px solid var(--line);
}
.foot-logo img { height: 26px; width: auto; margin-bottom: 18px; }
.foot-brand p { font-size: 14px; color: var(--ink-soft); max-width: 280px; line-height: 1.55; }
.foot-addr strong { color: var(--ink) !important; font-weight: 500 !important; }
.foot-col h4 { font-size: 13px; color: var(--ink); font-weight: 500; margin-bottom: 14px; }
.foot-col a { display: block; font-size: 14px; color: var(--ink-soft); margin-bottom: 9px; transition: .18s; }
.foot-col a:hover { color: var(--ink); text-decoration: underline; }
.foot-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 24px; flex-wrap: wrap; gap: 14px;
}
.foot-bottom p { font-size: 13px; color: var(--ink-faint); }
.foot-lang { display: flex; gap: 6px; }
.foot-lang button {
  background: #fff; border: 1px solid var(--line); color: var(--ink-soft);
  border-radius: var(--r-chip); padding: 5px 13px;
  font-family: var(--font); font-size: 12px; cursor: pointer; font-weight: 500;
}
.foot-lang button.active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ===================================================================
   PAGE HEROES
   Both heroes lost their blurred gradient "orb". The fixed brand wash is
   the ground now; a second gradient painted per-section over it read as a
   bright smear that stopped dead at the section edge. The orb elements are
   left in the markup and simply painted nothing, so no page had to be
   re-cut for this.
   =================================================================== */
.hero-orb, .hero-glow, .page-hero .orb, .ov-hero .orb, .band .glow, .roi-results .glow, .banner .glow {
  display: none;
}

.hero { position: relative; padding: clamp(48px, 6vw, 88px) 0 clamp(56px, 6.5vw, 96px); text-align: center; background: none; overflow: visible; }
.hero .wrap { position: relative; z-index: 1; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 500; letter-spacing: var(--track-eyebrow);
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 20px;
}
.hero-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.hero-title {
  font-size: clamp(40px, 6.4vw, 76px); line-height: 1.02;
  letter-spacing: var(--track-display); font-weight: 600; margin-bottom: 22px;
  text-wrap: balance;
}
.hero-sub {
  font-size: clamp(17px, 1.6vw, 21px); color: var(--ink-soft);
  max-width: 640px; margin: 0 auto 34px; line-height: 1.55; font-weight: 400;
}
.hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero-stage { margin-top: clamp(36px, 4.5vw, 56px); position: relative; }
.hero-product {
  position: relative; z-index: 1; max-width: 900px; width: 100%; margin: 0 auto;
  filter: var(--shadow-product-lg);
}
.hero-caption { position: relative; z-index: 1; margin-top: 20px; font-size: 13px; color: var(--ink-faint); font-weight: 500; }
.hero-caption .grad-text { font-weight: 600; }

.page-hero { padding: clamp(44px, 5.5vw, 76px) 0 clamp(32px, 3.6vw, 48px); background: none; position: relative; overflow: visible; }
.page-hero .wrap { position: relative; z-index: 1; max-width: min(var(--maxw), 100%); }
.page-hero .eyebrow { display: block; margin-bottom: 14px; }
.page-hero h1 {
  font-size: clamp(34px, 5.2vw, 64px); font-weight: 600;
  letter-spacing: var(--track-display); line-height: 1.03; margin-bottom: 16px;
  max-width: 22ch; text-wrap: balance;
}
.page-hero p { font-size: clamp(16px, 1.5vw, 20px); color: var(--ink-soft); max-width: 44rem; line-height: 1.6; }
/* The old sheet centred every inner-page hero. Left-aligned now, matching
   the US pages — but `.center` stays available for the few that read better
   centred (404, sample-request confirmation). */
/* .hero-cta centres itself for the homepage hero, which is a centred layout.
   An inner-page hero is left-aligned now, so its buttons have to be too —
   otherwise the heading starts at the margin and the buttons float mid-page.
   Pages that genuinely want the centred treatment carry it inline or use
   .center below, and both still win. */
.page-hero .hero-cta { justify-content: flex-start; }
.page-hero.center { text-align: center; }
.page-hero.center .hero-cta { justify-content: center; }
.page-hero.center h1, .page-hero.center p { margin-left: auto; margin-right: auto; }

/* ===================================================================
   TRUST STRIP
   =================================================================== */
.trustbar { background: none; border-bottom: 1px solid var(--line-soft); }
.trustbar .in {
  max-width: var(--maxw); margin: 0 auto; padding: 18px 24px;
  display: flex; align-items: center; justify-content: center;
  gap: 30px; flex-wrap: wrap; text-align: center;
}
.trustbar .ts { font-size: 13px; color: var(--ink-faint); font-weight: 400; }
.trustbar .ts b { color: var(--ink); font-weight: 500; }
.trustbar .tsep { width: 4px; height: 4px; border-radius: 50%; background: var(--line); }

/* ===================================================================
   VALUE PROPS
   =================================================================== */
.vals { background: none; }
.grid-vals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; }
.val { text-align: left; }
.val .ic {
  width: 52px; height: 52px; border-radius: 16px; background: var(--accent-tint);
  margin: 0 0 20px; display: flex; align-items: center; justify-content: center;
}
.val .ic svg { width: 26px; height: 26px; stroke: var(--accent-ink); fill: none; stroke-width: 1.8; }
.val h3 { font-size: 20px; font-weight: 600; letter-spacing: var(--track-heading); margin-bottom: 8px; }
.val p { font-size: 15px; color: var(--ink-soft); line-height: 1.6; }

/* ===================================================================
   CATEGORY CARDS
   =================================================================== */
.cats { background: none; }
.grid-cat { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.grid-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--gap); }
.catcard {
  position: relative; display: flex; flex-direction: column; text-align: left;
  background: var(--tint-neutral); box-shadow: var(--edge);
  border-radius: var(--r-card); padding: 26px 24px; min-height: 210px;
  overflow: hidden; transition: transform .22s ease, box-shadow .22s ease;
}
.catcard:hover { transform: translateY(-3px); box-shadow: var(--edge-hover), var(--shadow-lift); }
.catcard .ct-k {
  font-size: 12px; font-weight: 500; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-faint);
}
.catcard h3 { font-size: 20px; font-weight: 600; letter-spacing: var(--track-heading); margin: 9px 0 6px; }
.catcard p { font-size: 14px; color: var(--ink-soft); line-height: 1.55; flex: 1; }
.catcard .ct-go {
  margin-top: 14px; font-size: 14px; font-weight: 500; color: var(--link);
  display: inline-flex; align-items: center; gap: 5px;
}
.catcard .ct-go .arw { transition: transform .2s; }
.catcard:hover .ct-go .arw { transform: translateX(4px); }

/* ---------- Model-name chips ---------- */
.dc-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.dc-tag {
  font-size: 12px; font-weight: 400; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: var(--r-chip); padding: 4px 11px;
}
a.dc-tag { transition: .18s; }
a.dc-tag:hover { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-tint); }

/* ===================================================================
   SPLIT FEATURE
   =================================================================== */
.split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: center;
  background: var(--tint-neutral); box-shadow: var(--edge);
  border-radius: var(--r-banner); overflow: hidden;
}
.split.reverse { direction: rtl; }
.split.reverse > * { direction: ltr; }
.split .copy { padding: clamp(32px, 4.5vw, 64px); }
.split .copy .eyebrow { display: block; margin-bottom: 14px; }
.split .copy h2 {
  font-size: clamp(27px, 3.3vw, 42px); font-weight: 600;
  letter-spacing: var(--track-display); line-height: 1.08; margin-bottom: 16px;
}
.split .copy p { font-size: 16px; color: var(--ink-soft); line-height: 1.6; margin-bottom: 22px; }
.split .media { height: 100%; min-height: 400px; background: var(--bg-alt); position: relative; overflow: hidden; }
.split .media.photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }
/* The PADDING IS ON THE WELL, not on the <img>. Padding on the image itself
   inflates its border box, and border-radius clips that box — which is
   transparent — while the actual picture keeps its square corners. The
   JPG plate treatment below then silently did nothing here. */
.split .media.supplies-media {
  background: var(--tint-mist); display: grid; place-items: center; padding: 40px;
}
.split .media.supplies-media img {
  width: auto; max-width: 100%; max-height: 320px; height: auto;
  object-fit: contain; filter: var(--shadow-product);
}

/* ===================================================================
   THE "BAND" — was the black wholesale slab
   Same job (a distinct closing block), same class name, no black. This is
   the .cta treatment: washed white card, hairline edge, centred type. The
   inner .glow is hidden above.
   =================================================================== */
.band {
  background-color: var(--bg);
  background-image: var(--brand-wash-card);
  color: var(--ink);
  box-shadow: var(--edge);
  text-align: center; border-radius: var(--r-banner);
  padding: clamp(52px, 6.5vw, 88px) clamp(28px, 5vw, 64px);
  position: relative; overflow: hidden;
}
.band .inner { position: relative; z-index: 1; max-width: 680px; margin: 0 auto; }
.band h2 { font-size: clamp(30px, 4.4vw, 50px); font-weight: 600; letter-spacing: var(--track-display); line-height: 1.06; margin-bottom: 16px; }
.band p { font-size: clamp(16px, 1.4vw, 19px); color: var(--ink-soft); line-height: 1.55; margin-bottom: 30px; }
.band .chips { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 36px; overflow: visible; }
.band .chip {
  font-size: 13px; color: var(--ink-soft);
  border: 1px solid var(--line); background: #fff;
  border-radius: var(--r-chip); padding: 8px 16px;
}
/* The band markup carries `on-dark` in places; nothing is dark any more, so
   the buttons revert to their light-ground styling. */
.band .btn-ghost { color: var(--ink); border-color: var(--line); }
.band .btn-ghost:hover { background: rgba(60, 64, 67, .06); border-color: #c4c7c5; }
.band .btn-primary { background: var(--ink); color: #fff; }
.band .btnrow { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 6px; }

/* ===================================================================
   INQUIRY SECTION
   =================================================================== */
.inquire { background: none; }

/* ===================================================================
   COMPARE TABLE
   =================================================================== */
.compare { padding-top: clamp(32px, 3.6vw, 52px); }
.cmp-picker { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 12px; scrollbar-width: none; justify-content: flex-start; }
.cmp-picker::-webkit-scrollbar { display: none; }
.chip-printer {
  flex: 0 0 auto; width: 116px; padding: 14px 10px;
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  cursor: pointer; text-align: center; transition: .18s;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  font-family: var(--font);
}
.chip-printer:hover { border-color: #9aa0a6; background: var(--bg-alt); }
.chip-printer.on { border-color: var(--accent); background: var(--accent-tint); box-shadow: inset 0 0 0 1px var(--accent); }
.chip-printer.dim { opacity: .38; }
.chip-printer img { height: 56px; width: auto; margin: 0 auto 4px; object-fit: contain; }
.chip-printer .nm { display: block; font-size: 13px; font-weight: 500; color: var(--ink); }
.chip-printer .w { display: block; font-size: 11px; color: var(--ink-faint); margin-top: 1px; }
.cmp-hint { font-size: 13px; color: var(--ink-faint); margin: 6px 0 24px; }

.cmp-scroll { overflow-x: auto; }
.cmp-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.cmp-table th, .cmp-table td {
  padding: 16px 20px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line-soft);
}
.cmp-col-label { font-size: 14px; color: var(--ink-soft); width: 190px; min-width: 190px; white-space: nowrap; }
.cmp-prod { background: var(--bg-alt); border-radius: var(--r-card) var(--r-card) 0 0; text-align: center !important; }
.cmp-prod-img { display: grid; place-items: center; min-height: 130px; margin-bottom: 10px; }
.cmp-prod-img img { max-height: 130px; width: auto; object-fit: contain; filter: var(--shadow-product); }
.cmp-prod-name { font-size: 17px; font-weight: 500; }
.cmp-prod-w { font-size: 13px; color: var(--ink-faint); margin-bottom: 12px; }
.cmp-shop { margin-top: 14px; }
.cmp-val { font-size: 15px; font-weight: 500; }
.cmp-compat { font-size: 13px; color: var(--ink-soft); line-height: 1.55; }
.cmp-compat .lbl {
  display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 3px;
}
.cmp-compat .or { color: var(--ink-faint); }

/* ===================================================================
   PRODUCT PAGE (PDP)
   =================================================================== */
.pdp { padding-top: clamp(28px, 3.2vw, 44px); }
.pdp-top { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.pdp-media {
  background: var(--tint-neutral); box-shadow: var(--edge);
  border-radius: var(--r-banner); padding: 44px;
  display: grid; place-items: center; min-height: 420px;
}
.pdp-media img { max-width: 100%; max-height: 380px; object-fit: contain; filter: var(--shadow-product-lg); }
.pdp-media img[src$=".jpg"], .pdp-media img[src$=".jpeg"] { filter: none; border-radius: 18px; }
.pdp-info .eyebrow { margin-bottom: 12px; display: block; }
.pdp-info h1 {
  font-size: clamp(34px, 4.8vw, 58px); font-weight: 600;
  letter-spacing: var(--track-display); line-height: 1.03; margin-bottom: 14px;
}
.pdp-tagline { font-size: clamp(17px, 1.5vw, 20px); color: var(--ink-soft); line-height: 1.55; margin-bottom: 24px; }
.pdp-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.pdp-cat { color: var(--accent-ink); font-weight: 500; }
.pdp-note { font-size: 13px; color: var(--ink-faint); margin-top: 14px; line-height: 1.55; }
.pdp-note strong { color: var(--ink-soft); font-weight: 500; }

.pdp-gallery { display: flex; gap: 10px; margin-top: 16px; justify-content: center; flex-wrap: wrap; }
.pdp-gallery button {
  width: 66px; height: 66px; border-radius: 14px; border: 1px solid var(--line);
  background: #fff; padding: 7px; cursor: pointer; transition: .18s;
}
.pdp-gallery button:hover { border-color: #9aa0a6; }
.pdp-gallery button.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-tint); }
.pdp-gallery img { width: 100%; height: 100%; object-fit: contain; border-radius: 6px; }

.pdp-feats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 36px; max-width: 900px; }
.pdp-feat { display: flex; gap: 15px; align-items: flex-start; }
.pdp-feat .fi {
  width: 42px; height: 42px; border-radius: 12px; background: var(--accent-tint);
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
}
.pdp-feat .fi svg { width: 21px; height: 21px; stroke: var(--accent-ink); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pdp-feat h4 { font-size: 16px; font-weight: 600; letter-spacing: var(--track-heading); margin-bottom: 4px; }
.pdp-feat p { font-size: 14px; color: var(--ink-soft); line-height: 1.55; }

.pdp-detail { max-width: 760px; }
.pdp-detail details { border-top: 1px solid var(--line-soft); }
.pdp-detail details:last-child { border-bottom: 1px solid var(--line-soft); }
.pdp-detail summary {
  font-size: 15px; font-weight: 500; cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; padding: 17px 2px;
}
.pdp-detail summary::-webkit-details-marker { display: none; }
.pdp-detail summary::after { content: "+"; color: var(--ink-faint); font-size: 20px; font-weight: 400; }
.pdp-detail details[open] summary::after { content: "\2013"; }
.pdp-detail .dc { font-size: 14px; color: var(--ink-soft); line-height: 1.65; padding: 0 2px 18px; }
.pdp-detail .dc a { color: var(--link); font-weight: 500; }

/* ---------- Product overview (showcase) ---------- */
.subnav {
  position: sticky; top: var(--nav-h); z-index: 90;
  background: rgba(255, 255, 255, .72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(20, 24, 26, .07);
}
.subnav .in {
  max-width: var(--maxw); margin: 0 auto; height: 52px; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.subnav .pn { font-size: 16px; font-weight: 600; letter-spacing: var(--track-heading); }
.subnav .lk { display: flex; gap: 4px; align-items: center; }
.subnav .lk a {
  font-size: 13.5px; color: var(--ink-soft); padding: 7px 12px;
  border-radius: var(--r-chip); transition: .18s;
}
.subnav .lk a:hover { color: var(--ink); background: rgba(60, 64, 67, .07); }
.subnav .lk .btn { padding: 7px 16px; font-size: 13.5px; }

.ov-hero { text-align: center; padding: clamp(44px, 5vw, 70px) 0 clamp(28px, 3.2vw, 44px); background: none; position: relative; overflow: visible; }
.ov-hero .wrap { position: relative; z-index: 1; }
.ov-hero .eyebrow { display: block; margin-bottom: 14px; }
.ov-hero h1 { font-size: clamp(40px, 6.4vw, 76px); font-weight: 600; letter-spacing: var(--track-display); line-height: 1.02; margin-bottom: 16px; text-wrap: balance; }
.ov-hero .sub { font-size: clamp(17px, 1.6vw, 21px); color: var(--ink-soft); max-width: 620px; margin: 0 auto 26px; line-height: 1.55; }
.ov-hero .hero-cta { margin-bottom: 40px; }
.ov-hero .shot img { max-width: 900px; width: 100%; margin: 0 auto; filter: var(--shadow-product-lg); }

.billboard .wrap { padding: 0 24px; }
.billboard img { width: 100%; display: block; border-radius: var(--r-banner); }

.feat { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.feat .fx h2 { font-size: clamp(27px, 3.6vw, 46px); font-weight: 600; letter-spacing: var(--track-display); line-height: 1.08; margin-bottom: 14px; }
.feat .fx p { font-size: 16px; color: var(--ink-soft); line-height: 1.6; margin-bottom: 20px; }
.feat .fm {
  background: var(--tint-neutral); box-shadow: var(--edge);
  border-radius: var(--r-banner); min-height: 360px;
  display: grid; place-items: center; padding: 36px; overflow: hidden;
}
.feat .fm img { max-width: 100%; max-height: 320px; object-fit: contain; filter: var(--shadow-product); }
.feat .fm img[src$=".jpg"], .feat .fm img[src$=".jpeg"] { filter: none; border-radius: 18px; }
.feat .fm.bleed { padding: 0; }
.feat .fm.bleed img { max-height: none; width: 100%; height: 100%; object-fit: cover; filter: none; border-radius: 0; }
.feat.rev { direction: rtl; }
.feat.rev > * { direction: ltr; }
.feat .fm.ph {
  background: var(--bg-alt); box-shadow: none; border: 1.5px dashed var(--line);
  flex-direction: column; gap: 14px; color: var(--ink-faint);
}
.feat .fm.ph svg { width: 42px; height: 42px; stroke: var(--ink-faint); fill: none; stroke-width: 1.4; }
.feat .fm.ph .cap { font-size: 13px; font-weight: 500; max-width: 230px; text-align: center; line-height: 1.4; }
.feat .fm.ph .cap small {
  display: block; font-weight: 400; color: var(--ink-faint); margin-top: 4px;
  font-size: 11.5px; letter-spacing: var(--track-eyebrow); text-transform: uppercase;
}

.snap { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--gap); }
.snap .s {
  text-align: center; padding: 26px 18px;
  background: var(--tint-neutral); box-shadow: var(--edge); border-radius: 18px;
}
.snap .s .n { font-size: clamp(26px, 3vw, 38px); font-weight: 600; letter-spacing: var(--track-display); color: var(--accent-ink); }
.snap .s .l { font-size: 13px; color: var(--ink-soft); margin-top: 4px; }

/* ---------- Accessory feature grid ---------- */
.feat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.feat-grid .ft { border-radius: var(--r-card); overflow: hidden; background: #fff; box-shadow: var(--edge); }
.feat-grid .ft img { width: 100%; display: block; }

/* ===================================================================
   BUILD CONFIGURATOR
   =================================================================== */
.builder { background: none; }
.cfg { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.cfg-hero { position: sticky; top: calc(var(--nav-h) + 24px); }
.cfg-hero .panel {
  background: var(--tint-mist); border-radius: var(--r-banner);
  padding: 40px; display: grid; place-items: center; min-height: 360px;
}
.cfg-hero .panel img { max-height: 340px; width: auto; object-fit: contain; filter: var(--shadow-product); }
.cfg-hero .cap { text-align: center; margin-top: 14px; font-size: 13px; color: var(--ink-faint); }
.cfg-panel .eyebrow { display: block; margin-bottom: 12px; }
.cfg-panel h1 { font-size: clamp(32px, 4.4vw, 52px); font-weight: 600; letter-spacing: var(--track-display); line-height: 1.04; margin-bottom: 12px; }

.cfg-div { height: 1px; background: var(--line-soft); border: 0; margin: 28px 0 22px; }
.cfg-label {
  font-size: 13px; font-weight: 500; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 18px;
}
.cfg-step { margin-bottom: 26px; }
.cfg-step .sh { font-size: 17px; font-weight: 500; margin-bottom: 2px; }
.cfg-step .ss { font-size: 13px; color: var(--ink-faint); margin-bottom: 12px; }

.cfg-opt {
  position: relative;
  width: 100%; display: flex; align-items: center; gap: 14px;
  text-align: left; padding: 12px 16px; margin-bottom: 8px;
  background: #fff; border: 1px solid var(--line);
  border-radius: 16px; cursor: pointer; font-family: var(--font);
  transition: border-color .18s, background .18s, box-shadow .18s;
}
.cfg-opt:hover { border-color: #9aa0a6; background: var(--bg-alt); }
.cfg-opt.on { border-color: var(--accent); background: var(--accent-tint); box-shadow: inset 0 0 0 1px var(--accent); }
.cfg-opt.fixed { cursor: default; background: var(--bg-alt); border-style: dashed; }
.cfg-opt.fixed:hover { border-color: var(--line); }
.cfg-opt img { width: 52px; height: 52px; object-fit: contain; flex: 0 0 auto; }
.cfg-opt .txt { flex: 1; min-width: 0; }
.cfg-opt .txt .n { font-size: 14px; font-weight: 500; }
.cfg-opt .txt .d { font-size: 12px; color: var(--ink-faint); margin-top: 1px; white-space: normal; line-height: 1.35; }
.cfg-opt .rec { color: var(--accent-ink); font-weight: 500; }
.cfg-opt .tick {
  width: 20px; height: 20px; border-radius: 50%; flex: 0 0 auto;
  border: 2px solid var(--line); position: relative;
}
.cfg-opt.on .tick { border-color: var(--accent); background: var(--accent); }
.cfg-opt.on .tick::after {
  content: ""; position: absolute; left: 5px; top: 2px;
  width: 5px; height: 10px; border: solid #fff;
  border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.cfg-opt .badge {
  font-size: 11px; font-weight: 500; padding: 4px 10px;
  border-radius: var(--r-chip); background: var(--tint-slate); color: var(--ink-soft);
  flex: 0 0 auto; letter-spacing: 0;
}

.cfg-summary { background: var(--bg-alt); border-radius: var(--r-card); padding: 24px; margin-top: 28px; border: 0; }
.sum-line {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 9px 0; font-size: 14px; border-bottom: 1px solid var(--line-soft);
}
.sum-line:last-of-type { border-bottom: 0; }
.sum-line .sl-l { color: var(--ink-soft); }
.sum-line .sl-v { font-weight: 500; text-align: right; }
.sum-note { font-size: 13px; color: var(--ink-faint); margin: 14px 0 18px; line-height: 1.55; }

/* ---------- Configurator: option info button + popup ---------- */
.cfg-info {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--line); background: #fff; color: var(--ink-faint);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: .18s; padding: 0;
}
.cfg-info:hover { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-tint); }
.cfg-info svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.9; }
.cfg-modal { position: fixed; inset: 0; z-index: 300; display: none; align-items: center; justify-content: center; padding: 24px; }
.cfg-modal.open { display: flex; }
.cfg-modal-bg { position: absolute; inset: 0; background: rgba(20, 24, 26, .42); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.cfg-card {
  position: relative; background: #fff; border-radius: var(--r-card);
  box-shadow: var(--shadow-lift); max-width: 380px; width: 100%;
  padding: 30px 28px 28px;
  transform: translateY(10px) scale(.985); opacity: 0;
  transition: .22s cubic-bezier(.16, 1, .3, 1);
}
.cfg-modal.open .cfg-card { transform: none; opacity: 1; }
.cfg-card .cm-img { height: 118px; display: grid; place-items: center; margin-bottom: 14px; }
.cfg-card .cm-img img { max-height: 118px; max-width: 72%; object-fit: contain; filter: var(--shadow-product); }
.cfg-card h3 { font-size: 21px; font-weight: 600; letter-spacing: var(--track-heading); text-align: center; margin-bottom: 18px; }
.cfg-card .cm-spec { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
.cfg-card .cm-spec .k { color: var(--ink-soft); }
.cfg-card .cm-spec .v { font-weight: 500; text-align: right; }
.cfg-card .cm-desc { font-size: 14px; color: var(--ink-soft); line-height: 1.6; margin-top: 16px; }
.cfg-close {
  position: absolute; top: 14px; right: 14px; width: 30px; height: 30px;
  border-radius: 50%; border: 0; background: var(--bg-alt); color: var(--ink-soft);
  cursor: pointer; display: flex; align-items: center; justify-content: center; transition: .18s;
}
.cfg-close:hover { background: var(--tint-slate); color: var(--ink); }
.cfg-close svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2; }

/* ===================================================================
   GLOBAL-ONLY COMPONENTS
   No US counterpart — restyled into this language rather than copied.
   Class names and markup are unchanged, so the i18n hooks, the page JS
   and the locale build are untouched.
   =================================================================== */

/* ---------- Language selector (7 locales) ---------- */
.langsel { position: relative; }
.langsel-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: transparent; border: 1px solid var(--line);
  border-radius: var(--r-chip); padding: 7px 13px;
  font-family: var(--font); font-size: 13px; font-weight: 500;
  color: var(--ink-soft); cursor: pointer; transition: .18s; line-height: 1;
}
.langsel-btn:hover { border-color: #9aa0a6; color: var(--ink); background: rgba(60, 64, 67, .04); }
.langsel-btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.langsel-btn .chev { width: 11px; height: 11px; stroke-width: 2.2; transition: transform .18s; }
.langsel.open .langsel-btn .chev { transform: rotate(180deg); }
.langsel-menu {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 240px;
  background: #fff; border: 1px solid var(--line-soft); border-radius: 16px;
  box-shadow: var(--shadow-lift); padding: 8px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s, transform .18s, visibility .18s; z-index: 130;
  /* 15 languages: scroll inside the menu rather than off the screen */
  max-height: min(70vh, 560px); overflow-y: auto; overscroll-behavior: contain;
}
.langsel.open .langsel-menu { opacity: 1; visibility: visible; transform: none; }
.langsel-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%; text-align: left; background: none; border: 0;
  font-family: var(--font); font-size: 14px; color: var(--ink-soft);
  padding: 10px 12px; border-radius: 10px; cursor: pointer; transition: .12s;
}
.langsel-opt:hover { background: var(--bg-alt); color: var(--ink); }
.langsel-opt .flag { font-size: 17px; line-height: 1; flex: 0 0 auto; }
.langsel-opt .nm { flex: 1; min-width: 0; }
.langsel-opt .nm small { display: block; font-size: 11.5px; color: var(--ink-faint); font-weight: 400; margin-top: 1px; }
.langsel-opt .tick { width: 16px; height: 16px; stroke: var(--accent-ink); fill: none; stroke-width: 2.4; opacity: 0; flex: 0 0 auto; }
.langsel-opt.on { font-weight: 500; color: var(--ink); }
.langsel-opt.on .tick { opacity: 1; }
/* The footer copy of the picker sits on the light footer ground now, so it
   no longer needs the inverted treatment the dark footer gave it. */
footer .langsel-menu { top: auto; bottom: calc(100% + 8px); }

/* ---------- Dealer locator ---------- */
.dealers { padding-top: clamp(28px, 3.2vw, 44px); }
.region-note {
  max-width: 720px; margin: 0 auto 30px; padding: 14px 20px;
  border-radius: 16px; background: var(--accent-tint);
  font-size: 14px; line-height: 1.55; color: var(--ink-soft); text-align: center;
}
.region-note a { color: var(--accent-ink); font-weight: 500; white-space: nowrap; }
.reg-filter { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 14px; }
.reg-btn {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-chip);
  padding: 9px 18px; font-family: var(--font); font-size: 13.5px;
  font-weight: 400; color: var(--ink-soft); cursor: pointer; transition: .18s;
}
.reg-btn:hover { border-color: #9aa0a6; color: var(--ink); }
.reg-btn.on {
  border-color: var(--accent); background: var(--accent-tint);
  color: var(--accent-ink); font-weight: 500;
  box-shadow: inset 0 0 0 1px var(--accent);
}
.reg-count { text-align: center; font-size: 13px; color: var(--ink-faint); margin-bottom: 32px; }
.grid-dealer { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.dcard {
  background: #fff; border-radius: var(--r-card); box-shadow: var(--edge);
  padding: 24px; display: flex; flex-direction: column;
  transition: transform .22s ease, box-shadow .22s ease;
}
.dcard:hover { transform: translateY(-3px); box-shadow: var(--edge-hover), var(--shadow-lift); }
.dcard .dc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.dcard .dc-flag { font-size: 26px; line-height: 1; }
.dcard .dc-region {
  font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-faint); background: var(--tint-slate); padding: 5px 10px; border-radius: var(--r-chip);
}
.dcard .dc-country { font-size: 13px; font-weight: 500; color: var(--accent-ink); margin-bottom: 3px; }
.dcard h3 { font-size: 18px; font-weight: 600; letter-spacing: var(--track-heading); margin-bottom: 10px; }
.dcard .dc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.dcard .dc-tag { font-size: 11.5px; font-weight: 400; color: var(--ink-soft); border: 1px solid var(--line); border-radius: var(--r-chip); padding: 4px 10px; }
.dcard .dc-cta {
  margin-top: auto; font-size: 14px; font-weight: 500; color: var(--link);
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: 0; font-family: var(--font); cursor: pointer; padding: 0;
}
.dcard .dc-cta .arw { transition: transform .2s; }
.dcard:hover .dc-cta .arw { transform: translateX(4px); }
.dcard.hide { display: none; }
.reg-empty { text-align: center; padding: 40px 0; color: var(--ink-faint); font-size: 15px; display: none; }
.reg-empty.show { display: block; }

/* ---------- Support: category grid + sign-up row ---------- */
.sup-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px 44px; max-width: 900px; }
.sup-grid .val .btn-text { margin-top: 2px; }
.signup-row { max-width: 520px; display: flex; gap: 10px; flex-wrap: wrap; }
.signup-row input {
  flex: 1; min-width: 220px; font-family: var(--font); font-size: 15px;
  padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px;
  background: #fff; color: var(--ink); transition: border-color .18s, box-shadow .18s;
}
.signup-row input:focus { outline: none; border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

/* ---------- Downloads (grouped per machine) ---------- */
.dl-cat { max-width: 860px; margin: 0 0 40px; }
.dl-cat > h2 { font-size: 22px; font-weight: 600; letter-spacing: var(--track-heading); margin-bottom: 16px; }
.dl-machine {
  border-radius: var(--r-card); margin-bottom: 12px;
  background: #fff; box-shadow: var(--edge); overflow: hidden;
  transition: box-shadow .18s;
}
.dl-machine:hover { box-shadow: var(--edge-hover), var(--shadow-card); }
.dl-machine > summary {
  display: flex; align-items: center; gap: 16px; padding: 16px 22px;
  cursor: pointer; list-style: none; user-select: none;
}
.dl-machine > summary::-webkit-details-marker { display: none; }
.dl-machine > summary:hover { background: rgba(60, 64, 67, .03); }
.dl-machine summary img { width: 54px; height: 44px; object-fit: contain; flex-shrink: 0; }
.dl-machine .mn { font-weight: 500; font-size: 16px; flex: 1; }
.dl-machine .mc { font-size: 13px; color: var(--ink-faint); }
.dl-machine .chev {
  width: 18px; height: 18px; stroke: var(--ink-faint); fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .25s; flex-shrink: 0;
}
.dl-machine[open] .chev { transform: rotate(180deg); }
.dl-machine[open] > summary { border-bottom: 1px solid var(--line-soft); }
.dl-files { padding: 12px 22px 18px; display: grid; gap: 8px; }
.dl-file {
  display: flex; align-items: center; gap: 14px; padding: 11px 14px;
  border-radius: 12px; background: var(--bg-alt); transition: .15s;
}
.dl-file:hover { background: var(--accent-tint); }
.dl-file .fi {
  width: 34px; height: 34px; border-radius: 10px; background: #fff;
  border: 1px solid var(--line); display: flex; align-items: center;
  justify-content: center; flex-shrink: 0;
}
.dl-file .fi svg { width: 17px; height: 17px; stroke: var(--accent-ink); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.dl-file .fn { flex: 1; font-size: 15px; font-weight: 500; color: var(--ink); }
.dl-file .fmeta { font-size: 12px; color: var(--ink-faint); }
.dl-file .dlarrow {
  width: 17px; height: 17px; stroke: var(--accent-ink); fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0; opacity: .5; transition: .15s;
}
.dl-file:hover .dlarrow { opacity: 1; }

/* ---------- ROI calculator ----------
   The results panel was a black card with a gradient glow. It is the same
   washed treatment as every other feature surface now — the figure carries
   the emphasis through scale and the accent ink, not through inversion. */
.roi { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
.roi-inputs { display: flex; flex-direction: column; gap: 24px; }
.roi-sec .cfg-label { margin-bottom: 14px; }
.roi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.roi-field { display: flex; flex-direction: column; gap: 6px; }
.roi-field.full { grid-column: 1 / -1; }
.roi-field label { font-size: 13px; font-weight: 500; color: var(--ink-soft); }
.roi-field .hint { font-size: 11.5px; color: var(--ink-faint); font-weight: 400; }
.roi-in { position: relative; }
.roi-in input, .roi-in select {
  width: 100%; font-family: var(--font); font-size: 15px; padding: 11px 14px;
  border: 1px solid var(--line); border-radius: 12px; background: #fff;
  color: var(--ink); transition: border-color .18s, box-shadow .18s;
}
.roi-in.cur input { padding-left: 30px; }
.roi-in .sym { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); font-size: 15px; color: var(--ink-faint); pointer-events: none; }
.roi-in input:focus, .roi-in select:focus { outline: none; border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.roi-seg { display: flex; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.roi-seg button {
  flex: 1; background: transparent; border: 0; font-family: var(--font);
  font-size: 14px; font-weight: 500; padding: 11px; cursor: pointer;
  color: var(--ink-soft); transition: .18s;
}
.roi-seg button:hover { background: var(--bg-alt); }
.roi-seg button.on { background: var(--ink); color: #fff; }
.roi-fin { display: none; }
.roi-fin.show { display: grid; }

.roi-results {
  position: sticky; top: calc(var(--nav-h) + 24px);
  background-color: var(--bg); background-image: var(--brand-wash-card);
  color: var(--ink); box-shadow: var(--edge);
  border-radius: var(--r-banner); padding: 34px 30px; overflow: hidden;
}
.roi-results .in { position: relative; z-index: 1; }
.roi-r-eyebrow { font-size: 12.5px; font-weight: 500; letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--ink-faint); }
.roi-r-label { font-size: 14px; color: var(--ink-soft); margin-top: 14px; }
.roi-big { font-size: clamp(38px, 6vw, 56px); font-weight: 600; letter-spacing: var(--track-display); line-height: 1.02; margin-top: 2px; }
.roi-big.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; }
.roi-bar { height: 8px; background: var(--tint-slate); border-radius: 6px; overflow: hidden; margin: 18px 0 6px; }
.roi-bar > i { display: block; height: 100%; background: var(--accent); border-radius: 6px; transition: width .35s ease; }
.roi-bar-cap { font-size: 12px; color: var(--ink-faint); }
.roi-lines { margin-top: 22px; border-top: 1px solid var(--line-soft); }
.roi-line { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
.roi-line .l { color: var(--ink-soft); }
.roi-line .v { font-weight: 500; }
.roi-line.neg .v { color: #c5221f; }
.roi-line.tot { font-weight: 600; font-size: 15px; }
.roi-line.tot .l { color: var(--ink); }
.roi-mile { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 20px; }
.roi-mile .m { text-align: center; background: #fff; box-shadow: var(--edge); border-radius: 16px; padding: 14px 8px; }
.roi-mile .m .n { font-size: 17px; font-weight: 600; letter-spacing: var(--track-heading); color: var(--accent-ink); }
.roi-mile .m .k { font-size: 11.5px; color: var(--ink-faint); margin-top: 3px; }
.roi-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
/* The results panel used to be a black card, so its button row carries
   `on-dark` in the markup. On the washed panel that inverted both buttons
   into white-on-near-white — the primary became a white pill and the ghost
   button vanished entirely. Same revert as .cta.on-dark and .band. */
.roi-cta.on-dark .btn-primary { background: var(--ink); color: #fff; }
.roi-cta.on-dark .btn-ghost { color: var(--ink); border-color: var(--line); }
.roi-cta.on-dark .btn-ghost:hover { background: rgba(60, 64, 67, .06); border-color: #c4c7c5; }
.roi-cta.on-dark .btn-text { color: var(--link); }
.roi-note { font-size: 12px; color: var(--ink-faint); margin-top: 18px; line-height: 1.55; }
.roi-check { display: flex; align-items: flex-start; gap: 9px; margin-top: 9px; cursor: pointer; }
.roi-check input { margin-top: 2px; accent-color: var(--accent-ink); width: 16px; height: 16px; flex: 0 0 auto; cursor: pointer; }
.roi-check .t { font-size: 13px; color: var(--ink-soft); line-height: 1.45; }
.roi-check .t small { display: block; color: var(--ink-faint); font-size: 11.5px; margin-top: 2px; }

/* ---------- Events ---------- */
.ev-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); }
.ev-card {
  border-radius: var(--r-card); padding: 26px; background: #fff;
  box-shadow: var(--edge); display: flex; flex-direction: column; gap: 12px;
  transition: transform .22s ease, box-shadow .22s ease;
}
.ev-card:hover { transform: translateY(-3px); box-shadow: var(--edge-hover), var(--shadow-lift); }
.ev-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; overflow: visible; padding: 0; }
.ev-chip {
  font-size: 12px; font-weight: 500; letter-spacing: 0; padding: 5px 12px;
  border-radius: var(--r-chip); background: var(--accent-tint); color: var(--accent-ink);
}
.ev-chip.oh { background: var(--tint-sand); color: #8a6a1c; }
.ev-chip.date { background: var(--tint-slate); color: var(--ink-soft); }
.ev-card h3 { font-size: 20px; letter-spacing: var(--track-heading); margin: 0; }
.ev-blurb { color: var(--ink-soft); font-size: 14.5px; line-height: 1.6; margin: 0; }
.ev-meta { display: grid; grid-template-columns: auto 1fr; gap: 5px 16px; font-size: 13.5px; margin: 0; }
.ev-meta dt { color: var(--ink-faint); font-weight: 500; }
.ev-meta dd { color: var(--ink-soft); margin: 0; }
.ev-meta a { color: var(--link); font-weight: 500; }
.ev-display { border-top: 1px solid var(--line-soft); padding-top: 14px; margin-top: auto; }
.ev-display .lbl {
  font-size: 11.5px; color: var(--ink-faint); font-weight: 500; margin: 0 0 8px;
  text-transform: uppercase; letter-spacing: var(--track-eyebrow);
}
.ev-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ev-tags span { font-size: 12.5px; color: var(--ink-soft); background: var(--bg-alt); border-radius: 9px; padding: 4px 9px; }

/* ---------- Videos ---------- */
.vid-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.vid-card {
  border-radius: var(--r-card); overflow: hidden; background: #fff;
  box-shadow: var(--edge); transition: transform .22s ease, box-shadow .22s ease;
}
.vid-card:hover { transform: translateY(-3px); box-shadow: var(--edge-hover), var(--shadow-lift); }
.yt-lite { position: relative; aspect-ratio: 16/9; display: block; width: 100%; border: 0; cursor: pointer; background: #000; padding: 0; }
.yt-lite img { width: 100%; height: 100%; object-fit: cover; opacity: .9; display: block; }
.yt-lite .yt-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 58px; height: 58px; border-radius: 50%; background: rgba(255, 255, 255, .94);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-card); transition: transform .2s;
}
.yt-lite:hover .yt-play { transform: translate(-50%, -50%) scale(1.08); }
.yt-lite .yt-play::after {
  content: ""; display: block; margin-left: 4px;
  border-left: 18px solid var(--ink); border-top: 11px solid transparent; border-bottom: 11px solid transparent;
}
.yt-lite iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vid-card h3 { font-size: 15px; line-height: 1.45; padding: 16px 20px 20px; margin: 0; font-weight: 500; }
.pl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.pl-card {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-radius: 18px; padding: 18px 22px; background: #fff; box-shadow: var(--edge);
  font-weight: 500; font-size: 14.5px; color: var(--ink); transition: box-shadow .18s, transform .18s;
}
.pl-card:hover { transform: translateY(-2px); box-shadow: var(--edge-hover), var(--shadow-card); }
.pl-card .arw { color: var(--accent-ink); }

/* ---------- Sample request ---------- */
.sr-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; max-width: 960px; }
.sr-step .n {
  width: 40px; height: 40px; border-radius: 50%; background: var(--grad);
  color: #fff; font-weight: 600; display: flex; align-items: center;
  justify-content: center; font-size: 16px; margin-bottom: 14px;
}
.sr-step h3 { font-size: 17px; margin: 0 0 6px; }
.sr-step p { font-size: 14px; color: var(--ink-soft); line-height: 1.6; margin: 0; }

/* ---------- Blog ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.b-card {
  display: flex; flex-direction: column; border-radius: var(--r-card);
  overflow: hidden; background: #fff; color: var(--ink); box-shadow: var(--edge);
  transition: transform .22s ease, box-shadow .22s ease;
}
.b-card:hover { transform: translateY(-3px); box-shadow: var(--edge-hover), var(--shadow-lift); }
.b-thumb { aspect-ratio: 16/9; background: var(--bg-alt); overflow: hidden; }
.b-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.b-card .b-txt { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 7px; }
.b-card time { font-size: 12.5px; color: var(--ink-faint); }
.b-card h3 { font-size: 16.5px; line-height: 1.4; margin: 0; letter-spacing: var(--track-heading); }
.b-card p {
  font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-search {
  max-width: 440px; margin: 0 auto 34px; display: block; width: 100%;
  padding: 12px 20px; font-size: 15px; font-family: var(--font);
  border: 1px solid var(--line); border-radius: var(--r-chip); background: #fff; outline: none;
  transition: border-color .18s, box-shadow .18s;
}
.blog-search:focus { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.crumbs { max-width: 760px; margin: 0 auto 18px; font-size: 13px; color: var(--ink-faint); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.crumbs a { color: var(--ink-soft); font-weight: 400; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs .cs { opacity: .55; }
.crumbs .cur { color: var(--ink-faint); max-width: 46ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.post-head { max-width: 760px; margin: 0 auto; }
.post-head h1 { font-size: clamp(30px, 4.6vw, 52px); letter-spacing: var(--track-display); line-height: 1.06; font-weight: 600; }
.post-head time { color: var(--ink-faint); font-size: 14px; display: block; margin-top: 14px; }
.post-hero { max-width: 900px; margin: 36px auto 0; border-radius: var(--r-banner); overflow: hidden; }
/* height:auto undoes the baked width/height attrs (kept for CLS); the fixed
   ratio + cover normalizes the mixed 16:10/3:2/1:1 hero crops. */
.post-hero img { width: 100%; display: block; height: auto; aspect-ratio: 16/9; object-fit: cover; }
.post-body { max-width: 720px; margin: 0 auto; font-size: 16.5px; line-height: 1.75; color: var(--ink-soft); }
.post-body h2 { font-size: 27px; color: var(--ink); letter-spacing: var(--track-display); margin: 44px 0 14px; line-height: 1.2; }
.post-body h3 { font-size: 20px; color: var(--ink); margin: 34px 0 10px; }
.post-body h4 { font-size: 17px; color: var(--ink); margin: 28px 0 8px; }
.post-body p { margin: 0 0 18px; }
.post-body a { color: var(--link); font-weight: 500; }
.post-body ul, .post-body ol { margin: 0 0 18px; padding-left: 24px; }
.post-body li { margin-bottom: 8px; }
.post-body img { max-width: 100%; height: auto; border-radius: 18px; margin: 26px auto; display: block; }
.post-body blockquote { border-left: 3px solid var(--accent); margin: 24px 0; padding: 6px 0 6px 20px; color: var(--ink); font-weight: 500; }
.post-body table { width: 100%; border-collapse: collapse; margin: 26px 0; font-size: 14.5px; display: block; overflow-x: auto; }
.post-body th, .post-body td { border: 1px solid var(--line-soft); padding: 10px 12px; text-align: left; }
.post-body th { background: var(--bg-alt); color: var(--ink); font-weight: 500; }
.post-video { position: relative; aspect-ratio: 16/9; margin: 26px 0; border-radius: 18px; overflow: hidden; background: #000; }
.post-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.post-cta { max-width: 720px; margin: 56px auto 0; border-top: 1px solid var(--line); padding-top: 36px; text-align: center; }

/* ---------- ICC Profile Finder ---------- */
.pf { border-radius: var(--r-card); background: #fff; overflow: hidden; box-shadow: var(--edge); }
.pf-step { display: grid; grid-template-columns: 52px 1fr; gap: 16px; padding: 26px 28px; border-bottom: 1px solid var(--line-soft); }
.pf-step[hidden] { display: none; }
.pf-num {
  width: 34px; height: 34px; border-radius: 50%; background: var(--grad);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 14px;
}
.pf-q { font-size: 16.5px; font-weight: 500; margin-bottom: 4px; }
.pf-hint { font-size: 13px; color: var(--ink-faint); margin-bottom: 14px; }
.pf-opts { display: flex; flex-wrap: wrap; gap: 9px; }
.pf-opt {
  border: 1px solid var(--line); background: #fff; border-radius: var(--r-chip);
  padding: 10px 18px; font-size: 13.5px; font-weight: 500; cursor: pointer;
  transition: .18s; display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink); font-family: var(--font);
}
.pf-opt:hover { border-color: #9aa0a6; background: var(--bg-alt); }
.pf-opt[aria-pressed="true"] {
  background: var(--accent-tint); color: var(--accent-ink);
  border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent);
}
.pf-opt:disabled { opacity: .5; cursor: not-allowed; border-style: dashed; }
.pf-opt .d { color: var(--ink-faint); font-weight: 400; }
.pf-opt .t {
  font-size: 10px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: var(--r-chip); background: var(--tint-slate); color: var(--ink-faint);
}
.pf-opt[aria-pressed="true"] .t { background: #fff; color: var(--accent-ink); }
.pf-opt .t.cur { background: var(--accent-tint); color: var(--accent-ink); }
.pf-result { padding: 32px 28px; background: var(--bg-alt); }
.pf-result[hidden] { display: none; }
/* The result block's action row is .hero-cta, which centres itself for the
   homepage. Inside a left-aligned result card that put the two buttons in
   the middle of the card with everything else at its left edge. */
.pf-result .hero-cta { justify-content: flex-start; }
.pf-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--ink-faint); letter-spacing: .04em; margin-bottom: 8px; }
.pf-title { font-size: clamp(20px, 2.2vw, 27px); font-weight: 600; letter-spacing: var(--track-display); margin-bottom: 18px; }
.pf-inc { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.pf-inc li { display: flex; gap: 10px; font-size: 14.5px; align-items: baseline; color: var(--ink-soft); }
.pf-inc li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; transform: translateY(-2px); }
.pf-nudge { margin-top: 18px; padding: 14px 18px; border-radius: 16px; background: var(--accent-tint); font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); }
.pf-nudge[hidden] { display: none; }
.pf-nudge a { color: var(--accent-ink); font-weight: 500; }
.pf-note { font-size: 13px; color: var(--ink-faint); line-height: 1.65; max-width: 72ch; margin-top: 16px; }
.pf-note a { color: var(--link); }

/* ---------- ICC page: quick-ref table + guide cards ---------- */
.qr-table { border-top: 1px solid var(--line-soft); max-width: 860px; }
.qr-row { display: grid; grid-template-columns: 220px 1fr; gap: 20px; padding: 16px 4px; border-bottom: 1px solid var(--line-soft); font-size: 14.5px; }
.qr-row dt { color: var(--ink-soft); font-weight: 400; }
.qr-row dd { margin: 0; color: var(--ink); font-weight: 500; }
.qr-note { font-size: 13px; color: var(--ink-faint); margin-top: 16px; max-width: 72ch; }
.g-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.g-card {
  display: flex; flex-direction: column; gap: 9px; border-radius: var(--r-card);
  padding: 24px; background: #fff; color: var(--ink); box-shadow: var(--edge);
  transition: transform .22s ease, box-shadow .22s ease;
}
.g-card:hover { transform: translateY(-3px); box-shadow: var(--edge-hover), var(--shadow-lift); }
.g-kicker { font-size: 11px; font-weight: 500; letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--ink-faint); }
.g-card h3 { font-size: 17px; line-height: 1.4; letter-spacing: var(--track-heading); margin: 0; }
.g-card p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; margin: 0; }
.g-card .go { margin-top: auto; padding-top: 10px; font-size: 14px; font-weight: 500; color: var(--link); }

/* ---------- Small print ---------- */
.mt-note { font-size: 12.5px; color: var(--ink-faint); margin-top: 14px; line-height: 1.55; }

/* ---------- RTL ---------- */
html[dir="rtl"] .split.reverse { direction: ltr; }
html[dir="rtl"] .arw { display: inline-block; transform: scaleX(-1); }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform .8s cubic-bezier(.16, 1, .3, 1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { transition: none; opacity: 1; transform: none; } }

/* ===================================================================
   RESPONSIVE
   =================================================================== */
/* The Dealer login link only exists on a wide bar, so every adjustment it
   needs is scoped here: below 1200px nothing about the nav changes from what
   it was, and the same destination stays one tap away in the Dealers
   dropdown. Inside the block the labels stop wrapping ("Pourquoi DTF
   Station" was breaking onto three lines) and the spacing tightens, which is
   what buys the room in fr / es-419 / pt-PT. */
@media (min-width: 1200px) {
  .nav-inner { gap: 20px; }
  .nav-links { gap: 2px; margin-left: 4px; }
  .nav-right { gap: 8px; }
  .nav-links > li > a,
  .nav-links .drop-toggle,
  .nav-portal { padding: 8px 9px; }
  .nav-links > li > a,
  .nav-links .drop-toggle,
  .nav-shop,
  .nav-portal { white-space: nowrap; }
}
@media (max-width: 1199px) { .nav-portal { display: none; } }

@media (max-width: 1024px) {
  .mosaic > * { grid-column: span 3; }
  .mosaic > .span-two-thirds,
  .mosaic > .span-full { grid-column: span 6; }
  .cfg { grid-template-columns: 1fr; gap: 32px; }
  .cfg-hero { position: static; }
  .grid-cat { grid-template-columns: repeat(2, 1fr); }
  .vid-grid, .g-grid, .blog-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .grid-dealer { grid-template-columns: repeat(2, 1fr); }
}

/* The bar collapses to the burger at 1023px, not 860px. Between those two
   widths the desktop row does not fit the long locales: French and European
   Portuguese were overflowing, and because the logo was the only shrinkable
   item in the row it was the thing that gave way — at 900px wide the DTF
   Station logo was being squeezed to zero and disappearing from the header
   on /fr/ and /pt/. Only the nav collapses here; every other layout rule
   still changes at 860px as before. */
@media (max-width: 1023px) {
  .nav-inner { gap: 12px; }
  .nav-logo img { height: 26px; }
  .nav-links {
    display: none; position: absolute; top: var(--nav-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--line-soft);
    padding: 12px; box-shadow: var(--shadow-lift); margin-left: 0;
  }
  .nav-links.open { display: flex; }
  .nav-links > li > a, .nav-links .drop-toggle { width: 100%; justify-content: flex-start; padding: 12px 14px; font-size: 15px; }
  .drop-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; border-radius: 0; padding: 0 0 8px 14px; min-width: 0;
  }
  .nav-drop { flex-direction: column; align-items: flex-start; }
  .nav-drop > a::after { display: none; }
  .nav-links.open .nav-sub {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; background: transparent;
    padding: 4px 0 8px 16px; min-width: 0; display: flex; flex-direction: column;
  }
  .nav-links.open .nav-sub a { padding: 9px 0; font-size: 14px; }
  .has-drop { display: block; }
  .has-drop > .caret { display: none; }
  .drop-menu a { padding: 9px 14px; }
  .burger { display: flex; }
}

@media (max-width: 860px) {
  .nav-inner { gap: 12px; }
  .nav-logo img { height: 26px; }
  .nav-links {
    display: none; position: absolute; top: var(--nav-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--line-soft);
    padding: 12px; box-shadow: var(--shadow-lift); margin-left: 0;
  }
  .nav-links.open { display: flex; }
  .nav-links > li > a, .nav-links .drop-toggle { width: 100%; justify-content: flex-start; padding: 12px 14px; font-size: 15px; }
  .drop-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; border-radius: 0; padding: 0 0 8px 14px; min-width: 0;
  }
  /* Inside the open mobile menu the Dealers submenu is always visible,
     indented — a hover-only dropdown is unreachable on touch. */
  .nav-drop { flex-direction: column; align-items: flex-start; }
  .nav-drop > a::after { display: none; }
  .nav-links.open .nav-sub {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; background: transparent;
    padding: 4px 0 8px 16px; min-width: 0; display: flex; flex-direction: column;
  }
  .nav-links.open .nav-sub a { padding: 9px 0; font-size: 14px; }
  .has-drop { display: block; }
  .has-drop > .caret { display: none; }
  .drop-menu a { padding: 9px 14px; }
  .burger { display: flex; }

  .banner { min-height: 0; }
  .banner.split { grid-template-columns: 1fr; }
  .banner .banner-art { position: static; width: auto; padding: 0 24px 32px; }
  .banner .banner-body { padding: 36px 24px 24px; max-width: none; }
  .banner .banner-art img { max-height: 260px; }
  .banner.flip .banner-art { inset: auto; }
  .banner.flip .banner-body { justify-self: stretch; text-align: left; }
  .banner.flip .banner-actions { justify-content: flex-start; }
  .banner.split.flip { direction: ltr; }

  .grid-eq { grid-template-columns: 1fr; }
  .grid-vals { grid-template-columns: 1fr; gap: 40px; }
  .split { grid-template-columns: 1fr; }
  .split.reverse { direction: ltr; }
  .split .media { min-height: 300px; order: -1; }
  .form-grid { grid-template-columns: 1fr; }
  .foot-top { grid-template-columns: 1fr 1fr; gap: 32px; }
  .compare { padding-top: 20px; }
  .pdp-top { grid-template-columns: 1fr; gap: 28px; }
  .pdp-media { min-height: 300px; padding: 32px; }
  .feat { grid-template-columns: 1fr; gap: 26px; }
  .feat .fm { min-height: 280px; }
  .subnav .pn { display: none; }
  .roi { grid-template-columns: 1fr; gap: 26px; }
  .roi-results { position: static; }
  .ev-grid, .pl-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .sup-grid { grid-template-columns: 1fr; gap: 40px; }
  .sr-steps { grid-template-columns: 1fr; gap: 28px; }
  .pdp-feats { grid-template-columns: 1fr; gap: 20px; }
  .feat-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .mosaic > *,
  .mosaic > .span-half,
  .mosaic > .span-two-thirds { grid-column: span 6; }
  section { padding: 44px 0; }
  .cmp-col-label { width: 130px; min-width: 130px; }
  .cmp-table th, .cmp-table td { padding: 12px 14px; }
  .trustbar .tsep { display: none; }
  .trustbar .in { gap: 10px 18px; padding: 16px 24px; }
  .vid-grid, .g-grid, .blog-grid { grid-template-columns: 1fr; }
  .pf-step { grid-template-columns: 1fr; gap: 8px; }
  .qr-row { grid-template-columns: 1fr; gap: 4px; }
}

@media (max-width: 600px) {
  /* Compact the language selector to a globe-only control so the sticky bar
     (logo · language · Find a dealer · menu) always fits. */
  .langsel-code, .langsel .chev { display: none; }
  .langsel-btn { padding: 8px; gap: 0; }
  .nav-shop { padding: 7px 14px; font-size: 13px; }
  .nav-right { gap: 8px; }
  .langsel-menu { min-width: min(240px, calc(100vw - 32px)); }
  /* The globe sits mid-bar on a phone, so a menu hung off its edge ran past
     the screen. Span the bar instead (header.nav's backdrop-filter makes it
     the containing block, so these offsets are the bar's own edges). */
  header .langsel-menu { position: fixed; top: calc(var(--nav-h) + 4px); left: 16px; right: 16px; min-width: 0; }
  .band { padding: 44px 24px; }
  .band .chips { gap: 8px; }
  .split .copy { padding: 32px 24px; }
  .grid-cat { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .grid-dealer { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .foot-top { grid-template-columns: 1fr; gap: 26px; }
  .foot-bottom { justify-content: center; text-align: center; }
  .signup-row .btn { width: 100%; }
  .roi-grid { grid-template-columns: 1fr; }
  .roi-mile { grid-template-columns: 1fr; }
}

@media (max-width: 400px) {
  .nav-inner { gap: 10px; padding: 0 16px; }
  .nav-logo img { height: 24px; }
  .nav-shop { padding: 6px 12px; font-size: 12.5px; }
  .wrap { padding: 0 18px; }
}

/* ===================================================================
   TINT UTILITIES
   Declared last, and scoped to the components they modify, so they win over
   the default background on .card / .banner regardless of the order those
   components are defined above. This is load-bearing: when these were
   unscoped and declared earlier, every card rendered grey.

   The per-family colours are COLLAPSED TO THE NEUTRAL rather than deleted,
   so any `t-teal` / `t-sand` already written into markup stays valid and
   keeps rendering correctly. `ink` is not collapsed — it is the flagship
   treatment, and since the black went it is the washed surface.
   =================================================================== */
.banner.t-teal,  .card.t-teal,
.banner.t-sand,  .card.t-sand,
.banner.t-mist,  .card.t-mist,
.banner.t-sage,  .card.t-sage,
.banner.t-blush, .card.t-blush,
.banner.t-slate, .card.t-slate,
.banner.t-neutral, .card.t-neutral { background: var(--tint-neutral); }

.banner.t-ink, .card.t-ink {
  background-color: var(--bg);
  background-image: var(--brand-wash-card);
  color: var(--ink);
  box-shadow: var(--edge);
}
.card.t-ink:hover { box-shadow: var(--edge-hover), var(--shadow-lift); }
.banner.t-ink .lede, .card.t-ink .card-body p { color: var(--ink-soft); }
.banner.t-ink .eyebrow, .card.t-ink .card-kicker { color: var(--ink-faint); }
.banner.t-ink .banner-art img, .card.t-ink .card-media img { filter: var(--shadow-product); }

/* The partner-tier grid uses .catcard, not .card, so the flagship treatment
   has to be named for it too. partners.html's Platinum tier was the last
   black surface on the site. */
.catcard.t-ink {
  background-color: var(--bg);
  background-image: var(--brand-wash-card);
  box-shadow: var(--edge);
}
.catcard.t-ink:hover { box-shadow: var(--edge-hover), var(--shadow-lift); }


/* ===================================================================
   HOMEPAGE BANNER-CARD LAYOUT
   Merged in from `redesign/home-banner-cards` (#1), which landed on main
   on 2026-09-04 while this port was in progress. That change copied the
   US site's LAYOUT thinking — a wide flagship banner, a browse chip row
   and a mixed-width mosaic — and rebuilt it on the OLD tokens: black
   flagship, gradient glow orb, mix-blend-mode product shots, #0a84c0
   links. This section keeps its markup exactly and puts it on the new
   system, which is what that change was reaching for in the first place.

   The class names differ from the US originals (.mcard not .card, .bchip
   not .chip, .banner.dark not .banner.on-dark) because they were written
   independently. They are not renamed here — renaming would mean editing
   the homepage markup and its i18n hooks for no visual gain. They are
   simply defined to mean what their US counterparts mean.
   =================================================================== */

/* The flagship banner. `.dark` was a near-black slab; it is the washed
   flagship treatment now, exactly as .banner.on-dark and .card.t-ink are —
   there is no flat black anywhere on this site any more. */
.banner.dark {
  background-color: var(--bg);
  background-image: var(--brand-wash-card);
  border: 0;
  color: var(--ink);
  box-shadow: var(--edge);
}
.banner.dark .banner-body p { color: var(--ink-soft); }
.banner.dark .eyebrow, .banner.dark .banner-cap { color: var(--ink-faint); }
/* The flagship shot is a cut-out PNG on a light ground now, so it takes the
   ordinary alpha-following product shadow rather than the heavy dark one. */
.banner.dark .banner-art img { filter: var(--shadow-product-lg); }

/* This markup uses h1/h2 directly inside .banner-body rather than the US
   .title-lg utility, so the banner's own type scale is stated for them. It
   is the same one step down from the section scale — a 560px column
   overshoots at full section size. */
.banner .banner-body .eyebrow { display: block; margin-bottom: 2px; }
.banner .banner-body h2 { font-size: clamp(27px, 3.3vw, 42px); line-height: 1.08; letter-spacing: var(--track-display); margin: 12px 0 14px; }
.banner .banner-body h1.banner-title { font-size: clamp(34px, 4.8vw, 58px); line-height: 1.03; letter-spacing: var(--track-display); margin: 12px 0 14px; }
.banner .banner-body p { font-size: clamp(16px, 1.5vw, 19px); color: var(--ink-soft); line-height: 1.55; margin-bottom: 26px; }
.banner .banner-art { flex-direction: column; }
.banner .banner-cap { margin-top: 12px; font-size: 13px; color: var(--ink-faint); font-weight: 500; }
.banner .banner-cap .grad-text { font-weight: 600; }

/* ---------- Mosaic card ----------
   The homepage's own card class. Same surface, edge, lift and product
   shadow as .card; the parts are named mc-* rather than card-*. */
.mcard {
  display: flex; flex-direction: column; position: relative; overflow: hidden;
  background: var(--tint-neutral); box-shadow: var(--edge);
  border-radius: var(--r-card); padding: 26px 24px 0; min-height: 300px;
  text-align: left; transition: transform .22s ease, box-shadow .22s ease;
}
.mcard:hover { transform: translateY(-3px); box-shadow: var(--edge-hover), var(--shadow-lift); }
.mcard .mc-k {
  font-size: 12px; font-weight: 500; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-faint);
}
.mcard h3 { font-size: 20px; font-weight: 600; letter-spacing: var(--track-heading); margin: 9px 0 6px; }
.mcard p { font-size: 14px; color: var(--ink-soft); line-height: 1.55; }
.mcard .mc-go {
  margin-top: 12px; font-size: 14px; font-weight: 500; color: var(--link);
  display: inline-flex; align-items: center; gap: 5px;
}
.mcard .mc-go .arw { transition: transform .2s; }
.mcard:hover .mc-go .arw { transform: translateX(4px); }
.mcard .mc-art {
  margin-top: auto; padding: 18px 6px 0;
  display: flex; align-items: flex-end; justify-content: center; height: 170px;
}
/* mix-blend-mode:multiply is gone sitewide — see the note under --shadow-product. */
.mcard .mc-art img { max-height: 160px; max-width: 100%; width: auto; object-fit: contain; filter: var(--shadow-product); }
.mcard .mc-art img[src$=".jpg"], .mcard .mc-art img[src$=".jpeg"] { filter: none; border-radius: 14px; }
.mosaic > .span-half .mc-art { height: 230px; }
.mosaic > .span-half .mc-art img { max-height: 220px; }
.mcard.text-only { min-height: 220px; padding-bottom: 26px; justify-content: flex-start; }

/* ---------- Browse row ---------- */
.browse {
  display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 12px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.browse::-webkit-scrollbar { display: none; }
.bchip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 20px 8px 8px; border-radius: var(--r-chip);
  border: 1px solid var(--line); background: #fff;
  font-size: 14px; font-weight: 500; color: var(--ink);
  white-space: nowrap; transition: background .18s, border-color .18s, box-shadow .18s;
}
.bchip:hover { background: var(--bg-alt); border-color: #c4c7c5; box-shadow: var(--shadow-card); }
.bchip .ic {
  width: 42px; height: 42px; border-radius: 50%; background: var(--tint-slate);
  display: grid; place-items: center; overflow: hidden; flex: 0 0 auto;
}
.bchip .ic img { width: 84%; height: 84%; object-fit: contain; }

/* ---------- Home section rhythm ----------
   The nav is sticky rather than fixed now, so the flagship section no
   longer has to reserve --nav-h to duck under it. */
.home-flag { padding: clamp(20px, 2.4vw, 32px) 0 14px; }
.home-flag .banner.dark { min-height: 380px; }
.home-browse { padding: 18px 0 6px; }
.home-mosaic { padding: clamp(32px, 3.6vw, 52px) 0 clamp(56px, 6.5vw, 96px); }

@media (max-width: 860px) {
  .home-flag .banner.dark { min-height: 0; }
}
@media (max-width: 640px) {
  .mcard { min-height: 0; }
}


/* ===================================================================
   HOMEPAGE — MANUFACTURER FIGURES + PILLARS
   Ported from the US site's Manufacturer.astro and Pillars.astro (their
   scoped <style> blocks, verbatim values). Jason, 2026-09-05: the US site
   talks about how many countries we are in, and the Global site of all
   sites should. The figure IS the argument here, so it is allowed to be
   the largest thing on the page after the hero headline.

   On white, never a dark slab: the US tried a near-black band for this
   twice and rejected it both times. The figures carry the section.
   =================================================================== */
.manu {
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(32px, 5vw, 80px); align-items: center;
}
.manu .lead { margin-bottom: 0; }
.figures { display: grid; gap: 0; margin: 0; padding: 0; }
.figures > div { padding: clamp(22px, 2.4vw, 32px) 0; }
.figures > div + div { border-top: 1px solid var(--line); }
.figures dt {
  font-size: 12px; font-weight: 500; letter-spacing: var(--track-eyebrow);
  text-transform: uppercase; color: var(--ink-faint);
}
.figures dd {
  margin: 8px 0 0; font-size: clamp(52px, 7vw, 96px); font-weight: 700;
  line-height: .92; letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.figures dd span { color: var(--accent-ink); }
@media (max-width: 900px) { .manu { grid-template-columns: 1fr; } }

.pillars {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 3.5vw, 56px);
}
/* A hairline in the accent, not a heavy bar — a 2px black rule next to 28px
   radii had the page speaking two design languages at once. */
.pillars li { border-top: 1px solid var(--accent); padding-top: 22px; }
.pillars h3 {
  font-size: clamp(21px, 2vw, 28px); line-height: 1.16;
  letter-spacing: var(--track-heading); margin: 14px 0 12px; text-wrap: balance;
}
.pillars p { font-size: 15.5px; line-height: 1.62; color: var(--ink-soft); margin: 0 0 18px; }
@media (max-width: 760px) { .pillars { grid-template-columns: 1fr; gap: 34px; } }


/* ===================================================================
   CATALOG PAGES + PRINTER PRODUCT PAGES
   Ported 2026-09-05 from the US site's /printers/ (pages/printers.astro,
   components/JumpChips.astro) and /printers/<model>/ (pages/printers/
   [id].astro, components/Photo.astro) — their scoped <style> blocks,
   values verbatim, on this site's tokens. Jason: "When I go to the
   equipment dropdown and I select DTF printers, it should go into a
   catalog of DTF printers, just like the US site ... cards on the top to
   jump to a certain section", and "hero pages for as many of the printers
   we have photos for".

   NAMES. The US product page calls its essay rows `.feat`, which this site
   already uses for the equipment overview's split blocks (`.feat .fx/.fm`).
   The product-page parts are prefixed `pp-` here so the two cannot collide.
   =================================================================== */

/* ---------- jump chips ----------
   Same chip as the browse row on purpose. These navigate WITHIN the page,
   so the active one is marked as you scroll — a row that looks like site
   navigation but only scrolls needs to show where you have got to. */
.jump-chips { margin-top: 4px; }
.jump-chips .chip { scroll-snap-align: start; white-space: nowrap; }
.jump-chips .chip.is-here { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
/* Anchor targets sit under a sticky nav, so a plain jump would land with the
   heading hidden behind it. */
.jump-target { scroll-margin-top: calc(var(--nav-h) + 24px); }

/* ---------- one machine (catalog row) ----------
   A two-column stage: the product on one side, the argument on the other.
   Not .card and not .banner — both cap their image height for use in a
   grid, and the whole point here is that the machine is allowed to be the
   largest thing in the block. Rows alternate sides down the page: identical
   units in one rhythm read as a list; alternating reads as a walk through
   a range. */
.machine {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(24px, 2.6vw, 36px) clamp(28px, 5vw, 72px);
  padding: clamp(32px, 4.5vw, 64px);
  border-radius: var(--r-banner);
  background: #fff;
  box-shadow: var(--edge);
}
.machine.is-flip { direction: rtl; }
.machine.is-flip > * { direction: ltr; }
.machine-art { position: relative; display: grid; place-items: center; isolation: isolate; }
/* The lit ground. Without it a cut-out PNG on flat white looks pasted on. */
.machine-art::before {
  content: ''; position: absolute; z-index: -1;
  width: min(115%, 620px); aspect-ratio: 1.6 / 1; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(20, 24, 26, .13), transparent 68%);
  filter: blur(50px); pointer-events: none;
}
.machine-art img { width: 100%; max-width: 560px; max-height: 340px; height: auto; object-fit: contain; filter: var(--shadow-product); }
.machine-art img[src$=".jpg"], .machine-art img[src$=".jpeg"] { filter: none; border-radius: 18px; }
/* A product with no photograph yet (Eddy2, Phoenix Air): the name on the
   lit ground rather than a borrowed picture of a different machine. */
.machine-noart {
  display: grid; place-items: center; width: 100%; min-height: 200px;
  border-radius: var(--r-card); background: var(--tint-slate);
  font-size: clamp(22px, 2.4vw, 30px); font-weight: 600; letter-spacing: var(--track-heading); color: var(--ink-faint);
}
.machine-copy h2 { margin: 12px 0 0; text-wrap: balance; }
.machine-copy h2 a:hover { color: var(--accent-ink); }
.machine-copy .eyebrow { display: block; }
.machine-copy .lede { margin: 16px 0 0; max-width: 34rem; }
.machine-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(26px, 3vw, 34px); }
/* Spec strip: its own full-width row under both columns, hairline-separated
   columns so every value sits on one line. */
.machine-specs {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 clamp(16px, 2.4vw, 36px);
  margin: 0; padding-top: 22px; border-top: 1px solid var(--line-soft);
}
.machine-specs.cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.machine-specs.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.machine-specs.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.machine-specs dt { font-size: 11.5px; font-weight: 500; letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--ink-faint); }
.machine-specs dd { margin: 7px 0 0; font-size: clamp(14px, 1.05vw, 15.5px); font-weight: 500; line-height: 1.35; color: var(--ink); hyphens: none; }
/* The flagship: the brand wash no other row carries, the display type scale
   on the name, a bigger stage and more padding. Scale and light, not a black
   rectangle (Jason, 2026-09-03: keep everything white and clean). */
.machine.is-flagship {
  grid-template-columns: 1fr 1fr;
  padding: clamp(36px, 5.5vw, 80px);
  background-color: #fff; background-image: var(--brand-wash-card);
  box-shadow: var(--edge);
}
.machine.is-flagship .eyebrow { color: var(--accent-ink); }
.machine.is-flagship .machine-art::before { background: radial-gradient(ellipse at center, rgba(73, 191, 188, .20), transparent 68%); filter: blur(58px); }
.machine.is-flagship .machine-art img { max-width: 680px; max-height: 400px; }

/* ---------- product sub-nav ----------
   Sits under the main nav and follows the reader down the page. Same frosted
   treatment as the main bar so they read as one piece of chrome. */
.pnav {
  position: sticky; top: var(--nav-h); z-index: 90;
  background: rgba(255, 255, 255, .78);
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(20, 24, 26, .07);
}
.pnav-in { display: flex; align-items: center; gap: 24px; height: 54px; }
.pnav-name { font-weight: 600; font-size: 15px; letter-spacing: var(--track-heading); }
.pnav-links { display: flex; gap: 4px; list-style: none; margin: 0 auto 0 8px; padding: 0; }
.pnav-links a { display: inline-block; padding: 7px 12px; border-radius: var(--r-chip); font-size: 14px; font-weight: 500; color: var(--ink-soft); transition: .18s; }
.pnav-links a:hover { color: var(--ink); background: rgba(60, 64, 67, .07); }
.pnav-cta { padding: 8px 18px; font-size: 14px; }
.pnav ~ section[id] { scroll-margin-top: calc(var(--nav-h) + 54px + 12px); }

/* ---------- product hero ----------
   Contained and light: the machine on a white stage, which is what lets a
   cut-out PNG with the product's own shadow read as photography. */
.phero {
  display: grid; grid-template-columns: 0.92fr 1.08fr;
  grid-template-areas: 'copy art' 'stats stats';
  align-items: center;
  gap: clamp(20px, 3vw, 40px) clamp(24px, 4vw, 64px);
  padding: clamp(32px, 4.5vw, 64px) clamp(28px, 4.5vw, 64px) clamp(24px, 3vw, 40px);
  border-radius: var(--r-banner); background: var(--bg-alt); box-shadow: inset 0 0 0 1px var(--line-soft);
}
.phero-copy { grid-area: copy; }
.phero-copy .eyebrow { display: block; }
.phero-copy h1 { margin: 14px 0 0; text-wrap: balance; }
/* The character line: bigger than the lede, smaller than the name, and it
   says who the machine is for before any number does. */
.phero-char { font-size: clamp(20px, 2.1vw, 27px); line-height: 1.25; font-weight: 500; letter-spacing: var(--track-heading); margin: 14px 0 0; color: var(--ink); }
.phero-copy .lede { margin: 14px 0 0; max-width: 30rem; }
.phero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.phero-art { grid-area: art; position: relative; display: grid; place-items: center; isolation: isolate; }
.phero-art::before {
  content: ''; position: absolute; z-index: -1;
  width: min(120%, 640px); aspect-ratio: 1.6 / 1; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(20, 24, 26, .16), transparent 68%);
  filter: blur(54px); pointer-events: none;
}
.phero-art img { width: 100%; max-width: 620px; max-height: 460px; height: auto; object-fit: contain; filter: var(--shadow-product-lg); }
.phero-stats {
  grid-area: stats; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 clamp(16px, 2.4vw, 36px); margin: 0; padding-top: 22px; border-top: 1px solid var(--line);
}
.phero-stats dd { margin: 0; font-size: clamp(24px, 2.6vw, 34px); font-weight: 700; line-height: 1; letter-spacing: var(--track-display); font-variant-numeric: tabular-nums; }
.phero-stats dt { margin-top: 8px; font-size: 12px; font-weight: 500; letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--ink-faint); }

/* ---------- claims: statements, not cards ---------- */
.pp-claims { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 3.5vw, 56px); }
.pp-claims li { border-top: 1px solid var(--accent); padding-top: 22px; }
.pp-claims h2 { font-size: clamp(21px, 2vw, 28px); line-height: 1.16; margin: 0 0 10px; text-wrap: balance; }
.pp-claims p { font-size: 15.5px; line-height: 1.62; color: var(--ink-soft); margin: 0; }

/* ---------- the photo essay ----------
   Photo and copy, alternating. The photo is the larger column on purpose:
   this is the section that stops the page being a datasheet. */
.pp-essay { display: grid; gap: clamp(40px, 5vw, 80px); }
.pp-feat { display: grid; grid-template-columns: 1.15fr 0.85fr; align-items: center; gap: clamp(24px, 4vw, 64px); }
.pp-feat.is-flip { direction: rtl; }
.pp-feat.is-flip > * { direction: ltr; }
.pp-feat-copy .eyebrow { display: block; }
.pp-feat-copy h3 { font-size: clamp(24px, 2.8vw, 36px); line-height: 1.1; letter-spacing: var(--track-display); margin: 12px 0 14px; text-wrap: balance; }
.pp-feat-copy p { font-size: clamp(15.5px, 1.2vw, 17px); line-height: 1.6; color: var(--ink-soft); margin: 0; max-width: 30rem; }

/* A photograph from the pp-* library: three files (1400w jpg, 1400w webp,
   700w webp), cropped with object-fit so one photo can run 3:2 in the essay
   and 4:3 in the detail grid. */
.photo { display: block; overflow: hidden; border-radius: var(--r-card); box-shadow: var(--shadow-card); background: var(--bg-alt); }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- detail grid ---------- */
.pp-details { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); }
.pp-details li span { display: block; margin-top: 12px; font-size: 14px; font-weight: 500; color: var(--ink-soft); }

/* ---------- specs + pairs ---------- */
.pp-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(32px, 5vw, 80px); max-width: 1000px; }
.pp-pairs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.pp-pairs.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pp-pairs.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pp-pairs .card { min-height: 0; }
.pp-pairs .card .card-media img { max-height: 170px; }
.pp-pairs .card .card-body h3 { font-size: 17px; }
.pp-pairs-more { margin: clamp(24px, 3vw, 36px) 0 0; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .pp-details { grid-template-columns: repeat(2, 1fr); }
  .pp-pairs, .pp-pairs.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .machine, .machine.is-flagship { grid-template-columns: 1fr; gap: 24px; padding: 28px 24px 32px; }
  .machine.is-flip { direction: ltr; }
  .machine-art img, .machine.is-flagship .machine-art img { max-width: 100%; max-height: 240px; }
  .machine-art::before { filter: blur(38px); }
  .pnav-links { display: none; }
  .pnav-cta { margin-left: auto; }
  .phero { grid-template-columns: 1fr; grid-template-areas: 'art' 'copy' 'stats'; padding: 24px 22px 24px; }
  .phero-art img { max-height: 260px; }
  .phero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px clamp(14px, 4vw, 24px); }
  .pp-claims { grid-template-columns: 1fr; gap: 30px; }
  .pp-feat, .pp-feat.is-flip { grid-template-columns: 1fr; direction: ltr; gap: 18px; }
  .pp-specs { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .pp-details { grid-template-columns: 1fr; }
  .pp-pairs, .pp-pairs.cols-3, .pp-pairs.cols-2 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .machine-specs, .machine-specs.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px clamp(14px, 4vw, 24px); }
}