/* ---------------------------------------------------------------
   PowerSlave Developments — powerslave.dev
   Plain CSS, no build step. Dark by default, light on request.
   --------------------------------------------------------------- */

:root {
  /* Palette — dark (default) */
  color-scheme: dark;
  --bg: #0b0d12;
  --bg-glow: rgba(108, 140, 255, 0.16);
  --surface: #14171f;
  --surface-2: #1b1f2a;
  --border: #262b38;
  --border-strong: #333a4b;
  --text: #e7e9ee;
  --muted: #9aa3b2;
  --accent: #6c8cff;
  --accent-2: #a06cff;
  --accent-ink: #ffffff;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.25);

  /* Type */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Space + shape */
  --radius: 14px;
  --radius-sm: 8px;
  --radius-pill: 999px;
  --maxw: 900px;
  --gutter: 20px;
}

/* Light, in two situations: the system asks for it and the reader has not overridden
   to dark, or the reader has explicitly chosen it with the topbar button. One of the
   selectors lives inside a media query and one outside, so they cannot share a
   declaration block — **the light palette is written twice below, and both copies
   have to change together.** Dark needs no override block of its own: `:root` above
   already is dark, and the `:not()` here steps aside when dark is forced.

   Specificity does the arbitration. Both selectors are (0,2,0), so the explicit
   choice wins on document order by sitting second; plain `:root` is (0,1,0) and
   loses to either. That covers all four combinations of system preference and
   stored choice. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #fbfbfd;
    --bg-glow: rgba(108, 140, 255, 0.13);
    --surface: #ffffff;
    --surface-2: #f4f5f9;
    --border: #e3e6ef;
    --border-strong: #ccd2e0;
    --text: #12151d;
    --muted: #58616f;
    --accent: #3a5ada;
    --accent-2: #7a3ad9;
    --accent-ink: #ffffff;
    --shadow: 0 1px 2px rgba(16, 20, 32, 0.06), 0 8px 24px rgba(16, 20, 32, 0.06);
  }
}

/* The second copy. Keep in step with the block above. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #fbfbfd;
  --bg-glow: rgba(108, 140, 255, 0.13);
  --surface: #ffffff;
  --surface-2: #f4f5f9;
  --border: #e3e6ef;
  --border-strong: #ccd2e0;
  --text: #12151d;
  --muted: #58616f;
  --accent: #3a5ada;
  --accent-2: #7a3ad9;
  --accent-ink: #ffffff;
  --shadow: 0 1px 2px rgba(16, 20, 32, 0.06), 0 8px 24px rgba(16, 20, 32, 0.06);
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

body {
  margin: 0;
  /* Three layers, front to back: the glow behind the hero, then a soft full-page
     fade from the base colour into 20% accent, then the base colour itself as the
     floor. Both gradients are mixed from the tokens rather than written as literal
     colours, so the light palette gets the same treatment against its own base —
     a cool tint rather than an inverted dark one. */
  background:
    radial-gradient(1200px 600px at 50% -10%, var(--bg-glow), transparent 60%),
    linear-gradient(180deg,
      var(--bg) 0%,
      color-mix(in srgb, var(--accent) 20%, var(--bg)) 100%),
    var(--bg);
  background-repeat: no-repeat;
  /* The linear layer is sized to the body box, so a page shorter than the viewport
     would fade out early and leave a seam above the fold. */
  min-height: 100svh;
  color: var(--text);
  font: 16px/1.65 var(--font);
  -webkit-font-smoothing: antialiased;
}

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

:where(a, button, summary, details):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

img { max-width: 100%; height: auto; }

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 5px;
}

/* Skip link ------------------------------------------------------ */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
}
.skip:focus {
  left: 12px;
  top: 12px;
  padding: 10px 16px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
}

/* Layout --------------------------------------------------------- */

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

section { padding: 34px 0; }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

h2 {
  font-size: clamp(20px, 3vw, 25px);
  letter-spacing: -0.015em;
  margin: 0;
}

.eyebrow {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Top bar -------------------------------------------------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--border);
}

.topbar-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 12px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  color: var(--text);
}
.brand:hover { text-decoration: none; color: var(--text); }

