/* ==========================================================================
   The Outsourcer - landing page styles
   --------------------------------------------------------------------------
   Extracted from index.html, which carried ~46KB of CSS inline across four
   <style> blocks. Concatenated here in original document order, so the
   cascade is byte-for-byte what it was: CSS applies document-wide regardless
   of where the block sat in the markup, and later rules still win.

   Section markers below correspond to the original blocks.
   Loaded from <head> after the tokens stylesheets and styles.css, so it can
   override both.
   ========================================================================== */


/* ===== block 1 of 4 (was inline in index.html) ===== */
    * { box-sizing: border-box; margin: 0; padding: 0; }
    /* scroll-padding-top clears the sticky header on every in-page anchor
       jump (#discover, #features, #faq, #waitlist): without it the
       target's top edge scrolls flush to the viewport top, so the sticky
       header lands directly over the section heading - the landing feels
       like an abrupt cut rather than a smooth glide into view. */
    html { scroll-behavior: smooth; scroll-padding-top: 100px; scrollbar-width: none; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
    html::-webkit-scrollbar { display: none; }
    /* touch-action: manipulation drops the double-tap-to-zoom gesture and the
       ~300ms tap delay some mobile browsers add while they wait to see if a
       second tap is coming -- taps register instantly, no zoom possible. */
    body { font-family: var(--font-body); background: var(--color-canvas); scrollbar-width: none; touch-action: manipulation; }
    body::-webkit-scrollbar { display: none; }

    /* ══ COPY DETERRENCE ══
       Discourages casual copying of text/images. Form fields are deliberately
       re-enabled below so signing up (typing, pasting an email/password) still
       works. Client-side only - it deters, it can't truly prevent. */
    body {
      -webkit-user-select: none; -ms-user-select: none; user-select: none;
      -webkit-touch-callout: none; /* iOS long-press copy callout */
    }
    input, textarea, select, [contenteditable="true"] {
      -webkit-user-select: text; -ms-user-select: text; user-select: text;
      -webkit-touch-callout: default;
    }
    img { -webkit-user-drag: none; user-drag: none; }

    /* The branded splash screen that used to sit here was removed as extra -
       see git history for its styles. */

    /* ── MAIN SITE ── visible from the first paint. It used to start at
       opacity 0 behind a 3.5-9s branded splash screen; the splash is gone,
       so nothing gates it any more. No `overflow` here on purpose - it would
       turn #site into a scroll container and break the sticky header. */

    /* .header-retracted is toggled by js/nav-faq.js while the swipe-deck
       section is in view, so a full role card fits on screen. transform (not
       display/height) keeps it out of layout flow so nothing below reflows or
       jumps, and it animates cheaply on the compositor. */
    header.header-retracted { transform: translateY(-100%); }
    @media (prefers-reduced-motion: reduce) { header { transition: none; } }

    header {
      transition: transform .28s cubic-bezier(0.4, 0, 0.2, 1);
      will-change: transform;
      background: var(--color-canvas-surface);
      border-bottom: 1px solid rgba(26,26,26,0.08);
      padding: 24px 60px;
      position: sticky;
      top: 0;
      z-index: 100;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0;
    }

    .nav-toggle { display: none; }

    .logo {
      font-family: var(--font-display);
      font-size: 20px;
      font-weight: 600;
      color: var(--color-primary);
      text-decoration: none;
    }

    .logo span { color: var(--color-primary-light); font-weight: 600; }

    nav {
      display: flex;
      gap: 32px;
      align-items: center;
    }

    nav a {
      text-decoration: none;
      color: var(--color-text);
      font-size: 14px;
      font-weight: 500;
      transition: all 0.2s;
    }

    nav a:hover { color: #006400; font-weight: 600; }

    nav a.nav-discover {
      background: var(--color-primary-light);
      color: #000;
      padding: 8px 16px;
      border-radius: 999px;
      font-weight: 600;
    }

    nav a.nav-discover:hover { background: #e6c800; color: #000; }

    .hero {
      /* Flat fill that exactly matches the galaxy iframe's own background
         (#f4d949) so any area the iframe doesn't cover blends seamlessly  - 
         a gradient here would never line up with the iframe's solid yellow. */
      background: #f4d949;
      padding: 0;
      margin: 0;
      width: 100%;
      height: 640px;
      overflow: hidden;
      line-height: 0;
      position: relative;
      will-change: transform;
      backface-visibility: hidden;
    }

    /* Full-bleed lifestyle photo directly under the hero. 100vh on desktop
       reads as a continuation of the hero; capped lower on phones so it
       doesn't push the actual content a full screen-height down before
       anyone sees it. */
    .hero-photo {
      width: 100%;
      height: 100vh;
      max-height: 900px;
      overflow: hidden;
      line-height: 0;
    }
    .hero-photo img {
      width: 100%; height: 100%;
      object-fit: cover; object-position: center 30%;
      display: block;
    }
    @media (max-width: 760px) {
      .hero-photo { height: 70vh; max-height: 600px; }
    }

    /* Dark on the yellow canvas, not yellow. It used to be the accent yellow
       with white text - two failures at once now the page is that same yellow:
       the button had no edge against the background at all, and white on
       #f4d949 is 1.41:1, nowhere near the 4.5:1 a label needs. Inverting it
       gives 12.3:1 and an unmistakable shape. Matches the dark CTA band, which
       is where the same action already lives. */
    .btn-primary {
      background: var(--color-primary);
      color: var(--color-primary-light);
      padding: 14px 32px;
      border: none;
      border-radius: 999px;
      font-weight: 700;
      font-size: 16px;
      cursor: pointer;
      transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
      font-family: var(--font-body);
      box-shadow: 0 12px 26px -14px rgba(26,26,26,0.65);
    }

    /* The old hover swapped to #006400 - a dark green with no other appearance
       on this page, inherited from a palette the site no longer uses. */
    .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -14px rgba(26,26,26,0.75); }
    .btn-primary:active { transform: translateY(0); }

    /* On the DARK bands the button flips back to yellow. The rule above turns
       it dark so it can be seen against the yellow canvas, which is right for
       most of the page and exactly wrong in the two places that are already
       near-black - the CTA band and the mobile mission block - where it went
       dark on dark and disappeared entirely. Same button, opposite ground.
       Only these two: the deck's finished-state card looks dark but is
       actually the light surface, so it keeps the default dark button. */
    .cta-section .btn-primary {
      background: var(--color-primary-light);
      color: var(--color-primary);
      box-shadow: 0 12px 26px -14px rgba(0,0,0,0.8);
    }
    .cta-section .btn-primary:hover {
      box-shadow: 0 16px 30px -14px rgba(0,0,0,0.9);
    }

    /* ── MISSION + ROLES (combined 2-col section) ── */
    .mission-roles-section {
      background: var(--color-canvas);
      padding: 80px 60px;
    }

    .mission-roles-inner {
      max-width: 1160px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 64px;
      align-items: center;
    }

    /* LEFT (swipe-deck preview) */
    /* No clip on the column - the card is meant to fly out over the mission
       copy beside it on its way off screen. An earlier version clipped here,
       which stopped the card at an invisible wall on both sides of the deck.
       The clip lives on .mission-roles-section instead, which runs the full
       viewport width, so the card only disappears at the screen edge and a
       card mid-flight still cannot widen the page. */
    .mission-roles-left { display: flex; flex-direction: column; gap: 0; }
    .mission-roles-section { overflow-x: clip; }

    .mini-roles-label {
      font-family: var(--font-display);
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--color-text-secondary);   /* was the accent yellow - invisible on the yellow canvas */
      margin-bottom: 10px;
    }
    .swipe-sub {
      font-size: 13.5px; color: var(--color-text-secondary);
      margin: 0 0 20px; line-height: 1.5; max-width: 420px;
    }

    /* Stack container - cards are absolutely positioned inside so they can
       overlap and animate independently. Height is fixed so the section
       doesn't jump as cards swap out. */
    /* ── Swipe deck: colours/structure mirror the real app's job card
       (app/views.js renderJobCard + its jcv2-* CSS in the MVP) rather than
       just borrowing its content fields - dark header block, gold accents,
       cream pull-quote, dark pills, green-dot perks row. ── */
    .swipe-deck {
      position: relative;
      /* Height here is only the pre-JS fallback. js/swipe-deck.js collapses the
         deck onto whichever card is on top (fitDeckToTop), so a short card
         leaves no dead space above the controls. This value is what a visitor
         sees for the instant before that runs, and what a no-JS visitor keeps,
         so it stays large enough for the tallest card (614px measured). */
      height: 625px;
      transition: height .25s cubic-bezier(0.4, 0, 0.2, 1);
      max-width: 420px;
      margin-bottom: 14px;
      touch-action: none; /* the drag gesture owns touch input inside the deck */
    }

    /* "← Pass / Interested →" pill hint, sits above the deck - matches the
       real app's .swipe-hint bar exactly (light outline pill / gold pill). */
    /* max-width must match .swipe-deck / .swipe-controls (420px), otherwise the
       bar spans the full 548px grid column and centres its pills on the
       column's midpoint rather than the card's, pushing the hint ~64px right of
       the deck it labels. Kept centred so the pills sit on the card's centre
       line, matching the ✕/♥ controls below the deck. */
    .swipe-hint-bar { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 14px; max-width: 420px; }
    .swipe-hint-bar span {
      font-family: var(--font-display); font-weight: 700; font-size: 13px;
      padding: 7px 16px; border-radius: 999px; display: inline-flex; align-items: center; gap: 7px;
    }
    /* Matched pair: light pill to dismiss, dark pill to act. "Interested" was
       a gold pill, which is the page colour now - the pill vanished and left
       the words floating next to a pill-shaped sibling, so the two halves of
       one control looked like two different kinds of thing. A text-contrast
       check does not catch this: the dark label on gold still passed, it was
       the SURFACE that had disappeared into the canvas.
       Dark for the affirmative half also matches .btn-primary and the ♥
       control below the deck. */
    .swipe-hint-bar span { border: 1.5px solid transparent; }
    .swipe-hint-bar .hint-pass {
      background: var(--color-canvas-surface);
      border-color: rgba(26,26,26,0.12);
      color: var(--color-text-secondary);
    }
    .swipe-hint-bar .hint-like {
      background: var(--color-primary);
      color: var(--color-primary-light);
      border-color: var(--color-primary);
    }

    @media (prefers-reduced-motion: reduce) { .swipe-deck { transition: none; } }

    .swipe-card {
      /* inset with `auto` at the bottom, so each card is as tall as its own
         content. With `inset: 0` every card was stretched to the DECK's
         height, and the deck is fitted to whichever card is on top - so a card
         with less content than the tallest rendered up to ~96px of bare card
         surface below its last line. That empty strip is what read as a white
         panel sitting behind the card rather than part of it, especially while
         dragging, when the strip on the card underneath is fully exposed. */
      position: absolute; inset: 0 0 auto 0;
      /* ...capped at the deck, so a card BEHIND the top one that happens to
         have more content cannot hang out below it. The deck is fitted to the
         top card, so the top card is never clipped by this - only the ones
         stacked under it, which are meant to read as a rim anyway. */
      max-height: 100%;
      display: flex; flex-direction: column;
      border-radius: 20px;
      background: var(--color-canvas-surface);
      box-shadow: 0 18px 40px -22px rgba(26,26,26,0.5);
      user-select: none;
      will-change: transform;
      overflow: hidden; /* clips the header block to the card's own rounded corners */
    }
    /* Cards under the top one are capped at the deck's height (max-height
       above), which is fitted to the TOP card - so a taller card underneath
       was cut off flat at the bottom. Mid-drag that exposed a white block
       with its text sliced through. Fading the last stretch instead reads as
       "more of this card below" rather than a broken panel, and it softens
       the stack rim at rest too. Removed as soon as the card becomes top. */
    /* :not(.swipe-end) - the end-of-deck card is never given .is-top, so
       without this it was faded out like a stacked card, washing out its
       "See the roles again" link and the bottom of the card. */
    .swipe-card:not(.is-top):not(.swipe-end) {
      -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 90px), transparent);
              mask-image: linear-gradient(to bottom, #000 calc(100% - 90px), transparent);
    }
    /* The end-of-deck card ("Join the waitlist" after the last role) carries
       the `hidden` attribute until the deck runs out - but .swipe-card's own
       display:flex ties the browser's [hidden]{display:none} on specificity
       and wins by being an author rule, so it was drawn all along: a blank
       white panel sitting behind the whole stack, full deck width. It only
       showed as a white frame around the next card while the top one was
       being dragged away, which is why it looked like a background. */
    .swipe-card[hidden] { display: none !important; }
    /* Only the top card is draggable/clickable; the rest are visual stack
       filler, repositioned by JS via inline transform/opacity/z-index. */
    .swipe-card.is-top { cursor: grab; }
    .swipe-card.is-top:active { cursor: grabbing; }
    /* A short transform-only transition WHILE dragging, not none. A real
       trackpad/mouse swipe only delivers a handful of pointermove events
       (much sparser than 60fps) - with zero transition, each new sample
       teleports the card straight to the next position, so a fast physical
       swipe looks like it's jumping rather than following the finger. This
       tweens between the sparse samples so it reads as continuous motion,
       while staying short enough to still feel directly attached to input.
       Opacity is excluded so the like/pass stamp still responds instantly. */
    .swipe-card.is-dragging { transition: transform .08s linear !important; }

    /* Dark header block - logo, company, meta on the left; pay top-right;
       title + "/mo" row below a divider. Matches .jcv2-header exactly. */
    .swipe-card-head { background: #181510; color: #f3f0e7; padding: 16px 18px 14px; flex-shrink: 0; }
    .swipe-card-top { display: flex; align-items: flex-start; gap: 12px; }
    .swipe-card-dot {
      width: 42px; height: 42px; border-radius: 10px;
      background: #f0b429; color: #241a00;
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-display); font-size: 14px; font-weight: 700;
      flex-shrink: 0;
    }
    .swipe-card-company { font-size: 14px; font-weight: 600; color: #fff; }
    .swipe-card-meta {
      display: flex; align-items: center; gap: 6px; margin-top: 5px;
      font-size: 10.5px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase;
      color: #b8b09c;
    }
    .swipe-card-meta .live-dot { width: 6px; height: 6px; border-radius: 50%; background: #7dc46a; flex-shrink: 0; }
    .swipe-card-pay { margin-left: auto; text-align: right; flex-shrink: 0; }
    .swipe-card-pay-amt { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: #f0b429; white-space: nowrap; }
    .swipe-card-pay-sub { font-size: 10px; color: #9b937f; margin-top: 1px; }
    .swipe-card-titlerow {
      display: flex; align-items: baseline; margin-top: 11px; padding-top: 10px;
      border-top: 1px solid rgba(255,255,255,0.12);
    }
    .swipe-card-title { font-family: var(--font-display); font-size: 19px; font-weight: 700; color: #fff; letter-spacing: -0.01em; }
    .swipe-card-industry {
      margin-left: auto; flex-shrink: 0;
      font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
      color: #b8b09c;
    }
    /* Company logos are square full-bleed artwork, so they get the same 42px
       tile footprint as the initials fallback they replace. */
    .swipe-card-logo {
      width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0;
      object-fit: cover; display: block; background: #241a00;
    }

    /* Body (off-white) - day-in-the-role list, quote, skill pills, perks. */
    .swipe-card-body { padding: 14px 18px 12px; overflow: hidden; }
    .swipe-card-eyebrow {
      font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
      color: #a99f88; margin-bottom: 7px;
    }
    .swipe-card-day { margin-bottom: 4px; }
    .swipe-card-day-row {
      display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.4;
      color: #2c2820; margin-bottom: 6px;
    }
    .swipe-card-day-row span { font-weight: 700; font-size: 11px; color: #b08900; flex-shrink: 0; min-width: 15px; }

    .swipe-card-quote {
      margin: 10px 0; padding: 9px 12px; border-left: 3px solid #f0b429;
      background: #faf6ec; border-radius: 0 8px 8px 0;
      font-style: italic; font-size: 12.5px; line-height: 1.45; color: #5a4d2c;
    }

    /* Compact 2x2 fact grid - carries hours/start/experience/overlap without
       costing much vertical space, which matters on a fixed-height card. */
    .swipe-card-facts {
      display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px;
      padding: 9px 11px; margin-bottom: 10px;
      background: #f3efe3; border-radius: 10px;
    }
    .swipe-card-facts .fact { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .swipe-card-facts .fact-k {
      font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #a99f88;
    }
    .swipe-card-facts .fact-v { font-size: 11.5px; font-weight: 600; color: #2c2820; line-height: 1.3; }

    .swipe-card-block { margin-bottom: 9px; }
    .swipe-card-needs { display: flex; flex-wrap: wrap; gap: 6px; }
    .swipe-card-need {
      font-size: 11px; font-weight: 500; color: #4a4235;
      background: #fff; border: 1px solid var(--color-border); border-radius: 7px; padding: 4px 9px;
    }

    .swipe-card-tags { display: flex; flex-wrap: wrap; gap: 6px; }
    .swipe-card-tag {
      font-size: 11px; font-weight: 500; color: #f3f0e7;
      background: #181510; border-radius: 7px; padding: 5px 10px;
    }

    .swipe-card-foot {
      display: flex; flex-wrap: wrap; gap: 6px 16px;
      padding-top: 10px; border-top: 1px solid var(--color-border-light);
    }
    .swipe-card-perk { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: #2c2820; }
    .swipe-card-perk .perk-dot { width: 6px; height: 6px; border-radius: 50%; background: #7dc46a; flex-shrink: 0; }
    .swipe-card-perk.edu .perk-dot { background: #f0b429; }

    /* Phone: the deck is ~342px wide instead of 420px, so every line of copy
       wraps more and the tallest card grows from 614px to 634px - past the
       625px deck. Rather than clip the perks footer, tighten the card's own
       rhythm a little further here and give the deck its own shorter height, so
       a whole card still fits a 667px-tall viewport once the header retracts. */
    @media (max-width: 520px) {
      .swipe-deck { height: 600px; }
      .swipe-card-head { padding: 13px 15px 12px; }
      .swipe-card-body { padding: 12px 15px 10px; }
      .swipe-card-title { font-size: 17px; }
      .swipe-card-facts { padding: 8px 10px; margin-bottom: 8px; gap: 5px 8px; }
      .swipe-card-facts .fact-v { font-size: 11px; }
      .swipe-card-day-row { font-size: 12.5px; margin-bottom: 5px; }
      .swipe-card-eyebrow { margin-bottom: 6px; }
      .swipe-card-block { margin-bottom: 8px; }
      .swipe-card-quote { margin: 8px 0; padding: 8px 11px; font-size: 12px; }
      .swipe-card-foot { padding-top: 8px; gap: 5px 12px; }
      .swipe-card-need, .swipe-card-tag { font-size: 10.5px; padding: 4px 8px; }
    }

    /* LIKE / PASS stamps, revealed proportionally to drag distance */
    .swipe-stamp {
      position: absolute; top: 20px; padding: 5px 14px; z-index: 5;
      border: 3px solid; border-radius: 8px;
      font-family: var(--font-display); font-size: 20px; font-weight: 800;
      letter-spacing: 0.06em; text-transform: uppercase;
      opacity: 0; pointer-events: none;
    }
    .swipe-stamp.like { left: 20px; color: var(--color-primary); border-color: var(--color-primary-light); background: rgba(244,217,73,0.95); transform: rotate(-14deg); }
    .swipe-stamp.pass { right: 20px; color: #2c2820; border-color: #b8b09c; background: rgba(250,249,244,0.95); transform: rotate(14deg); }

    .swipe-end {
      align-items: center; justify-content: center; text-align: center; padding: 32px 26px;
    }
    .swipe-end-emoji { font-size: 34px; margin-bottom: 10px; }
    .swipe-end h3 { font-family: var(--font-display); font-size: 19px; color: var(--color-primary); margin: 0 0 8px; }
    .swipe-end p { font-size: 13.5px; color: var(--color-text-secondary); margin: 0 0 18px; line-height: 1.5; }
    .swipe-again {
      display: inline-block; margin-top: 12px; background: none; border: 0;
      font-size: 12.5px; font-weight: 700; color: var(--color-text-secondary);
      text-decoration: underline; cursor: pointer; font-family: inherit;
    }
    .swipe-again:hover { color: var(--color-primary); }

    /* Round icon buttons + caption labels below the deck - matches the real
       app's .round-btn / .ctrl-label pairing (their "Pass"/"Apply" captions,
       ours say "Pass"/"Interested" since this demo doesn't submit anything). */
    .swipe-controls {
      display: flex; align-items: flex-start; justify-content: center; gap: 40px;
      max-width: 420px; margin-bottom: 16px;
    }
    .swipe-ctrl { display: flex; flex-direction: column; align-items: center; gap: 7px; }
    .swipe-ctrl-label {
      font-family: var(--font-display); font-size: 11px; font-weight: 700;
      letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-secondary);
    }
    .swipe-btn {
      width: 60px; height: 60px; border-radius: 50%; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: 24px; line-height: 1; cursor: pointer;
      border: 2px solid rgba(26,26,26,0.12); background: var(--color-canvas-surface);
      box-shadow: 0 4px 12px rgba(26,26,26,0.08);
      transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
    }
    .swipe-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.10); }
    .swipe-btn:disabled { opacity: 0.4; cursor: default; transform: none; box-shadow: none; }
    .swipe-pass { color: var(--color-text-secondary); }
    .swipe-pass:hover { border-color: #c0392b; color: #c0392b; }
    /* Filled DARK, not yellow. Two failures were possible here and the first
       attempt traded one for the other: outlined, the heart was a yellow glyph
       on the off-white button face at 1.39:1 - the weakest mark in the deck,
       on the primary action. Filled yellow, the glyph was strong but the
       button itself became invisible, because these controls sit on the
       yellow CANVAS, not on the light card the deck sits in. Dark fills both
       gaps at once and matches the dark "Interested" pill above the deck. */
    .swipe-like {
      background: var(--color-primary);
      color: var(--color-primary-light);
      border-color: var(--color-primary);
    }
    .swipe-like:hover { background: #000; border-color: #000; }
    .swipe-progress {
      font-size: 12px; font-weight: 700; color: var(--color-text-secondary);
      align-self: center; margin: 0 -6px;
    }

    /* Filled white with green type, not an outline. Unfilled, its only surface
       was the yellow canvas showing through, so it read as a rule drawn round
       some text rather than a control. Green is --color-secondary, the brand's
       actual second colour, and it only used to appear here on hover - which
       meant the button changed identity when you touched it. Now it is green
       in both states and hover inverts the fill. */
    .mini-roles-all {
      display: block; box-sizing: border-box; max-width: 420px;
      font-size: 13px; font-weight: 700;
      background: var(--color-canvas-surface);
      color: var(--color-secondary); text-decoration: none;
      border: 1.5px solid var(--color-secondary); border-radius: 8px;
      padding: 10px 16px; text-align: center;
      transition: background 0.18s ease, color 0.18s ease;
    }
    .mini-roles-all:hover { background: var(--color-secondary); color: var(--color-text-inverse); }

    /* RIGHT (mission copy) */
    .mission-intro-label {
      display: inline-block;
      font-family: var(--font-display);
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--color-text-secondary);   /* was the accent yellow - invisible on the yellow canvas */
      margin-bottom: 12px;
    }

    .mission-roles-right h2 {
      font-family: var(--font-display);
      font-size: 36px;
      font-weight: 600;
      margin: 0 0 20px 0;
      color: var(--color-primary);
      letter-spacing: -0.01em;
      line-height: 1.2;
    }
    /* Emphasis inside the heading. It was the accent yellow, which on a yellow
       canvas is the same colour as the page - the highlighted words vanished.
       Colour cannot carry emphasis against its own hue, so the words take the
       dark ink and a rule underneath does the highlighting instead. */
    .mission-roles-right h2 span {
      color: var(--color-primary);
      text-decoration: underline;
      text-decoration-color: rgba(26,26,26,0.30);
      text-decoration-thickness: 3px;
      text-underline-offset: 7px;
    }

    .mission-roles-right p {
      font-size: 16px;
      line-height: 1.7;
      color: var(--color-text-secondary);
      margin: 0 0 18px 0;
    }

    /* legacy role-card / tag (kept for hover JS reference) */
    .role-card { display: none; }
    .tag {
      background: #eef6e6;
      color: #4e8a1f;
      padding: 4px 10px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 600;
    }

    .features-section {
      background: var(--color-canvas);
      padding: 48px;
      display: block;
    }

    /* Centred with an eyebrow, like How it works, FAQ and the CTA. Left-
       aligned, this was the one section heading on the page built to a
       different pattern, which made the page read as assembled from parts. */
    .features-heading {
      max-width: 1400px;
      margin: 0 auto 36px;
      text-align: center;
    }
    .features-eyebrow {
      font-family: var(--font-display); font-weight: 700; font-size: 12px;
      letter-spacing: .08em; text-transform: uppercase;
      color: var(--color-text-secondary); margin: 0 0 12px;
    }

    .features-heading h2 {
      font-family: var(--font-display);
      font-size: clamp(26px, 3.8vw, 38px);
      font-weight: 600;
      margin: 0 0 8px 0;
      color: #1a1a1a;
      letter-spacing: -0.01em;
      max-width: 100%;
      overflow-wrap: break-word;
    }

    .features-heading h2 span { color: #1a1a1a; }

    .features-heading p {
      margin: 0;
      color: var(--color-text-secondary);
      font-size: 16px;
    }

    /* Single column since the mockup column was removed - see index.html for
       why. The six cards now use the full width instead of being squeezed
       into 1.4fr beside an image. */
    .features-inner {
      display: grid;
      grid-template-columns: 1fr;
      gap: 32px;
      width: 100%;
      max-width: 1400px;
      margin: 0 auto;
      align-items: stretch;
    }

    .features-left {
      padding: 0;
    }

    /* Carousel dots, built by js/nav-faq.js. Hidden here alongside the phone
       grid they belong to - the script has no viewport logic, so without this
       the dots rendered on desktop under the six-card grid they don't drive. */
    .features-dots { display: none; }
    /* Phone-only condensed variant of .features-grid (shown in the media query
       below, where the six-card grid is hidden instead). */
    .features-grid-mobile { display: none; }

    /* Three across, not two: the grid has the whole section width now, and
       six cards in two columns made a tall narrow block with the heading
       stranded above it. */
    .features-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }

    .feature-card {
      background: var(--color-canvas-surface);
      border: none;
      border-radius: 14px;
      padding: 18px 20px;
    }

    .feature-icon {
      width: 44px;
      height: 44px;
      background: #f4d949;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 10px;
    }

    /* The glyphs are drawn at 2px in a 64-unit box, so at 18px they rendered
       about 9px across with sub-pixel strokes - five of the six read as
       smudges. Larger box, heavier stroke (CSS beats the SVG attribute). */
    .feature-icon svg {
      width: 34px;
      height: 34px;
    }
    .feature-icon svg * { stroke-width: 3.4; }

    .feature-card h3 {
      font-family: var(--font-display);
      font-size: 14px;
      font-weight: 700;
      margin: 0 0 6px 0;
      color: var(--color-primary);
    }

    .feature-card p {
      margin: 0;
      color: var(--color-text-secondary);
      line-height: 1.5;
      font-size: 12.5px;
    }






    @media (max-width: 768px) {
    }

    .cta-section {
      background: var(--color-primary);
      color: white;
      padding: 80px 60px;
      text-align: center;
    }

    .cta-content {
      max-width: 620px;
      margin: 0 auto;
    }

    .cta-content h2 {
      font-family: var(--font-display);
      font-size: 40px;
      font-weight: 600;
      margin: 0 0 20px 0;
      line-height: 1.2;
    }

    .cta-content p {
      font-size: 16px;
      color: rgba(255, 255, 255, 0.85);
      margin: 0 0 30px 0;
      line-height: 1.6;
    }

    footer {
      background: var(--color-primary);
      color: rgba(255, 255, 255, 0.85);
      padding: 60px 60px 40px;
      font-size: 14px;
    }

    /* Centred, not left-aligned: each column centres its own text, and
       justify-items keeps the columns themselves centred within the grid so a
       short column can't sit off to one side. */
    .footer-content {
      max-width: 1200px; margin: 0 auto 40px; display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 40px;
      text-align: center; justify-items: center;
    }
    .footer-col { max-width: 260px; }
    .footer-more { font-weight: 700; color: #f4d949 !important; }
    .footer-social {
      display: inline-flex; align-items: center; gap: 8px;
      margin-top: 4px; padding: 8px 14px;
      border: 1px solid rgba(255,255,255,0.28); border-radius: 999px;
      font-size: 13px; font-weight: 600; text-decoration: none;
      transition: border-color .18s ease, background .18s ease, color .18s ease;
    }
    .footer-social svg { width: 15px; height: 15px; flex-shrink: 0; }
    .footer-social:hover {
      background: #f4d949; border-color: #f4d949; color: #1a1a1a !important;
    }
    .footer-col h3 { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: white; margin: 0 0 16px; text-transform: uppercase; letter-spacing: 0.08em; }
    .footer-col ul { list-style: none; margin: 0; padding: 0; display: inline-block; text-align: center; }
    .footer-col li { margin-bottom: 10px; }
    .footer-col a { color: rgba(255, 255, 255, 0.85); text-decoration: none; transition: color 0.2s; }
    .footer-col a:hover { color: white; }
    .footer-col p { margin: 0 0 12px; line-height: 1.5; }
    .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.2); padding-top: 24px; text-align: center; }
    .footer-bottom p { margin: 0; color: rgba(255, 255, 255, 0.7); font-size: 13px; }

    /* ── HEADER SCROLL SHADOW (added when page is scrolled) ── */
    header.scrolled {
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
      backdrop-filter: saturate(180%) blur(8px);
      background: rgba(255, 255, 255, 0.92);
    }

    /* ── ROLE CARD CTA ── */
    .role-cta {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 18px;
      font-size: 13px;
      font-weight: 600;
      color: var(--color-secondary);
      text-decoration: none;
      opacity: 0;
      transform: translateY(4px);
      transition: opacity 0.2s, transform 0.2s, gap 0.2s;
    }

    .role-card:hover .role-cta {
      opacity: 1;
      transform: translateY(0);
    }

    .role-card:hover .role-cta:hover { gap: 10px; }

    @media (max-width: 768px) {
    }

    @media (max-width: 768px) {
      header { padding: 16px 20px; position: sticky; }
      .nav-toggle { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid rgba(26,26,26,0.12); border-radius: 10px; background: var(--color-canvas-surface); cursor: pointer; flex-shrink: 0; }
      .nav-toggle svg { width: 20px; height: 20px; }
      nav {
        display: none; flex-direction: column; align-items: stretch; gap: 0;
        position: absolute; top: 100%; left: 0; right: 0;
        background: var(--color-canvas-surface); border-bottom: 1px solid rgba(26,26,26,0.08);
        padding: 8px 20px 16px; box-shadow: 0 12px 24px rgba(0,0,0,0.08);
      }
      nav.nav-open { display: flex; }
      nav a { width: 100%; padding: 12px 0; border-bottom: 1px solid var(--color-border); }
      nav a.nav-discover{ text-align: center; border-bottom: none; margin-top: 8px; }
      /* No padding on mobile: the galaxy iframe fills the hero edge-to-edge,
         so no mismatched-yellow border frame shows around it. */
      .hero { padding: 0; }
      .hero h1 { font-size: 36px; }
      .roles-section{ padding: 60px 24px; }
      /* No bottom padding: the black block is the section's last child, so any
         padding under it shows as a white strip between it and the yellow
         section below. Dropping it lets black run straight into yellow. */
      .mission-roles-section { padding: 60px 24px 0; }
      .mission-roles-inner { grid-template-columns: 1fr; gap: 40px; }
      /* Phone only: give the "Job hunting, without the noise" block a black
         card treatment (desktop stays on the white section background). */
      .mission-roles-right {
        background: #1a1a1a;
        padding: 32px 24px;
        margin: 0 -24px;
      }
      .mission-roles-right h2 { color: #ffffff; }
      /* The emphasis span is dark ink on desktop, where this block sits on the
         yellow canvas. Here the block itself turns near-black, so that same
         dark ink was 1:1 against it - "without the noise" rendered as a blank
         gap after "Job hunting,". Yellow on the dark block is 12.3:1, and the
         underline goes with it. */
      .mission-roles-right h2 span {
        color: var(--color-primary-light);
        text-decoration-color: rgba(244,217,73,0.45);
      }
      .mission-roles-right p { color: rgba(255,255,255,0.72); }
      /* Yellow button only where this block is actually dark, i.e. here.
         Unscoped, it also applied on desktop, where the block sits on the
         yellow canvas - "Get started" rendered yellow on yellow. */
      .mission-roles-right .btn-primary {
        background: var(--color-primary-light);
        color: var(--color-primary);
        box-shadow: 0 12px 26px -14px rgba(0,0,0,0.8);
      }
      .cta-section { padding: 40px 24px; }
      .cta-content h2 { font-size: 28px; }
      footer { padding: 32px 20px 24px; }
      /* Two columns, not one. Stacking all five columns made the footer one of
         the tallest things on the page - a long single-file list of every link.
         The About blurb keeps the full width; the four link columns pair up
         beside each other, which roughly halves the footer's height. */
      .footer-content {
        grid-template-columns: 1fr 1fr;
        gap: 22px 18px; margin-bottom: 22px;
        text-align: left; justify-items: start;
      }
      .footer-col { max-width: none; }
      .footer-col ul { display: block; text-align: left; }
      .footer-col:first-child { grid-column: 1 / -1; text-align: center; }
      .footer-col:first-child ul { text-align: center; }
      .footer-col h3 { margin-bottom: 8px; font-size: 12px; }
      .footer-col li { margin-bottom: 7px; }
      .footer-social { margin-top: 10px; }
      .features-section { padding: 32px 20px; }
      .features-heading { margin-bottom: 18px; }
      /* Three condensed cards on the left, mockup beside them on the right.
         The image gets the larger share - it's the thing worth seeing here.
         Grid rows stretch by default, so the image column ends up exactly as
         tall as the three stacked panels without hard-coding a height. */
      /* Single column below 768px. The old 0.92fr/1fr split left each column
         ~170px wide on a 390px phone, which forced 10.5px body copy and wrapped
         card titles onto two lines. Stacking gives the cards full width at a
         readable size and lets the mockup be seen properly underneath. */
      /* Two full-width bands stacked: the mockup gets the whole frame first,
         then the three points below it as a one-at-a-time swipe carousel.
         The previous version stacked three boxed cards above a letterboxed
         image, so the screenshot - the only thing here that shows what the
         product actually is - ended up the smallest element on the screen. */
      .features-inner { grid-template-columns: 1fr; min-height: auto; gap: 20px; align-items: start; }
      /* min-width:0 on both the grid item and the scroller. A grid/flex item
         defaults to min-width:auto, so the carousel's min-content width (all
         three panels side by side) sized the column instead of the column
         capping the scroller - which widened the whole page and gave every
         section a horizontal scrollbar. */
      .features-left { padding: 0; min-width: 0; }
      .features-grid { display: none; }
      /* Horizontal scroll-snap carousel. Native scrolling, so it keeps
         momentum, works without JS, and stays keyboard/screen-reader
         reachable - the JS below only adds the dot indicators. */
      /* Full-bleed track, gutter-inset cards - same geometry as .flow-track
         above: card width is one screen minus a gutter each side, gap is twice
         the gutter, so the active card shows both its edges and the next one
         starts a full gutter beyond the screen rather than being sliced by it. */
      .features-grid-mobile {
        --gut: 20px;
        display: flex; flex-direction: row; gap: calc(var(--gut) * 2);
        width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
        overflow-x: auto; overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--gut);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* Vertical padding leaves room for the cards' shadow, which a
           clipping scroll container would otherwise cut off. */
        padding: 6px var(--gut) 12px; min-width: 0;
      }
      .features-grid-mobile::-webkit-scrollbar { display: none; }
      /* One panel per screen. The card's own edges are the swipe affordance. */
      .features-grid-mobile .feature-card {
        /* flex-basis:100% resolves against the track's CONTENT box, which
           already excludes its var(--gut) padding - so this IS one screen
           minus a gutter each side. Subtracting the gutter again here took it
           off twice and left the last card unable to reach its snap point. */
        flex: 0 0 100%;
        scroll-snap-align: start; scroll-snap-stop: always;
        border: 1px solid rgba(26,26,26,0.06);
        border-radius: 16px;
        box-shadow: 0 18px 38px -26px rgba(26,26,26,0.55);
      }
      /* Dots are built by js/nav-faq.js, so they never appear without the
         scripting that keeps them in sync with the scroll position. */
      .features-dots {
        display: flex; justify-content: center; align-items: center;
        gap: 6px; margin-top: 4px;
      }
      /* The active dot stretches into a pill rather than just darkening. A
         scale() on a 7px circle is a 2px difference nobody registers; a change
         of shape reads at a glance as "you are here, there are others". */
      .features-dots button {
        width: 7px; height: 7px; padding: 0; border: 0; border-radius: 999px;
        background: rgba(26,26,26,0.25); cursor: pointer;
        transition: background .25s ease, width .25s ease;
      }
      .features-dots button[aria-current="true"] {
        background: #1a1a1a; width: 22px;
      }
      /* Icon sits beside the title rather than stacked above it. That keeps the
         stack short, which matters: the image beside it is cover-cropped to
         this column's height, so a shorter stack = a squarer window = more of
         the mockup actually visible. */
      /* Full width now, so the type can go back up to a comfortable size and
         the title sits on one line. */
      .features-grid-mobile .feature-card {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-areas: "icon title" "desc desc";
        align-items: center;
        column-gap: 11px;
        row-gap: 5px;
        /* Matches the section's own 20px gutter, so the text still lines up
           with the heading above even though the panel itself is full-bleed. */
        padding: 16px 20px 18px;
      }
      .features-grid-mobile .feature-icon { grid-area: icon; width: 36px; height: 36px; margin-bottom: 0; border-radius: 8px; }
      .features-grid-mobile .feature-icon svg { width: 28px; height: 28px; }
      .features-grid-mobile .feature-card h3 { grid-area: title; font-size: 15px; margin: 0; line-height: 1.25; }
      .features-grid-mobile .feature-card p { grid-area: desc; font-size: 13px; line-height: 1.5; }
      /* Its own band above the carousel. The source is a 1086x1448 portrait
         that is mostly empty yellow above and below the laptop, so `contain`
         inside a 44vh box rendered the laptop itself tiny. Cropping to a
         landscape frame with `cover` throws the dead space away and lets the
         mockup fill the full width of the section. */
      /* cover, not contain: the mockup is portrait (1086x1448) and this column
         is narrow, so contain would letterbox it to a fraction of the stack's
         height. cover fills the column so the image reads as exactly as tall
         as the three panels beside it. */
      .mission-intro { grid-template-columns: 1fr; gap: 32px; text-align: center; justify-items: center; }
    }
  

/* ===== block 2 of 4 was the <noscript>-only override; it MUST stay inline
   inside <noscript> in index.html. Hoisting it here applied
   display:none!important to the swipe controls for every visitor. ===== */

/* ===== block 3 of 4 (was inline in index.html) ===== */
    /* ── ABOUT / FOUNDERS ── moved to its own page, about.html (which carries
       its own copy of these rules) - the landing page no longer has this
       section. See git history for the inline version this replaced. */

    /* ── HOW IT WORKS / ONBOARDING FLOW ── */
    .flow-section { background: var(--color-canvas); padding: 72px clamp(20px, 5vw, 60px); border-top: 1px solid rgba(26,26,26,0.10); }
    .flow-inner { max-width: 1100px; margin: 0 auto; text-align: center; }
    .flow-eyebrow {
      font-family: var(--font-display); font-weight: 700; font-size: 12px;
      letter-spacing: .08em; text-transform: uppercase;
      /* text-tertiary was a quiet grey on cream; on the yellow canvas it is
         2.5:1, under the 4.5:1 floor for 12px text. */
      color: var(--color-text-secondary); margin: 0 0 12px;
    }
    .flow-heading {
      font-family: var(--font-display); font-weight: 700;
      font-size: clamp(26px, 3.8vw, 38px); line-height: 1.15; letter-spacing: -0.02em;
      color: var(--color-primary); margin: 0 0 14px;
    }
    /* Only one of these shows at a time - see the <=900px block. */
    .flow-lede { font-size: 15.5px; line-height: 1.65; color: var(--color-text-secondary); max-width: 620px; margin: 0 auto 48px; }

    .flow-track {
      list-style: none; margin: 0 0 44px; padding: 0;
      display: flex; align-items: flex-start; justify-content: center; gap: 0;
    }
    .flow-step {
      position: relative; flex: 1 1 0; min-width: 0;
      display: flex; flex-direction: column; align-items: center; gap: 12px;
    }
    /* Connector sits behind the circles, drawn from each step to the previous
       one, so it never overhangs the first or last node. */
    .flow-step:not(:first-child)::before {
      content: ''; position: absolute; z-index: 0;
      top: 31px; right: 50%; width: 100%; height: 2px;
      background: rgba(26,26,26,0.16);
    }
    .flow-node {
      position: relative; z-index: 1;
      width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;
      border: 2px solid rgba(26,26,26,0.14); background: var(--color-canvas-surface);
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
      cursor: pointer; padding: 0;
      transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
    }
    .flow-node:hover, .flow-node:focus-visible {
      transform: translateY(-3px); border-color: var(--color-primary-light);
      box-shadow: 0 8px 20px rgba(0,0,0,0.10); outline: none;
    }
    /* Was filled with the accent yellow to stand out from a cream section; on
       a yellow canvas that made it vanish. A dark ring reads as "key step"
       against the light card instead. */
    .flow-step.is-key .flow-node { background: var(--color-canvas-surface); border-color: var(--color-primary); }
    .flow-num {
      font-family: var(--font-display); font-size: 9px; font-weight: 700;
      letter-spacing: .06em; color: var(--color-text-tertiary);
    }
    .flow-step.is-key .flow-num { color: var(--color-primary); }
    .flow-icon { font-size: 19px; line-height: 1; }
    .flow-label {
      font-family: var(--font-display); font-size: 12.5px; font-weight: 700;
      line-height: 1.35; color: var(--color-primary); padding: 0 6px; max-width: 130px;
    }

    /* Tooltip. Hidden with visibility (not display) so it can transition, and
       shown on hover of the step OR keyboard focus of its button. */
    /* A light card, not a solid dark box. The dark version carried more visual
       weight than anything else on the page - a near-black slab with a heavy
       shadow, appearing over a light section, so hovering a step made the
       page momentarily lurch. This sits on the same surface as the rest of the
       section and reads as a panel that belongs to it. */
    .flow-tip {
      position: absolute; z-index: 20; top: 78px; left: 50%; transform: translate(-50%, 6px);
      width: 246px; padding: 15px 17px;
      background: var(--color-canvas-surface); color: var(--color-text-secondary);
      border: 1px solid rgba(26,26,26,0.08); border-radius: 14px;
      box-shadow: 0 20px 44px -26px rgba(26,26,26,0.55);
      font-size: 12.5px; line-height: 1.55; text-align: left;
      opacity: 0; visibility: hidden; pointer-events: none;
      transition: opacity .16s ease, transform .16s ease, visibility .16s;
    }
    .flow-tip strong {
      display: block; margin-bottom: 5px; font-size: 13px;
      font-family: var(--font-display); color: var(--color-primary);
    }
    /* Two stacked triangles fake a bordered arrow: the back one is the border
       colour, the front one sits 1px lower in white and covers all but that
       edge. A single triangle would leave the arrow borderless against the
       card's own outline. */
    .flow-tip::before,
    .flow-tip::after {
      content: ''; position: absolute; bottom: 100%; left: 50%;
      transform: translateX(-50%);
      border: 7px solid transparent;
    }
    .flow-tip::before { border-bottom-color: rgba(26,26,26,0.10); }
    .flow-tip::after { margin-bottom: -1px; border-bottom-color: var(--color-canvas-surface); }
    .flow-step:hover .flow-tip,
    .flow-node:focus-visible + .flow-label + .flow-tip {
      opacity: 1; visibility: visible; transform: translate(-50%, 0);
    }
    /* Edge steps pull their tooltip inward so it can't overflow the section. */
    .flow-step:first-child .flow-tip { left: 0; transform: translate(0, 6px); }
    .flow-step:first-child:hover .flow-tip,
    .flow-step:first-child .flow-node:focus-visible + .flow-label + .flow-tip { transform: translate(0, 0); }
    .flow-step:last-child .flow-tip { left: auto; right: 0; transform: translate(0, 6px); }
    .flow-step:last-child:hover .flow-tip,
    .flow-step:last-child .flow-node:focus-visible + .flow-label + .flow-tip { transform: translate(0, 0); }

    /* Real product screenshot, not the icon+paragraph blurb this replaced -
       claim proven by evidence rather than described in prose. */
    .flow-callout {
      text-align: center;
      max-width: 900px; margin: 0 auto;
      background: var(--color-canvas-surface); border: 1px solid rgba(26,26,26,0.08); border-radius: 16px;
      padding: 22px 22px 0; overflow: hidden;
    }
    .flow-callout h3 {
      font-family: var(--font-display); font-weight: 700; font-size: 16px;
      color: var(--color-primary); margin: 0 0 16px;
    }
    .flow-callout-shot {
      display: block; width: 100%; height: auto;
      border-radius: 10px 10px 0 0;
      border: 1px solid var(--color-border); border-bottom: none;
    }

    /* Below ~900px the six-across track stops fitting. It becomes a horizontal
       swipe carousel: one step per frame, detail always visible.

       This replaces a vertical tap-to-open accordion. That layout showed six
       bare stage names with the explanation hidden behind a tap, and nothing on
       screen said the circles were pressable - so the section read as six
       unexplained words and most visitors would never have found the content
       underneath. Showing all six details inline instead was the obvious fix
       but made the section enormous to scroll (the longest is four lines).
       A carousel gets both: nothing hidden, one screen tall. */
    @media (max-width: 900px) {
      /* Full-bleed track, gutter-inset cards.
         The track spans the screen; each card is one screen MINUS a gutter on
         each side, and the gap between cards is twice that gutter. The result:
         the active card sits inset with visible edges on both sides, and the
         next card starts exactly one gutter past the screen edge - so it is
         never sliced. An earlier version made the card the full screen width
         with no surface at all, which left nothing on screen to suggest it
         could be moved. */
      .flow-track {
        --gut: clamp(20px, 5vw, 60px);
        flex-direction: row; align-items: stretch; gap: calc(var(--gut) * 2);
        scroll-padding-inline: var(--gut);
        /* justify-content MUST be reset. The desktop rule centres the six steps
           in the row; on a flex container that also scrolls, centred content
           overflows off BOTH ends and the left overflow is unreachable - the
           first three steps sat at negative offsets that no scroll position
           could bring back, so the carousel opened on step 4. */
        justify-content: flex-start;
        width: 100vw; max-width: none;
        margin: 0 0 16px; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
        /* Vertical padding leaves room for the cards' shadow, which a
           clipping scroll container would otherwise cut off. */
        padding: 6px var(--gut) 14px;
        overflow-x: auto; overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
        scrollbar-width: none; min-width: 0;
      }
      .flow-track::-webkit-scrollbar { display: none; }
      /* Outlined, not filled. Filled, the step card and the pipeline callout
         immediately below it were the same object - two white rounded panels
         on yellow, one after the other - so the step stopped reading as one of
         a series you move through and the whole section looked static. The
         outline keeps the card's shape (which is what says "this is a thing
         you can push aside") while leaving the panel below as the only solid
         surface, so the two are no longer the same. */
      .flow-step {
        position: relative;
        /* flex-basis:100% resolves against the track's CONTENT box, which
           already excludes its var(--gut) padding - so this IS one screen
           minus a gutter each side. Subtracting the gutter again here took it
           off twice and left the last card unable to reach its snap point. */
        flex: 0 0 100%;
        scroll-snap-align: start; scroll-snap-stop: always;
        display: flex; flex-direction: column; align-items: flex-start; gap: 0;
        text-align: left;
        background: transparent;
        border: 2px solid var(--color-canvas-surface);
        border-radius: 18px;
        padding: 22px 20px 24px;
        /* No shadow: nothing is raised off the page any more, and a shadow
           under a transparent box just smudges the canvas. */
        box-shadow: none;
      }
      /* The node keeps a fill so it still reads as a marker rather than
         another outline inside an outline. */
      .flow-step .flow-node {
        background: var(--color-canvas-surface);
        border-color: var(--color-canvas-surface);
      }
      .flow-step.is-key .flow-node {
        background: var(--color-canvas-surface);
        border-color: var(--color-primary);
      }
      /* Both connector rules off: the steps no longer sit on a shared rail, and
         the desktop one targets :not(:first-child), which would otherwise draw
         a horizontal bar across every card but the first. */
      .flow-step::before { display: none; }
      .flow-node {
        width: 46px; height: 46px; margin-bottom: 14px;
        /* Not a button any more in effect - the detail is already on screen, so
           there is nothing to press and a pointer cursor would promise
           an interaction that does not exist. */
        cursor: default;
      }
      .flow-icon { font-size: 19px; }
      .flow-num { font-size: 9px; }
      .flow-label {
        max-width: none; padding: 0;
        font-size: 16.5px; line-height: 1.25; margin-bottom: 9px;
      }
      /* Always visible: no max-height collapse, no opacity gate, and none of the
         positioning the desktop tooltip needs. */
      .flow-tip {
        position: static; transform: none;
        display: block; width: auto; margin: 0; padding: 0;
        max-height: none; overflow: visible;
        opacity: 1; visibility: visible;
        background: none; box-shadow: none; border: 0;
        color: var(--color-text-secondary);
        font-size: 13.5px; line-height: 1.6;
        transition: none;
      }
      /* The desktop hover rules carry higher specificity than the plain
         .flow-tip rule above ((0,3,0) vs (0,1,0)), and mobile browsers leave
         :hover stuck after a tap - which is how an earlier version of this
         section ended up throwing a panel off the left edge of the screen.
         Re-declaring the same selectors here matches that specificity and,
         being later in the file, wins the tie. */
      .flow-step:hover .flow-tip,
      .flow-node:focus-visible + .flow-label + .flow-tip,
      .flow-step:first-child .flow-tip,
      .flow-step:first-child:hover .flow-tip,
      .flow-step:first-child .flow-node:focus-visible + .flow-label + .flow-tip,
      .flow-step:last-child .flow-tip,
      .flow-step:last-child:hover .flow-tip,
      .flow-step:last-child .flow-node:focus-visible + .flow-label + .flow-tip {
        transform: none; left: auto; right: auto; top: auto;
        opacity: 1; visibility: visible;
      }
      /* The tip's own heading duplicates .flow-label directly above it. */
      .flow-tip strong { display: none; }
      .flow-tip::before, .flow-tip::after { display: none; }
      /* Desktop-only hint: there is no hover on touch, and nothing to reveal. */
      .flow-lede-hint { display: none; }
    }

    /* Progress readout under the flow carousel, built by js/nav-faq.js so it
       never appears without the scripting that keeps it in sync. Six dots would
       be a lot of small targets, so this is a labelled bar instead. */
    .flow-progress { display: none; }
    @media (max-width: 900px) {
      /* Padded to the same gutter as the cards above, so the bar starts and
         ends exactly where the card edges do. */
      .flow-progress {
        display: flex; align-items: center; gap: 14px;
        max-width: none; margin: 0 0 30px;
        padding-inline: 2px;
      }
      .flow-progress-bar {
        flex: 1 1 auto; height: 4px; border-radius: 999px;
        background: rgba(26,26,26,0.10); overflow: hidden;
      }
      .flow-progress-fill {
        display: block; height: 100%; border-radius: 999px;
        background: var(--color-primary-light, #e0b400);
        transition: width .25s ease;
      }
      .flow-progress-label {
        flex: 0 0 auto;
        font-family: var(--font-display, Quicksand, sans-serif);
        font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
        color: var(--color-text-secondary);
        font-variant-numeric: tabular-nums;
      }
      /* One-time "Swipe" prompt, retired by js/nav-faq.js the moment the
         reader moves off the first card. The arrow nudges rather than the
         whole label, so the word stays readable while it moves. */
      .flow-progress-hint {
        flex: 0 0 auto; margin: 0;
        display: inline-flex; align-items: center; gap: 5px;
        font-family: var(--font-display, Quicksand, sans-serif);
        font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
        text-transform: uppercase; color: var(--color-primary);
        transition: opacity .25s ease, max-width .25s ease, margin .25s ease;
      }
      .flow-progress-hint::after {
        content: '\2192';
        display: inline-block;
        animation: flowSwipeNudge 1.6s ease-in-out infinite;
      }
      @keyframes flowSwipeNudge {
        0%, 60%, 100% { transform: translateX(0); }
        30% { transform: translateX(5px); }
      }
      /* Collapsed rather than display:none so it eases out instead of the bar
         snapping wider under the reader's thumb mid-swipe. */
      .flow-progress.has-moved .flow-progress-hint {
        opacity: 0; max-width: 0; margin-right: -14px; overflow: hidden;
      }
      @media (prefers-reduced-motion: reduce) {
        .flow-progress-hint::after { animation: none; }
      }
    }

    .faq-section { background: var(--color-canvas); padding: 64px clamp(20px, 5vw, 60px); }
    .faq-inner { max-width: 820px; margin: 0 auto; }
    /* Header block centred to match the other sections; the questions
       themselves stay left-aligned, where long text reads properly. */
    .faq-eyebrow, .faq-heading { text-align: center; }
    .faq-sub { margin-left: auto !important; margin-right: auto !important; text-align: center; }
    /* .faq-inner-scoped: the base .faq-toggle rule sits later in this file
       and sets display:inline-flex, which at equal specificity won and left
       the button stranded on the left under a centred heading. */
    .faq-inner .faq-toggle { display: flex; margin-left: auto; margin-right: auto; }
    .faq-inner .faq-toggle[hidden] { display: none; }
    .faq-eyebrow { font-family: var(--font-display, Quicksand, sans-serif); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-secondary); margin: 0 0 8px; }
    .faq-heading { font-family: var(--font-display, Quicksand, sans-serif); font-size: clamp(24px, 3.4vw, 34px); font-weight: 600; color: #1a1a1a; margin: 0 0 10px; letter-spacing: -0.01em; line-height: 1.15; }
    .faq-sub { font-size: 15px; color: #55575b; margin: 0 0 30px; line-height: 1.6; max-width: 640px; }
    .faq-list { display: flex; flex-direction: column; gap: 12px; }
    /* .faq-list's own `display: flex` ties in specificity with the browser's
       built-in `[hidden]{display:none}` rule, and author styles win ties over
       the UA stylesheet -- so `hidden` alone does nothing here. This rule
       out-specifies both. */
    .faq-list[hidden] { display: none; }
    /* Master toggle: collapses the whole question list. Rendered by JS only
       (see initFaqCollapse) so that without JS every question stays visible
       rather than being sealed behind a control that can't open. */
    .faq-toggle {
      display: inline-flex; align-items: center; gap: 10px;
      margin: 0 0 26px; padding: 13px 22px;
      background: #1a1a1a; color: #f4d949; border: 0; border-radius: 999px;
      font-family: var(--font-display, Quicksand, sans-serif);
      font-size: 14.5px; font-weight: 700; cursor: pointer;
      transition: background .2s, transform .12s;
    }
    .faq-toggle:hover { background: #000; }
    .faq-toggle:active { transform: translateY(1px); }
    .faq-toggle-chev { width: 15px; height: 15px; transition: transform .22s; }
    .faq-toggle[aria-expanded="true"] .faq-toggle-chev { transform: rotate(180deg); }
    .faq-toggle-count { opacity: .62; font-weight: 600; }
    .faq-item { border: 1px solid rgba(26,26,26,0.08); border-radius: 14px; background: var(--color-canvas-surface); overflow: hidden; }
    .faq-item summary {
      list-style: none; cursor: pointer; padding: 18px 20px; margin: 0;
      font-family: var(--font-display, Quicksand, sans-serif); font-weight: 700; font-size: 16px; color: #1a1a1a;
      display: flex; justify-content: space-between; align-items: center; gap: 16px;
    }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-item summary::after { content: '+'; font-size: 24px; font-weight: 400; line-height: 1; color: #b08900; flex-shrink: 0; transition: transform .2s ease; }
    .faq-item[open] summary::after { content: '\2013'; }
    .faq-item summary:hover { color: #b08900; }
    .faq-answer { padding: 0 20px 18px; color: #55575b; font-size: 14.5px; line-height: 1.65; }
    .faq-answer a { color: #b08900; }
  

/* ===== block 4 of 4 (was inline in index.html) ===== */
    .wl-overlay {
      position: fixed; inset: 0; z-index: 10000;
      background: rgba(20,18,10,0.55); backdrop-filter: blur(2px);
      display: none; align-items: center; justify-content: center; padding: 20px;
      opacity: 0; transition: opacity .2s ease;
    }
    .wl-overlay.open { display: flex; opacity: 1; }
    .wl-card {
      background: #FAF9F4; border-radius: 22px; width: 100%; max-width: 440px;
      padding: 30px 28px; position: relative;
      box-shadow: 0 30px 70px -20px rgba(20,18,10,0.5);
      transform: translateY(12px) scale(0.99); transition: transform .22s cubic-bezier(.16,1,.3,1);
      font-family: var(--font-body, Mulish, sans-serif);
    }
    .wl-overlay.open .wl-card { transform: none; }
    .wl-close {
      position: absolute; top: 14px; right: 14px; width: 32px; height: 32px;
      border-radius: 50%; border: 1px solid #e6e8e4; background: #FAF9F4; cursor: pointer;
      font-size: 18px; line-height: 1; color: #55575b; display: flex; align-items: center; justify-content: center;
    }
    .wl-kicker { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #b08900; margin: 0 0 6px; }
    .wl-title { font-family: var(--font-display, Quicksand, sans-serif); font-size: 24px; font-weight: 700; color: #1a1a1a; margin: 0 0 6px; line-height: 1.15; }
    .wl-sub { font-size: 13.5px; color: #55575b; margin: 0 0 20px; line-height: 1.5; }
    .wl-field { margin-bottom: 14px; }
    .wl-field label { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #1a1a1a; margin-bottom: 5px; }
    .wl-field input {
      width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid #e0e2dd;
      /* 16px is the iOS Safari threshold -- anything smaller makes it auto-zoom
         the whole page on focus, which is the "zooms in when I type" bug. */
      border-radius: 11px; font-size: 16px; font-family: inherit; color: #1a1a1a; background: #FAF9F4;
    }
    .wl-field input:focus { outline: none; border-color: #f0b429; box-shadow: 0 0 0 3px rgba(244,217,73,0.28); }
    .wl-submit {
      width: 100%; border: none; background: #1a1a1a; color: #fff; padding: 14px;
      border-radius: 11px; font-weight: 700; font-size: 15px; cursor: pointer; font-family: inherit;
      transition: opacity .2s, transform .12s; margin-top: 4px;
    }
    .wl-submit:hover { opacity: 0.92; }
    .wl-submit:active { transform: scale(0.98); }
    .wl-submit[disabled] { opacity: 0.55; cursor: default; }
    .wl-error { color: #c0392b; font-size: 12.5px; margin: 8px 0 0; min-height: 1em; }
    .wl-suggest { font-size: 12.5px; color: #55575b; margin: 7px 0 0; line-height: 1.45; }
    .wl-suggest button {
      background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
      color: #1a1a1a; font-weight: 700; text-decoration: underline;
      text-decoration-color: #f4d949; text-decoration-thickness: 2px; text-underline-offset: 2px;
    }
    .wl-suggest button:hover { text-decoration-color: #1a1a1a; }
    /* Honeypot - hidden from people and assistive tech, still in the DOM for bots. */
    .wl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
    .wl-fine { font-size: 11px; color: #8b8c8e; margin: 14px 0 0; line-height: 1.5; text-align: center; }
    .wl-success { text-align: center; padding: 8px 0; }
    .wl-success-emoji { font-size: 42px; margin-bottom: 10px; }
    .wl-success h3 { font-family: var(--font-display, Quicksand, sans-serif); font-size: 22px; color: #1a1a1a; margin: 0 0 8px; }
    .wl-success p { font-size: 14px; color: #55575b; margin: 0; line-height: 1.55; }
  
