/* ==========================================================================
   Scale Mediation Help Centre — components
   Depends on tokens.css. Load tokens.css first.
   ========================================================================== */

/* ------------------------------------------------------------------ reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tr-ui);
  font-feature-settings: "cv05" 1, "ss01" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg, video { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; }

a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 0.18em; }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
:focus:not(:focus-visible) { outline: none; }

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

.skip-link {
  position: absolute; left: var(--s-4); top: var(--s-2);
  z-index: 200; padding: var(--s-2) var(--s-4);
  background: var(--bg-raised); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  transform: translateY(-160%);
}
.skip-link:focus { transform: none; }

/* ----------------------------------------------------------------- header */
.hc-header {
  position: sticky; top: 0; z-index: 60;
  height: var(--header-h);
  display: flex; align-items: center; gap: var(--s-6);
  padding: 0 var(--s-6);
  background: var(--bg);   /* fallback where color-mix is unsupported */
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--border);
}

.hc-brand {
  display: flex; align-items: center; gap: var(--s-3);
  color: var(--text); flex: 0 0 auto;
  min-width: calc(var(--nav-w) - var(--s-6));
}
.hc-brand:hover { text-decoration: none; }
.hc-brand svg { width: 22px; height: 26px; color: var(--accent); flex: 0 0 auto; }
.hc-brand-name {
  font-family: var(--font-display);
  font-size: 1.0625rem; font-weight: var(--fw-semibold);
  letter-spacing: -0.014em; line-height: 1;
}
.hc-brand-name span {
  font-family: var(--font-sans);
  font-size: var(--fs-sm); font-weight: var(--fw-regular);
  color: var(--text-muted); letter-spacing: 0;
  margin-left: var(--s-2); padding-left: var(--s-2);
  border-left: 1px solid var(--border-strong);
}

/* Search trigger — a button, not an input. The real field lives in the
   dialog so there is exactly one search UI on the site. */
.hc-search-trigger {
  display: flex; align-items: center; gap: var(--s-3);
  flex: 1 1 auto; max-width: 420px;
  height: 34px; padding: 0 var(--s-2) 0 var(--s-3);
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text-faint);
  font-size: var(--fs-md);
  cursor: pointer; text-align: left;
  transition: border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
.hc-search-trigger:hover {
  border-color: var(--border-strong); background: var(--bg-raised);
}
.hc-search-trigger svg { width: 15px; height: 15px; flex: 0 0 auto; }
.hc-search-trigger .label { flex: 1 1 auto; }

kbd {
  font-family: var(--font-sans);
  font-size: var(--fs-xs); font-weight: var(--fw-medium);
  line-height: 1; color: var(--text-faint);
  padding: 3px 5px; border-radius: var(--r-xs);
  border: 1px solid var(--border); background: var(--bg-raised);
}

.hc-header-end {
  margin-left: auto; display: flex; align-items: center; gap: var(--s-2);
  flex: 0 0 auto;
}
/* Portal links are solid brand-green buttons with an outbound arrow. */
.hc-portal-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 var(--s-3);
  background: var(--brand-700); color: #ffffff;
  border: 1px solid var(--brand-700); border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.hc-portal-btn:hover {
  background: #0d4946; border-color: #0d4946;
  color: #ffffff; text-decoration: none;
}
.hc-portal-btn svg { width: 14px; height: 14px; flex: 0 0 auto; }
.icon-btn {
  display: grid; place-items: center;
  width: 32px; height: 32px; padding: 0;
  background: none; border: 0; border-radius: var(--r-sm);
  color: var(--text-muted); cursor: pointer;
}
.icon-btn:hover { background: var(--bg-hover); color: var(--text); }
.icon-btn svg { width: 17px; height: 17px; }
.nav-toggle { display: none; }
.nav-scrim { display: none; }

