/* Officraft V3 design system — McMaster × Anthropic × Polaris × Linear
 * See DESIGN.md for the spec. This file is the implementation.
 * Two registers share tokens: editorial (home/enterprise/sustainability/about)
 * and utility (catalog/PDP). Both render against the same warm-cream paper.
 */

/* =========================================================================
 * 1. DESIGN TOKENS
 * ========================================================================= */

:root {
  /* Paper (warm-cream surface, warm-tinted neutrals — NOT cool slate) */
  --paper:         oklch(97.5% 0.005 80);   /* #F8F6F2 — page bg */
  --paper-muted:   oklch(45%   0.008 80);   /* #6F6A60 — secondary text */
  --paper-faint:   oklch(94%   0.006 80);   /* #EFEBE2 — alt section bg, hover */
  --paper-line:    oklch(88%   0.006 80);   /* #DDD9D0 — hairline borders */
  --paper-faint-2: oklch(45%   0.008 80);   /* alias, kept for clarity */

  /* Ink (warm-tinted near-black for text + dark sections) */
  --ink:           oklch(18%   0.012 60);   /* #211F1B — primary text */
  --ink-raised:    oklch(24%   0.014 60);   /* #322F28 — dark section bg */
  --ink-line:      oklch(34%   0.012 60);   /* #524E45 — dark hairline */
  --ink-muted:     oklch(58%   0.010 60);   /* #92897C — muted on dark */

  /* Accent — single saturated color, ≤10% surface area */
  --accent:        oklch(64%   0.180 38);   /* #F26B1F — the brand orange */
  --accent-soft:   oklch(85%   0.060 38);   /* tint */
  --accent-deep:   oklch(45%   0.150 38);   /* press state */
  --accent-ink:    oklch(42%   0.145 38);   /* accent used as text on paper (AA 6.3:1) */

  /* Functional, used sparingly, never decorative */
  --positive:      oklch(58%   0.110 152);  /* EU/renewable, in-stock */
  --negative:      oklch(55%   0.160 25);   /* out-of-stock, error */
  --warning:       oklch(72%   0.130 75);   /* low-stock */

  /* Typography — Vercel Geist (free), IBM Plex fallback. No Inter. */
  --font-sans:     "Geist", "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --font-mono:     "Geist Mono", "IBM Plex Mono", ui-monospace, monospace;

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

  /* Radius — flat, sharp, archival */
  --r-0:   0;
  --r-1:   2px;
  --r-2:   4px;
  --r-3:   8px;
  --r-pill: 999px;

  /* Hairlines only — no drop shadows with blur */
  --e-hairline: 1px solid var(--paper-line);
  --e-hairline-dark: 1px solid var(--ink-line);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 400ms;

  /* Z */
  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-toast:   1000;

  /* Header height — the single source of truth for sticky offsets,
     scroll-margin and the mobile panel. Change it in one place. */
  --header-h: 64px;

  /* Opt the page out of UA dark-mode repainting. Without this a phone
     in dark mode can repaint form controls and links in its own blue,
     which showed up as a blue hamburger icon on Android. */
  color-scheme: light;

  /* Alpha variants, so the dark theme can invert them without any
     rule having to know which colour it is painting over. */
  --ink-a45:   oklch(18% 0.012 60 / 0.45);
  --ink-a28:   oklch(18% 0.012 60 / 0.28);
  --ink-a10:   oklch(18% 0.012 60 / 0.1);
  --ink-22:    oklch(22% 0.012 60);
  --ink-26:    oklch(26% 0.02 45);
  --paper-a55: oklch(97.5% 0.005 80 / 0.55);
  --paper-a18: oklch(97.5% 0.005 80 / 0.18);
  --accent-a60: oklch(64% 0.180 38 / 0.6);
  --accent-a20: oklch(64% 0.180 38 / 0.2);
  --accent-88: oklch(88% 0.06 38);
  --accent-95: oklch(95% 0.035 38);
  --positive-a30: oklch(58% 0.110 152 / 0.3);

  /* The page-level surface, used by the theme toggle and the canvas
     backdrop. Kept separate from --paper because the dark theme
     inverts the pair, and a rule that paints "the surface" must not
     care which one it is. */
  --surface: var(--paper);
  --surface-2: var(--paper-faint);
}
@media (max-width: 420px) { :root { --header-h: 56px; } }

/* =========================================================================
 * 2. RESET + BASE
 * ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

/* Anchor targets must clear the sticky header, otherwise a section
   heading lands underneath the bar when you jump to it. */
:target,
section[id],
main > section[id] {
  scroll-margin-top: calc(var(--header-h) + var(--space-6));
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  overflow-x: clip;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01" 1, "cv11" 1;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }

/* Focus — visible orange ring, the only orange on most pages */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Kill the blue tap flash on touch devices — Android Chrome paints a
   translucent blue overlay on the element you touch. */
a,
button,
summary,
[role="button"],
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

/* Skip link */
.skip-to-content {
  position: absolute; top: -100px; left: 16px;
  background: var(--ink); color: var(--paper);
  padding: var(--space-3) var(--space-4);
  text-decoration: none; font-weight: 500;
  z-index: var(--z-toast);
  transition: top var(--dur-base) var(--ease-out);
}
.skip-to-content:focus { top: 16px; }

/* =========================================================================
 * 3. TYPOGRAPHY
 * ========================================================================= */

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 500; letter-spacing: -0.015em; color: var(--ink); }
p { margin: 0; }
a { color: inherit; text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--accent-deep); }
strong { font-weight: 500; }

/* Modular type scale */
.display-xl {
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 300;       /* light weight + tight tracking = designed, not loud */
  color: var(--ink);
}
.display-lg {
  font-size: clamp(2rem, 4vw, 2.875rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  font-weight: 400;
}
.h1    { font-size: clamp(1.375rem, 2.4vw, 1.75rem); line-height: 1.15; letter-spacing: -0.015em; font-weight: 500; }
.h2    { font-size: clamp(1.125rem, 1.8vw, 1.375rem); line-height: 1.2; font-weight: 500; }
.h3    { font-size: 1rem; line-height: 1.3; font-weight: 500; }
.body  { font-size: 1rem; line-height: 1.55; }
.small { font-size: 0.875rem; line-height: 1.5; }

.mono-data {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.mono-data--lg {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* Micro-label — section eyebrow, CO2e unit, SKU prefix. Used sparingly. */
.micro-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--paper-muted);
}
.micro-label--accent { color: var(--accent-ink); }

/* Body prose — for editorial long-form */
.prose {
  max-width: 65ch;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
}
.prose p + p { margin-top: var(--space-4); }
.prose strong { color: var(--ink); }
.prose a {
  text-decoration: underline;
  text-decoration-color: var(--paper-line);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.prose a:hover { text-decoration-color: var(--accent); color: var(--accent-deep); }

.muted   { color: var(--paper-muted); }
.accent  { color: var(--accent); }

/* =========================================================================
 * 4. LAYOUT
 * ========================================================================= */

.container { max-width: 1280px; margin: 0 auto; padding: 0 var(--space-5); }
@media (min-width: 768px)  { .container { padding: 0 var(--space-8); } }
@media (min-width: 1280px) { .container { padding: 0 var(--space-10); } }

.container--narrow { max-width: 920px; }

main { display: block; }

section { padding: var(--space-12) 0; }
section.tight { padding: var(--space-10) 0; }
section.airy  { padding: clamp(80px, 10vw, 144px) 0; }
section.dark  { background: var(--ink-raised); color: var(--paper); }
section.dark h1, section.dark h2, section.dark h3 { color: var(--paper); }
section.dark .muted { color: var(--ink-muted); }
section.dark .micro-label { color: var(--ink-muted); }

.divider { border: 0; border-top: var(--e-hairline); margin: 0; }

/* Asymmetric editorial section head */
.section-head { margin-bottom: var(--space-10); }
.section-head__editorial {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  max-width: 880px;
}
@media (min-width: 900px) {
  .section-head__editorial {
    grid-template-columns: 200px 1fr;
    gap: var(--space-10);
    align-items: start;
  }
}
.section-head__editorial .micro-label { padding-top: 0.45em; }
.section-head__editorial .display-xl,
.section-head__editorial .display-lg { grid-column: 1 / -1; }
.section-head__editorial .prose { grid-column: 2; }

/* =========================================================================
 * 5. TOPNAV
 * ========================================================================= */

.topnav {
  border-bottom: var(--e-hairline);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: var(--z-raised);
}
.topnav__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-6);
  height: var(--header-h);
}
.topnav__logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* The BasedNode mark: a pulsing dot in front of the wordmark, the same
   mark used on basednode.xyz.

   The pulse has to be OBVIOUS, not a subtle breathe. Two earlier
   versions were too quiet:

     * v1 faded the core while scaling it (opacity 0.55), so it read as
       "dimming" rather than "alive", and on warm paper it nearly
       disappeared.
     * v2 fixed the fade but kept the ring thin (2px) and the expansion
       small (2.6x). Measured across one cycle the glow only grew from
       44px to 70px, which is not enough movement to catch the eye.

   This version does four things at once:
     * the core grows from 13px to 17.5px and never fades below full
       opacity, so it is always a solid, saturated dot
     * a radial-gradient halo on ::before swells from 85% to 165%, so
       there is a real glow rather than a shadow trick
     * a 2.5px outline ring on ::after expands to 3.6x and dissolves —
       this is what makes the motion legible in peripheral vision
     * the halo and the ring are separate layers, so they peak at
       different moments and the motion never looks like one blob

   Measured across one cycle: the glow's bounding box grows from 52px
   to 96px and the orange pixel count roughly triples. A pulse that
   does not change the footprint by that much is not a pulse. */
.topnav__logo-mark {
  position: relative;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
  flex: 0 0 auto;
  animation: bn-pulse-dot 2.4s ease-in-out infinite;
}
.topnav__logo-mark::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: radial-gradient(circle,
    var(--accent-a60) 0%,
    var(--accent-a20) 55%,
    transparent 72%);
  animation: bn-pulse-glow 2.4s ease-in-out infinite;
}
.topnav__logo-mark::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2.5px solid var(--accent);
  animation: bn-pulse-ring 2.4s ease-out infinite;
}
@keyframes bn-pulse-dot {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.34); }
}
@keyframes bn-pulse-glow {
  0%, 100% { transform: scale(0.85); opacity: 0.6; }
  50%      { transform: scale(1.55); opacity: 1; }
}
@keyframes bn-pulse-ring {
  0%        { transform: scale(1);   opacity: 0.95; }
  70%, 100% { transform: scale(3.6); opacity: 0; }
}

/* The footer sits on the dark panel, so the mark uses the paper colour
   instead of the accent to stay visible. */
.footer__logo-mark {
  position: relative;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--paper);
  display: inline-block;
  flex: 0 0 auto;
  animation: bn-pulse-dot 2.4s ease-in-out infinite;
}
.footer__logo-mark::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: radial-gradient(circle,
    var(--paper-a55) 0%,
    var(--paper-a18) 55%,
    transparent 72%);
  animation: bn-pulse-glow 2.4s ease-in-out infinite;
}
.footer__logo-mark::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2.5px solid var(--paper);
  animation: bn-pulse-ring 2.4s ease-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .topnav__logo-mark,
  .footer__logo-mark { animation: none; }
  .topnav__logo-mark::before,
  .footer__logo-mark::before { animation: none; opacity: 0.35; }
  .topnav__logo-mark::after,
  .footer__logo-mark::after { animation: none; opacity: 0; }
}
.topnav__logo-meta {
  display: none;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: none;
  color: var(--paper-muted);
  padding-left: var(--space-4);
  border-left: var(--e-hairline);
  margin-left: var(--space-3);
}
@media (min-width: 1100px) { .topnav__logo-meta { display: inline-block; } }

