/* ============================================================================
   Tribble — Brand 2.0 stylesheet
   ----------------------------------------------------------------------------
   The design system behind the Brand 2.0 pages: simple, focused, one idea per
   screen. Extracted from the inline <style> blocks those pages each carried a
   private copy of, so there is now one source of truth.

   It is deliberately independent of the legacy system (tokens.css,
   components.css, website-sections.css). Do not load both on the same page:
   tokens.css imports six font families and carries element-level rules that
   will fight this file.

   Usage
     <link rel="stylesheet" href="/assets/css/brand.css?v=YYYYMMDD-n">

   Bump the ?v= string whenever this file changes. Assets are served with a
   30-day cache, so without a bump returning visitors keep the old file.

   Contents
     1.  Font
     2.  Tokens
     3.  Base
     4.  Utilities
     5.  Layout
     6.  Header / nav
     7.  Hero
     8.  Stat strip
     9.  Story body
     10. Pull quote
     11. Portrait frame
     12. Cards
     13. FAQ
     14. Video theater
     15. Roundtable
     16. Closing CTA
     17. Footer
     18. Responsive
     19. Motion, print, forced colours
   ========================================================================= */

@layer brand.tokens, brand.base, brand.layout, brand.components, brand.responsive, brand.page, brand.overrides;

/* 1. Font ------------------------------------------------------------------
   Geist variable, one file for the whole 100–900 range.
   TODO: self-host. A third-party CDN on the critical path is an extra
   connection and a dependency we do not control. */
@font-face {
  font-family: Geist;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-sans/Geist-Variable.woff2") format("woff2");
}

@layer brand.tokens {
  /* 2. Tokens --------------------------------------------------------------
     Every value in this file traces back to one of these. If you find
     yourself typing a hex code or a pixel value in a component, add a token
     instead. */
  :root {
    /* Colour */
    --ink:        #00091A;            /* primary text, dark surfaces      */
    --ink2:       #1E293B;            /* secondary text, captions         */
    --paper:      #F4F6FA;            /* page ground, header band         */
    --field:      #ffffff;            /* content surface                  */
    --signal:     #3263E9;            /* the one accent. use sparingly    */
    --line:       rgba(0, 9, 26, .12);/* hairlines and card borders       */
    --line-soft:  rgba(0, 9, 26, .08);/* header underline                 */
    --signal-wash: rgba(50, 99, 233, .04); /* tinted panels               */

    /* Topic palette. The blog carries six subject areas and a 240-row list
       reads as a wall without them. These are the ONLY colours outside
       --signal, they are deliberately desaturated so no single one shouts,
       and they are used at small sizes only: a marker, a label, a hairline,
       a 5% wash. Never as a fill behind body copy. */
    --t-rfp:   #3263E9;  --t-rfp-w:   rgba(50, 99, 233, .055);
    --t-sec:   #0F7A63;  --t-sec-w:   rgba(15, 122, 99, .055);
    --t-cmp:   #B15410;  --t-cmp-w:   rgba(177, 84, 16, .055);
    --t-strat: #6A3CD1;  --t-strat-w: rgba(106, 60, 209, .055);
    --t-know:  #0B6C99;  --t-know-w:  rgba(11, 108, 153, .055);
    --t-ind:   #A61E5A;  --t-ind-w:   rgba(166, 30, 90, .055);
    /* Two more for the industry pages, where eight sections need to stay
       apart. Same restraint: markers, labels, hairlines and washes only. */
    --t-life:  #2E7D32;  --t-life-w:  rgba(46, 125, 50, .055);
    --t-mfg:   #475569;  --t-mfg-w:   rgba(71, 85, 105, .06);

    /* Motion — one curve, used everywhere */
    --ease: cubic-bezier(.16, 1, .3, 1);
    --dur:  .28s;

    /* Rhythm. Fluid, so there is no tablet breakpoint to maintain. */
    --pad:       clamp(28px, 5vw, 72px);
    --section-y: clamp(88px, 11vw, 140px);

    /* Controls — buttons and links share one height so they line up */
    --ctl-h:     52px;
    --ctl-pad-x: 22px;
    --ctl-fs:    16px;

    /* Structure */
    --stage-max:   1280px;
    --measure:     74ch;  /* body copy line length */
    --grid-max:    1180px;
    --radius:      2px;   /* near-square is the look. resist rounding it. */
  }
}

@layer brand.base {
  /* 3. Base --------------------------------------------------------------- */
  * { box-sizing: border-box; }

  html, body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: Geist, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  a {
    transition:
      background   var(--dur) var(--ease),
      color        var(--dur) var(--ease),
      border-color var(--dur) var(--ease),
      transform    var(--dur) var(--ease);
  }

  :focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: 3px;
  }

  img { max-width: 100%; }
}

@layer brand.base {
  /* 4. Utilities ----------------------------------------------------------- */

  /* Visible only to screen readers. */
  .sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* Skip link. Put it first in <body>, pointing at #main. Hidden until
     focused, so keyboard users can jump the nav. */
  .skip-link {
    position: absolute;
    left: var(--pad);
    top: -100px;
    z-index: 100;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 18px;
    background: var(--ink);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius);
    transition: top .18s var(--ease);
  }
  .skip-link:focus { top: 12px; }
}

@layer brand.layout {
  /* 5. Layout -------------------------------------------------------------- */

  /* The white card the whole page sits on, floating on --paper. */
  .stage {
    max-width: var(--stage-max);
    margin: 0 auto;
    background: var(--field);
    min-height: 100vh;
  }

  .splash  { position: relative; overflow: hidden; padding: 96px var(--pad) 80px; background: var(--field); }
  .hero    { padding: 96px var(--pad) 64px; }
  .stories { padding: 0 var(--pad) 110px; }

  /* Card grid, used by the story index. */
  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 18px;
    max-width: var(--grid-max);
  }

  /* Two-column story layout with a sticky rail (video theater pages). */
  .story-grid { display: block; }
  .part  { max-width: var(--measure); margin: 0 auto; }
  .part1 { grid-area: p1; }
  .part2 { grid-area: p2; }
}

