@charset "UTF-8";
/* ==========================================================================
   Double Kissan — design system
   Editorial-industrial. Warm paper base, near-black ink, one accent.
   Written mobile-first. No framework, no reset library.
   ========================================================================== */

/* --------------------------------------------------------------- 1. Fonts */

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

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

/* -------------------------------------------------------------- 2. Tokens */

:root {
  /* Ink & paper -------------------------------------------------------- */
  --ink:        #14110f;
  --ink-2:      #3a3531;
  --muted:      #6e6660;
  --muted-2:    #948b83;
  --line:       #e3ddd3;
  --line-2:     #cdc5b8;
  --paper:      #faf8f4;
  --paper-2:    #f2eee6;
  --paper-3:    #eae4d8;
  --white:      #ffffff;

  /* Brand -------------------------------------------------------------- */
  --red:        #d31f26;   /* from the Double Kissan wordmark */
  --red-dark:   #a5161c;
  --red-tint:   #fbeceb;
  --blue:       #10528c;   /* product colour: blue sheeting */
  --blue-tint:  #e9f0f7;
  --yellow:     #f0b323;   /* product colour: yellow sheeting */
  --yellow-tint:#fdf4e0;

  /* Feedback ----------------------------------------------------------- */
  --ok:         #1f7a4d;
  --ok-tint:    #e8f4ee;
  --warn:       #9a6b00;
  --warn-tint:  #fdf3dd;
  --err:        #b3261e;
  --err-tint:   #fdecea;

  /* Type --------------------------------------------------------------- */
  --font-display: "Archivo", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --font-body: "InterVar", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --step--2: clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.91rem);
  --step-0:  clamp(1.00rem, 0.97rem + 0.16vw, 1.09rem);
  --step-1:  clamp(1.18rem, 1.12rem + 0.30vw, 1.36rem);
  --step-2:  clamp(1.40rem, 1.29rem + 0.55vw, 1.79rem);
  --step-3:  clamp(1.66rem, 1.47rem + 0.94vw, 2.36rem);
  --step-4:  clamp(1.97rem, 1.67rem + 1.50vw, 3.11rem);
  /* Deliberately gentler at the small end: a hero H1 should not consume a whole
     phone screen before the visitor reaches the first call to action. */
  --step-5:  clamp(1.95rem, 1.45rem + 2.5vw, 4.09rem);
  --step-6:  clamp(2.30rem, 1.60rem + 3.6vw, 5.39rem);

  /* Space -------------------------------------------------------------- */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.5rem;
  --s-6:  2rem;
  --s-7:  3rem;
  --s-8:  4rem;
  --s-9:  6rem;
  --s-10: 8rem;

  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);
  --wrap: 78rem;
  --wrap-narrow: 46rem;
  --gutter: clamp(1.15rem, 0.6rem + 2.4vw, 2.75rem);

  /* Shape -------------------------------------------------------------- */
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-pill: 999px;

  --ring: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink);
  --shadow-1: 0 1px 2px rgb(20 17 15 / 0.05);
  --shadow-2: 0 8px 28px -14px rgb(20 17 15 / 0.22);

  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur: 150ms;
}

/* --------------------------------------------------------------- 3. Reset */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  /* Belt-and-braces alongside body's overflow-x: hidden below. A wide table
     inside a horizontally-scrollable .table-wrap can still leave the root
     element's own scrollable area wider than the viewport, and iOS Safari in
     particular sometimes honours the root scroller over body's. Without this,
     that shows up as a rubber-band horizontal scroll gap on an otherwise
     correctly clipped page. */
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.62;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); letter-spacing: -0.014em; }
h4 { font-size: var(--step-0); letter-spacing: -0.008em; }
/* Component-scoped headings are h3 for a valid outline; their visual size is
   set per component below rather than by the tag. */

p, ul, ol, dl, figure, table, blockquote { margin: 0 0 var(--s-4); }
p { text-wrap: pretty; }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-color: var(--red); }

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

button, input, select, textarea { font: inherit; color: inherit; }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-7) 0; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: var(--r-1);
}