/* ------------------------------------------------------------------ shell */
.hc-shell {
  display: grid;
  grid-template-columns: var(--nav-w) minmax(0, 1fr) var(--rail-w);
  gap: 0 var(--s-8);
  /* Left-anchored, not centred: the nav sits against a normal page margin
     on every screen width, and any surplus width on a wide monitor falls to
     the right instead of opening a big empty gutter on the left. */
  max-width: var(--shell-max);
  margin: 0 auto 0 0;
  padding: 0 var(--s-6) 0 var(--s-8);
  align-items: start;
}
/* Home / rail-less pages: a two-column body capped narrower so the hero and
   tiles read as an intentional column rather than floating in a wide field. */
.hc-shell.is-wide {
  grid-template-columns: var(--nav-w) minmax(0, 1fr);
  max-width: 1120px;
}

/* -------------------------------------------------------------------- nav */
.hc-nav {
  position: sticky; top: var(--header-h);
  height: calc(100vh - var(--header-h));
  overflow-y: auto; overscroll-behavior: contain;
  padding: var(--s-8) var(--s-5) var(--s-10) 0;
  border-right: 1px solid var(--border-faint);
  scrollbar-width: thin;
}
/* Clear space between one group and the next so the nav reads as grouped
   sections, not one flat column. */
.hc-nav-group + .hc-nav-group { margin-top: var(--s-8); }
.hc-nav-title {
  font-size: var(--fs-micro); font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-caps); text-transform: uppercase;
  color: var(--text-faint);
  padding: 0 var(--s-3); margin-bottom: var(--s-2);
}
/* The article items nest under their group label: indented, with a hairline
   guide line so the hierarchy is visible. */
.hc-nav ul {
  list-style: none;
  margin-left: var(--s-3);
  padding-left: var(--s-3);
  border-left: 1px solid var(--border-faint);
}
.hc-nav a {
  display: flex; align-items: baseline; gap: var(--s-2);
  padding: 6px var(--s-3);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm); line-height: var(--lh-ui);
  color: var(--text-secondary);
  transition: color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
.hc-nav a:hover { background: var(--bg-hover); color: var(--text); text-decoration: none; }
/* Selected item: solid brand green, white text. */
.hc-nav a[aria-current="page"] {
  color: #ffffff; background: var(--brand-700);
  font-weight: var(--fw-medium);
}
.hc-nav a[aria-current="page"]:hover { color: #ffffff; background: #0d4946; }
.hc-nav .count {
  margin-left: auto; font-size: var(--fs-xs);
  color: var(--text-faint); font-variant-numeric: tabular-nums;
}
.hc-nav-foot {
  margin-top: var(--s-9); padding: var(--s-4) var(--s-3) 0;
  border-top: 1px solid var(--border-faint);
  font-size: var(--fs-sm); color: var(--text-faint);
}
.hc-nav-foot a { color: var(--text-muted); display: block; padding: 3px 0; }

/* ------------------------------------------------------------------- main */
.hc-main { min-width: 0; padding: var(--s-9) 0 var(--s-12); }
.hc-col { max-width: var(--col-max); }

/* ------------------------------------------------------------------- rail */
.hc-rail {
  position: sticky; top: calc(var(--header-h) + var(--s-9));
  max-height: calc(100vh - var(--header-h) - var(--s-10));
  overflow-y: auto;
  padding-bottom: var(--s-8);
  font-size: var(--fs-sm);
}
/* The label aligns with the item text, just inside the rail line. */
.hc-rail-title {
  font-size: var(--fs-micro); font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-caps); text-transform: uppercase;
  color: var(--text-faint); margin-bottom: var(--s-2);
  padding-left: var(--s-3);
}
.hc-rail ol { list-style: none; }
/* A tidy TOC hugging its rail: each item sits immediately beside the
   vertical line with a small, consistent left padding — no number gutter. */
.hc-rail a {
  display: block;
  padding: 5px 0 5px var(--s-3);
  border-left: 2px solid var(--border);
  color: var(--text-muted); line-height: var(--lh-ui);
  transition: color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.hc-rail a:hover { color: var(--text); text-decoration: none; }
.hc-rail a.is-active {
  color: var(--accent-text); border-left-color: var(--accent);
  font-weight: var(--fw-medium);
}

/* ============================================================ article page */
.article-head { max-width: var(--measure); }

.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
  font-size: var(--fs-sm); color: var(--text-faint);
  margin-bottom: var(--s-6);
}
.breadcrumb a { color: var(--text-muted); }
.breadcrumb .sep { color: var(--border-strong); }

