/* ============================================================
     Staff App — "The Story" (Direction A). Scoped to .staff-story.
     Tokens mirror the shipped vibesite light system (main.css) so the
     page sits inside the site's look; fonts (Manrope / IBM Plex Sans /
     IBM Plex Mono) come from base.html.
     ============================================================ */
  .staff-story {
    --ss-bg: #ffffff;
    --ss-band: #fbf5f3;
    --ss-band-deep: #f5ece8;
    --ss-border: #efe2dd;
    --ss-ink: #171412;
    --ss-body: #4b443f;
    --ss-muted: #6b625c;
    --ss-accent: #0e1fc1;
    --ss-accent-hover: #0a1899;
    --ss-accent-tint: #eef0ff;
    --ss-accent-line: #d9dbff;
    --ss-live: #1c7a43;
    --ss-live-bg: #e7f5ec;
    --ss-reported: var(--ss-accent);
    --ss-maxw: 1120px;
    --ss-gutter: clamp(16px, 5vw, 64px);

    --font-display: 'Manrope', ui-sans-serif, system-ui, sans-serif;
    --font-body: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

    background: var(--ss-bg);
    color: var(--ss-body);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  .staff-story * { box-sizing: border-box; }
  .staff-story h1, .staff-story h2, .staff-story h3, .staff-story h4 {
    font-family: var(--font-display); color: var(--ss-ink);
    text-wrap: balance; line-height: 1.1; margin: 0;
  }
  .staff-story h1 { font-size: clamp(2.2rem, 5.2vw, 3.6rem); font-weight: 800; letter-spacing: -0.02em; }
  .staff-story h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); font-weight: 800; letter-spacing: -0.015em; }
  .staff-story h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); font-weight: 700; letter-spacing: -0.01em; }
  .staff-story p { margin: 0; }
  .staff-story a { color: var(--ss-accent); text-decoration: none; }

  .staff-story .ss-wrap { max-width: var(--ss-maxw); margin-inline: auto; padding-inline: var(--ss-gutter); }
  .staff-story .ss-band { background: var(--ss-band); border-top: 1px solid var(--ss-border); border-bottom: 1px solid var(--ss-border); }
  .staff-story .ss-band-deep { background: var(--ss-band-deep); border-top: 1px solid var(--ss-border); border-bottom: 1px solid var(--ss-border); }
  .staff-story .ss-pad { padding-block: clamp(56px, 8vw, 104px); }

  .staff-story .ss-eyebrow {
    font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--ss-accent); margin: 0 0 14px; font-weight: 600;
  }
  .staff-story .ss-lede { font-size: 1.12rem; color: var(--ss-body); max-width: 58ch; }
  .staff-story .ss-section-head { margin-bottom: clamp(32px, 5vw, 52px); }
  .staff-story .ss-section-head.center { text-align: center; margin-inline: auto; max-width: 62ch; }

  /* Buttons */
  .staff-story .ss-btn {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-display); font-weight: 700; font-size: 1rem;
    padding: 13px 24px; border-radius: 999px; border: 1px solid transparent;
    cursor: pointer; transition: background .15s, color .15s, border-color .15s;
  }
  .staff-story .ss-btn--primary { background: var(--ss-accent); color: #fff; }
  .staff-story .ss-btn--primary:hover { background: var(--ss-accent-hover); }
  .staff-story .ss-cta-link { font-family: var(--font-display); font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
  .staff-story .ss-cta-link::after { content: "\2192"; transition: transform .15s; }
  .staff-story .ss-cta-link:hover::after { transform: translateX(3px); }

  /* Placeholder media (until real screenshots land) */
  .staff-story .ss-ph {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; gap: 6px; border-radius: 16px; overflow: hidden;
    background:
      repeating-linear-gradient(135deg, rgba(14,31,193,.05) 0 14px, rgba(14,31,193,.09) 14px 28px),
      linear-gradient(160deg, #f3f0ff, #fbf5f3);
    border: 1.5px dashed var(--ss-accent-line);
    color: var(--ss-accent); padding: 20px; min-height: 220px;
  }
  .staff-story .ss-ph__tag { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; opacity: .7; }
  .staff-story .ss-ph__label { font-family: var(--font-display); font-weight: 700; font-size: 0.98rem; color: var(--ss-ink); max-width: 30ch; }
  .staff-story .ss-ph--wide { aspect-ratio: 16/10; min-height: 0; }
  .staff-story .ss-ph--phone { aspect-ratio: 9/19; max-width: 260px; margin-inline: auto; border-radius: 30px; min-height: 0; }
  .staff-story .ss-ph--sq { aspect-ratio: 1/1; min-height: 0; }

  .staff-story .ss-media-img { display: block; width: 100%; height: auto; border-radius: 16px; }
  .staff-story .ss-media-img--phone { max-width: 260px; margin-inline: auto; }
  /* iPhone frame (portrait) — titanium body, thin uniform bezel, deep corner
     radius, side buttons. Matches the site's pillar-page iPhone mockup. */
  .staff-story .ss-ip17 {
    position: relative; width: 100%; max-width: 300px; margin-inline: auto;
    border-radius: 52px; padding: 13px;
    background: linear-gradient(135deg, #4a4d53 0%, #1b1c20 44%, #34373d 78%, #202226 100%);
    box-shadow: 0 34px 74px -30px rgba(9,13,21,.55), inset 0 0 0 1px rgba(255,255,255,.07);
  }
  .staff-story .ss-ip17::before {
    content:""; position:absolute; inset:3px; border-radius:49px;
    border:1px solid rgba(255,255,255,.10);
    box-shadow: inset 0 1px 1px rgba(255,255,255,.14), inset 0 -1px 2px rgba(0,0,0,.5);
    pointer-events:none; z-index:6;
  }
  .staff-story .ss-ip17 > .ss-btn-l,
  .staff-story .ss-ip17 > .ss-btn-r { position:absolute; background: linear-gradient(90deg,#3a3d42,#232529); z-index:1; }
  .staff-story .ss-ip17 > .ss-btn-l { left:-2px; width:4px; border-radius:2px 0 0 2px; }
  .staff-story .ss-ip17 > .ss-btn-r { right:-2px; width:4px; border-radius:0 2px 2px 0; }
  .staff-story .ss-ip17 > .b1 { top:19%; height:34px; }
  .staff-story .ss-ip17 > .b2 { top:29%; height:64px; }
  .staff-story .ss-ip17 > .b3 { top:24%; height:88px; }
  /* The screen height follows the screenshot/video (each is a full 1080x2342 app
     capture), so the entire screen shows — no object-fit crop, nothing clipped,
     and the frame is always a true iPhone 9:19.5 regardless of the media. */
  .staff-story .ss-ip17-screen {
    position: relative; border-radius: 42px; overflow: hidden; background:#000; font-size: 0;
  }
  .staff-story .ss-ip17-screen video,
  .staff-story .ss-ip17-screen img { display:block; width:100%; height:auto; }
  /* Centered play button overlay on click-to-play videos (hides once playing) */
  .staff-story .ss-playbtn {
    position: absolute; inset: 0; margin: auto; width: 84px; height: 84px; border: none; cursor: pointer;
    border-radius: 50%; background: color-mix(in srgb, var(--color-cobalt-400) 92%, transparent); box-shadow: 0 12px 34px rgba(14,31,193,.5);
    display: grid; place-items: center; z-index: 5; transition: opacity .2s ease, transform .15s ease;
  }
  .staff-story .ss-playbtn:hover { transform: scale(1.06); background: var(--ss-accent); }
  .staff-story .ss-playbtn svg { width: 34px; height: 34px; margin-left: 4px; }
  .staff-story .ss-ip17-screen.is-playing .ss-playbtn { opacity: 0; pointer-events: none; }
  @media (max-width: 767px) {
    .staff-story .ss-ip17 { padding: 9px; border-radius: 40px; }
    .staff-story .ss-ip17::before { inset:2px; border-radius:38px; }
    .staff-story .ss-ip17-screen { border-radius: 31px; }
  }

  /* Hero */
  .staff-story .ss-hero .ss-wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
  .staff-story .ss-hero h1 + p { margin-top: 20px; font-size: 1.18rem; color: var(--ss-body); max-width: 42ch; }
  .staff-story .ss-hero-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 30px; }
  .staff-story .ss-hero-caption { margin-top: 18px; text-align: center; font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--ss-muted); }
  @media (max-width: 820px) { .staff-story .ss-hero .ss-wrap { grid-template-columns: 1fr; } .staff-story .ss-hero-media { order: -1; } }
  /* Full-width header: no media column, centered, header spans the page. */
  .staff-story .ss-hero--full .ss-wrap { grid-template-columns: 1fr; max-width: 860px; text-align: center; }
  .staff-story .ss-hero--full h1 { margin-inline: auto; max-width: 20ch; }
  .staff-story .ss-hero--full h1 + p { margin-inline: auto; max-width: 56ch; }
  .staff-story .ss-hero--full .ss-hero-cta { justify-content: center; }
  .staff-story .ss-hero--full .ss-byline { justify-content: center; border-top: 0; padding-top: 0; margin-top: 24px; }

  /* Byline */
  .staff-story .ss-byline { display: flex; align-items: center; gap: 12px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--ss-border); color: var(--ss-muted); font-size: 0.9rem; }
  .staff-story .ss-byline img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 1px solid var(--ss-border); flex: none; }
  .staff-story .ss-byline b { color: var(--ss-ink); font-weight: 600; }
  .staff-story .ss-byline .ss-byline-role { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ss-muted); }

  /* Quotes */
  .staff-story blockquote { margin: 0; padding: 0 0 0 20px; border-left: 3px solid var(--ss-accent); }
  .staff-story blockquote p { font-family: var(--font-display); font-weight: 400; font-style: italic; color: var(--ss-ink); font-size: 1.12rem; line-height: 1.45; }
  .staff-story blockquote cite { display: block; margin-top: 10px; font-style: normal; font-size: 0.82rem; color: var(--ss-muted); }
  .staff-story blockquote cite b { color: var(--ss-body); font-weight: 600; }
  .staff-story .ss-tag { display: inline-block; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: .12em; text-transform: uppercase; padding: 2px 7px; border-radius: 5px; margin-left: 6px; vertical-align: middle; }
  .staff-story .ss-tag--live { background: var(--ss-live-bg); color: var(--ss-live); }
  .staff-story .ss-tag--reported { background: var(--ss-accent-tint); color: var(--ss-accent); }

  /* Beats — content sits directly on alternating light bands (white / warm
     rose), and the customer quote is the one blue element: a cobalt-tint
     callout card with a cobalt left border (the brand's house pull-quote). */
  .staff-story .ss-beats-head { padding-top: clamp(56px, 8vw, 104px); padding-bottom: clamp(32px, 5vw, 52px); }

  /* Full-width alternating bands, one per beat */
  .staff-story .ss-beat-band { background: var(--ss-bg); padding-block: clamp(48px, 7vw, 88px); }
  .staff-story .ss-beat-band--alt { background: var(--ss-band); }
  .staff-story .ss-beat-band + .ss-beat-band { border-top: 1px solid var(--ss-border); }

  .staff-story .ss-beat { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
  .staff-story .ss-beat-band--alt .ss-beat__media { order: -1; }
  .staff-story .ss-beat__text { display: flex; flex-direction: column; }

  /* "On the old system" — plain copy on the band (the problem) */
  .staff-story .ss-beat__issue {
    font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: .14em;
    text-transform: uppercase; color: var(--ss-muted); margin: 0 0 10px; font-weight: 600;
  }
  .staff-story .ss-beat__old h3 { margin: 0 0 16px; color: var(--ss-ink); }
  /* The "on the old system" line is descriptive copy, not a customer quote:
     plain body text, no italic and no quote bar. */
  .staff-story .ss-beat__pain { margin: 0; font-size: 1.05rem; color: var(--ss-body); }

  /* "Rundoo fixes it" — plain copy on the band (the win) */
  .staff-story .ss-beat__new { margin-top: 22px; }
  .staff-story .ss-beat__fix { margin: 0; font-size: 1.05rem; }
  .staff-story .ss-beat__fix-lead { color: var(--ss-accent); font-weight: 800; font-size: 1.14em; }

  /* The customer quote — the single blue callout: cobalt-tint fill + cobalt
     left border, matching the pillar pages' client-quote pattern. */
  .staff-story .ss-quote-card {
    margin-top: 20px;
    padding: 20px 24px;
    background: var(--ss-accent-tint);
    border: 1px solid var(--ss-accent-line);
    border-left: 4px solid var(--ss-accent);
    border-radius: 0 12px 12px 0;
  }
  .staff-story .ss-quote-card p { color: var(--ss-ink); }
  .staff-story .ss-quote-card cite { color: var(--ss-muted); }

  /* "Some ways Dooey can help" — a compact cobalt prompt block under each fix */
  .staff-story .ss-beat__dooey { margin-top: 22px; }
  .staff-story .ss-beat__dooey-label {
    display: block;
    font-family: var(--font-display); font-size: 1.45rem; letter-spacing: 0; text-transform: none;
    color: var(--ss-ink); font-weight: 700; margin-bottom: 14px;
  }
  .staff-story .ss-beat__dooey ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
  .staff-story .ss-beat__dooey li {
    display: flex; gap: 10px; font-size: 0.98rem; color: var(--ss-ink);
    font-family: var(--font-display); font-weight: 400;
  }
  .staff-story .ss-beat__dooey li::before { content: "\2726"; color: var(--ss-accent); }

  @media (max-width: 780px) { .staff-story .ss-beat { grid-template-columns: 1fr; } .staff-story .ss-beat-band--alt .ss-beat__media { order: 0; } }

  /* ===== Scroll story (Option C) — ONE sticky monitor cycles the shots while
     the beats scroll past on alternating sides, a cobalt ring filling like a
     clock hand. HTML-first: every beat + the monitor's images ship in the DOM;
     the JS at the bottom only swaps which shot is shown, highlights the active
     beat, and advances the ring. With JS off, all beats read and the monitor
     shows the first shot. ===== */
  /* Transition band (old-system pain quote) bridging the hero and the beats */
  .staff-story .ss-oldsys { padding-block: clamp(56px, 10vh, 120px); }
  .staff-story .ss-oldsys-inner { max-width: 840px; margin-inline: auto; text-align: center; }
  .staff-story .ss-oldsys-inner .ss-eyebrow { margin-bottom: 18px; }
  .staff-story .ss-oldsys-quote { margin: 0; padding: 0; border: 0; }
  .staff-story .ss-oldsys-quote p { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(1.45rem, 3.4vw, 2.4rem); line-height: 1.25; letter-spacing: -0.01em; color: var(--ss-ink); text-wrap: balance; }
  .staff-story .ss-oldsys-quote cite { display: block; margin-top: 22px; font-style: normal; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ss-muted); }

  .staff-story .ss-story--pinned-head { padding-top: clamp(24px, 5vh, 64px); border-top: 1px solid var(--ss-border); }
  .staff-story .ss-story-stage { position: relative; }
  .staff-story .ss-story-sticky {
    /* heading + monitor pin together at the top, so the heading stays visible
       through every beat while the cards scroll past. */
    position: sticky; top: 72px; height: calc(100vh - 72px);
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    padding-top: clamp(12px, 2.6vh, 34px);
    gap: clamp(14px, 2.6vh, 30px);
    pointer-events: none; z-index: 1;
  }
  .staff-story .ss-story-heading { text-align: center; max-width: 30ch; margin-inline: auto; }
  .staff-story .ss-story-heading h2 { font-size: clamp(1.4rem, 3vw, 2.1rem); }
  .staff-story .ss-story-ringwrap { position: relative; width: min(680px, 86vw); }
  .staff-story .ss-story-ring { position: absolute; inset: -22px; transform: rotate(-90deg); pointer-events: none; }
  .staff-story .ss-story-ring circle { fill: none; stroke-width: 2.5; }
  .staff-story .ss-story-ring-track { stroke: var(--ss-border); }
  .staff-story .ss-story-ring-fill { stroke: var(--ss-accent); stroke-linecap: round; transition: stroke-dashoffset .3s ease; }
  .staff-story .ss-story-screen {
    position: relative; width: 100%; aspect-ratio: 16 / 10;
    border-radius: 16px; overflow: hidden; background: var(--color-demo-surface, #101014);
  }
  .staff-story .ss-story-shot, .staff-story .ss-story-support {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; transition: opacity .55s ease;
  }
  .staff-story .ss-story-shot { object-fit: cover; }
  .staff-story .ss-story-shot.is-shown, .staff-story .ss-story-support.is-shown { opacity: 1; }
  .staff-story .ss-story-support {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    background: var(--ss-accent); color: #fff; text-align: center; padding: 8%;
  }
  .staff-story .ss-story-support b { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.4rem, 3vw, 2rem); }
  .staff-story .ss-story-support span { font-size: 0.95rem; opacity: .92; max-width: 26ch; }
  .staff-story .ss-story-support svg { width: 52px; height: 52px; }
  /* support NUMBERS screen on the monitor (beat 4) */
  .staff-story .ss-story-stats-head { font-family: var(--font-display); font-weight: 700; font-size: clamp(1rem, 2.2vw, 1.35rem); max-width: 22ch; margin-bottom: clamp(16px, 3vh, 32px); }
  .staff-story .ss-story-stats { display: flex; gap: clamp(14px, 4vw, 48px); align-items: flex-start; }
  .staff-story .ss-story-stat { display: flex; flex-direction: column; align-items: center; gap: 6px; }
  .staff-story .ss-story-stat b { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 4.2vw, 2.9rem); line-height: 1; letter-spacing: -0.02em; }
  .staff-story .ss-story-stat span { font-size: clamp(0.72rem, 1.4vw, 0.9rem); opacity: .92; max-width: 14ch; line-height: 1.3; }

  /* Pull the beats up to overlap the pinned monitor from the START, so the first
     card sits beside the monitor immediately instead of a full viewport below it
     (the sticky reserves calc(100vh - 72px) of flow height; cancel it). */
  .staff-story .ss-story-beats { position: relative; z-index: 2; max-width: var(--ss-maxw); margin-inline: auto; padding-inline: var(--ss-gutter); margin-top: calc(72px - 100vh); }
  /* top-aligned + a top offset that sits the card beside the monitor's upper
     half, so the FIRST card is visible immediately (not half a screen down). */
  /* Tall rows so each beat has room to: read the card over the monitor, then
     scroll up to reveal the demo. The JS fades each card up based on scroll. */
  .staff-story .ss-story-row { min-height: 88vh; display: flex; align-items: center; }
  .staff-story .ss-story-row--l { justify-content: flex-start; }
  .staff-story .ss-story-row--r { justify-content: flex-end; }
  .staff-story .ss-story-card {
    width: min(380px, 88vw); background: var(--ss-bg); border: 1px solid var(--ss-border);
    border-radius: 16px; padding: 26px 28px;
    /* floats ON TOP of the monitor, so a soft shadow reads it as an overlay card */
    box-shadow: 0 24px 60px -28px rgba(23, 20, 18, 0.5);
  }
  /* overlap the card onto the monitor (the pain card sits over the screen, then
     scrolls up to reveal the demo) */
  .staff-story .ss-story-row--l .ss-story-card { margin-left: clamp(0px, 9vw, 150px); }
  .staff-story .ss-story-row--r .ss-story-card { margin-right: clamp(0px, 9vw, 150px); }
  .staff-story .ss-story-card h3 { margin: 6px 0 10px; color: var(--ss-ink); }
  .staff-story .ss-story-card .ss-beat__fix { font-size: 1.02rem; }
  .staff-story .ss-story-step { margin-top: 14px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: .1em; color: var(--ss-muted); }

  @media (max-width: 900px) {
    .staff-story .ss-story-sticky { position: static; height: auto; padding-block: 16px; }
    .staff-story .ss-story-ring { display: none; }
    .staff-story .ss-story-beats { margin-top: 0; }
    .staff-story .ss-story-row { min-height: 0; margin-block: 14px; padding-top: 0; justify-content: center !important; }
    .staff-story .ss-story.ss-js .ss-story-row:not(.is-active) .ss-story-card { opacity: 1; transform: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .staff-story .ss-story.ss-js .ss-story-row:not(.is-active) .ss-story-card { opacity: 1; transform: none; }
  }

  /* Owner two-column */
  .staff-story .ss-twocol { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
  @media (max-width: 780px) { .staff-story .ss-twocol { grid-template-columns: 1fr; } .staff-story .ss-twocol__media { order: -1; } }
  .staff-story .ss-owner-list { list-style: none; padding: 0; margin: 18px 0 22px; display: grid; gap: 10px; }
  .staff-story .ss-owner-list li { display: flex; gap: 10px; font-size: 0.98rem; }
  .staff-story .ss-owner-list li::before { content: "\2192"; color: var(--ss-accent); font-weight: 800; }
  /* Owner section: larger, more prominent eyebrow label */
  .staff-story .ss-owner-eyebrow { font-size: clamp(1rem, 2.2vw, 1.3rem); letter-spacing: 0.1em; margin-bottom: 18px; }

  /* Dooey band */
  .staff-story .ss-dooey-band { background: var(--ss-accent-tint); border-block: 1px solid var(--ss-accent-line); }
  .staff-story .ss-dooey-new { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: var(--ss-accent); padding: 6px 13px; border-radius: 999px; margin-bottom: 16px; }
  .staff-story .ss-dooey-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 32px; }
  .staff-story .ss-dooey-card { background: var(--ss-bg); border: 1px solid var(--ss-accent-line); border-radius: 18px; padding: 28px; }
  .staff-story .ss-dooey-card h3 { font-size: 1.15rem; margin-bottom: 6px; }
  .staff-story .ss-dooey-card .ss-who { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ss-accent); display: block; margin-bottom: 14px; }
  .staff-story .ss-dooey-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
  .staff-story .ss-dooey-card li { display: flex; gap: 10px; font-size: 0.98rem; color: var(--ss-ink); font-family: var(--font-display); font-weight: 600; }
  .staff-story .ss-dooey-card li::before { content: "\2726"; color: var(--ss-accent); }
  @media (max-width: 720px) { .staff-story .ss-dooey-cards { grid-template-columns: 1fr; } }

  /* Metrics */
  .staff-story .ss-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .staff-story .ss-metric { text-align: center; padding: 8px; }
  .staff-story .ss-metric b { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 4vw, 2.9rem); color: var(--ss-accent); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
  .staff-story .ss-metric span { display: block; margin-top: 8px; font-size: 0.92rem; color: var(--ss-body); }
  /* Soft reassurance line under a stat (e.g. "with the rest solved soon after"). Muted + italic so it reads as a gentle aside, not a second claim. */
  .staff-story .ss-metric__note { display: block; margin-top: 6px; font-size: 0.82rem; font-style: italic; color: var(--ss-body); opacity: 0.72; }
  @media (max-width: 720px) { .staff-story .ss-metrics { grid-template-columns: 1fr; gap: 28px; } }

  /* Stats shown in a beat's media column (in place of an image), reusing the cobalt .ss-metric number. */
  .staff-story .ss-beat-stats { display: flex; flex-direction: column; justify-content: center; gap: clamp(28px, 4vw, 48px); min-height: 100%; }

  /* Download */
  .staff-story .ss-download { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
  .staff-story .ss-badges { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
  .staff-story .ss-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--ss-ink); color: #fff; padding: 10px 18px; border-radius: 10px; font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; }
  .staff-story .ss-appicon-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
  .staff-story .ss-appicon { display: block; width: clamp(128px, 20vw, 172px); height: auto; border-radius: 24%; }
  .staff-story .ss-appicon-name { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--ss-ink); }
  @media (max-width: 780px) { .staff-story .ss-download { grid-template-columns: 1fr; } }

  /* Closing CTA */

  @media (prefers-reduced-motion: reduce) { .staff-story * { transition: none !important; } }
  .staff-story :focus-visible { outline: 2px solid var(--ss-accent); outline-offset: 2px; }

  /* ============ FAQ accordion (shared _faqs.html markup) ============
     The .faq-* rules live only in pillar.html's scoped style block, so this
     standalone page carries its own copy (un-scoped; uses global main.css tokens).
     Native <details>/<summary>, no JS. */
  .faq-section { padding: 8px 0 72px; }
  .faq-section .container--narrow,
  .faq-section .container { max-width: 860px; }
  .faq-section .section-title { text-align: center; margin-bottom: 32px; }
  .faq-list {
    background: #fff;
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-lg);
    padding: 8px 28px;
    box-shadow: var(--shadow-control);
  }
  .faq-item { border-bottom: 1px solid var(--paper-line); }
  .faq-item:last-child { border-bottom: 0; }
  .faq-q {
    list-style: none;
    cursor: pointer;
    padding: 24px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
  }
  .faq-q::-webkit-details-marker { display: none; }
  .faq-q::after {
    content: "";
    flex: none;
    width: 20px;
    height: 20px;
    background: no-repeat center / contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230e1fc1' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
    transition: transform .2s ease;
    color: var(--color-cobalt-400);
  }
  .faq-item[open] .faq-q::after { transform: rotate(45deg); }
  .faq-q:hover { color: var(--color-cobalt-400); }
  .faq-a { padding: 0 8px 24px; font-size: 15.5px; line-height: 1.65; color: var(--ink-2); max-width: 760px; }
  .faq-a a { color: var(--color-cobalt-400); }

  /* Italicize the quote-wall quotes too, and drop the bold (cq-* base lives in main.css) */
  .cq-text { font-style: italic; font-weight: 400; }