::selection { background: var(--ink); color: var(--paper); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* -------------------------------------------------------------- 4. Layout */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow { max-width: var(--wrap-narrow); }
.wrap--wide { max-width: 90rem; }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.section--paper2 { background: var(--paper-2); }
.section--ink { background: var(--ink); color: var(--paper); }
.section--ink h1, .section--ink h2, .section--ink h3 { color: var(--white); }
.section--ink .lede, .section--ink p { color: #d7d0c8; }
.section--line-top { border-top: 1px solid var(--line); }

.grid { display: grid; gap: var(--s-5); }
/* See the matching comment on .split below: without this, a card containing
   an unusually long unbreakable string (a URL, a long SKU) can force its
   whole track — and the page — wider than the viewport. */
.grid > * { min-width: 0; }
.grid--2 { grid-template-columns: minmax(0, 1fr); }
.grid--3 { grid-template-columns: minmax(0, 1fr); }
.grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }

@media (min-width: 40em) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 62em) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Editorial two-column: sticky rail beside flowing content. */
.split { display: grid; gap: var(--s-6); }
/* Grid items default to a content-based automatic minimum size, which lets a
   wide table (or any long unbreakable content) force the whole column — and
   with it the page — wider than the viewport instead of scrolling within its
   own .table-wrap. min-width: 0 opts every direct child out of that so
   overflow-x: auto on the table wrapper actually contains the overflow. */
.split > * { min-width: 0; }
@media (min-width: 62em) {
  .split { grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--s-8); align-items: start; }
  .split__rail { position: sticky; top: 6.5rem; }
  .split--rail-left { grid-template-columns: 17rem minmax(0, 1fr); }
}

.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-6); }

/* ---------------------------------------------------------- 5. Typography */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0 0 var(--s-4);
  font-family: var(--font-display);
  font-size: var(--step--2);
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
}
.eyebrow::before {
  content: "";
  width: 1.5rem;
  height: 2px;
  background: currentColor;
}
.section--ink .eyebrow { color: var(--yellow); }

.lede {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 44ch;
}

.measure { max-width: 68ch; }
.measure-sm { max-width: 54ch; }

.section-head { max-width: 52rem; margin-bottom: var(--s-7); }
.section-head p { color: var(--muted); font-size: var(--step-0); max-width: 60ch; }

.display-xl { font-size: var(--step-6); letter-spacing: -0.032em; }

.text-muted { color: var(--muted); }
.text-sm { font-size: var(--step--1); }
.text-xs { font-size: var(--step--2); }

.num {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -0.03em;
}

/* -------------------------------------------------------------- 6. Header */

.skip {
  position: absolute;
  left: var(--s-4);
  top: -10rem;
  z-index: 200;
  padding: var(--s-3) var(--s-4);
  background: var(--ink);
  color: var(--white);
  border-radius: var(--r-2);
  transition: top var(--dur) var(--ease);
}
.skip:focus { top: var(--s-4); }

.topbar {
  display: none;
  background: var(--ink);
  color: #cfc7bf;
  font-size: var(--step--2);
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  min-height: 2.4rem;
}
.topbar a { color: #efe9e1; text-decoration: none; }
.topbar a:hover { color: var(--white); text-decoration: underline; }
.topbar__group { display: flex; align-items: center; gap: var(--s-5); }
@media (min-width: 62em) { .topbar { display: block; } }

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 4.25rem;
}

.brand { display: inline-flex; align-items: center; gap: var(--s-3); text-decoration: none; }
.brand img { height: 2.35rem; width: auto; }
.brand__text { display: none; }
@media (min-width: 48em) {
  .brand img { height: 2.75rem; }
  .brand__text { display: block; line-height: 1.15; }
}
.brand__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 750;
  font-size: var(--step-0);
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.brand__sub { display: block; font-size: 0.68rem; color: var(--muted); letter-spacing: 0.03em; white-space: nowrap; }

/* Desktop navigation ---------------------------------------------------- */
.nav { display: none; }
@media (min-width: 62em) { .nav { display: block; } }