.article-title {
  font-family: var(--font-display);
  font-size: var(--fs-h1); font-weight: var(--fw-semibold);
  line-height: var(--lh-h1); letter-spacing: var(--tr-h1);
  color: var(--text);
  font-variation-settings: "opsz" 34;
  text-wrap: balance;
}

/* The mandatory `For: X · About N minutes` line. */
.article-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
  margin-top: var(--s-4);
  font-size: var(--fs-md); color: var(--text-muted);
}
.persona-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px var(--s-3) 3px;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-full);
  background: var(--accent-quiet);
  color: var(--accent-text);
  font-size: var(--fs-xs); font-weight: var(--fw-medium);
  letter-spacing: 0;
}
.article-meta .dot { color: var(--border-strong); }

.article-lead {
  max-width: var(--measure);
  margin-top: var(--s-6);
  font-size: var(--fs-lead); line-height: 1.6;
  color: var(--text-secondary);
}

.article-rule {
  border: 0; border-top: 1px solid var(--border);
  margin: var(--s-8) 0 var(--s-8);
}

/* ------------------------------------------------------------------ prose */
.prose { max-width: var(--col-max); }
.prose > p,
.prose > ul,
.prose > ol,
.prose > .callout,
.prose > .before-you-begin,
.prose > .whats-next,
.prose > h2,
.prose > h3 { max-width: var(--measure); }

.prose > p { margin-top: var(--s-5); }
.prose > p:first-child { margin-top: 0; }

.prose h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2); font-weight: var(--fw-semibold);
  line-height: var(--lh-h2); letter-spacing: var(--tr-h2);
  font-variation-settings: "opsz" 22;
  margin-top: var(--s-10); margin-bottom: var(--s-4);
  scroll-margin-top: calc(var(--header-h) + var(--s-6));
}
.prose h2:first-child { margin-top: 0; }

/* Numbered steps. The number is set in the gutter so the heading text
   stays on the same left edge as the body copy above it. */
.prose h2.step {
  display: grid;
  grid-template-columns: 1.9rem 1fr;
  align-items: baseline;
  gap: var(--s-1);
  margin-left: -2.15rem;
  max-width: calc(var(--measure) + 2.15rem);
}
/* Hanging numeral, set in the display face at heading size so it reads as
   part of the heading rather than a bullet parked beside it. */
.prose h2.step .num {
  font-family: var(--font-display);
  font-size: var(--fs-h2); font-weight: var(--fw-regular);
  font-variation-settings: "opsz" 22;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.prose h3 {
  font-size: var(--fs-h3); font-weight: var(--fw-semibold);
  line-height: var(--lh-tight); letter-spacing: var(--tr-ui);
  margin-top: var(--s-7); margin-bottom: var(--s-3);
  scroll-margin-top: calc(var(--header-h) + var(--s-6));
}

.prose ul, .prose ol { margin-top: var(--s-4); padding-left: var(--s-5); }
.prose li { margin-top: var(--s-2); }
.prose li::marker { color: var(--text-faint); }

.prose strong { font-weight: var(--fw-semibold); color: var(--text); }
.prose code {
  font-family: var(--font-mono); font-size: 0.86em;
  padding: 2px 5px; border-radius: var(--r-xs);
  background: var(--bg-sunken); border: 1px solid var(--border-faint);
  color: var(--text-secondary);
}

/* --------------------------------------------------------------- tables
   Restrained reference tables: full width, hairline row borders, a lightly
   emphasized header, no zebra, no shadow. Wrapped in .table-wrap so a wide
   table scrolls horizontally instead of breaking the layout. */
.table-wrap {
  margin-top: var(--s-5);
  max-width: var(--col-max);
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-base);
  line-height: 1.5;
}
.prose thead th {
  text-align: left;
  font-weight: var(--fw-semibold);
  color: var(--text);
  background: var(--bg-sunken);
  border-bottom: 1px solid var(--border-strong);
}
.prose th, .prose td {
  text-align: left;
  vertical-align: top;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border-faint);
}
.prose tbody tr:last-child td { border-bottom: 0; }
.prose td { color: var(--text-secondary); }

