/* ============================================================================
   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               */

    /* 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;
  }

  .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); }

  /* 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; }

    .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;
    }
  }
}

@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; }
  }
}