.nav__list { display: flex; align-items: center; gap: var(--s-1); list-style: none; margin: 0; padding: 0; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.55rem 0.7rem;
  border-radius: var(--r-2);
  font-size: var(--step--1);
  font-weight: 550;
  white-space: nowrap;
  text-decoration: none;
  color: var(--ink-2);
  background: none;
  border: 0;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav__link:hover { background: var(--paper-2); color: var(--ink); }
.nav__link[aria-expanded="true"] { background: var(--paper-3); color: var(--ink); }
.nav__item--current > .nav__link { color: var(--ink); box-shadow: inset 0 -2px 0 var(--red); }
.nav__caret { width: 0.55rem; height: 0.55rem; transition: transform var(--dur) var(--ease); }
.nav__link[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }

.mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--white);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-2);
  display: none;
}
.mega[data-open="true"] { display: block; }
.mega__inner {
  display: grid;
  grid-template-columns: 16rem 1fr;
  gap: var(--s-7);
  padding-block: var(--s-6);
}
.mega__intro h3 { font-size: var(--step-1); margin-bottom: var(--s-2); }
.mega__intro p { font-size: var(--step--1); color: var(--muted); }
.mega__all {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: var(--s-4);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--red);
  text-decoration: none;
}
.mega__all:hover { text-decoration: underline; }
.mega__links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.15rem var(--s-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.mega__links a {
  display: block;
  padding: 0.45rem 0.6rem;
  border-radius: var(--r-2);
  font-size: var(--step--1);
  text-decoration: none;
  color: var(--ink-2);
}
.mega__links a:hover { background: var(--paper-2); color: var(--ink); }

.header__actions { display: flex; align-items: center; gap: var(--s-2); }
/* Specificity note: .btn also sets display, and is declared later in this file.
   These rules are scoped to .header so the hide/show actually wins. */
.header .header__cta { display: none; }
@media (min-width: 48em) { .header .header__cta { display: inline-flex; } }

/* Mobile drawer --------------------------------------------------------- */
.burger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  background: var(--white);
  font-size: var(--step--1);
  font-weight: 600;
  cursor: pointer;
}
@media (min-width: 62em) { .burger { display: none; } }
.burger__bars { position: relative; width: 1rem; height: 0.7rem; }
.burger__bars span {
  position: absolute; left: 0; width: 100%; height: 2px; background: var(--ink);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.burger__bars span:nth-child(1) { top: 0; }
.burger__bars span:nth-child(2) { top: 0.34rem; }
.burger__bars span:nth-child(3) { top: 0.68rem; }
.burger[aria-expanded="true"] .burger__bars span:nth-child(1) { transform: translateY(0.34rem) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bars span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__bars span:nth-child(3) { transform: translateY(-0.34rem) rotate(-45deg); }

.drawer {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: var(--paper);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: var(--s-9);
  display: none;
}
.drawer[data-open="true"] { display: block; }
@media (min-width: 62em) { .drawer { display: none !important; } }

.drawer__top {
  position: sticky; top: 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4);
  min-height: 4.25rem;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.drawer__close {
  padding: 0.55rem 0.8rem; border: 1px solid var(--line-2); border-radius: var(--r-2);
  background: var(--white); font-weight: 600; font-size: var(--step--1); cursor: pointer;
}
.drawer__group { border-bottom: 1px solid var(--line); }
.drawer__toggle {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  width: 100%; padding: var(--s-4) 0; background: none; border: 0; cursor: pointer;
  font-family: var(--font-display); font-size: var(--step-1); font-weight: 650;
  letter-spacing: -0.015em; text-align: left;
}
.drawer__toggle .nav__caret { width: 0.75rem; height: 0.75rem; flex: none; }
.drawer__panel { display: none; padding-bottom: var(--s-4); }
.drawer__panel[data-open="true"] { display: block; }
.drawer__panel ul { list-style: none; margin: 0; padding: 0; }
.drawer__panel a {
  display: block; padding: 0.6rem 0; font-size: var(--step-0);
  color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--paper-3);
}
.drawer__panel a:hover { color: var(--red); }
.drawer__actions { display: grid; gap: var(--s-3); padding-block: var(--s-6); }

/* ------------------------------------------------------------- 7. Buttons */

.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--white);
  --btn-bd: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.82rem 1.35rem;
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-2);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 650;
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
    color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary { --btn-bg: var(--red); --btn-bd: var(--red); }
.btn--primary:hover { --btn-bg: var(--red-dark); --btn-bd: var(--red-dark); }