/* UI labels quoted from the product. Sparing — one per sentence at most. */
.ui {
  font-weight: var(--fw-medium); color: var(--text);
  white-space: nowrap;
}
.ui::before, .ui::after { content: "\201C"; color: var(--text-faint); font-weight: 400; }
.ui::after { content: "\201D"; }

/* ------------------------------------------------- before you begin block */
.before-you-begin {
  margin-top: var(--s-6);
  padding: var(--s-5) var(--s-6);
  background: var(--bg-sunken);
  border: 1px solid var(--border-faint);
  border-radius: var(--r-md);
}
.before-you-begin h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-md); font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-caps); text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 var(--s-3);
  font-size: var(--fs-micro);
}
.before-you-begin ul { margin: 0; padding-left: var(--s-5); }
.before-you-begin li { font-size: var(--fs-base); color: var(--text-secondary); }

/* ------------------------------------------------------- screenshot plate
   The hard constraint: captures are 1600 CSS px wide and often 1000–3500
   tall. At the prose measure they become unreadable strips, so figures
   break out to the full content column and every one opens full size.
   Tall captures are honestly cropped rather than silently squashed. */
/* Captures are 1600 CSS px wide. Even at full column they sit near half
   size, so the figure claims the rail gutter as well and the full-size
   affordance is always on — never a hover-only secret. */
figure.shot {
  margin: var(--s-6) 0 var(--s-7);
  width: calc(100% + var(--s-6));   /* leaves 16px clear of the rail */
  max-width: var(--col-max);
}
.shot-frame {
  display: block; width: 100%; padding: 0;
  position: relative;
  background: var(--plate-bg);
  border: 1px solid var(--plate-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  cursor: zoom-in;
  transition: border-color var(--dur-base) var(--ease);
}
.shot-frame:hover { border-color: var(--border-strong); }
.shot-frame img {
  width: 100%; height: auto; display: block;
  background: #fff;
}
figure.shot[data-crop] .shot-frame img {
  max-height: 34rem;
  object-fit: cover;
  object-position: top center;
}
/* A cropped capture ends with a plain fade to the plate ground — a solid
   overlay, no gradient. */
figure.shot[data-crop] .shot-frame::after {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 2px;
  background: var(--plate-border);
  pointer-events: none;
}

figure.shot figcaption {
  margin-top: var(--s-3);
  max-width: var(--measure);
  font-size: var(--fs-md); line-height: 1.55;
  color: var(--text-muted);
}

/* ------------------------------------------------------------- video slot
   A per-article walkthrough. A Loom embed when a share id is set; otherwise
   a clean 16:9 placeholder that reads as a video spot. Hairline border,
   brand-green play icon, no gradient, no emoji. */
.loom {
  margin: var(--s-6) 0 var(--s-8);
  max-width: var(--col-max);
}
.loom .frame {
  position: relative; padding-top: 56.25%;
  background: var(--plate-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.loom .frame iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%; border: 0;
}
.loom .frame .empty {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--s-3);
  background: var(--bg-raised);
}
.loom .frame .empty .ico {
  width: 52px; height: 52px;
  border-radius: var(--r-md);
  background: var(--accent-quiet);
  display: flex; align-items: center; justify-content: center;
}
.loom .frame .empty .ico svg { width: 22px; height: 22px; fill: var(--brand-700); }
.loom .frame .empty span {
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  letter-spacing: 0.01em; color: var(--text-muted);
}
.loom .vcap {
  margin-top: var(--s-3);
  font-size: var(--fs-sm); color: var(--text-secondary);
}

/* ---------------------------------------------------------------- callout
   Two kinds only. Note is neutral. Careful is amber and is reserved for
   money, availability, and anything that cannot be undone. */
.callout {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-3);
  margin-top: var(--s-6);
  padding: var(--s-4) var(--s-5);
  border-left: 2px solid var(--callout-note-line);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--callout-note-bg);
  color: var(--callout-note-text);
  font-size: var(--fs-base); line-height: 1.6;
}
.callout svg { width: 16px; height: 16px; margin-top: 3px; color: var(--accent); }
.callout p { margin: 0; }
.callout p + p { margin-top: var(--s-2); }
.callout .label { font-weight: var(--fw-semibold); }

