/*
 * Repeater site stylesheet, the "Trade" theme.
 *
 * One shared shell for every public page. Light-first: white and #f4f4f4
 * surfaces, near-black ink, and a single blue accent inherited from the
 * business registry (#4f8cff). Hairline rules, editorial display type in Jost,
 * and one dark band for the final CTA, the restraint is deliberate.
 *
 * Design fusion: BUSINITY (business/agency) supplies the restraint, the
 * hairline rules and the eyebrow -> headline -> lede rhythm. APPNEXT (SaaS)
 * supplies the block structure, the category chips, the attributed stat cards
 * and the dark inner product plate.
 *
 * Deliberately dependency-free and hand-rolled, no build step, no framework.
 * Pages inline only what is unique to them; everything shared lives here.
 * Its :root tokens are the single place to change the palette.
 *
 * CONTRAST (computed, WCAG 2.x, see tests/tokens.test.mjs which recomputes
 * every one of these from this file and fails on drift):
 *   --fg           #121212  18.73:1  body copy, headings
 *   --fg-2         #606060   6.29:1  ledes, secondary copy
 *   --fg-3         #767676   4.54:1  captions, table meta
 *   --accent       #4f8cff   3.22:1  DECORATIVE ONLY, fills, >=24px, icons,
 *                                    rings. Never small text on white.
 *   --accent-strong #2f6fe0  4.70:1  links, small accent text, .btn--accent
 *   --ok           #1bab49   3.01:1  fills/icons only; text uses --ok-strong
 *   --warn         #e3b324   1.96:1  FAILS AT EVERY SIZE. Fill/icon only.
 *                                    Never a `color:` value. Text uses
 *                                    --warn-strong #7a5c00 (6.25:1).
 *   --danger       #e03800   4.43:1  fills/icons; text uses --danger-strong
 */

/* ---------------- Fonts (self-hosted, no third-party CDN) ---------------- */

/* Inter, latin-ext */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/inter-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Inter, latin */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Jost, latin-ext */
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/jost-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Jost, latin */
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/jost-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------------- Tokens ---------------- */

:root {
  /* Surfaces */
  --bg: #ffffff;
  --bg-sunken: #f4f4f4;
  --bg-raised: #fafafa;
  --band: #121212;
  --band-fg: #ffffff;
  --band-fg-2: rgba(255, 255, 255, 0.62);
  --band-line: rgba(255, 255, 255, 0.14);

  /* Ink */
  --fg: #121212;
  --fg-2: #606060;
  --fg-3: #767676;
  --fg-on-accent: #ffffff;

  /* Lines */
  --line: #e6e6e6;
  --line-2: #eeeeee;
  --line-strong: #d4d4d4;

  /* Brand: Repeater blue. --accent is decorative; --accent-strong is readable. */
  --accent: #4f8cff;
  --accent-strong: #2f6fe0;
  --accent-pressed: #2559b8;
  --accent-soft: rgba(79, 140, 255, 0.10);
  --accent-ring: rgba(79, 140, 255, 0.35);

  /* Status. Base hues are fills/icons; -strong variants are the only text. */
  --ok: #1bab49;
  --ok-strong: #157f37;
  --warn: #e3b324;
  --warn-strong: #7a5c00;
  --danger: #e03800;
  --danger-strong: #b32d00;
  --info: #40c6ff;

  /* Type */
  --font-display: "Jost", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Layout.
     --maxw was 1180px; widened to 1320px so the desktop view fills more of a
     1440 screen (60px gutters rather than 130px). Only ever affects wide
     viewports, below 1199px the grids collapse and .wrap is simply 100%, so the
     phone layout is untouched. --maxw-narrow stays narrow on purpose: it governs
     reading width for the FAQ and article body, which should not stretch just
     because the shell did. --maxw-designer is /designer's own wrap (owner's call
     2026-11-04, PC-first: the steps beside a live preview that takes at least half
     the window); the nav, the footer and every other page keep --maxw. */
  --section: clamp(56px, 8vw, 104px);
  --maxw: 1320px;
  --maxw-designer: 2400px;
  --maxw-narrow: 760px;
  --gutter: 24px;
  --nav-h: 72px;

  /* Radii */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;
  --r-full: 50%;

  /* Shadows */
  --shadow-xs: 0 1px 11px rgba(0, 0, 0, 0.10);
  --shadow-sm: 0 4px 12px rgba(18, 18, 18, 0.06);
  --shadow-md: 0 1px 2px rgba(18, 18, 18, 0.05), 0 8px 20px rgba(18, 18, 18, 0.07);
  --shadow-lg: 0 40px 40px rgba(0, 0, 0, 0.10);
  --shadow-glow: 0 0 20px rgba(79, 140, 255, 0.28);

  /* Motion */
  --ease-out: cubic-bezier(0.32, 0.72, 0.2, 1);
  --dur-fast: 0.15s;
  --dur-base: 0.25s;
  --dur-slow: 0.5s;

  /* The marquee edge fade (Businity's mask, reused here) */
  --edge-mask: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #000 12.5%, #000 87.5%, rgba(0, 0, 0, 0) 100%);
}

/* ---------------- Themes ----------------
   Seven palettes, selectable at runtime. Notion is the rendered default: a page
   with no data-theme attribute takes the notion tokens from :root:not([data-theme]), in
   CSS, so there is no first-paint flash and no JavaScript involved. The base
   :root above is the old default look; it is still selectable as "trade" and it
   is what every other theme is merged onto.

   Contrast is not decorative here: tests/tokens.test.mjs runs the same battery
   against every theme below and fails the build if any one drops under AA. If
   you add a theme, add it there too. That test finds a theme block by a selector
   that is the :root data-theme attribute match alone, so a rule of that form may
   hold tokens only. Clay's component rules live at the end of this file and
   never take that form.

   --fg-on-accent exists so a dark theme can put INK on a light accent instead of
   white; that is the token that makes .btn--accent legible on both canvases. */

:root[data-theme="ink"] {
  color-scheme: dark;
  --bg: #121212; --bg-sunken: #1c1c1c; --bg-raised: #171717;
  --band: #000000; --band-fg: #ffffff; --band-fg-2: rgba(255, 255, 255, 0.66); --band-line: rgba(255, 255, 255, 0.16);
  --fg: #f5f5f5; --fg-2: #b4b4b4; --fg-3: #9a9a9a;
  --fg-on-accent: #0b1220;
  --line: #2a2a2a; --line-2: #242424; --line-strong: #3a3a3a;
  --accent: #6fa4ff; --accent-strong: #8fb9ff; --accent-pressed: #a9caff;
  --accent-soft: rgba(111, 164, 255, 0.14); --accent-ring: rgba(111, 164, 255, 0.40);
  --shadow-xs: 0 1px 11px rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 20px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 40px 40px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 0 20px rgba(111, 164, 255, 0.30);
}

:root[data-theme="harbour"] {
  --bg: #ffffff; --bg-sunken: #eef2f8; --bg-raised: #fafcfe;
  --band: #0f172a; --band-fg: #ffffff; --band-fg-2: rgba(255, 255, 255, 0.62); --band-line: rgba(255, 255, 255, 0.14);
  --fg: #0f172a; --fg-2: #52627a; --fg-3: #67788f;
  --line: #dde5f0; --line-2: #e8eef7; --line-strong: #c3d0e2;
  --accent: #2563eb; --accent-strong: #1d4ed8; --accent-pressed: #1e40af;
  --accent-soft: rgba(37, 99, 235, 0.10); --accent-ring: rgba(37, 99, 235, 0.35);
}

:root[data-theme="bone"] {
  --bg: #fbfaf7; --bg-sunken: #f2eee7; --bg-raised: #fdfcfa;
  --band: #1c1917; --band-fg: #ffffff; --band-fg-2: rgba(255, 255, 255, 0.62); --band-line: rgba(255, 255, 255, 0.14);
  --fg: #1c1917; --fg-2: #6b645c; --fg-3: #79726a;
  --line: #e6e0d6; --line-2: #efeae2; --line-strong: #cfc7ba;
  --accent: #b45309; --accent-strong: #92400e; --accent-pressed: #7c2d12;
  --accent-soft: rgba(180, 83, 9, 0.10); --accent-ring: rgba(180, 83, 9, 0.35);
}

:root[data-theme="grove"] {
  --bg: #ffffff; --bg-sunken: #eff4ef; --bg-raised: #fafcfa;
  --band: #14201a; --band-fg: #ffffff; --band-fg-2: rgba(255, 255, 255, 0.62); --band-line: rgba(255, 255, 255, 0.14);
  --fg: #14201a; --fg-2: #55655c; --fg-3: #69786f;
  --line: #dbe6dd; --line-2: #e7efe8; --line-strong: #c2d3c6;
  --accent: #15803d; --accent-strong: #166534; --accent-pressed: #14532d;
  --accent-soft: rgba(21, 128, 61, 0.10); --accent-ring: rgba(21, 128, 61, 0.35);
}

/* Trade: the base :root tokens, verbatim, as an opt-in theme. Keep the two in
   step; a page that pins data-theme="trade" (the testthemes previews, the
   white-label template sites) opts out of the clay default with it. */
:root[data-theme="trade"] {
  /* Surfaces */
  --bg: #ffffff;
  --bg-sunken: #f4f4f4;
  --bg-raised: #fafafa;
  --band: #121212;
  --band-fg: #ffffff;
  --band-fg-2: rgba(255, 255, 255, 0.62);
  --band-line: rgba(255, 255, 255, 0.14);

  /* Ink */
  --fg: #121212;
  --fg-2: #606060;
  --fg-3: #767676;
  --fg-on-accent: #ffffff;

  /* Lines */
  --line: #e6e6e6;
  --line-2: #eeeeee;
  --line-strong: #d4d4d4;

  /* Brand: Repeater blue. --accent is decorative; --accent-strong is readable. */
  --accent: #4f8cff;
  --accent-strong: #2f6fe0;
  --accent-pressed: #2559b8;
  --accent-soft: rgba(79, 140, 255, 0.10);
  --accent-ring: rgba(79, 140, 255, 0.35);

  /* Status. Base hues are fills/icons; -strong variants are the only text. */
  --ok: #1bab49;
  --ok-strong: #157f37;
  --warn: #e3b324;
  --warn-strong: #7a5c00;
  --danger: #e03800;
  --danger-strong: #b32d00;
  --info: #40c6ff;

  /* Type */
  --font-display: "Jost", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Layout.
     --maxw was 1180px; widened to 1320px so the desktop view fills more of a
     1440 screen (60px gutters rather than 130px). Only ever affects wide
     viewports, below 1199px the grids collapse and .wrap is simply 100%, so the
     phone layout is untouched. --maxw-narrow stays narrow on purpose: it governs
     reading width for the FAQ and article body, which should not stretch just
     because the shell did. --maxw-designer is /designer's own wrap (owner's call
     2026-11-04, PC-first: the steps beside a live preview that takes at least half
     the window); the nav, the footer and every other page keep --maxw. */
  --section: clamp(56px, 8vw, 104px);
  --maxw: 1320px;
  --maxw-designer: 2400px;
  --maxw-narrow: 760px;
  --gutter: 24px;
  --nav-h: 72px;

  /* Radii */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;
  --r-full: 50%;

  /* Shadows */
  --shadow-xs: 0 1px 11px rgba(0, 0, 0, 0.10);
  --shadow-sm: 0 4px 12px rgba(18, 18, 18, 0.06);
  --shadow-md: 0 1px 2px rgba(18, 18, 18, 0.05), 0 8px 20px rgba(18, 18, 18, 0.07);
  --shadow-lg: 0 40px 40px rgba(0, 0, 0, 0.10);
  --shadow-glow: 0 0 20px rgba(79, 140, 255, 0.28);

  /* Motion */
  --ease-out: cubic-bezier(0.32, 0.72, 0.2, 1);
  --dur-fast: 0.15s;
  --dur-base: 0.25s;
  --dur-slow: 0.5s;

  /* The marquee edge fade (Businity's mask, reused here) */
  --edge-mask: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #000 12.5%, #000 87.5%, rgba(0, 0, 0, 0) 100%);
}

/* Clay. --accent is a darkened amber so white clears 3:1 on it and it clears
   3:1 on the cream canvas; the bright amber #fbbd41 is decorative only and is
   applied by the clay component rules at the end of this file. --fg-2 and --fg-3
   are darker than a plain cream page would need because free-standing copy sits
   on the background clay, and both have to stay AA on the coral blob. */
:root[data-theme="clay"] {
  --bg: #faf9f7; --bg-sunken: #f3eee3; --bg-raised: #ffffff;
  --band: #02492a; --band-fg: #ffffff; --band-fg-2: #9cf0b7; --band-line: rgba(132, 231, 165, 0.35);
  --fg: #000000; --fg-2: #34322d; --fg-3: #403e38;
  --fg-on-accent: #ffffff;
  --line: #dad4c8; --line-2: #eee9df; --line-strong: #b9b1a1;
  --accent: #b08100; --accent-strong: #066f41; --accent-pressed: #02492a;
  --accent-soft: rgba(251, 189, 65, 0.18); --accent-ring: rgba(20, 110, 245, 0.55);
  --ok: #078a52; --ok-strong: #066f41;
  --danger: #fc7981; --danger-strong: #b4232d;
  --info: #3bd3fd;
  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --r-xs: 8px; --r-sm: 12px; --r-md: 24px; --r-lg: 40px; --r-pill: 1584px;
  --shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.1), 0 -1px 1px rgba(0, 0, 0, 0.04) inset;
  --shadow-sm: 0 1px 1px rgba(0, 0, 0, 0.1), 0 -1px 1px rgba(0, 0, 0, 0.04) inset, 0 -0.5px 1px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 1px 1px rgba(0, 0, 0, 0.1), 0 -1px 1px rgba(0, 0, 0, 0.04) inset, 0 -0.5px 1px rgba(0, 0, 0, 0.05);
  --shadow-lg: -7px 7px 0 #000000;
  --shadow-glow: none;
}

/* Notion: Notion's own palette (white paper, warm off-white #f6f5f4, warm
   near-black #31302e, warm greys, Notion blue #0075de) on the clay shapes. It
   is the rendered default; the colour layer at the end of this file recolours
   the clay component rules for it. */
:root[data-theme="notion"] {
  --bg: #ffffff; --bg-sunken: #f6f5f4; --bg-raised: #ffffff;
  --band: #31302e; --band-fg: #ffffff; --band-fg-2: rgba(255, 255, 255, 0.76); --band-line: rgba(255, 255, 255, 0.14);
  --fg: #31302e; --fg-2: #5a5652; --fg-3: #6f6a65;
  --fg-on-accent: #ffffff;
  --line: #e9e8e6; --line-2: #f1f0ee; --line-strong: #d3d1cd;
  --accent: #0075de; --accent-strong: #006ac7; --accent-pressed: #005bab;
  --accent-soft: rgba(0, 117, 222, 0.08); --accent-ring: rgba(9, 127, 232, 0.4);
  --ok: #448361; --ok-strong: #2f6b4a;
  --danger: #d44c47; --danger-strong: #b03a35;
  --info: #337ea9;
  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --r-xs: 8px; --r-sm: 12px; --r-md: 24px; --r-lg: 40px; --r-pill: 1584px;
  --shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.1), 0 -1px 1px rgba(0, 0, 0, 0.04) inset;
  --shadow-sm: 0 1px 1px rgba(0, 0, 0, 0.1), 0 -1px 1px rgba(0, 0, 0, 0.04) inset, 0 -0.5px 1px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 1px 1px rgba(0, 0, 0, 0.1), 0 -1px 1px rgba(0, 0, 0, 0.04) inset, 0 -0.5px 1px rgba(0, 0, 0, 0.05);
  --shadow-lg: -7px 7px 0 #31302e;
  --shadow-glow: 0 0 0 3px rgba(9, 127, 232, 0.25);
}

/* The default: the same notion values for a visitor with no stored preference.
   Keep this block identical to the notion block above. */
:root:not([data-theme]) {
  --bg: #ffffff; --bg-sunken: #f6f5f4; --bg-raised: #ffffff;
  --band: #31302e; --band-fg: #ffffff; --band-fg-2: rgba(255, 255, 255, 0.76); --band-line: rgba(255, 255, 255, 0.14);
  --fg: #31302e; --fg-2: #5a5652; --fg-3: #6f6a65;
  --fg-on-accent: #ffffff;
  --line: #e9e8e6; --line-2: #f1f0ee; --line-strong: #d3d1cd;
  --accent: #0075de; --accent-strong: #006ac7; --accent-pressed: #005bab;
  --accent-soft: rgba(0, 117, 222, 0.08); --accent-ring: rgba(9, 127, 232, 0.4);
  --ok: #448361; --ok-strong: #2f6b4a;
  --danger: #d44c47; --danger-strong: #b03a35;
  --info: #337ea9;
  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --r-xs: 8px; --r-sm: 12px; --r-md: 24px; --r-lg: 40px; --r-pill: 1584px;
  --shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.1), 0 -1px 1px rgba(0, 0, 0, 0.04) inset;
  --shadow-sm: 0 1px 1px rgba(0, 0, 0, 0.1), 0 -1px 1px rgba(0, 0, 0, 0.04) inset, 0 -0.5px 1px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 1px 1px rgba(0, 0, 0, 0.1), 0 -1px 1px rgba(0, 0, 0, 0.04) inset, 0 -0.5px 1px rgba(0, 0, 0, 0.05);
  --shadow-lg: -7px 7px 0 #31302e;
  --shadow-glow: 0 0 0 3px rgba(9, 127, 232, 0.25);
}

/* ---------------- Base ---------------- */

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

html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.68 var(--font-sans);
  letter-spacing: -0.01em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }
/* `hidden` alone never hides an <svg>: the UA's [hidden] rule is HTML-only, and the display: block
   above would beat it anyway (an inline icon sprite, /designer's, drew as a 300 x 150 blank band). */
svg[hidden] { display: none; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; font-family: var(--font-display); font-weight: 600; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
blockquote { margin: 0; }
cite { font-style: normal; }
table { border-collapse: collapse; width: 100%; }
button { font: inherit; }
::selection { background: var(--accent-soft); }
:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 3px; }
[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--fg); color: var(--bg); padding: 12px 18px; border-radius: var(--r-sm);
}
.skip:focus { left: 16px; top: 16px; }

/* ---------------- Shell ---------------- */

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--narrow { max-width: var(--maxw-narrow); }
.sec { padding: var(--section) 0; }
.sec--tight { padding: clamp(36px, 5vw, 64px) 0; }
.sec--sunken { background: var(--bg-sunken); }
.sec--band { background: var(--band); color: var(--band-fg); }
.rule { height: 1px; background: var(--line-2); border: 0; margin: 0; }
.mono { font-family: var(--font-mono); }
.nowrap { white-space: nowrap; }

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------------- Typography ---------------- */

.display {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 7.2vw, 5.5rem);
  line-height: 1.02;
  letter-spacing: -0.042em;
  font-weight: 600;
}
h1 { font-size: clamp(2.25rem, 5.2vw, 4rem); line-height: 1.06; letter-spacing: -0.036em; }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.75rem); line-height: 1.14; letter-spacing: -0.030em; }
h3 { font-size: clamp(1.25rem, 2vw, 1.625rem); line-height: 1.25; letter-spacing: -0.020em; }
h4 { font-size: 1.125rem; line-height: 1.35; letter-spacing: -0.01em; }

.lede {
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
  line-height: 1.55;
  color: var(--fg-2);
  max-width: 60ch;
}
.sm { font-size: 0.875rem; line-height: 1.5; letter-spacing: 0; }
.xs { font-size: 0.8125rem; line-height: 1.45; letter-spacing: 0; }
.muted { color: var(--fg-2); }
.faint { color: var(--fg-3); }

.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.sec--band .eyebrow { color: var(--band-fg-2); }

.accent-line {
  display: block; width: 40px; height: 3px; border-radius: var(--r-pill);
  background: var(--accent); margin-bottom: var(--space-5);
}

/* Section header */
.head { max-width: 62ch; margin-bottom: var(--space-12); }
.head--center { margin-inline: auto; text-align: center; }
.head--center .lede { margin-inline: auto; }
.head__eyebrow { margin-bottom: var(--space-4); }
.head h2 { margin-bottom: var(--space-4); }
.head--split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-8) var(--space-16); align-items: end; max-width: none;
}
.head--split .head__body { padding-bottom: 4px; }
.sec--band .head h2 { color: var(--band-fg); }
.sec--band .lede { color: var(--band-fg-2); }

/* ---------------- Buttons ---------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border: 1px solid transparent; border-radius: var(--r-pill);
  font: 600 14.5px/1 var(--font-sans); text-decoration: none; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.btn--solid { background: var(--fg); color: var(--bg); } /* inverse pair - survives a dark theme */
.btn--solid:hover { background: #2b2b2b; }
.btn--accent { background: var(--accent-strong); color: var(--fg-on-accent); }
.btn--accent:hover { background: var(--accent-pressed); }
.btn--line { background: transparent; border-color: var(--line-strong); color: var(--fg); }
.btn--line:hover { border-color: var(--fg); }
.btn--quiet { background: transparent; color: var(--fg-2); padding: 12px 10px; }
.btn--quiet:hover { color: var(--fg); }
.btn--sm { padding: 9px 16px; font-size: 13.5px; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* ---------------- Nav ---------------- */

.nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-out);
}
.nav.is-stuck {
  border-bottom-color: var(--line);
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(12px) saturate(1.4);
}
.nav__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-6); height: var(--nav-h);
}
.nav__brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: 1.3125rem; font-weight: 600;
  letter-spacing: -0.03em; text-decoration: none; flex: none;
}
.nav__brand svg { width: 26px; height: 26px; flex: none; }
.nav__links { display: flex; align-items: center; gap: var(--space-8); }
.nav__link {
  font-size: 14.5px; font-weight: 500; color: var(--fg-2);
  text-decoration: none; padding: 6px 0; white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav__link:hover, .nav__link--here { color: var(--fg); }
.nav__cta { flex: none; display: flex; align-items: center; gap: var(--space-5); }
.nav__burger {
  display: none; width: 44px; height: 44px; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line); border-radius: var(--r-sm);
  cursor: pointer; padding: 0;
}
.nav__burger span { display: block; width: 18px; height: 2px; background: var(--fg); position: relative; }
.nav__burger span::before, .nav__burger span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--fg);
  transition: transform var(--dur-base) var(--ease-out);
}
.nav__burger span::before { top: -6px; }
.nav__burger span::after { top: 6px; }
.nav.is-open .nav__burger span { background: transparent; }
.nav.is-open .nav__burger span::before { top: 0; transform: rotate(45deg); }
.nav.is-open .nav__burger span::after { top: 0; transform: rotate(-45deg); }
.nav__panel { display: none; }

/* ---------------- Grid + card ---------------- */

.grid { display: grid; gap: var(--space-6); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid--split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16); align-items: center; }

.card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--space-8);
}
.card--sunken { background: var(--bg-sunken); border-color: transparent; }
.card--flat { border-color: var(--line); box-shadow: none; }
.card--lift { box-shadow: var(--shadow-md); border-color: transparent; }
.card h3 { margin-bottom: var(--space-3); }
.card p { color: var(--fg-2); font-size: 0.9375rem; }
.card__num {
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.14em; color: var(--accent-strong); display: block;
  margin-bottom: var(--space-5);
}
.card__icon { width: 40px; height: 40px; margin-bottom: var(--space-5); color: var(--accent); }

/* ---------------- Hero ---------------- */

.hero { padding: clamp(48px, 7vw, 88px) 0 var(--section); }
.hero__in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.hero__eyebrow { margin-bottom: var(--space-6); }
.hero h1 { margin-bottom: var(--space-6); max-width: 18ch; }
.hero__lede { margin-bottom: var(--space-8); }
.hero__trust {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  margin-top: var(--space-8); padding-top: var(--space-6);
  border-top: 1px solid var(--line-2);
  font-size: 0.875rem; color: var(--fg-2);
}
.hero__trust b { color: var(--fg); font-weight: 600; }
.hero__trust .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--line-strong); }

/* ---------------- Category chips ---------------- */

.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
  display: inline-flex; align-items: center; padding: 8px 16px;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  font-size: 0.875rem; font-weight: 500; color: var(--fg-2);
  text-decoration: none; white-space: nowrap;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.chip:hover { border-color: var(--fg); color: var(--fg); }
.chips--scroll {
  flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--space-2);
  scrollbar-width: none;
}
.chips--scroll::-webkit-scrollbar { display: none; }

/* ---------------- Marquee (logo row) ---------------- */

.marquee { overflow: hidden; mask-image: var(--edge-mask); -webkit-mask-image: var(--edge-mask); }
.marquee__track { display: flex; width: max-content; animation: marquee 40s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__set { display: flex; align-items: center; gap: clamp(40px, 6vw, 80px); padding-right: clamp(40px, 6vw, 80px); }
.marquee__item {
  flex: none; display: flex; align-items: center; justify-content: center;
  height: 34px; color: var(--fg-3);
  font-family: var(--font-display); font-size: 1.125rem; font-weight: 600;
  letter-spacing: -0.02em; white-space: nowrap;
}
.marquee__item img { height: 30px; width: auto; object-fit: contain; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------------- Steps ---------------- */

.steps { counter-reset: step; display: grid; gap: var(--space-6); }
/* An <ol> of steps draws its own numbers; drop the browser's list markers and indent. */
ol.steps { list-style: none; margin: 0; padding: 0; }
.steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.step { position: relative; padding-top: var(--space-8); border-top: 1px solid var(--line); }
.step::before {
  counter-increment: step; content: "0" counter(step);
  position: absolute; top: 0; left: 0;
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.14em; color: var(--accent-strong);
}
.step h3 { margin: var(--space-4) 0 var(--space-3); }
.step p { color: var(--fg-2); font-size: 0.9375rem; }
.sec--band .step { border-top-color: var(--band-line); }
.sec--band .step h3 { color: var(--band-fg); }
.sec--band .step p { color: var(--band-fg-2); }
.sec--band .step::before { color: var(--accent); }

/* ---------------- Showcase (CSS-drawn dark product plate) ---------------- */

.show__plate {
  background: var(--band); border-radius: var(--r-lg); padding: var(--space-5);
  box-shadow: var(--shadow-lg); color: var(--band-fg); overflow: hidden;
}
.show__bar { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-5); }
.show__title {
  font-family: var(--font-mono); font-size: 0.6875rem;
  font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--band-fg-2);
}
.show__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin-bottom: var(--space-5); }
.show__tile {
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--band-line);
  border-radius: var(--r-sm); padding: var(--space-4);
}
.show__tile b {
  display: block; font-family: var(--font-display); font-size: 1.5rem; font-weight: 600;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.show__tile span { display: block; margin-top: 2px; font-size: 0.6875rem; color: var(--band-fg-2); }
.show__rows { display: grid; gap: 1px; background: var(--band-line); border-radius: var(--r-sm); overflow: hidden; }
.show__row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--space-4); align-items: center;
  background: #1a1a1a; padding: var(--space-3) var(--space-4);
  font-size: 0.8125rem;
}
.show__row i { font-style: normal; color: var(--band-fg-2); font-variant-numeric: tabular-nums; }
.show__row b { font-weight: 600; font-variant-numeric: tabular-nums; }
.show__tag {
  display: inline-block; padding: 3px 9px; border-radius: var(--r-pill);
  background: rgba(79, 140, 255, 0.18); color: #a8c6ff;
  font-family: var(--font-mono); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.06em;
}