.btn--ink:hover { --btn-bg: #000; }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line-2); }
.btn--ghost:hover { --btn-bd: var(--ink); --btn-bg: var(--white); }

.btn--onink { --btn-bg: var(--white); --btn-fg: var(--ink); --btn-bd: var(--white); }
.btn--onink-ghost { --btn-bg: transparent; --btn-fg: var(--white); --btn-bd: #55504b; }
.btn--onink-ghost:hover { --btn-bd: var(--white); }

.btn--wa { --btn-bg: #1faa53; --btn-bd: #1faa53; }
.btn--wa:hover { --btn-bg: #179044; --btn-bd: #179044; }

.btn--lg { padding: 1rem 1.7rem; font-size: var(--step-0); }
.btn--sm { padding: 0.55rem 0.9rem; font-size: var(--step--2); }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
/* On narrow screens, stacked buttons of different widths read as untidy and
   give a smaller tap target to the secondary action. Equalise them. */
@media (max-width: 30em) {
  .btn-row > .btn { flex: 1 1 100%; }
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: var(--step--1);
  color: var(--red);
  text-decoration: none;
}
.link-arrow::after { content: "→"; transition: transform var(--dur) var(--ease); }
.link-arrow:hover::after { transform: translateX(3px); }
.link-arrow:hover { text-decoration: underline; }

/* --------------------------------------------------------------- 8. Cards */

.card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: var(--s-5);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}
a.card:hover {
  border-color: var(--line-2);
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}
.card h3 { margin-bottom: var(--s-2); }
.card p { font-size: var(--step--1); color: var(--muted); }
.card__foot { margin-top: auto; padding-top: var(--s-4); }

/* GSM selector cards ----------------------------------------------------- */
.gsm-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
}
@media (min-width: 48em) { .gsm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 75em) { .gsm-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.gsm {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-4) var(--s-5);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}
.gsm::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: var(--gsm-bar, 30%);
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--blue) 14%, transparent));
  pointer-events: none;
}
.gsm:hover { border-color: var(--ink); transform: translateY(-3px); box-shadow: var(--shadow-2); }
.gsm__num { font-family: var(--font-display); font-size: var(--step-4); font-weight: 780; letter-spacing: -0.04em; line-height: 1; }
.gsm__unit { font-size: var(--step--1); font-weight: 600; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }
.gsm__note { position: relative; font-size: var(--step--2); color: var(--muted); line-height: 1.45; }

/* Application cards ------------------------------------------------------ */
.app-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}
.app-card:hover { border-color: var(--line-2); box-shadow: var(--shadow-2); transform: translateY(-2px); }
.app-card__body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); flex: 1; }
.app-card__body h3 { font-size: var(--step-1); }
.app-card__body p { font-size: var(--step--1); color: var(--muted); margin: 0; }
.app-card__more { margin-top: auto; padding-top: var(--s-3); font-size: var(--step--2); font-weight: 650; color: var(--red); }