.callout.careful {
  border-left-color: var(--callout-care-line);
  background: var(--callout-care-bg);
  color: var(--callout-care-text);
}
.callout.careful svg { color: var(--callout-care-label); }
.callout.careful .label { color: var(--callout-care-label); }

/* ------------------------------------------------------------ what's next */
.whats-next {
  margin-top: var(--s-10);
  padding-top: var(--s-6);
  border-top: 1px solid var(--border);
}
.whats-next h2 {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-md) !important;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-caps); text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 var(--s-4) !important;
}
.whats-next ul { list-style: none; margin: 0; padding: 0; }
.whats-next li {
  position: relative; padding-left: var(--s-5); margin-top: var(--s-2);
  font-size: var(--fs-base); color: var(--text-secondary);
}
.whats-next li::before {
  content: ""; position: absolute; left: 4px; top: 0.72em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--border-strong);
}
.next-link {
  display: inline-flex; align-items: baseline; gap: 6px;
  margin-top: var(--s-5);
  font-size: var(--fs-body); font-weight: var(--fw-medium);
}
.next-link::after { content: "\2192"; }
.next-link:hover { text-decoration: none; }
.next-link:hover span { text-decoration: underline; text-underline-offset: 0.18em; }

.article-foot {
  margin-top: var(--s-10); padding-top: var(--s-5);
  border-top: 1px solid var(--border-faint);
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  align-items: center; justify-content: space-between;
  max-width: var(--col-max);
  font-size: var(--fs-sm); color: var(--text-faint);
}
.article-foot a { color: var(--text-muted); }

/* =============================================================== homepage */
.home-hero {
  padding: var(--s-11) 0 var(--s-9);
  max-width: 780px;
}
.home-hero h1 {
  font-family: var(--font-display);
  font-size: var(--fs-display); font-weight: var(--fw-semibold);
  line-height: var(--lh-display); letter-spacing: var(--tr-display);
  text-wrap: balance;
}
.home-hero p {
  margin-top: var(--s-4);
  font-size: var(--fs-lead); line-height: 1.55;
  color: var(--text-muted);
  max-width: 34em;
}

/* --------------------------------------------------------------- home tiles
   One bordered card per section. Brand-green title, a one-line description,
   and a quiet arrow that nudges on hover. Responsive: 3 / 2 / 1 columns. */
.home-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
  margin: var(--s-8) 0 var(--s-11);
  max-width: var(--col-max);
}
.tile {
  display: flex; flex-direction: column;
  padding: var(--s-6);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  color: var(--text);
  transition: border-color var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease);
}
.tile:hover {
  text-decoration: none;
  border-color: var(--brand-700);
  transform: translateY(-2px);
}
.tile-title {
  font-size: 1.1875rem; font-weight: var(--fw-semibold);
  letter-spacing: -0.012em; line-height: var(--lh-tight);
  color: var(--brand-700);
}
.tile-desc {
  margin-top: var(--s-3);
  font-size: var(--fs-base); line-height: 1.55;
  color: var(--text-muted);
  flex: 1 1 auto;
}
.tile-go {
  margin-top: var(--s-5);
  font-size: var(--fs-body); font-weight: var(--fw-medium);
  color: var(--brand-700);
  transition: transform var(--dur-base) var(--ease);
}
.tile:hover .tile-go { transform: translateX(4px); }