.topnav__links {
  display: none;
  list-style: none;
  margin: 0; padding: 0;
  gap: var(--space-6);
  justify-content: center;
}
@media (min-width: 900px) { .topnav__links { display: flex; } }
.topnav__links a {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink);
  padding: var(--space-2) 0;
}
.topnav__links a[aria-current="page"] { color: var(--accent-deep); border-bottom: 1px solid var(--accent); }
.topnav__links a:hover { color: var(--accent-deep); }

.topnav__actions { display: flex; align-items: center; gap: var(--space-3); justify-self: end; }
.topnav__cart {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: var(--e-hairline);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  position: relative;
  border-radius: var(--r-2);
  transition: background var(--dur-fast) var(--ease-out);
}
.topnav__cart:hover { background: var(--paper-faint); }
.topnav__cart-count {
  position: absolute;
  top: -6px; right: -6px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  background: var(--accent);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill);
}
.topnav__menu-btn {
  display: inline-flex;
  width: 36px; height: 36px;
  align-items: center; justify-content: center;
  border: var(--e-hairline);
  background: transparent;
  cursor: pointer;
  border-radius: var(--r-2);
}
@media (min-width: 900px) { .topnav__menu-btn { display: none; } }

.mobile-menu {
  display: none;
  border-bottom: var(--e-hairline);
  background: var(--paper);
}
.mobile-menu.is-open { display: block; }
.mobile-menu ul { list-style: none; padding: var(--space-4) var(--space-5); margin: 0; }
.mobile-menu li + li { border-top: var(--e-hairline); }
.mobile-menu a {
  display: block;
  padding: var(--space-4) 0;
  font-size: 1rem;
  font-weight: 500;
}

/* =========================================================================
 * 6. BUTTONS — sharp, mono, no glow
 * ========================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  padding: var(--space-3) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--r-2);
  cursor: pointer;
  text-decoration: none;
  transition:
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.btn:active { transform: scale(0.985); }

.btn--primary {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.btn--primary:hover {
  background: var(--ink-raised);
  color: var(--paper);
}

.btn--secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn--secondary:hover { background: var(--paper-faint); color: var(--ink); }

.btn--tertiary {
  background: transparent;
  color: var(--ink);
  border: 0;
  padding: var(--space-2) 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
}
.btn--tertiary:hover { color: var(--accent-ink); }

.btn--accent {
  background: var(--accent);
  color: var(--paper);
  border-color: var(--accent);
}
.btn--accent:hover { background: var(--accent-deep); border-color: var(--accent-deep); }

.btn--lg { padding: var(--space-4) var(--space-6); font-size: 0.875rem; }
.btn--sm { padding: var(--space-2) var(--space-4); font-size: 0.75rem; }

/* =========================================================================
 * 7. FORM CONTROLS — sharp, hairline
 * ========================================================================= */

.input, select.input, textarea.input {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  padding: var(--space-3) var(--space-4);
  border: var(--e-hairline);
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--r-2);
  width: 100%;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.input:focus { border-color: var(--ink); outline: 0; }

.input--search { padding-left: 44px; }

.input--search-wrap .search-icon {
  position: absolute;
  left: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--paper-muted);
  pointer-events: none;
}

.search-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--paper);
  border: var(--e-hairline);
  border-radius: var(--r-2);
  max-height: 320px;
  overflow: auto;
  z-index: var(--z-overlay);
  display: none;
}
.search-results.is-open { display: block; }
.search-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--e-hairline);
  cursor: pointer;
}
.search-result:last-child { border-bottom: 0; }
.search-result:hover { background: var(--paper-faint); }
.search-result__sku { font-family: var(--font-mono); font-size: 0.75rem; color: var(--paper-muted); }
.search-result__name { font-size: 0.875rem; }

/* =========================================================================
 * 8. HERO (editorial)
 * ========================================================================= */

.hero { padding: clamp(64px, 8vw, 128px) 0 var(--space-12); }
.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}
@media (min-width: 1024px) {
  .hero__grid {
    grid-template-columns: 1.4fr 1fr;
    gap: var(--space-12);
    align-items: end;
  }
}
.hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--paper-muted);
  margin-bottom: var(--space-5);
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
.hero__eyebrow::before {
  content: '';
  width: 24px; height: 1px;
  background: var(--ink);
}
.hero__title { margin-bottom: var(--space-5); }
.hero__sub {
  max-width: 56ch;
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: var(--space-8);
}
.hero__sub strong { font-weight: 500; }
.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.hero__hint {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--paper-muted);
  max-width: 60ch;
  line-height: 1.55;
}
.hero__hint strong { color: var(--ink); font-weight: 600; }

/* The single decisive imagery move on home — featured product block,
   positioned to the right of the hero text on desktop. */
.hero__featured {
  border-top: var(--e-hairline);
  border-bottom: var(--e-hairline);
  padding: var(--space-5) 0;
}
.hero__featured-row {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  align-items: center;
  gap: var(--space-5);
}
.hero__featured-svg {
  width: 96px; height: 96px;
  border: var(--e-hairline);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink);
}
.hero__featured-svg svg { width: 64px; height: 64px; }
.hero__featured-meta { display: flex; flex-direction: column; gap: var(--space-1); }
.hero__featured-sku { font-family: var(--font-mono); font-size: 0.75rem; color: var(--paper-muted); }
.hero__featured-name { font-size: 1rem; font-weight: 500; color: var(--ink); }
.hero__featured-spec { font-size: 0.8125rem; color: var(--paper-muted); }

/* =========================================================================
 * 9. CATALOG DIRECTORY (McMaster-style text hierarchy on home)
 * ========================================================================= */

.cat-dir {
  border-top: var(--e-hairline);
}
.cat-dir__row {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  gap: var(--space-6);
  align-items: baseline;
  padding: var(--space-5) 0;
  border-bottom: var(--e-hairline);
  transition: background var(--dur-fast) var(--ease-out);
}
.cat-dir__row:hover { background: var(--paper-faint); }
.cat-dir__num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--paper-muted);
  min-width: 48px;
}
.cat-dir__name {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.cat-dir__count {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--paper-muted);
  font-variant-numeric: tabular-nums;
}
.cat-dir__lead {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--paper-muted);
  display: none;
}
@media (min-width: 768px) { .cat-dir__lead { display: inline; } }
.cat-dir__arrow {
  font-family: var(--font-mono);
  color: var(--paper-muted);
  font-size: 0.875rem;
}
.cat-dir__row:hover .cat-dir__arrow { color: var(--accent); }

/* =========================================================================
 * 10. CATALOG PAGE (utility)
 * ========================================================================= */

.catalog-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}
@media (min-width: 1024px) {
  .catalog-layout {
    grid-template-columns: 240px 1fr;
    gap: var(--space-10);
    align-items: start;
  }
}

.filter-rail {
  position: sticky;
  top: 80px;
  border-top: var(--e-hairline);
  padding-top: var(--space-5);
}
@media (max-width: 1023px) {
  .filter-rail {
    position: static;
    border-top: 0;
    border-bottom: var(--e-hairline);
    padding-top: 0;
  }
}
.filter-rail__group { padding: var(--space-4) 0; border-bottom: var(--e-hairline); }
.filter-rail__title {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--paper-muted);
  margin-bottom: var(--space-3);
}
.filter-rail__opt {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-2) 0;
  font-size: 0.875rem;
  cursor: pointer;
}
.filter-rail__opt:hover { color: var(--accent-deep); }
.filter-rail__opt-count {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--paper-muted);
  font-variant-numeric: tabular-nums;
}

.catalog-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
  border-bottom: var(--e-hairline);
  margin-bottom: 0;
}
.catalog-head__count {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  color: var(--paper-muted);
}
.catalog-head__count strong { color: var(--ink); font-weight: 600; }

.catalog-list {
  border-top: 0;
}
.data-row {
  display: grid;
  grid-template-columns: 100px 1fr 110px 100px 80px 36px;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: var(--e-hairline);
  transition: background var(--dur-fast) var(--ease-out);
  min-height: 56px;
}
.data-row:hover { background: var(--paper-faint); }
@media (max-width: 767px) {
  .data-row {
    grid-template-columns: 1fr 80px;
    grid-template-areas:
      "sku price"
      "name price"
      "meta meta"
      "add add";
    row-gap: var(--space-2);
    padding: var(--space-4) 0;
  }
  .data-row__sku { grid-area: sku; }
  .data-row__name { grid-area: name; }
  .data-row__price { grid-area: price; text-align: right; }
  .data-row__meta { grid-area: meta; }
  .data-row__add { grid-area: add; justify-self: end; }
}

.data-row__sku {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--paper-muted);
  font-weight: 500;
}
.data-row__name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.data-row__name-main {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.data-row__name-spec {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--paper-muted);
}
.data-row__price {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  text-align: right;
}
.data-row__price-from {
  font-size: 0.6875rem;
  color: var(--paper-muted);
  text-transform: none;
  letter-spacing: 0.01em;
  display: block;
}
.data-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--paper-muted);
}
.meta-chip {
  display: inline-block;
  padding: 2px 6px;
  border: var(--e-hairline);
  border-radius: var(--r-1);
}
.meta-chip--cat { color: var(--ink); }
.meta-chip--eu { color: var(--positive); border-color: var(--positive-a30); }
.data-row__add {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: var(--e-hairline);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  border-radius: var(--r-2);
  transition: background var(--dur-fast) var(--ease-out);
}
.data-row__add:hover { background: var(--ink); color: var(--paper); }

/* =========================================================================
 * 11. CATEGORY JUMP NAV (catalog)
 * ========================================================================= */

.cat-jump {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-4) 0;
  border-bottom: var(--e-hairline);
}
.cat-jump a {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: var(--space-2) var(--space-3);
  border: var(--e-hairline);
  border-radius: var(--r-2);
  color: var(--ink);
  background: var(--paper);
  transition: background var(--dur-fast) var(--ease-out);
}
.cat-jump a:hover { background: var(--ink); color: var(--paper); }

.category-section {
  padding: var(--space-10) 0 var(--space-12);
  border-top: var(--e-hairline);
}
.category-section:first-of-type { border-top: 0; padding-top: var(--space-6); }
.category-section__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}
@media (min-width: 768px) {
  .category-section__head {
    grid-template-columns: auto 1fr auto;
    align-items: baseline;
    gap: var(--space-6);
  }
}
.category-section__num {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--paper-muted);
  font-weight: 500;
}
.category-section__title {
  font-size: clamp(1.5rem, 2.5vw, 1.875rem);
  letter-spacing: -0.015em;
  font-weight: 400;
  color: var(--ink);
}
.category-section__desc {
  font-size: 0.9375rem;
  color: var(--paper-muted);
  max-width: 60ch;
}

/* =========================================================================
 * 12. CARD PRIMITIVE (used SPARINGLY — utility/editorial mix)
 * No side-stripe borders. No identical 3-up grids.
 * ========================================================================= */

.subcat {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--paper-line);
}
.subcat:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.subcat__name {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--paper-muted);
  margin: 0 0 var(--space-5);
}

.card {
  border: var(--e-hairline);
  padding: var(--space-5);
  background: var(--paper);
  border-radius: var(--r-2);
}
.card--inset { background: var(--paper-faint); }
.card__title {
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: var(--space-2);
  color: var(--ink);
}
.card__desc {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--paper-muted);
}
.card__meta {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: var(--e-hairline);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
}
/* Legacy SVG icon containment — catalog.html uses .card__icon for the product
   line drawings. Sized to 56px so they don't fill the parent. */
.card__icon,
.card__icon svg {
  width: 56px;
  height: 56px;
  max-width: 56px;
  color: var(--ink);
  display: block;
  flex-shrink: 0;
}
.card__price {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.card__price-label {
  font-size: 0.6875rem;
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--paper-muted);
  margin-right: var(--space-2);
  white-space: nowrap;
}