/* ---------------- Panel plates (illustrative SVG mockups, from aphileon.com) ---------------- */

.plates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-8); }
.plates__lead { grid-column: 1 / -1; }
/* The plates after the lead run in a rail: each one is wide enough to read and
   the next one shows at the right edge, so it is plain there is more to pull
   across. Below 810px the rail is an ordinary stack, one plate per row. */
.plates__rail {
  grid-column: 1 / -1; display: flex; gap: var(--space-6);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
  padding-bottom: var(--space-4); -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.plates__rail .plate { flex: 0 0 min(880px, 78%); scroll-snap-align: start; }
.plate { margin: 0; min-width: 0; }
.plate img { display: block; width: 100%; height: auto; border: 1px solid var(--line-strong); border-radius: var(--r-xs); }
/* Caption: the plate number is a label column, the description wraps beside
   it on whole words, never underneath it. */
.plate figcaption {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: baseline;
  margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--line-2);
  font-family: var(--font-mono); font-size: 0.6875rem; line-height: 1.5; letter-spacing: 0.04em; color: var(--fg-3);
}
.plate figcaption b { color: var(--fg-2); font-weight: 600; white-space: nowrap; }
.plate figcaption span { text-wrap: pretty; }

/* ---------------- Progress bars ---------------- */

.bars { display: grid; gap: var(--space-8); }
.bar__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-3); }
.bar__label { font-weight: 500; }
.bar__val {
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 600;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.bar__track { height: 6px; border-radius: var(--r-pill); background: var(--line-2); overflow: hidden; }
.bar__fill {
  height: 100%; width: 0; border-radius: var(--r-pill); background: var(--accent);
  transition: width 900ms var(--ease-out);
}
.sec--band .bar__track { background: var(--band-line); }
.sec--band .bar__label { color: var(--band-fg); }
.sec--band .bar__desc { color: var(--band-fg-2); }

/* ---------------- Stat cards ---------------- */

.stat {
  border-top: 2px solid var(--fg); padding-top: var(--space-6);
}
.stat__fig {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.4vw, 3.5rem);
  line-height: 1; letter-spacing: -0.03em; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.stat__label { margin-top: var(--space-3); font-size: 0.9375rem; font-weight: 500; }
.stat__src { margin-top: var(--space-2); font-size: 0.8125rem; color: var(--fg-3); }

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

.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-6);
  width: 100%; padding: var(--space-6) 0; background: transparent; border: 0;
  cursor: pointer; text-align: left;
  font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; letter-spacing: -0.02em;
  color: inherit;
}
.faq__q::after {
  content: ""; flex: none; width: 11px; height: 11px;
  border-right: 2px solid var(--fg-2); border-bottom: 2px solid var(--fg-2);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--dur-base) var(--ease-out);
}
.faq__item.is-open .faq__q::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-base) var(--ease-out); }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { padding-bottom: var(--space-6); color: var(--fg-2); max-width: 68ch; }
.sec--band .faq, .sec--band .faq__item { border-color: var(--band-line); }
.sec--band .faq__q { color: var(--band-fg); }
.sec--band .faq__a p { color: var(--band-fg-2); }

/* ---------------- Pricing tiers ---------------- */

.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); align-items: stretch; }
.tier {
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--space-8); background: var(--bg);
  display: flex; flex-direction: column; gap: var(--space-5);
}
.tier--pick {
  border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow-md);
  position: relative;
}
.tier__flag {
  position: absolute; top: -11px; left: var(--space-8);
  background: var(--accent-strong); color: var(--fg-on-accent);
  font-family: var(--font-mono); font-size: 0.625rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--r-pill);
}
.tier__name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; }
.tier__price {
  font-family: var(--font-display); font-size: clamp(2rem, 3.4vw, 2.75rem);
  line-height: 1; letter-spacing: -0.03em; font-weight: 600; font-variant-numeric: tabular-nums;
}
.tier__price span { display: inline-block; font-family: var(--font-sans); font-size: 0.875rem; font-weight: 500; color: var(--fg-2); letter-spacing: 0; }
.tier__list { display: grid; gap: var(--space-3); font-size: 0.9375rem; color: var(--fg-2); }
.tier__list li { padding-left: 24px; position: relative; }
.tier__list li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 11px; height: 6px; border-left: 2px solid var(--accent-strong); border-bottom: 2px solid var(--accent-strong);
  transform: rotate(-45deg);
}
.tier__foot { margin-top: auto; padding-top: var(--space-4); }
/* Two plan cards side by side with the enquiry-only plan as its own row under
   them (the /ai page). */
.tier-enquire {
  margin-top: var(--space-6);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-6);
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  padding: var(--space-6) var(--space-8); background: var(--bg-sunken);
}
.tier-enquire .tier__name { margin-bottom: var(--space-1); }
.tier-enquire .btn { flex: none; }
.tiers-note { margin-top: var(--space-6); }

/* ---------------- Aphileon OS feature picker (/shop-os/pricing, os-picker.js) ----------------
   Without JS it is a priced list; the script adds a tick (and a count) per row
   and keeps the total panel in step. */
.osp { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--space-8); align-items: start; }
.osp__group { margin-bottom: var(--space-6); }
.osp__group h3 { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); margin-bottom: var(--space-3); }
.osp__list { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg); overflow: hidden; }
.osp__item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-4); align-items: start; padding: var(--space-4) var(--space-6); border-top: 1px solid var(--line-2); }
.osp__item:first-child { border-top: 0; }
.osp__item.is-on { background: var(--bg-raised); }
.osp__tick { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--accent-strong); }
.osp__tick[disabled] { opacity: 1; }
.osp__name { font-weight: 600; color: var(--fg); }
.osp__blurb { display: block; margin-top: 2px; font-size: 0.875rem; color: var(--fg-2); max-width: 60ch; }
.osp__price { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; text-align: right; }
.osp__price span { display: block; font-size: 0.75rem; font-weight: 500; color: var(--fg-3); }
.osp__qty[hidden] { display: none; }
.osp__qty { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); font-size: 0.875rem; color: var(--fg-2); }
.osp__qty input { width: 72px; padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: var(--r-xs); font: inherit; color: var(--fg); background: var(--bg); }
.osp__sum { position: sticky; top: 88px; border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--space-6); background: var(--bg); box-shadow: var(--shadow-md); }
.osp__sum .tier__price { margin: var(--space-2) 0 var(--space-4); }
.osp__sum .tier__price .osp__total { display: inline; font: inherit; color: var(--fg); letter-spacing: inherit; }
.osp__lines { display: grid; gap: var(--space-2); font-size: 0.875rem; color: var(--fg-2); margin-bottom: var(--space-4); }
.osp__lines li { display: flex; justify-content: space-between; gap: var(--space-3); }
.osp__lines b { font-weight: 500; color: var(--fg); font-variant-numeric: tabular-nums; }
.osp__presets { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); }
.osp__presets button { cursor: pointer; background: var(--bg); font: inherit; font-size: 0.875rem; }
.osp__presets button[aria-pressed="true"] { border-color: var(--fg); color: var(--fg); }
/* The live preview of the panel a pick builds (os-picker.js shows a feature's
   nav item and tile as it is ticked). Decorative, so aria-hidden. */
.osprev { border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; background: var(--bg-sunken); margin-bottom: var(--space-5); font-size: 0.75rem; }
.osprev__bar { display: flex; align-items: center; gap: 5px; padding: 7px 10px; border-bottom: 1px solid var(--line); background: var(--bg); }
.osprev__bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); }
.osprev__bar span { margin-left: var(--space-2); font-family: var(--font-mono); font-size: 0.6875rem; color: var(--fg-2); }
.osprev__app { display: grid; grid-template-columns: 96px minmax(0, 1fr); min-height: 212px; }
.osprev__nav { padding: 8px 6px; border-right: 1px solid var(--line); background: var(--bg); display: grid; align-content: start; gap: 2px; }
.osprev__nav li { padding: 4px 7px; border-radius: var(--r-xs); color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.osprev__nav li:first-child { background: var(--accent-soft); color: var(--fg); font-weight: 600; }
.osprev__main { padding: 8px; min-width: 0; }
.osprev__biz { font-weight: 600; color: var(--fg); margin-bottom: 6px; }
.osprev__biz span { font-weight: 500; color: var(--fg-2); }
.osprev__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.osprev__tile { padding: 7px 8px; border: 1px solid var(--line); border-radius: var(--r-xs); background: var(--bg); min-width: 0; }
.osprev__tile span { display: block; color: var(--fg-2); line-height: 1.3; }
.osprev__tile b { display: block; margin-top: 2px; font-size: 0.875rem; color: var(--fg); font-variant-numeric: tabular-nums; }
.osprev [hidden] { display: none; }
.osprev .is-new { animation: osprev-in 0.45s var(--ease-out) both; }
.osprev .is-new.osprev__tile { box-shadow: 0 0 0 2px var(--accent-ring); }
@keyframes osprev-in { from { opacity: 0; transform: translateY(6px) scale(0.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .osprev .is-new { animation: none; } }
@media (max-width: 900px) {
  .osp { grid-template-columns: minmax(0, 1fr); }
  .osp__sum { position: static; order: -1; }
  .osp__item { padding: var(--space-4); }
}
@media (max-width: 560px) {
  .osp__item { grid-template-columns: auto minmax(0, 1fr); row-gap: var(--space-2); }
  .osp__price { grid-column: 2; text-align: left; }
  .osp__price span { display: inline; margin-left: 6px; }
}

/* ---------------- Volume-break table ---------------- */

/* overflow-x, not hidden: a table wider than its box scrolls inside it rather
   than losing its last columns on a phone. */
.breaks { border: 1px solid var(--line); border-radius: var(--r-md); overflow-x: auto; }
.breaks table { font-size: 0.9375rem; }
.breaks th, .breaks td { padding: var(--space-4) var(--space-5); text-align: left; }
.breaks th {
  background: var(--bg-sunken); font-family: var(--font-mono);
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-3); white-space: nowrap;
}
.breaks tbody tr + tr td { border-top: 1px solid var(--line-2); }
.breaks td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.breaks td.num b { font-weight: 600; }
/* Sticky: when a wide table scrolls sideways, its note stays in view. */
.breaks__note { position: sticky; left: 0; padding: var(--space-4) var(--space-5); background: var(--bg-sunken); border-top: 1px solid var(--line); font-size: 0.8125rem; color: var(--fg-3); }

/* ---------------- Testimonials (rendered from /api/proof) ---------------- */

.proof-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.proof-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.quote {
  border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--space-8);
  display: flex; flex-direction: column; gap: var(--space-6); background: var(--bg);
}
.quote blockquote { font-size: 1.0625rem; line-height: 1.5; letter-spacing: -0.015em; }
.quote cite { font-size: 0.875rem; color: var(--fg-3); margin-top: auto; }
.proof-figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
.proof-empty {
  border: 1px dashed var(--line-strong); border-radius: var(--r-md);
  padding: var(--space-10); text-align: center; color: var(--fg-2);
  max-width: 60ch; margin-inline: auto;
}

/* ---------------- Case study + team ---------------- */

.case { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16); align-items: center; }
.case__fig {
  font-family: var(--font-display); font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1; letter-spacing: -0.04em; font-weight: 600; color: var(--accent-strong);
  font-variant-numeric: tabular-nums;
}
.team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
.member__tile {
  aspect-ratio: 1; border-radius: var(--r-md); display: flex;
  align-items: center; justify-content: center;
  background: var(--bg-sunken); border: 1px solid var(--line);
  font-family: var(--font-display); font-size: 2rem; font-weight: 600;
  letter-spacing: -0.03em; color: var(--fg-3);
}
.member__name { margin-top: var(--space-4); font-weight: 600; letter-spacing: -0.015em; }
.member__role { font-size: 0.875rem; color: var(--fg-3); }

/* ---------------- Blog cards ---------------- */

.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
.post { display: flex; flex-direction: column; gap: var(--space-3); text-decoration: none; color: inherit; }
.post__meta { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); }
.post h3 { letter-spacing: -0.02em; }
.post:hover h3 { color: var(--accent-strong); }
.post p { font-size: 0.9375rem; color: var(--fg-2); }
.post__more { margin-top: auto; font-size: 0.875rem; font-weight: 600; color: var(--accent-strong); }

/* ---------------- Article (blog post) ---------------- */

.article { max-width: 68ch; }
.article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); font-size: 0.875rem; color: var(--fg-3); }
.article h1 { margin-bottom: var(--space-6); }
.article__body > * + * { margin-top: var(--space-5); }
.article__body p, .article__body li { color: var(--fg-2); }
.article__body h2 { margin-top: var(--space-10); font-size: clamp(1.375rem, 2.4vw, 1.75rem); }
.article__body h3 { margin-top: var(--space-8); }
.article__body ul { list-style: disc; padding-left: 22px; display: grid; gap: var(--space-2); }
.article__body a { color: var(--accent-strong); }

/* ---------------- Page head (interior pages) ---------------- */

.pagehead { padding: clamp(40px, 6vw, 72px) 0 clamp(24px, 3vw, 40px); }
.pagehead__eyebrow { margin-bottom: var(--space-5); }
.pagehead h1 { max-width: 22ch; margin-bottom: var(--space-5); }
.pagehead .lede { max-width: 62ch; }

/* ---------------- Form ---------------- */

.qform { display: grid; gap: var(--space-5); }
.qform__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.qform__field { display: grid; gap: var(--space-2); }
.qform__field--wide { grid-column: 1 / -1; }
.qform__field label { font-size: 0.875rem; font-weight: 500; }
.qform__field .req { color: var(--danger-strong); }
.qform__field input, .qform__field select, .qform__field textarea {
  width: 100%; padding: 12px 14px; font: inherit; font-size: 16px;
  color: var(--fg); background: var(--bg);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.qform__field textarea { min-height: 132px; resize: vertical; }
.qform__field input:focus, .qform__field select:focus, .qform__field textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: var(--accent-ring) 0 0 0 3px;
}
.qform__hint { font-size: 0.8125rem; color: var(--fg-3); }
.qform__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.qform__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); }
.qform__status { font-size: 0.875rem; }
.qform__status--ok { color: var(--ok-strong); }
.qform__status--err { color: var(--danger-strong); }
.qform__status--busy { color: var(--fg-2); }

.form-note {
  border-left: 2px solid var(--accent); padding: var(--space-2) 0 var(--space-2) var(--space-5);
  font-size: 0.875rem; color: var(--fg-2);
}

/* ---------------- Numpad (AI demo call) ---------------- */

.numpad {
  max-width: 360px; margin: 0 auto;
  display: grid; gap: var(--space-4);
}
.numpad__display {
  width: 100%; min-height: 68px; padding: var(--space-3) var(--space-4);
  text-align: center;
  font-family: var(--font-mono); font-size: 1.375rem; font-weight: 500;
  letter-spacing: 0.06em; font-variant-numeric: tabular-nums;
  color: var(--fg); background: var(--bg);
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
}
.numpad__display:focus {
  outline: none; border-color: var(--accent); box-shadow: var(--accent-ring) 0 0 0 3px;
}
.numpad__display::placeholder { color: var(--fg-3); font-family: var(--font-sans); font-size: 0.9375rem; letter-spacing: 0; }
.numpad__keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.numpad__key {
  min-height: 64px; padding: 0;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--bg);
  font: 600 1.25rem/1 var(--font-sans); color: var(--fg);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.numpad__key:hover { border-color: var(--fg); }
.numpad__key:active { background: var(--bg-sunken); }
.numpad__key--fn { font-size: 1rem; color: var(--fg-2); }
.numpad__key--fn:hover { color: var(--fg); }
.numpad__key--accent { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--fg-on-accent); font-size: 1rem; }
.numpad__key--accent:hover { background: var(--accent-pressed); border-color: var(--accent-pressed); color: var(--fg-on-accent); }
.numpad__key--accent:disabled { opacity: 0.45; cursor: not-allowed; }
.numpad__consent { text-align: center; color: var(--fg-3); }
.numpad__status {
  text-align: center; min-height: 1.5em;
  font-size: 0.9375rem;
}
.numpad__status--ok { color: var(--ok-strong); }
.numpad__status--err { color: var(--danger-strong); }
.numpad__status--busy { color: var(--fg-2); }

/* ---------------- Contact detail list ---------------- */

.details { display: grid; gap: var(--space-6); }
.details__item { display: grid; gap: var(--space-1); }
.details__k { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); }
.details__v { font-size: 1.0625rem; letter-spacing: -0.015em; }
.details__v a { color: var(--accent-strong); }

/* Unresolved owner-supplied fact: visible, honest, never dressed up as real */
.placeholder {
  color: var(--fg-3); background: var(--bg-sunken);
  border-bottom: 1px dashed var(--line-strong);
  padding: 1px 6px; border-radius: var(--r-xs); font-size: 0.9375em;
}

/* ---------------- Empty state ---------------- */

.empty {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--bg-sunken); padding: clamp(32px, 5vw, 56px);
  max-width: 62ch;
}
.empty h3 { margin-bottom: var(--space-4); }
.empty p { color: var(--fg-2); margin-bottom: var(--space-6); }

/* ---------------- CTA band ---------------- */

.cta__in { display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: var(--space-10); align-items: center; }
.cta .eyebrow { display: block; margin-bottom: var(--space-4); }
.cta h2 { color: var(--band-fg); max-width: 22ch; margin-bottom: var(--space-4); }
.cta p { color: var(--band-fg-2); max-width: 52ch; }
.cta .btn--solid { background: var(--band-fg); color: var(--band); } /* white on every band, ink on every band */
.cta .btn--solid:hover { background: #e8e8e8; }
.cta .btn--line { border-color: var(--band-line); color: var(--band-fg); }
.cta .btn--line:hover { border-color: var(--band-fg); }

/* ---------------- Footer ---------------- */

.foot { padding: var(--space-16) 0 var(--space-10); }
.foot__in { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: var(--space-10); }
.foot__brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 1.3125rem; font-weight: 600; letter-spacing: -0.03em; }
.foot__brand svg { width: 26px; height: 26px; }
.foot__about { margin-top: var(--space-4); font-size: 0.875rem; color: var(--fg-2); max-width: 34ch; }
.foot__abn { margin-top: var(--space-4); font-size: 0.8125rem; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.foot__col h4 { font-size: 0.6875rem; font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); margin-bottom: var(--space-5); }
.foot__col ul { display: grid; gap: var(--space-3); }
.foot__col a { font-size: 0.9375rem; color: var(--fg-2); text-decoration: none; }
.foot__col a:hover { color: var(--fg); }
.foot__base {
  margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px solid var(--line-2);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4);
  font-size: 0.8125rem; color: var(--fg-3);
}

/* ---------------- Motion ---------------- */

.rv { opacity: 0; transform: translateY(14px); }
.rv.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--d, 0ms);
}

/* ---------------- Theme switcher ----------------
   Progressive enhancement, in both directions: with JavaScript off the button
   does not exist and the site is simply the default theme, and the <html> tag
   carries no data-theme so nothing shifts. */
.nav__right { display: flex; align-items: center; gap: var(--space-3); flex: none; }
.themer { position: relative; flex: none; }
.themer__btn {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; background: transparent; border: 1px solid var(--line);
  border-radius: var(--r-sm); color: var(--fg-2); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.themer__btn:hover { border-color: var(--fg); color: var(--fg); }
.themer__btn-dot { width: 16px; height: 16px; border-radius: var(--r-full); background: var(--accent); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15); }

.themer__panel {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 150;
  width: 262px; padding: var(--space-5);
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg); display: none;
}
.themer.is-open .themer__panel { display: block; }
.themer__title {
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3);
  margin-bottom: var(--space-4);
}
.themer__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-2); margin-bottom: var(--space-5); }
.themer__swatch {
  position: relative; width: 100%; aspect-ratio: 1; padding: 0;
  background: var(--sw-bg); border: 1px solid var(--line-strong);
  border-radius: var(--r-full); cursor: pointer;
}
.themer__swatch::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 11px; height: 11px; border-radius: var(--r-full); background: var(--sw-ac);
}
.themer__swatch[aria-pressed="true"] { border-color: var(--fg); box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent-strong); }
.themer__row { display: flex; align-items: center; gap: var(--space-3); }
.themer__row label { font-size: 0.875rem; font-weight: 500; flex: 1; }
.themer__row input[type="color"] {
  width: 44px; height: 36px; padding: 0; cursor: pointer;
  background: transparent; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
}
.themer__reset {
  width: 100%; margin-top: var(--space-3); padding: 10px 14px;
  background: transparent; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  color: var(--fg-2); font: 500 0.8125rem/1 var(--font-sans); cursor: pointer;
}
.themer__reset:hover { border-color: var(--fg); color: var(--fg); }
.themer__note { margin-top: var(--space-4); font-size: 0.75rem; line-height: 1.45; color: var(--fg-3); }

/* ---------------- Shop: product cards (home hero) ----------------
   The shop feel comes from PRICES, big, tabular, honest, and from cards
   that read like products, not from new colour or new motion. */
.hero--shop { padding: clamp(40px, 6vw, 72px) 0 var(--section); }
.hero--shop .hero__head { max-width: 640px; margin: 0 auto var(--space-12); text-align: center; }
.hero--shop .hero__head .eyebrow { display: block; margin-bottom: var(--space-5); }
.hero--shop .hero__head h1 { margin: 0 auto var(--space-5); }
.hero--shop .hero__head .lede { margin: 0 auto; }

.products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); align-items: stretch; }

.product {
  display: flex; flex-direction: column;
  padding: var(--space-8);
}
.product__kind {
  display: block; margin-bottom: var(--space-4);
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3);
}
.product__name {
  font-family: var(--font-display); font-size: clamp(1.5rem, 2.4vw, 1.875rem);
  font-weight: 600; letter-spacing: -0.025em; line-height: 1.15;
  margin-bottom: var(--space-4);
}
/* The price line wraps as a unit: the suffix sits beside the figure on its
   baseline, and when it cannot fit at its full width it drops below the figure
   as one line, it is never squeezed into a narrow column beside it. */
.product__price {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2);
  padding-bottom: var(--space-5); margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--line-2);
}
.product__price b {
  font-family: var(--font-display); font-weight: 600; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  font-size: clamp(2rem, 3.6vw, 2.75rem); line-height: 1;
  flex: none; white-space: nowrap;
}
.product__price span { font-size: 0.875rem; color: var(--fg-2); line-height: 1.35; }
.product__feats { display: grid; align-content: start; gap: var(--space-3); margin-bottom: var(--space-8); }
.product__feats li {
  position: relative; padding-left: var(--space-4);
  font-size: 0.9375rem; color: var(--fg-2);
}
.product__feats li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
}
.product__feats li b { color: var(--fg); font-weight: 500; }
.product .btn { margin-top: auto; }
.product__alt { margin-top: var(--space-3); font-size: 0.8125rem; color: var(--fg-3); text-align: center; }
/* Cards in a row share their six row tracks (kind, name, price, features,
   button, alt line), so every price and every button sits on the same line
   across the row whatever each card's copy wraps to. Without subgrid the
   cards are still equal height, with the button pushed down by its auto margin. */
@supports (grid-template-rows: subgrid) {
  .product { display: grid; grid-template-rows: subgrid; grid-row: span 6; row-gap: 0; }
  .product__kind { justify-self: start; }
  .product .btn { margin-top: 0; align-self: end; }
}
.products__note { margin-top: var(--space-8); text-align: center; color: var(--fg-3); }

/* ---------------- Shop: plan cards (fleet phones) ----------------
   Two plans, side by side, each with the day-one number as the headline and
   every cap in a scannable list. Fine print sits under each card, not in prose. */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); align-items: stretch; }

.plan { display: flex; flex-direction: column; padding: var(--space-8); }
.plan--pick { border-color: var(--accent-strong); box-shadow: var(--shadow-md); }
.plan__kind {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  margin-bottom: var(--space-4);
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3);
}
.plan__flag {
  font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.08em;
  padding: 3px 9px; border-radius: var(--r-pill);
  background: var(--accent-soft); color: var(--accent-strong);
}
.plan__name {
  font-family: var(--font-display); font-size: 1.375rem; font-weight: 600;
  letter-spacing: -0.02em; margin-bottom: var(--space-2);
}
.plan__one { font-size: 0.9375rem; color: var(--fg-2); margin-bottom: var(--space-5); }
.plan__price {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2);
  padding-bottom: var(--space-5); margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--line-2);
}
.plan__price b {
  font-family: var(--font-display); font-weight: 600; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.25rem, 4vw, 3rem); line-height: 1;
  flex: none; white-space: nowrap;
}
.plan__price span { font-size: 0.875rem; color: var(--fg-2); line-height: 1.35; }
.plan__feats { display: grid; align-content: start; gap: 0; margin-bottom: var(--space-6); }
.plan__feats li {
  position: relative; padding: var(--space-3) 0 var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line-2);
  font-size: 0.9375rem; color: var(--fg-2);
}
.plan__feats li:last-child { border-bottom: 0; }
.plan__feats li::before {
  content: ""; position: absolute; left: 0; top: 1.05em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
}
.plan__feats li b { color: var(--fg); font-weight: 500; }
.plan__fine { font-size: 0.8125rem; color: var(--fg-3); margin-top: auto; padding-top: var(--space-4); }
.plan .btn { margin-top: var(--space-6); }
/* Same shared row tracks as the product cards: kind, name, one-liner, price,
   features, fine print, button. */