@media (min-width: 901px) and (max-width: 1160px) {
  .home-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .home-tiles { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
}

/* Home search. Restrained: a hairline border, small radius, no glow. */
.home-search {
  display: flex; align-items: center; gap: var(--s-4);
  width: 100%; max-width: 560px;
  margin-top: var(--s-7);
  height: 48px; padding: 0 var(--s-3) 0 var(--s-4);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text-faint); font-size: var(--fs-body);
  text-align: left; cursor: pointer;
  transition: border-color var(--dur-base) var(--ease);
}
.home-search:hover { border-color: var(--border-strong); }
/* Thin 1px brand-green border on focus — no outline ring, no box-shadow. */
.home-search:focus-visible,
.hc-search-trigger:focus-visible {
  outline: none;
  border-color: var(--brand-700);
}
.home-search svg { width: 18px; height: 18px; color: var(--text-muted); flex: 0 0 auto; }
.home-search .label { flex: 1 1 auto; }

/* ------------------------------------------------------------ persona row */
.persona-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: var(--s-4) 0 var(--s-11);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  max-width: var(--col-max);
}
.persona {
  display: block; padding: var(--s-6) var(--s-6) var(--s-6) 0;
  border-left: 1px solid var(--border);
  padding-left: var(--s-6);
  color: var(--text);
  transition: background var(--dur-fast) var(--ease);
}
.persona:first-child { border-left: 0; padding-left: 0; }
.persona:hover { text-decoration: none; background: var(--bg-sunken); }
.persona .eyebrow {
  font-size: var(--fs-micro); font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-caps); text-transform: uppercase;
  color: var(--text-faint);
}
.persona h2 {
  margin-top: var(--s-3);
  font-family: var(--font-display);
  font-size: 1.25rem; font-weight: var(--fw-semibold);
  letter-spacing: -0.012em; line-height: var(--lh-tight);
  font-variation-settings: "opsz" 20;
}
.persona p {
  margin-top: var(--s-2);
  font-size: var(--fs-base); line-height: 1.55;
  color: var(--text-muted);
  max-width: 26em;
}
.persona .go {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--s-4);
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  color: var(--accent-text);
}
.persona .go::after {
  content: "\2192";
  transition: transform var(--dur-base) var(--ease);
}
.persona:hover .go::after { transform: translateX(3px); }

/* -------------------------------------------------------------- sections */
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-6);
  margin-bottom: var(--s-6);
  max-width: var(--col-max);
}
.section-head h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2); font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-h2); line-height: var(--lh-h2);
  font-variation-settings: "opsz" 22;
}
.section-head .meta { font-size: var(--fs-sm); color: var(--text-faint); }

/* Intent-based category block. A heading, one honest sentence, then the
   articles as a list. Not a tile. */
.category {
  display: grid;
  grid-template-columns: minmax(200px, 300px) minmax(0, 1fr);
  gap: var(--s-6) var(--s-10);
  padding: var(--s-8) 0;
  border-top: 1px solid var(--border-faint);
  max-width: var(--col-max);
}
.category:last-of-type { border-bottom: 1px solid var(--border-faint); }
.category-intro h3 {
  font-size: var(--fs-body); font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-ui); line-height: var(--lh-tight);
}
.category-intro h3 a { color: var(--text); }
.category-intro p {
  margin-top: var(--s-2);
  font-size: var(--fs-base); line-height: 1.55; color: var(--text-muted);
}
.category-intro .count {
  display: block; margin-top: var(--s-3);
  font-size: var(--fs-xs); color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.article-list { list-style: none; margin: 0; padding: 0; }
.article-list li + li { border-top: 1px solid var(--border-faint); }
.article-list a {
  display: flex; align-items: baseline; gap: var(--s-4);
  padding: var(--s-3) var(--s-3) var(--s-3) 0;
  color: var(--text-secondary); font-size: var(--fs-base);
  line-height: var(--lh-ui);
  border-radius: var(--r-sm);
}
.article-list a:hover {
  color: var(--accent-text); text-decoration: none;
  background: var(--bg-sunken);
  padding-left: var(--s-3);
}
.article-list .for {
  margin-left: auto; flex: 0 0 auto;
  font-size: var(--fs-xs); color: var(--text-faint);
  white-space: nowrap;
}

/* ---------------------------------------------------------- closing strip */
.closing {
  margin-top: var(--s-11); padding: var(--s-8) 0 0;
  border-top: 1px solid var(--border);
  max-width: var(--col-max);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-8);
}
.closing h3 {
  font-family: var(--font-display);
  font-size: 1.125rem; font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
}
.closing p {
  margin-top: var(--s-2); font-size: var(--fs-base);
  color: var(--text-muted); line-height: 1.55; max-width: 34em;
}
.closing a.next-link { font-size: var(--fs-base); }