.co2e-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  padding: 3px 6px;
  border: 1px solid var(--paper-line);
  border-radius: var(--r-1);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  background: var(--paper-faint);
}
.co2e-badge__num {
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.co2e-badge__unit {
  color: var(--paper-muted);
  text-transform: lowercase;
  letter-spacing: 0;
  font-size: 0.625rem;
}

/* =========================================================================
 * 13. STAT — replaces the banned hero-metric template.
 *    Used once per page as an inline data row, never as 3 flex blocks.
 * ========================================================================= */

.stat {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) auto minmax(0, 2fr);
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: var(--e-hairline);
  align-items: baseline;
}
.stat:last-child { border-bottom: 0; }
.stat__label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: none;
  letter-spacing: 0.1em;
  color: var(--paper-muted);
  font-weight: 500;
}
.stat__value {
  font-family: var(--font-mono);
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.stat__value-unit {
  font-size: 0.75rem;
  color: var(--paper-muted);
  margin-left: 4px;
  font-weight: 400;
}
.stat__note {
  font-size: 0.8125rem;
  color: var(--paper-muted);
  line-height: 1.5;
}

/* =========================================================================
 * 14. TABLE — bulk pricing, sustainability methodology, integration matrix
 * ========================================================================= */

/* Mechanic icon containment — enterprise.html uses .mechanic__icon for the
   9 mechanics inline SVGs. Sized to 32px so they sit beside the title, not
   above. */
.mechanic__icon,
.mechanic__icon svg {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  color: var(--ink);
  display: block;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.data-table th, .data-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: var(--e-hairline);
  vertical-align: top;
}
.data-table th {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.1em;
  color: var(--paper-muted);
  background: var(--paper-faint);
  border-bottom: var(--e-hairline);
}
.data-table tbody tr:hover { background: var(--paper-faint); }
.data-table td.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
.data-table td.sku { font-family: var(--font-mono); color: var(--paper-muted); font-size: 0.8125rem; }

.int-matrix {
  display: grid;
  grid-template-columns: 1fr;
  border-top: var(--e-hairline);
}
@media (min-width: 640px) { .int-matrix { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .int-matrix { grid-template-columns: repeat(3, 1fr); } }
.int-item {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-4) 0;
  border-bottom: var(--e-hairline);
}
@media (min-width: 640px) {
  .int-item:nth-child(2n+1) { border-right: var(--e-hairline); padding-right: var(--space-5); }
  .int-item:nth-child(2n)   { padding-left: var(--space-5); }
  .int-item:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (min-width: 960px) {
  .int-item:nth-child(2n+1) { border-right: 0; padding-right: 0; }
  .int-item:nth-child(2n)   { padding-left: 0; }
  .int-item { padding: var(--space-4) var(--space-5); border-right: var(--e-hairline); }
  .int-item:nth-child(3n)   { border-right: 0; }
  .int-item:nth-child(3n+1) { padding-left: 0; }
  .int-item:nth-child(3n+2) { padding-left: var(--space-5); padding-right: var(--space-5); }
  .int-item:nth-last-child(-n+3) { border-bottom: 0; }
}
.int-item__check { color: var(--positive); }
.int-item__name { font-size: 0.9375rem; font-weight: 500; color: var(--ink); }
.int-item__docs {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--paper-muted);
  padding-bottom: 1px;
  border-bottom: 1px solid var(--paper-line);
}
.int-item__docs:hover { color: var(--accent-deep); border-color: var(--accent); }

/* =========================================================================
 * 15. INTEGRATION TIMELINE (Day 1/2/3, Week 2)
 * ========================================================================= */

.timeline {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: var(--e-hairline);
}
@media (min-width: 768px) { .timeline { grid-template-columns: repeat(4, 1fr); } }
.timeline__step {
  padding: var(--space-5) var(--space-5) var(--space-5) 0;
  border-bottom: var(--e-hairline);
}
@media (min-width: 768px) {
  .timeline__step { border-bottom: 0; border-right: var(--e-hairline); padding-right: var(--space-5); }
  .timeline__step:last-child { border-right: 0; padding-right: 0; }
  .timeline__step:not(:first-child) { padding-left: var(--space-5); }
}
.timeline__date {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--accent);
  margin-bottom: var(--space-3);
}
.timeline__title {
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: var(--space-2);
}
.timeline__desc {
  font-size: 0.875rem;
  color: var(--paper-muted);
  line-height: 1.55;
}

/* =========================================================================
 * 16. METHODOLOGY GRID (4 columns: Boundary / Auditor / Standards / Recency)
 * ========================================================================= */

.method-grid {
  display: grid;
  grid-template-columns: 1fr;
  border-top: var(--e-hairline);
}
@media (min-width: 768px) { .method-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .method-grid { grid-template-columns: repeat(4, 1fr); } }
.method-item {
  padding: var(--space-5) var(--space-5) var(--space-5) 0;
  border-bottom: var(--e-hairline);
}
@media (min-width: 768px) {
  .method-item { border-right: var(--e-hairline); }
  .method-item:nth-child(2n) { border-right: 0; padding-left: var(--space-5); padding-right: 0; }
}
@media (min-width: 1024px) {
  .method-item { padding-right: var(--space-5); }
  .method-item:nth-child(2n) { padding-right: 0; padding-left: 0; border-right: var(--e-hairline); }
  .method-item:nth-child(4n+2),
  .method-item:nth-child(4n+3) { padding-left: var(--space-5); padding-right: var(--space-5); }
  .method-item:nth-child(4n)   { padding-left: var(--space-5); padding-right: 0; border-right: 0; }
  .method-item:nth-last-child(-n+2) { border-bottom: 0; }
  .method-item:nth-last-child(-n+3) { border-bottom: 0; }
}
.method-item__label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--paper-muted);
  margin-bottom: var(--space-3);
}
.method-item__body {
  font-size: 0.875rem;
  color: var(--ink);
  line-height: 1.55;
}

/* =========================================================================
 * 17. CERTIFICATIONS GRID (SOC 2, ISO 27001, EU AI Act, ISO 14064-1)
 * ========================================================================= */

.cert-grid {
  display: grid;
  grid-template-columns: 1fr;
  border-top: var(--e-hairline);
}
@media (min-width: 640px) { .cert-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .cert-grid { grid-template-columns: repeat(4, 1fr); } }
.cert-item {
  padding: var(--space-5) var(--space-5) var(--space-5) 0;
  border-bottom: var(--e-hairline);
}
@media (min-width: 640px) {
  .cert-item { border-right: var(--e-hairline); }
  .cert-item:nth-child(2n) { border-right: 0; padding-left: var(--space-5); padding-right: 0; }
}
@media (min-width: 1024px) {
  .cert-item { padding-right: var(--space-5); }
  .cert-item:nth-child(2n) { padding-right: 0; padding-left: 0; border-right: var(--e-hairline); }
  .cert-item:nth-child(4n+2),
  .cert-item:nth-child(4n+3) { padding-left: var(--space-5); padding-right: var(--space-5); }
  .cert-item:nth-child(4n)   { padding-left: var(--space-5); padding-right: 0; border-right: 0; }
  .cert-item:nth-last-child(-n+4) { border-bottom: 0; }
}

/* =========================================================================
 * 18. SUPPLY CHAIN TABLE (about.html)
 * ========================================================================= */

.supply-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  border-bottom: var(--e-hairline);
}
@media (min-width: 768px) {
  .supply-row {
    grid-template-columns: 80px 220px 1fr 1fr;
    gap: var(--space-6);
  }
}
.supply-row__num {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--paper-muted);
}
.supply-row__cat { font-weight: 500; font-size: 0.9375rem; }
.supply-row__detail { font-size: 0.8125rem; color: var(--paper-muted); line-height: 1.5; }
.supply-row__detail strong { color: var(--ink); font-weight: 500; }

/* =========================================================================
 * 19. TEAM BLOCK (about.html — typographic, no photos)
 * ========================================================================= */

.team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 768px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }

.team-row {
  padding: var(--space-4) 0;
  border-bottom: var(--e-hairline);
}
.team-row__name {
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
}
.team-row__role {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--paper-muted);
  margin: var(--space-1) 0 var(--space-2);
}

/* =========================================================================
 * 20. SAMPLE PO MOCK (enterprise.html)
 * ========================================================================= */

.po-mock {
  border: var(--e-hairline);
  background: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.6;
  padding: var(--space-5);
  white-space: pre-wrap;
  color: var(--ink);
  overflow-x: auto;
  border-radius: var(--r-2);
}
.po-mock .po-key { color: var(--paper-muted); }
.po-mock .po-val { color: var(--ink); }
.po-mock .po-total { color: var(--accent-deep); font-weight: 600; }

/* =========================================================================
 * 21. FOOTER — link-dense, Anthropic-scale
 * ========================================================================= */

.footer {
  background: var(--ink);
  color: var(--paper);
  padding: var(--space-12) 0 var(--space-8);
  margin-top: var(--space-12);
}
.footer a { color: var(--ink-muted); }
.footer a:hover { color: var(--paper); }
.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  padding-bottom: var(--space-10);
  border-bottom: 1px solid var(--ink-line);
}
@media (min-width: 768px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 1.5fr repeat(4, 1fr); gap: var(--space-10); } }
.footer__brand-block { display: flex; flex-direction: column; gap: var(--space-4); }
.footer__logo {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--paper);
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.footer__desc {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--ink-muted);
  max-width: 36ch;
}
.footer__col-title {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--ink-muted);
  margin-bottom: var(--space-4);
}
.footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.footer__col a { font-size: 0.8125rem; }
.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding-top: var(--space-6);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-muted);
}
.footer__bottom-links { display: flex; gap: var(--space-5); flex-wrap: wrap; }

/* =========================================================================
 * 23. UTILITY: hairlines, separators, micro-trust strips
 * ========================================================================= */

/* Mechanic card (enterprise page — the 9 mechanics grid)
   Each card has a real engineering illustration above a micro-label, title, prose.
   NOT identical to other cards — illustration makes each one geometrically distinct. */
.mechanics-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8) var(--space-6);
  margin-top: var(--space-10);
  border-top: var(--e-hairline);
  padding-top: var(--space-8);
}
@media (min-width: 768px)  { .mechanics-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .mechanics-grid { grid-template-columns: repeat(3, 1fr); } }

.mechanic-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}
.mechanic-card__illus {
  border: var(--e-hairline);
  background: var(--paper-faint);
  position: relative;
  width: 100%;
  padding-bottom: 62.5%; /* 200/320 — explicit padding-bottom for aspect ratio
                            (avoids the aspect-ratio + display:flex conflict
                            where the browser uses intrinsic content size) */
  height: 0;
  overflow: hidden;
}
.mechanic-card__illus img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.mechanic-card .micro-label {
  margin-top: var(--space-3);
}
.mechanic-card h3 {
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
  line-height: 1.3;
  word-wrap: break-word;
  hyphens: auto;
}
.mechanic-card p {
  font-size: 0.875rem;
  color: var(--paper-muted);
  line-height: 1.55;
  word-wrap: break-word;
  hyphens: auto;
}

/* Legacy .mechanic rule kept for safety in case it's referenced */
.mechanic {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}
.mechanic h3 {
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: var(--space-2);
  color: var(--ink);
}
.mechanic p {
  font-size: 0.875rem;
  color: var(--paper-muted);
  line-height: 1.55;
}

.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  padding: var(--space-5) 0;
  border-top: var(--e-hairline);
  border-bottom: var(--e-hairline);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-muted);
  align-items: center;
}
.trust-strip span { display: inline-flex; align-items: center; gap: var(--space-2); }
.trust-strip svg { width: 14px; height: 14px; color: var(--positive); }