/* The wordmark is the whole brand — there is no text beside it, so the link's
   accessible name comes entirely from the image's alt, which carries the full
   company name even though the artwork reads "POWERSLAVE" alone. The asset is
   transparent and its gradient is the accent gradient, so it needs no per-theme
   variant. Swap the src for an SVG when one exists; keep a raster around for the
   Organization structured data, which does not accept SVG. */
.brand img {
  display: block;
  height: 26px;
  width: auto;
}

/* Eight links plus the theme button come to more than the 900px content width at the
   old 4px/12px spacing, and the whole group dropped to a second row. Tightened to
   3px/10px, which keeps it on one line with about 30px to spare for the wider system
   fonts on Windows. Adding a ninth link will push it over again. */
.topnav {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
}
.topnav a {
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
}
.topnav a:hover {
  background: var(--surface-2);
  color: var(--text);
  text-decoration: none;
}
.topnav a[aria-current="page"] {
  background: var(--surface-2);
  color: var(--text);
}

/* Nav and theme button travel together, so the brand stays left and the pair stays
   right — a third flex child directly in .topbar-inner would have space-between
   push the nav into the middle. */
.topbar-end {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Theme override button ------------------------------------------- */

/* Ships hidden and is revealed by script, so a reader with JavaScript off is never
   shown a control that cannot work — the OS preference still drives the palette
   through prefers-color-scheme. `data-next` is the theme a click switches to, set by
   the same script, and it picks which of the two icons shows. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
}
.theme-toggle[hidden] { display: none; }
.theme-toggle:hover {
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--surface-2);
}
.theme-toggle svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.theme-toggle[data-next="light"] .ico-moon,
.theme-toggle[data-next="dark"] .ico-sun { display: none; }

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

.hero {
  padding: 64px 0 40px;
  text-align: center;
}

.hero h1 {
  margin: 16px auto 14px;
  max-width: 18ch;
  font-size: clamp(31px, 6.2vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--text);
  background: linear-gradient(135deg, var(--text), color-mix(in srgb, var(--accent) 62%, var(--text)) 88%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero .lede {
  margin: 0 auto;
  max-width: 60ch;
  color: var(--muted);
  font-size: clamp(16px, 2.1vw, 18.5px);
}

.hero-cta {
  margin-top: 28px;
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

/* A quieter line under the lede, where a page has something to add but not
   another button — the RSS link on the articles index. */
.hero-note {
  margin: 18px auto 0;
  max-width: 60ch;
  color: var(--muted);
  font-size: 14px;
}

@media (forced-colors: active) {
  .hero h1 {
    -webkit-text-fill-color: CanvasText;
    color: CanvasText;
  }
}

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

.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 20px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
}
.btn:hover {
  text-decoration: none;
  border-color: var(--accent);
  background: var(--surface-2);
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent;
  color: var(--accent-ink);
}
.btn-primary:hover {
  filter: brightness(1.08);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent;
}

/* Cards ---------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Featured app --------------------------------------------------- */

.feature {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  padding: 26px;
}