/* ===================================================== search dialog (⌘K) */
.search-dialog {
  width: min(640px, calc(100vw - var(--s-8)));
  max-height: min(560px, calc(100vh - var(--s-10)));
  padding: 0; border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  background: var(--bg-raised); color: var(--text);
  box-shadow: var(--shadow-overlay);
  overflow: hidden;
  margin: 12vh auto auto;
}
.search-dialog::backdrop {
  background: var(--bg-overlay);
  backdrop-filter: blur(2px);
}
.search-dialog[open] { display: flex; flex-direction: column; }

.search-field {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 0 var(--s-3) 0 var(--s-5);
  height: 54px; flex: 0 0 auto;
  border-bottom: 1px solid var(--border);
}
.search-field svg { width: 17px; height: 17px; color: var(--text-faint); flex: 0 0 auto; }
.search-field input {
  flex: 1 1 auto; border: 0; background: none; outline: none;
  font-size: var(--fs-body); color: var(--text);
  padding: 0; min-width: 0;
}
.search-field input::placeholder { color: var(--text-faint); }
/* Chrome draws its own clear button in the UA accent colour. */
.search-field input::-webkit-search-cancel-button,
.search-field input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.search-field .esc { flex: 0 0 auto; }

.search-results {
  flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
  padding: var(--s-2); list-style: none; margin: 0;
}
.search-results > li.search-group-label,
.search-group-label {
  list-style: none;
  font-size: var(--fs-micro); font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-caps); text-transform: uppercase;
  color: var(--text-faint);
  padding: var(--s-4) var(--s-3) var(--s-2);
}
.search-results li a {
  display: block; padding: var(--s-3);
  border-radius: var(--r-sm); color: var(--text);
}
.search-results li a:hover { text-decoration: none; }
.search-results li[aria-selected="true"] a { background: var(--bg-hover); }
.search-results li[aria-selected="true"] .r-title { color: var(--accent-text); }
.r-title {
  font-size: var(--fs-base); font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
}
.r-excerpt {
  margin-top: 3px; font-size: var(--fs-sm); line-height: 1.5;
  color: var(--text-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.r-path {
  margin-top: 5px; font-size: var(--fs-xs); color: var(--text-faint);
}
.search-results mark {
  background: var(--accent-quiet); color: var(--accent-text);
  border-radius: 2px; padding: 0 1px;
}
.search-empty {
  list-style: none;
  padding: var(--s-9) var(--s-5); text-align: center;
  color: var(--text-muted); font-size: var(--fs-base);
}
.search-empty strong { color: var(--text); font-weight: var(--fw-medium); }
.search-foot {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-3) var(--s-5);
  border-top: 1px solid var(--border);
  background: var(--bg-sunken);
  font-size: var(--fs-xs); color: var(--text-faint);
}
.search-foot span { display: inline-flex; align-items: center; gap: 5px; }

/* ================================================== lightbox for a capture */
.shot-dialog {
  width: min(1680px, calc(100vw - var(--s-7)));
  max-width: none;
  height: min(96vh, 100%);
  max-height: 96vh;
  padding: 0; border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  background: var(--bg-raised);
  box-shadow: var(--shadow-overlay);
  overflow: hidden;
}
.shot-dialog::backdrop { background: var(--bg-overlay); }
.shot-dialog[open] { display: flex; flex-direction: column; }
.shot-dialog-bar {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-3) var(--s-3) var(--s-3) var(--s-5);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm); color: var(--text-muted);
}
.shot-dialog-bar .title { flex: 1 1 auto; color: var(--text); font-weight: var(--fw-medium); }
.shot-dialog-body {
  flex: 1 1 auto; overflow: auto; background: var(--plate-bg);
  padding: var(--s-5); display: block;
}
.shot-dialog-body img {
  width: 1600px; max-width: 100%; height: auto;
  margin: 0 auto; background: #fff;
  border: 1px solid var(--plate-border); border-radius: var(--r-sm);
}