.checkmark { color: var(--positive); }
.cross     { color: var(--negative); }

/* =========================================================================
 * 24. PDP — product detail page
 * ========================================================================= */

.pdp-breadcrumb {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--paper-muted);
  padding: var(--space-6) 0 var(--space-3);
  border-bottom: var(--e-hairline);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}
.pdp-breadcrumb a { color: var(--ink); }
.pdp-breadcrumb a:hover { color: var(--accent-deep); }
.pdp-breadcrumb__sep { color: var(--paper-line); }
.pdp-breadcrumb__current { color: var(--ink); font-weight: 500; }

.pdp-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  padding: var(--space-8) 0;
  border-bottom: var(--e-hairline);
}
@media (min-width: 1024px) {
  .pdp-head { grid-template-columns: 1.2fr 1fr; gap: var(--space-12); align-items: start; }
}

.pdp-image {
  border: var(--e-hairline);
  background: var(--paper-faint);
  padding: var(--space-5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pdp-image img { width: 100%; height: auto; max-width: 640px; }

.pdp-info__sku {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--paper-muted);
  letter-spacing: 0.06em;
  margin-bottom: var(--space-3);
}
.pdp-info__title {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-bottom: var(--space-3);
  color: var(--ink);
}
.pdp-info__tag {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--paper-muted);
  margin-bottom: var(--space-6);
  max-width: 56ch;
}
.pdp-info__price-from-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: none;
  letter-spacing: 0.1em;
  color: var(--paper-muted);
}
.pdp-info__price-from {
  font-family: var(--font-mono);
  font-size: 1.875rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  margin-left: var(--space-2);
}

.bulk-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-5) 0;
  font-size: 0.875rem;
}
.bulk-table th, .bulk-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: var(--e-hairline);
}
.bulk-table th {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.1em;
  color: var(--paper-muted);
  background: var(--paper-faint);
}
.bulk-table td:last-child, .bulk-table th:last-child { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.bulk-table tr.popular td { background: var(--paper-faint); font-weight: 500; }
.bulk-table tr.popular td:first-child { position: relative; }
.bulk-table__badge {
  display: inline-block;
  margin-left: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.1em;
  color: var(--accent);
  padding: 1px 6px;
  border: 1px solid var(--accent);
  border-radius: var(--r-1);
}

.pdp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-5) 0;
  border-top: var(--e-hairline);
  border-bottom: var(--e-hairline);
}
.pdp-talk {
  font-size: 0.875rem;
  color: var(--paper-muted);
  margin-top: var(--space-4);
}
.pdp-talk a { color: var(--accent-deep); text-decoration: underline; text-decoration-color: var(--accent-soft); }

.status {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: var(--space-2) var(--space-3);
  border: 1px solid currentColor;
  border-radius: var(--r-1);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.status--in-stock { color: var(--positive); }

/* Specs section */
.specs { padding: var(--space-12) 0; border-bottom: var(--e-hairline); }
.specs h2 {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: clamp(1.5rem, 2.5vw, 1.875rem);
  font-weight: 400;
  letter-spacing: -0.015em;
  margin-bottom: var(--space-8);
}
.specs__group { margin-bottom: var(--space-8); }
.specs__group-title {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--paper-muted);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: var(--e-hairline);
}
.specs__group dl { margin: 0; }
.specs__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-1);
  padding: var(--space-3) 0;
  border-bottom: var(--e-hairline);
  font-size: 0.875rem;
}
@media (min-width: 768px) {
  .specs__row { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
}
.specs__row dt { color: var(--paper-muted); }
.specs__row dd { margin: 0; color: var(--ink); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Sustainability block */
.sus-block { padding: var(--space-12) 0; border-bottom: var(--e-hairline); }
.sus-block h2 {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: clamp(1.5rem, 2.5vw, 1.875rem);
  font-weight: 400;
  letter-spacing: -0.015em;
  margin-bottom: var(--space-6);
}
.sus-block__icon { color: var(--positive); }
.sus-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: var(--e-hairline);
  margin-bottom: var(--space-6);
}
@media (min-width: 640px) { .sus-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .sus-grid { grid-template-columns: repeat(4, 1fr); } }
.sus-tile {
  padding: var(--space-5) 0;
  border-bottom: var(--e-hairline);
}
@media (min-width: 640px) {
  .sus-tile { padding-right: var(--space-5); border-right: var(--e-hairline); }
  .sus-tile:nth-child(2n) { padding-right: 0; padding-left: var(--space-5); border-right: 0; }
}
@media (min-width: 1024px) {
  .sus-tile { padding-right: var(--space-5); border-right: var(--e-hairline); }
  .sus-tile:nth-child(2n) { padding-right: var(--space-5); padding-left: 0; border-right: var(--e-hairline); }
  .sus-tile:nth-child(4n) { padding-left: var(--space-5); padding-right: 0; border-right: 0; }
  .sus-tile:nth-last-child(-n+4) { border-bottom: 0; }
}
.sus-tile__label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--paper-muted);
  margin-bottom: var(--space-2);
}
.sus-tile__value {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  line-height: 1.2;
}
.sus-tile__sub {
  font-size: 0.75rem;
  color: var(--paper-muted);
  margin-top: var(--space-2);
  font-family: var(--font-mono);
}
.sus-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  padding: 2px 6px;
  border: var(--e-hairline);
  border-radius: var(--r-1);
  color: var(--ink);
  background: var(--paper);
}
.sus-block__foot {
  font-size: 0.875rem;
  color: var(--paper-muted);
  line-height: 1.55;
}
.sus-block__foot a { color: var(--accent-deep); text-decoration: underline; text-decoration-color: var(--accent-soft); }

/* Why section */
.why { padding: var(--space-12) 0; border-bottom: var(--e-hairline); }
.why h2 { font-weight: 300; letter-spacing: -0.025em; margin-bottom: var(--space-6); }
.why p { max-width: 65ch; margin-bottom: var(--space-4); line-height: 1.65; }
.why p.muted { color: var(--paper-muted); font-style: italic; }

/* Related products */
.related { padding: var(--space-12) 0; }
.related h2 { font-weight: 400; letter-spacing: -0.015em; margin-bottom: var(--space-6); }

/* Card row-top used in related — icon + SKU in a row */
.card__row-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-4);
}
.card__sku {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--paper-muted);
  font-weight: 500;
}

/* =========================================================================
 * 25. RESPONSIVE
 * ========================================================================= */

@media (max-width: 767px) {
  section { padding: var(--space-10) 0; }
  .display-xl { font-size: clamp(2rem, 9vw, 2.75rem); }
  .hero { padding: var(--space-10) 0 var(--space-8); }
  .timeline__step { padding-left: 0; }
  .int-item { padding: var(--space-3) 0; }
  .footer { padding: var(--space-10) 0 var(--space-6); }
}


/* =========================================================================
 * 26. MODULES USED IN MARKUP BUT PREVIOUSLY UNDEFINED
 * ========================================================================= */

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.topnav__cta { white-space: nowrap; }

/* Hero search — full-width, the one input on the page */
.hero__search { margin-bottom: var(--space-6); }
.input--search-wrap { position: relative; }
.input--search {
  height: 48px;
  font-size: 1rem;
  background: var(--paper);
}
.input--search::placeholder { color: var(--paper-muted); }
.input--search:focus { border-color: var(--ink); }

/* The procurement moment — text left, drawing right, one hairline frame */
.moment {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  border-top: var(--e-hairline);
  border-bottom: var(--e-hairline);
  padding: var(--space-8) 0;
}
@media (min-width: 900px) {
  .moment { grid-template-columns: 1.35fr 1fr; gap: var(--space-10); align-items: start; }
}
.moment__heading {
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin-bottom: var(--space-4);
  max-width: 30ch;
}
.moment__items {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.9;
  color: var(--paper-muted);
  border-top: var(--e-hairline);
}
.moment__items li { padding: var(--space-1) 0; }
.moment__visual {
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--e-hairline);
  background: var(--paper-faint);
  padding: var(--space-6);
}
.moment__visual svg { width: 100%; height: auto; max-width: 320px; }

/* Quote-list drawer */
.cart-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(420px, 100vw);
  background: var(--paper);
  border-left: var(--e-hairline);
  /* hidden without creating horizontal scroll: visibility + a transform that
     does not extend the scroll box */
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}
.cart-drawer[aria-hidden="false"] {
  transform: translateX(0);
  visibility: visible;
  transition: transform var(--dur-base) var(--ease-out), visibility 0s;
}
.cart-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: var(--e-hairline);
  flex: 0 0 auto;
}
.cart-drawer__title {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
}
.cart-drawer__close {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: var(--e-hairline);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  border-radius: var(--r-2);
  transition: background var(--dur-fast) var(--ease-out);
}
.cart-drawer__close:hover { background: var(--paper-faint); }
.cart-drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--space-4) var(--space-5);
}
.cart-drawer__empty {
  font-size: 0.875rem;
  color: var(--paper-muted);
  line-height: 1.6;
}
.cart-drawer__foot {
  flex: 0 0 auto;
  padding: var(--space-4) var(--space-5) var(--space-5);
  border-top: var(--e-hairline);
  background: var(--paper);
}
.cart-line {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: var(--e-hairline);
}
.cart-line:last-child { border-bottom: 0; }
.cart-line__sku {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--paper-muted);
}
.cart-line__name { font-size: 0.875rem; font-weight: 500; margin-top: 2px; }
.cart-line__qty {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}
.cart-line__qty button {
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border: var(--e-hairline);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  border-radius: var(--r-1);
}
.cart-line__qty button:hover { background: var(--paper-faint); }
.cart-line__remove {
  margin-top: var(--space-2);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--paper-muted);
  font-size: 0.75rem;
  font-family: var(--font-mono);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cart-line__remove:hover { color: var(--accent-ink); }
.cart-line__price {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: var(--space-6);
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--ink);
  color: var(--paper);
  font-size: 0.8125rem;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--r-2);
  z-index: var(--z-toast);
}
.toast__icon { width: 18px; height: 18px; color: var(--positive); flex: 0 0 auto; }


/* =========================================================================
 * 27. HERO SPLIT — copy left, the product's own drawing right
 * ========================================================================= */

.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: start;
}
@media (min-width: 1024px) {
  .hero__grid {
    grid-template-columns: 1.15fr 1fr;
    gap: var(--space-12);
    align-items: center;
  }
}
.hero__text { min-width: 0; }

/* The drawing is the one bright thing on the page: a real spec sheet from
   the catalog, framed, sitting in the hero instead of a generic illustration. */
.hero__drawing {
  display: block;
  color: inherit;
  text-decoration: none;
  border: var(--e-hairline);
  background: var(--paper);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.hero__drawing:hover { border-color: var(--ink); }
.hero__drawing-frame {
  padding: var(--space-5);
  background: var(--paper-faint);
  border-bottom: var(--e-hairline);
}
.hero__drawing-frame img {
  width: 100%;
  height: auto;
  display: block;
}
.hero__drawing-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-5);
}
.hero__drawing-sku {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--paper-muted);
}
.hero__drawing-name {
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--ink);
}
.hero__drawing-spec {
  font-size: 0.8125rem;
  color: var(--paper-muted);
  line-height: 1.5;
}
.hero__drawing-link {
  margin-top: var(--space-3);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--accent-ink);
}
.hero__drawing:hover .hero__drawing-link { color: var(--ink); }

/* =========================================================================
 * 28. EXTRACTED CLASSES (were inline styles)
 * ========================================================================= */

.section-label {
  display: block;
  margin-bottom: var(--space-4);
}
.section-label + .display-lg,
.section-label + .h1 { margin-top: 0; }