@layer brand.components {
  /* 6. Header / nav --------------------------------------------------------
     The Brand 2.0 nav. Sticky, one row, logo left and links right.
     Deliberately not the legacy .site-nav mega-menu: this design is built on
     fewer choices, and the nav should say the same thing. */
  .site-top {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 36px;
    padding: 22px var(--pad) 18px;
    background: var(--paper);
    border-bottom: 1px solid var(--line-soft);
  }
  .site-top .lockup { width: 148px; height: auto; display: block; flex: none; }

  .site-top nav {
    display: flex;
    align-items: center;
    gap: 26px;
    margin-left: auto;
    font-size: 16px;
    font-weight: 500;
  }
  .site-top nav a { color: var(--ink); text-decoration: none; }
  .site-top nav a:hover { color: var(--signal); }

  .site-top .cta {
    display: inline-flex;
    align-items: center;
    height: var(--ctl-h);
    padding: 0 var(--ctl-pad-x);
    background: var(--ink);
    color: #fff;
    font-size: 15px;
    font-weight: 560;
    text-decoration: none;
    border-radius: var(--radius);
  }
  .site-top .cta:hover { transform: translateY(-1px); filter: brightness(1.06); }

  /* 6b. Site navigation ----------------------------------------------------
     The tribble.ai nav rebuilt in this design language. Markup comes from
     brand-nav.js; keep the two in step.

     Square corners, Geist, --ink and --signal, 52px controls. The mega-menu
     is a flat panel with a hairline border rather than a floating card with
     shadow, because nothing else in this design floats. */
  .bn {
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: center; gap: 28px;
    padding: 16px var(--pad);
    background: var(--paper);
    border-bottom: 1px solid var(--line-soft);
  }
  .bn.scrolled { background: rgba(244, 246, 250, .92); backdrop-filter: saturate(1.6) blur(10px); }

  .bn-logo { display: flex; align-items: center; flex: none; color: var(--ink); }
  .bn-lockup { width: 118px; height: 32px; display: block; }

  .bn-links { display: flex; align-items: center; gap: 22px; margin-left: auto; }

  /* Top-level items */
  .bn-link, .bn-trigger, .bn-login {
    font: inherit; font-size: 15px; font-weight: 550;
    color: var(--ink); text-decoration: none;
    background: none; border: 0; padding: 0; cursor: pointer;
    white-space: nowrap;
  }
  .bn-link:hover, .bn-trigger:hover, .bn-login:hover { color: var(--signal); }
  .bn-login { font-weight: 500; color: var(--ink2); }

  .bn-item { position: relative; }
  .bn-trigger::after {
    content: ''; display: inline-block; margin-left: 7px;
    width: 6px; height: 6px; vertical-align: 2px;
    border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform var(--dur) var(--ease);
  }
  .bn-item.open .bn-trigger { color: var(--signal); }
  .bn-item.open .bn-trigger::after { transform: rotate(-135deg) translateY(-2px); }

  /* The 24-hour pill is the one rounded thing, so it reads as a promo. */
  .bn-pill {
    display: inline-flex; align-items: center; height: 34px; padding: 0 14px;
    font-size: 13px; font-weight: 650; white-space: nowrap;
    color: var(--signal); text-decoration: none;
    border: 1px solid var(--signal); border-radius: 99px;
    background: var(--signal-wash);
  }
  .bn-pill:hover { background: var(--signal); color: #fff; }

  .bn-cta {
    display: inline-flex; align-items: center;
    height: var(--ctl-h); padding: 0 var(--ctl-pad-x);
    background: var(--ink); color: #fff;
    font-size: 15px; font-weight: 560;
    text-decoration: none; border-radius: var(--radius);
    white-space: nowrap;
  }
  .bn-cta:hover { transform: translateY(-1px); filter: brightness(1.06); }

  /* Dropdown panels */
  .bn-drop {
    position: absolute; top: calc(100% + 16px); left: 0;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    background: var(--field);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
  }
  .bn-item.open .bn-drop { opacity: 1; visibility: visible; transform: translateY(0); }
  .bn-sol  { width: min(760px, 88vw); }

  .bn-sol-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
  .bn-sol-heading {
    margin: 0 0 10px; font-size: 11px; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; color: var(--signal);
  }
  .bn-sol-col a { display: block; padding: 8px 10px; margin: 0 -10px; border-radius: var(--radius); text-decoration: none; }
  .bn-sol-col a:hover { background: var(--paper); }
  .bn-sol-col strong { display: block; font-size: 14.5px; font-weight: 650; color: var(--ink); }
  .bn-sol-col span { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 450; line-height: 1.4; color: var(--ink2); }

  /* Hamburger — three rules that become an X */
  .bn-burger {
    display: none; flex: none; margin-left: auto;
    width: 44px; height: 44px; padding: 10px;
    background: none; border: 0; cursor: pointer;
  }
  .bn-burger span {
    display: block; height: 2px; background: var(--ink);
    transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
  }
  .bn-burger span + span { margin-top: 5px; }
  .bn-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .bn-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .bn-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* 7. Hero ---------------------------------------------------------------- */
  .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 24px 56px;
    align-items: start;
  }
  .hero-grid.solo { grid-template-columns: 1fr; }

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

  /* A breadcrumb in the kicker (industry pages). Inherits the kicker's
     colour rather than the browser's link blue. */
  .kicker a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
  .kicker a:hover { color: var(--ink); }

  .hero-copy h1 {
    font-size: clamp(40px, 5.2vw, 62px);
    line-height: .98;
    letter-spacing: -.03em;
    font-weight: 700;
    margin: 0 0 20px;
    max-width: 22ch;
    text-wrap: balance;
  }

  /* Index hero runs bigger and shorter than a story hero. */
  .hero-h1 {
    font-size: clamp(44px, 6vw, 76px);
    line-height: .98;
    letter-spacing: -.03em;
    font-weight: 700;
    margin: 0 0 18px;
    max-width: 16ch;
    text-wrap: balance;
  }

  .dek {
    font-size: clamp(19px, 2.2vw, 24px);
    line-height: 1.45;
    font-weight: 500;
    max-width: 44ch;
    margin: 0 0 10px;
    text-wrap: pretty;
    color: var(--ink);
  }
  .attrib { font-size: 14px; font-weight: 650; color: var(--ink2); margin: 0 0 44px; }

  /* Customer logo above the headline.
     One class. `.cust-logo`, `.story-logo` and `.taskus-logo` are legacy
     aliases from when each page carried its own CSS — prefer .brand-logo. */
  .brand-logo,
  .hero-copy .cust-logo,
  .hero-copy .story-logo,
  .hero-copy .taskus-logo { margin: 0 0 20px; }
  .brand-logo img,
  .hero-copy .cust-logo img,
  .hero-copy .story-logo img,
  .hero-copy .taskus-logo img { height: 34px; width: auto; display: block; }

  .hero-media { margin: 6px 0 0; }
  .hero-media figcaption {
    margin: 14px 4px 0 auto;
    font-size: 13px;
    font-weight: 650;
    color: var(--ink2);
    max-width: 360px;
    text-align: right;
  }

  /* 8. Stat strip ----------------------------------------------------------
     Four proof points under the headline. Each sits under its own rule, so
     the row reads as a set rather than a sentence. */
  .statstrip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px 28px;
    border-top: 1px solid var(--line);
    padding-top: 28px;
    margin-top: 26px;
  }
  /* Three-up variant, when a story only has three proof points. */
  .statstrip.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .stat { border-top: 2px solid var(--ink); padding: 14px 0 0; }
  .stat strong {
    display: block;
    font-size: clamp(26px, 3vw, 38px);
    letter-spacing: -.03em;
    line-height: .95;
    font-weight: 700;
  }
  .stat span {
    display: block;
    margin-top: 10px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--ink2);
    max-width: 28ch;
  }

  /* 9. Story body ---------------------------------------------------------- */
  .story-body { padding: 20px var(--pad) 96px; }
  .story-body article { max-width: var(--measure); margin: 0 auto; }
  .story-body p {
    margin: 0 0 24px;
    font-size: 18.5px;
    line-height: 1.68;
    font-weight: 450;
    color: var(--ink);
    text-wrap: pretty;
  }
  .story-body p.lede  { font-size: 22px; line-height: 1.55; font-weight: 500; }
  .story-body p.turn  { font-size: 21px; font-weight: 550; }

  /* The closing line. Deliberately large - it is the last thing read. */
  .final {
    font-size: clamp(24px, 3vw, 34px);
    letter-spacing: -.02em;
    font-weight: 700;
    line-height: 1.2;
    margin: 52px 0 0;
  }

  /* 10. Pull quote --------------------------------------------------------- */
  .pullquote { margin: 44px 0; padding: 6px 0 0 26px; border-left: 3px solid var(--signal); }
  .pullquote blockquote { margin: 0; }
  .pullquote p.q {
    margin: 0 0 12px;
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.2;
    letter-spacing: -.02em;
    font-weight: 650;
    text-wrap: balance;
  }
  .pullquote cite {
    font-style: normal;
    font-size: 13px;
    font-weight: 650;
    letter-spacing: .02em;
    color: var(--ink2);
  }

  /* 11. Portrait frame ------------------------------------------------------ */
  .photo-frame {
    position: relative;
    aspect-ratio: 4 / 5;
    width: 100%;
    max-width: 360px;
    margin-left: auto;
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    background: var(--paper);
    overflow: visible;
  }
  .photo-frame img.headshot { width: 100%; height: 100%; object-fit: cover; display: block; }
  .photo-frame img.critter {
    position: absolute;
    right: -34px;
    bottom: -30px;
    width: 118px;
    height: 118px;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(0, 9, 26, .18));
  }
  /* Placeholder state, for a story without a portrait yet. */
  .photo-frame.ph {
    display: grid;
    place-items: center;
    border-style: dashed;
    background: linear-gradient(0deg, var(--signal-wash), var(--signal-wash)), var(--field);
  }
  .photo-frame.ph .ph-note {
    position: absolute;
    bottom: 16px; left: 0; right: 0;
    text-align: center;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink2);
  }

  /* 12. Cards --------------------------------------------------------------
     .card  — index grid
     .rel-card — the smaller "more stories" row at the foot of a story */
  .card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 30px 28px 26px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--field);
    text-decoration: none;
  }
  .card.live:hover { border-color: var(--ink); transform: translateY(-2px); }
  .card.ph { border-style: dashed; opacity: .78; }
  .card.ghost-more { justify-content: center; border-style: solid; background: var(--paper); opacity: .9; }

  .card .logo-slot { height: 40px; display: flex; align-items: center; margin-bottom: 14px; }
  .card .logo-slot img {
    max-height: 28px; width: auto; max-width: 62%;
    object-fit: contain; object-position: left center;
  }
  .card .t {
    margin: 0 0 8px;
    font-size: 19px; line-height: 1.3; letter-spacing: -.015em;
    font-weight: 650; color: var(--ink); text-wrap: balance;
  }
  .card .m { margin: 0 0 14px; font-size: 13px; font-weight: 500; line-height: 1.5; color: var(--ink2); }
  .card .go { margin-top: auto; font-size: 14px; font-weight: 650; color: var(--signal); }
  .card .chip {
    position: absolute; top: 16px; right: 16px;
    font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: #fff; background: var(--signal);
    border-radius: var(--radius); padding: 4px 8px;
  }

  .related { padding: 0 var(--pad) 110px; }
  .rel-wrap { max-width: var(--grid-max); margin: 0 auto; }
  .rel-wrap h2 { font-size: clamp(26px, 3vw, 36px); letter-spacing: -.03em; margin: 0 0 24px; }
  .rel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
  }
  .rel-card {
    display: flex; flex-direction: column; gap: 10px;
    padding: 24px 22px 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--field);
    text-decoration: none;
  }
  .rel-card:hover { border-color: var(--ink); transform: translateY(-2px); }
  .rel-card .logo-slot { height: 30px; display: flex; align-items: center; }
  .rel-card .logo-slot img {
    max-height: 22px; width: auto; max-width: 58%;
    object-fit: contain; object-position: left center;
  }
  .rel-card .t {
    margin: 0 0 8px;
    font-size: 15.5px; line-height: 1.35; letter-spacing: -.01em;
    font-weight: 650; color: var(--ink); text-wrap: balance;
  }
  .rel-card .go { margin-top: auto; font-size: 13px; font-weight: 650; color: var(--signal); }

  /* 12b. Product pair, picker and comparison table -------------------------
     Built for /pricing/. The comparison table is deliberately generic so the
     Go Live page and any future compare page can use it. */

  /* Two products, side by side, under a hero. */
  .prod-pair {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
    margin-top: 44px; max-width: var(--grid-max);
  }
  .prod {
    display: flex; flex-direction: column; gap: 10px;
    padding: 28px 26px 24px;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--field);
  }
  .prod-name { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
  .prod-line { margin: 0; font-size: 15px; line-height: 1.5; font-weight: 450; color: var(--ink2); }
  .prod-go { margin-top: auto; padding-top: 12px; font-size: 14px; font-weight: 650; color: var(--signal); text-decoration: none; }
  .prod-go:hover { text-decoration: underline; }

  /* "Which one is for me" — two lists, read rather than scanned. */
  .picker { padding: var(--section-y) var(--pad); border-top: 1px solid var(--line); }
  .picker h2 { margin: 0 0 32px; font-size: clamp(28px, 3.5vw, 42px); letter-spacing: -.03em; max-width: 20ch; text-wrap: balance; }
  .picker-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: var(--grid-max); }
  .pick { padding: 30px 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--field); }
  .pick-for {
    margin: 0 0 8px; font-size: 11px; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; color: var(--signal);
  }
  .pick h3 { margin: 0 0 18px; font-size: 22px; letter-spacing: -.02em; font-weight: 650; text-wrap: balance; }
  .pick ul { margin: 0; padding: 0; list-style: none; }
  .pick li {
    position: relative; padding: 0 0 12px 20px;
    font-size: 15px; line-height: 1.5; font-weight: 450; color: var(--ink2);
  }
  .pick li::before {
    content: ''; position: absolute; left: 0; top: 9px;
    width: 7px; height: 7px; background: var(--signal); border-radius: 1px;
  }
  .pick-who { margin: 14px 0 0; font-size: 13px; font-weight: 500; color: var(--ink2); }
  .pick-who strong { color: var(--ink); font-weight: 650; }
  .picker-note { margin: 22px 0 0; font-size: 15px; font-weight: 500; color: var(--ink2); max-width: 62ch; }

  /* Comparison table. Hairlines only, no zebra fill - the design has no
     shaded rows anywhere else and they read as noise at this width. */
  .cmp-wrap { padding: var(--section-y) var(--pad); border-top: 1px solid var(--line); }
  .cmp-wrap h2 { margin: 0 0 10px; font-size: clamp(28px, 3.5vw, 42px); letter-spacing: -.03em; max-width: 22ch; text-wrap: balance; }
  .cmp-sub { margin: 0 0 30px; font-size: 16px; font-weight: 500; line-height: 1.5; color: var(--ink2); max-width: 62ch; }
  .cmp-scroll { overflow-x: auto; max-width: var(--grid-max); }
  .cmp { width: 100%; border-collapse: collapse; min-width: 640px; }
  .cmp th, .cmp td {
    text-align: left; vertical-align: top;
    padding: 15px 18px 15px 0;
    border-bottom: 1px solid var(--line);
    font-size: 14.5px; line-height: 1.45; font-weight: 450; color: var(--ink2);
  }
  .cmp thead th {
    padding-bottom: 12px;
    border-bottom: 2px solid var(--ink);
    font-size: 12px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--ink);
  }
  .cmp tbody th { font-weight: 600; color: var(--ink); width: 34%; }
  .cmp td.is-us { color: var(--ink); font-weight: 500; }

  /* Included / not included, as a mark rather than the word repeated 13 times. */
  .cmp td.is-yes, .cmp td.is-no { font-size: 0; }
  .cmp td.is-yes::before,
  .cmp td.is-no::before { font-size: 17px; font-weight: 700; line-height: 1; }
  .cmp td.is-yes::before { content: '\2713'; color: var(--signal); }
  .cmp td.is-no::before  { content: '\2013'; color: var(--line); }

  /* Three-column variant: longer cells, so the row label gets less width. */
  .cmp.cmp-2 tbody th { width: 24%; }
  .cmp.cmp-2 td { width: 38%; }

  /* "See all" link, used under a grid or a rail. */
  .custs-all { margin: 4px 0 0; font-size: 14px; font-weight: 650; }
  .custs-all a { color: var(--signal); text-decoration: none; }
  .custs-all a:hover { text-decoration: underline; }

  .g2-rail { padding: var(--section-y) var(--pad); border-top: 1px solid var(--line); }
  .g2-rail .statstrip { margin-top: 20px; max-width: var(--grid-max); }

  /* 12c. Steps, trust strip, integrations ----------------------------------
     Built for the Go Live page. Generic enough for any "how it works" page. */

  .steps-wrap { padding: var(--section-y) var(--pad); border-top: 1px solid var(--line); }
  .steps-wrap h2 { margin: 0 0 10px; font-size: clamp(28px, 3.5vw, 42px); letter-spacing: -.03em; max-width: 22ch; text-wrap: balance; }

  .steps {
    list-style: none; margin: 30px 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px;
    max-width: var(--grid-max);
  }
  .steps.steps-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .step { display: flex; gap: 14px; align-items: flex-start; border-top: 2px solid var(--ink); padding: 16px 0 0; }
  .step-n {
    flex: none; width: 26px; height: 26px;
    display: grid; place-items: center;
    background: var(--signal); color: #fff;
    font-size: 13px; font-weight: 700; border-radius: var(--radius);
  }
  .step h3 { margin: 0 0 6px; font-size: 16px; font-weight: 650; letter-spacing: -.01em; }
  .step p { margin: 0; font-size: 14px; line-height: 1.5; font-weight: 450; color: var(--ink2); }

  /* A stat that links to the story it came from. Keeps proof attributable. */
  .stat-link { text-decoration: none; display: block; }
  .stat-link:hover { border-top-color: var(--signal); }
  .stat-link span em {
    display: block; margin-top: 6px; font-style: normal;
    font-size: 12px; font-weight: 650; color: var(--signal);
  }

  .trust {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
    padding: var(--section-y) var(--pad);
    border-top: 1px solid var(--line);
    background: var(--paper);
  }
  .trust-item h3 { margin: 0 0 8px; font-size: 17px; font-weight: 650; letter-spacing: -.01em; }
  .trust-item p { margin: 0; font-size: 14.5px; line-height: 1.55; font-weight: 450; color: var(--ink2); max-width: 40ch; }

  .integ { padding: var(--section-y) var(--pad); border-top: 1px solid var(--line); }
  .integ h2 { margin: 0 0 10px; font-size: clamp(28px, 3.5vw, 42px); letter-spacing: -.03em; max-width: 22ch; text-wrap: balance; }
  .integ-list {
    list-style: none; margin: 26px 0 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 10px; max-width: var(--grid-max);
  }
  .integ-list li {
    padding: 10px 16px;
    border: 1px solid var(--line); border-radius: var(--radius);
    font-size: 14px; font-weight: 550; color: var(--ink2);
    background: var(--field);
  }

  .hero-cta { margin: 32px 0 0; }
  .hero-cta a {
    display: inline-flex; align-items: center;
    height: var(--ctl-h); padding: 0 var(--ctl-pad-x);
    background: var(--ink); color: #fff;
    font-size: 15px; font-weight: 560;
    text-decoration: none; border-radius: var(--radius);
  }
  .hero-cta a:hover { transform: translateY(-1px); filter: brightness(1.06); }

  /* 12d. Quote cards -------------------------------------------------------
     Customer quotes that carry their source. Every one links to the story it
     came from, so a claim on a landing page is always one click from its
     evidence. */
  .quotes-wrap { padding: var(--section-y) var(--pad); border-top: 1px solid var(--line); }
  .quotes-wrap h2 { margin: 0 0 30px; font-size: clamp(28px, 3.5vw, 42px); letter-spacing: -.03em; max-width: 20ch; text-wrap: balance; }
  .quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; max-width: var(--grid-max); }
  .quote {
    display: flex; flex-direction: column; margin: 0;
    padding: 28px 26px 22px;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--field);
  }
  .quote blockquote { margin: 0 0 20px; }
  .quote blockquote p {
    margin: 0; font-size: 17px; line-height: 1.45;
    font-weight: 550; letter-spacing: -.01em; text-wrap: pretty;
  }
  .quote figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; }
  .quote figcaption img { height: 20px; width: auto; max-width: 84px; object-fit: contain; flex: none; }
  .quote figcaption span { font-size: 12.5px; line-height: 1.35; color: var(--ink2); font-weight: 500; }
  .quote figcaption strong { display: block; color: var(--ink); font-weight: 650; }
  .quote-go { margin-top: 16px; font-size: 13px; font-weight: 650; color: var(--signal); text-decoration: none; }
  .quote-go:hover { text-decoration: underline; }

  /* 12e. Post index ---------------------------------------------------------
     The blog index. 240-odd posts, so the unit of design is a row, not a
     card: a title you can scan and a meta line under it. No thumbnails —
     they cost megabytes and say nothing the title does not.

     Colour does the work thumbnails used to: each of the six topics owns a
     hue (see the topic palette in tokens) and carries it through its marker,
     its label, its chip and its hover wash. That is what keeps a long list
     from reading as a wall. Filtering is client-side over markup that is
     already complete, so the page works with JavaScript off. */

  /* Every element that belongs to a topic sets --topic and --topic-w once;
     everything below then just reads those two. */
  [data-g="rfp"]   { --topic: var(--t-rfp);   --topic-w: var(--t-rfp-w); }
  [data-g="sec"]   { --topic: var(--t-sec);   --topic-w: var(--t-sec-w); }
  [data-g="cmp"]   { --topic: var(--t-cmp);   --topic-w: var(--t-cmp-w); }
  [data-g="strat"] { --topic: var(--t-strat); --topic-w: var(--t-strat-w); }
  [data-g="know"]  { --topic: var(--t-know);  --topic-w: var(--t-know-w); }
  [data-g="ind"]   { --topic: var(--t-ind);   --topic-w: var(--t-ind-w); }
  [data-g="all"]   { --topic: var(--ink);     --topic-w: var(--signal-wash); }

  /* Start here: the five pillar pages, each wearing its topic colour as a
     rule across the top. */
  .hubs { padding: 0 var(--pad) 72px; }
  .hubs-wrap { max-width: var(--grid-max); margin: 0 auto; }

  .hub {
    display: flex;
    flex-direction: column;
    padding: 22px 22px 20px;
    background: var(--field);
    border: 1px solid var(--line);
    border-top: 3px solid var(--topic);
    border-radius: var(--radius);
    text-decoration: none;
    color: inherit;
    transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
  }
  .hub:hover { transform: translateY(-2px); background: var(--topic-w); border-color: var(--line); }
  .hub .t {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 650;
    line-height: 1.3;
    letter-spacing: -.015em;
    color: var(--ink);
  }
  .hub .m { margin: 0 0 16px; font-size: 13.5px; font-weight: 500; line-height: 1.5; color: var(--ink2); }
  .hub .go { margin-top: auto; font-size: 13.5px; font-weight: 650; color: var(--topic); }

  .postindex { padding: 0 var(--pad) 110px; }
  .postindex-wrap { max-width: var(--grid-max); margin: 0 auto; }

  .postindex > .postindex-wrap > h2 {
    font-size: clamp(24px, 2.6vw, 32px);
    letter-spacing: -.03em;
    margin: 0 0 20px;
  }

  /* Controls: search box left, topic chips right, one hairline under. */
  .pcontrols {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 10px;
    padding: 0 0 20px;
    border-bottom: 1px solid var(--line);
  }

  .psearch {
    flex: 1 1 240px;
    min-width: 0;
    height: var(--ctl-h);
    padding: 0 16px;
    font: inherit;
    font-size: 15px;
    color: var(--ink);
    background: var(--field);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  }
  .psearch::placeholder { color: var(--ink2); opacity: .6; }
  .psearch:focus {
    outline: none;
    border-color: var(--signal);
    box-shadow: 0 0 0 3px var(--signal-wash);
  }

  .chips { display: flex; flex-wrap: wrap; gap: 8px; }

  .chip-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font: inherit;
    font-size: 13.5px;
    font-weight: 550;
    line-height: 1;
    color: var(--ink2);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 10px 15px;
    cursor: pointer;
    transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
  }
  /* The dot is the same marker that appears on every row of that topic, so
     the chip and the list are visibly the same system. */
  .chip-btn::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--topic);
    flex: none;
  }
  .chip-btn[data-g="all"]::before { display: none; }
  .chip-btn:hover { color: var(--ink); border-color: var(--topic); background: var(--topic-w); }
  .chip-btn[aria-pressed="true"] {
    color: #fff;
    background: var(--topic);
    border-color: var(--topic);
  }
  .chip-btn[aria-pressed="true"]::before { background: rgba(255, 255, 255, .85); }

  .pcount {
    margin: 18px 0 2px;
    font-size: 13px;
    font-weight: 550;
    color: var(--ink2);
  }

  /* The list itself. */
  .plist { list-style: none; margin: 0; padding: 0; }
  .plist li { border-bottom: 1px solid var(--line-soft); }
  .plist li[hidden] { display: none; }

  .prow {
    display: grid;
    grid-template-columns: 7px 1fr;
    align-items: start;
    gap: 0 16px;
    padding: 22px 18px 22px 14px;
    margin: 0 -18px 0 -14px;
    text-decoration: none;
    color: inherit;
    border-radius: var(--radius);
    transition: background var(--dur) var(--ease);
  }
  /* The topic marker. A dot at rest; on hover it stretches into a bar down
     the side of the row, which is the only motion in the list. */
  .prow::before {
    content: "";
    grid-row: 1 / span 2;
    width: 7px;
    height: 7px;
    margin-top: 9px;
    border-radius: 999px;
    background: var(--topic);
    transition: height var(--dur) var(--ease), margin-top var(--dur) var(--ease);
  }
  .prow:hover { background: var(--topic-w); }
  .prow:hover::before { height: 100%; margin-top: 0; }
  .prow:hover .prow-t { color: var(--topic); }

  .prow-t {
    grid-column: 2;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -.015em;
    color: var(--ink);
    max-width: var(--measure);
    transition: color var(--dur) var(--ease);
  }
  .prow-m {
    grid-column: 2;
    margin-top: 7px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink2);
  }
  .prow-m b { font-weight: 650; color: var(--topic); }

  /* Reveals the next 30 rows. The list is capped so the page opens at a
     readable length instead of 25,000 pixels of scroll. */
  .pmore {
    display: block;
    width: 100%;
    margin: 28px 0 0;
    padding: 16px;
    font: inherit;
    font-size: 14.5px;
    font-weight: 650;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
  }
  .pmore:hover { color: var(--signal); border-color: var(--signal); background: var(--signal-wash); }

  /* Shown when a filter or query matches nothing. */
  .pempty {
    margin: 40px 0 0;
    font-size: 16px;
    font-weight: 500;
    color: var(--ink2);
  }

  /* 12f. Industry pages ------------------------------------------------------
     Built for /industries/ and the pages under it. The argument on an
     industry page is "three surfaces carry the cost", so those three are
     always visible — never behind tabs. Each industry carries one hue from
     the topic palette, set once as --topic on the page wrapper. */

  [data-ind="legal"]  { --topic: var(--t-strat); --topic-w: var(--t-strat-w); }
  [data-ind="fin"]    { --topic: var(--t-rfp);   --topic-w: var(--t-rfp-w); }
  [data-ind="health"] { --topic: var(--t-sec);   --topic-w: var(--t-sec-w); }
  [data-ind="tech"]   { --topic: var(--t-know);  --topic-w: var(--t-know-w); }
  [data-ind="log"]    { --topic: var(--t-cmp);   --topic-w: var(--t-cmp-w); }
  [data-ind="life"]   { --topic: var(--t-life);  --topic-w: var(--t-life-w); }
  [data-ind="mfg"]    { --topic: var(--t-mfg);   --topic-w: var(--t-mfg-w); }
  [data-ind="cons"]   { --topic: var(--t-ind);   --topic-w: var(--t-ind-w); }

  /* The three surfaces. A wide number, a heading, and the detail under it. */
  .surfaces { padding: var(--section-y) var(--pad); border-top: 1px solid var(--line); }
  .surfaces > h2 {
    margin: 0 0 10px;
    font-size: clamp(28px, 3.5vw, 42px);
    letter-spacing: -.03em;
    max-width: 22ch;
    text-wrap: balance;
  }
  .surfaces > .dek { margin: 0 0 40px; }

  .surface-list {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px;
    max-width: var(--grid-max);
  }
  .surface { border-top: 2px solid var(--topic, var(--ink)); padding: 18px 0 0; }
  .surface-n {
    display: block; margin: 0 0 10px;
    font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--topic, var(--signal));
  }
  .surface h3 {
    margin: 0 0 10px;
    font-size: 19px; font-weight: 650; line-height: 1.3; letter-spacing: -.015em;
  }
  .surface p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.6; font-weight: 450; color: var(--ink2); }
  .surface p:last-child { margin-bottom: 0; }
  .surface p.cost { font-weight: 600; color: var(--ink); }

  /* A statstrip carrying labels rather than numbers — "Time to answer"
     instead of "93%". Same grid, smaller type, because a sentence set at
     display size reads as shouting. */
  .statstrip.labels .stat strong { font-size: clamp(17px, 1.7vw, 21px); letter-spacing: -.015em; line-height: 1.25; }
  .statstrip.labels .stat span { margin-top: 8px; }

  /* The crossbar: which documents this industry actually files, each one
     linking into its tab on the Respond PDP. */
  .docmap { padding: var(--section-y) var(--pad); border-top: 1px solid var(--line); background: var(--paper); }
  .docmap h2 { margin: 0 0 10px; font-size: clamp(28px, 3.5vw, 42px); letter-spacing: -.03em; max-width: 22ch; text-wrap: balance; }
  .docmap > .dek { margin: 0 0 30px; }

  .doclist { list-style: none; margin: 0; padding: 0; max-width: var(--grid-max); border-top: 1px solid var(--line); }
  .doclist li { border-bottom: 1px solid var(--line); }
  .doc {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
    align-items: baseline; gap: 10px 24px;
    padding: 18px 10px 18px 0; margin-right: -10px;
    text-decoration: none; color: inherit;
    transition: background var(--dur) var(--ease);
  }
  .doc:hover { background: var(--field); }
  .doc strong { font-size: 16.5px; font-weight: 650; letter-spacing: -.01em; color: var(--ink); }
  .doc span { font-size: 14px; font-weight: 450; line-height: 1.5; color: var(--ink2); }
  .doc em {
    font-style: normal; white-space: nowrap;
    font-size: 13px; font-weight: 650; color: var(--topic, var(--signal));
  }

  /* Proof, with the gap stated rather than papered over. */
  .proof { padding: var(--section-y) var(--pad); border-top: 1px solid var(--line); }
  .proof h2 { margin: 0 0 10px; font-size: clamp(28px, 3.5vw, 42px); letter-spacing: -.03em; max-width: 22ch; text-wrap: balance; }
  .gap-note {
    max-width: var(--measure);
    margin: 0 0 34px;
    padding: 16px 0 0;
    border-top: 2px solid var(--topic, var(--ink));
    font-size: 16px; line-height: 1.6; font-weight: 500; color: var(--ink2);
  }
  .gap-note b { font-weight: 650; color: var(--ink); }

  /* Industry cards on the hub. */
  .ind-card {
    display: flex; flex-direction: column;
    padding: 22px 22px 20px;
    background: var(--field);
    border: 1px solid var(--line);
    border-top: 3px solid var(--topic, var(--ink));
    border-radius: var(--radius);
    text-decoration: none; color: inherit;
    transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
  }
  .ind-card:hover { transform: translateY(-2px); background: var(--topic-w); }
  .ind-card .t { margin: 0 0 8px; font-size: 18px; font-weight: 650; letter-spacing: -.015em; color: var(--ink); }
  .ind-card .m { margin: 0 0 16px; font-size: 13.5px; font-weight: 500; line-height: 1.55; color: var(--ink2); }
  .ind-card .go { margin-top: auto; font-size: 13.5px; font-weight: 650; color: var(--topic, var(--signal)); }

  /* 12g. Events -------------------------------------------------------------
     The roundtable series. A session is a row: when, what, who ran it. The
     upcoming list is usually short or empty, so the empty state is a real
     state and not an afterthought. */

  .events { padding: var(--section-y) var(--pad); border-top: 1px solid var(--line); }
  .events h2 { margin: 0 0 10px; font-size: clamp(28px, 3.5vw, 42px); letter-spacing: -.03em; max-width: 22ch; text-wrap: balance; }
  .events > .dek { margin: 0 0 30px; }
  .events.alt { background: var(--paper); }

  .event-list { list-style: none; margin: 0; padding: 0; max-width: var(--grid-max); border-top: 1px solid var(--line); }
  .event-list li { border-bottom: 1px solid var(--line); }

  .event {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) auto;
    align-items: start;
    gap: 6px 24px;
    padding: 22px 0;
  }
  .event-when {
    grid-row: 1 / span 2;
    font-size: 13px; font-weight: 700; line-height: 1.35;
    letter-spacing: .04em; text-transform: uppercase;
    color: var(--signal);
  }
  .event-when b { display: block; font-size: 26px; font-weight: 700; letter-spacing: -.02em; text-transform: none; color: var(--ink); }
  .event-t { grid-column: 2; margin: 0; font-size: 18px; font-weight: 650; line-height: 1.35; letter-spacing: -.015em; color: var(--ink); }
  .event-m { grid-column: 2; margin: 6px 0 0; font-size: 13.5px; font-weight: 500; line-height: 1.55; color: var(--ink2); }
  .event-tag {
    grid-column: 3; grid-row: 1;
    font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    padding: 5px 9px; border-radius: 999px; white-space: nowrap;
    color: var(--ink2); background: var(--paper); border: 1px solid var(--line);
  }
  .event-tag.open { color: #fff; background: var(--signal); border-color: var(--signal); }

  .event-empty {
    max-width: var(--measure);
    margin: 0;
    padding: 22px 0 0;
    border-top: 2px solid var(--ink);
    font-size: 16px; line-height: 1.6; font-weight: 500; color: var(--ink2);
  }
  .event-empty b { font-weight: 650; color: var(--ink); }

  /* Seat request. Deliberately short — this is a request, not an application. */
  .seat { padding: var(--section-y) var(--pad); border-top: 1px solid var(--line); }
  .seat h2 { margin: 0 0 10px; font-size: clamp(28px, 3.5vw, 42px); letter-spacing: -.03em; max-width: 20ch; text-wrap: balance; }
  .seat > .dek { margin: 0 0 30px; }

  .seat-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 640px; }
  .seat-field { display: flex; flex-direction: column; gap: 6px; }
  .seat-field.wide { grid-column: 1 / -1; }
  .seat-field label { font-size: 13px; font-weight: 650; color: var(--ink); }
  .seat-field input, .seat-field textarea {
    font: inherit; font-size: 15px; color: var(--ink);
    background: var(--field); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 0 14px; height: var(--ctl-h);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  }
  .seat-field textarea { height: auto; min-height: 92px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
  .seat-field input:focus, .seat-field textarea:focus { outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px var(--signal-wash); }

  .seat-submit {
    grid-column: 1 / -1; justify-self: start;
    appearance: none; font: inherit; font-size: var(--ctl-fs); font-weight: 650;
    height: var(--ctl-h); padding: 0 var(--ctl-pad-x);
    color: #fff; background: var(--ink); border: 0; border-radius: var(--radius); cursor: pointer;
    transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease);
  }
  .seat-submit:hover:not([disabled]) { transform: translateY(-1px); filter: brightness(1.15); }
  .seat-submit[disabled] { opacity: .55; cursor: default; }

  .seat-note { grid-column: 1 / -1; margin: 2px 0 0; font-size: 13px; line-height: 1.55; color: var(--ink2); }
  .seat-msg { grid-column: 1 / -1; margin: 6px 0 0; font-size: 15px; font-weight: 600; }
  .seat-msg.ok { color: var(--t-sec); }
  .seat-msg.err { color: var(--t-ind); }

  /* 13. FAQ ---------------------------------------------------------------- */
  .faq { padding: 0 var(--pad) 96px; }
  .faq-wrap { max-width: var(--measure); margin: 0 auto; border-top: 1px solid var(--line); }
  .faq h2 { font-size: clamp(28px, 3.5vw, 40px); letter-spacing: -.03em; margin: 0 0 8px; }
  .faq .faq-sub { margin: 0 0 26px; font-size: 16px; font-weight: 500; color: var(--ink2); }
  .faq details { border-bottom: 1px solid var(--line); }
  .faq summary {
    list-style: none; cursor: pointer;
    display: flex; justify-content: space-between; align-items: center; gap: 18px;
    padding: 20px 0;
    font-size: 17px; font-weight: 650; color: var(--ink);
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after {
    content: '+';
    font-size: 24px; font-weight: 650; color: var(--signal); line-height: 1;
    transition: transform .2s var(--ease);
  }
  .faq details[open] summary::after { content: '\2013'; }
  .faq .a {
    padding: 0 0 22px;
    font-size: 15.5px; line-height: 1.62;
    color: var(--ink2); max-width: 66ch; font-weight: 450;
  }

  /* 14. Video theater ------------------------------------------------------- */
  .watch-row { margin: -8px 0 24px; }
  .watch-chip {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 7px 15px 7px 8px;
    background: var(--field);
    border: 1px solid rgba(15, 23, 42, .18);
    border-radius: 99px;
    font: inherit; font-size: 13.5px; font-weight: 520;
    color: var(--ink); cursor: pointer;
  }
  .watch-chip:hover { border-color: var(--signal); color: var(--signal); }
  .watch-chip b { font-weight: 680; }
  .watch-chip .play {
    width: 22px; height: 22px; border-radius: 99px;
    background: var(--signal);
    display: inline-flex; align-items: center; justify-content: center; flex: none;
  }
  .watch-chip .play svg { width: 9px; height: 9px; fill: #fff; }

  .theater { scroll-margin-top: 110px; margin: 40px auto; max-width: 640px; }
  .theater .kicker { margin-bottom: 4px; }
  .theater h2 { font-size: 21px; letter-spacing: -.02em; margin: 0 0 8px; }
  .th-sub { margin: 0 0 16px; font-size: 13.5px; font-weight: 500; line-height: 1.55; color: var(--ink2); }
  .th-player video {
    width: 100%; aspect-ratio: 16 / 9;
    background: #000; border-radius: 10px; display: block;
    border: 1px solid rgba(15, 23, 42, .14);
  }
  .th-title { margin: 13px 0 2px; font-size: 14.5px; font-weight: 660; line-height: 1.4; }
  .th-who { margin: 0 0 14px; font-size: 12.5px; font-weight: 550; color: var(--ink2); }
  .th-chapters {
    list-style: none; margin: 0; padding: 0;
    border-top: 1px solid rgba(15, 23, 42, .13);
    max-height: 320px; overflow: auto;
  }
  .th-chapters li { border-bottom: 1px solid rgba(15, 23, 42, .13); }
  .th-ch {
    display: flex; gap: 11px; width: 100%;
    text-align: left; padding: 10px 9px;
    background: none; border: 0; font: inherit; cursor: pointer;
    align-items: baseline;
  }
  .th-ch .n { font-size: 11px; font-weight: 720; color: var(--ink2); flex: none; letter-spacing: .06em; }
  .th-ch .t { font-size: 13px; font-weight: 540; line-height: 1.4; color: var(--ink); }
  .th-ch:hover .t { color: var(--signal); }
  .th-ch.is-active { background: rgba(50, 99, 233, .08); }
  .th-ch.is-active .n { color: var(--signal); }

  /* 15. Roundtable ---------------------------------------------------------
     Event promo. If you use this, put a real date on it and take it down
     afterwards — a stale date on a customer story reads badly. */
  .roundtable {
    margin: 8px var(--pad) 24px;
    padding: 40px 48px;
    border: 2px solid var(--signal);
    border-radius: var(--radius);
    display: flex; align-items: center; gap: 32px; flex-wrap: wrap;
    background: linear-gradient(0deg, var(--signal-wash), var(--signal-wash)), var(--field);
  }
  .roundtable .rt-copy { flex: 1 1 340px; }
  .roundtable .badge {
    display: inline-block;
    font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: #fff; background: var(--signal);
    padding: 6px 10px; border-radius: var(--radius); margin-bottom: 12px;
  }
  .roundtable h3 { margin: 0 0 8px; font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -.02em; }
  .roundtable p { margin: 0; font-size: 16px; color: var(--ink2); font-weight: 500; max-width: 56ch; }
  .roundtable a.btn {
    display: inline-flex; align-items: center;
    min-height: var(--ctl-h); padding: 0 var(--ctl-pad-x);
    background: var(--signal); color: #fff;
    font-weight: 600; text-decoration: none; border-radius: var(--radius);
  }
  .roundtable a.btn:hover { transform: translateY(-1px); filter: brightness(1.06); }

  /* 16. Closing CTA --------------------------------------------------------- */
  .close {
    margin: 8px var(--pad) 80px;
    padding: 72px 56px;
    background: var(--ink);
    color: #fff;
    border-radius: var(--radius);
  }
  .close h2 { margin: 0 0 14px; font-size: clamp(28px, 4vw, 44px); letter-spacing: -.03em; max-width: 16ch; }
  .close p { margin: 0 0 28px; font-size: 18px; line-height: 1.5; max-width: 48ch; font-weight: 500; color: #fff; }
  .close a {
    display: inline-flex; align-items: center;
    min-height: var(--ctl-h); padding: 0 var(--ctl-pad-x);
    background: #fff; color: var(--ink);
    font-weight: 560; text-decoration: none; border-radius: var(--radius);
  }
  .close a:hover { transform: translateY(-1px); }

  /* 17. Footer -------------------------------------------------------------- */
  .footer {
    display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
    padding: 34px var(--pad) 44px;
    border-top: 1px solid var(--line);
  }
  .footer .lockup { width: 96px; height: auto; }

  /* Text fallback for the lockup. */
  .wordmark,
  .taskus-wordmark { font-size: 22px; font-weight: 800; letter-spacing: -.03em; color: var(--ink); }
  .footer p { margin: 0; font-size: 13px; font-weight: 500; color: var(--ink2); }
  .footer nav { margin-left: auto; display: flex; gap: 20px; font-size: 14px; font-weight: 550; }
  .footer nav a { color: var(--ink); text-decoration: none; }
  .footer nav a:hover { color: var(--signal); }
}

@layer brand.responsive {
  /* 18. Responsive ---------------------------------------------------------
     Two breakpoints only. Everything between them is handled by clamp(). */

  @media (max-width: 900px) {
    /* Nav collapses into the hamburger sheet. */
    .bn-burger { display: block; }
    .bn-links {
      display: none;
      position: absolute; top: 100%; left: 0; right: 0;
      flex-direction: column; align-items: stretch; gap: 2px;
      margin: 0; padding: 14px var(--pad) 22px;
      background: var(--paper);
      border-bottom: 1px solid var(--line);
      max-height: calc(100vh - 72px); overflow-y: auto;
    }
    .bn-links.open { display: flex; }
    .bn-link, .bn-trigger, .bn-login { padding: 13px 0; font-size: 17px; text-align: left; width: 100%; }
    .bn-item { position: static; }
    .bn-drop {
      position: static; width: auto; padding: 0 0 8px 12px;
      border: 0; border-left: 2px solid var(--line);
      margin: 0 0 8px;
      transform: none; transition: none;
    }
    .bn-sol-grid { grid-template-columns: 1fr; gap: 14px; }
    .bn-pill, .bn-cta { align-self: flex-start; margin-top: 8px; }
  }

  @media (max-width: 800px) {
    .site-top nav { display: none; }
    .footer nav { margin-left: 0; }

    .hero-grid { grid-template-columns: 1fr; }
    .statstrip,
    .statstrip.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .prod-pair, .picker-grid { grid-template-columns: 1fr; }
    .steps, .steps.steps-3 { grid-template-columns: 1fr; }
    .trust { grid-template-columns: 1fr; }
    .quotes { grid-template-columns: 1fr; }

    .photo-frame { margin-left: 0; max-width: 300px; }
    .photo-frame img.critter { right: -12px; bottom: -22px; width: 92px; height: 92px; }
    .hero-media figcaption { margin-left: 0; text-align: left; }

    .close { padding: 48px 28px; }
    .roundtable { padding: 28px 24px; }
  }

  @media (min-width: 1120px) {
    /* Story pages with a video rail: copy left, sticky player right. */
    .story-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 336px;
      grid-template-areas: "p1 rail" "p2 rail";
      gap: 0 48px;
      align-items: start;
    }
    .story-grid .theater {
      grid-area: rail;
      position: sticky;
      top: 100px;
      margin: 0;
      max-width: none;
    }
  }
  @media (max-width: 900px) {
    .surface-list { grid-template-columns: 1fr; gap: 22px; }
    .event { grid-template-columns: 72px minmax(0, 1fr); gap: 4px 16px; }
    .event-tag { grid-column: 2; grid-row: auto; justify-self: start; margin-top: 8px; }
    .seat-form { grid-template-columns: 1fr; }
    .doc { grid-template-columns: 1fr; gap: 6px; padding: 16px 0; }
    .doc em { margin-top: 2px; }
  }
  @media (max-width: 800px) {
    .psearch { flex-basis: 100%; }
    .prow-t { font-size: 17px; }
    .prow   { padding: 18px 14px 18px 12px; margin: 0 -14px 0 -12px; gap: 0 12px; }
    .chips  { gap: 7px; }
    .chip-btn { padding: 9px 13px; font-size: 13px; }
  }
}

@layer brand.overrides {
  /* 19. Motion, print, forced colours -------------------------------------- */

  /* Every link in this design animates and several lift on hover. Honour the
     system setting rather than moving things at people who asked us not to. */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
      scroll-behavior: auto !important;
    }
    .card.live:hover,
    .rel-card:hover,
    .close a:hover,
    .site-top .cta:hover,
    .roundtable a.btn:hover { transform: none; }
  }

  @media print {
    html, body { background: #fff; color: #000; }
    .stage { max-width: none; }
    .site-top,
    .roundtable,
    .related,
    .close,
    .watch-row,
    .theater { display: none; }
    .story-body article { max-width: none; }
    .story-body p { font-size: 11pt; line-height: 1.5; }
    .faq details { break-inside: avoid; }
    .faq details[open] summary::after { content: ''; }
    .pullquote { border-left-color: #000; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
  }

  /* Windows high-contrast: keep borders that are otherwise colour-only. */
  @media (forced-colors: active) {
    .card,
    .rel-card,
    .photo-frame,
    .roundtable { border: 1px solid CanvasText; }
    .stat { border-top: 2px solid CanvasText; }
  }
}