/* ============================================================= responsive
   The rail collapses first, then the nav. */
@media (max-width: 1240px) {
  .hc-shell,
  .hc-shell.is-wide {
    grid-template-columns: var(--nav-w) minmax(0, 1fr);
    gap: 0 var(--s-8);
  }
  .hc-rail { display: none; }
  figure.shot { width: 100%; }
}

@media (max-width: 900px) {
  :root { --fs-h1: 1.875rem; --fs-display: 2.125rem; --gutter: var(--s-5); }
  /* .is-wide is more specific than a bare .hc-shell, so it has to be
     named here too or the homepage never collapses. */
  .hc-shell,
  .hc-shell.is-wide {
    grid-template-columns: minmax(0, 1fr);
    padding: 0 var(--s-5);
  }
  .nav-toggle { display: grid; }
  .hc-brand { min-width: 0; }
  .hc-brand-name span { display: none; }

  .hc-nav {
    position: fixed; inset: var(--header-h) auto 0 0;
    width: min(320px, 86vw); z-index: 70;
    background: var(--bg-raised);
    border-right: 1px solid var(--border);
    padding: var(--s-6) var(--s-5) var(--s-9);
    transform: translateX(-102%);
    transition: transform var(--dur-slow) var(--ease);
    box-shadow: var(--shadow-overlay);
  }
  .hc-nav[data-open="true"] { transform: none; }
  .nav-scrim {
    display: block;
    position: fixed; inset: var(--header-h) 0 0; z-index: 65;
    background: var(--bg-overlay); border: 0;
    opacity: 0; pointer-events: none;
    transition: opacity var(--dur-base) var(--ease);
  }
  .nav-scrim[data-open="true"] { opacity: 1; pointer-events: auto; }

  .hc-main { padding-top: var(--s-7); }
  .home-hero { padding: var(--s-8) 0 var(--s-6); }
  .persona-row { grid-template-columns: minmax(0, 1fr); }
  .persona { border-left: 0; border-top: 1px solid var(--border); padding-left: 0; }
  .persona:first-child { border-top: 0; }
  .category { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .closing { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
  .prose h2.step { margin-left: 0; grid-template-columns: 1.8rem 1fr; max-width: 100%; }
  figure.shot[data-crop] .shot-frame img { max-height: 22rem; }
}

@media (max-width: 640px) {
  .hc-header { padding: 0 var(--s-4); gap: var(--s-3); }
  .hc-search-trigger .label { display: none; }
  .hc-search-trigger { flex: 0 0 auto; width: 34px; justify-content: center; padding: 0; }
  .hc-search-trigger kbd { display: none; }
  .hc-portal-btn { display: none; }
  .home-search { height: 46px; font-size: var(--fs-base); }
  .article-foot { flex-direction: column; align-items: flex-start; }
  .shot-dialog { width: 100vw; height: 100vh; max-height: none; border-radius: 0; border: 0; }
}

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

@media print {
  .hc-header, .hc-nav, .hc-rail, .article-foot { display: none !important; }
  .hc-shell { grid-template-columns: 1fr; padding: 0; }
  .shot-frame, .loom { break-inside: avoid; }
  figure.shot[data-crop] .shot-frame img { max-height: none; object-fit: fill; }
}