/* Wedge list */
.wedge-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  margin-top: var(--space-8);
  border-top: var(--e-hairline);
}
.wedge-item {
  padding: var(--space-6) 0;
  border-bottom: var(--e-hairline);
}
.wedge-item--last { border-bottom: 0; }
.wedge-item__label {
  display: block;
  margin-bottom: var(--space-3);
}
.wedge-item__title { margin-bottom: var(--space-3); }
.wedge-item__meta { margin-top: var(--space-4); }

/* Stat block */
.stat-block {
  border-top: var(--e-hairline);
  padding-top: var(--space-5);
}

/* Pullquote */
.pullquote { margin-bottom: var(--space-6); }
.pullquote__cta { margin-top: var(--space-6); }

/* Start grid */
.start-grid {
  border-top: var(--e-hairline);
  padding-top: var(--space-8);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: end;
}
@media (min-width: 900px) {
  .start-grid { grid-template-columns: 1.2fr auto; }
}
.start-grid__prose { margin-top: var(--space-4); }
.start-grid__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Trust strip lead */
.trust-strip__lead { color: var(--paper-muted); }

/* Footer address */
.footer__address {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-muted);
  line-height: 1.6;
}

/* Moment extras */
.moment__total { margin-top: var(--space-6); }
.moment__cta { margin-top: var(--space-6); }

/* Cart footer */
.cart-foot__row {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}
.cart-foot__note { margin-bottom: var(--space-4); }
.cart-foot__cta { width: 100%; justify-content: center; }

/* Cart backdrop */
.cart-backdrop {
  position: fixed;
  inset: 0;
  background: var(--ink-a45);
  z-index: 99;
}
.cart-backdrop[hidden] { display: none; }
/* BasedNode — language, pricing, FAQ and language-toggle additions.
   Appended to the OffiCraft-derived stylesheet.
   Palette and type stay identical to the reference: warm paper, ink, one accent. */

/* Language switch — two flags, one per language.
   The active language's flag is in full colour; the other is greyed out,
   so the switch always shows both options while making the current one
   obvious. Buttons, not a dropdown: the whole point is one click. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.lang-switch__opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Padding gives a 32x28 tap target around a 20x14 flag, which matters
     on a phone. The flag itself stays small so it does not compete with
     the navigation. */
  padding: 7px 6px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  border-radius: var(--r-1);
  line-height: 0;
  overflow: hidden;
  transition: opacity var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
/* Flag sizing.
   The two flags have different aspect ratios: the Dannebrog is 37:28
   (1.32:1) and the English hybrid is 40:28 (1.43:1). Giving each its
   own width keeps both at the same height, so they sit on one baseline
   and neither is stretched. preserveAspectRatio="xMidYMid meet" inside
   the SVG does the rest. */
.lang-flag {
  display: block;
  height: 14px;
  width: auto;
  border-radius: 1px;
}
.lang-switch__opt[data-lang-target="da"] .lang-flag { width: 18px; }
.lang-switch__opt[data-lang-target="en"] .lang-flag { width: 20px; }
/* Inactive flag: drained of colour but still legible as a flag. */
.lang-switch__opt:not(.is-active) { opacity: 0.38; }
.lang-switch__opt:not(.is-active):hover { opacity: 0.7; }
.lang-switch__opt.is-active {
  border-color: var(--ink);
  opacity: 1;
}
.lang-switch__opt:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Footer variant sits on the dark panel. */
.lang-switch--dark .lang-switch__opt.is-active { border-color: var(--paper-muted); }
.lang-switch--dark .lang-switch__opt:focus-visible { outline-color: var(--accent-soft); }

@media (max-width: 420px) {
  .lang-flag { width: 18px; height: 13px; }
}

/* Pricing — three cards, but not three equal boxes: the middle one carries
   the accent, the outer two are plain, and the sizes step down. */
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  border-top: var(--e-hairline);
  padding-top: var(--space-8);
}
@media (min-width: 900px) {
  .pricing-grid { grid-template-columns: repeat(3, 1fr); }
}
.pricing-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border: var(--e-hairline);
  background: var(--paper);
}
.pricing-card--accent {
  border-color: var(--ink);
  background: var(--paper-faint);
}
.pricing-card__name {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--paper-muted);
}
.pricing-card--accent .pricing-card__name { color: var(--accent-ink); }
.pricing-card__price {
  font-family: var(--font-mono);
  font-size: 2rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  line-height: 1.1;
}
.pricing-card__unit {
  font-size: 0.875rem;
  color: var(--paper-muted);
  margin-left: var(--space-2);
}
.pricing-card__desc {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--paper-muted);
}
.pricing-card__list {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: var(--space-3) 0 0;
  border-top: var(--e-hairline);
  font-size: 0.8125rem;
  color: var(--ink);
}
.pricing-card__list li {
  padding: var(--space-1) 0;
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
}
.pricing-card__list li::before {
  content: '';
  width: 6px; height: 6px;
  flex: 0 0 auto;
  background: var(--accent);
  transform: translateY(-2px);
}
.pricing-note {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: var(--e-hairline);
  font-size: 0.875rem;
  color: var(--paper-muted);
  max-width: 70ch;
}

/* FAQ */
.faq-list { border-top: var(--e-hairline); }
.faq-item { border-bottom: var(--e-hairline); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-4) 0;
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  transition: color var(--dur-fast) var(--ease-out);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--paper-muted);
  flex: 0 0 auto;
  transition: transform var(--dur-fast) var(--ease-out);
}
.faq-item[open] summary::after { content: '−'; }
.faq-item summary:hover { color: var(--accent-ink); }
.faq-item p {
  padding: 0 0 var(--space-4);
  max-width: 68ch;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--paper-muted);
}

/* Answers are written as paragraphs separated by a blank line. The copy
   carries the newlines and textContent preserves them, so pre-line renders
   them as real paragraph breaks without the markup needing <p> per block. */
.faq-item p { white-space: pre-line; }

/* FAQ 1 answers with a bulleted list of who the studio works for. */
.faq-item__list {
  margin: calc(var(--space-4) * -1) 0 var(--space-4);
  padding: 0 0 0 calc(var(--space-4) + 1.1em);
  max-width: 68ch;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--paper-muted);
}
.faq-item__list li { margin-bottom: var(--space-2); }
.faq-item__list li:last-child { margin-bottom: 0; }
.faq-item__list li::marker { color: var(--accent-ink); }

/* The source line under the data-security answer. */
.faq-item__source {
  padding: 0 0 var(--space-4);
  max-width: 68ch;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--paper-muted);
}
.faq-item__source a {
  color: var(--paper-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.faq-item__source a:hover { color: var(--accent-ink); }

/* The catalogue-style rows double as the service list; keep them legible
   when they carry a price instead of a SKU count. */
.cat-dir__count { white-space: nowrap; }

/* Accordion open state needs a little breathing room before the answer */
.faq-item[open] summary { color: var(--ink); }


/* =========================================================================
 * 28. MOBILE HEADER + PANEL
 *
 * Bugs this fixes:
 *  1. The panel was a plain <nav> in normal flow. The JS toggled
 *     aria-hidden but nothing ever set .is-open, so display stayed
 *     none and the button did nothing.
 *  2. The panel was NOT attached to the header. It was a sibling of
 *     <header>, so it scrolled away with the page instead of dropping
 *     out of the fixed header.
 *  3. On mobile the grid was "auto 1fr" but the <nav> element still
 *     occupied the 1fr column, pushing .topnav__actions onto a second
 *     grid row. The DA button and the hamburger ended up stacked
 *     UNDER the logo instead of inline at the right.
 * ========================================================================= */

@media (max-width: 899px) {
  .topnav__inner {
    grid-template-columns: auto 1fr auto;
    gap: var(--space-3);
    align-items: center;
  }
  .topnav__links { display: none; }
  .topnav__cta { display: none; }
  .topnav__actions { gap: var(--space-2); justify-self: end; align-self: center; }
  .topnav__logo-meta { display: none; }
  /* The nav wrapper itself must leave the grid on mobile, otherwise it
     holds the middle column open and pushes the actions to row 2. */
  .topnav__inner > nav { display: none; }
}
@media (max-width: 420px) {
  .topnav__logo { font-size: 0.9375rem; }
  .topnav__logo-mark { width: 22px; height: 22px; }
  .topnav__logo-mark::after { inset: 5px; }
}

/* The panel: fixed to the header, full-bleed, slides down from under it. */
.mobile-menu {
  position: fixed;
  /* -1px so the panel overlaps the header's own bottom border instead of
     leaving a hairline seam between the bar and the panel. The panel is a
     child of the header, so it paints over the parent's border. */
  top: calc(var(--header-h) - 1px);
  left: 0;
  right: 0;
  z-index: calc(var(--z-raised) - 1);
  background: var(--paper);
  border-bottom: var(--e-hairline);
  /* Closed state: hidden but not display:none, so it can animate. */
  display: block;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    visibility 0s linear var(--dur-base);
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-menu[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    visibility 0s;
}
.mobile-menu ul {
  list-style: none;
  padding: var(--space-2) var(--space-5) var(--space-5);
  margin: 0;
}
.mobile-menu li + li { border-top: var(--e-hairline); }
.mobile-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) 0;
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
}
/* Arrow affordance on each row */
.mobile-menu a::after {
  content: '→';
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--paper-muted);
}
.mobile-menu a:hover { color: var(--accent-ink); }

/* The scrim behind the panel, so tapping outside closes it */
.nav-scrim {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: calc(var(--z-raised) - 2);
  background: var(--ink-a28);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--dur-base) var(--ease-out),
    visibility 0s linear var(--dur-base);
}
.nav-scrim.is-visible {
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--dur-base) var(--ease-out),
    visibility 0s;
}

/* Lock page scroll while the panel is open */
body.nav-open { overflow: hidden; }

/* Swap the hamburger for an X when open */
.topnav__menu-btn .icon-close { display: none; }
body.nav-open .topnav__menu-btn .icon-close { display: block; }
body.nav-open .topnav__menu-btn .icon-open { display: none; }

/* The panel exists only below the desktop breakpoint. On desktop the
   inline nav links take over, so the panel must be fully out of the
   tree — not just invisible — or it sits over the page. */
@media (min-width: 900px) {
  .mobile-menu { display: none; }
  .nav-scrim { display: none; }
}

/* Reduced motion: no slide, no fade */
@media (prefers-reduced-motion: reduce) {
  .mobile-menu,
  .nav-scrim {
    transition: none;
    transform: none;
  }
}


/* =========================================================================
 * 29. CATALOG / SERVICE ROWS — must not overflow on narrow phones
 * ========================================================================= */

@media (max-width: 767px) {
  .cat-dir__row {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "num name arrow"
      "num lead arrow"
      "num count arrow";
    gap: var(--space-1) var(--space-3);
    align-items: baseline;
  }
  .cat-dir__num  { grid-area: num; }
  .cat-dir__name { grid-area: name; font-size: 1rem; }
  .cat-dir__lead { grid-area: lead; display: inline; font-size: 0.75rem; }
  .cat-dir__count { grid-area: count; font-size: 0.75rem; }
  .cat-dir__arrow { grid-area: arrow; align-self: center; }
}


/* =========================================================================
 * 30. SUBPAGE COMPONENTS
 *
 * New pages (cases, services, about, resources, security, contact) reuse the
 * existing catalogue (cat-dir, wedge-list, pricing-card, stat, faq-list,
 * timeline, method-grid, team-row, data-table, trust-strip, chip, card).
 * These are the few genuinely new pieces.
 * ========================================================================= */

/* ---- Page head: eyebrow + title + lede, for every subpage ---- */
.page-head {
  padding: var(--space-12) 0 var(--space-8);
  border-bottom: var(--e-hairline);
}
.page-head__inner { max-width: 880px; }
.page-head__title {
  margin: var(--space-4) 0 var(--space-5);
}
.page-head__lede {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--ink);
  max-width: 68ch;
}
.page-head__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-top: var(--space-6);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--paper-muted);
}
.page-head__crumb {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--paper-muted);
  text-decoration: none;
}
.page-head__crumb:hover { color: var(--accent-ink); }