.feature .icon {
  width: 96px;
  height: 96px;
  border-radius: 22px;
  flex: 0 0 auto;
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.feature h3 {
  margin: 0 0 2px;
  font-size: clamp(21px, 3vw, 26px);
  letter-spacing: -0.02em;
}

.feature .tagline {
  margin: 0 0 10px;
  color: var(--accent);
  font-weight: 600;
  font-size: 15px;
}

.feature p { margin: 0; color: var(--muted); }

@media (max-width: 560px) {
  .feature { flex-direction: column; gap: 16px; }
  .feature .icon { width: 76px; height: 76px; border-radius: 18px; }
}

/* App grid ------------------------------------------------------- */

.apps {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
}

.app {
  display: flex;
  gap: 15px;
  align-items: flex-start;
  padding: 19px;
}

.app .icon {
  width: 60px;
  height: 60px;
  border-radius: 14px;
  flex: 0 0 auto;
  object-fit: cover;
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.app h3 {
  margin: 1px 0 4px;
  font-size: 17px;
  letter-spacing: -0.01em;
}
/* Secondary qualifier inside a heading — "TreeWise <sub>— GetWise with Trees</sub>" */
.sub {
  color: var(--muted);
  font-weight: 400;
  font-size: 0.85em;
  letter-spacing: 0;
}

.app p { margin: 0; color: var(--muted); font-size: 14.5px; }

/* Icon stand-in for unannounced apps */
.icon.placeholder {
  display: grid;
  place-items: center;
  font-size: 28px;
  object-fit: initial;
  border-color: transparent;
  background: linear-gradient(135deg, #ff7a4a, #d7263d);
}
.feature .icon.placeholder { font-size: 44px; }

.platforms {
  margin-top: 11px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.platforms span {
  font-size: 11.5px;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 8px;
  white-space: nowrap;
}

.meta {
  margin-top: 13px;
  display: flex;
  align-items: center;
  gap: 8px 14px;
  flex-wrap: wrap;
  font-size: 13px;
}
.meta .year { color: var(--muted); }
.meta .store { font-weight: 600; }

.badge {
  border-radius: var(--radius-pill);
  padding: 2px 10px;
  font-weight: 600;
  font-size: 12px;
  border: 1px solid var(--border-strong);
  color: var(--accent-2);
}

/* Capability map ------------------------------------------------- */

/* A diagram made of markup rather than an image, so the text stays real —
   selectable, indexable, readable by a screen reader — and follows the design
   tokens into light mode. The connector SVGs are decorative; the joining phrases
   beside them carry the meaning, so only the lines are aria-hidden. */
.stack-map {
  margin: 0 0 30px;
  padding: 30px 26px 24px;
  background:
    radial-gradient(680px 240px at 50% -30%, var(--bg-glow), transparent 70%),
    linear-gradient(135deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-align: center;
}

/* Icon definitions only — never rendered itself. */
.map-sprite { display: none; }

.map-label {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.map-row {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}
.map-row-one { grid-template-columns: minmax(0, 1fr); }

.map-row li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 18px 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.map-ico {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.map-ico svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Tint the badge per tier, so the two rows are legible as different kinds of
   thing without colouring the whole card and fighting the cards below. */
.tier-cap .map-ico {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 15%, transparent);
}
.tier-dom .map-ico {
  color: var(--accent-2);
  background: color-mix(in srgb, var(--accent-2) 15%, transparent);
}

/* The outcome is what the other six feed into, so it is the one thing that takes
   the full accent treatment. */
.map-row li.map-outcome {
  flex-direction: row;
  justify-content: center;
  gap: 13px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent;
  color: var(--accent-ink);
  font-size: 16px;
}
.map-outcome .map-ico {
  width: 32px;
  height: 32px;
  color: var(--accent-ink);
  background: rgba(255, 255, 255, 0.18);
}

/* Connector band: lines stretch behind a centred label that cuts through them. */
.map-flow {
  position: relative;
  height: 44px;
  margin: 4px 0;
}
.map-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--border-strong);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}
.map-join {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 3px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--muted);
  font-size: 12.5px;
  white-space: nowrap;
}

.map-foot {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 14px;
}

@media (max-width: 620px) {
  .map-row { grid-template-columns: minmax(0, 1fr); }
  .map-row li { flex-direction: row; justify-content: flex-start; text-align: left; }
  /* The fan and funnel only mean anything against three columns. */
  .map-lines { display: none; }
  .map-flow { height: 40px; }
  .map-join { position: static; transform: none; display: inline-block; }
}

/* Services ------------------------------------------------------- */

.services {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  margin-bottom: 20px;
}

.service { padding: 17px 19px; }

.service h3 {
  margin: 0 0 5px;
  font-size: 15.5px;
  letter-spacing: -0.01em;
  color: var(--text);
}

.service p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

/* The related-reading line is a second paragraph in a card whose paragraphs are
   flush, so it needs its own air to read as a note rather than a run-on. */
.service p.note { margin-top: 12px; }

/* Proof statement ------------------------------------------------ */

.proof {
  display: flex;
  gap: 28px;
  align-items: center;
  padding: 30px;
  background: linear-gradient(135deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.proof-figure {
  flex: 0 0 auto;
  text-align: center;
  min-width: 128px;
}
.proof-figure b {
  display: block;
  font-size: clamp(46px, 8vw, 68px);
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.proof-figure span {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}
.proof h3 { margin: 0 0 6px; font-size: clamp(18px, 2.6vw, 22px); letter-spacing: -0.015em; }
.proof p { margin: 0; color: var(--muted); }
.proof p + p { margin-top: 10px; }

@media (forced-colors: active) {
  .proof-figure b { -webkit-text-fill-color: CanvasText; color: CanvasText; }
}
@media (max-width: 600px) {
  .proof { flex-direction: column; gap: 14px; text-align: center; }
  .proof-figure { min-width: 0; }
}

/* People --------------------------------------------------------- */

.people {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.person { padding: 22px; }
.person h3 { margin: 0 0 2px; font-size: 19px; letter-spacing: -0.015em; }
.person .role {
  display: block;
  color: var(--accent);
  font-weight: 600;
  font-size: 13.5px;
}
.person .where {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 13px;
}
.person p { margin: 12px 0 0; color: var(--muted); font-size: 14.5px; }
.person ul { margin: 12px 0 0; padding-left: 20px; }
.person li { color: var(--muted); font-size: 14px; margin-bottom: 6px; }
.person li strong { color: var(--text); font-weight: 600; }

/* Audience segments ---------------------------------------------- */

.segments { margin: 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.segments li {
  padding-left: 18px;
  position: relative;
  color: var(--muted);
  font-size: 15px;
}
.segments li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.segments li strong { color: var(--text); }

/* Client work ---------------------------------------------------- */

.work-group { margin-bottom: 34px; }
.work-group:last-child { margin-bottom: 0; }

.work-group > h3 {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
}
.work-group > .group-note {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 14px;
}

.worklist { display: grid; gap: 12px; }

.work-item { padding: 17px 19px; }
.work-item h4 {
  margin: 0 0 3px;
  font-size: 16.5px;
  letter-spacing: -0.01em;
}
.work-item .role {
  color: var(--accent);
  font-weight: 600;
  font-size: 13px;
}
.work-item p { margin: 8px 0 0; color: var(--muted); font-size: 14.5px; }

.stack {
  margin-top: 10px;
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.stack span {
  font-size: 11.5px;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 2px 7px;
  white-space: nowrap;
}

/* Compact two-column list for the non-mobile systems work */
.legacy {
  margin: 0;
  padding-left: 20px;
  columns: 2;
  column-gap: 28px;
}
.legacy li {
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 7px;
  break-inside: avoid;
}
@media (max-width: 620px) {
  .legacy { columns: 1; }
}

/* Numbered steps ------------------------------------------------- */

.steps {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.steps li {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px 18px 60px;
  color: var(--muted);
  font-size: 15px;
}
.steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 18px;
  top: 17px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--accent-ink);
  font-weight: 700;
  font-size: 14px;
}
.steps li strong { color: var(--text); }
/* Only the leading step heading is a block — inline <strong> mid-sentence must stay inline. */
.steps li > strong:first-child { display: block; margin-bottom: 2px; }

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

.faq details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2px 18px;
  margin-bottom: 10px;
}
.faq summary {
  cursor: pointer;
  padding: 15px 34px 15px 0;
  font-weight: 600;
  list-style: none;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-weight: 400;
  font-size: 21px;
  line-height: 1;
}
.faq details[open] summary::after { content: "\2013"; }
.faq details > :not(summary) { color: var(--muted); }
.faq details p { margin: 0 0 16px; }

/* Panel (contact, about) ----------------------------------------- */

.panel {
  background: linear-gradient(135deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 26px;
}
.panel.center { text-align: center; }
.panel p:first-child { margin-top: 0; }
.panel p:last-child { margin-bottom: 0; }

.email {
  display: inline-block;
  margin-top: 6px;
  font-size: clamp(17px, 2.6vw, 21px);
  font-weight: 600;
  word-break: break-word;
}

.note { color: var(--muted); font-size: 14px; }
.lede-sm { color: var(--muted); margin: 0 0 20px; }

/* Prose (privacy pages) ------------------------------------------ */

.prose h2 { margin: 0 0 12px; }
.prose p, .prose li { color: var(--muted); }
.prose p:last-child { margin-bottom: 0; }
.prose ul { padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.prose strong { color: var(--text); }

/* Testimonials ---------------------------------------------------- */

.quotes {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

/* A blockquote, not a div, because it is one. Note the attribution uses <cite>
   rather than <footer>: the global footer rule is an element selector and would
   drop a centred 40px-margin block inside every card. */
.quote {
  margin: 0;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
}
.quote p {
  margin: 0 0 16px;
  color: var(--text);
  font-size: 15.5px;
  line-height: 1.6;
}
.quote cite {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-style: normal;
  display: flex;
  align-items: center;
  gap: 11px;
}

/* Initials, not photographs. A LinkedIn profile photo is the person's likeness,
   and putting it in a card that advertises this company is a use they haven't
   agreed to — different in kind from quoting words they wrote about us and
   published. Swap an <img> in here per person once they've said yes.
   aria-hidden because the name sits immediately beside it. */
.quote .avatar {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--accent-ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The flag is the only thing stating the country, so it carries meaning and gets
   real alt text rather than aria-hidden. Height is fixed and width is auto
   because the four flags have four different ratios (2:1, 5:3, 1.9:1, 3:2) — the
   intrinsic width/height attributes in the markup keep the box reserved. The
   hairline stops the white in the UK and US flags bleeding into a light card. */
.quote .flag {
  flex: 0 0 auto;
  margin-left: auto;
  align-self: center;
  height: 13px;
  width: auto;
  border-radius: 1px;
  box-shadow: 0 0 0 1px var(--border);
}

.quote .who { min-width: 0; }
.quote .who b {
  display: block;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}
.quote .who .role {
  display: block;
  color: var(--muted);
  font-size: 13px;
}

/* Articles — index listing --------------------------------------- */

.post-list {
  display: grid;
  gap: 16px;
}

.post-card {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 0;
  overflow: hidden;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.post-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}
.post-card img {
  width: 100%;
  height: 100%;
  min-height: 150px;
  object-fit: cover;
  display: block;
}
.post-card-body { padding: 22px 24px; }
.post-card h3 {
  margin: 6px 0 8px;
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: -0.015em;
}
.post-card h3 a { color: var(--text); }
.post-card h3 a:hover { color: var(--accent); text-decoration: none; }
.post-card p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
}

@media (max-width: 620px) {
  .post-card { grid-template-columns: 1fr; }
  .post-card img { min-height: 0; aspect-ratio: 16 / 9; }
}

/* Articles — article page ---------------------------------------- */

.article {
  max-width: 720px;
  margin: 0 auto;
}

.article-head {
  padding: 40px 0 8px;
  text-align: left;
}
.article-head h1 {
  margin: 12px 0 16px;
  max-width: 30ch;
  font-size: clamp(27px, 4.6vw, 40px);
  line-height: 1.14;
  letter-spacing: -0.022em;
  color: var(--text);
}
.byline {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
}
.byline strong { color: var(--text); font-weight: 600; }

.article-hero {
  margin: 26px 0 34px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  line-height: 0;
}
.article-hero img { width: 100%; display: block; }

.article-body {
  font-size: 17.5px;
  line-height: 1.75;
  color: var(--muted);
}
.article-body > p { margin: 0 0 24px; }
.article-body strong { color: var(--text); font-weight: 600; }
.article-body em { color: var(--text); }
.article-body h2 {
  margin: 44px 0 14px;
  font-size: clamp(21px, 3vw, 26px);
  line-height: 1.25;
  color: var(--text);
}
.article-body h3 {
  margin: 34px 0 10px;
  font-size: 19px;
  color: var(--text);
}
.article-body ul, .article-body ol {
  margin: 0 0 24px;
  padding-left: 24px;
}
.article-body li { margin-bottom: 10px; }
.article-body blockquote {
  margin: 0 0 24px;
  padding: 2px 0 2px 22px;
  border-left: 3px solid var(--accent);
  color: var(--text);
  font-size: 19px;
}
.article-body blockquote p:last-child { margin-bottom: 0; }
.article-body hr {
  margin: 40px 0;
  border: 0;
  border-top: 1px solid var(--border);
}
.article-body a { text-decoration: underline; }

/* Author card at the foot of an article ---------------------------- */

/* Sits between the body and .article-foot, not inside it: the foot is navigation
   and print drops it, whereas who wrote this is content. Initials rather than a
   photograph, for consistency with the testimonial cards. */
.author {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-top: 44px;
  padding: 22px;
}

.author-avatar {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--accent-ink);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.author-body { min-width: 0; }
.author-body b {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}
.author-body .role {
  display: block;
  color: var(--accent);
  font-weight: 600;
  font-size: 13.5px;
}
.author-body p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.6;
}

/* Separators are drawn by CSS rather than typed between the links, so the markup
   holds no orphaned interpunct if one is ever removed. */
.author-links {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-weight: 600;
}
.author-links a + a { position: relative; }
.author-links a + a::before {
  content: "·";
  position: absolute;
  left: -9px;
  color: var(--muted);
  font-weight: 400;
}

@media (max-width: 520px) {
  .author { flex-direction: column; gap: 12px; }
}

/* Prev/next + back links at the foot of an article */

.article-foot {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}
.article-nav {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-bottom: 26px;
}
.article-nav a {
  display: block;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
}
.article-nav a:hover {
  border-color: var(--border-strong);
  text-decoration: none;
}
.article-nav .dir {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.article-nav .next { text-align: right; }

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

footer {
  border-top: 1px solid var(--border);
  margin-top: 40px;
  padding: 34px 0 60px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}
footer a { color: var(--muted); }
footer .links {
  margin-top: 8px;
  display: flex;
  gap: 6px 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Print ---------------------------------------------------------- */

@page {
  size: A4;
  margin: 14mm 12mm;
}

@media print {
  /* Chrome's PDF export paints the gradient's bounding box when
     background-clip: text is used, leaving a visible rectangle around the
     headline. Fall back to solid ink. */
  .hero h1,
  .proof-figure b {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--text);
  }
  .proof-figure b { color: var(--accent); }

  /* The glow is a large flat wash on paper — drop it. */
  body { background: none; }

  .skip { display: none; }

  /* A control that changes screen colours has no meaning on paper. */
  .theme-toggle { display: none; }

  /* Sticky positioning has no meaning in print and can clip content. */
  .topbar { position: static; backdrop-filter: none; }

  /* Don't split a card, step or FAQ entry across a page boundary. */
  .card,
  .panel,
  .steps li,
  .faq details,
  .proof { break-inside: avoid; page-break-inside: avoid; }

  section { break-inside: auto; padding: 18px 0; }
  h1, h2, h3, h4 { break-after: avoid; page-break-after: avoid; }

  /* Deliberately NOT expanding href values after links. On the support page the
     link text is already the URL, so it prints the address twice. */

  /* Articles: the prev/next block is navigation, so it has no place on paper.
     Keep the hero image with its headline and don't orphan a blockquote. */
  .article-foot { display: none; }
  .article-hero,
  .article-body blockquote { break-inside: avoid; page-break-inside: avoid; }
  .article-body { font-size: 11pt; line-height: 1.6; }
}

/* Scroll-scrubbed video ------------------------------------------- */

/* Without script this is an ordinary video with controls. scrub.js adds
   .is-scrubbing, which makes the section tall and pins the video while the
   reader scrolls through it — the extra height is the scrub track, so
   --scrub-length sets how much scrolling one pass of the clip takes. */
.scrub video {
  display: block;
  width: 100%;
  border-radius: var(--radius);
  background: var(--surface);
}

.scrub.is-scrubbing {
  height: var(--scrub-length, 300vh);
  padding: 0;
}

.scrub.is-scrubbing .scrub-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: grid;
  place-items: center;
}

.scrub.is-scrubbing video {
  max-height: 80svh;
  width: auto;
  max-width: 100%;
}

@media print {
  .scrub.is-scrubbing { height: auto; }
  .scrub.is-scrubbing .scrub-stage { position: static; height: auto; }
}

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

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