/* Article cards ---------------------------------------------------------- */
.article-card {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-5) 0;
  border-top: 1px solid var(--line);
  text-decoration: none; color: inherit;
}
.article-card:hover h3 { color: var(--red); }
.article-card__meta { display: flex; flex-wrap: wrap; gap: var(--s-3); font-size: var(--step--2); color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.article-card p { font-size: var(--step--1); color: var(--muted); margin: 0; }

/* Path cards (bulk / dealer / export) ------------------------------------ */
.path {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-6);
  border: 1px solid #3d3733;
  border-radius: var(--r-3);
  background: #1c1815;
  color: #d7d0c8;
  text-decoration: none;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.path:hover { background: #241f1b; border-color: #5b524c; transform: translateY(-2px); }
.path h3 { color: var(--white); font-size: var(--step-2); }
.path p { font-size: var(--step--1); color: #b8afa7; margin: 0; }
.path__index { font-family: var(--font-display); font-size: var(--step--2); font-weight: 700; letter-spacing: 0.15em; color: var(--yellow); }
.path__more { margin-top: auto; padding-top: var(--s-4); font-weight: 650; font-size: var(--step--1); color: var(--yellow); }

/* -------------------------------------------------------------- 9. Tables */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  background: var(--white);
  -webkit-overflow-scrolling: touch;
}
.table-wrap + .table-note { margin-top: var(--s-3); font-size: var(--step--2); color: var(--muted); }

table.spec {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
  min-width: 34rem;
}
table.spec caption {
  padding: var(--s-4) var(--s-5) 0;
  text-align: left;
  font-size: var(--step--2);
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
table.spec th,
table.spec td {
  padding: 0.8rem var(--s-5);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--paper-3);
}
table.spec thead th {
  font-family: var(--font-display);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
table.spec tbody tr:last-child th,
table.spec tbody tr:last-child td { border-bottom: 0; }
table.spec tbody th { font-weight: 600; color: var(--ink); width: 38%; }
table.spec td { color: var(--ink-2); }
table.spec tbody tr:hover td,
table.spec tbody tr:hover th { background: var(--paper); }

/* ------------------------------------------------- 10. Answer & callouts */

.answer {
  position: relative;
  padding: var(--s-5) var(--s-5) var(--s-5) calc(var(--s-5) + 4px);
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--red);
  border-radius: var(--r-3);
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--ink);
}
.answer strong { font-weight: 650; }

.quick-answer {
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  background: var(--white);
  overflow: hidden;
}
.quick-answer__head {
  padding: var(--s-3) var(--s-5);
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-display);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.quick-answer dl { display: grid; grid-template-columns: 1fr; margin: 0; }
.quick-answer dt {
  padding: 0.7rem var(--s-5) 0;
  font-size: var(--step--2);
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.quick-answer dd {
  margin: 0;
  padding: 0.1rem var(--s-5) 0.7rem;
  font-size: var(--step--1);
  border-bottom: 1px solid var(--paper-3);
}
.quick-answer dd:last-of-type { border-bottom: 0; }
@media (min-width: 34em) {
  .quick-answer dl { grid-template-columns: 42% 58%; }
  .quick-answer dt { padding: 0.65rem var(--s-4) 0.65rem var(--s-5); border-bottom: 1px solid var(--paper-3); }
  .quick-answer dd { padding: 0.65rem var(--s-5) 0.65rem 0; }
  .quick-answer dt:last-of-type { border-bottom: 0; }
}

/* Light components dropped inside a dark section must not inherit its text
   colour. Scoped here once rather than patched per template. */
.section--ink .quick-answer,
.section--ink .card,
.section--ink .callout,
.section--ink .answer,
.section--ink .toc,
.section--ink .table-wrap,
.section--ink .split-cta {
  color: var(--ink);
}
.section--ink .quick-answer dd,
.section--ink .card p,
.section--ink .toc a,
.section--ink .table-wrap td { color: var(--ink-2); }
.section--ink .quick-answer dt,
.section--ink .table-wrap th { color: var(--muted); }
.section--ink .quick-answer__head { color: var(--white); }
.section--ink .card h3,
.section--ink .split-cta h3 { color: var(--ink); }

.callout {
  padding: var(--s-5);
  background: var(--yellow-tint);
  border: 1px solid #e8d5a8;
  border-radius: var(--r-3);
}
.callout h3 {
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7a5600;
  margin-bottom: var(--s-2);
}
.callout p { font-size: var(--step--1); color: var(--ink-2); margin: 0; }

.callout--safety { background: var(--err-tint); border-color: #f0c4c0; }
.callout--safety h3 { color: #8c1a14; }

/* Pending-data marker -----------------------------------------------------
   Deliberately styled as a normal, designed UI chip rather than a code token
   — no monospace, no brackets, no shouting caps. It should read as "we are
   telling you this honestly" rather than "this is unfinished markup". */
.dk-pill {
  display: inline-block;
  padding: 0.05em 0.6em;
  border: 1px solid #dfc27a;
  border-radius: 999px;
  background: var(--yellow-tint);
  color: #7a5600;
  font-family: var(--font-body);
  font-size: 0.86em;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.5;
  white-space: normal;
}

/* --------------------------------------------------- 11. Image slots */

.slot {
  position: relative;
  margin: 0;
  aspect-ratio: var(--slot-ratio, 4 / 3);
  border: 1px dashed var(--line-2);
  border-radius: var(--r-3);
  background: var(--paper-2);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.slot__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgb(20 17 15 / 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgb(20 17 15 / 0.045) 1px, transparent 1px);
  background-size: 14px 14px;
}
.slot--weave .slot__grid {
  background-image:
    repeating-linear-gradient(45deg, rgb(16 82 140 / 0.10) 0 4px, transparent 4px 8px),
    repeating-linear-gradient(-45deg, rgb(16 82 140 / 0.10) 0 4px, transparent 4px 8px);
  background-size: auto;
}
.slot--factory { background: var(--paper-3); }
.slot--scene .slot__grid {
  background-image: repeating-linear-gradient(90deg, rgb(20 17 15 / 0.05) 0 1px, transparent 1px 28px);
  background-size: auto;
}
.slot__label {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: 100%;
  padding: var(--s-4);
  background: linear-gradient(0deg, rgb(250 248 244 / 0.96), rgb(250 248 244 / 0));
}
.slot__tag {
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
}
.slot__text { font-size: var(--step--2); color: var(--ink-2); line-height: 1.4; }

/* Real, production photography — same aspect-ratio box as .slot so a photo
   can replace a placeholder slot without reflowing the surrounding grid. */
.photo {
  position: relative;
  margin: 0;
  aspect-ratio: var(--slot-ratio, 4 / 3);
  border-radius: var(--r-3);
  overflow: hidden;
  background: var(--paper-2);
}
.photo picture,
.photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photo__credit {
  position: absolute;
  left: var(--s-3);
  bottom: var(--s-3);
  padding: 0.3em 0.65em;
  font-size: var(--step--2);
  letter-spacing: 0.04em;
  color: #fff;
  background: rgb(20 17 15 / 0.55);
  border-radius: var(--r-2);
  backdrop-filter: blur(2px);
}

/* ------------------------------------------ 11b. Knowledge-centre diagrams
   Lightweight inline SVG explainers for the resources section — no raster
   asset, no network request, and honest about being a diagram rather than a
   photo. Shared classes so every variant in dk_diagram() (app/helpers.php)
   stays visually consistent. */

.diagram {
  margin: var(--s-6) 0;
  padding: var(--s-5);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
}
.diagram svg { display: block; width: 100%; height: auto; }
.diagram text { font-family: var(--font-body); fill: var(--ink-2); }

.dkd-label   { font-size: 13px; font-weight: 650; fill: var(--ink); }
.dkd-value   { font-size: 12px; fill: var(--muted); }
.dkd-foot    { font-size: 11.5px; fill: var(--muted); }
.dkd-track   { fill: var(--paper-3); }
.dkd-bar     { fill: var(--blue); }
.dkd-bar--base { fill: var(--muted-2); }

.dkd-object  { fill: var(--paper-3); stroke: var(--line-2); stroke-width: 1.5; }
.dkd-object-label { font-size: 12px; fill: var(--muted); }
.dkd-ground  { fill: var(--line); }
.dkd-sheet   { fill: none; stroke: var(--blue); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.dkd-sheet-fill { fill: rgb(16 82 140 / 0.10); stroke: var(--blue); stroke-width: 2.5; }
.dkd-dim     { fill: none; stroke: var(--muted-2); stroke-width: 1.25; }
.dkd-dim-label { font-size: 11.5px; fill: var(--muted); }
.dkd-eyelet  { fill: var(--ink); }
.dkd-eyelet--warn { fill: var(--warn); }
.dkd-callout-line { stroke: var(--warn); stroke-width: 1.25; stroke-dasharray: 2 3; }
.dkd-callout-label { font-size: 11.5px; fill: var(--ink-2); }
.dkd-rail    { stroke: var(--line-2); stroke-width: 2; }
.dkd-load    { fill: var(--paper); stroke: var(--line-2); stroke-width: 1.25; stroke-dasharray: 3 3; }

.dkd-col-head { font-size: 13px; font-weight: 650; fill: var(--ink); }
.dkd-layer-label { font-size: 11.5px; fill: var(--muted); }
.dkd-layer--weave      { fill: var(--muted-2); }
.dkd-layer--coat-thin  { fill: var(--blue); opacity: 0.55; }
.dkd-layer--fabric     { fill: var(--line-2); }
.dkd-layer--coat-thick { fill: var(--blue); opacity: 0.75; }
.dkd-divider { stroke: var(--line); stroke-width: 1; }

@media (max-width: 42em) {
  .diagram { padding: var(--s-4); }
}

/* ---------------------------------------------------------- 12. Hero */

.hero {
  position: relative;
  padding-block: clamp(2.5rem, 1rem + 6vw, 5rem) clamp(3rem, 1.5rem + 6vw, 5.5rem);
  background:
    radial-gradient(120% 90% at 100% 0%, var(--paper-2) 0%, transparent 60%),
    var(--paper);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.hero__grid { display: grid; gap: var(--s-7); align-items: center; }
@media (min-width: 62em) {
  .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--s-8); }
}
.hero h1 { margin-bottom: var(--s-5); }
.hero .lede { max-width: 42ch; margin-bottom: var(--s-6); }

.hero__facts {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  margin-bottom: var(--s-6);
  list-style: none; padding: 0;
}
.hero__facts li {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--white);
  font-size: var(--step--2);
  font-weight: 550;
  color: var(--ink-2);
}
.hero__facts li::before { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--red); }

.hero__retail {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3);
  margin-top: var(--s-6); padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  font-size: var(--step--1); color: var(--muted);
}
.hero__retail a { font-weight: 600; color: var(--ink); }

.hero__panel { display: grid; gap: var(--s-3); }
.hero__panel-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }

.stat-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  overflow: hidden;
}
@media (min-width: 48em) { .stat-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat { background: var(--white); padding: var(--s-5); }
.stat__value { font-family: var(--font-display); font-size: var(--step-2); font-weight: 750; letter-spacing: -0.03em; line-height: 1.1; }
.stat__label { font-size: var(--step--2); color: var(--muted); margin-top: 0.2rem; }

/* ----------------------------------------------------- 13. Breadcrumbs */

.crumbs { padding-block: var(--s-4); border-bottom: 1px solid var(--line); background: var(--paper); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; list-style: none; margin: 0; padding: 0; font-size: var(--step--2); color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs li + li::before { content: "/"; margin-right: 0.35rem; color: var(--line-2); }
.crumbs [aria-current="page"] { color: var(--ink); font-weight: 550; }

/* ------------------------------------------------------ 14. Accordion */

.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-5) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 650;
  letter-spacing: -0.012em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  flex: none;
  font-size: var(--step-2);
  font-weight: 400;
  line-height: 1;
  color: var(--red);
  transition: transform var(--dur) var(--ease);
}
.faq-item[open] summary::after { content: "−"; }
.faq-item summary:hover { color: var(--red); }
.faq-item__body { padding-bottom: var(--s-5); max-width: 68ch; color: var(--ink-2); }