/* ---- Case study card ---- */
.case-grid {
  display: grid;
  grid-template-columns: 1fr;
  border-top: var(--e-hairline);
}
.case-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  padding: var(--space-8) 0;
  border-bottom: var(--e-hairline);
}
.case-card__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3); }
.case-card__title { font-size: 1.125rem; font-weight: 500; }
.case-card__domain {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--paper-muted);
}
.case-card__desc { font-size: 0.9375rem; line-height: 1.6; color: var(--ink); max-width: 62ch; }
.case-card__metric {
  font-family: var(--font-mono);
  font-size: 1.75rem;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.1;
}
.case-card__metric-note {
  font-size: 0.8125rem;
  color: var(--paper-muted);
  margin-top: var(--space-1);
}
.case-card__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ---- Service detail block: one long-form entry per service ---- */
.svc-detail {
  padding: var(--space-8) 0;
  border-bottom: var(--e-hairline);
}
.svc-detail__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.svc-detail__title { font-size: 1.25rem; font-weight: 500; }
.svc-detail__price {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  white-space: nowrap;
}
.svc-detail__body { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
.svc-detail__list { list-style: none; padding: 0; margin: 0; }
.svc-detail__list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--ink);
}
.svc-detail__list li::before {
  content: '—';
  font-family: var(--font-mono);
  color: var(--paper-muted);
}

/* ---- Glossary: term + plain-language definition ---- */
.glossary-list { border-top: var(--e-hairline); }
.glossary-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  padding: var(--space-5) 0;
  border-bottom: var(--e-hairline);
}
.glossary-item__term {
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  font-weight: 500;
}
.glossary-item__def { font-size: 0.9375rem; line-height: 1.6; color: var(--ink); max-width: 66ch; }

/* ---- Guide step: numbered, for the resources walkthrough ---- */
.guide-step {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  padding: var(--space-6) 0;
  border-bottom: var(--e-hairline);
}
.guide-step__num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--accent-ink);
  letter-spacing: 0.04em;
}
.guide-step__title { font-size: 1rem; font-weight: 500; }
.guide-step__body { font-size: 0.9375rem; line-height: 1.6; color: var(--ink); max-width: 66ch; }

/* ---- Key/value table, for legal + pricing facts ---- */
.kv-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.kv-table th,
.kv-table td { text-align: left; vertical-align: top; padding: var(--space-4) var(--space-5) var(--space-4) 0; border-bottom: var(--e-hairline); }
.kv-table th {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--paper-muted);
  width: 34%;
}

/* ---- Contact cards ---- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  border-top: var(--e-hairline);
}
.contact-card {
  padding: var(--space-6) 0;
  border-bottom: var(--e-hairline);
}
.contact-card__label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--paper-muted);
  margin-bottom: var(--space-3);
}
.contact-card__value { font-size: 1rem; margin-bottom: var(--space-2); }
.contact-card__value a { color: var(--ink); }
.contact-card__note { font-size: 0.875rem; color: var(--paper-muted); line-height: 1.55; }

/* ---- Prose block for legal / long text ---- */
/* Legal/document prose: cap the measure at a comfortable reading length.
   `ch` measures the width of "0" in the current font, which is narrower than
   average text — 70ch rendered ~98 characters per line, far too wide to read.
   A pixel cap gives a true measure: ~7.6px per character at 15px, so
   68ch of prose lands at ~640px / ~84 characters. Target 60-75 characters,
   which is 500-600px here. */
.doc-block { max-width: 620px; }
.doc-block p { max-width: 620px; }
@media (min-width: 900px) {
  .doc-block { max-width: 640px; }
  .doc-block p { max-width: 640px; }
}
.doc-block h2 { font-size: 1.125rem; font-weight: 500; margin: var(--space-8) 0 var(--space-3); }
.doc-block h3 { font-size: 1rem; font-weight: 500; margin: var(--space-5) 0 var(--space-2); }
.doc-block p { font-size: 0.9375rem; line-height: 1.65; color: var(--ink); margin-bottom: var(--space-4); }
.doc-block ul { margin: 0 0 var(--space-4); padding-left: var(--space-5); }
.doc-block li { font-size: 0.9375rem; line-height: 1.6; color: var(--ink); margin-bottom: var(--space-2); }
.doc-block strong { font-weight: 500; }

/* ---- Link row: inline links to sibling pages ---- */
.link-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  padding: var(--space-5) 0;
  border-top: var(--e-hairline);
  border-bottom: var(--e-hairline);
}
.link-row a {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--ink);
  text-decoration: none;
}
.link-row a:hover { color: var(--accent-ink); }

/* ---- Callout: the one thing a page wants the reader to remember ---- */
.callout {
  border: var(--e-hairline);
  border-left: 2px solid var(--accent);
  padding: var(--space-5);
  background: var(--paper-faint);
  max-width: 70ch;
}
.callout__title { font-size: 0.9375rem; font-weight: 500; margin-bottom: var(--space-2); }
.callout__body { font-size: 0.875rem; line-height: 1.6; color: var(--ink); }

/* =========================================================================
 * 31. SUBPAGE COMPONENTS — RESPONSIVE
 * ========================================================================= */

@media (min-width: 768px) {
  .case-grid { grid-template-columns: repeat(2, 1fr); column-gap: var(--space-10); }
  .case-card { grid-template-columns: 1fr auto; align-items: start; }
  .case-card__body { grid-column: 1 / -1; }
  .case-card__metric { text-align: right; }
  .svc-detail__body { grid-template-columns: 1.6fr 1fr; gap: var(--space-10); }
  .glossary-item { grid-template-columns: minmax(140px, 220px) 1fr; gap: var(--space-8); }
  .guide-step { grid-template-columns: 90px 1fr; gap: var(--space-8); }
  .guide-step__body { grid-column: 2; }
  .contact-grid { grid-template-columns: repeat(2, 1fr); column-gap: var(--space-10); }
}

@media (min-width: 1100px) {
  .case-grid { grid-template-columns: repeat(3, 1fr); }
  .case-card { grid-template-columns: 1fr; }
  .case-card__metric { text-align: left; }
  .case-card__body { grid-column: auto; }
}

@media (max-width: 767px) {
  .page-head { padding: var(--space-8) 0 var(--space-6); }
  .page-head__lede { font-size: 1rem; }
  .kv-table th { width: 40%; }
  .kv-table th,
  .kv-table td { padding: var(--space-3) var(--space-4) var(--space-3) 0; }
}

/* ══ FLOW DRAWINGS ══
   The blueprint schematics. Same visual language as the hero drawing:
   a thin frame, a faint plate behind the drawing, and a meta block below.
   The drawings themselves are generated SVGs, one file per language, so
   the text inside them is localised. */

.flow-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-6);
}

.flow-card {
  margin: 0;
  display: flex;
  flex-direction: column;
  border: var(--e-hairline);
  background: var(--paper);
  transition: border-color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}

.flow-card:hover {
  border-color: var(--ink-line);
  transform: translateY(-2px);
}

.flow-card__frame {
  padding: var(--space-5);
  background: var(--paper-faint);
  border-bottom: var(--e-hairline);
}

.flow-card__frame img {
  width: 100%;
  height: auto;
  display: block;
}

.flow-card__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-5);
}

.flow-card__sku {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--paper-muted);
}

.flow-card__name {
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--ink);
}

.flow-card__spec {
  font-size: 0.8125rem;
  color: var(--paper-muted);
  line-height: 1.5;
}

@media (max-width: 600px) {
  .flow-card__frame { padding: var(--space-4); }
  .flow-card__meta { padding: var(--space-4); }
}

/* ══ CONTACT TOPICS ══
   The contact page is a set of topics, each with a copyable email
   template. The pattern came from the live basednode.xyz contact page:
   pick a topic, copy the template, paste it into a mail client. No
   form, no backend, no data collected by a third party. */

.topic-list {
  display: flex;
  flex-direction: column;
  border-top: var(--e-hairline);
}

.topic {
  border-bottom: var(--e-hairline);
}

.topic__head {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "name chevron" "hint chevron";
  align-items: center;
  gap: 0 var(--space-4);
  width: 100%;
  padding: var(--space-5) 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: color var(--dur-base) var(--ease-out);
}

.topic__head:hover { color: var(--ink); }
.topic__head:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.topic__name {
  grid-area: name;
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--ink);
}

.topic__hint {
  grid-area: hint;
  font-size: 0.8125rem;
  color: var(--paper-muted);
  margin-top: var(--space-1);
}

.topic__chevron {
  grid-area: chevron;
  width: 11px;
  height: 11px;
  border-right: 1.5px solid var(--paper-muted);
  border-bottom: 1.5px solid var(--paper-muted);
  transform: rotate(45deg);
  transition: transform var(--dur-base) var(--ease-out);
}

.topic__head[aria-expanded="true"] .topic__chevron {
  transform: rotate(-135deg);
}

.topic__body {
  padding-bottom: var(--space-5);
}

.topic__desc {
  font-size: 0.9375rem;
  color: var(--paper-muted);
  line-height: 1.55;
  max-width: 62ch;
  margin-bottom: var(--space-4);
}

.topic__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.topic__template {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--paper-muted);
  background: var(--paper-faint);
  border: var(--e-hairline);
  padding: var(--space-4);
  margin: 0;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

@media (max-width: 600px) {
  .topic__head { padding: var(--space-4) 0; }
  .topic__name { font-size: 1rem; }
}

/* =========================================================================
 * ABOUT PAGE — the "who I am" section, capability chips and the
 * "how I work" process row.
 *
 * The reference design these came from was a dark page with a purple-to-
 * cyan gradient and glowing circular step badges. That palette does not
 * belong here: this site is warm cream paper with one orange accent, and
 * the design rule on this site is that the accent covers at most 10% of
 * the surface. So the STRUCTURE is borrowed (pill chips with line icons,
 * circular icon badges, four columns) and the COLOUR is rebuilt from the
 * site's own tokens. The step badges use a soft orange tint instead of
 * a purple-blue gradient, which keeps them visible without turning the
 * page into a different brand.
 * ========================================================================= */

/* ── eyebrow pill ────────────────────────────────────────────────────── */
.ab-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: var(--e-hairline);
  border-radius: var(--r-pill);
  background: var(--paper-faint);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--accent-ink);
  margin-bottom: var(--space-4);
}
.ab-eyebrow__icon {
  display: inline-flex;
  color: var(--accent);
}
.ab-eyebrow--center {
  margin-left: auto;
  margin-right: auto;
}

/* ── capability chips ────────────────────────────────────────────────── */
.ab-chips {
  list-style: none;
  margin: var(--space-10) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.ab-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: var(--e-hairline);
  border-radius: var(--r-pill);
  background: var(--paper-faint);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--ink);
  /* The long M.Sc. chip must be able to shrink rather than forcing the
     whole row to overflow on a phone. */
  max-width: 100%;
}
.ab-chip__icon {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--accent);
}
.ab-chip__label {
  min-width: 0;
}

/* ── how I work ──────────────────────────────────────────────────────── */
.ab-how {
  padding: var(--space-12) 0;
  border-top: var(--e-hairline);
  border-bottom: var(--e-hairline);
  background: var(--paper-faint);
}
.ab-how__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 620px;
  margin: 0 auto var(--space-10);
}
.ab-how__title {
  margin: 0 0 var(--space-4);
}
.ab-how__sub {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--paper-muted);
  max-width: 52ch;
}
.ab-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}
.ab-step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.ab-step__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  /* A soft orange tint rather than the reference design's gradient:
     the gradient reads as a different brand on this page. */
  background: var(--accent-95);
  border: 1px solid var(--accent-88);
  color: var(--accent-ink);
  margin-bottom: var(--space-4);
}
.ab-step__title {
  margin: 0 0 var(--space-2);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.ab-step__desc {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--paper-muted);
  max-width: 34ch;
}

