/*
 * website/v2/v2.css — the design system for v2, the WhatsApp-free site that
 * goes live 1 October 2026.
 *
 * ONE PALETTE, AND IT IS DARK (owner's decision, 2026-09-12). v2 carried a full
 * light palette and followed prefers-color-scheme; it no longer does. The site
 * now looks the same to everyone, which is what the design was drawn for — the
 * CV preview is white paper, and it only reads as paper against a dark ground.
 *
 * The cost is real and was accepted with the decision: a phone set to light was
 * set that way by somebody, sometimes for their eyesight, and dark is the
 * harder read outdoors in daylight — where a good many of these users are. If
 * that turns out to matter, the answer is a toggle rather than a media query:
 * this palette simply becomes the default half of one.
 *
 * Descended from website/styles.css and still close to it: same terracotta,
 * same Bricolage Grotesque + Inter. One token is deliberately absent —
 * --wa-green. That hue WAS the WhatsApp signifier on the live site, and nothing
 * in v2 may reach for it.
 */

/* ── Tokens ───────────────────────────────────────────────────────────── */
  :root {
    --accent: #E8795A; --accent-2: #F08E6E; --accent-soft: rgba(232,121,90,0.14);
    --amber: #E8A23D; --amber-soft: rgba(232,162,61,0.16);
    --bg: #16130F;
    /* Two washes over the base colour, same geometry as v1's. The SECOND
       LAYER AND THE BASE WERE LOST when the palette was flipped to dark, and
       the trailing comma left behind swallowed the next declaration whole: the
       browser read `--bg-grad: radial-gradient(…), --surface: #201B16;` as one
       value, so --surface was never defined at all. Every `background:
       var(--surface)` on the site — twenty rules, including the cards on the
       blog board and the language menu in the header — resolved to nothing and
       rendered transparent, and the body lost its wash to an invalid value.
       Keep the semicolon. */
    --bg-grad: radial-gradient(1100px 560px at 80% -12%, rgba(232,121,90,0.14), transparent 62%),
               radial-gradient(760px 420px at 12% 4%, rgba(232,162,61,0.09), transparent 70%), #16130F;
    --surface: #201B16; --surface-2: #1B1712; --surface-3: #2A241D;
    --ink: #F4EEE5; --ink-2: #B4AA9C; --ink-3: #8A8073;
    --line: rgba(246,242,235,0.10); --line-2: rgba(246,242,235,0.18);
    --dk-bg: #0E0C0A; --dk-ink: #F4EEE5; --dk-ink2: #A79E93;
    --ok: #7FB069; --err: #F0917C;
    --ok: #7FB069; --err: #F0917C;
    --flag: #E0BE72; --flag-bg: rgba(232,162,61,0.10);
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.4), 0 2px 10px rgba(0,0,0,0.35);
    --shadow-md: 0 2px 4px rgba(0,0,0,0.4), 0 12px 32px rgba(0,0,0,0.45);
    --shadow-lg: 0 30px 70px rgba(0,0,0,0.55);
    --shadow-tilt: -30px 40px 80px rgba(0,0,0,0.6);
    --r-sm: 12px; --r-md: 16px; --r-lg: 24px; --r-xl: 30px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.4), 0 2px 10px rgba(0,0,0,0.35);
    --shadow-md: 0 2px 4px rgba(0,0,0,0.4), 0 12px 32px rgba(0,0,0,0.45);
    --shadow-lg: 0 30px 70px rgba(0,0,0,0.55);
    --shadow-tilt: -30px 40px 80px rgba(0,0,0,0.6);

    --font-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
    --font-body:    "Inter", system-ui, sans-serif;
    --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    /* Native controls — the <select> menus on the job board especially — are
       drawn by the OS, and would render as light chrome on this ground without
       it. */
    color-scheme: dark;
  }

  * { box-sizing: border-box; }
  body {
    margin: 0; background: var(--bg-grad); background-color: var(--bg);
    color: var(--ink); font-family: var(--font-body);
    font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased;
  }
  a { color: inherit; }
  h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.02em; text-wrap: balance; margin: 0; }
  p { margin: 0; }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
  @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

  .wrap { width: min(1120px, calc(100% - 40px)); margin-inline: auto; }
  .wrap-narrow { width: min(860px, calc(100% - 40px)); margin-inline: auto; }

  /* ── Header ──────────────────────────────────────────────────────────── */
  .hdr {
    position: sticky; top: 0; z-index: 40;
    backdrop-filter: blur(14px); background: color-mix(in srgb, var(--bg) 86%, transparent);
    border-bottom: 1px solid var(--line);
  }
  .hdr-inner { display: flex; align-items: center; gap: 18px; height: 62px; }
  .logo { display: flex; align-items: center; gap: 9px; text-decoration: none; margin-right: auto; }
  .logo-mark {
    width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center;
    background: var(--accent); color: #fff; flex: none;
  }
  .logo-word { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }
  .nav { display: flex; gap: 22px; font-size: 14.5px; color: var(--ink-2); font-weight: 500; }
  .nav a { text-decoration: none; padding-bottom: 2px; border-bottom: 2px solid transparent; }
  .nav a:hover { color: var(--accent); }
  .nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
  /* ── The mobile menu ────────────────────────────────────────────────
     The port lost this and nobody noticed for a fortnight: .nav was simply
     hidden below 900px with nothing put in its place, so Find jobs, Blog and
     About were unreachable on a phone — which is the device almost every one of
     these users has. The desktop had a nav and the phone had a dead end.

     CSS-only, like v1's: a visually-hidden checkbox and a sibling :checked
     rule. The /v2 CSP is script-src 'self' and this has to work before any
     script does — a menu that needs JS to open is a menu that does not open on
     a slow connection. */
  .nav-toggle {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    border: 0; overflow: hidden; clip: rect(0 0 0 0);
  }
  .nav-burger { display: none; }
  @media (max-width: 900px) {
    .nav { display: none; }
    .nav-burger {
      display: flex; flex-direction: column; gap: 5px; order: 3;
      width: 42px; height: 42px; flex: none;
      align-items: center; justify-content: center;
      border: 1px solid var(--line-2); border-radius: 12px;
      background: var(--surface); cursor: pointer; -webkit-tap-highlight-color: transparent;
    }
    .nav-burger span {
      width: 19px; height: 2px; background: var(--ink); border-radius: 2px;
      transition: transform .2s, opacity .2s;
    }
    .nav-toggle:focus-visible ~ .nav-burger { outline: 2px solid var(--accent); outline-offset: 2px; }
    .nav-toggle:checked ~ .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-toggle:checked ~ .nav-burger span:nth-child(2) { opacity: 0; }
    .nav-toggle:checked ~ .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    .nav-toggle:checked ~ .nav { display: flex; }
    .nav {
      position: absolute; top: 100%; right: 14px; margin-top: 8px;
      flex-direction: column; gap: 2px; min-width: 200px; z-index: 60;
      background: var(--surface); border: 1px solid var(--line);
      border-radius: 14px; padding: 8px; box-shadow: var(--shadow-md);
    }
    .nav a {
      padding: 12px 14px; border-radius: 9px; font-size: 15px;
      color: var(--ink); border-bottom: 0;
    }
    .nav a:hover { background: var(--surface-2); }
    .nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }
  }
  @media (prefers-reduced-motion: reduce) { .nav-burger span { transition: none; } }

  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    font-weight: 600; text-decoration: none; border-radius: 999px; border: 1px solid transparent;
    padding: 11px 20px; font-size: 15px; cursor: pointer; white-space: nowrap;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
  }
  .btn-primary { background: var(--accent); color: #fff; box-shadow: 0 6px 18px rgba(200,90,60,.28); }
  .btn-primary:hover { background: var(--accent-2); transform: translateY(-1px); }
  .btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line-2); }
  .btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
  .btn-sm { padding: 8px 16px; font-size: 14px; }
  .btn-lg { padding: 15px 28px; font-size: 16.5px; }

  /* ── Language switcher ───────────────────────────────────────────────
     The live header's control (styles.css .lang-switcher), on this draft's
     tokens. Eleven languages, because that is how many South Africa has and
     the site already carries all of them. */
  .lang-switcher { position: relative; }
  .lang-btn {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--surface); border: 1px solid var(--line);
    padding: 8px 13px; border-radius: 999px;
    font-size: 14px; font-weight: 500; color: var(--ink-2);
    cursor: pointer; box-shadow: var(--shadow-sm); font-family: inherit;
    transition: background-color .18s, color .18s, border-color .18s;
  }
  .lang-btn:hover { background: var(--surface-2); color: var(--ink); border-color: var(--line-2); }
  .lang-caret { font-size: 10px; color: var(--ink-3); transition: transform .18s; }
  .lang-switcher.open .lang-caret { transform: rotate(180deg); }
  .lang-menu {
    position: absolute; top: calc(100% + 8px); right: 0;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
    padding: 7px; min-width: 190px; box-shadow: var(--shadow-md); z-index: 60;
    display: flex; flex-direction: column; gap: 1px;
    max-height: 70vh; overflow-y: auto;
  }
  .lang-item {
    text-align: left; background: transparent; border: 0;
    padding: 10px 12px; border-radius: 9px; font-family: inherit;
    font-size: 14px; cursor: pointer; color: var(--ink); white-space: nowrap;
    display: flex; align-items: baseline; gap: 8px;
  }
  .lang-item:hover { background: var(--surface-2); }
  .lang-item[aria-current="true"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
  /* The six languages whose copy is not written yet say so, rather than
     switching to a page that is still in English with no explanation. */
  .lang-soon { font-size: 11px; color: var(--ink-3); font-weight: 400; margin-left: auto; }
  @media (max-width: 560px) {
    .lang-btn { padding: 8px 11px; }
    .lang-btn .lang-name { display: none; }
  }

  /* ── Page shell ──────────────────────────────────────────────────────── */
  .section { padding: 72px 0; }
  .section-tight { padding: 44px 0 72px; }
  .section-head { max-width: 42em; margin-bottom: 40px; }
  .eyebrow {
    font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--accent); margin-bottom: 12px;
  }
  .h1 { font-size: clamp(36px, 5.4vw, 60px); font-weight: 800; line-height: 1.04; }
  .h2 { font-size: clamp(27px, 3.8vw, 42px); font-weight: 700; line-height: 1.12; }
  .h3 { font-size: 20px; font-weight: 700; }
  .lede { margin-top: 18px; font-size: 18.5px; color: var(--ink-2); max-width: 34em; }
  .sub { margin-top: 14px; font-size: 17.5px; color: var(--ink-2); }

  .ticks { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 12px; }
  .ticks li { display: flex; gap: 11px; align-items: flex-start; font-size: 16px; color: var(--ink-2); }
  .ticks svg { color: var(--accent); flex: none; margin-top: 4px; }

  /* ── Small phones ────────────────────────────────────────────────────
     360px is not an edge case here — it is the common device. Four things sit
     in the header (logo, burger, language, the CTA) and at full size they add
     up to more than the viewport, so the row overflows and the page scrolls
     sideways. Tightened rather than hidden: the wordmark only goes below 400px,
     where there is genuinely no room for it, and the mark stays so the header
     is still recognisably the site. */
  @media (max-width: 560px) {
    .hdr-inner { gap: 10px; }
    .logo { gap: 7px; min-width: 0; }
    .logo-word { font-size: 16px; }
    .hdr-inner .btn-sm { padding: 8px 14px; }
  }
  @media (max-width: 400px) {
    .logo-word { display: none; }
  }

  /* The tilted mock is rotated in 3D, so its painted box is wider than its
     layout box and it pushes a horizontal scrollbar onto the whole page on a
     narrow screen. clip rather than hidden: hidden on an ancestor silently
     breaks position:sticky for the header above it. */
  .hero { overflow-x: clip; }

  /* ── Hero ────────────────────────────────────────────────────────────── */
  .hero { padding: 60px 0 76px; }
  .hero-grid { display: grid; grid-template-columns: 1.02fr 1fr; gap: 60px; align-items: center; }
  @media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; gap: 54px; } }

  .kicker {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    color: var(--accent); background: var(--accent-soft);
    padding: 7px 14px; border-radius: 999px; margin-bottom: 20px;
  }
  .kicker-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
  .hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
  .hero-chips { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 26px; }
  .hero-chip { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--ink-2); font-weight: 500; }
  .hero-chip svg { color: var(--accent); flex: none; }

  /* The builder mock is a PICTURE of the product, not the product. It is tilted
     in 3D and lifted off the page so nothing inside it reads as a live control,
     and it takes no pointer or keyboard events at all. */
  .stage { perspective: 1800px; padding: 10px 0 20px; }
  .mock {
    transform: rotateY(-15deg) rotateX(7deg) rotateZ(-1.2deg);
    transform-origin: 60% 50%;
    pointer-events: none; user-select: none;
    filter: drop-shadow(var(--shadow-tilt));
    transition: transform .5s cubic-bezier(.2,.7,.3,1);
  }
  .stage:hover .mock { transform: rotateY(-11deg) rotateX(5deg) rotateZ(-0.8deg); }
  @media (max-width: 980px) { .mock { transform: rotateY(-8deg) rotateX(4deg); } }
  .mock-cap {
    display: block; margin-top: 22px; text-align: center;
    font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-3); font-weight: 600;
  }
  .browser {
    border-radius: var(--r-lg); background: var(--surface);
    border: 1px solid var(--line-2); overflow: hidden;
  }
  .browser-bar {
    display: flex; align-items: center; gap: 8px; padding: 12px 14px;
    background: var(--surface-3); border-bottom: 1px solid var(--line);
  }
  .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); flex: none; }
  .url {
    margin-left: 8px; flex: 1; font-family: var(--font-mono); font-size: 11.5px;
    color: var(--ink-2); background: var(--surface); border-radius: 999px;
    padding: 5px 12px; border: 1px solid var(--line); overflow: hidden; text-overflow: ellipsis;
  }
  .builder { padding: 22px; display: grid; gap: 16px; }
  .builder-step { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
  .builder-title { font-family: var(--font-display); font-size: 19px; font-weight: 700; margin-top: 2px; }
  .bar { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
  .bar span { display: block; height: 100%; width: 62%; background: var(--accent); border-radius: 999px; }
  .field { display: grid; gap: 6px; }
  .field label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
  .field .box {
    border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 11px 13px;
    background: var(--surface-2); font-size: 14.5px;
  }
  .field .box.filled { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
  .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .builder-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .saved { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-3); }
  .saved b { color: var(--accent); font-weight: 600; }

  /* ── Steps ───────────────────────────────────────────────────────────── */
  .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  @media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }
  .step {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: 26px 24px 28px; box-shadow: var(--shadow-sm);
    display: grid; gap: 10px; align-content: start;
  }
  .step-n { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--accent); letter-spacing: .1em; }
  .step p { color: var(--ink-2); font-size: 15.5px; }

  /* ── Testimonials ────────────────────────────────────────────────────── */
  /* Built from website/testimonials.json by scripts/build-website.mjs, between
     the markers in index.html. Plain HTML — v2 has no React and no hydration,
     so the quotes are simply in the page. */
  /* The column count follows the number of quotes: three across in one row,
     four as two rows of two. auto-fit would pack four as 3 + 1 and leave the
     last card alone on its own row looking like a mistake. */
  .tquotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .tquotes.is-4 { grid-template-columns: repeat(2, 1fr); max-width: 880px; margin-inline: auto; }
  @media (max-width: 860px) { .tquotes, .tquotes.is-4 { grid-template-columns: 1fr; max-width: none; } }
  .tq {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: 24px 24px 22px; box-shadow: var(--shadow-sm);
    display: grid; gap: 14px; align-content: start;
  }
  .tq-stars { color: var(--amber); font-size: 14px; letter-spacing: .14em; line-height: 1; }
  .tq-quote { font-size: 17px; line-height: 1.55; color: var(--ink); margin: 0; }
  .tq-by { display: flex; align-items: center; gap: 11px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
  .tq-av {
    width: 34px; height: 34px; border-radius: 50%; flex: none;
    display: grid; place-items: center; font-weight: 700; font-size: 14px; color: #fff;
    background: var(--accent);
  }
  .tq-name { font-weight: 600; color: var(--ink); }

  /* ── Jobs ────────────────────────────────────────────────────────────── */
  .jobs-band { background: var(--surface-2); border-block: 1px solid var(--line); }
  .jobs-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: start; }
  @media (max-width: 980px) { .jobs-grid { grid-template-columns: 1fr; gap: 34px; } }
  .job-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
  .job {
    background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--amber);
    border-radius: var(--r-md); padding: 16px 18px; display: grid; gap: 6px;
    box-shadow: var(--shadow-sm);
  }
  .job h3 { font-size: 16.5px; font-weight: 700; letter-spacing: -0.01em; }
  .job-co { font-size: 14.5px; color: var(--ink-2); font-weight: 500; }
  .job-meta { font-size: 13px; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
  .job-tag {
    font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    background: var(--amber-soft); color: var(--ink-2); padding: 3px 9px; border-radius: 999px;
  }
  .job-apply {
    margin-top: 6px; display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap;
    font-size: 14.5px; font-weight: 600; color: var(--accent); text-decoration: none; justify-self: start;
  }
  .job-apply:hover { text-decoration: underline; }
  .job-src { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); font-weight: 400; }
  .jobs-note {
    margin-top: 18px; font-size: 13.5px; color: var(--ink-3);
    border-top: 1px solid var(--line); padding-top: 14px;
  }

  /* Jobs board page */
  .board-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; }
  .board-count {
    font-family: var(--font-mono); font-size: 13.5px; color: var(--ink-2);
    background: var(--surface-3); padding: 5px 12px; border-radius: 999px;
  }
  .filters { display: grid; gap: 14px; margin: 30px 0 8px; }
  .filter-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .filter-label {
    font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-3); width: 74px; flex: none;
  }
  .chip {
    font-size: 14px; font-weight: 500; text-decoration: none; color: var(--ink-2);
    background: var(--surface); border: 1px solid var(--line-2); border-radius: 999px;
    padding: 6px 14px; display: inline-flex; align-items: center; gap: 7px;
  }
  .chip:hover { border-color: var(--accent); color: var(--accent); }
  .chip[aria-current="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
  .chip-n { font-family: var(--font-mono); font-size: 11.5px; opacity: .7; }
  /* Search front door — the live /jobs pairing of category + location, with the
     internship board's keyword box in front of it. */
  .job-search {
    display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end;
    margin: 30px 0 0;
  }
  .jsf { display: flex; flex-direction: column; gap: 6px; flex: 1 1 220px; min-width: 170px; }
  .jsf-q { flex: 2 1 320px; }
  .jsf label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); padding-left: 4px; }
  .jsf-input { position: relative; display: flex; align-items: center; }
  .jsf-input svg { position: absolute; left: 16px; color: var(--ink-3); pointer-events: none; }
  /* One control shape for all three fields. The selects need appearance:none or
     the browser draws its own box — native radius, native double-chevron — and
     they stop matching the input beside them. The chevron is then ours: a single
     stroked caret, drawn in the ink colour, inlined so it needs no network. */
  .jsf input, .jsf select {
    width: 100%; background: var(--surface); border: 1px solid var(--line);
    box-shadow: var(--shadow-sm); border-radius: var(--r-md); padding: 15px 18px;
    font-size: 16px; font-weight: 500; color: var(--ink); font-family: var(--font-body);
    line-height: 1.4; height: 56px;
  }
  .jsf input { padding-left: 44px; padding-right: 40px; }
  .jsf input::-webkit-search-cancel-button { display: none; }
  .jsf select {
    cursor: pointer; padding-right: 46px;
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23B4AA9C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 18px center;
  }
  .jsf select:hover { border-color: var(--line-2); }
  .jsf input:focus-visible, .jsf select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
  .jsf-go .btn { height: 56px; }
  .jsf-clear {
    position: absolute; right: 12px; background: none; border: 0; cursor: pointer;
    font-size: 20px; line-height: 1; color: var(--ink-3); padding: 4px 6px; border-radius: 6px;
  }
  .jsf-clear:hover { color: var(--accent); }
  .jsf-go { flex: 0 0 auto; }
  .jsf-go .btn { padding: 16px 34px; font-size: 16px; }
  @media (max-width: 620px) { .jsf { flex-basis: 100%; } .jsf-go, .jsf-go .btn { width: 100%; } }
  .search-status { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 18px; min-height: 4px; }
  .board-empty {
    margin-top: 26px; padding: 28px; text-align: center; color: var(--ink-2);
    background: var(--surface); border: 1px dashed var(--line-2); border-radius: var(--r-lg);
  }
  .board-list { margin-top: 26px; }
  .board-cta {
    grid-column: 1 / -1; background: var(--accent-soft); border: 1px solid var(--accent);
    border-radius: var(--r-md); padding: 20px 22px; display: flex; flex-wrap: wrap;
    gap: 14px; align-items: center; justify-content: space-between;
  }
  .board-cta p { font-weight: 600; font-size: 16px; max-width: 34em; }

  /* ── Sign in ─────────────────────────────────────────────────────────
     Mirrors website/login.html rather than reinventing it. Two decisions there
     are load-bearing and are kept exactly:

     1. GOOGLE GETS THE FILLED BUTTON. The page used to give Google a ghost
        button and the emailed code the filled one, pointing the loudest control
        at the slowest path — type an address, leave the page, hunt for a
        message, come back, type six digits. On 2026-09-03 a real jobseeker took
        that path, asked for three codes in three minutes and never got in.
     2. THE EMAIL FORM IS HIDDEN behind "Sign in with email instead". It is one
        tap away, and it does not compete with the button above it. */
  .signin { display: grid; place-items: center; padding: 48px 0 84px; }
  .login-card {
    width: 100%; max-width: 440px; background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--r-lg);
    box-shadow: var(--shadow-md); padding: 32px 28px;
  }
  .login-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; }
  .login-brand .logo-mark { width: 30px; height: 30px; border-radius: 10px; }
  .login-brand span { font-family: var(--font-display); font-weight: 700; font-size: 18px; }
  .login-card h1 { font-size: 24px; line-height: 1.2; margin: 0 0 10px; }
  .login-card p.sub { color: var(--ink-2); font-size: 14.5px; line-height: 1.6; margin: 0 0 22px; }
  .login-card label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 7px; }
  .login-card input {
    width: 100%; padding: 13px 15px; font-size: 16px;  /* 16px: iOS zooms in on anything smaller */
    border: 1px solid var(--line); border-radius: var(--r-sm);
    background: var(--surface-2); color: var(--ink); font-family: inherit;
  }
  .login-card input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
  .login-card input.code { letter-spacing: 10px; text-align: center; font-size: 26px; font-weight: 700; }
  .login-card .btn { width: 100%; justify-content: center; margin-top: 18px; }
  #step-email p.sub { margin-bottom: 14px; }
  /* What an account is FOR. Three lines, because the page asked people to sign
     in without ever saying why, and the free builder sits right underneath as
     the easier choice. Small and quiet — the Google button stays the loudest
     thing on the card. Wording matches buildSignupPanel in cv-editor.js, which
     is where this same promise is already made at the end of the wizard. */
  .why { display: grid; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; }
  .why li { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; color: var(--ink-2); line-height: 1.45; }
  .why svg { color: var(--accent); flex: none; margin-top: 3px; }
  .why b { color: var(--ink); font-weight: 600; }
  .g-btn { gap: 10px; }
  .g-btn svg { flex: none; display: block; }
  /* The Google mark keeps its own colours on a white chip. Dropped straight onto
     the terracotta fill it goes muddy, and the whole value of this button is
     that people recognise it without reading it. */
  .g-mark { display: inline-flex; background: #fff; border-radius: 50%; padding: 5px; flex: none; }
  .under-btn { text-align: center; color: var(--ink-2); font-size: 13px; margin: 10px 0 0; }
  .alt { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
  .alt-open {
    background: none; border: 0; padding: 0; font: inherit; font-size: 14.5px;
    color: var(--ink-2); text-decoration: underline; cursor: pointer; text-align: left;
  }
  .alt-open:hover { color: var(--ink); }
  .alt-note { color: var(--ink-3); font-size: 13px; line-height: 1.6; margin: 5px 0 0; }
  .alt-row { margin: 18px 0 0; }
  #email-panel { margin-top: 14px; }
  .login-foot { margin-top: 22px; font-size: 13px; color: var(--ink-3); line-height: 1.6; }
  /* Status line under the sign-in form (login.js writes .msg.err / .msg.ok).
     Semantic colours, deliberately not the accent: "your code has expired" and
     "check your email" must not read as the same thing as the brand. */
  .msg { margin-top: 16px; font-size: 14px; line-height: 1.55; border-radius: var(--r-sm); padding: 12px 14px; }
  .msg.err { background: rgba(160, 48, 30, 0.12); color: var(--err); }
  .msg.ok  { background: rgba(76, 122, 63, 0.14); color: var(--ok); }
  .linkish {
    background: none; border: 0; padding: 0; font: inherit;
    color: var(--accent); text-decoration: underline; cursor: pointer;
  }
  /* Visually hidden, still read aloud: a placeholder is not a label, and a
     screen reader would otherwise meet an unnamed field. */
  .vh {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }

  /* ── Sample CV ───────────────────────────────────────────────────────
     A flat A4 card. It is a document, not a screen, so it gets no tilt. */
  .cv {
    background: #FFFFFF; color: #221C16; border-radius: var(--r-md); box-shadow: var(--shadow-lg);
    padding: 26px 24px; border: 1px solid rgba(34,28,22,0.10); aspect-ratio: 1 / 1.414;
    display: flex; flex-direction: column; gap: 14px; max-width: 400px; margin-inline: auto; width: 100%;
  }
  .cv-top { border-bottom: 2px solid var(--accent); padding-bottom: 10px; }
  .cv-name { font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: .07em; }
  .cv-role { font-size: 10px; color: #6B635A; letter-spacing: .1em; text-transform: uppercase; margin-top: 3px; }
  .cv-sec { display: grid; gap: 5px; }
  .cv-h { font-family: var(--font-display); font-size: 8.5px; font-weight: 700; letter-spacing: .22em; color: var(--accent); }
  .cv-line { height: 5px; border-radius: 3px; background: #EFE9DF; }
  .cv-line.s { width: 62%; } .cv-line.m { width: 84%; } .cv-line.l { width: 96%; }
  .cv-row { display: flex; justify-content: space-between; font-size: 9px; font-weight: 600; }
  .cv-row span:last-child { color: #9C948A; font-family: var(--font-mono); font-weight: 400; }
  .cv-foot {
    margin-top: auto; padding-top: 8px; border-top: 1px solid #F0EBE2;
    font-size: 7px; color: #8A847E; font-family: var(--font-mono);
    display: flex; justify-content: space-between;
  }

  /* ── The builder ─────────────────────────────────────────────────────
     A mock of the real wizard (website/cv-editor.js): a progress rail, one
     open step, numbered dots that tick over as you go, and the preview pinned
     beside it. Structure and wording follow the live editor — the same section
     titles, the same "Next: <section>" button, the same read-back summary on a
     finished step — so this shows the editor RESKINNED, not redesigned. */
  .build-shell { display: grid; grid-template-columns: 1fr 380px; gap: 34px; align-items: start; }
  @media (max-width: 980px) { .build-shell { grid-template-columns: 1fr; gap: 26px; } }

  .wiz-head { margin-bottom: 18px; }
  .wiz-text { font-size: 13px; color: var(--ink-2); margin: 0 0 7px; }
  .wiz-text b { color: var(--ink); font-weight: 600; }
  .wiz-track { height: 5px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
  .wiz-fill { display: block; height: 100%; border-radius: 999px; background: var(--accent); }

  .steps-list { display: grid; gap: 10px; }
  .scard {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
    overflow: hidden;
  }
  .scard-head {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 15px 18px; background: none; border: 0; font-family: inherit;
    cursor: pointer; text-align: left; color: var(--ink);
  }
  .stepdot {
    width: 24px; height: 24px; border-radius: 50%; flex: none;
    display: grid; place-items: center; font-size: 12px; font-weight: 700;
    background: var(--surface-3); color: var(--ink-3); font-family: var(--font-mono);
  }
  .scard.done .stepdot { background: var(--ok); color: #fff; }
  .scard.current .stepdot { background: var(--accent); color: #fff; }
  .scard-ttl { flex: 1; font-weight: 600; font-size: 16px; }
  .scard.done .scard-ttl { color: var(--ink-2); font-weight: 500; }
  /* The read-back: a finished step shows what you told it, so you can check it
     without reopening. */
  .wiz-sum {
    font-size: 13px; color: var(--ink-3); max-width: 46%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .chev { color: var(--ink-3); transition: transform .18s; flex: none; }
  .scard.open .chev { transform: rotate(90deg); }
  .scard-body { display: none; padding: 2px 18px 18px; }
  .scard.open .scard-body { display: block; }
  .wiz-lead { font-size: 14.5px; color: var(--ink-2); margin-bottom: 16px; }
  .wiz-fields { display: grid; gap: 14px; }
  .wiz-field { display: grid; gap: 6px; }
  .wiz-field label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
  .wiz-field input, .wiz-field textarea {
    width: 100%; padding: 12px 14px; font-size: 16px; font-family: inherit;
    border: 1px solid var(--line-2); border-radius: var(--r-sm);
    background: var(--surface-2); color: var(--ink);
  }
  .wiz-field textarea { min-height: 84px; resize: vertical; line-height: 1.5; }
  .wiz-field input:focus, .wiz-field textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
  .wiz-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .wiz-foot { margin-top: 18px; display: grid; gap: 8px; justify-items: start; }
  .wiz-skip { font-size: 13px; color: var(--ink-3); }

  /* Preview rail — pinned beside the steps, as the live editor pins it. */
  .pv { position: sticky; top: 80px; display: grid; gap: 14px; }
  .pv-card {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px;
  }
  .pv-ttl { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; }
  .pv-actions { display: grid; gap: 9px; margin-top: 16px; }
  .pv-actions .btn { width: 100%; }
  .pv-note { font-size: 12.5px; color: var(--ink-3); text-align: center; line-height: 1.5; }
  .pv-save {
    background: var(--accent-soft); border: 1px solid var(--accent); border-radius: var(--r-sm);
    padding: 14px 16px; font-size: 13.5px; color: var(--ink-2); line-height: 1.5;
  }
  .pv-save b { color: var(--ink); }
  @media (max-width: 980px) { .pv { position: static; } }

  /* ── Blog ────────────────────────────────────────────────────────────
     Three across, each card a square thumbnail over its text. The square is
     the point: every one of these illustrations is a square original, so a
     1:1 frame crops none of them, and a row of identical squares gives the
     grid a single baseline to read along. */
  .posts {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
    margin-top: 40px;   /* clear of the lede — they were touching */
  }
  @media (max-width: 980px) { .posts { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 620px) { .posts { grid-template-columns: 1fr; gap: 18px; } }
  .post {
    display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm);
    transition: transform .15s ease, box-shadow .18s ease;
  }
  .post:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
  .post-thumb { display: block; aspect-ratio: 1 / 1; background: var(--accent-soft); }
  .post-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%; display: block; }
  /* flex:1 so the cards in a row end level however long the titles run, and
     .more can sit on the bottom edge of each. */
  .post-text { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; min-width: 0; }
  .post-cat { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); margin-bottom: 9px; }
  .post h2 { font-size: 19px; font-weight: 700; line-height: 1.22; margin-bottom: 8px; }
  .post h2 a { text-decoration: none; }
  .post h2 a:hover { color: var(--accent); }
  .post p { color: var(--ink-2); font-size: 14.5px; line-height: 1.5; margin-bottom: 16px; }
  .post .more { color: var(--accent); font-weight: 600; font-size: 14.5px; text-decoration: none; margin-top: auto; }
  .post .more:hover { text-decoration: underline; }

  /* ── Build page ──────────────────────────────────────────────────────── */
  .build-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; }
  @media (max-width: 980px) { .build-grid { grid-template-columns: 1fr; gap: 40px; } }
  .checklist {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: 28px; box-shadow: var(--shadow-md);
  }
  .checklist h3 { font-size: 19px; margin-bottom: 4px; }
  .checklist .note { font-size: 14.5px; color: var(--ink-2); }
  .flow { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 0; }
  .flow li {
    display: grid; grid-template-columns: 26px 1fr; gap: 14px; align-items: start;
    padding: 13px 0; border-top: 1px solid var(--line);
  }
  .flow li:first-child { border-top: 0; }
  .flow .n {
    width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
    background: var(--accent-soft); color: var(--accent); font-size: 12.5px; font-weight: 700;
    font-family: var(--font-mono);
  }
  .flow b { font-weight: 600; font-size: 15.5px; display: block; }
  .flow span.d { font-size: 14.5px; color: var(--ink-2); }

  /* ── Email address, unscrapable ──────────────────────────────────────
     The address is never in the HTML: the span carries "hello" and
     "sendmycv.co.za" as separate attributes and the "@" exists only here, in a
     CSS content string. A harvester that fetches the page and greps for a mail
     pattern finds nothing to take.

     This is the no-JS layer, and it has to exist: PAIA requires the Information
     Officer to be genuinely reachable, and an address only a scripted browser
     can see is not published. website/v2/email.js then replaces it with a real
     mailto link, because generated content cannot be selected or copied. */
  .email[data-user]::before { content: attr(data-user); }
  .email[data-user]::after  { content: "\0040" attr(data-domain); }
  .email, .email-link { font-weight: 600; color: var(--accent); text-decoration: none; overflow-wrap: anywhere; }
  .email-link:hover { text-decoration: underline; }

  /* ── Legal ───────────────────────────────────────────────────────────── */
  .legal-grid { display: grid; grid-template-columns: 232px 1fr; gap: 48px; align-items: start; }
  @media (max-width: 900px) { .legal-grid { grid-template-columns: 1fr; gap: 28px; } }
  .toc { position: sticky; top: 82px; font-size: 14px; display: grid; gap: 7px; }
  .toc-h { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
  .toc a { color: var(--ink-2); text-decoration: none; }
  .toc a:hover { color: var(--accent); }
  @media (max-width: 900px) { .toc { position: static; } }
  .legal-meta {
    display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13.5px; color: var(--ink-3);
    font-family: var(--font-mono); margin-top: 16px;
  }
  .clause { padding: 24px 0; border-top: 1px solid var(--line); }
  .clause:first-of-type { border-top: 0; padding-top: 8px; }
  .clause h3 { font-size: 20px; margin-bottom: 10px; }
  .clause p + p { margin-top: 10px; }
  .clause p, .clause li { color: var(--ink-2); font-size: 15.5px; }
  .clause ul { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 6px; }
  .flagbox {
    margin-top: 14px; background: var(--flag-bg); border-left: 3px solid var(--amber);
    border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 12px 16px;
    font-size: 14.5px; color: var(--flag);
  }
  .flagbox b { color: var(--flag); }
  .flag-tag {
    display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--flag); background: var(--flag-bg);
    padding: 3px 9px; border-radius: 999px; margin-left: 10px; vertical-align: middle;
  }
  .banner {
    background: var(--flag-bg); border: 1px solid var(--amber); border-radius: var(--r-md);
    padding: 16px 20px; font-size: 15px; color: var(--ink-2); margin-bottom: 32px;
  }
  .banner b { color: var(--ink); }

  /* ── Close / footer ──────────────────────────────────────────────────── */

  .close-card {
    background: var(--dk-bg); color: var(--dk-ink); border-radius: var(--r-xl);
    padding: clamp(40px, 6vw, 72px); text-align: center; box-shadow: var(--shadow-lg);
    display: grid; gap: 16px; justify-items: center;
  }
  .close-card h2 { font-size: clamp(30px, 4.4vw, 46px); font-weight: 700; }
  .close-card p { color: var(--dk-ink2); font-size: 18px; max-width: 32em; }
  .close-foot { font-size: 14px; color: var(--dk-ink2); margin-top: 4px; }

  footer.site {
    padding: 44px 0 56px; border-top: 1px solid var(--line); margin-top: 20px;
    color: var(--ink-3); font-size: 14px;
  }
  .foot-inner { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; }
  footer.site a { text-decoration: none; }
  footer.site a:hover { color: var(--accent); }
  footer.site .spacer { margin-left: auto; }

/* ── Articles ─────────────────────────────────────────────────────────── */
/* The 15 blog articles, which kept v1's cream chrome through the cutover and
   were the last pages on the site that looked like a different product. The
   shapes below are the ones their markup already uses — .eyebrow, .lede,
   .callout, .skip, .faq — re-expressed in v2's palette, so converting an
   article is a matter of moving its body across rather than rewriting it.

   THE WRAPPER IS .article, NOT .post. `.post` is taken: it is the blog BOARD's
   card, a few hundred lines up — surface background, border, rounded corners,
   overflow:hidden and no padding, because a card gets its padding from
   .post-text inside it. An article wearing that class gets a box drawn tight
   around its text with the words touching the border on both sides and the
   eyebrow sliced off at the top by the overflow. Which is exactly what shipped
   on the first converted article.

   Measure is capped at 68ch. Long-form prose set to the full .wrap width is
   the single most common reason a phone-first article is hard to read on a
   laptop, and these run to 2,000 words. */
  .article { max-width: 68ch; margin: 0 auto; }
  .article .eyebrow {
    display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: 2.4px;
    text-transform: uppercase; color: var(--accent); margin-bottom: 14px;
  }
  .article h1 {
    font-family: var(--font-display); font-weight: 800; line-height: 1.08;
    font-size: clamp(30px, 4.4vw, 46px); letter-spacing: -0.02em; margin: 0 0 18px;
  }
  .article h2 {
    font-family: var(--font-display); font-weight: 700; line-height: 1.2;
    font-size: clamp(22px, 2.6vw, 28px); letter-spacing: -0.01em;
    margin: 42px 0 12px; scroll-margin-top: 80px;
  }
  .article h3 { font-size: 19px; font-weight: 650; margin: 26px 0 8px; }
  .article p, .article li { color: var(--ink-2); font-size: 16.5px; line-height: 1.68; }
  .article p { margin: 0 0 16px; }
  .article .lede { color: var(--ink); font-size: 19px; line-height: 1.6; margin-bottom: 22px; }
  .article ul, .article ol { margin: 0 0 18px; padding-left: 22px; display: grid; gap: 8px; }
  .article strong { color: var(--ink); font-weight: 650; }
  /* :not(.btn) is load-bearing. `.article a` (0,1,1) outranks `.btn-primary`
     (0,1,0), so without it the accent colour wins on buttons too and the label
     is painted accent-on-accent — an orange pill with no visible text, which is
     what the closing CTA shipped as. Prose links want the accent; buttons bring
     their own colour. */
  .article a:not(.btn) { color: var(--accent); }
  .article hr { border: 0; border-top: 1px solid var(--line); margin: 34px 0; }
  .article figure { margin: 0 0 26px; }
  /* The illustrations. Every one is a SQUARE original (same set the blog board
     crops to 1:1), so the frame is square and nothing is lost.
     This used to be `max-height: 420px; object-fit: cover`, reaching for "don't
     push the lede below the fold on a phone" — but capping the HEIGHT of a
     full-width square crops it, and it took roughly a third off the bottom of
     every picture. Capping the WIDTH gets the same restraint for free: a 440px
     square is no taller than that crop was, and the whole image shows. */
  .article .post-hero { max-width: 440px; margin: 0 auto 26px; }
  .article .post-hero img { aspect-ratio: 1 / 1; object-fit: cover; }
  .article figure img {
    width: 100%; height: auto; border-radius: var(--r-lg);
    border: 1px solid var(--line); display: block;
  }
  .article figcaption { color: var(--ink-3); font-size: 14px; margin-top: 10px; }

  /* A secondary illustration mid-article — smaller than the hero, same square
     frame, because the originals are square too. */
  .article .post-fig {
    max-width: 380px; margin: 26px auto;
    border-radius: var(--r-lg); overflow: hidden; background: var(--accent-soft);
    border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  }
  .article .post-fig img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }

  /* A message the reader is meant to COPY — an example, not our voice. It gets
     its own surface so the eye can tell at a glance where the example starts
     and stops. v1 tinted these WhatsApp-green; in v2 the tint is --ok, which
     reads the same way (this is a good example, copy it) without borrowing
     another product's colour. */
  .article .msg {
    background: rgba(127,176,105,0.09);
    border: 1px solid rgba(127,176,105,0.26);
    border-radius: var(--r-md); padding: 15px 18px; margin: 0 0 14px;
  }
  .article .msg .ex-label {
    display: block; font-size: 12.5px; font-weight: 700;
    letter-spacing: .03em; text-transform: uppercase;
    color: var(--ok); margin-bottom: 7px;
  }
  .article .msg p { margin: 0; color: var(--ink); font-size: 16px; }
  /* <em> inside an example marks the bit the reader swaps for their own detail,
     so it is highlighted rather than italicised. */
  .article .msg em {
    font-style: normal; font-weight: 650; color: var(--ink);
    background: rgba(127,176,105,0.18); padding: 0 5px; border-radius: 5px;
  }

  /* A line to say out loud or send as-is — quieter than .msg, which is a whole
     example message. */
  .article .quote {
    border-left: 3px solid var(--accent-2); background: var(--surface);
    padding: 14px 18px; border-radius: 0 var(--r-sm) var(--r-sm) 0;
    margin: 0 0 18px; color: var(--ink-2); font-style: italic;
  }

  /* Breadcrumbs — small, quiet, and above the eyebrow. */
  .article .crumbs { font-size: 14px; color: var(--ink-3); margin-bottom: 18px; }
  .article .crumbs a { color: var(--ink-3); text-decoration: none; }
  .article .crumbs a:hover { color: var(--accent); }

  /* "How to fix it" boxes: advice the reader can act on, lifted off the page. */
  .article .callout {
    background: var(--surface); border: 1px solid var(--line);
    border-left: 3px solid var(--ok); border-radius: 0 var(--r-md) var(--r-md) 0;
    padding: 16px 20px; margin: 0 0 20px;
  }
  .article .callout p:last-child { margin-bottom: 0; }

  /* A warning rather than an instruction — scams, dishonesty, red flags. */
  .article .warn {
    background: var(--flag-bg); border: 1px solid var(--line);
    border-left: 3px solid var(--amber); border-radius: 0 var(--r-md) var(--r-md) 0;
    padding: 16px 20px; margin: 0 0 20px;
  }
  .article .warn p:last-child { margin-bottom: 0; }

  /* The inline product tie-in. Deliberately quieter than the closing CTA: it
     interrupts the advice, so it earns its place by being useful, not loud. */
  .article .skip {
    background: var(--surface-2); border: 1px solid var(--line);
    border-radius: var(--r-md); padding: 20px 22px; margin: 26px 0;
    display: grid; justify-items: start; gap: 6px;
  }
  .article .skip p { margin: 0; color: var(--ink); font-weight: 600; }
  .article .skip .sub { color: var(--ink-2); font-weight: 400; font-size: 15.5px; }
  .article .skip .btn { margin-top: 10px; }

  /* The closing call to action. */
  .article .cta {
    margin-top: 44px; padding: 28px; border-radius: var(--r-lg);
    background: var(--surface); border: 1px solid var(--line-2);
  }
  .article .cta h2 { margin-top: 0; }
  .article .cta-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }

  .article .faq { margin-top: 40px; }
  .article .faq h3 { margin-top: 20px; }

  @media (max-width: 640px) {
    .article .cta { padding: 22px 18px; }
    .article .skip { padding: 18px; }
    .article .cta-btns .btn { width: 100%; justify-content: center; }
  }