/* ---------------------------------------------------------- 15. Prose */

.prose { max-width: 42rem; }
.prose > * + * { margin-top: var(--s-4); }
.prose h2 { margin-top: var(--s-8); font-size: var(--step-2); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: var(--s-6); font-size: var(--step-1); }
.prose p { color: var(--ink-2); }
.prose ul, .prose ol { padding-left: 1.15rem; color: var(--ink-2); }
.prose li + li { margin-top: 0.4rem; }
.prose .table-wrap, .prose .callout, .prose .answer { margin-top: var(--s-6); }
.prose .table-wrap + p { margin-top: var(--s-3); }

.deflist { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-4); }
.deflist > li { padding-left: var(--s-4); border-left: 2px solid var(--paper-3); }
.deflist h3 { font-size: var(--step-0); letter-spacing: -0.008em; margin-bottom: 0.2rem; }
.deflist p { font-size: var(--step--1); color: var(--muted); margin: 0; }

.steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; gap: var(--s-5); }
.steps > li { counter-increment: step; display: grid; grid-template-columns: 2rem 1fr; gap: var(--s-4); align-items: start; }
.steps > li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display); font-size: var(--step--2); font-weight: 700;
  letter-spacing: 0.05em; color: var(--red);
  padding-top: 0.25rem;
}
.steps h3 { font-size: var(--step-0); letter-spacing: -0.008em; margin-bottom: 0.2rem; }
.steps p { font-size: var(--step--1); color: var(--muted); margin: 0; }

.toc { padding: var(--s-5); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-3); }
.toc h2 { font-size: var(--step--2); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s-3); }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.toc a { font-size: var(--step--1); color: var(--ink-2); text-decoration: none; }
.toc a:hover { color: var(--red); text-decoration: underline; }

/* ----------------------------------------------------------- 16. Forms */