@media (min-width: 640px) {
  .ab-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8) var(--space-6);
  }
}

@media (min-width: 900px) {
  .ab-steps {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
  }
  .ab-step__badge {
    width: 62px;
    height: 62px;
  }
  .ab-step__desc {
    max-width: 30ch;
  }
}

@media (max-width: 600px) {
  .ab-how {
    padding: var(--space-10) 0;
  }
  .ab-chip {
    font-size: 0.75rem;
    padding: var(--space-2) var(--space-3);
  }
}

/* ── footer social buttons ─────────────────────────────────────────────
   Inspired by the main basednode.xyz footer, where LinkedIn, Telegram
   and Email sit as bordered pill buttons with a line icon on the left.
   The main site draws them in the purple accent; here they use the
   site's own orange so the footer keeps one accent colour. */
.footer__socials {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}
.footer__social {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--ink-line);
  border-radius: var(--r-2);
  background: var(--ink-22);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--paper-muted);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.footer__social:hover,
.footer__social:focus-visible {
  border-color: var(--accent);
  color: var(--paper);
  background: var(--ink-26);
}
.footer__social-icon {
  display: inline-flex;
  color: var(--accent);
}

/* =========================================================================
 * MOTION
 *
 * The site was completely static apart from the logo pulse: a reader
 * who landed on a page had no signal that it was alive, and a reader who
 * clicked a nav anchor was dropped into the middle of a page with no
 * context.
 *
 * Two systems fix that:
 *   1. A scroll reveal — elements marked [data-reveal] rise into place
 *      the first time they scroll into view.
 *   2. An anchor landing bar — a slim strip naming the page and section
 *      when you arrive at a URL with a #fragment.
 *
 * The house style on basednode.xyz uses a 30px rise over 0.7s with the
 * site's own ease-out curve. This is the same motion, rebuilt on the
 * cream palette.
 * ========================================================================= */

/* The hidden state is keyed on html.js, which the inline head script
   adds before the body renders. That gives three guarantees:

     * no flash — the content is hidden from the very first paint, not
       visible-then-hidden once app.js runs
     * no JavaScript, no hiding — without the .js class the content is
       simply visible, so a crawler or a disabled-script reader sees the
       page normally
     * no permanent invisibility — app.js clears the fallback timer, and
       if it never runs at all the timer forces everything visible

   The selector is [data-reveal] rather than a class, because the class
   would have to be added by JS, which is too late to avoid the flash. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.7s var(--ease-out),
    transform 0.7s var(--ease-out);
}
.js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}
/* The safety net. The inline head script adds this class after four
   seconds if app.js never ran. */
.js.reveal-all [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
}

/* Stagger: siblings in a list come in one after another rather than all
   at once, so a grid of cards unfurls instead of popping as a block.
   The delay is set inline by app.js from the element's index. */
.reveal-target[data-reveal-delay] {
  transition-delay: var(--reveal-delay, 0ms);
}

/* ── anchor landing bar ─────────────────────────────────────────────────
   Appears when the page is loaded at a #fragment. It floats over the top
   of the page rather than pushing content down, so it cannot change the
   layout the anchor was computed against. */
.anchor-bar {
  position: fixed;
  top: calc(var(--header-h) + 10px);
  left: 50%;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  max-width: calc(100vw - var(--space-6));
  padding: var(--space-2) var(--space-4);
  border: var(--e-hairline);
  border-radius: var(--r-pill);
  background: var(--paper);
  box-shadow: 0 6px 24px var(--ink-a10);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transform: translate(-50%, -8px);
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
  pointer-events: none;
}
.anchor-bar.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
.anchor-bar__page {
  color: var(--ink);
  font-weight: 500;
}
.anchor-bar__sep {
  color: var(--accent);
}
.anchor-bar__section {
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 600px) {
  .anchor-bar {
    font-size: 0.6875rem;
    padding: var(--space-2) var(--space-3);
  }
}

/* Reduced motion: everything is simply present. The reveal elements are
   not hidden in the first place, because JS skips the animation
   entirely when this query matches. */
@media (prefers-reduced-motion: reduce) {
  .reveal-target {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .anchor-bar {
    transition: none;
  }
}

/* ── hero entrance ─────────────────────────────────────────────────────
   The hero is the first thing a reader sees, so it animates on load
   rather than waiting for a scroll event. Each piece rises into place
   in reading order: eyebrow, headline, copy, buttons, hint — and the
   diagram comes in beside them, slightly later, so the eye is led from
   the words to the picture.

   The delay is set inline as --d on each element, because the order
   here is a reading order, not a document order. */
.hero-enter {
  opacity: 0;
  animation: bn-hero-enter 0.62s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--d, 0ms);
}
@keyframes bn-hero-enter {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-enter {
    opacity: 1;
    animation: none;
    transform: none;
  }
}

/* =========================================================================
 * SERVICES PAGE — the seven service blocks
 *
 * The old layout was a stack of full-width rows separated by hairlines.
 * Seven of those reads as one long undifferentiated column: the reader
 * cannot see the shape of the offer, and the price, floating far right
 * on its own, looked disconnected from the service it belonged to.
 *
 * Two changes:
 *   1. Each service is a CARD with a border, so the seven read as
 *      discrete units with a clear boundary.
 *   2. The price moves INTO the card head, directly under the title, so
 *      "AI agents" and "from 8,500 DKK" are read together instead of
 *      being flung to opposite edges of a 1200px row.
 * ========================================================================= */
.svc-detail {
  padding: var(--space-6);
  border: var(--e-hairline);
  background: var(--paper);
  transition: border-color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.svc-detail:hover {
  border-color: var(--ink-muted);
}

/* The seven cards sit in a single column with a consistent gap, so the
   eye can run down the list and see seven separate things. */
.svc-detail + .svc-detail {
  margin-top: var(--space-5);
}

.svc-detail__head {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: var(--e-hairline);
}
.svc-detail__title {
  margin: var(--space-2) 0 0;
}
.svc-detail__price {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  color: var(--accent-ink);
  white-space: nowrap;
}
/* The unit of the price — what the number actually means. Without this
   "from 8,500 DKK" is ambiguous: per project? per month? */
.svc-detail__unit {
  font-size: 0.6875rem;
  color: var(--paper-muted);
}
.svc-detail__pricewrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}


.svc-detail__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
.svc-detail__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.svc-detail__list li {
  position: relative;
  padding-left: var(--space-5);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink);
}
.svc-detail__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 10px;
  height: 1px;
  background: var(--accent);
}

@media (min-width: 900px) {
  /* Title on the left, price on the right of the SAME block — close
     enough to read as one unit, unlike the old full-width row. */
  .svc-detail__head {
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: var(--space-6);
  }
  .svc-detail__body {
    grid-template-columns: 1.35fr 1fr;
    gap: var(--space-8);
  }
}

/* =========================================================================
 * PRICING — make the PAYMENT MODEL unmistakable
 *
 * The old cards showed a name ("Fixed price"), a number ("from 4,000")
 * and a paragraph. Nothing said whether the number was a one-off or a
 * monthly cost, so the three options could not be compared.
 *
 * Every card now leads with:
 *   - a "one-off" / "per month" / "share of revenue" tag, in the accent
 *   - the number
 *   - the unit, spelled out
 * and the recommended option is marked.
 * ========================================================================= */
.pricing-card {
  position: relative;
}
.pricing-card__tag {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 2px var(--space-2);
  border: 1px solid var(--accent);
  border-radius: var(--r-pill);
  background: var(--accent-95);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  color: var(--accent-ink);
  margin-bottom: var(--space-2);
}
/* The unit under the number: "one-off", "per month", "of what it earns". */
.pricing-card__unit {
  margin-top: var(--space-1);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--paper-muted);
}
/* The recommended option is marked on the card itself, not only in the
   text, so the eye finds it without reading. */
.pricing-card--accent {
  border-color: var(--accent);
}
.pricing-card__flag {
  position: absolute;
  top: calc(var(--space-5) * -1 - 10px);
  left: var(--space-5);
  padding: 2px var(--space-2);
  background: var(--accent);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.pricing-note {
  margin-top: var(--space-6);
}

/* =========================================================================
 * CLAIM BANDS — the two standing positions
 *
 * "I build it self-hosted" and "the AI bill is a design decision" are
 * not features of one service; they are how Omar works on every job.
 * They were buried in a bullet list under one service, which meant a
 * reader could finish the page without ever knowing either of them.
 *
 * So they get their own bands, right before the pricing — the point in
 * the page where a reader is deciding whether to spend money, which is
 * exactly when these two answers matter.
 * ========================================================================= */
.claim-band {
  padding: var(--space-12) 0;
  border-top: var(--e-hairline);
}
.claim-band--tint {
  background: var(--paper-faint);
  border-bottom: var(--e-hairline);
}
.claim-band__head {
  max-width: 780px;
  margin-bottom: var(--space-8);
}
.claim-band__head h2 {
  margin: var(--space-3) 0 var(--space-4);
}
.claim-band__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  max-width: 980px;
}
.claim-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.claim-points li {
  position: relative;
  padding: var(--space-3) var(--space-4);
  border: var(--e-hairline);
  background: var(--paper);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink);
}
.claim-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--accent);
}
.claim-band--tint .claim-points li {
  background: var(--paper);
}

@media (min-width: 900px) {
  .claim-band__body {
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-8);
    align-items: start;
  }
}

/* The hosting option. It sits inside the self-hosting band rather than
   on its own, because it is the counterpart to it — a reader who has
   just been told "your machine, not mine" should meet the alternative
   before they decide, not after they email. */
.host-option {
  margin-top: var(--space-10);
  padding: var(--space-6);
  border: var(--e-hairline);
  border-left: 2px solid var(--accent);
  background: var(--paper-faint);
  display: grid;
  gap: var(--space-5);
}
.host-option__head {
  display: grid;
  gap: var(--space-3);
}
.host-option__head .micro-label {
  letter-spacing: 0.02em;
}
.claim-points--inline {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}
.claim-points--inline li {
  padding: var(--space-2) var(--space-4);
  font-size: 0.875rem;
}
@media (min-width: 760px) {
  .claim-points--inline {
    grid-template-columns: 1fr 1fr;
  }
}

/* =========================================================================
 * DARK MODE
 *
 * The light palette is warm cream on warm near-black ink. The dark
 * theme inverts that PAIR rather than introducing new hues: the page
 * becomes a deep warm charcoal, the text becomes the cream, and the
 * orange accent stays orange, because the accent is the brand and the
 * brand does not have two values.
 *
 * Every rule in this sheet already paints through the palette
 * variables, so the whole theme is this one block. The alpha variants
 * are re-declared here too — an alpha of the ink colour over a dark
 * surface is invisible, and an alpha of the paper colour over a light
 * surface is invisible, so they have to swap with everything else.
 * ========================================================================= */