@supports (grid-template-rows: subgrid) {
  .plan { display: grid; grid-template-rows: subgrid; grid-row: span 7; row-gap: 0; }
}

.planstrip {
  margin-top: var(--space-6);
  border: 1px dashed var(--line-strong); border-radius: var(--r-md);
  padding: var(--space-5) var(--space-8);
  display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center;
  justify-content: space-between; color: var(--fg-3);
}
.planstrip b { font-weight: 600; color: var(--fg-2); }

/* ---------------- Responsive ---------------- */

@media (max-width: 1199px) {
  .grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proof-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); }
  .head--split { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .foot__in { grid-template-columns: minmax(0, 1fr) repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
  .nav__links { gap: var(--space-5); }
}

/* The seven nav labels never wrap, and with the longest call to action (the
   trade pages' "Apply for a trade account") the row needs about 1060px, so the
   nav collapses to the burger panel well before the page grids do (809px). */
@media (max-width: 1099px) {
  .nav__links--desk, .nav__cta { display: none; }
  .nav__burger { display: inline-flex; }
  .nav__panel {
    display: grid; gap: 2px; overflow: hidden; grid-template-rows: 0fr;
    transition: grid-template-rows var(--dur-base) var(--ease-out);
  }
  .nav.is-open .nav__panel { grid-template-rows: 1fr; }
  .nav__panel > div { overflow: hidden; }
  .nav__panel ul { display: grid; gap: 2px; padding-bottom: var(--space-4); }
  .nav__panel ul a {
    display: block; padding: 12px 0; font-size: 1.0625rem; font-weight: 500;
    text-decoration: none; color: var(--fg-2); border-bottom: 1px solid var(--line-2);
  }
  .nav__panel ul a:hover { color: var(--fg); }
  .nav__panel .btn { margin: var(--space-4) 0 var(--space-2); }
  .nav__tel {
    display: flex; align-items: center; justify-content: center; min-height: 44px;
    margin-bottom: var(--space-5); color: var(--accent-strong); font-weight: 500;
  }
}

@media (max-width: 809px) {
  :root { --nav-h: 64px; }
  .products, .plans, .plates,
  .grid--2, .grid--3, .grid--4, .grid--6, .grid--split,
  .steps--3, .steps--4, .tiers, .posts, .case, .proof-grid, .proof-grid--3,
  .proof-figures, .qform__row { grid-template-columns: minmax(0, 1fr); }
  .team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__in { grid-template-columns: minmax(0, 1fr); }
  .hero h1 { max-width: none; }
  .hero__plate { order: 2; }
  .cta__in { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .foot__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot__brand-col { grid-column: 1 / -1; }
  .grid--split, .case { gap: var(--space-10); }
  .head { margin-bottom: var(--space-10); }
  .marquee__item { height: 28px; font-size: 1rem; }
  .plates__rail { display: grid; grid-template-columns: minmax(0, 1fr); overflow: visible; padding-bottom: 0; }
}

@media (max-width: 559px) {
  .tier-enquire { flex-direction: column; align-items: stretch; padding: var(--space-6); }
  :root { --gutter: 20px; }
  .themer__panel { width: min(262px, calc(100vw - 40px)); right: -6px; }

  .foot__in { grid-template-columns: minmax(0, 1fr); }
  .foot__base { justify-content: flex-start; }
  .card, .tier, .quote { padding: var(--space-6); }
  .empty { padding: var(--space-8) var(--space-6); }
  .show__tiles { grid-template-columns: minmax(0, 1fr); }
  .show__row { grid-template-columns: minmax(0, 1fr) auto; }
  .show__row .show__tag { display: none; }
  /* Price tables on a phone. .breaks--stack: the first column becomes a
     heading over its row, so the other three columns share the full width
     under the column heads. .breaks--credit: the repair credit column repeats
     the Service column, so it drops; the note under the table says so. */
  .breaks--stack th, .breaks--stack td,
  .breaks--credit th, .breaks--credit td { padding: var(--space-3); }
  .breaks--stack th, .breaks--credit th { white-space: normal; }
  .breaks--stack table, .breaks--stack thead, .breaks--stack tbody { display: block; }
  .breaks--stack tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .breaks--stack th:first-child { display: none; }
  .breaks--stack td:first-child { grid-column: 1 / -1; padding-bottom: 0; font-weight: 600; }
  .breaks--stack td + td { padding-top: var(--space-2); }
  .breaks--stack tbody tr + tr td + td { border-top: 0; }
  .breaks--stack td.num { white-space: normal; }
  .breaks--credit th:nth-child(3), .breaks--credit td:nth-child(3) { display: none; }
  .btn { width: 100%; }
  .btn-row { gap: var(--space-2); }
  .btn--quiet { width: auto; }
}

/* Coarse pointers: 44px minimum touch targets, and keep inputs at 16px so
   iOS does not zoom on focus. */
@media (hover: none), (pointer: coarse) {
  .nav__link, .foot__col a, .chip { min-height: 44px; display: inline-flex; align-items: center; }
  .btn { min-height: 44px; }
  .nav__burger { width: 44px; height: 44px; }
  .faq__q { min-height: 44px; }
  .qform__field input, .qform__field select, .qform__field textarea { font-size: 16px; }
  .dz-filter { min-height: 44px; }
}

@media (prefers-reduced-transparency: reduce) {
  .nav.is-stuck { background: var(--bg); backdrop-filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .rv { opacity: 1; transform: none; }
  .bar__fill { width: var(--w, 0); }
}

/* The trade theme block restates --nav-h and --gutter at a higher specificity
   than the :root rules in the two breakpoints above, so both are repeated here
   for any page that carries a data-theme attribute. */
@media (max-width: 809px) { :root[data-theme] { --nav-h: 64px; } }
@media (max-width: 559px) { :root[data-theme] { --gutter: 20px; } }

/* ---------------- Clay (the default shapes) ----------------
   Ported from public/testthemes/clay/. Every rule is grouped over the two ways
   a page can be clay: data-theme="clay", or no data-theme at all. Each branch is
   wrapped in :where() so the scope adds no specificity and these rules cascade
   exactly as the preview's did, last in the file, losing to the same more
   specific base rules (.sec--band .eyebrow, .foot__col h4) that they lost to
   there. Colours are literal on purpose: the bright amber and the blob palette
   are decorative and are not tokens. */

/* The page background is the plain clay colour: no decorative blobs. */
:where(:root[data-theme="clay"]) body,
:where(:root:not([data-theme])) body { position: relative; min-height: 100vh; letter-spacing: 0; }

:where(:root[data-theme="clay"]) h1, :where(:root[data-theme="clay"]) h2, :where(:root[data-theme="clay"]) h3, :where(:root[data-theme="clay"]) h4, :where(:root[data-theme="clay"]) .display,
:where(:root:not([data-theme])) h1, :where(:root:not([data-theme])) h2, :where(:root:not([data-theme])) h3, :where(:root:not([data-theme])) h4, :where(:root:not([data-theme])) .display { font-weight: 700; letter-spacing: -0.045em; }
:where(:root[data-theme="clay"]) .display,
:where(:root:not([data-theme])) .display { font-size: clamp(2.75rem, 8vw, 6rem); line-height: 0.98; letter-spacing: -0.055em; }
:where(:root[data-theme="clay"]) h2,
:where(:root:not([data-theme])) h2 { font-size: clamp(2rem, 4.4vw, 3.25rem); line-height: 1.05; }

:where(:root[data-theme="clay"]) .nav, :where(:root[data-theme="clay"]) .nav.is-stuck,
:where(:root:not([data-theme])) .nav, :where(:root:not([data-theme])) .nav.is-stuck { background: rgba(250, 249, 247, 0.92); border-bottom: 1px dashed #dad4c8; }
:where(:root[data-theme="clay"]) .nav__brand,
:where(:root:not([data-theme])) .nav__brand { font-weight: 700; }
:where(:root[data-theme="clay"]) .nav__brand rect, :where(:root[data-theme="clay"]) .foot__brand rect,
:where(:root:not([data-theme])) .nav__brand rect, :where(:root:not([data-theme])) .foot__brand rect { fill: #000000; }
:where(:root[data-theme="clay"]) .nav__link,
:where(:root:not([data-theme])) .nav__link { font-weight: 500; color: #000000; }
:where(:root[data-theme="clay"]) .nav__link:hover,
:where(:root:not([data-theme])) .nav__link:hover { color: #066f41; }

:where(:root[data-theme="clay"]) .btn,
:where(:root:not([data-theme])) .btn { border-radius: 1584px; font-weight: 600; font-size: 15.5px; letter-spacing: -0.01em; transition: transform 0.2s, box-shadow 0.2s, background 0.2s; }
:where(:root[data-theme="clay"]) .btn--accent,
:where(:root:not([data-theme])) .btn--accent { background: #000000; color: #ffffff; }
:where(:root[data-theme="clay"]) .btn--accent:hover,
:where(:root:not([data-theme])) .btn--accent:hover { background: #43089f; transform: rotate(-4deg) translateY(-3px); box-shadow: -5px 5px 0 #000000; }
:where(:root[data-theme="clay"]) .btn--line,
:where(:root:not([data-theme])) .btn--line { border: 1px dashed #000000; }
:where(:root[data-theme="clay"]) .btn--line:hover,
:where(:root:not([data-theme])) .btn--line:hover { background: #c1b0ff; transform: rotate(-3deg); }

:where(:root[data-theme="clay"]) .eyebrow, :where(:root[data-theme="clay"]) .product__kind, :where(:root[data-theme="clay"]) .step::before, :where(:root[data-theme="clay"]) .card__num,
:where(:root:not([data-theme])) .eyebrow, :where(:root:not([data-theme])) .product__kind, :where(:root:not([data-theme])) .step::before, :where(:root:not([data-theme])) .card__num {
  font-family: var(--font-sans); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.09em; color: #43089f;
}

:where(:root[data-theme="clay"]) .hero--shop .hero__head,
:where(:root:not([data-theme])) .hero--shop .hero__head { max-width: 860px; margin: 0 0 56px; text-align: left; }
:where(:root[data-theme="clay"]) .hero--shop .hero__head h1,
:where(:root:not([data-theme])) .hero--shop .hero__head h1 { margin: 18px 0 20px; max-width: 12ch; }
:where(:root[data-theme="clay"]) .hero--shop .hero__head .lede,
:where(:root:not([data-theme])) .hero--shop .hero__head .lede { margin: 0; }

:where(:root[data-theme="clay"]) .hero--shop .products__note,
:where(:root:not([data-theme])) .hero--shop .products__note { width: fit-content; max-width: 100%; margin-inline: auto; }

:where(:root[data-theme="clay"]) .products,
:where(:root:not([data-theme])) .products { gap: 24px; }
:where(:root[data-theme="clay"]) .card, :where(:root[data-theme="clay"]) .product,
:where(:root:not([data-theme])) .card, :where(:root:not([data-theme])) .product {
  background: #ffffff; border: 1px solid #dad4c8; border-radius: 40px 24px 44px 24px; padding: 32px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 -1px 1px rgba(0, 0, 0, 0.04) inset, 0 -0.5px 1px rgba(0, 0, 0, 0.05);
  transition: transform 0.25s, box-shadow 0.25s;
}
:where(:root[data-theme="clay"]) .product:nth-child(2),
:where(:root:not([data-theme])) .product:nth-child(2) { border-radius: 28px; }
:where(:root[data-theme="clay"]) .product:nth-child(3),
:where(:root:not([data-theme])) .product:nth-child(3) { border-radius: 28px; }
:where(:root[data-theme="clay"]) .product:nth-child(4),
:where(:root:not([data-theme])) .product:nth-child(4) { border-radius: 28px; }
:where(:root[data-theme="clay"]) .product:hover,
:where(:root:not([data-theme])) .product:hover { transform: rotate(-1.5deg) translateY(-4px); box-shadow: -7px 7px 0 #000000; }
:where(:root[data-theme="clay"]) .product__kind,
:where(:root:not([data-theme])) .product__kind { display: inline-block; align-self: flex-start; padding: 4px 11px; border-radius: 999px; margin-bottom: 16px; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0; text-transform: none; white-space: nowrap; }
:where(:root[data-theme="clay"]) .product:nth-child(1) .product__kind,
:where(:root:not([data-theme])) .product:nth-child(1) .product__kind { background: #efeaff; color: #43089f; }
:where(:root[data-theme="clay"]) .product:nth-child(2) .product__kind,
:where(:root:not([data-theme])) .product:nth-child(2) .product__kind { background: #e3f7ea; color: #0b5a31; }
:where(:root[data-theme="clay"]) .product:nth-child(3) .product__kind,
:where(:root:not([data-theme])) .product:nth-child(3) .product__kind { background: #fdf1d6; color: #6b4500; }
:where(:root[data-theme="clay"]) .product:nth-child(4) .product__kind,
:where(:root:not([data-theme])) .product:nth-child(4) .product__kind { background: #fde6e8; color: #9b1c2a; }
:where(:root[data-theme="clay"]) .product__name,
:where(:root:not([data-theme])) .product__name { font-size: 1.75rem; letter-spacing: -0.04em; }
:where(:root[data-theme="clay"]) .product__price,
:where(:root:not([data-theme])) .product__price { border-bottom: 1px solid #ebe6dc; flex-direction: column; align-items: flex-start; }
:where(:root[data-theme="clay"]) .product__price b,
:where(:root:not([data-theme])) .product__price b { color: var(--fg); font-weight: 700; letter-spacing: -0.055em; }
:where(:root[data-theme="clay"]) .product__feats li::before,
:where(:root:not([data-theme])) .product__feats li::before { border-radius: 46% 54% 50% 50%; background: #fbbd41; }
:where(:root[data-theme="clay"]) .product__feats li b,
:where(:root:not([data-theme])) .product__feats li b { font-weight: 700; }
/* --accent is the darkened amber here, so the decorative fills name the bright one. */
:where(:root[data-theme="clay"]) .plan__feats li::before, :where(:root[data-theme="clay"]) .accent-line, :where(:root[data-theme="clay"]) .bar__fill,
:where(:root:not([data-theme])) .plan__feats li::before, :where(:root:not([data-theme])) .accent-line, :where(:root:not([data-theme])) .bar__fill { background: #fbbd41; }

/* Copy and controls inside a dark plate take the band inks, and a price table
   gets a solid sheet, so neither depends on what the background clay is doing. */
:where(:root[data-theme="clay"]) .show__plate .faint, :where(:root[data-theme="clay"]) .show__plate .muted,
:where(:root:not([data-theme])) .show__plate .faint, :where(:root:not([data-theme])) .show__plate .muted { color: var(--band-fg-2); }
:where(:root[data-theme="clay"]) .show__plate .btn--line,
:where(:root:not([data-theme])) .show__plate .btn--line { border-color: var(--band-line); color: var(--band-fg); }
/* The plate is ink, not the band green: flat (no offset shadow), amber for the
   title and the bold totals, white values, and a white button. */
:where(:root[data-theme="clay"]) .show__plate,
:where(:root:not([data-theme])) .show__plate {
  --band: #111111; --band-fg-2: rgba(255, 255, 255, 0.66); --band-line: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}
:where(:root[data-theme="clay"]) .show__title,
:where(:root:not([data-theme])) .show__title { color: #fbbd41; }
:where(:root[data-theme="clay"]) .show__row,
:where(:root:not([data-theme])) .show__row { background: #1c1c1c; }
:where(:root[data-theme="clay"]) .show__row i,
:where(:root:not([data-theme])) .show__row i { color: rgba(255, 255, 255, 0.8); }
:where(:root[data-theme="clay"]) .show__row b,
:where(:root:not([data-theme])) .show__row b { color: #fbbd41; }
:where(:root[data-theme="clay"]) .show__tag,
:where(:root:not([data-theme])) .show__tag { background: rgba(251, 189, 65, 0.14); color: #fbd27a; }
:where(:root[data-theme="clay"]) .show__plate .btn--accent,
:where(:root:not([data-theme])) .show__plate .btn--accent { background: #ffffff; color: #000000; }
:where(:root[data-theme="clay"]) .show__plate a:not(.btn),
:where(:root:not([data-theme])) .show__plate a:not(.btn) { color: #fbbd41; }
:where(:root[data-theme="clay"]) .breaks,
:where(:root:not([data-theme])) .breaks { background: #ffffff; }

/* The sunken band has no hard edge against the clay: its colour feathers out
   into the padding of the sections either side, so the blobs sink into the band
   instead of being cut by it. The feathers sit at z-index -1, above the
   background clay and below every section's content, so they never wash copy. */
:where(:root[data-theme="clay"]) .sec--sunken,
:where(:root:not([data-theme])) .sec--sunken { background: var(--bg-sunken); position: relative; }
:where(:root[data-theme="clay"]) .sec--sunken::before, :where(:root[data-theme="clay"]) .sec--sunken::after,
:where(:root:not([data-theme])) .sec--sunken::before, :where(:root:not([data-theme])) .sec--sunken::after {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; pointer-events: none;
  height: calc(var(--section) * 0.9);
}
:where(:root[data-theme="clay"]) .sec--sunken::before,
:where(:root:not([data-theme])) .sec--sunken::before { bottom: 100%; background: linear-gradient(to top, var(--bg-sunken), color-mix(in srgb, var(--bg-sunken) 62%, transparent) 35%, transparent); }
:where(:root[data-theme="clay"]) .sec--sunken::after,
:where(:root:not([data-theme])) .sec--sunken::after { top: 100%; background: linear-gradient(to bottom, var(--bg-sunken), color-mix(in srgb, var(--bg-sunken) 62%, transparent) 35%, transparent); }
:where(:root[data-theme="clay"]) .step,
:where(:root:not([data-theme])) .step { border: 1px dashed #b9b1a1; border-radius: 32px 24px 36px 24px; padding: 72px 24px 24px; background: #faf9f7; }
:where(:root[data-theme="clay"]) .step::before,
:where(:root:not([data-theme])) .step::before {
  top: 20px; left: 20px; display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 55% 45% 50% 50%; background: #fbbd41; color: #000000; font-size: 0.875rem; letter-spacing: 0;
}
:where(:root[data-theme="clay"]) .step:nth-child(2)::before,
:where(:root:not([data-theme])) .step:nth-child(2)::before { background: #84e7a5; }
:where(:root[data-theme="clay"]) .step:nth-child(3)::before,
:where(:root:not([data-theme])) .step:nth-child(3)::before { background: #c1b0ff; }
:where(:root[data-theme="clay"]) .step:nth-child(4)::before,
:where(:root:not([data-theme])) .step:nth-child(4)::before { background: #fc7981; }
:where(:root[data-theme="clay"]) .faq,
:where(:root:not([data-theme])) .faq { border-top: 0; display: grid; gap: 12px; }
:where(:root[data-theme="clay"]) .faq__item,
:where(:root:not([data-theme])) .faq__item { border: 1px dashed #b9b1a1; border-radius: 24px; padding: 0 24px; background: #ffffff; }
:where(:root[data-theme="clay"]) .faq__q,
:where(:root:not([data-theme])) .faq__q { font-weight: 700; letter-spacing: -0.025em; }
:where(:root[data-theme="clay"]) .sec--band,
:where(:root:not([data-theme])) .sec--band { background: #02492a; margin: 0 var(--gutter); border-radius: 40px; }
:where(:root[data-theme="clay"]) .cta h2,
:where(:root:not([data-theme])) .cta h2 { letter-spacing: -0.045em; }
:where(:root[data-theme="clay"]) .cta .btn--solid,
:where(:root:not([data-theme])) .cta .btn--solid { background: #ffffff; color: #000000; }
:where(:root[data-theme="clay"]) .cta .btn--solid:hover,
:where(:root:not([data-theme])) .cta .btn--solid:hover { background: #fbbd41; transform: rotate(-4deg); box-shadow: -5px 5px 0 #000000; }
:where(:root[data-theme="clay"]) .foot,
:where(:root:not([data-theme])) .foot { background: transparent; border-top: 0; margin-top: 24px; }

@media (min-width: 810px) {
  :where(:root[data-theme="clay"]) .hero--shop .products,
  :where(:root:not([data-theme])) .hero--shop .products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :where(:root[data-theme="clay"]) .step:nth-child(even),
  :where(:root:not([data-theme])) .step:nth-child(even) { margin-top: 32px; }
}
@media (min-width: 1100px) {
  :where(:root[data-theme="clay"]) .hero--shop .products,
  :where(:root:not([data-theme])) .hero--shop .products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  :where(:root[data-theme="clay"]) .btn:hover, :where(:root[data-theme="clay"]) .product:hover,
  :where(:root:not([data-theme])) .btn:hover, :where(:root:not([data-theme])) .product:hover { transform: none; }
}

/* Each product card's bullets take the colour of its audience pill, so the
   card reads as one colour family instead of a pill plus amber dots. */
:where(:root:not([data-theme]), :root[data-theme="clay"]) .product:nth-child(1) .product__feats li::before { background: #8b6cf0; }
:where(:root:not([data-theme]), :root[data-theme="clay"]) .product:nth-child(2) .product__feats li::before { background: #2fb36a; }
:where(:root:not([data-theme]), :root[data-theme="clay"]) .product:nth-child(3) .product__feats li::before { background: #e0a526; }
:where(:root:not([data-theme]), :root[data-theme="clay"]) .product:nth-child(4) .product__feats li::before { background: #ec5b6b; }

/* ---------------- Fleet order (/phones/order) ----------------
   A solid white page, whatever the palette's canvas (the ink theme keeps its
   own dark canvas, since its text tokens are light). The form is three step
   cards; the plan is two choice tiles; each model is a stepper tile; inputs
   sit on a sunken fill that turns white with an accent ring on focus. The pay
   step mounts Revolut's card field in .fo-card__field. */
:root:not([data-theme="ink"]) body:has([data-fleet-order]) { --bg: #ffffff; --bg-raised: #ffffff; --bg-sunken: #f4f4f5; background: #ffffff; }
:root:not([data-theme="ink"]) body:has([data-fleet-order])::before { content: none; background: none; }
:root:not([data-theme="ink"]) body:has([data-fleet-order]) .nav,
:root:not([data-theme="ink"]) body:has([data-fleet-order]) .nav.is-stuck { background: rgba(255, 255, 255, 0.94); }

.fo { display: grid; gap: var(--space-5); }
.fo-step {
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--space-6); box-shadow: 0 1px 2px rgba(18, 18, 18, 0.04), 0 8px 24px rgba(18, 18, 18, 0.05);
  display: grid; gap: var(--space-4);
}
.fo-step__head { display: flex; align-items: center; gap: var(--space-3); margin: 0; }
.fo-step__num {
  flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--fg); color: var(--bg); font-size: 0.875rem; font-weight: 700; letter-spacing: 0;
}
.fo-step__title { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.02em; }
.fo-step fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }

.fo-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.fo-choice {
  position: relative; display: grid; gap: var(--space-1); padding: var(--space-4) var(--space-4) var(--space-4) 48px;
  border: 1.5px solid var(--line-strong); border-radius: var(--r-sm); background: var(--bg);
  cursor: pointer; font-weight: 400; transition: border-color var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast);
}
.fo-choice:hover { border-color: var(--fg-3); }
.fo-choice input { position: absolute; left: 16px; top: 18px; width: 18px; height: 18px; margin: 0; accent-color: var(--accent-strong); }
.fo-choice b { font-size: 1rem; letter-spacing: -0.01em; }
.fo-choice span { font-size: 0.875rem; color: var(--fg-2); line-height: 1.5; }
.fo-choice:has(input:checked) { border-color: var(--accent-strong); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent-strong) inset; }
.fo-choice:has(input:focus-visible) { box-shadow: var(--accent-ring) 0 0 0 4px; }

/* /phones, laid out like a carrier's phone-on-a-plan page: a promo banner,
   a strip of selling points, then the order built in four steps (phone, buy
   or lease, plan, how many) beside a running summary. The phone pictures
   share one true-scale canvas (1 unit = 1 mm), so a bigger phone draws bigger. */
.tpromo { padding: clamp(20px, 3vw, 32px) 0 clamp(28px, 4vw, 48px); }
.tpromo__card {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); align-items: center;
  gap: var(--space-8); padding: clamp(28px, 5vw, 56px);
  border-radius: var(--r-lg);
  background: linear-gradient(120deg, #eef4ff 0%, #dfe9ff 55%, #cfdfff 100%);
}
.tpromo__eyebrow { display: block; margin-bottom: var(--space-4); }
.tpromo__copy h1 { max-width: 16ch; margin-bottom: var(--space-5); }
.tpromo__copy .lede { max-width: 56ch; margin-bottom: var(--space-8); }
.tpromo__art { position: relative; height: clamp(220px, 26vw, 320px); }
.tpromo__ph { position: absolute; bottom: 0; height: auto; filter: drop-shadow(0 18px 24px rgba(18, 38, 80, 0.28)); }
.tpromo__ph--c { width: 40%; left: 30%; z-index: 2; }
.tpromo__ph--l { width: 37%; left: 4%; bottom: 6%; transform: rotate(-9deg); }
.tpromo__ph--r { width: 35%; right: 4%; bottom: 6%; transform: rotate(9deg); }
.tusp {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3);
  margin: var(--space-5) 0 0; padding: 0; list-style: none;
}
.tusp li {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--r-md);
  font-size: 0.875rem; color: var(--fg-2); background: var(--bg);
}
.tusp b { color: var(--fg); font-weight: 600; }
.tusp svg { flex: none; width: 24px; height: 24px; fill: none; stroke: var(--accent-strong); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tpromo__note { margin-top: var(--space-4); }

.tb { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-8); align-items: start; }
.tb__steps { display: grid; gap: var(--space-6); min-width: 0; }
.tb__step {
  min-width: 0; margin: 0; padding: var(--space-6);
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg);
}
.tb__legend {
  display: flex; align-items: center; gap: var(--space-3); float: left; width: 100%;
  margin-bottom: var(--space-5); padding: 0;
  font-family: var(--font-display); font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em;
}
.tb__legend + * { clear: both; }
.tb__num {
  display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--fg); color: var(--bg); font-family: var(--font-sans); font-size: 0.875rem; font-weight: 600;
}
.tb__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.tb__chip {
  padding: 8px 16px; border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  background: var(--bg); font: 500 0.875rem/1 var(--font-sans); color: var(--fg-2); cursor: pointer;
}
.tb__chip[aria-pressed="true"] { background: var(--fg); border-color: var(--fg); color: var(--bg); }

/* A phone tile: the picture on a grey well, brand, name, the from-price. The
   radio is the whole tile; the corner tick and the blue ring say it's picked. */
.tb__phones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.tphone {
  position: relative; display: grid; align-content: start; gap: 2px;
  padding: var(--space-3) var(--space-3) var(--space-4);
  border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--bg);
  cursor: pointer; transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.tphone:hover { border-color: var(--fg-3); }
.tphone[hidden] { display: none; }
.tphone__input { position: absolute; opacity: 0; pointer-events: none; }
.tphone__well {
  display: grid; place-items: end center; height: 190px; margin-bottom: var(--space-3);
  padding: var(--space-4) 0 var(--space-3); border-radius: var(--r-sm); background: var(--bg-sunken);
}
.tphone__well img { display: block; width: 84px; height: auto; }
.tphone__badge {
  position: absolute; top: calc(var(--space-3) + 8px); left: calc(var(--space-3) + 8px); z-index: 1;
  padding: 4px 10px; border-radius: var(--r-pill); background: var(--accent-strong); color: #fff;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.02em;
}
.tphone__brand { font-size: 0.75rem; color: var(--fg-3); padding-inline: var(--space-1); }
.tphone__name { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; padding-inline: var(--space-1); }
.tphone__from { margin-top: var(--space-2); padding-inline: var(--space-1); font-variant-numeric: tabular-nums; }
.tphone__from small { font-size: 0.75rem; color: var(--fg-2); }
.tphone__from b { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; }
.tphone__terms { font-size: 0.75rem; line-height: 1.45; color: var(--fg-3); padding-inline: var(--space-1); }
.tphone__pick {
  position: absolute; top: calc(var(--space-3) + 8px); right: calc(var(--space-3) + 8px);
  width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--bg);
}
.tphone:has(input:checked) { border-color: var(--accent-strong); box-shadow: 0 0 0 1px var(--accent-strong) inset, var(--shadow-sm); }
.tphone:has(input:checked) .tphone__pick {
  border-color: var(--accent-strong); background: var(--accent-strong)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.tphone:has(input:focus-visible) { box-shadow: var(--accent-ring) 0 0 0 4px; }

/* Buy or lease, and the plans: selectable cards with the price as the headline. */
.tb__opts { display: grid; gap: var(--space-3); }
.tb__opts--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tb__opts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tb__opts--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.topt, .tplan {
  position: relative; display: grid; align-content: start; gap: var(--space-1);
  padding: var(--space-4); border: 1.5px solid var(--line); border-radius: var(--r-md);
  background: var(--bg); cursor: pointer; transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.topt:hover, .tplan:hover { border-color: var(--fg-3); }
.topt input, .tplan input { position: absolute; opacity: 0; pointer-events: none; }
.topt:has(input:checked), .tplan:has(input:checked) { border-color: var(--accent-strong); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent-strong) inset; }
.topt:has(input:focus-visible), .tplan:has(input:focus-visible) { box-shadow: var(--accent-ring) 0 0 0 4px; }
.topt__name, .tplan__name { font-weight: 600; font-size: 0.9375rem; }
.topt__price { font-size: 0.8125rem; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.topt__price b { font-family: var(--font-display); font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; color: var(--fg); }
.topt__note { font-size: 0.75rem; line-height: 1.45; color: var(--fg-3); }
.tplan__price { display: flex; align-items: baseline; gap: 2px; margin: var(--space-1) 0 var(--space-2); font-variant-numeric: tabular-nums; }
.tplan__price b { font-family: var(--font-display); font-size: 1.75rem; font-weight: 600; letter-spacing: -0.03em; }
.tplan__price small { font-size: 0.8125rem; color: var(--fg-2); }
.tplan__feats { display: grid; gap: var(--space-1); padding-top: var(--space-3); border-top: 1px solid var(--line-2); }
.tplan__feats span { position: relative; padding-left: 14px; font-size: 0.8125rem; line-height: 1.4; color: var(--fg-2); }
.tplan__feats span::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.tplan__flag {
  position: absolute; top: -11px; left: var(--space-4); padding: 3px 10px; border-radius: var(--r-pill);
  background: var(--fg); color: var(--bg); font-size: 0.6875rem; font-weight: 600; line-height: 1.4;
}
.tb__sim { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-4); }
.tb__sim[hidden] { display: none; }
.tb__sublabel { margin-right: var(--space-2); font-size: 0.875rem; font-weight: 600; }
.tpill {
  display: inline-flex; align-items: baseline; gap: var(--space-2); padding: 10px 16px;
  border: 1.5px solid var(--line-strong); border-radius: var(--r-pill); cursor: pointer; font-size: 0.875rem;
}
.tpill input { position: absolute; opacity: 0; pointer-events: none; }
.tpill span { color: var(--fg-2); font-size: 0.8125rem; }
.tpill:has(input:checked) { border-color: var(--accent-strong); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent-strong) inset; }
.tpill:has(input:focus-visible) { box-shadow: var(--accent-ring) 0 0 0 4px; }
.tplan .tplan__icons { justify-content: flex-start; margin: 0 0 var(--space-1); }
.tplan .tplan__icons svg { width: 22px; height: 22px; }
.tpill { align-items: center; }
.tpill svg { flex: none; width: 18px; height: 18px; color: var(--fg-2); }
.tpill .dmeter { width: 56px; }
.tpill:has(input:checked) svg { color: var(--accent-strong); }
.tb__prepay { display: flex; align-items: flex-start; gap: var(--space-3); margin-top: var(--space-4); font-size: 0.875rem; color: var(--fg-2); cursor: pointer; }
.tb__prepay input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent-strong); }
.tb__more { margin-top: var(--space-3); }
/* Under the phone tiles: a model that isn't listed is a conversation. */
.tb__ask {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: var(--space-3); align-items: center;
  margin-top: var(--space-4); padding: var(--space-4); border-radius: var(--r-md); background: var(--bg-sunken);
}
.tb__ask svg { width: 24px; height: 24px; fill: none; stroke: var(--fg-2); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tb__ask p { margin: 0; font-size: 0.875rem; color: var(--fg-2); }
.tb__ask b { color: var(--fg); }
.tb__more a { color: var(--accent-strong); }

.tqty { display: inline-flex; align-items: center; border: 1.5px solid var(--line-strong); border-radius: var(--r-pill); overflow: hidden; }
.tqty__btn { width: 48px; height: 48px; border: 0; background: var(--bg); font-size: 1.375rem; cursor: pointer; color: var(--fg); }
.tqty__btn:hover { background: var(--bg-sunken); }
.tqty__input {
  width: 72px; height: 48px; border: 0; text-align: center; font: 600 1.125rem var(--font-sans);
  font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield;
}
.tqty__input::-webkit-outer-spin-button, .tqty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tqty + p { margin-top: var(--space-3); }

/* The running total: sticks beside the steps on a wide screen, and to the
   bottom of the screen on a phone while the steps are in view. */
.tsum {
  position: sticky; top: calc(var(--nav-h) + 16px); display: grid; gap: var(--space-4);
  padding: var(--space-6); border-radius: var(--r-lg); background: var(--bg);
  border: 1px solid var(--line); box-shadow: var(--shadow-md);
}
.tsum__head { display: flex; align-items: center; gap: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--line-2); }
.tsum__img { flex: none; width: 45px; height: auto; }
.tsum__title { font-weight: 600; font-size: 1rem; }
.tsum__sub { font-size: 0.8125rem; color: var(--fg-2); line-height: 1.4; }
.tsum__rows { display: grid; gap: var(--space-3); margin: 0; }
.tsum__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.tsum__row dt { font-size: 0.875rem; color: var(--fg-2); }
.tsum__row dd { margin: 0; display: grid; justify-items: end; font-variant-numeric: tabular-nums; }
.tsum__row b { font-size: 1.125rem; font-weight: 600; }
.tsum__row small { font-size: 0.75rem; color: var(--fg-3); }
.tsum__row dd > span { font-size: 0.75rem; color: var(--fg-2); }
.tsum__row--big b { font-family: var(--font-display); font-size: 2.25rem; letter-spacing: -0.03em; line-height: 1; }
.tsum__note { font-size: 0.75rem; line-height: 1.45; color: var(--fg-3); }
.tsum__go { padding-block: 15px; font-size: 1rem; }
.tsum__link { justify-self: center; font-size: 0.8125rem; color: var(--accent-strong); }

.tb__list { margin-top: var(--space-6); }
.tb__list summary { cursor: pointer; font-weight: 600; font-size: 0.9375rem; color: var(--accent-strong); padding: var(--space-2) 0; }
.tb__list[open] summary { margin-bottom: var(--space-4); }

@media (max-width: 1199px) {
  .tb { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-6); }
  .tb__opts--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tusp { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 999px) {
  .tb { grid-template-columns: minmax(0, 1fr); }
  .tsum {
    position: sticky; top: auto; bottom: 0; z-index: 20;
    grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-2) var(--space-4);
    margin-inline: calc(-1 * var(--gutter)); padding: var(--space-3) var(--gutter);
    border-radius: var(--r-md) var(--r-md) 0 0; border-width: 1px 0 0; box-shadow: 0 -8px 24px rgba(18, 18, 18, 0.10);
  }
  .tsum__head, .tsum__note, .tsum__link { display: none; }
  .tsum__rows { grid-template-columns: repeat(2, auto); justify-content: start; gap: var(--space-5); }
  .tsum__row { display: grid; gap: 0; }
  .tsum__row dd { justify-items: start; }
  .tsum__row dt { font-size: 0.75rem; }
  .tsum__row--big b { font-size: 1.5rem; }
  .tsum__row small { display: none; }
  .tsum__go { width: auto; padding: 14px 22px; }
}
@media (max-width: 809px) {
  .tpromo__card { grid-template-columns: minmax(0, 1fr); padding: var(--space-6); gap: var(--space-2); }
  .tpromo__art { order: -1; height: 170px; max-width: 300px; width: 100%; justify-self: center; }
  .tb__step { padding: var(--space-4); border-radius: var(--r-md); }
  .tb__legend { font-size: 1.125rem; }
  .tb__phones { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .tphone__well { height: 150px; }
  .tphone__well img { width: 66px; }
  .tphone__from b { font-size: 1.25rem; }
  .tb__opts--3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 559px) {
  .tusp { gap: var(--space-2); }
  .tusp li { padding: var(--space-3); font-size: 0.8125rem; }
  .tb__opts--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
  .tplan { padding: var(--space-3); }
  .tplan__price b { font-size: 1.375rem; }
  .tsum .btn { width: auto; }
  .tb__sublabel { flex-basis: 100%; }
  .tpill { padding: 9px 14px; }
  .tb__ask { grid-template-columns: 24px minmax(0, 1fr); }
  .tb__ask .btn { grid-column: 1 / -1; }
}

/* /phones: the four ways to set it up sit in one row on a wide screen, and
   scroll sideways like the phones on a phone. */
@media (min-width: 1200px) {
  .plans--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
  .plans--4 .plan { padding: var(--space-6); }
}
@media (max-width: 809px) {
  .plans--4 {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(86%, 360px);
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) var(--space-3);
    scroll-padding-inline: var(--gutter); scrollbar-width: none;
  }
  .plans--4::-webkit-scrollbar { display: none; }
  /* Swiping, a card is read on its own: its fine print follows its list and
     the button sits at the bottom, rather than rows lined up with cards off screen. */
  .plans--4 .plan { scroll-snap-align: start; display: flex; flex-direction: column; grid-row: auto; }
  .plans--4 .plan__fine { margin-top: 0; margin-bottom: var(--space-6); }
  .plans--4 .plan .btn { margin-top: auto; }
}

.fo-models { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.fo-model {
  display: grid; gap: var(--space-2); padding: var(--space-4); border: 1.5px solid var(--line);
  border-radius: var(--r-sm); background: var(--bg); transition: border-color var(--dur-fast), background var(--dur-fast);
}
.fo-model.is-on { border-color: var(--accent-strong); background: var(--accent-soft); }
.fo-model__img { display: block; width: auto; height: 104px; margin: 0 auto var(--space-1); }
.fo-model label { font-weight: 700; font-size: 0.9375rem; letter-spacing: -0.01em; }
.fo-model .qform__hint { min-height: 1.3em; }
.fo-qty { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; border: 1.5px solid var(--line-strong); border-radius: var(--r-sm); overflow: hidden; background: var(--bg); }
.fo-qty button {
  border: 0; background: var(--bg-sunken); color: var(--fg); font: inherit; font-size: 1.25rem; line-height: 1; cursor: pointer;
}
.fo-qty button:hover { background: var(--line-2); }
.fo-qty button:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: -2px; }
.fo .fo-qty input {
  width: 100%; min-width: 0; color: var(--fg); font: inherit; font-size: 16px; border: 0; border-radius: 0; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums;
  padding: 10px 4px; background: var(--bg); box-shadow: none; -moz-appearance: textfield;
}
.fo .fo-qty input::-webkit-outer-spin-button, .fo .fo-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fo .fo-qty input:focus { box-shadow: none; }
.fo-qty:focus-within { border-color: var(--accent-strong); box-shadow: var(--accent-ring) 0 0 0 3px; }

.fo .qform__field label { font-size: 0.8125rem; font-weight: 600; color: var(--fg-2); letter-spacing: 0; }
.fo .qform__field input, .fo .qform__field textarea {
  min-height: 50px; padding: 13px 16px; background: var(--bg-sunken); border: 1.5px solid transparent;
  border-radius: 12px; transition: border-color var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast);
}
.fo .qform__field textarea { min-height: 96px; }
.fo .qform__field input:hover, .fo .qform__field textarea:hover { border-color: var(--line-strong); }
.fo .qform__field input:focus, .fo .qform__field textarea:focus {
  background: var(--bg); border-color: var(--accent-strong); box-shadow: var(--accent-ring) 0 0 0 4px;
}
.fo .qform__field input:user-invalid { border-color: var(--danger-strong); }
.fo .qform__field input::placeholder, .fo .qform__field textarea::placeholder { color: var(--fg-3); opacity: 0.75; }

.fo-actions { display: grid; gap: var(--space-3); }
.fo-actions .btn { min-height: 54px; font-size: 1rem; }
.fo-secure { display: flex; align-items: center; gap: var(--space-2); font-size: 0.8125rem; color: var(--fg-3); margin: 0; }
.fo-secure svg { flex: none; width: 16px; height: 16px; }

@media (min-width: 960px) {
  .fo-aside { position: sticky; top: 96px; align-self: start; }
}
@media (max-width: 720px) {
  .fo-step { padding: var(--space-5) var(--space-4); }
  .fo-choices, .fo-models { grid-template-columns: minmax(0, 1fr); }
  .fo-model { grid-template-columns: 34px minmax(0, 1fr) 150px; align-items: center; column-gap: var(--space-3); }
  .fo-model__img { grid-column: 1; grid-row: 1 / span 2; height: 64px; margin: 0; }
  .fo-model label { grid-column: 2; grid-row: 1; }
  .fo-model .qform__hint { grid-column: 2; grid-row: 2; }
  .fo-model .fo-qty { grid-column: 3; grid-row: 1 / span 2; }
}

/* The pay step: our own page around Revolut's card field (an iframe it draws
   into .fo-card__field). The field reads its own text styles, so only the box
   it sits in is styled here; the rc-card-field--* classes are the SDK's. */
.fo-pay { max-width: 520px; margin-inline: auto; scroll-margin-top: 96px; }
.fo-pay__amount { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--line); }
.fo-pay__amount b { font-size: 2rem; font-weight: 700; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.fo-card__field {
  min-height: 52px; padding: 15px 16px; background: var(--bg-sunken); border: 1.5px solid transparent; border-radius: 12px;
  transition: border-color var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast);
}
.fo-card__field.rc-card-field--focused { background: var(--bg); border-color: var(--accent-strong); box-shadow: var(--accent-ring) 0 0 0 4px; }
.fo-card__field.rc-card-field--invalid { border-color: var(--danger-strong); }
.fo-card__field.rc-card-field--completed { border-color: var(--ok-strong); }
.fo-pay__alt { font-size: 0.8125rem; color: var(--fg-3); margin: 0; }
.fo-pay__alt a, .fo-pay__alt button { color: var(--accent-strong); }
.fo-pay__alt button { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-decoration: underline; }
.fo-step legend.fo-step__head { padding: 0; margin-bottom: var(--space-4); }
.fo-widget { min-height: 320px; }

/* /phones/order, laid out like a carrier's checkout. A dark step bar under the
   nav says where you are, what's in the order and what it costs; step 1 puts
   the phone large on one side and the choices on the other, as a carrier's
   phone page does (payment term and plan as square option buttons, a tinted
   price panel with the button, then "Getting your phones"); step 2 is your
   details with the order summed up beside it. Without fleet-order.js both
   steps sit on the page at once and the form still posts. */
.ord [hidden] { display: none !important; }
.ostep { position: sticky; top: var(--nav-h); z-index: 50; background: var(--band); color: var(--band-fg); }
.ostep__in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 52px; }
.ostep__count { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0; }
.ostep__item {
  padding: 5px 14px; border: 1px solid var(--band-line); border-radius: var(--r-pill);
  font-size: 0.8125rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40%;
}
.ostep__price { display: flex; align-items: baseline; gap: 4px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ostep__price b { font-size: 1rem; }
.ostep__price small { font-size: 0.75rem; color: var(--band-fg-2); }
.ord__sec { padding: var(--space-8) 0 var(--space-16); }
.fo.ord__form { gap: var(--space-16); }

.oprod {
  display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); grid-template-areas: "panel media";
  gap: clamp(28px, 4vw, 64px); align-items: start;
}
.oprod__panel { grid-area: panel; display: grid; gap: var(--space-6); min-width: 0; }
.oprod__media { grid-area: media; position: sticky; top: calc(var(--nav-h) + 72px); display: grid; gap: var(--space-4); min-width: 0; }
.oprod__stage {
  display: grid; place-items: center; min-height: clamp(360px, 46vw, 560px); padding: var(--space-10);
  background: radial-gradient(120% 90% at 50% 20%, #ffffff 0%, var(--bg-sunken) 70%); border-radius: var(--r-lg);
}
.oprod__hero { display: block; width: auto; height: clamp(280px, 36vw, 460px); filter: drop-shadow(0 30px 40px rgba(18, 18, 18, 0.18)); }
.oprod__thumbs { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.oprod__thumb {
  display: inline-flex; align-items: center; gap: var(--space-2); padding: 6px 12px 6px 6px; border: 1.5px solid var(--line);
  border-radius: var(--r-sm); background: var(--bg); color: var(--fg); font: inherit; font-size: 0.8125rem; font-weight: 600; cursor: pointer;
}
.oprod__thumb img { width: auto; height: 44px; }
.oprod__thumb.is-on { border-color: var(--accent-strong); background: var(--accent-soft); }
.oprod__thumb:focus-visible { outline: none; box-shadow: var(--accent-ring) 0 0 0 4px; }
.oinc { padding: var(--space-5) var(--space-6); border: 1px solid var(--line); border-radius: var(--r-md); }
.oinc__head { margin: 0 0 var(--space-4); font-weight: 700; }
/* One column per part of the plan (the phones, the SIM, Service), each with
   its own picture, so what's in the plan reads at a glance. */
.oinc__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-5); }
.oinc__grp { display: grid; align-content: start; gap: var(--space-3); min-width: 0; }
.oinc__title { display: flex; align-items: center; gap: var(--space-3); margin: 0; font-weight: 600; line-height: 1.3; }
.oinc__ico {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-sm);
  background: var(--accent-soft); color: var(--accent-strong);
}
.oinc__ico svg { width: 22px; height: 22px; }
.oinc__gb { display: flex; align-items: center; gap: var(--space-3); }
.oinc__gb b { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.oinc__gb .dmeter { flex: 1; max-width: 120px; }
.oinc__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); font-size: 0.875rem; line-height: 1.4; color: var(--fg-2); }
.oinc__list li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: var(--space-2); align-items: start; }
.oinc__list li svg { width: 18px; height: 18px; color: var(--fg-3); }
.oinc svg, .picons svg, .odata svg, .osvc svg, .tpill svg {
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

/* The plan pictures: a phone, Service's wrench and a SIM, joined by "+". */
.picons { display: flex; align-items: center; justify-content: center; gap: 3px; margin-bottom: 6px; color: var(--fg-2); font-style: normal; }
.picons svg { width: 20px; height: 20px; }
.picons b { font-size: 0.75rem; font-weight: 600; color: var(--fg-3); }
.oseg__opt input:checked + span .picons, .tplan:has(input:checked) .picons { color: var(--accent-strong); }

/* How much data: five steps of 5 GB, so 15 GB fills three and 25 GB all five. */
.dmeter { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; width: 100%; }
.dmeter i { height: 6px; border-radius: 3px; background: var(--line-strong); }
.dmeter i.on { background: var(--accent); }
.odata { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin-bottom: 6px; color: var(--fg-2); font-style: normal; }
.odata svg { flex: none; width: 20px; height: 20px; }
.odata .dmeter { max-width: 72px; }
.oseg__opt input:checked + span .odata { color: var(--accent-strong); }

/* The SIM card on the stage, beside the phone: Repeater blue with a chip,
   the bars and the data a month, its corner cut like a real SIM. */
.oprod__stage { position: relative; }
.osim { position: absolute; right: clamp(14px, 5%, 48px); bottom: clamp(14px, 6%, 48px); transform: rotate(-7deg); filter: drop-shadow(0 14px 18px rgba(18, 18, 18, 0.22)); }
.simcard {
  position: relative; display: grid; align-content: end; justify-items: start; width: 176px; aspect-ratio: 1.42; padding: 14px 16px;
  border-radius: 14px; clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 0 100%);
  background: linear-gradient(140deg, var(--accent) 0%, var(--accent-strong) 55%, var(--accent-pressed) 100%); color: var(--fg-on-accent);
}
.simcard__chip { position: absolute; left: 16px; top: 16px; width: 36px; height: 28px; }
.simcard__chip rect { fill: rgba(255, 255, 255, 0.88); stroke: none; }
.simcard__chip path { fill: none; stroke: var(--accent-pressed); stroke-width: 1.2; opacity: 0.45; }
.simcard__mark { position: absolute; right: 14px; bottom: 14px; width: 22px; height: 22px; fill: currentColor; opacity: 0.8; }
.simcard__gb { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.simcard__per { margin-top: 3px; font-size: 0.75rem; font-weight: 500; opacity: 0.9; }
/* Service's badge on the stage. */
.osvc {
  position: absolute; left: clamp(14px, 5%, 48px); top: clamp(14px, 6%, 48px); display: flex; align-items: center; gap: var(--space-2);
  margin: 0; padding: 6px 14px 6px 6px; border-radius: var(--r-pill); background: var(--bg); box-shadow: var(--shadow-sm);
  font-size: 0.8125rem; line-height: 1.25; color: var(--fg-2);
}
.osvc i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong); }
.osvc svg { width: 18px; height: 18px; }
.osvc span { display: grid; }
.osvc b { color: var(--fg); font-weight: 600; }
.osvc small { font-size: inherit; }

.oprod__title { display: grid; gap: var(--space-1); justify-items: start; }
.oprod__brand { margin: 0; font-size: 1.125rem; font-weight: 600; color: var(--fg-2); }
.oprod__name { margin: 0; font-size: clamp(1.875rem, 3.4vw, 2.5rem); line-height: 1.1; letter-spacing: -0.03em; text-wrap: balance; }
.opick { position: relative; display: inline-flex; margin-top: var(--space-3); }
.opick span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.opick select {
  appearance: none; -webkit-appearance: none; padding: 8px 36px 8px 16px; border: 1.5px solid var(--accent-strong); border-radius: var(--r-pill);
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%232f6fe0' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right 14px center / 11px 8px;
  color: var(--accent-strong); font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer;
}
.opick select:focus-visible { outline: none; box-shadow: var(--accent-ring) 0 0 0 4px; }

.ogroup { border: 0; margin: 0; padding: 0; min-width: 0; }
.ogroup__label { display: block; padding: 0; margin: 0 0 var(--space-3); font-size: 0.9375rem; font-weight: 600; }
.ogroup__label .faint { font-weight: 400; }
.ogroup__hint { margin: var(--space-2) 0 0; font-size: 0.8125rem; color: var(--fg-2); }
.oseg { display: grid; gap: var(--space-2); }
.oseg--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.oseg--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.oseg__opt { position: relative; display: block; cursor: pointer; font-weight: 400; }
.oseg__opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.oseg__opt span {
  display: grid; align-content: center; min-height: 48px; height: 100%; padding: 10px 12px; text-align: center;
  border: 1.5px solid var(--line-strong); border-radius: var(--r-xs); background: var(--bg);
  font-size: 0.9375rem; font-weight: 600; line-height: 1.25;
  transition: border-color var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast);
}
.oseg__opt em { display: block; margin-top: 3px; font-style: normal; font-weight: 400; font-size: 0.8125rem; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.oseg__opt em:empty { display: none; }
.oseg__opt:hover span { border-color: var(--fg-3); }
.oseg__opt input:checked + span { border-color: var(--accent-strong); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent-strong) inset; }
.oseg__opt input:focus-visible + span { box-shadow: 0 0 0 1px var(--accent-strong) inset, var(--accent-ring) 0 0 0 4px; }
.oseg__opt input:disabled + span { opacity: 0.7; cursor: default; }

.ophones { display: grid; gap: var(--space-2); }
.ophone {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) 124px; grid-template-areas: "img name qty" "img price qty";
  align-items: center; column-gap: var(--space-3); padding: 10px 12px;
  border: 1.5px solid var(--line); border-radius: var(--r-sm); background: var(--bg);
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.ophone.is-on { border-color: var(--accent-strong); background: var(--accent-soft); }
.ophone__img { grid-area: img; display: block; width: auto; height: 56px; }
.ophone__name { grid-area: name; font-weight: 700; font-size: 0.9375rem; letter-spacing: -0.01em; }
.ophone__price { grid-area: price; font-size: 0.8125rem; color: var(--fg-2); min-height: 1.2em; }
.ophone .fo-qty { grid-area: qty; }
.omix {
  width: 100%; margin-top: var(--space-2); padding: 12px; border: 1.5px dashed var(--line-strong); border-radius: var(--r-sm);
  background: none; color: var(--accent-strong); font: inherit; font-weight: 600; cursor: pointer;
}
.omix:hover { border-color: var(--accent-strong); }

.odeal {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--space-3); align-items: start; padding: 14px 16px;
  background: var(--bg-sunken); border-radius: var(--r-sm); font-size: 0.875rem; font-weight: 400; color: var(--fg-2); cursor: pointer;
}
.odeal input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent-strong); }
.odeal b { display: block; color: var(--fg); font-size: 0.9375rem; }

.oprice { padding: var(--space-6); background: var(--accent-soft); border-radius: var(--r-md); }
.oprice__big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--space-2); margin: 0; }
.oprice__big b { font-size: clamp(2rem, 3.6vw, 2.5rem); font-weight: 700; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.oprice__big span { font-size: 0.875rem; color: var(--fg-2); }
.oprice__then { margin: var(--space-2) 0 0; font-weight: 600; font-size: 0.9375rem; }
.oprice__fine { margin: var(--space-1) 0 0; font-size: 0.8125rem; color: var(--fg-2); }
.oprice__go { margin-top: var(--space-5); min-height: 54px; font-size: 1rem; }
.oget { margin-top: var(--space-5); padding: var(--space-5); background: var(--bg); border-radius: var(--r-sm); display: grid; gap: var(--space-3); }
.oget__head { margin: 0; font-weight: 700; }
.oget__row { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line-2); }
.oget__row svg, .orow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; color: var(--fg-2); }
.oget__row p { margin: 0; font-size: 0.8125rem; color: var(--fg-2); }
.oget__row b { display: block; color: var(--fg); font-size: 0.875rem; }
.oget__row a { color: var(--accent-strong); }
.orow {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) 10px; gap: var(--space-3); align-items: center;
  padding: var(--space-4) 0; border-top: 1px solid var(--line); color: var(--fg-2); text-decoration: none; font-size: 0.875rem;
}
.orow + .orow { margin-top: calc(-1 * var(--space-6)); }
.orow::after { content: ""; width: 7px; height: 7px; border-right: 1.8px solid var(--fg-3); border-top: 1.8px solid var(--fg-3); transform: rotate(45deg); }
.orow b { display: block; color: var(--fg); font-size: 0.9375rem; }
.orow:hover b { color: var(--accent-strong); }
.obar { display: none; }

.odetails { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(24px, 4vw, 56px); align-items: start; }
.odetails__main { display: grid; gap: var(--space-5); min-width: 0; }
.osum {
  position: sticky; top: calc(var(--nav-h) + 72px); padding: var(--space-6); background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-sm);
}
.osum__head { display: grid; grid-template-columns: 45px minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; }
.osum__img { width: auto; height: 72px; }
.osum__title { margin: 0; font-weight: 700; }
.osum__sub { margin: 2px 0 0; font-size: 0.8125rem; color: var(--fg-2); }
.osum__edit { align-self: start; padding: 0; border: 0; background: none; color: var(--accent-strong); font: inherit; font-size: 0.875rem; font-weight: 600; text-decoration: underline; cursor: pointer; }
.osum__rows { margin: var(--space-5) 0 0; }
.osum__rows > div { display: flex; justify-content: space-between; gap: var(--space-4); padding: 10px 0; border-top: 1px solid var(--line-2); }
.osum__rows dt { font-size: 0.875rem; color: var(--fg-2); }
.osum__rows dt small { display: block; font-size: 0.75rem; color: var(--fg-3); }
.osum__rows dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.osum__rows .osum__total { padding: 14px 0; }
.osum__rows .osum__total dt { color: var(--fg); font-weight: 700; }
.osum__rows .osum__total dd { font-size: 1.25rem; font-weight: 700; }
.osum__fine { margin: var(--space-3) 0 0; font-size: 0.75rem; color: var(--fg-3); }

@media (max-width: 999px) {
  .ostep__item { display: none; }
  .oprod { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; gap: var(--space-6); }
  .oprod__media { display: contents; }
  .oprod__stage { order: 1; min-height: 0; padding: var(--space-6); }
  .oprod__hero { height: clamp(200px, 52vw, 320px); }
  .oprod__thumbs { order: 2; }
  .oprod__panel { order: 3; grid-area: auto; }
  .oinc { order: 4; }
  .osim { right: 12px; bottom: 14px; }
  .simcard { width: 118px; padding: 9px 11px; border-radius: 10px; clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%); }
  .simcard__chip { left: 11px; top: 11px; width: 26px; height: 20px; }
  .simcard__mark { right: 10px; bottom: 10px; width: 16px; height: 16px; }
  .simcard__gb { font-size: 1.125rem; }
  .simcard__per { margin-top: 2px; font-size: 0.625rem; }
  .osvc { left: 12px; top: 12px; padding: 4px 12px 4px 4px; }
  .osvc i { width: 26px; height: 26px; }
  .osvc svg { width: 15px; height: 15px; }
  .osvc small { display: none; }
  .orow + .orow { margin-top: calc(-1 * var(--space-6)); }
  .oprice__go { display: none; }
  .obar {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
    position: sticky; bottom: 0; z-index: 20; margin: 0 calc(-1 * var(--gutter)); padding: 12px var(--gutter);
    background: var(--bg); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(18, 18, 18, 0.08);
  }
  .obar[hidden] { display: none; }
  .obar__sum { display: grid; margin: 0; }
  .obar__sum b { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
  .obar__sum small { font-size: 0.75rem; color: var(--fg-2); }
  .obar .btn { min-height: 48px; padding-inline: var(--space-8); }
  .odetails { grid-template-columns: minmax(0, 1fr); }
  .osum { position: static; order: -1; }
}
@media (max-width: 559px) {
  .ord__sec { padding-top: var(--space-5); }
  .oseg__opt span { padding: 10px 6px; font-size: 0.875rem; }
  .ophone { grid-template-columns: 30px minmax(0, 1fr) 112px; }
  .oprice { padding: var(--space-5); }
}

/* Price sheet v1.2: three ways (a 3-up row of tiles), four bundles with their
   monthly price under each, the SIM size as a segmented pair, the prepay tick,
   and the summary's "you pay today" row picked out. */
.fo-choices--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fo-choice em { font-style: normal; font-size: 0.875rem; font-weight: 700; color: var(--fg); font-variant-numeric: tabular-nums; }
.fo-sub { padding: 0; margin: 0 0 var(--space-2); font-size: 0.8125rem; font-weight: 600; color: var(--fg-2); }
.fo-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding: 4px; background: var(--bg-sunken); border-radius: 12px; }
.fo-seg label { position: relative; cursor: pointer; }
.fo-seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.fo-seg span {
  display: block; padding: 10px 12px; border-radius: 9px; text-align: center; font-size: 0.875rem; color: var(--fg-2);
  transition: background var(--dur-fast), box-shadow var(--dur-fast), color var(--dur-fast);
}
.fo-seg span i { font-style: normal; font-variant-numeric: tabular-nums; }
.fo-seg input:checked + span { background: var(--bg); color: var(--fg); box-shadow: 0 1px 2px rgba(18, 18, 18, 0.08), 0 0 0 1.5px var(--accent-strong); }
.fo-seg input:focus-visible + span { box-shadow: var(--accent-ring) 0 0 0 4px; }
.fo-check {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--space-3); align-items: start; padding: var(--space-4);
  border: 1.5px dashed var(--line-strong); border-radius: var(--r-sm); cursor: pointer; font-weight: 400; font-size: 0.875rem; color: var(--fg-2); line-height: 1.5;
}
.fo-check b { color: var(--fg); }
.fo-check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent-strong); }
.fo-check:has(input:checked) { border-style: solid; border-color: var(--accent-strong); background: var(--accent-soft); }
.fo-aside .show__row--total { background: #222; font-size: 0.9375rem; }
.fo-aside .show__row--total span:first-child, .fo-aside .show__row--total i { color: #ffffff; font-weight: 700; }
@media (max-width: 960px) and (min-width: 721px) {
  .fo-choices--3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .fo-choices--3 { grid-template-columns: minmax(0, 1fr); }
}
/* Owner test-order notice (/phones/order?test=…). */
.fo-test { margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--r-sm); background: var(--bg-sunken); border: 1.5px dashed var(--danger-strong); color: var(--fg); font-size: 0.875rem; font-weight: 600; }
/* A phone order (/phones/order?order=…): set up by the desk on a call. */
.fo-desk { margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--r-sm); background: var(--bg-sunken); border: 1.5px solid var(--accent); color: var(--fg); font-size: 0.875rem; font-weight: 600; }
/* /phones/order: the account set-up step after "Payment received" */
.fo-setup { display: grid; gap: var(--space-4); margin-top: var(--space-6); padding: var(--space-5); }
.fo-setup[hidden] { display: none; }
.fo-setup input[readonly] { background: var(--bg-sunken); }

/* ---------------- Notion colour layer (the default) ----------------
   The clay rules above give the default its shapes; these recolour them with
   Notion's palette. Same specificity as the clay rules (both :where-scoped),
   later in the file, so they win for the default and leave data-theme="clay"
   exactly as it was. Tag and bullet colours are Notion's own tag palette. */
:where(:root:not([data-theme]), :root[data-theme="notion"]) .nav, :where(:root:not([data-theme]), :root[data-theme="notion"]) .nav.is-stuck { background: rgba(255, 255, 255, 0.92); border-bottom: 1px solid #e9e8e6; }
:where(:root:not([data-theme]), :root[data-theme="notion"]) .nav__brand rect, :where(:root:not([data-theme]), :root[data-theme="notion"]) .foot__brand rect { fill: #31302e; }
:where(:root:not([data-theme]), :root[data-theme="notion"]) .nav__link { color: #31302e; }
:where(:root:not([data-theme]), :root[data-theme="notion"]) .nav__link:hover { color: #006ac7; }
:where(:root:not([data-theme]), :root[data-theme="notion"]) .eyebrow, :where(:root:not([data-theme]), :root[data-theme="notion"]) .card__num { color: #006ac7; }
:where(:root:not([data-theme]), :root[data-theme="notion"]) .btn--accent { background: #0075de; color: #ffffff; }
:where(:root:not([data-theme]), :root[data-theme="notion"]) .btn--accent:hover { background: #005bab; box-shadow: -5px 5px 0 #31302e; }
:where(:root:not([data-theme]), :root[data-theme="notion"]) .btn--line { border-color: #31302e; }
:where(:root:not([data-theme]), :root[data-theme="notion"]) .btn--line:hover { background: #e6f1fc; }
:where(:root:not([data-theme]), :root[data-theme="notion"]) .card, :where(:root:not([data-theme]), :root[data-theme="notion"]) .product { border-color: #e9e8e6; }
:where(:root:not([data-theme]), :root[data-theme="notion"]) .product:hover { box-shadow: -7px 7px 0 #31302e; }
:where(:root:not([data-theme]), :root[data-theme="notion"]) .product:nth-child(1) .product__kind { background: #fbecdd; color: #a14c0a; }
:where(:root:not([data-theme]), :root[data-theme="notion"]) .product:nth-child(2) .product__kind { background: #edf3ec; color: #2b593f; }
:where(:root:not([data-theme]), :root[data-theme="notion"]) .product:nth-child(3) .product__kind { background: #f6f3f9; color: #5a3d78; }
:where(:root:not([data-theme]), :root[data-theme="notion"]) .product:nth-child(4) .product__kind { background: #fbf3db; color: #7a5612; }
:where(:root:not([data-theme]), :root[data-theme="notion"]) .product__price { border-bottom-color: #f1f0ee; }
:where(:root:not([data-theme]), :root[data-theme="notion"]) .product__feats li::before, :where(:root:not([data-theme]), :root[data-theme="notion"]) .plan__feats li::before, :where(:root:not([data-theme]), :root[data-theme="notion"]) .accent-line, :where(:root:not([data-theme]), :root[data-theme="notion"]) .bar__fill { background: #0075de; }
:where(:root:not([data-theme]), :root[data-theme="notion"]) .product:nth-child(1) .product__feats li::before { background: #d9730d; }
:where(:root:not([data-theme]), :root[data-theme="notion"]) .product:nth-child(2) .product__feats li::before { background: #448361; }
:where(:root:not([data-theme]), :root[data-theme="notion"]) .product:nth-child(3) .product__feats li::before { background: #9065b0; }
:where(:root:not([data-theme]), :root[data-theme="notion"]) .product:nth-child(4) .product__feats li::before { background: #cb912f; }
:where(:root:not([data-theme]), :root[data-theme="notion"]) .show__plate { --band: #31302e; }
:where(:root:not([data-theme]), :root[data-theme="notion"]) .show__title, :where(:root:not([data-theme]), :root[data-theme="notion"]) .show__row b, :where(:root:not([data-theme]), :root[data-theme="notion"]) .show__plate a:not(.btn) { color: #8bbff8; }
:where(:root:not([data-theme]), :root[data-theme="notion"]) .show__row { background: #3f3e3b; }
:where(:root:not([data-theme]), :root[data-theme="notion"]) .show__tag { background: rgba(98, 168, 245, 0.16); color: #8bbff8; }
:where(:root:not([data-theme]), :root[data-theme="notion"]) .step { border-color: #d3d1cd; background: #ffffff; }
:where(:root:not([data-theme]), :root[data-theme="notion"]) .step::before { background: #fbecdd; color: #a14c0a; }
:where(:root:not([data-theme]), :root[data-theme="notion"]) .step:nth-child(2)::before { background: #edf3ec; color: #2b593f; }
:where(:root:not([data-theme]), :root[data-theme="notion"]) .step:nth-child(3)::before { background: #f6f3f9; color: #5a3d78; }
:where(:root:not([data-theme]), :root[data-theme="notion"]) .step:nth-child(4)::before { background: #fbf3db; color: #7a5612; }
:where(:root:not([data-theme]), :root[data-theme="notion"]) .faq__item { border-color: #d3d1cd; }
:where(:root:not([data-theme]), :root[data-theme="notion"]) .sec--band { background: #31302e; }
:where(:root:not([data-theme]), :root[data-theme="notion"]) .cta .btn--solid { color: #31302e; }
:where(:root:not([data-theme]), :root[data-theme="notion"]) .cta .btn--solid:hover { background: #0075de; color: #ffffff; box-shadow: -5px 5px 0 #191919; }

/* ---------------- Website designer (/designer) ----------------
   Four steps (.dz-step on the fleet order's .fo-step cards) under a stepper,
   one at a time with JS, on the same white page, plus: trade
   and colour chips, seven design cards with a three-colour swatch, the live
   preview frame (a phone-width frame, an 834px tablet, or a 1280px desktop scaled
   down to fit; a pane wider than that draws the desktop at its own width),
   the summary plate (beside the steps on a wide screen, inside the send step
   on a phone) and, on a phone, a bar fixed to the bottom of the screen with
   today's total and the monthly fee. Tokens only; --warn is never text. */
:root:not([data-theme="ink"]) body:has([data-designer]) { --bg: #ffffff; --bg-raised: #ffffff; --bg-sunken: #f4f4f5; background: #ffffff; }
:root:not([data-theme="ink"]) body:has([data-designer])::before { content: none; background: none; }
:root:not([data-theme="ink"]) body:has([data-designer]) .nav,
:root:not([data-theme="ink"]) body:has([data-designer]) .nav.is-stuck { background: rgba(255, 255, 255, 0.94); }
.dz-sec [hidden], .dz-bar[hidden] { display: none !important; }
.dz-head { padding-bottom: var(--space-6); }
.dz-sec { padding-top: 0; }
/* The designer's own width (owner, 2026-11-04: PC-first): the heading and the content
   share one edge up to --maxw-designer, with gutters that grow with the window. Only
   these two wraps; the nav, the footer and every other page keep --maxw. */
.dz-head .wrap, .dz-sec .wrap { max-width: var(--maxw-designer); padding-inline: clamp(var(--gutter), 3vw, 64px); }
.dz { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.dz__main { min-width: 0; }
.dz .fo-step { min-width: 0; }
.dz-flush { margin: 0; }
/* Four steps: the stepper above them, a "Step 2 of 4" head on each, Back / Next under
   each. With JS (.is-wizard) only the current step shows; without it all four do.
   The strip (owner, 2026-11-04: animated, with icons): each step is a circle with its
   icon (the sprite at the top of /designer's <main>, drawn with <use>) and its number as
   a small badge on the circle's shoulder, so "1 About you" stays text for a screen reader
   and the no-JS page; one progress line runs behind the four circles, its fill the
   script's --dz-progress (0 to 1); the current step's circle pulses a soft ring, a done
   step's shows the tick in place of its icon; and the four nodes rise in one after the
   other on load (.is-in, only with JS and motion allowed). Every animation's end state is
   the resting style, and the reduced-motion rule at the end of this block turns all of
   them off. */
.dz-steps { --dz-progress: 0; list-style: none; margin: 0 0 var(--space-4); padding: 0; position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dz-steps li { position: relative; z-index: 1; min-width: 0; }
/* The progress line: a track from the first circle's centre to the last's (an eighth of the
   width in from each end on four equal columns, so 75% long) and a fill that is --dz-progress
   of it. The circles are opaque, so the line reads as running between them. */
.dz-steps::before, .dz-steps::after { content: ""; position: absolute; z-index: 0; top: 22px; left: 12.5%; height: 2px; border-radius: 2px; }
.dz-steps::before { right: 12.5%; background: var(--line-strong); }
.dz-steps::after { width: calc(var(--dz-progress) * 75%); background: var(--accent-strong); transition: width 0.48s var(--ease-out); }
.dz-steps a {
  display: grid; justify-items: center; gap: 6px; min-height: 44px; padding: 6px 2px 3px;
  color: var(--fg-2); text-decoration: none; text-align: center; font-size: 0.8125rem; font-weight: 600; line-height: 1.2;
  border-radius: var(--r-sm);
}
.dz-steps a:hover { color: var(--fg); }
.dz-steps a:hover .dz-steps__n { border-color: var(--fg-3); }
.dz-steps a:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.dz-steps__n {
  position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid var(--line-strong); background: var(--bg); color: var(--fg-2); font-size: 0.875rem; font-weight: 700;
  transition: background var(--dur-base), border-color var(--dur-base), color var(--dur-base);
}
.dz-steps__i { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; }
.dz-steps__num {
  position: absolute; top: -6px; right: -7px; box-sizing: border-box; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  border: 1.5px solid var(--line-strong); background: var(--bg); color: var(--fg-2); font-size: 0.625rem; font-weight: 700; line-height: 14px; text-align: center;
  transition: background var(--dur-base), border-color var(--dur-base), color var(--dur-base);
}
.dz-steps__t { max-width: 100%; overflow-wrap: anywhere; }
.dz-steps li.is-current a { color: var(--fg); }
.dz-steps li.is-current .dz-steps__n { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.dz-steps li.is-current .dz-steps__num { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--bg); }
/* The ring is a disc behind the circle (::before; ::after is the done tick), 5px past its edge at rest
   (inset -7px: the 2px border plus 5px), in the circle's own colour at 0.08. It pulses on transform
   and opacity only, which the compositor runs without a style recalc every frame (a box-shadow
   animation repainted for as long as the page was open). It pulses twice and rests (under five
   seconds, so no pause control is owed for moving content), and the keyframes start and end on
   scale 1 and the resting opacity, so with animation off it is the resting ring. */
.dz-steps li.is-current .dz-steps__n::before {
  content: ""; position: absolute; inset: -7px; z-index: -1; border-radius: 50%; background: var(--fg); opacity: 0.08;
  animation: dz-ring 2.4s ease-in-out 2;
}
@keyframes dz-ring {
  0%, 100% { transform: scale(1); opacity: 0.08; }
  50% { transform: scale(1.18); opacity: 0.03; }
}
.dz-steps li.is-done a { color: var(--fg); }
.dz-steps li.is-done .dz-steps__n { background: var(--accent-strong); border-color: var(--accent-strong); color: transparent; }
.dz-steps li.is-done .dz-steps__i { visibility: hidden; }
.dz-steps li.is-done .dz-steps__num { background: var(--accent-strong); border-color: var(--bg); color: var(--bg); }
.dz-steps li.is-done .dz-steps__n::after {
  content: ""; position: absolute; left: 11px; top: 6px; width: 7px; height: 13px;
  border: solid var(--bg); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
/* The entrance: the four nodes fade and rise 60 ms apart, done inside 600 ms, ending on the resting style. */
.dz-steps.is-in li { animation: dz-step-in 0.36s var(--ease-out) both; }
.dz-steps.is-in li:nth-child(2) { animation-delay: 60ms; }
.dz-steps.is-in li:nth-child(3) { animation-delay: 120ms; }
.dz-steps.is-in li:nth-child(4) { animation-delay: 180ms; }
@keyframes dz-step-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.dz-step__head { display: grid; gap: 2px; }
.dz-step__count { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-strong); }
.dz-step__title { margin: 0; font-size: 1.5rem; line-height: 1.15; letter-spacing: -0.025em; text-wrap: balance; }
.dz-step__title:focus { outline: none; }
.dz-step__nav { display: flex; align-items: center; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.dz-step__nav .btn { width: auto; min-height: 50px; min-width: 0; padding-inline: 22px; white-space: normal; }
.dz-step__nav [data-step-next] { margin-left: auto; }
.dz-step__nav [data-step-next]::after { content: "\2192"; margin-left: 8px; transition: transform var(--dur-fast) var(--ease-out); }
.dz-step__nav [data-step-next]:hover::after { transform: translateX(3px); }
.dz-send .dz-step__nav { border-top: 0; padding-top: 0; }
.dz-step__nav .btn--line, .dz-bar__go .btn--line { border: 1.5px solid var(--line-strong); background: var(--bg); color: var(--fg); }
.dz-step__nav .btn--line:hover, .dz-bar__go .btn--line:hover { border-color: var(--fg); background: var(--bg); color: var(--fg); }
.dz-send .qform__row { align-items: start; }
.dz-steps { scroll-margin-top: calc(var(--nav-h) + 12px); }
.is-wizard .dz-step.is-current { animation: dz-in var(--dur-base) var(--ease-out); }
@keyframes dz-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.dz-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.dz-chip { position: relative; cursor: pointer; }
.dz-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.dz-chip span {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 10px 16px;
  border: 1.5px solid var(--line-strong); border-radius: var(--r-pill); background: var(--bg);
  font-size: 0.9375rem; font-weight: 500; color: var(--fg); line-height: 1.2;
  transition: border-color var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast);
}
.dz-chip:hover span { border-color: var(--fg-3); }
.dz-chip input:checked + span { border-color: var(--accent-strong); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent-strong) inset; }
.dz-chip input:focus-visible + span { box-shadow: var(--accent-ring) 0 0 0 4px; }
.dz-chips--sm .dz-chip span { font-size: 0.875rem; padding: 8px 14px; }
.dz-dot { flex: none; width: 16px; height: 16px; border-radius: var(--r-full); box-shadow: 0 0 0 1px rgba(18, 18, 18, 0.12) inset; }
.dz-designs__note { margin: 0 0 var(--space-4); }
/* The classic cards grow with the column and multiply when there's room: two across at
   the least (the min track is half the row, so the split screen's step column never
   drops to one), three from a 722px row, four from 968px; under 421px one a row (below). */
.dz-designs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, calc(50% - var(--space-2))), 1fr)); gap: var(--space-4); }
.dz-design {
  position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  border: 1.5px solid var(--line-strong); border-radius: 18px; background: var(--bg); cursor: pointer;
  transition: border-color var(--dur-fast), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.dz-design:hover { border-color: var(--fg-3); box-shadow: 0 10px 28px rgba(18, 18, 18, 0.08); }
/* The radio stays a real input (keyboard, no-JS); the round tick on the shot is what's seen. */
.dz-design input { position: absolute; top: 14px; right: 14px; width: 24px; height: 24px; margin: 0; opacity: 0; cursor: pointer; z-index: 2; }
.dz-design__shot { position: relative; display: block; aspect-ratio: 8 / 5; overflow: hidden; background: var(--bg-sunken); border-bottom: 1px solid var(--line); }
.dz-design__shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform var(--dur-slow) var(--ease-out); }
.dz-design:hover .dz-design__shot img { transform: scale(1.03); }
.dz-design__tick {
  position: absolute; top: 12px; right: 12px; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.92); box-shadow: 0 0 0 1.5px rgba(18, 18, 18, 0.25), 0 2px 6px rgba(18, 18, 18, 0.15);
}
.dz-design__body { display: grid; align-content: start; gap: 6px; padding: var(--space-4); flex: 1; }
.dz-design__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.dz-design .dz-swatch { margin: 0; width: 54px; height: 16px; }
.dz-design:has(input:checked), .dz-design.is-on { border-color: var(--fg); box-shadow: 0 0 0 1.5px var(--fg), 0 10px 28px rgba(18, 18, 18, 0.10); }
.dz-design:has(input:checked) .dz-design__tick, .dz-design.is-on .dz-design__tick { background: var(--fg); box-shadow: 0 0 0 2px #ffffff, 0 2px 6px rgba(18, 18, 18, 0.2); }
.dz-design:has(input:checked) .dz-design__tick::after, .dz-design.is-on .dz-design__tick::after {
  content: ""; position: absolute; left: 9px; top: 5px; width: 6px; height: 11px;
  border: solid #ffffff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
.dz-design:has(input:focus-visible) { box-shadow: 0 0 0 1.5px var(--fg), var(--accent-ring) 0 0 0 5px; }
.dz-swatch { display: flex; width: 66px; height: 22px; margin-bottom: var(--space-2); border-radius: var(--r-xs); overflow: hidden; box-shadow: 0 0 0 1px rgba(18, 18, 18, 0.12); }
.dz-swatch i { flex: 1; }
.dz-design__name { font-size: 1.0625rem; letter-spacing: -0.015em; }
.dz-design__tag { font-size: 0.8125rem; font-weight: 600; color: var(--fg-2); }
.dz-design__fit {
  justify-self: start; padding: 2px 10px; border-radius: var(--r-pill);
  background: rgba(68, 131, 97, 0.12); color: var(--ok-strong); font-size: 0.75rem; font-weight: 700;
}
/* The selected design's blurb is read once, under the grid (data-design-blurb); each card lists its features. */
.dz-design__blurb { display: none; }
.dz-design__feats { display: grid; gap: 4px; margin-top: 2px; }
.dz-design__feats span { position: relative; padding-left: 18px; font-size: 0.8125rem; color: var(--fg); }
.dz-design__feats span::before {
  content: ""; position: absolute; left: 2px; top: 0.35em; width: 5px; height: 9px;
  border: solid var(--ok-strong); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.dz-design__demo {
  justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; margin-top: var(--space-1);
  font-size: 0.8125rem; font-weight: 600; color: var(--accent-strong); text-decoration: none;
}
.dz-design__demo::after { content: "\2197"; font-size: 0.875rem; }
.dz-design__demo:hover { text-decoration: underline; }
.dz-blurb { color: var(--fg-2); padding: var(--space-3) var(--space-4); border-radius: var(--r-sm); background: var(--bg-sunken); }
/* The studio looks under the seven designs (cards written by scripts/build-designer-cards.mjs):
   a search and tag chips the script shows, a compact grid of smaller cards that keeps two
   across on a phone, a two-line blurb on each where there's room, and "Show more looks"
   (12 at a time, 8 on a phone). */
.dz-looks { display: grid; gap: var(--space-4); margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--line); }
.dz-looks__head { display: grid; gap: var(--space-1); }
.dz-looks__title { margin: 0; font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.015em; text-wrap: balance; }
.dz-looks__tools { display: grid; gap: var(--space-3); }
.dz-looks__search { position: relative; }
.dz-looks__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dz-looks__search::before {
  content: ""; position: absolute; left: 15px; top: 50%; width: 11px; height: 11px; margin-top: -8px;
  border: 2px solid var(--fg-3); border-radius: 50%; pointer-events: none;
}
.dz-looks__search::after {
  content: ""; position: absolute; left: 26px; top: 50%; width: 6px; height: 2px; margin-top: 4px;
  background: var(--fg-3); border-radius: 2px; transform: rotate(45deg); pointer-events: none;
}
.dz-looks__search input {
  width: 100%; min-height: 46px; padding: 10px 14px 10px 42px; border: 1.5px solid var(--line-strong); border-radius: var(--r-pill);
  background: var(--bg); color: var(--fg); font: inherit; font-size: 1rem;
}
.dz-looks__search input:hover { border-color: var(--fg-3); }
.dz-looks__search input:focus-visible { outline: none; border-color: var(--accent-strong); box-shadow: var(--accent-ring) 0 0 0 4px; }
.dz-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.dz-filter {
  display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 5px 12px;
  border: 1.5px solid var(--line-strong); border-radius: var(--r-pill); background: var(--bg);
  font: inherit; font-size: 0.8125rem; font-weight: 500; color: var(--fg); line-height: 1.2; cursor: pointer;
  transition: border-color var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast);
}
.dz-filter span { font-size: 0.6875rem; font-weight: 600; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.dz-filter:hover { border-color: var(--fg-3); }
.dz-filter[aria-pressed="true"] { border-color: var(--fg); background: var(--fg); color: var(--bg); }
.dz-filter[aria-pressed="true"] span { color: inherit; }
.dz-filter:focus-visible { outline: none; box-shadow: var(--accent-ring) 0 0 0 4px; }
.dz-looks__count { margin: 0; font-size: 0.8125rem; color: var(--fg-2); }
/* Heard, not seen: the no-match box says it on screen. */
.dz-looks__count.is-quiet { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dz-designs--looks { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3); }
.dz-design--look { border-radius: 14px; }
.dz-design--look input { top: 8px; right: 8px; }
.dz-design--look .dz-design__tick { top: 8px; right: 8px; width: 22px; height: 22px; }
.dz-design--look:has(input:checked) .dz-design__tick::after, .dz-design--look.is-on .dz-design__tick::after { left: 7px; top: 4px; width: 5px; height: 10px; }
.dz-design--look .dz-design__body { gap: 4px; padding: 10px 12px 12px; }
.dz-design--look .dz-design__top { flex-wrap: wrap; gap: 4px var(--space-2); }
.dz-design--look .dz-design__name { font-size: 0.9375rem; }
.dz-design--look .dz-swatch { width: 36px; height: 12px; }
.dz-design--look .dz-design__fit { font-size: 0.6875rem; padding: 1px 8px; }
.dz-design--look .dz-design__blurb {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  font-size: 0.8125rem; line-height: 1.4; color: var(--fg-2);
}
.dz-looks__none { margin: 0; padding: var(--space-4); border-radius: var(--r-sm); background: var(--bg-sunken); color: var(--fg-2); font-size: 0.9375rem; }
.dz-looks__clear {
  padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--accent-strong);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.dz-looks__foot { display: flex; justify-content: center; }
.dz-looks__foot:not(:has(:not([hidden]))) { display: none; }
.dz-looks__more { width: auto; min-height: 46px; padding-inline: 22px; border: 1.5px solid var(--line-strong); background: var(--bg); color: var(--fg); }
.dz-looks__more:hover { border-color: var(--fg); background: var(--bg); color: var(--fg); }
.dz-looks__left { font-weight: 500; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.dz-preview { display: grid; gap: 0; min-width: 0; border: 1px solid var(--line-strong); border-radius: 16px; overflow: hidden; background: var(--bg); box-shadow: 0 1px 2px rgba(18, 18, 18, 0.04), 0 12px 32px rgba(18, 18, 18, 0.08); scroll-margin-top: calc(var(--nav-h) + 12px); }
.dz-chrome {
  display: flex; align-items: center; gap: var(--space-3); min-width: 0; padding: 8px 10px 8px 14px;
  background: var(--bg-sunken); border-bottom: 1px solid var(--line);
}
.dz-chrome__dots { display: flex; gap: 6px; flex: none; }
.dz-chrome__dots i { width: 10px; height: 10px; border-radius: 50%; background: #d3d1cd; }
.dz-chrome__dots i:first-child { background: #ec6a5e; }
.dz-chrome__dots i:nth-child(2) { background: #f4be4f; }
.dz-chrome__dots i:nth-child(3) { background: #61c554; }
.dz-chrome__url {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
  border-radius: var(--r-pill); background: var(--bg); border: 1px solid var(--line);
  font: 500 0.8125rem/1 var(--font-sans); color: var(--fg-2);
}
.dz-chrome__url svg { flex: none; width: 12px; height: 12px; color: var(--fg-3); }
.dz-chrome__url span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dz-chrome__open {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px;
  border-radius: var(--r-pill); background: var(--fg); color: var(--bg); text-decoration: none;
  font: 600 0.8125rem/1 var(--font-sans); transition: background var(--dur-fast);
}
.dz-chrome__open:hover { background: #2b2b2b; }
.dz-chrome__open:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.dz-chrome__open svg { width: 12px; height: 12px; }
.dz-tabs, .dz-toggle { display: inline-flex; gap: 2px; padding: 3px; background: var(--bg-sunken); border-radius: var(--r-pill); }
.dz-toggle { flex: none; background: var(--bg); border: 1px solid var(--line); }
.dz-tabs {
  display: flex; gap: 4px; padding: 8px 10px; border-radius: 0; background: var(--bg); border-bottom: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 92%, transparent); mask-image: linear-gradient(to right, #000 92%, transparent);
}
.dz-tabs::-webkit-scrollbar { display: none; }
.dz-tabs button, .dz-toggle button {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  min-height: 34px; padding: 6px 12px; border: 0; border-radius: var(--r-pill); background: transparent;
  font: 500 0.8125rem/1 var(--font-sans); color: var(--fg-2); cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.dz-tabs button:hover, .dz-toggle button:hover { color: var(--fg); background: var(--bg-sunken); }
.dz-toggle button svg { width: 16px; height: 16px; }
.dz-tabs button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.dz-toggle button[aria-pressed="true"] { background: var(--fg); color: var(--bg); box-shadow: 0 1px 2px rgba(18, 18, 18, 0.12); }
.dz-tabs button:focus-visible, .dz-toggle button:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 1px; }
.dz-screen {
  position: relative; overflow: hidden; background: var(--bg-sunken); min-height: 200px;
}
.dz-screen::after {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 40%; background: var(--accent);
  opacity: 0; pointer-events: none;
}
.dz-screen.is-loading::after { opacity: 1; animation: dz-load 1.1s var(--ease-out) infinite; }
@keyframes dz-load { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
.dz-screen--phone, .dz-screen--tablet { display: flex; justify-content: center; padding: var(--space-4) 0; background: linear-gradient(180deg, var(--bg-sunken), #ebeae8); }
.dz-frame { display: block; border: 0; background: var(--bg); }
.dz-screen--phone .dz-frame { height: 600px; max-width: 100%; border-radius: 22px; box-shadow: 0 0 0 7px #1d1d1f, 0 18px 40px rgba(18, 18, 18, 0.22); }
/* The tablet: an iPad portrait frame (834px, narrower when the pane is) in a squarer bezel. */
.dz-screen--tablet .dz-frame { height: 600px; max-width: 100%; border-radius: 16px; box-shadow: 0 0 0 10px #1d1d1f, 0 18px 40px rgba(18, 18, 18, 0.22); }
.dz-screen--computer .dz-frame { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.dz-preview__note { padding: 10px 14px; font-size: 0.75rem; border-top: 1px solid var(--line); background: var(--bg); }
.dz-fallback {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--space-2);
  padding: var(--space-6); text-align: center; background: var(--bg-sunken); font-size: 0.875rem; color: var(--fg-2);
}
.dz-fallback p { margin: 0; }
.dz-fallback b { color: var(--fg); }
/* Step 3: pages as a stepper, add-ons as tappable cards (name, a line, the price),
   the care plan as one more card, hosting and changes as two short lines. */
.dz-pages { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: 14px; background: var(--bg-sunken); }
.dz-pages__words { display: grid; gap: 2px; min-width: 0; }
.dz-pages__words label { font-size: 1rem; font-weight: 700; color: var(--fg); }
.dz-pages__words .qform__hint { font-size: 0.8125rem; }
.dz-qty { flex: none; width: 152px; grid-template-columns: 44px minmax(0, 1fr) 44px; background: var(--bg); }
.dz-qty button { min-height: 44px; font-size: 1.125rem; }
.dz-addons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.dz-addon { position: relative; display: block; min-width: 0; cursor: pointer; }
.dz-addon input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.dz-addon > span {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "desc" "price";
  align-content: start; gap: 4px; height: 100%; padding: 14px 14px 14px 44px;
  border: 1.5px solid var(--line-strong); border-radius: 14px; background: var(--bg);
  transition: border-color var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.dz-addon > span::before {
  content: ""; position: absolute; left: 14px; top: 15px; width: 20px; height: 20px; border-radius: 6px;
  border: 1.5px solid var(--line-strong); background: var(--bg); transition: background var(--dur-fast), border-color var(--dur-fast);
}
.dz-addon > span::after {
  content: ""; position: absolute; left: 21px; top: 18px; width: 5px; height: 10px; opacity: 0;
  border: solid #ffffff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.dz-addon b { grid-area: name; font-size: 0.9375rem; line-height: 1.3; letter-spacing: -0.01em; color: var(--fg); }
.dz-addon small { grid-area: desc; font-size: 0.8125rem; line-height: 1.4; color: var(--fg-2); }
.dz-addon .dz-price { grid-area: price; align-self: end; margin-top: 4px; font-size: 0.875rem; white-space: normal; }
.dz-addon:hover > span { border-color: var(--fg-3); }
.dz-addon input:checked + span { border-color: var(--accent-strong); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent-strong) inset; }
.dz-addon input:checked + span::before { background: var(--accent-strong); border-color: var(--accent-strong); }
.dz-addon input:checked + span::after { opacity: 1; }
.dz-addon input:focus-visible + span { box-shadow: var(--accent-ring) 0 0 0 4px; }
.dz-addon input:active + span { transform: scale(0.985); }
.dz-price { font-style: normal; font-weight: 700; color: var(--fg); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dz-note { margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--r-sm); background: var(--accent-soft); border: 1.5px solid var(--accent); color: var(--fg); font-size: 0.875rem; }
.dz-host { display: grid; gap: var(--space-2); }
.dz-host__line {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin: 0;
  padding: 12px 14px; border-radius: 12px; background: var(--bg-sunken); font-size: 0.9375rem;
}
.dz-host__label { font-weight: 600; color: var(--fg); }
.dz-host__line b { font-variant-numeric: tabular-nums; text-align: right; }
.dz-host__star { margin-left: 1px; color: var(--accent-strong); text-decoration: none; font-weight: 700; }
.dz-host .qform__hint { font-size: 0.8125rem; }
.dz-host .qform__hint a { color: var(--accent-strong); }
.dz-seg--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dz-seg--3 span { min-height: 44px; display: grid; place-items: center; }
.dz-tick { display: flex; align-items: center; gap: var(--space-2); min-height: 40px; font-size: 0.875rem; color: var(--fg-2); cursor: pointer; }
.dz-tick input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--accent-strong); }
/* The contact phone's suggestion: the site phone, one tap away. */
.dz-suggest {
  justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; margin-top: 2px; padding: 6px 12px 6px 10px;
  border: 1.5px solid var(--accent-strong); border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-strong);
  font: 500 0.8125rem/1.2 var(--font-sans); cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast);
}
.dz-suggest b { font-weight: 700; font-variant-numeric: tabular-nums; }
.dz-suggest svg { flex: none; width: 14px; height: 14px; }
.dz-suggest:hover { background: var(--accent-strong); color: #ffffff; }
.dz-suggest:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.dz-suggest[hidden] { display: none; }
.dz-sum { display: grid; gap: var(--space-4); scroll-margin-top: 96px; }
.dz-sum__bar { flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.dz-sum__mini { display: none; gap: var(--space-4); margin-left: auto; font-size: 0.8125rem; color: var(--band-fg-2); font-variant-numeric: tabular-nums; }
.dz-sum__mini b { color: #ffffff; font-size: 1rem; font-weight: 700; }
.dz-sum__toggle {
  display: none; min-height: 34px; padding: 0 14px; border: 1px solid var(--band-line); border-radius: var(--r-pill);
  background: transparent; color: var(--band-fg); font: 600 0.8125rem/1 var(--font-sans); cursor: pointer;
}
.dz-sum__toggle:hover { border-color: var(--band-fg); }
.dz-sum__toggle:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
.dz-sum:focus { outline: none; }
.dz-sum .show__bar { margin-bottom: 0; }
.dz-sum__design { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
.dz-sum__design .dz-swatch { margin: 0; width: 54px; height: 18px; box-shadow: 0 0 0 1px var(--band-line); }
.dz-sum__design b { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; }
.dz-sum__design span:last-child { font-size: 0.8125rem; color: var(--band-fg-2); }
.dz-row { grid-template-columns: minmax(0, 1fr) auto; }
.dz-row span { overflow-wrap: anywhere; }
.dz-row--note, .dz-row--then { grid-template-columns: minmax(0, 1fr); color: var(--band-fg-2); font-size: 0.75rem; }
.dz-rows { display: contents; }
.dz-sum .show__row--total { background: #222; font-size: 0.9375rem; }
.dz-sum .show__row--total span:first-child, .dz-sum .show__row--total i { color: #ffffff; font-weight: 700; }
.dz-sumslot:empty { display: none; }
.dz-sum__market { margin: 0; font-size: 0.8125rem; color: var(--band-fg); }
.dz-sum__fine { margin: 0; font-size: 0.75rem; color: var(--band-fg-2); }
.dz-done { max-width: 60ch; }
.dz-done, .dz-sec [data-pay-step] { scroll-margin-top: calc(var(--nav-h) + 24px); }
.dz-done__next, .dz-done__invite { margin-top: var(--space-6); padding: var(--space-5); }
.dz-done__next p, .dz-done__invite p { margin: 0 0 var(--space-3); }
.dz-done__invite p { margin: 0; }
.dz-done__next ol { margin: 0; padding-left: 1.25em; display: grid; gap: var(--space-2); }
.dz-done__back { margin-top: var(--space-6); }
.dz-send .fo-actions .btn { min-height: 54px; }
.dz-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: var(--space-5);
  padding: var(--space-3) max(var(--gutter), env(safe-area-inset-right)) calc(var(--space-3) + env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
  background: var(--bg); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(18, 18, 18, 0.10);
  transition: transform var(--dur-base) var(--ease-out);
}
.dz-bar.is-away { transform: translateY(110%); }
.dz-bar__fig { display: grid; gap: 2px; }
.dz-bar__fig span { font-size: 0.75rem; color: var(--fg-2); }
.dz-bar__fig b { font-family: var(--font-display); font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.dz-bar__go { justify-self: end; display: flex; gap: var(--space-2); }
.dz-bar__go .btn { min-height: 44px; }
/* Split screen: the steps scroll on the left, the live preview fills the
   window's height on the right, and the price sits under it, folded to one
   line until "Price details" opens it. */
@media (min-width: 1024px) {
  .dz { grid-template-columns: minmax(400px, 0.8fr) minmax(0, 1.2fr); gap: var(--space-8); }
  .dz-aside {
    position: sticky; top: calc(var(--nav-h) + 12px); display: flex; flex-direction: column; gap: var(--space-3);
    height: calc(100vh - var(--nav-h) - 24px); height: calc(100dvh - var(--nav-h) - 24px); min-height: 560px;
  }
  .dz-aside [data-preview-slot="wide"] { flex: 1 1 auto; min-height: 0; display: flex; }
  .dz-aside .dz-preview { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .dz-aside .dz-screen { flex: 1 1 auto; min-height: 0; }
  .dz-aside .dz-screen--phone, .dz-aside .dz-screen--tablet { padding: var(--space-4) 0; align-items: flex-start; }
  .dz-aside [data-summary-slot="wide"] { flex: none; max-height: 46%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; border-radius: var(--r-md); }
  .dz-aside .dz-sum { padding: var(--space-4) var(--space-5); gap: var(--space-3); border-radius: var(--r-md); }
  .dz-aside .dz-sum__toggle { margin-left: auto; }
  .dz-aside .dz-sum.is-folded .dz-sum__toggle { margin-left: 0; }
  .dz-aside .dz-sum__mini, .dz-aside .dz-sum__toggle { display: inline-flex; align-items: center; }
  .dz-aside .dz-sum.is-folded .dz-sum__design, .dz-aside .dz-sum.is-folded .show__rows,
  .dz-aside .dz-sum.is-folded .dz-sum__market, .dz-aside .dz-sum.is-folded .dz-sum__fine { display: none; }
  .dz-aside .dz-sum:not(.is-folded) .dz-sum__mini { display: none; }
  .dz-bar { display: none; }
  .dz .fo-step { scroll-margin-top: calc(var(--nav-h) + 16px); }
}
@media (min-width: 1024px) and (max-height: 760px) {
  .dz-aside .dz-preview__note { display: none; }
}
/* Wider screens (owner, 2026-11-04: PC-first): the steps keep a readable column and the
   preview takes the rest, at least half the window from 1280 up (about 55% at 1280, 57%
   at 1440 and 1920, 61% at 2560, where the pane passes 1280px and the desktop frame is
   drawn at the pane's own width). The studio looks' cards grow as well as multiply. */
@media (min-width: 1440px) {
  .dz { grid-template-columns: minmax(480px, 0.75fr) minmax(0, 1.25fr); }
  .dz-designs--looks { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
}
@media (min-width: 1920px) {
  .dz { grid-template-columns: minmax(560px, 680px) minmax(0, 1fr); }
}
@media (max-width: 1023px) {
  body:has([data-sumbar]:not([hidden])) .foot { padding-bottom: calc(var(--space-16) + 72px); }
}
@media (max-width: 720px) {
  .dz .fo-step { padding: var(--space-5) var(--space-4); }
  .dz-designs { gap: var(--space-3); }
  .dz-design__body { padding: var(--space-3); }
  .dz-chrome { flex-wrap: wrap; padding: 8px 10px; gap: var(--space-2); }
  .dz-chrome__dots { display: none; }
  .dz-chrome__url { order: 3; flex-basis: 100%; height: 30px; }
  .dz-chrome__open { margin-left: auto; }
  .dz-toggle button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .dz-screen--phone .dz-frame, .dz-screen--tablet .dz-frame { height: 540px; }
  .dz-chip span { padding: 9px 14px; font-size: 0.875rem; }
  .dz-step__title { font-size: 1.3125rem; }
  .dz-steps a { font-size: 0.75rem; }
  .dz-steps__n { width: 30px; height: 30px; }
  .dz-steps__i { width: 16px; height: 16px; }
  .dz-steps__num { top: -6px; right: -6px; min-width: 16px; height: 16px; padding: 0 3px; line-height: 13px; }
  .dz-steps::before, .dz-steps::after { top: 20px; }
  .dz-steps li.is-done .dz-steps__n::after { left: 9px; top: 4px; }
}
@media (max-width: 560px) {
  /* The looks on a phone: the picture and the name; the chosen one's words show under the grid. */
  .dz-design--look .dz-design__blurb { display: none; }
  .dz-looks { margin-top: var(--space-6); padding-top: var(--space-5); }
  .dz-filters { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--space-4)); padding: 2px var(--space-4) 6px; scrollbar-width: none; overscroll-behavior-x: contain; }
  .dz-filters::-webkit-scrollbar { display: none; }
  .dz-filter { flex: none; }
  /* One add-on a row on a phone: the name and the price side by side, the line under. */
  .dz-addons { grid-template-columns: minmax(0, 1fr); }
  .dz-addon > span { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name price" "desc desc"; column-gap: var(--space-3); }
  .dz-addon .dz-price { align-self: start; margin-top: 1px; text-align: right; max-width: 9em; }
  .dz-step__nav .btn { flex: 1; padding-inline: 14px; }
  .dz-step__nav [data-step-back] { flex: 0 0 auto; }
}
@media (max-width: 420px) {
  .dz-designs { grid-template-columns: minmax(0, 1fr); }
  .dz-design { flex-direction: row; }
  .dz-design__shot { flex: none; width: 42%; aspect-ratio: auto; border-bottom: 0; border-right: 1px solid var(--line); }
  .dz-design__feats { display: none; }
  .dz-designs--looks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
  .dz-design--look { flex-direction: column; }
  .dz-design--look .dz-design__shot { width: auto; aspect-ratio: 8 / 5; border-right: 0; border-bottom: 1px solid var(--line); }
  .dz-bar { gap: var(--space-3); }
  .dz-bar__fig b { font-size: 1.1875rem; }
  .dz-bar__go { gap: 6px; }
  .dz-bar__go .btn { padding: 9px 12px; }
}

/* The step strip for a reduced-motion visitor: no ring, no entrance, no fill transition; the
   strip is drawn in its resting style and the fill simply is where it is. */
@media (prefers-reduced-motion: reduce) {
  .dz-steps, .dz-steps::before, .dz-steps::after, .dz-steps *, .dz-steps *::before, .dz-steps *::after { animation: none !important; transition: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .dz-screen.is-loading::after { animation: none; }
  .is-wizard .dz-step.is-current { animation: none; }
  .dz-addon input:active + span { transform: none; }
  .dz-design:hover .dz-design__shot img { transform: none; }
}

/* ---- The build reveal: step 4 opens on their site going up ----
   website-designer.js fills [data-reveal] (hidden in the markup, so with JS off
   there is nothing here) when step 3 moves on to step 4: a little browser
   window in their palette with their business name, built from the ground up
   (footer, sections, hero), a hammer tapping each block in, a wrench on the
   sections, a paintbrush sweeping their colours across the grey primer and a
   crane lowering the nav on as the roof; then it settles. About 3.6 s. Every
   element's resting style is the finished site, so .is-done (Skip, the end, a
   reduced-motion visitor) just switches the animations off. --b / --a / --p
   are the palette's band, accent and paper, --bi / --ai / --pi the ink on
   each. Decorative only (aria-hidden); the caption is the aria-live part.
   --warn is a fill here (the crane, the hammer's handle, sparks), never text. */
.dz-reveal { position: relative; display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-sunken); overflow: hidden; }
.dz-build { --b: var(--fg); --a: var(--accent); --p: var(--bg); --bi: var(--bg); --ai: var(--fg-on-accent); --pi: var(--fg); position: relative; padding: 54px 0 0; transition: padding-top 0.45s var(--ease-out); }
.dz-reveal.is-done .dz-build { padding-top: 8px; }
.dz-build__site {
  position: relative; z-index: 1; max-width: 440px; margin: 0 auto; border: 1px solid var(--line-strong); border-radius: 12px;
  background: var(--bg); overflow: visible; box-shadow: 0 1px 2px rgba(18, 18, 18, 0.05), 0 14px 30px rgba(18, 18, 18, 0.10);
}
.dz-build__bar { display: flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-bottom: 1px solid var(--line); border-radius: 12px 12px 0 0; background: var(--bg-raised); }
.dz-build__bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); }
.dz-build__url { flex: 1; min-width: 0; margin-left: 8px; height: 14px; padding: 0 8px; border-radius: var(--r-pill); background: var(--bg-sunken); color: var(--fg-3); font-size: 9px; line-height: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dz-build__screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 0 0 11px 11px; container-type: inline-size; background: var(--bg-sunken); }
.dz-build__copy { position: absolute; inset: 0; }
.dz-build__copy--primer { filter: grayscale(1) contrast(0.55) brightness(1.3); }
.dz-build__copy--paint { clip-path: inset(0 0 0 0); }
.dz-build__l { position: absolute; left: 0; right: 0; overflow: hidden; }
.dz-build__l--nav { top: 0; height: 13%; display: flex; align-items: center; gap: 3.5cqw; padding: 0 4cqw; background: var(--b); color: var(--bi); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12); z-index: 2; }
.dz-build__l--nav b { margin-right: auto; font-family: var(--font-display); font-size: 3.4cqw; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 48%; }
.dz-build__l--nav span { width: 7cqw; height: 1.1cqw; border-radius: 9px; background: currentColor; opacity: 0.45; }
.dz-build__l--nav em { width: 13cqw; height: 4.6cqw; border-radius: 9px; background: var(--a); }
.dz-build__l--hero {
  top: 13%; height: 45%; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: 5cqw; padding: 0 6cqw;
  background: var(--b); background: linear-gradient(120deg, var(--b) 0%, var(--b) 55%, color-mix(in srgb, var(--b) 78%, var(--a)) 100%); color: var(--bi);
}
.dz-build__hero-words { display: grid; gap: 1.4cqw; min-width: 0; }
.dz-build__hero-words small { font-size: 2.1cqw; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dz-build__hero-words strong { font-family: var(--font-display); font-size: 5.2cqw; font-weight: 600; line-height: 1.04; letter-spacing: -0.02em; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dz-build__hero-words span { display: block; height: 1cqw; width: 70%; border-radius: 9px; background: currentColor; opacity: 0.35; }
.dz-build__hero-words em { justify-self: start; margin-top: 0.6cqw; padding: 1.2cqw 3cqw; border-radius: 99px; background: var(--a); color: var(--ai); font-size: 2.3cqw; font-style: normal; font-weight: 700; white-space: nowrap; }
.dz-build__hero-pic { height: 72%; border-radius: 2.4cqw; background: var(--a); background: linear-gradient(150deg, color-mix(in srgb, var(--a) 85%, #ffffff) 0%, var(--a) 60%, color-mix(in srgb, var(--a) 70%, var(--b)) 100%); box-shadow: 0 2cqw 4cqw rgba(0, 0, 0, 0.22); }
.dz-build__l--cards { top: 58%; height: 30%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; gap: 3cqw; padding: 0 6cqw; background: var(--p); color: var(--pi); }
.dz-build__l--cards i { display: grid; gap: 1.4cqw; align-content: start; height: 70%; padding: 2.4cqw; border-radius: 1.6cqw; background: var(--p); box-shadow: 0 0 0 1px rgba(127, 127, 127, 0.25), 0 1cqw 2.4cqw rgba(0, 0, 0, 0.08); }
.dz-build__l--cards i::before { content: ""; width: 4.4cqw; height: 4.4cqw; border-radius: 50%; background: var(--a); }
.dz-build__l--cards i::after { content: ""; height: 1.1cqw; width: 85%; border-radius: 9px; background: currentColor; opacity: 0.3; box-shadow: 0 2.4cqw 0 currentColor; }
.dz-build__l--foot { top: 88%; height: 12%; display: flex; align-items: center; gap: 3cqw; padding: 0 6cqw; background: var(--b); background: color-mix(in srgb, var(--b) 88%, #000000); color: var(--bi); }
.dz-build__l--foot span { height: 1.1cqw; width: 12cqw; border-radius: 9px; background: currentColor; opacity: 0.35; }
.dz-build__l--foot span:first-child { width: 20cqw; opacity: 0.6; }
.dz-build__ground { height: 3px; margin: 10px auto 0; max-width: 520px; border-radius: 3px; background: var(--line-strong); }

/* The tower crane: a lattice mast behind the site, a jib over its middle, a trolley and a cable. */
.dz-build__crane { position: absolute; top: 0; left: 0; right: 0; bottom: 13px; pointer-events: none; }
.dz-build__mast { position: absolute; top: 6px; bottom: 0; right: 9%; width: 12px; background: var(--warn); background: repeating-linear-gradient(45deg, var(--warn) 0 3px, transparent 3px 7px), repeating-linear-gradient(-45deg, var(--warn) 0 3px, transparent 3px 7px); box-shadow: inset 2px 0 0 var(--warn), inset -2px 0 0 var(--warn); }
.dz-build__mast::before { content: ""; position: absolute; top: -6px; left: 1px; border: 5px solid transparent; border-bottom: 6px solid var(--warn); border-top: 0; }
.dz-build__jib { position: absolute; top: 14px; left: calc(50% - 14px); right: calc(9% - 20px); height: 7px; background: var(--warn); background: repeating-linear-gradient(90deg, var(--warn) 0 2px, transparent 2px 8px), linear-gradient(var(--warn) 0 2px, transparent 2px 5px, var(--warn) 5px); }
.dz-build__cab { position: absolute; top: 21px; right: calc(9% - 6px); width: 18px; height: 12px; border-radius: 2px; background: var(--fg); }
.dz-build__cab::after { content: ""; position: absolute; top: 3px; left: 3px; width: 8px; height: 5px; border-radius: 1px; background: var(--accent); }
.dz-build__trolley { position: absolute; top: 20px; left: calc(50% - 7px); width: 14px; height: 6px; border-radius: 2px; background: var(--fg); }
.dz-build__cable { position: absolute; top: 26px; left: calc(50% - 1px); width: 2px; height: 0; background: var(--fg-2); transform-origin: top; }
.dz-build__cable::after { content: ""; position: absolute; bottom: -7px; left: -4px; width: 10px; height: 8px; border: 2px solid var(--fg); border-top: 0; border-radius: 0 0 6px 6px; }

/* The tools sit over the screen; their resting state is gone. */
.dz-build__tools { position: absolute; top: 24px; left: 0; right: 0; bottom: 0; z-index: 3; pointer-events: none; }
.dz-build__tool { position: absolute; opacity: 0; }
.dz-build__tool svg { display: block; width: 100%; height: 100%; overflow: visible; }
.dz-build__hammer { right: -16px; top: 84%; width: 44px; height: 44px; margin-top: -30px; }
.dz-build__hammer svg { transform-origin: 70% 92%; }
.dz-build__wrench { left: -14px; top: 66%; width: 34px; height: 34px; margin-top: -17px; }
.dz-build__wrench svg { transform-origin: 30% 30%; }
.dz-build__brush { left: 0; top: 30%; width: 64px; height: 64px; margin: -40px 0 0 -18px; }
.dz-build__spark { position: absolute; right: 18px; width: 22px; height: 22px; margin-top: -11px; opacity: 0; }
.dz-build__spark svg { display: block; width: 100%; height: 100%; }
.dz-build__spark--1 { top: 93%; }
.dz-build__spark--2 { top: 72%; }
.dz-build__spark--3 { top: 44%; }

.dz-reveal__foot { display: flex; align-items: center; gap: var(--space-3); min-height: 36px; }
.dz-reveal__cap { flex: 1; min-width: 0; margin: 0; font-weight: 600; color: var(--fg); text-wrap: balance; }
.dz-reveal__cap::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--accent); vertical-align: 1px; }
.dz-reveal.is-done .dz-reveal__cap::before { background: var(--ok); }
.dz-reveal__skip { flex: none; min-height: 36px; padding: 6px 14px; border: 1.5px solid var(--line-strong); border-radius: var(--r-pill); background: var(--bg); color: var(--fg); font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer; }
.dz-reveal__skip:hover { border-color: var(--fg); }
.dz-reveal__skip:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }

/* The play: delays from one start, all in seconds. */
.dz-reveal.is-playing .dz-build__ground { animation: dz-b-ground 0.45s var(--ease-out) both; transform-origin: center; }
.dz-reveal.is-playing .dz-build__site { animation: dz-b-site 0.35s var(--ease-out) both, dz-b-pop 0.5s var(--ease-out) 3.15s; }
.dz-reveal.is-playing .dz-build__l--foot { animation: dz-b-drop 0.38s cubic-bezier(0.3, 0.8, 0.35, 1.25) 0.22s both; }
.dz-reveal.is-playing .dz-build__l--cards { animation: dz-b-drop 0.38s cubic-bezier(0.3, 0.8, 0.35, 1.25) 0.72s both; }
.dz-reveal.is-playing .dz-build__l--hero { animation: dz-b-drop 0.38s cubic-bezier(0.3, 0.8, 0.35, 1.25) 1.22s both; }
.dz-reveal.is-playing .dz-build__l--nav { animation: dz-b-roof 0.42s cubic-bezier(0.25, 0.8, 0.3, 1.15) 2.66s both; }
.dz-reveal.is-playing .dz-build__copy--paint { animation: dz-b-paint 0.8s cubic-bezier(0.45, 0.05, 0.4, 1) 1.72s both; }
.dz-reveal.is-playing .dz-build__crane { animation: dz-b-crane-in 0.4s var(--ease-out) 0.1s both, dz-b-crane-out 0.45s ease-in 3.1s forwards; }
.dz-reveal.is-playing .dz-build__cable { animation: dz-b-cable 0.95s var(--ease-out) 2.4s both; }
.dz-reveal.is-playing .dz-build__hammer { animation: dz-b-hammer 1.75s linear 0.25s both; }
.dz-reveal.is-playing .dz-build__hammer svg { animation: dz-b-swing 1.75s linear 0.25s both; }
.dz-reveal.is-playing .dz-build__wrench { animation: dz-b-wrench 0.7s var(--ease-out) 1.02s both; }
.dz-reveal.is-playing .dz-build__wrench svg { animation: dz-b-twist 0.7s var(--ease-out) 1.02s both; }
.dz-reveal.is-playing .dz-build__brush { animation: dz-b-brush 0.9s cubic-bezier(0.45, 0.05, 0.4, 1) 1.66s both; }
.dz-reveal.is-playing .dz-build__brush svg { animation: dz-b-wiggle 0.3s ease-in-out 1.66s 3 alternate both; }
.dz-reveal.is-playing .dz-build__spark--1 { animation: dz-b-spark 0.42s var(--ease-out) 0.56s both; }
.dz-reveal.is-playing .dz-build__spark--2 { animation: dz-b-spark 0.42s var(--ease-out) 1.06s both; }
.dz-reveal.is-playing .dz-build__spark--3 { animation: dz-b-spark 0.42s var(--ease-out) 1.56s both; }
.dz-reveal.is-done .dz-build__crane { opacity: 0; }

@keyframes dz-b-ground { from { transform: scaleX(0); } to { transform: none; } }
@keyframes dz-b-site { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes dz-b-pop { 0% { transform: none; box-shadow: 0 1px 2px rgba(18, 18, 18, 0.05), 0 14px 30px rgba(18, 18, 18, 0.10); } 40% { transform: scale(1.025); box-shadow: 0 0 0 6px var(--accent-ring), 0 20px 40px rgba(18, 18, 18, 0.14); } 100% { transform: none; box-shadow: 0 1px 2px rgba(18, 18, 18, 0.05), 0 14px 30px rgba(18, 18, 18, 0.10); } }
@keyframes dz-b-drop { 0% { opacity: 0; transform: translateY(-34%); } 55% { opacity: 1; } 78% { transform: translateY(4%); } 100% { opacity: 1; transform: none; } }
@keyframes dz-b-roof { 0% { transform: translateY(-110%); } 80% { transform: translateY(6%); } 100% { transform: none; } }
@keyframes dz-b-paint { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes dz-b-crane-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes dz-b-crane-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(40px); } }
@keyframes dz-b-cable { 0% { height: 0; } 28% { height: 52px; } 72% { height: 52px; } 100% { height: 0; } }
@keyframes dz-b-hammer {
  0% { opacity: 0; top: 84%; } 8% { opacity: 1; top: 84%; } 26% { top: 84%; }
  33% { top: 62%; } 54% { top: 62%; } 61% { top: 34%; } 88% { opacity: 1; top: 34%; } 100% { opacity: 0; top: 26%; }
}
@keyframes dz-b-swing {
  0% { transform: rotate(28deg); } 13% { transform: rotate(28deg); } 19% { transform: rotate(-32deg); } 23% { transform: rotate(6deg); }
  40% { transform: rotate(28deg); } 47% { transform: rotate(-32deg); } 51% { transform: rotate(6deg); }
  69% { transform: rotate(28deg); } 76% { transform: rotate(-32deg); } 80% { transform: rotate(6deg); } 100% { transform: rotate(20deg); }
}
@keyframes dz-b-wrench { 0% { opacity: 0; transform: translateX(-10px); } 20% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes dz-b-twist { 0% { transform: rotate(-40deg); } 30% { transform: rotate(-40deg); } 60% { transform: rotate(25deg); } 75% { transform: rotate(5deg); } 100% { transform: rotate(25deg); } }
@keyframes dz-b-brush { 0% { opacity: 0; left: 0%; top: 34%; } 8% { opacity: 1; } 30% { top: 22%; } 55% { top: 46%; } 80% { top: 28%; } 92% { opacity: 1; } 100% { opacity: 0; left: 100%; top: 36%; } }
@keyframes dz-b-wiggle { from { transform: rotate(-6deg); } to { transform: rotate(8deg); } }
@keyframes dz-b-spark { 0% { opacity: 0; transform: scale(0.3); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.35); } }

/* On the wide split screen the live preview beside the steps rises from the ground with it. */
.dz-preview.is-rising .dz-screen { animation: dz-b-rise 2.9s cubic-bezier(0.5, 0, 0.3, 1) 0.25s both; }
@keyframes dz-b-rise { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }

@media (max-width: 720px) {
  .dz-reveal { padding: var(--space-3); margin-inline: calc(-1 * var(--space-1)); }
  .dz-reveal:not(.is-done) .dz-build { padding-top: 46px; }
  .dz-build__mast { right: 6%; }
  .dz-build__hammer { right: -10px; width: 38px; height: 38px; margin-top: -26px; }
  .dz-build__wrench { left: -8px; }
  .dz-reveal__cap { font-size: 0.9375rem; }
}
@media (min-width: 1440px) {
  /* The wider step column: the little site and its ground grow with it. */
  .dz-build__site { max-width: 560px; }
  .dz-build__ground { max-width: 640px; }
}
@media (prefers-reduced-motion: reduce) {
  .dz-reveal *, .dz-preview.is-rising .dz-screen { animation: none !important; }
}

/* ---------------- Websites page (/websites) ----------------
   The seven trade demos as cards led by a screenshot of the demo's home page in
   a slim browser frame, with "Build this design" and "See the demo" side by
   side under each (two-up on a phone too); the nine add-ons as a card grid; and
   the free hosting footnote that every "Free hosting*" on the page points at.
   The buttons here keep a calm lift on hover rather than the theme's tilt, so a
   row of fourteen buttons doesn't jump about. Tokens only; --warn is never text. */
.demos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.demo {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  background: var(--bg); border: 1px solid var(--line-strong); border-radius: 24px;
  box-shadow: 0 1px 2px rgba(18, 18, 18, 0.04);
  transition: box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.demo:hover { border-color: var(--fg-3); box-shadow: 0 2px 4px rgba(18, 18, 18, 0.04), 0 14px 32px rgba(18, 18, 18, 0.08); }
.demo__shot { margin: 0; padding: var(--space-3) var(--space-3) 0; background: var(--bg-sunken); border-bottom: 1px solid var(--line); }
.demo__chrome {
  display: flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px;
  background: var(--bg); border: 1px solid var(--line); border-bottom: 0; border-radius: 10px 10px 0 0;
}
.demo__chrome i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); }
.demo__chrome span {
  flex: 1; min-width: 0; margin-left: 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font: 500 0.6875rem/1 var(--font-mono); color: var(--fg-3);
}
.demo__shot img {
  display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; object-position: top;
  border: 1px solid var(--line); border-top: 0; background: var(--bg);
}
.demo__body { display: grid; gap: var(--space-2); padding: var(--space-5) var(--space-5) 0; }
.demo__body h3 { margin: 0; font-size: 1.25rem; letter-spacing: -0.02em; text-wrap: balance; }
.demo__body p { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--fg-2); }
.demo__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.demo__body .demo__meta { font-size: 0.8125rem; }
.demo__tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 6px;
  border-radius: var(--r-pill); background: var(--bg-sunken); color: var(--fg); font-weight: 600;
}
.demo__tag i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid; }
.demo__layout { color: var(--fg-3); }
.demo__btns {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2);
  margin-top: auto; padding: var(--space-5);
}
.demo__body + .demo__btns { padding-top: var(--space-5); }
.btn.demo__btn, .addons-foot .btn {
  min-height: 46px; padding: 12px 14px; font-size: 0.9375rem; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.btn.demo__btn.btn--line { border: 1.5px solid var(--line-strong); background: var(--bg); color: var(--fg); }
:where(:root:not([data-theme]), :root[data-theme="clay"]) .btn.demo__btn:hover,
:where(:root:not([data-theme]), :root[data-theme="clay"]) .addons-foot .btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(18, 18, 18, 0.14); }
:where(:root:not([data-theme]), :root[data-theme="clay"]) .btn.demo__btn.btn--accent:hover,
:where(:root:not([data-theme]), :root[data-theme="clay"]) .addons-foot .btn--accent:hover { background: #2b2b2b; }
.btn.demo__btn.btn--line:hover { border-color: var(--fg); background: var(--bg); }
.btn.demo__btn:focus-visible, .addons-foot .btn:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }

.addons-head { margin-top: var(--space-16); }
.addons-head h3 { font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -0.03em; margin: 0; }
.addons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.addon {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: var(--space-4); row-gap: var(--space-1);
  padding: var(--space-5); background: var(--bg); border: 1px solid var(--line-strong); border-radius: 20px;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.addon:hover { border-color: var(--fg-3); }
.addon__ico {
  grid-row: 1 / span 3; display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 12px; background: var(--accent-soft); color: var(--accent-strong);
}
.addon__ico svg { width: 22px; height: 22px; }
.addon__name { margin: 0; font-size: 1rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; }
.addon__blurb { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--fg-2); }
.addon__price {
  justify-self: start; margin: var(--space-3) 0 0; padding: 4px 12px; border-radius: var(--r-pill);
  background: var(--bg-sunken); font-weight: 700; font-size: 0.9375rem; color: var(--fg); font-variant-numeric: tabular-nums;
}
.addons-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4);
  margin-top: var(--space-5); padding: var(--space-5); border-radius: 20px; background: var(--bg-sunken);
}
.addons-foot p { margin: 0; max-width: 60ch; font-size: 0.875rem; }

.fn-ref { margin-left: 1px; color: inherit; text-decoration: none; font-weight: 700; }
.fn-ref:hover { color: var(--accent-strong); }
.tier__terms { margin: var(--space-3) 0 0; font-size: 0.8125rem; }
.tier__terms a { color: var(--accent-strong); }
.show__plate .fn-ref { color: inherit; }
.fn-terms {
  margin-top: var(--space-10); padding: var(--space-6); border-radius: 20px;
  background: var(--bg); border: 1px dashed var(--line-strong); scroll-margin-top: calc(var(--nav-h) + 24px);
}
.fn-terms:target { border-style: solid; border-color: var(--accent-strong); box-shadow: 0 0 0 3px var(--accent-ring); }
.fn-terms__title { margin: 0 0 var(--space-3); }
.fn-terms ul { margin: 0; padding-left: 1.2em; display: grid; gap: var(--space-2); max-width: 75ch; font-size: 0.9375rem; color: var(--fg-2); }
.fn-terms__link { margin: var(--space-4) 0 0; font-size: 0.875rem; color: var(--fg-2); }
.fn-terms__link a { color: var(--accent-strong); }

/* The studio looks (written by scripts/build-designer-cards.mjs): twelve small cards four
   across (three, then two on a phone), each a link into the designer with that look picked,
   and the rest inside a <details> that opens without JavaScript. */
.looks-head { margin-top: var(--space-16); }
.looks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.look { min-width: 0; }
.look__link {
  display: flex; flex-direction: column; height: 100%; overflow: hidden; color: inherit; text-decoration: none;
  background: var(--bg); border: 1px solid var(--line-strong); border-radius: 18px;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.look__link:hover { border-color: var(--fg-3); box-shadow: 0 10px 26px rgba(18, 18, 18, 0.08); }
.look__link:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.look__shot { display: block; aspect-ratio: 8 / 5; overflow: hidden; background: var(--bg-sunken); border-bottom: 1px solid var(--line); }
.look__shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform var(--dur-slow) var(--ease-out); }
.look__link:hover .look__shot img { transform: scale(1.03); }
.look__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px var(--space-2); padding: var(--space-3) var(--space-4) 0; }
.look__name { font-size: 1rem; letter-spacing: -0.015em; }
.look__sw { display: flex; width: 40px; height: 12px; border-radius: var(--r-xs); overflow: hidden; box-shadow: 0 0 0 1px rgba(18, 18, 18, 0.12); }
.look__sw i { flex: 1; }
.look__blurb { padding: 6px var(--space-4) var(--space-4); font-size: 0.8125rem; line-height: 1.45; color: var(--fg-2); }
/* Twelve looks, then "Show more looks" twelve at a time (public/assets/looks-ab.js). With
   JavaScript off every look shows and the button stays hidden. */
.look[hidden], .looks-more[hidden] { display: none; }
.looks-foot { display: flex; justify-content: center; margin-top: var(--space-6); }
.looks-more { width: auto; min-height: 46px; padding-inline: 22px; border: 1.5px solid var(--line-strong); background: var(--bg); color: var(--fg); }
.looks-more:hover { border-color: var(--fg); background: var(--bg); color: var(--fg); }
.looks-more__left { font-weight: 500; color: var(--fg-2); font-variant-numeric: tabular-nums; }
/* Heard, not seen: what the button just added. */
.looks-status { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Seven cards: the one left over at the end of the grid (three-up or two-up)
   runs the full width, its screenshot beside the words, so the grid never ends
   on a lone card. */
@media (max-width: 1099px) {
  .demos, .addons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .looks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 640px) {
  .demo.demo--wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: 1fr 1fr; }
  .demo--wide .demo__shot { grid-row: 1 / span 2; border-bottom: 0; border-right: 1px solid var(--line); padding-bottom: var(--space-3); }
  .demo--wide .demo__shot img { border-bottom: 1px solid var(--line); border-radius: 0 0 6px 6px; }
  .demo--wide .demo__body { align-content: end; padding: var(--space-8) var(--space-8) 0; }
  .demo--wide .demo__body h3 { font-size: 1.5rem; }
  .demo--wide .demo__btns { align-self: start; margin-top: 0; padding: var(--space-6) var(--space-8) var(--space-8); max-width: 480px; }
}
@media (max-width: 639px) {
  .demos, .addons { grid-template-columns: minmax(0, 1fr); }
  .demo__body { padding: var(--space-4) var(--space-4) 0; }
  .demo__btns { padding: var(--space-4); }
  .btn.demo__btn { padding: 12px 8px; font-size: 0.875rem; }
  .addon { padding: var(--space-4); }
  .addons-foot { flex-direction: column; align-items: stretch; }
  .addons-foot .btn { white-space: normal; }
  .fn-terms { padding: var(--space-5) var(--space-4); }
  .looks-head { margin-top: var(--space-12); }
  .looks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .look__link { border-radius: 14px; }
  .look__top { padding: 10px 12px 12px; }
  .look__name { font-size: 0.9375rem; }
  .look__blurb { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .btn.demo__btn:hover, .addons-foot .btn:hover { transform: none; }
  .look__link:hover .look__shot img { transform: none; }
}

/* ---------------- Our work (/websites showcase) ----------------
   One real client site, its laptop and phone screenshots side by side. The
   phone shot overlaps the laptop's corner on wide screens and drops beside it
   on a phone, so nothing ever scrolls sideways. Tokens only. */
.work {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); overflow: hidden;
  background: var(--bg); border: 1px solid var(--line-strong); border-radius: 24px;
  box-shadow: 0 1px 2px rgba(18, 18, 18, 0.04);
}
.work__shots {
  position: relative; margin: 0; padding: var(--space-6) var(--space-12) var(--space-6) var(--space-6);
  background: var(--bg-sunken); border-right: 1px solid var(--line); align-self: stretch;
  display: flex; align-items: center;
}
.work__desk { width: 100%; min-width: 0; }
.work__desk img {
  display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; object-position: top;
  border: 1px solid var(--line); border-top: 0; border-radius: 0 0 6px 6px; background: var(--bg);
}
.work__phone {
  position: absolute; right: var(--space-4); bottom: var(--space-4); width: 24%; height: auto; aspect-ratio: 360 / 779;
  border: 4px solid var(--fg); border-radius: 18px; background: var(--fg);
  box-shadow: 0 12px 28px rgba(18, 18, 18, 0.22);
}
.work__body { display: grid; align-content: center; gap: var(--space-3); padding: var(--space-8); }
.work__body h3 { margin: 0; font-size: 1.5rem; letter-spacing: -0.02em; text-wrap: balance; }
.work__body p { margin: 0; max-width: 60ch; font-size: 0.9375rem; line-height: 1.55; color: var(--fg-2); }
.work__body .demo__meta { font-size: 0.8125rem; }
.work__list { margin: 0; padding-left: 1.1em; list-style: disc; display: grid; gap: 6px; font-size: 0.9375rem; line-height: 1.5; color: var(--fg-2); }
.work__body .work__also { font-size: 0.875rem; color: var(--fg-3); }
.work__btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); padding-top: var(--space-2); max-width: 420px; }
.work__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* More sites we've designed: concept sites for made-up businesses (the line under the heading says so). */
.samples { margin-top: clamp(var(--space-16), 9vw, 128px); padding-top: clamp(var(--space-12), 6vw, var(--space-20)); border-top: 1px solid var(--line); }
.samples__head { margin-bottom: clamp(var(--space-8), 4vw, var(--space-12)); }
.samples__head h3 { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); letter-spacing: -0.025em; text-wrap: balance; }
.samples .demos { gap: clamp(var(--space-6), 2.6vw, 40px); }
/* Two to a row from a laptop up, so each card has room; the seventh runs full width (demo--wide). */
@media (min-width: 1100px) { .samples .demos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 899px) {
  .work { grid-template-columns: minmax(0, 1fr); }
  .work__shots { border-right: 0; border-bottom: 1px solid var(--line); padding: var(--space-4) calc(var(--space-4) + 20%) var(--space-4) var(--space-4); }
  .work__phone { right: var(--space-3); bottom: var(--space-3); width: 26%; border-width: 3px; border-radius: 12px; }
  .work__body { padding: var(--space-5) var(--space-4); }
  .work__btns { max-width: none; }
}

/* ---------------- Text thread (/ai "Manage it by text") ---------------- */

/* Two of the owner's texts and the replies, drawn as a phone's message thread.
   The owner's texts are on the readable accent (--fg-on-accent on
   --accent-strong, 4.70:1), the replies on the sunken grey. */
.sms {
  margin: 0; display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-6); border-radius: var(--r-lg);
  background: var(--bg); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.sms p { margin: 0; max-width: 85%; padding: 10px 14px; border-radius: 18px; font-size: 0.9375rem; line-height: 1.45; }
.sms__me { align-self: flex-end; background: var(--accent-strong); color: var(--fg-on-accent); border-bottom-right-radius: 6px; }
.sms__them { align-self: flex-start; background: var(--bg-sunken); color: var(--fg); border-bottom-left-radius: 6px; }
.sms figcaption { margin-top: var(--space-2); text-align: center; }
.sms .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------- Fleet stock (/phones, /phones/order) ---------------- */

/* A model the desk has stopped selling online, or that has run out under its
   stock or rolling limit (functions/api/phones/_stock.js, /admin?tab=stock):
   greyed, with the high-demand line in the readable danger red. */
.tphone.is-out .tphone__well img, .ophone.is-out .ophone__img { opacity: 0.45; }
.tphone__stock {
  justify-self: start; margin: 4px var(--space-1) 0; padding: 2px 8px; border-radius: var(--r-pill);
  background: var(--bg-sunken); color: var(--warn-strong); font-size: 0.6875rem; font-weight: 600;
}
.tphone__stock--out { color: var(--danger-strong); }
.tstock, .ostock {
  display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--r-sm);
  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); background: color-mix(in srgb, var(--danger) 6%, var(--bg));
}
.tstock p, .ostock p { margin: 0; font-size: 0.875rem; line-height: 1.45; color: var(--fg); }
.tstock a, .ostock a { justify-self: start; color: var(--accent-strong); font-weight: 600; }
.tstock__acts { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.tstock--banner { grid-column: 1 / -1; margin-bottom: var(--space-4); }
.tstock[hidden], .ostock[hidden] { display: none; }
.ostock { margin-top: var(--space-3); }
.odetails .ostock { margin: 0 0 var(--space-3); }
.ophone__stock { grid-column: 1 / -1; margin-top: 4px; font-size: 0.75rem; line-height: 1.4; color: var(--danger-strong); }
.fo-qty button:disabled { opacity: 0.4; cursor: default; }
.fo-qty button:disabled:hover { background: var(--bg-sunken); }
.btn[data-pay]:disabled { opacity: 0.5; cursor: not-allowed; }
@media (max-width: 999px) {
  .tsum .tstock { grid-column: 1 / -1; padding: var(--space-2) var(--space-3); }
}

/* ---- integrations wall (/os) ----
   Each tile carries the app's own logo on a white chip (so a dark logo reads on
   any canvas). Live ones are in full colour; a coming-soon one is greyed out and
   says so in words, never by colour alone. */
.intg__head { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); margin: var(--space-8) 0 var(--space-4); }
.intg { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.intg__item { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); min-width: 0; }
.intg__logo { flex: none; width: 48px; height: 48px; border-radius: 12px; background: #ffffff; border: 1px solid #e6e6e6; display: grid; place-items: center; padding: 8px; }
.intg__logo svg { width: 100%; height: 100%; display: block; }
.intg__logo--none { color: #9a9a9a; border-style: dashed; }
.intg__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.intg__name { font-size: 0.9375rem; color: var(--fg); }
.intg__what { font-size: 0.8125rem; line-height: 1.4; color: var(--fg-2); }
.intg__tag { flex: none; align-self: flex-start; font-size: 0.6875rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--bg-sunken); color: var(--fg-3); border: 1px solid var(--line); white-space: nowrap; }
.intg__tag--live { color: var(--ok-strong); border-color: currentColor; background: transparent; }
.intg__item--soon .intg__logo svg { filter: grayscale(1); opacity: 0.45; }
.intg__item--soon .intg__name { color: var(--fg-2); }
@media (max-width: 999px) { .intg { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .intg { grid-template-columns: minmax(0, 1fr); } }

/* ---------------- Aphileon OS page (/os) ----------------
   Product first, in Pop Site's look: white, black type set big and tight, pill
   buttons, a wash of blue behind the hero, and the OS itself on a laptop and a
   phone. Everything is scoped to .os, so no other page moves. The screens
   are public/assets/os/*.webp, drawn with a made-up business by
   scripts/build-os-screens.mjs (never edit the images by hand). */
.os {
  --os-ink: #0a0a0a; --os-char: #171717; --os-granite: #5e5e5e; --os-slate: #6e6e73;
  --os-mist: #d2d2d7; --os-rule: #ececf0; --os-wash: #e3eeff; --os-grey: #f5f5f7;
  --os-blue: #2563eb; --os-blue-hover: #1d4ed8; --os-night: #0b1220;
  color: var(--os-char);
}
.os a { text-underline-offset: 3px; }
.os-sec { padding: clamp(64px, 9vw, 112px) 0; }
.os-sec--grey { background: var(--os-grey); }
.os-sec--top0 { padding-top: 0; }
.os-head { text-align: center; max-width: 900px; margin: 0 auto clamp(36px, 5vw, 56px); }
.os-head p { font-size: clamp(1rem, 1.4vw, 1.1875rem); line-height: 1.5; color: var(--os-granite); margin: 20px auto 0; max-width: 640px; text-wrap: balance; }
.os-eyebrow { display: block; font-size: 13.5px; color: var(--os-slate); margin-bottom: 14px; }
.os-xl, .os-display, .os-h, .os-case__name, .os-steps__n {
  font-family: var(--font-sans); font-weight: 700; color: var(--os-ink); text-wrap: balance;
}
.os-xl { font-size: clamp(3rem, 9vw, 7.5rem); line-height: 0.92; letter-spacing: -0.058em; margin: 28px auto 24px; max-width: 1050px; }
.os-display { font-size: clamp(2.5rem, 6.4vw, 5.25rem); line-height: 1; letter-spacing: -0.05em; }
.os-h { font-size: clamp(2rem, 4vw, 3.3rem); line-height: 1.05; letter-spacing: -0.045em; }
.os-sub { font-size: clamp(1.0625rem, 1.6vw, 1.3125rem); line-height: 1.4; letter-spacing: -0.02em; color: var(--os-granite); max-width: 650px; margin: 0 auto; text-wrap: balance; }
.os-lede { font-size: 17px; line-height: 1.5; color: var(--os-granite); margin-top: 16px; max-width: 54ch; }
.os-note { margin-top: 22px; font-size: 14.5px; color: var(--os-granite); }
.os-note a { color: var(--os-blue); font-weight: 500; }
.os-note--c { text-align: center; margin-top: 32px; }
.os-cap { text-align: center; font-size: 12.5px; color: var(--os-slate); margin: 18px 0 0; }

.os-btn {
  display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 26px;
  border-radius: 999px; font: 500 15px/1 var(--font-sans); text-decoration: none; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.os-btn--blue { background: var(--os-blue); color: #ffffff; }
.os-btn--blue:hover { background: var(--os-blue-hover); }
.os-btn--ghost { background: #ffffff; color: var(--os-char); border: 1px solid var(--os-char); }
.os-btn--ghost:hover { background: var(--os-grey); }
.os-cta-row { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 34px; }

/* hero: the line, then the OS on a laptop with a phone in front */
.os-hero { position: relative; text-align: center; padding: 64px 0 clamp(48px, 7vw, 88px); overflow: hidden; isolation: isolate; }
.os-hero::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 900px; z-index: -1;
  background: radial-gradient(60% 55% at 50% 0%, var(--os-wash) 0%, rgba(227, 238, 255, 0.45) 45%, rgba(255, 255, 255, 0) 100%);
}
.os-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; padding: 7px 14px; border: 1px solid var(--os-mist); border-radius: 999px; background: #ffffff; color: var(--os-char); }
.os-badge b { font-weight: 700; color: var(--os-ink); letter-spacing: -0.01em; }
.os-badge i { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; }
.os-trust { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 24px; margin-top: 22px; font-size: 14px; color: var(--os-granite); }
.os-trust li { display: inline-flex; align-items: center; gap: 7px; }
.os-trust li::before {
  content: ""; width: 16px; height: 16px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%232563eb'/%3E%3Cpath d='M4.6 8.2l2.2 2.2 4.6-4.8' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
}
.os-stage { display: grid; align-items: end; width: min(1080px, calc(100% - 48px)); margin: 64px auto 0; }
.os-laptop, .os-phone { grid-area: 1 / 1; margin: 0; }
.os-laptop { width: 84%; justify-self: start; margin-left: 4%; animation: os-rise 1s var(--ease-out) both; }
.os-laptop__lid {
  position: relative; padding: 2.1% 2.1% 2.5%; background: #0b0b0c; border-radius: 20px 20px 6px 6px;
  box-shadow: inset 0 0 0 1.5px #3a3a3d, 0 0 0 1.5px #c9cacf, 0 40px 70px -30px rgba(15, 23, 42, 0.45);
}
.os-laptop__lid::before { content: ""; position: absolute; top: 0.85%; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #26262a; }
.os-laptop__lid img { width: 100%; height: auto; border-radius: 3px; }
.os-laptop__base {
  position: relative; height: clamp(9px, 1.6vw, 18px); margin: 0 -6%;
  background: linear-gradient(#e7e8eb, #b9bbc0 62%, #8e9095); border-radius: 2px 2px 16px 16px / 2px 2px 100% 100%;
  box-shadow: 0 18px 30px -16px rgba(15, 23, 42, 0.5);
}
.os-laptop__base::before { content: ""; position: absolute; top: 0; left: 50%; width: 15%; height: 40%; transform: translateX(-50%); background: linear-gradient(#bfc1c6, #d9dadd); border-radius: 0 0 10px 10px; }
.os-phone {
  position: relative; justify-self: end; width: 23%; padding: 3px; container-type: inline-size;
  border-radius: 18% / 8.4%; animation: os-rise 1s var(--ease-out) 0.18s both;
  background: linear-gradient(135deg, #d9dade 0%, #8f9196 14%, #eceded 30%, #7c7e83 48%, #c4c5c9 64%, #86888d 82%, #dcdde0 100%);
  box-shadow: 0 34px 60px -22px rgba(15, 23, 42, 0.45), 0 14px 26px -14px rgba(15, 23, 42, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}
.os-phone::before, .os-phone::after { content: ""; position: absolute; width: 3px; background: #9a9ca1; }
.os-phone::before { right: -2px; top: 26%; height: 11%; border-radius: 0 2px 2px 0; }
.os-phone::after { left: -2px; top: 19%; height: 17%; border-radius: 2px 0 0 2px; background: linear-gradient(#9a9ca1 0 42%, transparent 42% 58%, #9a9ca1 58%); }
.os-phone__scr { position: relative; overflow: hidden; background: #ffffff; border: 3.4cqw solid #050505; border-radius: 15.5cqw; box-shadow: 0 0 0 1px #2c2c2e; }
.os-phone__scr::before { content: ""; position: absolute; z-index: 2; top: 2.7cqw; left: 50%; width: 29cqw; height: 8.4cqw; transform: translateX(-50%); border-radius: 99px; background: #000000; }
.os-phone__scr::after { content: ""; position: absolute; left: 50%; bottom: 2.2cqw; width: 34cqw; height: 1.3cqw; transform: translateX(-50%); border-radius: 9px; background: rgba(0, 0, 0, 0.8); }
.os-sb { display: flex; align-items: center; justify-content: space-between; height: 12.4cqw; padding: 0 7.5cqw 0 10cqw; font: 600 4.1cqw/1 var(--font-sans); letter-spacing: -0.01em; color: #000000; background: #ffffff; }
.os-sb i {
  width: 17cqw; height: 3.1cqw;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 11'%3E%3Crect y='7' width='3' height='4' rx='1'/%3E%3Crect x='5' y='5' width='3' height='6' rx='1'/%3E%3Crect x='10' y='2.5' width='3' height='8.5' rx='1'/%3E%3Crect x='15' width='3' height='11' rx='1'/%3E%3Cpath d='M29 2c2 0 3.8.8 5.2 2.1l1-1A8.7 8.7 0 0 0 29 .5a8.7 8.7 0 0 0-6.2 2.6l1 1A7.3 7.3 0 0 1 29 2zm0 3c1.2 0 2.3.5 3.1 1.2l1-1A6 6 0 0 0 29 3.5a6 6 0 0 0-4.1 1.7l1 1C26.7 5.5 27.8 5 29 5zm0 3c-.5 0-1 .2-1.3.5L29 10l1.3-1.5c-.3-.3-.8-.5-1.3-.5z'/%3E%3Crect x='39.5' y='.5' width='20' height='10' rx='3' fill='none' stroke='%23000' opacity='.4'/%3E%3Crect x='41' y='2' width='15' height='7' rx='1.8'/%3E%3C/svg%3E") no-repeat right center/contain;
}
.os-phone__scr img { width: 100%; height: auto; }
@keyframes os-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

/* Tecon HQ, the proof */
.os-case { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.os-case__card { position: relative; overflow: hidden; isolation: isolate; background: var(--os-night); color: #e7ecf5; border-radius: 28px; padding: clamp(28px, 4vw, 48px); }
.os-case__card::after { content: ""; position: absolute; z-index: -1; right: -30%; top: -40%; width: 90%; height: 90%; background: radial-gradient(closest-side, rgba(37, 99, 235, 0.45), rgba(37, 99, 235, 0)); }
.os-case__kicker { font-size: 13.5px; color: #a9bce0; }
.os-case__name { color: #ffffff; font-size: clamp(3rem, 6vw, 4.75rem); line-height: 1; letter-spacing: -0.055em; margin: 14px 0 16px; }
.os-case__lede { color: #c9d3e3; font-size: 17px; line-height: 1.45; max-width: 34ch; }
.os-case__facts { margin: 32px 0 0; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.os-case__facts div { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); font-size: 14.5px; line-height: 1.4; }
.os-case__facts dt { color: #a9bce0; flex: none; }
.os-case__facts dd { margin: 0; color: #ffffff; font-weight: 500; text-align: right; }
.os-tl { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--os-char); counter-reset: os-tl; }
.os-tl li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 15px 0; border-bottom: 1px solid var(--os-mist); font-size: 15.5px; line-height: 1.5; color: var(--os-granite); counter-increment: os-tl; }
.os-tl li::before { content: counter(os-tl, decimal-leading-zero); font-weight: 700; color: var(--os-ink); font-variant-numeric: tabular-nums; }
.os-tl b { color: var(--os-ink); font-weight: 600; }

/* the screens, as tabs once the script runs (every screen shows without it) */
.os-chips { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.os-chips[hidden] { display: none; }
.os-chip { font: 500 14px/1 var(--font-sans); padding: 11px 17px; border-radius: 999px; border: 1px solid var(--os-mist); background: #ffffff; color: var(--os-char); cursor: pointer; white-space: nowrap; }
.os-chip:hover { border-color: var(--os-char); }
.os-chip[aria-selected="true"] { background: var(--os-char); border-color: var(--os-char); color: #ffffff; }
.os-panel { background: var(--os-grey); border-radius: 28px; padding: clamp(20px, 4vw, 44px) clamp(12px, 4vw, 48px) 0; overflow: hidden; }
.os-scr { margin: 0; }
.os-scr + .os-scr { margin-top: 44px; }
.os-scr[hidden] { display: none; }
.os-tour.is-on .os-scr { margin-top: 0; }
.os-scr figcaption { max-width: 640px; margin: 0 auto 24px; text-align: center; font-size: 15.5px; line-height: 1.5; color: var(--os-granite); text-wrap: balance; }
.os-scr figcaption b { color: var(--os-ink); font-weight: 600; }
.os-scr figcaption a { color: var(--os-blue); }
.os-browser { max-width: 1040px; margin: 0 auto; overflow: hidden; background: #ffffff; border: 1px solid var(--os-mist); border-bottom: 0; border-radius: 16px 16px 0 0; box-shadow: 0 30px 60px -30px rgba(15, 23, 42, 0.35); }
.os-browser__bar { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 16px; border-bottom: 1px solid var(--os-rule); background: #fafafa; }
.os-browser__bar i { width: 11px; height: 11px; border-radius: 50%; background: #dedee3; }
.os-browser img { width: 100%; height: auto; }
.os-subhead { font-family: var(--font-sans); font-weight: 700; font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -0.04em; color: var(--os-ink); margin: clamp(56px, 7vw, 88px) 0 22px; }
.os-parts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; border-top: 1px solid var(--os-char); }
.os-parts li { display: flex; flex-direction: column; gap: 4px; padding: 18px 0; border-bottom: 1px solid var(--os-mist); }
.os-parts b { font-size: 16.5px; font-weight: 600; letter-spacing: -0.02em; color: var(--os-ink); }
.os-parts span { font-size: 14.5px; line-height: 1.5; color: var(--os-granite); }
.os-parts a { color: var(--os-blue); }

/* alongside Xero: the two systems and what passes between them */
.os-flow { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.os-node { border: 1px solid var(--os-char); border-radius: 24px; padding: clamp(22px, 3vw, 32px); background: #ffffff; text-align: left; }
.os-node--os { background: var(--os-night); border-color: var(--os-night); color: #c9d3e3; }
.os-node__mark { display: grid; place-items: center; width: 54px; height: 54px; padding: 11px; border-radius: 14px; background: #ffffff; border: 1px solid var(--os-rule); }
.os-node__mark svg { width: 100%; height: 100%; }
.os-node__name { display: block; margin: 16px 0 10px; font-size: 26px; font-weight: 700; letter-spacing: -0.04em; color: var(--os-ink); }
.os-node--os .os-node__name { color: #ffffff; }
.os-node li { padding: 9px 0; border-top: 1px solid var(--os-rule); font-size: 14.5px; line-height: 1.4; }
.os-node--os li { border-color: rgba(255, 255, 255, 0.12); }
.os-flow__links { display: grid; gap: 26px; padding: 0 clamp(14px, 2.4vw, 32px); }
.os-link { position: relative; text-align: center; padding-bottom: 20px; }
.os-link b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; color: var(--os-ink); }
.os-link span { font-size: 13.5px; line-height: 1.4; color: var(--os-granite); }
.os-link::after {
  content: ""; position: absolute; left: 0; right: 3px; bottom: 5px; height: 2px;
  background: repeating-linear-gradient(90deg, var(--os-blue) 0 10px, transparent 10px 16px); background-size: 16px 2px;
  animation: os-dash 0.9s linear infinite;
}
.os-link::before { content: ""; position: absolute; right: 1px; bottom: 1px; width: 10px; height: 10px; border-top: 2px solid var(--os-blue); border-right: 2px solid var(--os-blue); transform: rotate(45deg); }
.os-link--back::after { left: 3px; right: 0; animation-direction: reverse; }
.os-link--back::before { right: auto; left: 1px; transform: rotate(-135deg); }
@keyframes os-dash { from { background-position: 0 0; } to { background-position: 16px 0; } }

/* how a build works */
.os-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--os-char); }
.os-steps li { padding: 28px 24px 8px 0; }
.os-steps li + li { padding-left: 24px; border-left: 1px solid var(--os-mist); }
.os-steps__n { display: block; font-size: clamp(2.5rem, 4vw, 3.3rem); line-height: 1; letter-spacing: -0.045em; }
.os-steps h3 { font-family: var(--font-sans); font-size: 20px; font-weight: 600; line-height: 1.25; letter-spacing: -0.03em; color: var(--os-ink); margin: 18px 0 8px; }
.os-steps p { font-size: 15px; line-height: 1.55; color: var(--os-granite); }

.os .faq { border-top-color: var(--os-char); }
.os .faq__q { color: var(--os-ink); }

@media (max-width: 999px) {
  .os-case { grid-template-columns: minmax(0, 1fr); }
  .os-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .os-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .os-steps li, .os-steps li + li { padding: 24px 16px 20px 0; border-left: 0; }
  .os-steps li:nth-child(2n) { padding-left: 16px; border-left: 1px solid var(--os-mist); }
  .os-steps li:nth-child(n+3) { border-top: 1px solid var(--os-mist); }
  .os-flow { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin: 0 auto; }
  .os-flow__links { gap: 30px; padding: 28px 0 28px 22px; }
  .os-link { text-align: left; padding: 2px 0 2px 32px; }
  .os-link::after, .os-link--back::after { left: 4px; right: auto; top: 0; bottom: 3px; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--os-blue) 0 10px, transparent 10px 16px); background-size: 2px 16px; }
  .os-link--back::after { top: 3px; bottom: 0; }
  .os-link::before { left: 0; right: auto; top: auto; bottom: 1px; transform: rotate(135deg); }
  .os-link--back::before { top: 1px; bottom: auto; transform: rotate(-45deg); }
  @keyframes os-dash { from { background-position: 0 0; } to { background-position: 0 16px; } }
}
@media (max-width: 699px) {
  .os-hero { padding-top: 44px; }
  .os-xl { margin: 24px auto 18px; }
  .os-cta-row { flex-direction: column; align-items: center; }
  .os-btn { width: 100%; max-width: 360px; }
  .os-trust { flex-direction: column; align-items: center; gap: 6px; }
  .os-stage { width: calc(100% - 32px); margin-top: 40px; }
  .os-laptop { width: 86%; margin-left: 5%; }
  .os-phone { width: 30%; padding: 2px; }
  .os-chips { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(var(--gutter) * -1) 18px; padding: 0 var(--gutter) 2px; scrollbar-width: none; }
  .os-chips::-webkit-scrollbar { display: none; }
  .os-panel { border-radius: 20px; }
  .os-browser { border-radius: 10px 10px 0 0; }
  .os-browser__bar { height: 24px; gap: 5px; padding: 0 10px; }
  .os-browser__bar i { width: 7px; height: 7px; }
  .os-parts { grid-template-columns: minmax(0, 1fr); }
  .os-case__facts div { flex-direction: column; gap: 2px; }
  .os-case__facts dd { text-align: left; }
  .os-steps h3 { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .os-laptop, .os-phone { animation: none; }
  .os-link::after { animation: none; }
}

/* ---------------- /websites hero, Pop Site style ----------------
   Centred, big tight type on a soft blue wash, pill buttons, a row of
   iPhones showing sites we've designed, then the prices as clean cards. */
.wpop { position: relative; text-align: center; padding: 56px 0 var(--space-16); overflow: hidden; isolation: isolate; }
.wpop::before { content: ""; position: absolute; inset: 0 0 auto; height: 860px; z-index: -1;
  background: radial-gradient(60% 55% at 50% 0%, #e3eeff 0%, rgba(227, 238, 255, .45) 45%, rgba(255, 255, 255, 0) 100%); }
.wpop__badge { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--fg-2); padding: 7px 14px;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--bg); text-decoration: none; }
.wpop__badge b { color: var(--fg); font-weight: 700; letter-spacing: -.2px; }
.wpop__badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.wpop__badge:hover { border-color: var(--fg); }
.wpop__title { font-family: var(--font-sans); font-weight: 700; color: #000; font-size: clamp(52px, 9vw, 118px); line-height: .92;
  letter-spacing: -0.058em; margin: 28px auto 22px; max-width: 11ch; }
.wpop__sub { font-size: clamp(17px, 1.6vw, 21px); line-height: 1.38; letter-spacing: -.3px; color: var(--fg-2); max-width: 600px; margin: 0 auto; text-wrap: balance; }
.wpop__cta { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 34px; }
.wpop__btn { height: 48px; padding: 0 26px; font-size: 15px; font-weight: 500; }
.wpop__btn--ghost { background: var(--bg); border-color: var(--fg); }
.wpop__btn--ghost:hover { background: var(--bg-sunken); }
.wpop__note { margin-top: 18px; font-size: 14px; color: var(--fg-3); }

.wpop__fan { display: flex; justify-content: center; align-items: flex-end; gap: 28px; margin: 56px auto 0; padding: 0 24px 8px; max-width: 1260px; }
.wpop__ph { position: relative; margin: 0; flex: 0 0 auto; width: 260px; aspect-ratio: 360 / 779; padding: 4px; border-radius: 54px;
  background: linear-gradient(135deg, #d9dade 0%, #8f9196 14%, #eceded 30%, #7c7e83 48%, #c4c5c9 64%, #86888d 82%, #dcdde0 100%);
  box-shadow: 0 34px 60px -22px rgba(15, 23, 42, .4), 0 14px 26px -14px rgba(15, 23, 42, .3), inset 0 0 0 1px rgba(255, 255, 255, .55);
  animation: wpopIn 1.1s cubic-bezier(.22, 1, .36, 1) both; }
.wpop__ph::before { content: ""; position: absolute; left: -3px; top: 104px; width: 3px; height: 140px; border-radius: 2px 0 0 2px;
  background: linear-gradient(#9a9ca1 0 26px, transparent 26px 46px, #9a9ca1 46px 90px, transparent 90px 98px, #9a9ca1 98px 140px); }
.wpop__ph::after { content: ""; position: absolute; right: -3px; top: 160px; width: 3px; height: 74px; border-radius: 0 2px 2px 0; background: #9a9ca1; }
.wpop__scr { position: relative; display: block; height: 100%; overflow: hidden; border: 9px solid #050505; border-radius: 50px; background: #fff; box-shadow: 0 0 0 1px #2c2c2e; }
.wpop__scr::before { content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 84px; height: 24px; border-radius: 20px; background: #000; z-index: 2; }
.wpop__scr img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.wpop__ph--2, .wpop__ph--3 { width: 290px; margin-bottom: 36px; border-radius: 58px; }
.wpop__ph--2 .wpop__scr, .wpop__ph--3 .wpop__scr { border-radius: 54px; }
.wpop__ph--1 { animation-delay: .1s; } .wpop__ph--2 { animation-delay: .2s; }
.wpop__ph--3 { animation-delay: .3s; } .wpop__ph--4 { animation-delay: .4s; }
@keyframes wpopIn { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wpop__ph { animation: none; } }

.wpop__prices { list-style: none; margin: 56px auto 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; text-align: left; }
.wpop__prices li { border: 1px solid var(--fg); border-radius: 22px; padding: 20px 20px 18px; background: var(--bg); }
.wpop__prices b { display: block; font-family: var(--font-sans); font-weight: 700; font-size: 30px; letter-spacing: -1.2px; color: #000; font-variant-numeric: tabular-nums; }
.wpop__prices span { display: block; margin-top: 6px; font-size: 14px; line-height: 1.35; color: var(--fg-2); }

@media (max-width: 1180px) { .wpop__ph--1 { display: none; } .wpop__prices { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .wpop__ph--4 { display: none; } }
@media (max-width: 820px) {
  .wpop { padding: 40px 0 var(--space-12); }
  .wpop__title { margin: 22px auto 16px; letter-spacing: -0.05em; }
  .wpop__cta { flex-direction: column; align-items: stretch; max-width: 360px; margin-left: auto; margin-right: auto; }
  .wpop__fan { gap: 14px; margin-top: 36px; padding: 0 16px 4px; }
  .wpop__ph, .wpop__ph--2, .wpop__ph--3 { width: min(43vw, 190px); border-radius: 34px; padding: 3px; margin-bottom: 0; }
  .wpop__ph--2 { margin-bottom: 22px; }
  .wpop__scr, .wpop__ph--2 .wpop__scr, .wpop__ph--3 .wpop__scr { border-width: 6px; border-radius: 31px; }
  .wpop__scr::before { top: 5px; width: 52px; height: 15px; }
  .wpop__ph::before, .wpop__ph::after { display: none; }
  .wpop__prices { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 40px; gap: 10px; }
  .wpop__prices li { padding: 16px; border-radius: 18px; }
  .wpop__prices li:first-child { grid-column: 1 / -1; }
  .wpop__prices b { font-size: 26px; }
}
.wpop__note b { color: var(--fg); font-weight: 600; }
.wpop__btn--ghost { border-style: solid; }
.wpop__scr { padding-top: 34px; }
.wpop__scr img { height: 100%; }
@media (max-width: 820px) { .wpop__scr { padding-top: 22px; } }