.form { display: grid; gap: var(--s-5); }
.form__grid { display: grid; gap: var(--s-4); }
@media (min-width: 40em) { .form__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 48em) { .form__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.field { display: grid; gap: 0.35rem; }
.field label { font-size: var(--step--1); font-weight: 600; }
.field .hint { font-size: var(--step--2); color: var(--muted); }
.field .req { color: var(--red); }

.input, .select, .textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  background: var(--white);
  font-size: var(--step-0);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.input:focus, .select:focus, .textarea:focus {
  outline: 0;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgb(20 17 15 / 0.08);
}
.textarea { min-height: 7rem; resize: vertical; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236e6660' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.85rem center; background-size: 0.7rem; padding-right: 2.2rem; }

.field--error .input, .field--error .select, .field--error .textarea { border-color: var(--err); }
.field__error { font-size: var(--step--2); color: var(--err); font-weight: 550; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__note { font-size: var(--step--2); color: var(--muted); }

.alert { padding: var(--s-4) var(--s-5); border-radius: var(--r-3); border: 1px solid; font-size: var(--step--1); }
.alert--error { background: var(--err-tint); border-color: #f0c4c0; color: #8c1a14; }
.alert--ok { background: var(--ok-tint); border-color: #b8ddc9; color: #14603a; }

/* --------------------------------------------------- 17. CTA & footer */

.cta-band { background: var(--ink); color: var(--paper); }
.cta-band__inner { display: grid; gap: var(--s-6); align-items: center; padding-block: clamp(3rem, 2rem + 4vw, 5rem); }
@media (min-width: 62em) { .cta-band__inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s-8); } }
.cta-band h2 { color: var(--white); font-size: var(--step-3); margin-bottom: var(--s-3); }
.cta-band p { color: #b8afa7; max-width: 48ch; }
.cta-band__actions { display: grid; gap: var(--s-3); }
@media (min-width: 34em) { .cta-band__actions { grid-auto-flow: column; grid-auto-columns: 1fr; } }
@media (min-width: 62em) { .cta-band__actions { grid-auto-flow: row; } }

.split-cta { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-3); overflow: hidden; }
@media (min-width: 48em) { .split-cta { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.split-cta__half { background: var(--white); padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-3); }
.split-cta__half h3 { font-size: var(--step-2); }
.split-cta__half p { font-size: var(--step--1); color: var(--muted); }
.split-cta__half .btn-row { margin-top: auto; padding-top: var(--s-4); }

.footer { background: var(--ink); color: #b8afa7; padding-block: var(--s-8) var(--s-6); font-size: var(--step--1); }
.footer a { color: #d7d0c8; text-decoration: none; }
.footer a:hover { color: var(--white); text-decoration: underline; }
.footer__top { display: grid; gap: var(--s-7); padding-bottom: var(--s-7); border-bottom: 1px solid #332e2a; }
@media (min-width: 48em) { .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 75em) { .footer__top { grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr)); gap: var(--s-6); } }
.footer__brand p { color: #9c938b; max-width: 34ch; margin-top: var(--s-4); }
.footer__contact { display: grid; gap: 0.3rem; margin-top: var(--s-5); }
.footer__contact strong { color: var(--white); font-weight: 600; }
.footer h3 { color: var(--white); font-size: var(--step--2); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: var(--s-4); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.footer__bottom { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-5); justify-content: space-between; align-items: center; padding-top: var(--s-5); font-size: var(--step--2); color: #857c74; }
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.footer__social { display: flex; flex-wrap: wrap; gap: var(--s-4); }

/* --------------------------------------------- 18. Sticky mobile bar */

.actionbar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 90;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-2);
  border-top: 1px solid var(--line-2);
  box-shadow: 0 -6px 20px -12px rgb(20 17 15 / 0.35);
  padding-bottom: env(safe-area-inset-bottom);
}
@media (min-width: 62em) { .actionbar { display: none; } }
.actionbar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem;
  padding: 0.6rem 0.35rem;
  background: var(--white);
  font-size: 0.7rem;
  font-weight: 650;
  text-decoration: none;
  color: var(--ink);
  text-align: center;
}
.actionbar a svg { width: 1.1rem; height: 1.1rem; }
.actionbar a.is-primary { background: var(--red); color: var(--white); }
.actionbar a.is-wa { background: #1faa53; color: var(--white); }
body { padding-bottom: 4.25rem; }
@media (min-width: 62em) { body { padding-bottom: 0; } }

/* -------------------------------------------------------- 19. Utilities */

.badge {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.2rem 0.55rem;
  border-radius: var(--r-pill);
  font-size: var(--step--2);
  font-weight: 650;
  letter-spacing: 0.03em;
}
.badge--red { background: var(--red-tint); color: var(--red-dark); }
.badge--blue { background: var(--blue-tint); color: var(--blue); }
.badge--neutral { background: var(--paper-3); color: var(--ink-2); }

.swatches { display: flex; gap: var(--s-3); list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.swatch { display: flex; align-items: center; gap: 0.5rem; font-size: var(--step--1); }
.swatch::before {
  content: ""; width: 1.5rem; height: 1.5rem; border-radius: var(--r-2);
  border: 1px solid rgb(20 17 15 / 0.14);
  background: var(--sw, var(--paper-3));
}
.swatch--blue { --sw: var(--blue); }
.swatch--yellow { --sw: var(--yellow); }
.swatch--transparent { --sw: repeating-conic-gradient(#fff 0% 25%, #dcd6cc 0% 50%) 50% / 10px 10px; }

.rule { height: 1px; background: var(--line); border: 0; margin-block: var(--s-7); }

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

.no-scroll { overflow: hidden; }

.pill-nav { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; margin: 0; padding: 0; }
.pill-nav a {
  display: inline-flex; padding: 0.4rem 0.85rem;
  border: 1px solid var(--line-2); border-radius: var(--r-pill);
  background: var(--white); font-size: var(--step--2); font-weight: 600;
  text-decoration: none; color: var(--ink-2);
}
.pill-nav a:hover, .pill-nav a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--white); }

@media print {
  .header, .footer, .actionbar, .cta-band, .drawer, .topbar { display: none !important; }
  body { background: #fff; padding-bottom: 0; }
  .slot { display: none; }
}