[data-theme="dark"] {
  color-scheme: dark;

  --paper:         oklch(16%   0.010 60);   /* #1A1917 — the page */
  --paper-faint:   oklch(20%   0.011 60);   /* #242220 — alt sections */
  --paper-line:    oklch(29%   0.012 60);   /* #3A3734 — hairlines */
  --paper-muted:   oklch(63%   0.010 60);   /* #9C968C — secondary text */

  --ink:           oklch(94%   0.008 80);   /* #EFEBE2 — primary text */
  --ink-raised:    oklch(11%   0.010 60);   /* #141312 — dark sections */
  --ink-line:      oklch(33%   0.012 60);   /* #524E45 */
  --ink-muted:     oklch(58%   0.010 60);   /* #92897C */

  --accent:        oklch(70%   0.175 38);   /* brighter orange for dark */
  --accent-soft:   oklch(30%   0.070 38);
  --accent-deep:   oklch(58%   0.190 38);
  --accent-ink:    oklch(76%   0.150 38);   /* accent as text on dark */

  --positive:      oklch(68%   0.120 152);
  --negative:      oklch(66%   0.160 25);
  --warning:       oklch(78%   0.130 75);

  --ink-a45:       oklch(94% 0.008 80 / 0.45);
  --ink-a28:       oklch(94% 0.008 80 / 0.28);
  --ink-a10:       oklch(94% 0.008 80 / 0.1);
  --ink-22:        oklch(24% 0.012 60);
  --ink-26:        oklch(22% 0.02 45);
  --paper-a55:     oklch(16% 0.010 60 / 0.55);
  --paper-a18:     oklch(16% 0.010 60 / 0.18);
  --accent-a60:    oklch(70% 0.175 38 / 0.6);
  --accent-a20:    oklch(70% 0.175 38 / 0.2);
  --accent-88:     oklch(26% 0.06 38);
  --accent-95:     oklch(22% 0.035 38);
  --positive-a30:  oklch(68% 0.120 152 / 0.3);

  --surface:       var(--paper);
  --surface-2:     var(--paper-faint);
}

/* The transition is on the elements, not on the variables — CSS
   variables cannot be transitioned, and transitioning the root element
   would animate the whole page layout. */
body,
.topnav,
.card,
.flow-card__frame,
.topnav__logo,
.footer,
.btn,
.lang-switch__opt {
  transition: background-color 240ms ease, color 240ms ease, border-color 240ms ease;
}

/* =========================================================================
 * THEME TOGGLE
 *
 * One button, two icons. The sun is shown in light mode and the moon
 * in dark mode, and they cross-fade with a rotation, so the button
 * itself is the feedback: you can see which mode you are in without
 * reading the label.
 * ========================================================================= */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: var(--e-hairline);
  border-radius: var(--r-1);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 240ms ease, color 240ms ease, border-color 240ms ease;
}
.theme-toggle:hover {
  background: var(--paper-faint);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.theme-toggle__icon {
  width: 16px;
  height: 16px;
  grid-area: 1 / 1;
  transition: opacity 220ms ease, transform 320ms var(--ease-out);
}
.theme-toggle__icon--sun {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}
.theme-toggle__icon--moon {
  opacity: 0;
  transform: rotate(-70deg) scale(0.6);
}
[data-theme="dark"] .theme-toggle__icon--sun {
  opacity: 0;
  transform: rotate(70deg) scale(0.6);
}
[data-theme="dark"] .theme-toggle__icon--moon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

/* The particle field. It sits behind everything, and it never eats a
   click — the whole point of a decorative backdrop is that it is
   behind the content, not on top of it. */
#bn-particles {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  transition: opacity 400ms ease;
}
[data-theme="dark"] #bn-particles {
  opacity: 0.85;
}
/* The content has to sit above the canvas. */
.topnav,
main,
footer,
.skip-to-content {
  position: relative;
  z-index: 1;
}

/* =========================================================================
 * SITE MAP
 *
 * A map of the site, one block per page. It is a document, not a
 * dashboard: the entries are a numbered list of what is on each page,
 * with the URL under the title, so a reader can either scan it or click.
 * ========================================================================= */

.sitemap {
  display: grid;
  gap: var(--e-hairline);
  border-top: var(--e-hairline);
}
.sitemap__page {
  padding: var(--space-6) 0;
  border-bottom: var(--e-hairline);
  display: grid;
  gap: var(--space-4);
}
.sitemap__head {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: var(--space-4);
  align-items: baseline;
}
.sitemap__num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
}
.sitemap__title {
  margin: 0;
}
.sitemap__url {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--paper-muted);
  text-decoration: none;
  display: inline-block;
  margin-top: var(--space-1);
}
.sitemap__url:hover {
  color: var(--accent-ink);
  text-decoration: underline;
}
.sitemap__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
  padding-left: 48px;
}
.sitemap__list li {
  position: relative;
  padding-left: var(--space-5);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink);
}
.sitemap__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 10px;
  height: 1px;
  background: var(--accent);
}
@media (max-width: 560px) {
  .sitemap__head {
    grid-template-columns: 32px 1fr;
    gap: var(--space-3);
  }
  .sitemap__list {
    padding-left: 32px;
  }
}

/* =========================================================================
 * FLOW IMAGES — DESKTOP AND PHONE
 *
 * The drawings come in two layouts: the wide sheet (640 units, three
 * panels in a row) and the narrow sheet (360 units, panels stacked).
 *
 * They are swapped by CSS, not by JS, so the right one is chosen at
 * layout time and there is no flash of the wrong drawing. The language
 * is still a runtime choice, so the JS sets the src on both.
 *
 * The breakpoint is 768px, which is where the drawing stops being wide
 * enough to read: at 768 the wide sheet is 622px, which is fine; below
 * that it drops below 400px and the 6-unit labels become 2.5px.
 * ========================================================================= */

.flow-img {
  display: block;
}
.flow-img > img {
  display: block;
  width: 100%;
  height: auto;
}
/* These two rules need the same specificity as ".flow-img > img",
   which is (0,1,1) — a class plus an element. A bare ".flow-img__wide"
   is only (0,1,0) and LOSES, so both images stayed visible. The
   child combinator in the selector fixes the specificity without
   needing !important. */
.flow-img > .flow-img__narrow {
  display: none;
}

/* The dark sheet. The drawing is an <img>, so it cannot inherit the
   page's colours — the dark palette is baked into a separate SVG file
   (flow-{id}-{lang}-d.svg), generated from the same spec and the same
   copy as the light one. The page picks between them with CSS. */
.flow-img > .flow-img__dark {
  display: none;
}
[data-theme="dark"] .flow-img > .flow-img__wide:not(.flow-img__dark) {
  display: none;
}
[data-theme="dark"] .flow-img > .flow-img__narrow:not(.flow-img__dark) {
  display: none;
}
[data-theme="dark"] .flow-img > .flow-img__dark.flow-img__wide {
  display: block;
}
[data-theme="dark"] .flow-img > .flow-img__dark.flow-img__narrow {
  display: none;
}

/* Which sheet to use.

   A wide sheet has a 640-unit viewBox with 6-unit labels. It only
   stays readable when it is displayed at 100% or close to it: at 313px
   (the grid card) a 6-unit label renders at 2.9px, which is not text.

   The narrow sheet has a 360-unit viewBox with 9-unit labels, so at
   313px its labels render at 7.8px — readable.

   So the rule is not "phone vs desktop", it is "is there room for
   the wide sheet to stay legible". A sheet that is displayed full
   width (the hero, 441px and up) keeps the wide sheet. A sheet in a
   grid card gets the narrow sheet, because the card is narrow.

   The card is at most 360px of the container, and the wide sheet
   needs roughly 620px to keep its labels above 6px. Below a viewport
   of 1024px the container itself narrows, so below that the whole
   site gets the narrow sheet. */
@media (max-width: 1023px) {
  .flow-img > .flow-img__wide {
    display: none;
  }
  .flow-img > .flow-img__narrow {
    display: block;
  }
  /* Same collision as in the grid card: the dark narrow carries the
     same class, so it has to be switched off in light mode. */
  .flow-img > .flow-img__dark.flow-img__narrow {
    display: none;
  }
  [data-theme="dark"] .flow-img > .flow-img__dark.flow-img__wide {
    display: none;
  }
  [data-theme="dark"] .flow-img > .flow-img__dark.flow-img__narrow {
    display: block;
  }
}

/* The grid card always shows the narrow sheet, at any viewport
   width — the card is 313px wide and the wide sheet cannot work
   there no matter how wide the browser is. The rule is scoped to the
   card so it does not touch the hero sheet. */
.flow-grid .flow-img > .flow-img__wide {
  display: none;
}
.flow-grid .flow-img > .flow-img__narrow {
  display: block;
}

/* The card rules above also match the DARK narrow sheet, because it
   carries both classes. So in light mode the dark sheets have to be
   switched off explicitly, and in dark mode the light ones. Without
   this, a card shows two drawings stacked on top of each other. */
.flow-grid .flow-img > .flow-img__dark {
  display: none;
}
[data-theme="dark"] .flow-grid .flow-img > .flow-img__dark.flow-img__wide {
  display: none;
}
[data-theme="dark"] .flow-grid .flow-img > .flow-img__dark.flow-img__narrow {
  display: block;
}


/* ═══════════════════════════════════════════════════════════════
   THE FREE LIBRARY
   A directory, not a grid of cards. There are 75 entries — cards
   would turn it into a wall. Each entry is a ruled row: name on the
   left, what it does and what the free version gives on the right.
   ═══════════════════════════════════════════════════════════════ */

.rl-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.25rem;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.rl-meta__sep {
  color: var(--accent);
}

.rl-directory {
  margin-top: 3.5rem;
  border-top: 1px solid var(--ink-line);
}

.rl-group {
  padding: 2.5rem 0 0;
}
.rl-group + .rl-group {
  margin-top: 2.5rem;
  border-top: 1px solid var(--ink-line);
}

.rl-group__title {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.25rem;
}

/* The rows. A thin rule between them, and the whole row is a
   click target for the name — but only the name, so the "free"
   line stays readable instead of being a link. */
.rl-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rl-item {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: 0.35rem 2.5rem;
  padding: 1.125rem 0;
  border-bottom: 1px solid var(--ink-line);
}
.rl-item:last-child {
  border-bottom: none;
}

.rl-item__head {
  grid-column: 1;
  grid-row: 1 / span 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  align-self: start;
}

.rl-item__name {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-a60);
  transition: border-color 0.18s ease, color 0.18s ease;
}
.rl-item__name:hover {
  color: var(--accent-deep);
  border-bottom-color: var(--accent);
}

.rl-item__open {
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-a45);
}
.rl-item__name:hover + .rl-item__open {
  color: var(--accent);
}

.rl-item__what,
.rl-item__free,
.rl-item__who {
  grid-column: 2;
  font-size: 0.9375rem;
  line-height: 1.55;
  margin: 0;
}
.rl-item__what {
  color: var(--ink);
}
.rl-item__free {
  /* 13px secondary text. --ink-muted is tuned for body-size text;
     at this size the library uses --ink-a45, which is darker and
     still clearly secondary. */
  color: var(--ink-a45);
}
.rl-item__who {
  font-size: 0.8125rem;
  color: var(--ink-a45);
}

.rl-item__freetag,
.rl-item__wholabel {
  color: var(--ink);
  font-weight: 600;
}

/* The catch. This is the whole point of the page: a free tier that
   is really a trial, or so small it is useless in daily work, has to
   be visible — not buried in a footnote. */
.rl-trap {
  grid-column: 2;
  margin: 0.4rem 0 0;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper-faint);
  border-left: 2px solid var(--warning);
  border-radius: 0 3px 3px 0;
}
.rl-trap__label {
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.75rem;
  color: var(--warning);
  margin-right: 0.15rem;
}

.rl-foot {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--ink-line);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--ink-a45);
  max-width: 44rem;
}

/* Narrow screens: the two columns become one, and the name sits on
   top of the description. */
@media (max-width: 767px) {
  .rl-item {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.4rem;
    padding: 1rem 0;
  }
  .rl-item__head {
    grid-column: 1;
    grid-row: auto;
    flex-direction: row;
    align-items: baseline;
    gap: 0.6rem;
    margin-bottom: 0.25rem;
  }
  .rl-item__what,
  .rl-item__free,
  .rl-item__who,
  .rl-trap {
    grid-column: 1;
  }
  .rl-trap {
    margin-top: 0.6rem;
  }
}