:root {
    /* Light brand palette */
    --lava: #f5410f;            /* Vermilion — primary accent (new brand) */
    --lava-dark: #d6350a;       /* hover */
    --bg: #FFEDE5;             /* warm cream base (new brand) */
    --white: #ffffff;
    --ink: #171717;
    --body: #2d2d2d;
    --muted: #6b6b6b;
    --muted-2: #9a9a9a;
    --border: #e7ddcc;         /* warm hairline */
    --dark: #1e1e1e;           /* Grey */
    --dark-2: #262626;
    --dark-3: #2f2f2f;
    --light-grey: #4a4a4a;     /* Light Grey */
    --black: #000000;
    --blue: #f5410f;           /* links use the vermilion accent */
    --mint: #f5410f;           /* accent alias -> vermilion */
    /* Offwhite palette */
    --off-orange: #f8b491;     /* peach section */
    --off-green: #dbdfd9;
    --off-yellow: #eceae1;
    --off-blue: #d8dce2;
    --pill-gray: #efe7da;
    --pass: #189a5b;           /* status green — "passing", not a brand accent */
    --serif: "Hedvig Letters Serif", "Hedvig Letters Serif Fallback", Georgia, "Times New Roman", serif;
    --sans: "Rethink Sans", "Rethink Sans Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  }
  * { box-sizing: border-box; }
  [hidden] { display: none !important; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    font-family: var(--sans);
    background: #fff;
    color: var(--ink);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  a { color: inherit; text-decoration: none; }
  img { max-width: 100%; width: auto; height: auto; display: block; }
  .wrap { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
  section { position: relative; }

  h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; }

  /* Buttons */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border-radius: 4px;
    font-weight: 500;
    font-size: 1rem;
    font-family: var(--sans);
    cursor: pointer;
    border: none;
    white-space: nowrap;
  }
  /* Large standalone pill CTA: "Book a demo", "See the Light!" */
  .btn-black {
    background: var(--black);
    color: #fff;
    padding: 1rem 5.5rem;
  }
  .btn-black:hover { background: #222; }
  /* Vermilion pill, used inline alongside a headline */
  .btn-lava { background: var(--lava); color: #fff; padding: 0.9rem 2.15rem; }
  .btn-lava:hover { background: var(--lava-dark); }
  /* Quiet secondary CTA: sits beside a more important action (e.g. next to
     the header's own "Book a demo"), so it reads as the lesser option. */
  .btn-quiet {
    background: #ececee;
    color: #55534f;
    padding: 0.6rem 1.35rem;
    font-size: 0.85rem;
  }
  .btn-quiet:hover { background: #e0dfdb; }
  /* Compact pill used inside the nav */
  .btn-nav {
    background: var(--mint);
    color: #fff;
    padding: 0.5rem 0.95rem;
    font-size: 0.875rem;
  }
  .btn-nav:hover { background: var(--lava-dark); }
  /* Secondary rounded-rect white button: "Read more", "Download for iOS/Android" */
  .btn-white {
    background: #fff;
    color: var(--black);
    border-radius: 4px;
    padding: 0.95rem 1.6rem;
  }
  .btn-white:hover { background: #f2f2f2; }
  /* Blue pill button: "Explore platform" */
  .btn-blue {
    background: var(--black);
    color: #fff;
    padding: 0.5rem 1.1rem;
  }
  .btn-blue:hover { background: #222; }
  .link-arrow { color: var(--blue); font-weight: 500; }
  .link-arrow:hover { text-decoration: underline; }

  /* Announcement pill (inline, used inside hero) */
  .pill-tag {
    display: inline-block;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.5rem 1.1rem;
    font-size: 0.9375rem;
    font-weight: 400;
    color: #000;
    background: #fff;
    margin-bottom: 1.75rem;
  }
  .pill-tag:hover { background: #fafafa; }

  /* Announcement banner */
  .announce-bar {
    display: block;
    position: relative;
    z-index: 101;
    overflow: hidden;
    padding: 0.77rem 1.5rem;
    background: #000;
    color: #fff;
    font-size: 1.19rem;
    line-height: 1.3;
    text-decoration: none;
  }
  /* Hairline along the top edge cycling between the two brands' colours: Light vermilion and KPMG blue */
  .announce-bar::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--lava) 0%, #00338d 50%, var(--lava) 100%);
    background-size: 200% 100%;
    animation: announce-hairline 6s linear infinite;
  }
  /* Sheen that sweeps across the bar every few seconds */
  .announce-bar::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 35%;
    background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.14) 50%, rgba(255,255,255,0) 100%);
    transform: translateX(-100%);
    animation: announce-sheen 7s ease-in-out infinite;
    pointer-events: none;
  }
  .announce-inner {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    white-space: nowrap;
  }
  .announce-main {
    grid-column: 2;
    display: flex;
    align-items: center;
    gap: 1.25rem;
  }
  .announce-logo { flex: none; display: block; height: 1.75rem; width: auto; }
  .announce-copy { color: rgba(255,255,255,0.72); }
  .announce-copy::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 0.9em;
    margin-right: 1.25rem;
    background: rgba(255,255,255,0.3);
    vertical-align: -0.1em;
  }
  .announce-cta { grid-column: 3; justify-self: end; }
  .announce-arrow { display: inline-block; transition: transform 0.2s ease; }
  .announce-bar:hover .announce-arrow { transform: translateX(3px); }
  @keyframes announce-hairline { to { background-position: 200% 0; } }
  @keyframes announce-sheen { 0%, 55% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }
  @media (max-width: 1100px) {
    .announce-copy { display: none; }
  }
  @media (max-width: 560px) {
    .announce-bar { padding: 0.7rem 1rem; font-size: 1.12rem; }
    .announce-inner { display: flex; justify-content: space-between; gap: 0.85rem; }
    .announce-main { gap: 0.85rem; }
  }
  @media (prefers-reduced-motion: reduce) {
    .announce-bar::before, .announce-bar::after { animation: none; }
    .announce-bar::after { display: none; }
    .announce-arrow { transition: none; }
  }

  /* Header */
  header.site {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: background 0.25s ease, border-color 0.25s ease;
  }
  header.site.scrolled {
    background: rgba(255,255,255,0.92);
    -webkit-backdrop-filter: saturate(1.1) blur(8px);
    backdrop-filter: saturate(1.1) blur(8px);
    border-bottom-color: var(--border);
  }
  .nav-outer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 1.5rem;
  }
  .logo {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--ink);
  }
  .logo svg { width: 20px; height: 20px; }
  .logo img { height: auto; width: 100px; display: block; }
  /* Right-click menu on the header wordmark (see partials/header.njk): the
     convention people expect from a logo, offering the brand package. Hidden
     until the contextmenu event, so it stays out of the critical CSS. */
  .brand-menu {
    position: fixed;
    z-index: 1100;
    padding: 0.3rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.14);
    font-family: var(--sans);
  }
  .brand-menu-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.75rem;
    border-radius: 7px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ink);
    white-space: nowrap;
  }
  .brand-menu-item svg { flex: none; width: 16px; height: 16px; }
  .brand-menu-item:hover,
  .brand-menu-item:focus-visible { background: var(--bg); color: var(--lava); outline: none; }
  .nav-pill {
    display: flex;
    align-items: center;
    gap: 1.75rem;
  }
  .nav-pill a.navlink { font-size: 0.875rem; font-weight: 500; color: #000; opacity: 0.85; transition: color 0.15s ease, opacity 0.15s ease; }
  .nav-pill a.navlink:hover { opacity: 1; color: var(--lava); }

  /* Hero */
  .hero { text-align: center; padding: 4.5rem 0 4rem; background: var(--bg); }
  .hero.white { background: #fff; }
  .hero h1 {
    font-size: clamp(2rem, 3vw, 2.75rem);
    color: var(--ink);
    margin: 0 0 1.5rem;
    line-height: 1.3;
  }
  .hero p.sub {
    color: var(--body);
    font-size: 1rem;
    max-width: 46rem;
    margin: 0 auto 2.25rem;
  }
  .hero-deco {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1200px;
    margin: -2rem auto 1rem;
    padding: 0 1.5rem;
    pointer-events: none;
  }

  /* Homepage: video hero */
  .hero.hero-video { position: relative; overflow: hidden; padding: 15.4594rem 0 12.75rem; margin-top: -70px; background: #0d0d0d; }
  .hero-video-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
  .hero.hero-video::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.32) 0%, rgba(0,0,0,0.58) 100%); z-index: 1; }
  .hero.hero-video > .wrap { position: relative; z-index: 2; }
  .hero.hero-video h1 { color: #fff; }
  .hero.hero-video p.sub { color: rgba(255,255,255,0.85); }
  .hero.hero-video .pill-tag { background: rgba(255,255,255,0.14); color: #fff; border-color: rgba(255,255,255,0.28); }
  .hero.hero-video .btn-black { background: #fff; color: #000; }
  .hero.hero-video .btn-black:hover { background: #ececec; }
  @media (max-width: 700px) {
    .hero.hero-video { padding: 14.9375rem 0 10rem; }
  }

  /* Homepage: compact hero — headline, sub, and CTA stacked and vertically centered over the video on desktop, so the framing doesn't read as a lower-third graphic. Mobile keeps the content lower, closer to the bottom of the frame. */
  .hero.hero-video.hero-compact {
    display: flex;
    align-items: flex-end;
    min-height: 640px;
    padding: 3rem 0 4.5rem;
    margin-top: -70px;
  }
  .hero.hero-video.hero-compact > .wrap { width: 100%; }
  .hero.hero-video.hero-compact::before {
    background: linear-gradient(180deg, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.58) 100%);
  }
  .hero.hero-video.hero-compact { text-align: left; }
  .hero.hero-video.hero-compact > .wrap { max-width: 1200px; display: flex; align-items: center; justify-content: space-between; gap: 2.5rem; }
  .hero-compact .hero-copy { flex: 1 1 auto; }
  .hero-compact .btn-lava { flex: none; align-self: flex-end; }
  @media (max-width: 760px) {
    .hero.hero-video.hero-compact > .wrap { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
    /* Stacked, the CTA centres under the left-aligned copy. Said explicitly
       because the desktop row's align-self bottom-aligns it against the copy,
       which would pin it to the left edge here. */
    .hero-compact .btn-lava { align-self: center; }
  }
  .hero-compact h1 { margin-bottom: 0.75rem; font-size: clamp(2.3rem, 4.6vw, 3.75rem); max-width: 14em; }
  .hero-compact p.sub { margin: 0; max-width: 34rem; }
  @media (max-width: 700px) {
    .hero.hero-video.hero-compact { min-height: 520px; padding: 0 0 3.5rem; align-items: flex-end; }
  }
  .deco-col { display: flex; flex-direction: column; gap: 0.9rem; opacity: 0.9; }
  .deco-col.right { align-items: flex-end; }
  .deco-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 0.8rem 1.1rem;
    font-size: 0.8rem;
    color: var(--ink);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  }

  .logo-strip { text-align: center; padding: 3.5rem 0 5.5rem; }
  .logo-strip p { color: var(--muted); font-size: 1rem; margin-bottom: 2.75rem; }
  /* Under a campaign-page hero the strip is a proof row, not a section of its own. */
  .logo-strip-tight { padding: 2rem 0 1.5rem; }
  .logo-strip-tight p { font-size: 0.9rem; margin-bottom: 1.25rem; }
  .logo-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    flex-wrap: wrap;
    filter: grayscale(1);
    opacity: 0.55;
  }
  .logo-row img { height: 24px; width: auto; object-fit: contain; }

  /* Full bleed testimonial */
  .testimonial-photo {
    background:
      linear-gradient(100deg, rgba(20,20,20,0.55) 0%, rgba(20,20,20,0.30) 40%, rgba(20,20,20,0) 65%),
      url('/assets/images/testimonial-street-bw.jpg');
    /* Plain cover, not an over-zoom past it: at very wide/short viewports
       an over-zoomed portrait-sourced image ran out of width before the
       container did and tiled (background-repeat's default), showing a
       visible duplicate. Cover always fills exactly, no repeat needed. */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 34% 20%;
    color: #fff;
    padding: 6rem 1.5rem;
    min-height: 460px;
    display: flex;
    align-items: center;
  }
  .testimonial-photo .inner { max-width: 1200px; margin: 0 auto; width: 100%; }
  .testimonial-photo blockquote {
    font-family: var(--serif);
    font-size: clamp(2rem, 4vw, 2.8rem);
    margin: 0 0 1.25rem;
    max-width: 30rem;
    line-height: 1.15;
  }
  .testimonial-photo cite { font-style: normal; display: block; opacity: 0.85; margin-bottom: 1rem; }
  .testimonial-photo p.desc { max-width: 26rem; opacity: 0.9; margin-bottom: 1.75rem; }
  /* A short headline above the quote - the quote stays the biggest, most
     prominent text in the section; the headline just sits a bit above it,
     smaller and slightly quieter, and the section is free to grow taller
     to fit both. */
  .testimonial-photo.has-headline .headline {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(1.3rem, 2.4vw, 1.8rem);
    line-height: 1.2;
    margin: 0 0 0.85rem;
    opacity: 0.85;
  }

  /* Generic section spacing */
  .sec { padding: 5.5rem 0; background: #fff; }
  .sec.white { background: #fff; }
  .sec.beige { background: var(--bg); }
  .sec.black { background: #000; color: #fff; }
  .sec.dark { background: var(--dark); color: #fff; }
  .section-head { text-align: center; max-width: 700px; margin: 0 auto 3rem; }
  .section-head h2 { font-size: clamp(1.9rem, 4vw, 3.3rem); color: var(--body); line-height: 1.33; margin: 0 0 1rem; }
  .section-head p { color: var(--body); font-size: 1.25rem; }
  .sec.black .section-head p, .sec.dark .section-head p { color: #b5b5b5; }

  /* Platform tabs */
  .tab-row {
    display: inline-flex;
    gap: 0.25rem;
    background: var(--pill-gray);
    border-radius: 999px;
    padding: 0.35rem;
    margin: 0 auto 3.5rem;
  }
  .tab-row-wrap { text-align: center; }
  .tab-row span {
    border-radius: 999px;
    padding: 0.65rem 1.5rem;
    font-size: 0.9rem;
    color: var(--muted);
    cursor: default;
  }
  .tab-row span { cursor: pointer; transition: color 0.15s ease; }
  .tab-row span:hover:not(.active) { color: var(--ink); }
  .tab-row span.active { background: #fff; color: var(--ink); font-weight: 600; }

  .feature-cols {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    text-align: left;
  }
  .feature-cols h3 { font-size: 1.4rem; font-weight: 400; font-family: var(--serif); color: var(--ink); margin: 0.4rem 0 0.6rem; letter-spacing: -0.01em; }
  .feature-cols p { margin: 0; color: var(--body); font-size: 1rem; }
  .center-link { text-align: center; margin-top: 3rem; }

  /* dark demo panel */
  .demo-panel {
    background: var(--dark);
    border-radius: 20px;
    padding: 2.5rem;
    color: #fff;
    max-width: 1000px;
    margin: 0 auto;
  }
  .demo-panel h3 { margin: 0 0 1.5rem; font-weight: 700; font-family: var(--sans); font-size: 1.1rem; }
  table.mock { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
  table.mock th, table.mock td { text-align: left; padding: 0.6rem 0.8rem; color: #ccc; }
  table.mock th { color: #888; font-weight: 500; border-bottom: 1px solid #333; }
  table.mock td:first-child, table.mock th:first-child { color: #fff; }

  /* Partner logos */
  .partner-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2.75rem;
    flex-wrap: wrap;
    filter: grayscale(1);
    opacity: 0.65;
  }
  .partner-row img { height: 22px; width: auto; object-fit: contain; }

  /* Onboarding timeline */
  .timeline {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-top: 3rem;
  }
  .timeline-col { border-top: 1px solid var(--border); padding: 1.6rem 1.75rem 0.5rem; }
  .timeline-col + .timeline-col { border-left: 1px solid var(--border); }
  .timeline-col:first-child { padding-left: 0; }
  .timeline-col h3 { font-size: 1rem; font-weight: 700; margin: 0 0 1.25rem; }
  .timeline-col.active { background: #fff; border-top-color: transparent; border-left-color: transparent; border-radius: 16px; padding: 1.6rem 1.6rem 2rem; box-shadow: 0 4px 20px rgba(0,0,0,0.05); }
  .timeline-col.active + .timeline-col { border-left: none; }
  .timeline-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.85rem; }
  .timeline-col li { font-size: 0.95rem; padding-left: 1.4rem; position: relative; color: var(--ink); }
  .timeline-col li::before { content: "✓"; color: var(--muted); position: absolute; left: 0; }
  .timeline-note { text-align: center; margin-top: 3rem; font-size: 1.05rem; }
  .timeline-ctas { text-align: center; margin-top: 1.75rem; display: flex; gap: 1rem; justify-content: center; }

  /* Mobile companion */
  .mobile-sec { text-align: center; }
  .mobile-sec h2 { font-size: clamp(2rem, 4.5vw, 3rem); margin: 0 0 1.25rem; }
  .mobile-sec p.sub { color: #b5b5b5; max-width: 32rem; margin: 0 auto 2.25rem; font-size: 1.05rem; }
  .store-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 3rem; }
  /* Phone mockup (matches light.inc mobile companion section) */
  .phone-shell {
    background: #0a0a0a;
    border: 1px solid #262626;
    border-radius: 44px;
    padding: 3rem;
    width: fit-content;
    margin: 0 auto;
  }
  .phone {
    position: relative;
    width: 340px;
    background: #000;
    border: 2px solid #313131;
    border-radius: 54px;
    padding: 11px;
  }
  .phone-screen {
    position: relative;
    height: 650px;
    border-radius: 44px;
    overflow: hidden;
    background: linear-gradient(165deg, #2c2c2e 0%, #1a1a1c 38%, #111112 100%);
    padding: 3.6rem 1.15rem 1rem;
    display: flex;
    flex-direction: column;
    text-align: left;
    color: #fff;
  }
  .phone-notch {
    position: absolute;
    top: 11px;
    left: 50%;
    transform: translateX(-50%);
    width: 126px;
    height: 27px;
    background: #000;
    border-radius: 18px;
    z-index: 2;
  }
  .phone-status {
    position: absolute;
    top: 15px;
    left: 1.55rem;
    right: 1.4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.82rem;
    font-weight: 600;
    z-index: 1;
  }
  .phone-status .icons { display: flex; align-items: center; gap: 0.3rem; }
  .phone-status svg { display: block; }
  .ps-label { color: #98989e; font-size: 0.82rem; margin: 0.9rem 0 0.35rem; }
  .ps-balance { font-size: 1.95rem; font-weight: 600; letter-spacing: -0.01em; }
  .ps-balance small { font-size: 0.85rem; font-weight: 600; color: #d4d4d8; margin-left: 0.3rem; }
  .ps-actions { display: flex; gap: 0.6rem; margin-top: 1rem; }
  .ps-tasks-pill {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 999px;
    padding: 0.68rem 1rem;
    font-size: 0.9rem;
    font-weight: 500;
  }
  .ps-tasks-pill .ring {
    width: 13px; height: 13px;
    border: 1.5px solid #cfcfd4;
    border-radius: 50%;
  }
  .ps-round-btn {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.06);
    display: flex; align-items: center; justify-content: center;
  }
  .ps-round-btn::after { content: ""; width: 13px; height: 13px; border-radius: 50%; background: #d4d4d8; }
  .ps-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    background: rgba(255,255,255,0.07);
    border-radius: 14px;
    padding: 0.85rem 1rem;
    font-size: 0.9rem;
    font-weight: 500;
  }
  .ps-card .amount { color: #d4d4d8; font-weight: 400; }
  .ps-item { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.15rem; }
  .ps-avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    flex: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.72rem; font-weight: 700; color: #fff;
  }
  .ps-item .meta { flex: 1; min-width: 0; }
  .ps-item .meta .name { font-size: 0.92rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ps-item .meta .date { font-size: 0.78rem; color: #98989e; }
  .ps-item .amount { font-size: 0.92rem; white-space: nowrap; }
  .ps-ask {
    margin-top: auto;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 999px;
    padding: 0.75rem 1.1rem;
    font-size: 0.9rem;
    color: #98989e;
    margin-bottom: 0.65rem;
  }
  .ps-tabbar {
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: rgba(44,44,46,0.85);
    border-radius: 26px;
    padding: 0.45rem 0.5rem;
  }
  .ps-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.18rem;
    font-size: 0.6rem;
    color: #b5b5ba;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
  }
  .ps-tab svg { display: block; }
  .ps-tab.active { background: rgba(255,255,255,0.12); color: #fff; }
  .video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16/8.6;
    margin: 0 auto;
    overflow: hidden;
    background: #181818;
  }
  .video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

  /* Testimonial grid */
  .lead-quote-card {
    background: #fff;
    border-radius: 20px;
    padding: 3rem;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 2rem;
    align-items: center;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  }
  .lead-quote-card .lead-logo { height: 26px; margin-bottom: 2.5rem; display: block; }
  .lead-quote-card .lead-logo-text { font-weight: 600; font-size: 1.05rem; color: var(--ink); margin-bottom: 2.5rem; display: block; }
  .lead-quote-card blockquote { font-family: var(--serif); font-size: 1.6rem; margin: 0 0 1rem; line-height: 1.25; }
  .lead-quote-card cite { font-style: normal; color: var(--muted); }
  .lead-photo { background: linear-gradient(135deg,#333,#666); border-radius: 14px; aspect-ratio: 4/3; position: relative; display: flex; align-items: center; justify-content: center; }
  .lead-photo .play-btn { width: 56px; height: 56px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; padding-left: 3px; box-shadow: 0 4px 16px rgba(0,0,0,0.25); }

  .quote-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
  .quote-card { background: #fff; border-radius: 20px; padding: 2rem; min-height: 200px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
  .quote-card .who { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
  .avatar { width: 42px; height: 42px; border-radius: 50%; background: #ddd; flex-shrink: 0; background-size: cover; background-position: center; }
  .who-name { font-weight: 700; font-size: 0.95rem; }
  .who-role { font-size: 0.8rem; color: var(--muted-2); }
  .quote-card p.quote { font-size: 1.05rem; margin: 0; }

  /* Comparison table */
  .compare-wrap { background: var(--dark); border-radius: 20px; padding: 1rem 2rem; }
  table.compare { width: 100%; border-collapse: collapse; }
  table.compare th, table.compare td { padding: 1.1rem 1rem; text-align: left; font-size: 0.95rem; border-bottom: 1px solid #2c2c2c; }
  table.compare tr:last-child td { border-bottom: none; }
  table.compare th { color: #888; font-weight: 500; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; }
  table.compare td:first-child { color: #aaa; }
  table.compare td:nth-child(2) { color: #fff; font-weight: 500; }
  table.compare td:nth-child(3) { color: #777; }
  .yes { color: var(--mint); font-weight: 700; }
  .no { color: #ff6b6b; font-weight: 700; }

  .cta-center { text-align: center; padding: 5rem 0; background: #fff; }

  /* Footer: black board section — the Solari canvas blends straight into it */
  footer.site { background: #0c0c0c; padding: 4.5rem 0 2.5rem; }
  /* Footer .wrap intentionally inherits the base 1200px/1.5rem from .wrap so
     the first column (Product) lines up under the header's Product link. */
  .footer-top { margin-bottom: 3.5rem; }
  .footer-cols { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2.5rem; align-items: start; }
  .footer-cols h3 { font-size: 0.9rem; font-weight: 700; margin: 0 0 1.1rem; color: #fff; }
  .footer-cols ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.65rem; }
  .footer-cols a { font-size: 0.875rem; color: #a3a3a3; }
  .footer-cols a:hover { color: var(--blue); }
  .badges { display: flex; gap: 1rem; align-items: flex-start; }
  .badge-circle { width: 56px; height: 56px; border-radius: 50%; background: #111; color: #fff; font-size: 0.6rem; text-align: center; display: flex; align-items: center; justify-content: center; font-weight: 700; line-height: 1.1; }
  .footer-divider { border: none; border-top: 1px solid rgba(255, 255, 255, 0.14); margin: 0 0 1.75rem; }
  .footer-mid { display: flex; justify-content: center; align-items: center; margin-bottom: 1.75rem; }
  /* Bottom row: just the copyright line, centered under the Solari board. */
  .footer-bottom { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 1rem 2rem; color: var(--muted-2); font-size: 0.85rem; text-align: center; }
  .footer-copyright { white-space: nowrap; }

  /* LIGHT Solari departure board: dark panel, dots drawn on the canvas by
     footer.njk's solari-board script. The height is a placeholder that holds
     layout until the script measures the grid and sets the exact height
     (13 rows x 15px pitch at full size, less when the pitch shrinks to fit). */
  .solari-board { display: block; width: 100%; height: 195px; background: #0c0c0c; border-radius: 14px; cursor: pointer; user-select: none; -webkit-user-select: none; }

  @media (max-width: 960px) {
    .nav-pill .navlink { display: none; }
    .hero-deco { display: none; }
    .feature-cols { grid-template-columns: repeat(2,1fr); }
    .timeline { grid-template-columns: 1fr; }
    .timeline-col + .timeline-col { border-left: none; }
    .timeline-col { padding-left: 0; }
    /* Stacked layout: flatten the elevated active card so all phases read as one list */
    .timeline-col.active { background: transparent; box-shadow: none; border-radius: 0; border-top: 1px solid var(--border); padding: 1.6rem 1.75rem 0.5rem 0; }
    .lead-quote-card { grid-template-columns: 1fr; }
    .quote-grid { grid-template-columns: 1fr; }
    .footer-cols { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
  }
  @media (max-width: 600px) {
    .nav-outer { padding: 0.75rem 1rem; }
    .footer-cols { grid-template-columns: 1fr; }
    .solari-board { height: 118px; }
    .footer-mid { margin: 1.75rem 0; }
    .footer-bottom { margin-top: 1rem; flex-direction: row; align-items: center; gap: 1rem 2rem; }
    /* One flowing line; on narrow phones it wraps naturally before the build
       stamp (which stays nowrap), keeping every dot separator visible. */
    .footer-copyright { white-space: normal; }
  }

  /* Dark-section headings (matches inline style used on index) */
  .sec.dark .section-head h2, .sec.black .section-head h2 { color: #fff; }

  /* Compliance / certification cards (country pages) */
  .cert-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; max-width: 900px; margin: 0 auto; }
  .cert-grid .card {
    background: #1e1e1e;
    border: 1px solid #2c2c2c;
    border-radius: 16px;
    padding: 1.75rem;
  }
  .cert-grid h3 { margin: 0; font-size: 1.1rem; font-weight: 700; font-family: var(--sans); }
  .cert-grid p { margin: 0.4rem 0 0; color: #999; font-size: 0.85rem; }
  @media (max-width: 900px) {
    .cert-grid { grid-template-columns: 1fr; }
  }

  /* Light variant, used on SOC 1 / SOC 2 pages */
  .cert-grid.soc-facts { margin: 2.5rem auto 3rem; }
  .cert-grid.soc-facts .card { background: #fff; border: 1px solid var(--border); }
  .cert-grid.soc-facts h3 { color: var(--ink); }
  .cert-grid.soc-facts p { color: var(--body); font-size: 0.95rem; }

  /* Sales tax integration cards (country pages) */
  .tax-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; max-width: 900px; margin: 0 auto; }
  .tax-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 2.25rem 2rem;
  }
  .tax-card img { height: 26px; width: auto; margin-bottom: 1.4rem; }
  .tax-card h3 { font-size: 1.15rem; font-weight: 600; font-family: var(--sans); margin: 0 0 0.5rem; }
  .tax-card p { margin: 0; color: var(--body); font-size: 0.95rem; }
  .tax-badge {
    display: inline-block;
    background: var(--mint);
    color: #fff;
    font-weight: 700;
    font-size: 0.75rem;
    padding: 0.3rem 0.8rem;
    border-radius: 4px;
    margin-bottom: 1.25rem;
  }
  .tax-note { text-align: center; color: var(--muted); font-size: 0.95rem; max-width: 40rem; margin: 2.5rem auto 0; }
  .positions-filter { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 1.5rem; max-width: 900px; margin: 0 auto 2.25rem; }
  .filter-field { display: flex; flex-direction: column; gap: 0.4rem; }
  .filter-field label { font-size: 0.8rem; font-weight: 600; color: var(--muted); }
  .filter-field select {
    appearance: none;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.9rem center;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.7rem 2.4rem 0.7rem 1rem;
    font-size: 0.95rem;
    font-family: var(--sans);
    color: var(--ink);
    min-width: 190px;
    cursor: pointer;
  }
  .filter-field select:hover { border-color: #ccc; }
  .filter-clear {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 0.9rem;
    text-decoration: underline;
    cursor: pointer;
    padding: 0.7rem 0;
  }
  .filter-clear:hover { color: var(--ink); }
  #positionsEmpty { margin-top: 0; margin-bottom: 2.25rem; }
  @media (max-width: 600px) {
    .positions-filter { flex-direction: column; align-items: stretch; gap: 1rem; }
    .filter-field select { min-width: 0; width: 100%; }
  }
  .positions-toggle { display: flex; justify-content: center; margin: 1.75rem 0 0; }
  #positionsGrid + #positionsMore:not([hidden]) { margin-top: 1.75rem; }
  .positions-toggle-btn { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--border); background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
  .positions-toggle-btn:hover { background: #f7f7f7; border-color: #ccc; }
  .positions-toggle-btn .chevron { transition: transform 0.25s ease; }
  .positions-toggle-btn[aria-expanded="true"] .chevron { transform: rotate(180deg); }
  @media (max-width: 900px) {
    .tax-grid { grid-template-columns: 1fr; }
  }

  .feature-logo { height: 18px; width: auto; display: inline-block; vertical-align: baseline; margin-left: 0.45rem; opacity: 0.8; }

  /* Product pages */
  .feature-cols.cols-2 { grid-template-columns: repeat(2, 1fr); }
.feature-cols.cols-3 { grid-template-columns: repeat(3, 1fr); }
.feature-cols.cols-4 { grid-template-columns: repeat(4, 1fr); }
  @media (max-width: 900px) {
    .feature-cols.cols-2 { grid-template-columns: 1fr; }
  .feature-cols.cols-3 { grid-template-columns: 1fr; }
  .feature-cols.cols-4 { grid-template-columns: 1fr; }
  }

  /* Homepage tabs: panels with only 3 items match the 4-column card width and center, instead of stretching or leaving a gap */
  .feature-cols.narrow-3 { grid-template-columns: repeat(3, 1fr); max-width: 75%; margin: 0 auto; }
  @media (max-width: 900px) {
    .feature-cols.narrow-3 { grid-template-columns: 1fr; max-width: 100%; }
  }

  /* Header dropdown (glass) */
  .nav-item { position: relative; }
  .nav-item > .navlink {
    display: inline-block;
    padding: 0.45rem 0.9rem;
    margin: -0.45rem -0.9rem;
    border-radius: 4px;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .nav-item:hover > .navlink, .nav-item:focus-within > .navlink {
    background: #000;
    color: #fff;
    opacity: 1;
  }
  .nav-dropdown {
    position: absolute;
    top: 100%;
    left: -1.25rem;
    padding-top: 1rem;
    display: none;
    z-index: 300;
  }
  .nav-item:hover .nav-dropdown, .nav-item:focus-within .nav-dropdown { display: block; }
  @keyframes nav-pop {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .nav-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(170px, 1fr));
    gap: 0.15rem 1.75rem;
    width: max-content;
    padding: 1.1rem;
    background: rgba(242, 242, 247, 0.72);
    -webkit-backdrop-filter: blur(36px) saturate(1.8);
    backdrop-filter: blur(36px) saturate(1.8);
    border: 0.5px solid rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    box-shadow: 0 22px 70px 4px rgba(0, 0, 0, 0.22), inset 0 0.5px 0 rgba(255, 255, 255, 0.5);
    animation: nav-pop 0.18s ease;
  }
  @supports not (backdrop-filter: blur(1px)) {
    .nav-panel { background: rgba(246, 246, 248, 0.97); }
  }
  .nav-panel a {
    display: block;
    padding: 0.5rem 0.8rem;
    border-radius: 11px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #1a1a1a;
    white-space: nowrap;
  }
  .nav-panel a:hover { background: rgba(120, 120, 128, 0.16); }
  /* the Product dropdown lists the architecture: three items, one column */
  .nav-panel.arch { grid-template-columns: 1fr; min-width: 200px; }

  /* Company nav dropdown: link list + latest blog post preview card,
     narrower than the Product mega-menu grid.
     Note: .nav-panel a (class+type selector) outranks a single-class
     override on specificity alone, so every rule here that needs to beat
     it - padding, white-space - is qualified as .nav-panel .nav-panel-post
     rather than .nav-panel-post on its own. Without that, the title
     inherits nowrap from .nav-panel a and gets hard-clipped instead of
     wrapping, regardless of source order. */
  .nav-panel.company { grid-template-columns: auto 130px; gap: 0.25rem 1rem; align-items: start; }
  .nav-panel-links { display: flex; flex-direction: column; min-width: 150px; }
  .nav-panel .nav-panel-post {
    display: block;
    width: 130px;
    padding: 0;
    border-radius: 12px;
    overflow: hidden;
    white-space: normal;
    background: rgba(0, 0, 0, 0.03);
  }
  .nav-panel-post:hover { background: rgba(0, 0, 0, 0.06); }
  .nav-panel-post-media { height: 60px; background-size: cover; background-position: center; background-color: #e8e8ee; }
  .nav-panel .nav-panel-post-body { padding: 0.5rem 0.6rem 0.6rem; }
  .nav-panel-post-kicker { font-size: 0.6rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 0 0 0.25rem; }
  .nav-panel .nav-panel-post-title { font-size: 0.72rem; font-weight: 600; line-height: 1.3; color: #1a1a1a; margin: 0; white-space: normal; }
  @media (max-width: 980px) {
    .nav-panel.company { grid-template-columns: 1fr; }
    .nav-panel .nav-panel-post { width: 100%; }
  }

  /* Customers page */
  .story-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
  .story-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .story-card.featured { grid-column: span 2; }
  .story-media {
    background: linear-gradient(135deg, #ececf1, #f5f5f8);
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .story-card.featured .story-media { position: relative; height: 320px; }
  .story-card.featured .story-media.video { height: 320px; padding: 0; }
  .story-media img { height: 28px; width: auto; filter: grayscale(1); opacity: 0.65; }
  .story-media .wordmark { font-weight: 700; font-size: 1.5rem; color: #a4a4ac; letter-spacing: 0.01em; }
  .story-body { padding: 1.4rem 1.75rem 1.75rem; }
  .story-body .qmark { display: block; font-family: var(--sans); font-size: 2.4rem; font-weight: 700; line-height: 0.4; margin: 0.6rem 0 0.9rem; color: var(--ink); }
  .story-body blockquote { font-family: var(--sans); font-size: 1.2rem; font-weight: 500; line-height: 1.4; margin: 0 0 1.1rem; color: var(--ink); }
  .story-body cite { font-style: normal; font-size: 0.95rem; color: var(--ink); }
  .story-body cite span { display: block; color: var(--muted); }
  .story-card.placeholder blockquote { color: var(--muted-2); }
  .story-card.placeholder cite { color: var(--muted); }

  /* Single customer-proof card embedded on a product page (not the
     /customers filter grid) — reuses .story-card as-is, just constrained
     and centered instead of living in a .story-grid. */
  .story-card-solo { max-width: 760px; margin: 0 auto; }
  .story-card-solo .story-card { border: 1px solid var(--border); }

  .stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem 3rem; max-width: 1000px; margin: 0 auto; }
  .stat { border-top: 1px solid var(--border); padding-top: 1.4rem; }
  .stat .num { font-family: var(--serif); font-size: clamp(2.4rem, 4vw, 3.4rem); line-height: 1; display: block; margin-bottom: 0.6rem; }
  .stat p { margin: 0; color: var(--body); font-size: 0.95rem; }

  .logo-wall { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2.5rem 3.5rem; filter: grayscale(1); opacity: 0.6; }
  .logo-wall img { height: 24px; width: auto; }
  .logo-wall .wordmark { font-weight: 700; font-size: 1.1rem; color: #555; }

  @media (max-width: 900px) {
    .story-grid { grid-template-columns: 1fr; }
    .story-card.featured { grid-column: span 1; }
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 560px) {
    .stat-grid { grid-template-columns: 1fr; }
  }

  /* AI Academy */
  .topic-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
  .topic-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 2rem 1.75rem;
  }
  .topic-card .num {
    font-family: var(--serif);
    font-size: 2.2rem;
    color: var(--muted-2);
    display: block;
    margin-bottom: 1rem;
    line-height: 1;
  }
  .topic-card h3 { font-size: 1.2rem; font-weight: 600; font-family: var(--sans); margin: 0 0 0.6rem; color: var(--ink); }
  .topic-card p { margin: 0; color: var(--body); font-size: 0.95rem; }
  @media (max-width: 900px) { .topic-grid { grid-template-columns: 1fr; } }

  /* Academy programme page */
  .key-details { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; max-width: 1000px; margin: 0 auto; }
  .key-details .cell { border-top: 1px solid var(--border); padding-top: 1.1rem; }
  .key-details .cell h3 { margin: 0 0 0.3rem; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
  .key-details .cell p { margin: 0; font-size: 1.05rem; font-weight: 600; }

  .module-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
  .module-card { background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 2rem 1.9rem; }
  .module-card .module-label { display: inline-block; background: var(--pill-gray); border-radius: 4px; padding: 0.3rem 0.85rem; font-size: 0.78rem; font-weight: 700; margin-bottom: 1rem; }
  .module-card h3 { font-size: 1.25rem; font-weight: 600; font-family: var(--sans); margin: 0 0 0.5rem; }
  .module-card p.lead { margin: 0 0 1rem; color: var(--body); font-size: 0.95rem; }
  .module-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
  .module-card li { font-size: 0.92rem; color: var(--ink); padding-left: 1.4rem; position: relative; }
  .module-card li::before { content: "✓"; color: var(--muted); position: absolute; left: 0; }
  .benefit-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
  .benefit-cols .tax-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
  .benefit-cols .tax-card li { font-size: 0.95rem; color: var(--body); padding-left: 1.4rem; position: relative; }
  .benefit-cols .tax-card li::before { content: "✓"; color: var(--muted); position: absolute; left: 0; }
  @media (max-width: 900px) {
    .key-details { display: flex; flex-direction: column; gap: 1.5rem; }
    .module-grid, .benefit-cols { grid-template-columns: 1fr; }
  }

  /* Academy speakers */
  .speaker-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; max-width: 1050px; margin: 0 auto; }
  .speaker-card { background: #fff; border: 1px solid var(--border); border-radius: 20px; overflow: hidden; }
  .speaker-media { position: relative; overflow: hidden; }
  .speaker-photo {
    aspect-ratio: 4/5;
    background-color: #e8e8ed;
    background-size: cover;
    background-position: center top;
    filter: grayscale(1);
  }
  .speaker-bio {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    background: rgba(242, 242, 247, 0.72);
    -webkit-backdrop-filter: blur(36px) saturate(1.8);
    backdrop-filter: blur(36px) saturate(1.8);
    border: 0.5px solid rgba(0, 0, 0, 0.1);
    border-radius: 16px 16px 0 0;
    border-bottom: none;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22), inset 0 0.5px 0 rgba(255, 255, 255, 0.5);
    padding: 1.1rem 1.2rem;
    transform: translateY(100%);
    transition: transform 0.25s ease;
  }
  @supports not (backdrop-filter: blur(1px)) {
    .speaker-bio { background: rgba(246, 246, 248, 0.97); }
    .mobile-menu { background: rgba(246, 246, 248, 0.99); }
  }
  .speaker-card:hover .speaker-bio, .speaker-card:focus-within .speaker-bio { transform: translateY(0); }
  .speaker-bio p { margin: 0; padding: 0; color: #1a1a1a; font-size: 0.9rem; line-height: 1.5; }
  .speaker-card h3 { font-size: 1.15rem; font-weight: 600; font-family: var(--sans); margin: 0; padding: 1.25rem 1.5rem 0.2rem; }
  .speaker-card p { margin: 0; padding: 0 1.5rem 1.5rem; color: var(--muted); font-size: 0.95rem; }
  @media (max-width: 900px) { .speaker-grid { grid-template-columns: 1fr; max-width: 400px; } }

  /* Academy — visual polish */
  .academy-hero { padding: 6rem 0 5rem; }
  .academy-hero h1 { font-size: clamp(2.6rem, 5.5vw, 4.2rem); line-height: 1.15; max-width: 17em; margin-left: auto; margin-right: auto; }
  .split { display: grid; grid-template-columns: 5fr 7fr; gap: 3.5rem; align-items: start; max-width: 1050px; margin: 0 auto; }
  .split .lede { font-family: var(--serif); font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.3; color: var(--ink); margin: 0; }
  .split .body-copy p { color: var(--body); font-size: 1.05rem; line-height: 1.65; margin: 0 0 1.1rem; }
  .split .body-copy p:last-child { margin-bottom: 0; }
  .module-card { position: relative; transition: transform 0.18s ease, box-shadow 0.18s ease; }
  .module-card:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(0,0,0,0.08); }
  .module-card .idx { position: absolute; top: 1.2rem; right: 1.6rem; font-family: var(--serif); font-size: 2.8rem; line-height: 1; color: #e6e6ee; pointer-events: none; }
  .statement { background: #000; color: #fff; padding: 6.5rem 1.5rem; text-align: center; }
  .statement p { font-family: var(--serif); font-size: clamp(1.7rem, 3.4vw, 2.7rem); line-height: 1.35; max-width: 44rem; margin: 0 auto; }
  .statement .mint { color: var(--mint); }
  /* Manifesto: pixel flower above the statement, same crisp-edge icon language as the feature marks */
  .statement-bloom { display: block; width: 150px; height: 150px; margin: 0 auto 2.25rem; }
  .statement-bloom .p { fill: var(--lava); }
  .statement-bloom .d { fill: var(--lava-dark); }
  .statement-bloom .h { fill: var(--off-orange); }
  .statement-bloom .g { fill: var(--off-green); }
  @media (max-width: 560px) { .statement-bloom { width: 100px; height: 100px; margin-bottom: 1.5rem; } }
  .speaker-card { transition: transform 0.18s ease, box-shadow 0.18s ease; }
  .speaker-card:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(0,0,0,0.08); }
  .cta-panel {
    background: #000;
    border-radius: 28px;
    color: #fff;
    text-align: center;
    padding: 4.5rem 2rem 5rem;
    max-width: 1000px;
    margin: 0 auto;
  }
  .cta-panel h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.9rem, 3.4vw, 2.8rem); margin: 0 0 1rem; }
  .cta-panel p { color: #b5b5b5; max-width: 30rem; margin: 0 auto 2.25rem; }
  .cta-panel .btn { background: #fff; color: #000; padding: 1rem 3.5rem; }
  .cta-panel .btn:hover { background: #ececec; }
  @media (max-width: 900px) {
    .split { display: flex; flex-direction: column; gap: 1.5rem; }
  }

  /* Long-form prose pages (legal, manifesto, etc.) */
  .prose { max-width: 46rem; margin: 0 auto; }
  .prose h2 { font-family: var(--serif); font-size: 1.7rem; margin: 2.5rem 0 0.9rem; color: var(--ink); }
  .prose h3 { font-size: 1.15rem; font-weight: 600; margin: 1.8rem 0 0.6rem; }
  .prose p { color: var(--body); line-height: 1.7; margin: 0 0 1rem; }
  /* legal text: disable discretionary ligatures (font renders "(5)" as a circled glyph) */
  .prose p, .prose li { font-variant-ligatures: none; font-feature-settings: "dlig" 0, "calt" 0; }
  .prose ul, .prose ol { color: var(--body); line-height: 1.7; margin: 0 0 1rem; padding-left: 1.4rem; }
  .prose li { margin-bottom: 0.4rem; }
  .prose table { width: 100%; border-collapse: collapse; margin: 0 0 1.4rem; font-size: 0.88rem; }
  .prose th, .prose td { border: 1px solid var(--border); padding: 0.55rem 0.7rem; text-align: left; vertical-align: top; color: var(--body); }
  .prose th { font-weight: 600; color: var(--ink); background: rgba(0,0,0,0.03); }
  .prose .updated { color: var(--muted-2); font-size: 0.9rem; margin-bottom: 2.5rem; }
  /* Inline links in body copy are unstyled globally (a { color: inherit }), which leaves
     them indistinguishable from surrounding text. Opt a prose block in with .legal. */
  .prose.legal a { color: var(--lava); text-decoration: underline; }
  .prose.legal a:hover { color: var(--lava-dark); }

  /* Language selector */
  .nav-panel.lang { grid-template-columns: 1fr; min-width: 190px; gap: 0.1rem; padding: 0.6rem; }
  .nav-panel.lang a { display: flex; align-items: center; gap: 0.65rem; }
  .nav-panel.lang .code { font-size: 0.72rem; font-weight: 700; color: var(--muted); width: 1.7rem; flex: none; }
  .nav-panel.lang .check { margin-left: auto; color: var(--ink); font-size: 0.8rem; }
  .nav-panel.lang a.active { background: rgba(120, 120, 128, 0.12); }

  /* Advisory board photo cards */
  .speaker-grid.board { grid-template-columns: repeat(3, 1fr); max-width: 1050px; }
  .speaker-photo.board { aspect-ratio: 1/1; background-position: center; }

  /* Careers photo gallery */
  .photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.5rem; }
  .photo-grid img { width: 100%; height: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 16px; }
  .photo-grid img.wide { grid-column: span 2; aspect-ratio: auto; }
  @media (max-width: 900px) { .photo-grid { grid-template-columns: repeat(2, 1fr); } .photo-grid img.wide { grid-column: span 2; } }
  /* Careers moodboard: 4 columns of smaller photos instead of 3 */
  .photo-grid.quad { grid-template-columns: repeat(4, 1fr); }
  @media (max-width: 900px) { .photo-grid.quad { grid-template-columns: repeat(2, 1fr); } }

  /* Careers photo grid: shuffle toolbar */
  .photo-grid-toolbar { display: flex; align-items: center; justify-content: flex-end; margin-top: 3rem; }
  .photo-shuffle-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--ink); border: 1px solid var(--ink); color: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.12);
    cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  }
  .photo-shuffle-btn:hover { background: var(--lava); border-color: var(--lava); box-shadow: 0 4px 14px rgba(245,65,15,0.35); }
  .photo-shuffle-btn:active { transform: scale(0.94); }
  .photo-shuffle-btn.spin svg { animation: photo-shuffle-spin 0.5s ease; }
  @keyframes photo-shuffle-spin { from { transform: rotate(0deg); } to { transform: rotate(180deg); } }

  /* Slack plugin page: photo duo + mockup tiles */
  .photo-grid.duo { grid-template-columns: repeat(2, 1fr); margin: 0 0 3.5rem; }
  .photo-grid.trio { grid-template-columns: repeat(3, 1fr); margin: 0 0 3.5rem; }
  .photo-grid.below { margin: 3.5rem 0 0; }
  .feature-cols.below { margin-top: 3.5rem; }
  @media (max-width: 900px) { .photo-grid.trio { grid-template-columns: 1fr; } }
  @media (max-width: 900px) { .photo-grid.duo { grid-template-columns: 1fr; } }
  .tax-card img.mockup { display: block; width: 100%; height: auto; margin-top: 1.25rem; border-radius: 12px; background: #000; }
  .tax-grid.stacked { grid-template-columns: 1fr; max-width: 820px; }
  .tax-grid.stacked .tax-card { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2rem; align-items: center; }
  .tax-grid.stacked .tax-card img.mockup { margin-top: 0; aspect-ratio: 1 / 1; object-fit: contain; }
  .tax-grid.stacked .tax-card img.card-photo { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 12px; }
  .tax-grid.stacked .tax-card img.card-phone { display: block; width: auto; height: auto; max-width: 100%; max-height: 460px; margin: 0 auto; }
  .tax-grid.stacked .tax-card img.card-shot { display: block; width: 100%; height: auto; border: 1px solid var(--border); border-radius: 12px; }
  @media (max-width: 700px) { .tax-grid.stacked .tax-card { grid-template-columns: 1fr; } .tax-grid.stacked .tax-card img.mockup { margin-top: 1.25rem; } }
  /* Dot-matrix bar chart illustration (Reports page) */
  .dot-chart { aspect-ratio: 1 / 1; width: 100%; padding: 1.4rem; border-radius: 14px; background: var(--off-yellow); }
  .dot-chart-screen { width: 100%; height: 100%; padding: 1.6rem 1.4rem 1.4rem; border-radius: 10px; background: var(--muted-2); box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.22), 0 1px 0 rgba(255, 255, 255, 0.55); display: flex; align-items: flex-end; justify-content: center; }
  .dot-chart-screen svg { display: block; width: 100%; height: auto; max-height: 100%; color: var(--dark-2); }
  .teams-note { text-align: center; }
  .teams-note img { display: block; width: min(360px, 80%); height: auto; margin: 0 auto; }
  .teams-note p { margin: 1.25rem 0 0; }
  .teams-note a { color: #fff; }

  /* Mobile app: App Store screenshot row */
  .shot-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; max-width: 1000px; margin: 0 auto; }
  .shot-row img { width: 100%; height: auto; border-radius: 16px; }
  @media (max-width: 700px) { .shot-row { grid-template-columns: 1fr; max-width: 320px; } }

  /* Careers: postcard video band */
  .gather-video .postcard-video { display: block; width: min(420px, 85%); margin: 0 auto; border-radius: 16px; }

  /* Inline section video (Tillo shorts) */
  .inline-video video { display: block; width: min(560px, 100%); margin: 2rem auto 0; border-radius: 16px; }

  /* Event photo band */
  .event-photo { width: 100%; border-radius: 20px; }

  /* Customer story video card */
  .story-media.video { position: relative; height: auto; padding: 56.25% 0 0 0; background: #000; }
  .story-media.video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

  /* Video card preview overlay - shown natively everywhere, not just on
     hover, since there's no other visual cue that a thumbnail is actually
     a video rather than a static photo (this used to be hover-only, and
     .prose .video-embed had a one-off override; that's now just the
     default for every play-overlay on the site). */
  .story-media.video .play-overlay, .video-embed .play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.18);
    opacity: 1;
    transition: opacity 0.2s ease;
    cursor: pointer;
  }
  .play-circle {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3);
  }
  .play-circle svg { margin-left: 3px; }

  /* Customer story pages */
  .crumbs { font-size: 0.9rem; color: var(--muted); margin: 0 0 1.5rem; }
  .crumbs a:hover { color: var(--blue); }
  .crumbs span { margin: 0 0.35rem; color: var(--muted-2); }

  /* Section pages (products, countries, industries) carry the same trail at the
     top of a dark photo hero, so the colours invert. partials/crumbs.njk. */
  .crumbs-hero { font-weight: 600; margin: 0 0 1.25rem; color: rgba(255, 255, 255, 0.72); }
  .crumbs-hero a { color: rgba(255, 255, 255, 0.72); }
  .crumbs-hero a:hover { color: #fff; }
  .crumbs-hero .crumbs-sep { margin: 0 0.45rem; color: rgba(255, 255, 255, 0.4); }
  .crumbs-hero .crumbs-here { margin: 0; color: rgba(255, 255, 255, 0.9); }
  /* Same trail on a light hero (the /countries and /verticals hubs). */
  .crumbs-plain { font-weight: 600; margin: 0 0 1.25rem; }
  .crumbs-plain a { color: var(--muted); }
  .crumbs-plain a:hover { color: var(--lava); }
  .crumbs-plain .crumbs-sep { margin: 0 0.45rem; }
  .crumbs-plain .crumbs-here { margin: 0; color: var(--ink); }

  /* Section hubs (/countries, /verticals): a card per page in the section. */
  .hub-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
  .hub-card {
    display: block;
    padding: 1.6rem 1.5rem;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: #fff;
    transition: border-color 0.15s ease, transform 0.15s ease;
  }
  .hub-card:hover { border-color: var(--ink); transform: translateY(-2px); }
  .hub-card-mark { font-size: 1.5rem; line-height: 1; }
  .hub-card h3 { font-family: var(--serif); font-size: 1.25rem; font-weight: 400; color: var(--ink); margin: 0.5rem 0 0.5rem; letter-spacing: -0.01em; }
  .hub-card p { margin: 0; color: var(--body); font-size: 0.95rem; line-height: 1.5; }
  @media (max-width: 1000px) { .hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 640px) { .hub-grid { grid-template-columns: 1fr; } }
  .video-embed { position: relative; padding-top: 56.25%; border-radius: 20px; overflow: hidden; background: #000; }
  .video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
  .video-embed video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .video-embed.portrait { max-width: 420px; padding-top: 0; aspect-ratio: 4 / 5; margin-left: auto; margin-right: auto; }
  .video-embed.square { max-width: 560px; padding-top: 0; aspect-ratio: 1 / 1; margin-left: auto; margin-right: auto; }
  /* Self-hosted equivalent of .lite (Vimeo) and .lite-yt (YouTube): a poster
     image with the standard play-circle, swapped for a real <video> on
     click by the shared #lite-video script in footer.njk. Any page with its
     own mp4 uses this instead of a bare <video controls>, which shows a
     scrubber and a frozen mid-sentence frame before anyone has asked to
     watch anything. */
  .video-embed.lite-video { background-size: cover; background-position: center; cursor: pointer; }
  .statement-cite { display: block; font-family: var(--sans); font-size: 1rem; margin-top: 1.75rem; }
  .statement-cite span { display: block; color: #9a9a9a; font-size: 0.9rem; }


  /* Blog post pages */
  .post-meta { color: var(--muted-2); font-size: 0.95rem; margin: 0; }
  .prose img { border-radius: 16px; margin: 1.5rem 0; }
  .back-link { max-width: 46rem; margin: 3rem auto 0; }
  .prose video { width: 100%; border-radius: 16px; margin: 1.5rem 0; display: block; }

  /* Blog post visuals: pull-quotes, card strips, stat tiles, checklists */
  .prose blockquote { margin: 2.2rem 0; padding: 0.15rem 0 0.15rem 1.4rem; border-left: 3px solid var(--lava); }
  .prose blockquote p { font-family: var(--serif); font-size: 1.35rem; line-height: 1.45; color: var(--ink); margin: 0; }
  .prose .prose-cite { margin: -2.2rem 0 2.2rem; padding: 0.6rem 0 0.15rem 1.4rem; border-left: 3px solid var(--lava); font-size: 0.9rem; color: var(--muted); }
  .prose .post-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1.8rem 0 2.2rem; }
  /* A strip of 2 fills the measure rather than leaving the third column empty. */
  .prose .post-cards:has(> .post-card:nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); }
  .prose .post-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--border); border-radius: 14px; padding: 1.3rem 1.4rem 1.2rem; }
  .prose .post-card .post-kicker { margin: 0 0 0.55rem; }
  .prose .post-card h3 { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; margin: 0 0 0.6rem; color: var(--ink); }
  .prose .post-card p { font-size: 0.92rem; line-height: 1.6; margin: 0 0 0.9rem; }
  .prose .post-card .post-card-verdict { margin: auto 0 0; padding-top: 0.85rem; border-top: 1px solid var(--border); font-size: 0.85rem; font-weight: 600; color: var(--muted); }
  .prose .post-card.accent { border-color: rgba(245, 65, 15, 0.4); }
  .prose .post-card.accent .post-kicker, .prose .post-card.accent .post-card-verdict { color: var(--lava); }
  .prose .post-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; margin: 1.8rem 0 2rem; }
  .prose .post-stat { border-top: 1px solid var(--border); padding-top: 1.1rem; }
  .prose .post-stat .num { font-family: var(--serif); font-size: clamp(2.1rem, 3.4vw, 2.7rem); line-height: 1; display: block; margin-bottom: 0.5rem; color: var(--ink); }
  .prose .post-stat p { margin: 0; color: var(--muted); font-size: 0.88rem; line-height: 1.5; }
  .prose .post-checklist { list-style: none; counter-reset: pcq; margin: 1.8rem 0 2.2rem; padding: 0; border-top: 1px solid var(--border); }
  .prose .post-checklist li { counter-increment: pcq; position: relative; margin: 0; padding: 1.05rem 0 1.05rem 2.7rem; border-bottom: 1px solid var(--border); }
  .prose .post-checklist li::before { content: counter(pcq); position: absolute; left: 0; top: 1.1rem; width: 1.7rem; height: 1.7rem; border-radius: 50%; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font: 600 0.82rem var(--sans); color: var(--lava); }
  .prose .post-checklist li strong { color: var(--ink); }
  @media (max-width: 760px) {
    .prose .post-cards { grid-template-columns: 1fr; }
  }
  @media (max-width: 600px) {
    .prose .post-stats { grid-template-columns: 1fr; gap: 1.2rem; }
  }

  /* Schema comparison figure */
  .prose .schema-figure { margin: 1.8rem 0 2.2rem; }
  .prose .schema-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
  .prose .schema-panel { background: var(--white); border: 1px solid var(--border); border-radius: 14px; padding: 1.2rem 1.3rem 1.1rem; }
  .prose .schema-panel.accent { border-color: rgba(245, 65, 15, 0.4); }
  .prose .schema-label { margin: 0 0 0.9rem; font-size: 0.85rem; font-weight: 600; color: var(--ink); }
  .prose .schema-panel.accent .schema-label { color: var(--lava); }
  .prose .schema-panel svg { display: block; width: 100%; height: auto; overflow: visible; }
  .prose .schema-note { margin: 0.9rem 0 0; padding-top: 0.8rem; border-top: 1px solid var(--border); font-size: 0.85rem; line-height: 1.5; color: var(--muted); }
  .prose .schema-note strong { color: var(--ink); }
  .prose .schema-panel.accent .schema-note strong { color: var(--lava); }
  .prose .schema-figure figcaption { margin-top: 0.9rem; font-size: 0.85rem; color: var(--muted); }
  .prose .schema-figure text { font: 500 10px var(--sans); fill: var(--muted); }
  .prose .schema-tile { fill: var(--bg); stroke: #ded2bd; stroke-width: 1; }
  .prose .schema-tile.lit { fill: var(--pill-gray); stroke: var(--muted); }
  .prose .schema-join { stroke: #7d7d7d; stroke-width: 1; }
  .prose .schema-row { fill: rgba(245, 65, 15, 0.1); stroke: var(--lava); stroke-width: 1.5; }
  .prose .schema-seg { stroke: rgba(245, 65, 15, 0.45); stroke-width: 1; }
  .prose .schema-flow { stroke: var(--lava); stroke-width: 1.5; }
  .prose .schema-out { fill: var(--white); stroke: var(--ink); stroke-width: 1.2; }
  @media (max-width: 600px) {
    .prose .schema-grid { grid-template-columns: 1fr; }
  }

  /* Agent trace figure */
  .prose .trace-figure { margin: 2.2rem 0; }
  .prose .trace-q { font-family: var(--serif); font-size: 1.35rem; line-height: 1.35; color: var(--ink); text-align: center; margin: 0 0 1.4rem; }
  .prose .trace-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
  .prose .trace-panel { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--border); border-radius: 14px; padding: 1.3rem 1.4rem 1.2rem; }
  .prose .trace-panel.accent { border-color: rgba(245, 65, 15, 0.4); }
  .prose .trace-name { margin: 0 0 1rem; font-size: 0.85rem; font-weight: 600; color: var(--ink); }
  .prose .trace-panel.accent .trace-name { color: var(--lava); }
  .prose .trace-steps { list-style: none; counter-reset: tr; margin: 0; padding: 0; font-family: "SF Mono", "Roboto Mono", Menlo, Consolas, monospace; font-size: 0.76rem; line-height: 1.5; }
  .prose .trace-steps li { counter-increment: tr; position: relative; margin: 0; padding: 0.4rem 0 0.4rem 1.9rem; color: var(--muted); }
  .prose .trace-steps li::before { content: counter(tr); position: absolute; left: 0; top: 0.4rem; width: 1.15rem; height: 1.15rem; border-radius: 50%; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font: 600 0.62rem var(--sans); color: var(--muted); }
  .prose .trace-steps li.hit { color: var(--ink); }
  .prose .trace-steps li.hit::before { border-color: var(--ink); color: var(--ink); }
  .prose .trace-panel.accent .trace-steps li.hit { color: var(--lava); }
  .prose .trace-panel.accent .trace-steps li.hit::before { border-color: var(--lava); color: var(--lava); }
  .prose .trace-result { margin: auto 0 0; padding-top: 1rem; border-top: 1px solid var(--border); }
  .prose .trace-kicker { display: block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.35rem; }
  .prose .trace-sum { display: block; font-family: var(--serif); font-size: 2rem; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
  .prose .trace-panel.accent .trace-sum { color: var(--lava); }
  .prose .trace-why { display: block; margin-top: 0.5rem; font-size: 0.8rem; line-height: 1.45; color: var(--muted); }
  .prose .trace-verdict { margin: 1.3rem 0 0; padding-top: 1rem; border-top: 1px solid var(--border); text-align: center; font-size: 0.92rem; color: var(--ink); }
  .prose .trace-answer { color: var(--lava); font-weight: 700; white-space: nowrap; }
  @media (max-width: 600px) {
    .prose .trace-grid { grid-template-columns: 1fr; }
  }

  /* Blog post tables */
  .prose table { width: 100%; border-collapse: collapse; margin: 1.8rem 0; font-size: 0.92rem; display: block; overflow-x: auto; }
  .prose thead th { background: var(--bg); font-weight: 600; color: var(--ink); }
  .prose th, .prose td { padding: 0.65rem 0.9rem; text-align: left; border: 1px solid var(--border); vertical-align: top; }
  .prose td code, .prose th code { white-space: nowrap; }

  /* Mobile responsiveness fixes */
  html, body { overflow-x: clip; }
  .compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .compare-wrap table { min-width: 560px; }
  @media (max-width: 600px) {
    .tab-row { display: flex; flex-wrap: wrap; justify-content: center; border-radius: 20px; }
    .btn-black { padding: 1rem 2.5rem; }
    .timeline-ctas { display: flex; flex-direction: column; gap: 0.75rem; align-items: center; }
    .key-details { grid-template-columns: 1fr; }
    .cta-panel { padding: 3rem 1.5rem 3.5rem; }
    .academy-hero { padding: 4rem 0 3.5rem; }
  }

  /* The kicker /blog once set above every card. The grid is the Blog canvas's
     now, but post markdown and the header's featured link still use this. */
  .post-kicker { font-size: 0.82rem; font-weight: 600; color: var(--muted); margin: 0 0 0.5rem; text-transform: uppercase; letter-spacing: 0.05em; }

  /* Mobile menu */
  .menu-btn { display: none; }
  .mobile-menu[hidden] { display: none; }
  .mobile-menu {
    position: fixed;
    inset: 0;
    background: rgba(242, 242, 247, 0.72);
    -webkit-backdrop-filter: blur(36px) saturate(1.8);
    backdrop-filter: blur(36px) saturate(1.8);
    z-index: 1000;
    padding: 1rem 1.25rem 1.5rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
  }
  .mm-top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
  .mm-close, .mm-spacer { display: flex; align-items: center; background: none; border: none; cursor: pointer; width: 3.5rem; color: var(--ink); }
  .mm-nav details summary { list-style: none; cursor: pointer; }
  .mm-nav details summary::-webkit-details-marker { display: none; }
  .mm-nav > a, .mm-nav summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.05rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 1rem;
    font-weight: 500;
    color: var(--ink);
  }
  .mm-nav summary::after { content: "\25BE"; color: var(--muted); font-size: 0.8rem; }
  .mm-nav details[open] summary::after { transform: rotate(180deg); }
  .mm-sub { display: flex; flex-direction: column; padding: 0.25rem 0 0.75rem 1rem; }
  .mm-sub a { padding: 0.5rem 0; font-size: 0.95rem; color: #444; }
  .mm-demo { margin-top: 1.75rem; width: 100%; }
  @media (max-width: 960px) {
    .menu-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: none;
      border: none;
      padding: 0.4rem;
      cursor: pointer;
      color: #FF4800;
    }
  }
  @media (max-width: 600px) {
    .nav-pill .btn-nav { display: none; }
    .nav-pill { gap: 0.75rem; }
  }

  /* Footer accordion on mobile */
  @media (max-width: 960px) {
    .footer-cols { grid-template-columns: 1fr; gap: 0; }
    .footer-cols > div { border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
    .footer-cols h3 {
      margin: 0;
      padding: 1.05rem 0;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .footer-cols h3::after { content: "\25BE"; color: var(--muted); font-size: 0.8rem; }
    .footer-cols > div.open h3::after { transform: rotate(180deg); }
    .footer-cols ul { display: none; padding-bottom: 1.1rem; }
    .footer-cols > div.open ul { display: flex; }
    .footer-top { margin-bottom: 0; }
    .footer-divider { display: none; }
  }

  /* Mobile header: Menu | logo | Login */
  @media (max-width: 960px) {
    .nav-outer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
    .menu-btn { justify-self: start; }
    header.site .logo { justify-self: center; }
    .nav-pill { justify-self: end; }
    header.site .nav-pill .nav-item,
    header.site .nav-pill .btn-nav,
    header.site .nav-pill a.navlink { display: none; }
    header.site .nav-pill a.nav-login { display: inline-block; }
  }

  /* Bento rebuilt to match light.inc */
  .bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: stretch; }
  .bento-col { display: flex; flex-direction: column; gap: 1.5rem; }
  .bcard {
    flex: 1 1 auto;
    background: #212123;
    border: 1px solid #303032;
    border-radius: 18px;
    padding: 2.25rem 2rem;
    color: #fff;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    min-height: 180px;
  }
  .bcard.tall { min-height: 300px; }
  .bcard.grow { flex: 1; }
  .bcard h3 { margin: 0; font-size: 1rem; font-weight: 600; font-family: var(--sans); }
  .bcard h3.big { font-size: 1.6rem; font-weight: 700; }
  .bcard p { margin: 0; color: #999; font-size: 0.92rem; max-width: 26rem; }
  .bcard .kicker { color: #888; font-size: 0.85rem; font-weight: 600; margin: 0; }
  .bcard .pill-mint { display: inline-block; background: var(--mint); color: #fff; font-weight: 700; font-size: 0.9rem; padding: 0.45rem 1.2rem; border-radius: 4px; }
  .bcard.grow { position: relative; overflow: hidden; }
  .bcard.grow::before {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 280px; height: 280px;
    transform: translate(-50%, -50%);
    border-radius: 48px;
    background:
      radial-gradient(circle at 80% 8%, rgba(255, 215, 110, 0.95), transparent 42%),
      radial-gradient(circle at 100% 50%, rgba(255, 175, 85, 0.7), transparent 45%),
      radial-gradient(circle at 65% 102%, rgba(165, 120, 255, 0.7), transparent 50%),
      radial-gradient(circle at 8% 85%, rgba(255, 140, 200, 0.45), transparent 48%),
      radial-gradient(circle at 12% 20%, rgba(255, 190, 140, 0.3), transparent 45%);
    filter: blur(26px);
  }
  .glow-tile {
    position: relative;
    z-index: 1;
    width: 230px; height: 230px;
    background: #0c0c0c;
    border-radius: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .tile-cap { position: absolute; left: 1.1rem; bottom: 1rem; font-size: 0.72rem; color: #ddd; text-align: left; line-height: 1.3; }
  .appr-flow { display: flex; flex-direction: column; align-items: center; }
  .appr {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: #2e2e2e; border-radius: 999px;
    padding: 0.5rem 1.1rem 0.5rem 0.6rem;
    font-size: 0.95rem; font-weight: 500;
  }
  .appr .dot { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 700; }
  .appr .dot.ok { background: #2ecb6e; color: #fff; }
  .appr .dot.q { background: #555; color: #ddd; }
  .appr-line { width: 1px; height: 26px; background: #555; }
  .msg-pill {
    display: inline-flex; align-items: center; gap: 0.6rem;
    background: #fff; color: #7a7a80;
    border-radius: 12px;
    padding: 0.85rem 2.2rem 0.85rem 0.9rem;
    font-size: 0.95rem;
  }
  .msg-pill .plus { width: 22px; height: 22px; border-radius: 50%; background: #ececf0; color: #8a8a90; display: inline-flex; align-items: center; justify-content: center; font-size: 0.95rem; }
  .bcard.crop { padding: 0; overflow: hidden; position: relative; justify-content: flex-start; min-height: 300px; }
  .bcard.crop h3 { position: relative; z-index: 1; padding: 1.6rem 0 0; }
  .report-img { position: absolute; right: -12%; bottom: -8%; width: 105%; max-width: none; border-radius: 12px; }
  @media (max-width: 960px) { .bento { grid-template-columns: 1fr; } }

  .compare-line { text-align: center; color: #fff; font-size: 1.35rem; font-weight: 600; margin: 3.5rem 0 0; }
  .compare-pill {
    display: inline-flex; align-items: center; gap: 0.4rem;
    background: #2e2e2e; border-radius: 4px;
    padding: 0.35rem 1.1rem; margin-left: 0.35rem;
  }
  .compare-pill .chev { color: #999; font-size: 0.85rem; }

  .section-head.wide { max-width: 1050px; }
  .section-head.wide h2 { white-space: nowrap; }
  @media (max-width: 1100px) { .section-head.wide h2 { white-space: normal; } }

  .ctx-box {
    background: #2c2c2e;
    border-radius: 12px;
    padding: 1rem 1.1rem 0.85rem;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 280px;
  }
  .ctx-box p { margin: 0; color: #d5d5d8; font-size: 0.82rem; line-height: 1.45; }
  .ctx-label { color: #8e8e93; font-size: 0.72rem; }
  .ctx-chip {
    align-self: flex-end;
    background: #fff;
    color: #333;
    border-radius: 4px;
    padding: 0.3rem 0.75rem;
    font-size: 0.76rem;
    font-weight: 500;
  }

  .eu-badge { text-align: center; color: var(--muted); font-size: 0.9rem; margin: 2.5rem 0 0; }

  /* Photo hero (country pages) */
  .hero-photo {
    position: relative;
    background-size: cover;
    background-position: center;
    margin-top: -70px;
    padding: calc(7rem + 70px) 0 6.5rem;
  }
  .hero-photo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.45));
  }
  .hero-photo .wrap { position: relative; }
  .hero-photo h1 { color: #fff; }
  .hero-photo p.sub { color: #e8e8e8; }
  .hero-photo .pill-tag { background: rgba(255,255,255,0.94); border-color: transparent; }
  .hero-photo .btn-black { background: #fff; color: #000; }
  .hero-photo .btn-black:hover { background: #ececec; }

  /* Photo + text split */
  .photo-split { display: grid; grid-template-columns: 5fr 7fr; gap: 3.5rem; align-items: stretch; max-width: 1050px; margin: 0 auto; }
  .photo-split img { width: 100%; height: 0; min-height: 100%; object-fit: cover; border-radius: 20px; }
  .photo-split video { display: block; width: 100%; height: auto; align-self: start; object-fit: cover; border-radius: 20px; }
  .photo-split.flip { grid-template-columns: 7fr 5fr; }
  .photo-split.flip img, .photo-split.flip video { order: 2; }
  .events-hackathon-video { margin-bottom: 3.5rem; }
  .events-hackathon-video video { padding: 0.75rem; background: var(--bg); box-sizing: border-box; }
  .photo-split h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.7rem, 3vw, 2.4rem); margin: 0 0 1rem; }
  .photo-split p { color: var(--body); line-height: 1.6; margin: 0 0 1rem; }
  @media (max-width: 900px) {
    /* Belt and suspenders: display:flex + flex-direction:column stacks
       unconditionally, rather than leaning on a single-column grid track
       to auto-wrap into rows. .flip's existing order:2 on img/video still
       applies here (flex respects order same as grid), which keeps the
       same media-first / text-first alternation on mobile that the
       desktop layout has - not resetting it, just making the stacking
       itself more robust. */
    .photo-split { display: flex; flex-direction: column; gap: 1.75rem; max-width: 100%; }
    .photo-split img, .photo-split video { width: 100%; }
    .photo-split img { height: auto; min-height: 0; aspect-ratio: 4/5; }
  }

  .role-logo { width: auto; display: inline-block; vertical-align: middle; margin-left: 0.4rem; margin-top: -2px; }

  /* Before/after finance-stack compare (customer stories). Static side by
     side on desktop; becomes a scroll-snapped swipe slider under 780px,
     see .stack-compare script in footer.njk for the dot controls. */
  .stack-compare-track {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    max-width: 1000px;
    margin: 0 auto;
    align-items: start;
  }
  .stack-compare-panel { text-align: center; }
  .stack-compare-label { font-family: var(--serif); font-size: 1.25rem; color: var(--ink); margin: 0 0 1.25rem; }
  .stack-compare-panel img { width: 100%; margin: 0 auto; }
  .stack-compare-toggle { display: none; }
  .stack-compare-divider { display: none; }

  /* v2: wider gap plus a divider that reads as the scattered before-tools
     being pulled into Light, rather than two boxed-off cards. Panels stay
     bare, same as the default look, no competing backdrops. Opt-in via
     variant="v2" on the stackCompare macro call, piloted on Oper Credits
     first. */
  .stack-compare-v2 .stack-compare-track { grid-template-columns: 1fr auto 1fr; gap: 2.5rem; max-width: 1120px; align-items: center; }
  .stack-compare-v2 .stack-compare-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 64px;
    height: 46px;
    color: var(--lava);
  }
  .stack-compare-v2 .stack-compare-divider::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    transform: translateY(-50%);
    background: linear-gradient(90deg, transparent, var(--muted-2) 35%, var(--lava) 100%);
  }
  .stack-compare-v2 .stack-compare-divider svg {
    position: relative;
    width: 30px;
    height: 30px;
    background: #fff;
  }
  @media (max-width: 780px) {
    /* Labeled Before/With Light toggle replaces the bare-photo label on
       mobile, and doubles as an obvious "there are two of these" cue on
       top of the native swipe, since two nearly-identical diagrams with
       no visible edge of the next one is easy to mistake for one static
       image. */
    .stack-compare-toggle {
      display: flex;
      justify-content: center;
      gap: 0.4rem;
      margin: 0 0 1.5rem;
      padding: 0.3rem;
      background: var(--bg);
      border-radius: 999px;
      max-width: max-content;
      margin-left: auto;
      margin-right: auto;
    }
    .stack-compare-toggle button {
      border: 0;
      background: transparent;
      padding: 0.55rem 1.1rem;
      border-radius: 999px;
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--muted);
      cursor: pointer;
      transition: background 0.2s ease, color 0.2s ease;
    }
    .stack-compare-toggle button.is-active { background: var(--ink); color: #fff; }
    .stack-compare-label { display: none; }
    .stack-compare-track {
      display: flex;
      gap: 0.85rem;
      margin: 0 -1.25rem;
      padding: 0 2.25rem;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .stack-compare-track::-webkit-scrollbar { display: none; }
    /* Panels sit at 88% width so the next one visibly peeks in from the
       edge, a second, always-visible signal (independent of the toggle)
       that this scrolls. */
    .stack-compare-panel { flex: 0 0 88%; scroll-snap-align: center; }
    .stack-compare-divider { display: none; }
    /* .stack-compare-v2's unconditional (non-media-gated) gap and divider
       rules above out-specificity these plain-class resets, so they need
       matching .stack-compare-v2-prefixed overrides here to actually win
       on mobile - same class of bug as the nav-panel/photo-split fixes. */
    .stack-compare-v2 .stack-compare-track { gap: 0.85rem; padding: 0 0.75rem; }
    .stack-compare-v2 .stack-compare-divider { display: none; }
    /* v2 leans on the Before/With Light toggle as the way to switch
       panels, not an edge peek, so each graph takes the full width and
       sits centered instead of the default 88%-with-a-sliver-showing. */
    .stack-compare-v2 .stack-compare-panel { flex: 0 0 100%; }
  }

  .statement .accent-orange { color: var(--lava); }

  /* Customer story pages: tighter hero */
  .sec.tight-top { padding-top: 2.5rem; }

  /* Nav: links left, logo centered, actions right */
  .nav-outer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
  .nav-pill.nav-left { justify-self: start; }
  header.site .logo { justify-self: center; }
  .nav-pill.nav-right { justify-self: end; }
  @media (max-width: 960px) {
    .nav-pill.nav-left { display: none; }
  }

  /* Book a demo page */
  .demo-page { background: var(--dark); color: #fff; padding: 5.5rem 0 6rem; min-height: 70vh; }
  .demo-split { display: grid; grid-template-columns: 5fr 6fr; gap: 4.5rem; align-items: start; }
  /* Grid items default to min-width:auto, so a child's intrinsic content size
     (the hero photo's natural 1200px width, before object-fit/100% width has
     resolved) can force this column wider than its track - a transient ~16px
     "blowout" that resolves into a real layout shift once box-sizing settles.
     min-width:0 is the standard fix: let the track define the width, always. */
  .demo-intro, .demo-form { min-width: 0; }
  .demo-intro h1 { font-size: clamp(2.4rem, 4.5vw, 3.6rem); margin: 0 0 1.25rem; color: #fff; }
  .demo-intro p { color: #b5b5b5; font-size: 1.1rem; line-height: 1.6; max-width: 26rem; margin: 0 0 3rem; }
  .demo-intro p.sub { color: #fff; font-size: 1.2rem; font-weight: 500; margin: 0 0 1rem; }
  .demo-logos { display: flex; flex-wrap: wrap; gap: 2rem 2.5rem; align-items: center; opacity: 0.75; }
  .demo-logos img { height: 24px; width: auto; filter: brightness(0) invert(1); opacity: 0.9; }
  .demo-form { background: #fff; border-radius: 24px; padding: 2.5rem; color: var(--ink); }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
  .form-field { margin-bottom: 1.4rem; }
  .form-field label { display: block; font-weight: 600; font-size: 0.95rem; margin-bottom: 0.5rem; }
  .form-field .req { color: #d0342c; margin-left: 2px; }
  .form-field input, .form-field select {
    width: 100%;
    background: #efeff1;
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 0.9rem 1rem;
    font: inherit;
    font-size: 0.95rem;
    color: var(--ink);
  }
  .form-field input:focus, .form-field select:focus { outline: none; border-color: #bbb; background: #fff; }
  .form-field .invalid { border-color: #d0342c; }
  .phone-row { display: flex; gap: 0.5rem; }
  .phone-row select { width: 110px; flex: none; }
  .form-note { font-size: 0.85rem; line-height: 1.4; color: var(--body); margin: 1.2rem 0 0.9rem; }
  .form-note a { color: var(--blue); text-decoration: underline; }
  .form-recaptcha { font-size: 0.78rem; color: var(--muted-2); margin: 0 0 1.5rem; }
  .form-recaptcha a { text-decoration: underline; }
  .form-actions { display: flex; justify-content: flex-end; }
  .form-submit { padding: 0.9rem 2.6rem; background: var(--lava); color: #fff; }
  .form-submit:hover { background: var(--lava-dark); }
  .form-success { font-size: 1.05rem; font-weight: 500; margin: 0; }
  .form-error { color: #d0342c; font-size: 0.9rem; font-weight: 500; margin: 0 0 0.9rem; }
  /* Up-front hint under a field. Says the rule BEFORE submit, so nobody hits a
     rejection they could not have predicted (2026-07-17: a paid lead retried six
     times against a silent free-email block, then left). */
  .form-hint { color: var(--muted-2); font-size: 0.82rem; margin: 0.35rem 0 0; line-height: 1.4; }
  /* NOTE: a min-height reserve was tried here on 2026-07-17 and REVERTED same day.
     The theory was that Turnstile rendered late and pushed the form down. It does
     not: measured over 6s, the container sits at a constant 65px and, because the
     widget is appearance="interaction-only", it renders NO iframe at all for a
     normal visitor. The reserve therefore held 65px of empty space for something
     that never appears, and live CLS got WORSE with it in (0.162 -> 0.211, stable
     over 3 runs). The real shift is a .form-field changing height by ~43px; the
     open suspect is the work-email hint (2 lines, 37px) added the same day.
     See the Notion task before trying this again. */
  .cf-turnstile { margin: 0 0 1.2rem; }
  /* Partner application form: centered card on the /partners page (vs the demo page's 2-col split). */
  .partner-form { max-width: 620px; margin: 2.5rem auto 0; }
  .form-field textarea {
    width: 100%; box-sizing: border-box; background: #efeff1; border: 1px solid transparent;
    border-radius: 12px; padding: 0.6rem 1rem; font: inherit; font-size: 0.95rem; color: var(--ink);
    resize: vertical; min-height: 92px;
  }
  .form-field textarea:focus { outline: none; border-color: #bbb; background: #fff; }
  .form-field .opt { color: #888; font-weight: 400; }
  @media (max-width: 900px) {
    .demo-split { grid-template-columns: 1fr; gap: 2.5rem; }
    .demo-page { padding: 3.5rem 0 4rem; }
    /* Stacked, the /book-a-demo photo pushed the form a screen and a half down.
       The <source> in book-a-demo.njk keeps the file off the wire here too. */
    .demo-photo-fig { display: none; }
  }

  .logo-row .wordmark { font-weight: 700; font-size: 1.15rem; color: #555; letter-spacing: -0.01em; white-space: nowrap; }

  /* Rolling logo carousel - full-bleed, not just a wide box inside .wrap's
     max-width: sitting at .wrap's ~1200px column left dead space on either
     side, so the scroll looked cut off well short of the section's own
     edges instead of running the section's full width. */
  .logo-marquee {
    overflow: hidden;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
  .logo-track {
    display: flex;
    width: max-content;
    animation: logo-scroll 50s linear infinite;
    filter: grayscale(1);
    opacity: 0.55;
  }
  .logo-marquee:hover .logo-track { animation-play-state: paused; }
  .logo-set { display: flex; align-items: center; gap: 3.5rem; padding-right: 3.5rem; }
  .logo-set img { height: 22px; width: auto; max-width: 200px; object-fit: contain; }
  @keyframes logo-scroll { to { transform: translateX(-50%); } }

  /* Nav CTA: always the brand orange, so "Book a demo" reads as the header's
     one clear action at every scroll position, not just once scrolled. */
  .btn-nav:hover { background: var(--lava-dark); }

  .manifesto-tile { display: flex; justify-content: center; margin-bottom: 3rem; }
  .manifesto-tile .bcard { background: transparent; border: none; padding: 1rem; min-height: 0; }

  /* Homepage manifesto section */
  .manifesto-home { display: grid; grid-template-columns: 7fr 5fr; gap: 4rem; align-items: center; max-width: 1050px; margin: 0 auto; }
  .manifesto-home h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.9rem, 3.4vw, 2.8rem); line-height: 1.25; margin: 0 0 1.1rem; }
  .manifesto-home > div > p { color: var(--body); font-size: 1.05rem; line-height: 1.65; margin: 0 0 2rem; }
  .manifesto-home img { width: 100%; border-radius: 20px; }
  .signature { display: inline-block; }
  .signature svg { width: 180px; height: auto; display: block; }
  .signature path {
    stroke: var(--ink);
    fill: none;
    stroke-width: 1.51;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
  }
  .signature.drawn path { animation: sig-stroke 2.4s ease-in-out forwards; }
  @keyframes sig-stroke { to { stroke-dashoffset: 0; } }
  .sig-caption { font-size: 0.85rem; color: var(--muted); margin: 0.4rem 0 0 !important; }
  .manifesto-home .manifesto-link { margin: 1.75rem 0 0; }
  @media (max-width: 900px) { .manifesto-home { grid-template-columns: 1fr; gap: 2rem; } }

  .careers-video { margin-top: 2.5rem; max-width: 900px; margin-left: auto; margin-right: auto; }

  .story-media.video.lite { background-size: cover; background-position: center; cursor: pointer; }

  .video-embed.lite { background-size: cover; background-position: center; cursor: pointer; }

  .story-card .story-media.video { background-size: cover; background-position: center; }

  .story-media.video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .story-media.video { position: relative; }

  /* Customer story hero with pull-quote */
  .story-kicker { font-size: 0.9rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 1.5rem; }
  .story-attrib { color: var(--muted); font-size: 1.05rem; margin: 1.5rem 0 0; }


/* ===== /versus comparison pages ===== */
.versus-table { width:100%; border-collapse:collapse; margin-top:1.5rem; font-size:1rem; }
.versus-table th, .versus-table td { padding:0.85rem 1rem; text-align:left; border-bottom:1px solid var(--border); }
.versus-table th:not(:first-child), .versus-table td:not(:first-child) { text-align:center; width:18%; }
.versus-table thead th { font-weight:700; }
.versus-table .yes { color:#1a9e5f; font-weight:700; }
.versus-table .no { color:#c0392b; font-weight:700; }
.versus-table.versus-matrix .yes { color:var(--pass); }
.versus-table.versus-matrix .no { color:var(--muted-2); }
.versus-table.versus-matrix { table-layout:fixed; }
.versus-table.versus-matrix th, .versus-table.versus-matrix td { overflow-wrap:anywhere; }
.versus-table.versus-matrix tbody th { font-weight:400; }
.comparison-pixel-status { display:block; width:30px; height:30px; margin:auto; }
.sec.versus-comparison-section { padding-bottom:0; }
.sec.versus-explanation { padding-top:clamp(2rem,5vw,4rem); }
.versus-explanation .prose > h2:first-child { margin-top:0; }
@media (max-width:640px){ .versus-table.versus-matrix th, .versus-table.versus-matrix td { padding:.85rem .55rem; } }
.versus-table .partial { color:#b8860b; font-weight:700; }
.versus-table .vnote { display:block; font-size:0.72rem; line-height:1.25; color:#8a8a8a; font-weight:400; margin-top:3px; }
.wrap.center, .center { text-align:center; }
.versus-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-top:1rem; }
.versus-cards:has(> .versus-card:nth-child(2):last-child) { grid-template-columns:repeat(2,1fr); }
.versus-card { display:flex; flex-direction:column; background:#141414; border:1px solid #262626; border-radius:18px; padding:1.7rem 1.6rem 0; overflow:hidden; }
.versus-card h3 { color:#fff; font-size:1.3rem; font-weight:600; margin:0 0 .55rem; }
.versus-card p { color:#a9a9a9; font-size:1rem; line-height:1.5; margin:0 0 1.5rem; }
.versus-card img { display:block; width:100%; height:200px; object-fit:cover; object-position:center; margin-top:auto; border-radius:10px 10px 0 0; }
@media (max-width:820px){ .versus-cards { grid-template-columns:1fr; } }

/* --- versus: proof-point band, in the customer-story outcome style --- */
.versus-proof { display:grid; grid-template-columns:repeat(4,1fr); column-gap:40px; row-gap:0; max-width:1100px; margin:0 auto; padding:56px 0; border-top:1px solid #e8e8e7; border-bottom:1px solid #e8e8e7; }
/* Each cell spans the band's label, figure and caption rows, so captions line up even when a figure wraps. */
.versus-proof-cell { display:grid; grid-row:span 3; grid-template-rows:subgrid; align-content:start; }
/* Headlines never wrap: the figure scales with its cell (container units). --proof-em is the
   widest headline in that language, measured in ems, so it just fits. Re-measure if a headline changes. */
.versus-proof-cell { container-type:inline-size; min-width:0; }
:lang(de) .versus-proof { --proof-em:12.8; } :lang(fr) .versus-proof { --proof-em:11.6; }
:lang(es) .versus-proof, :lang(it) .versus-proof { --proof-em:11.4; }
:lang(nl) .versus-proof { --proof-em:10.9; } :lang(sv) .versus-proof { --proof-em:10.6; }
.versus-proof-label { grid-row:1; } .versus-proof-num { grid-row:2; } .versus-proof-cell p:last-child { grid-row:3; }
.versus-proof-label { margin:0 0 6px; font-size:13px; color:#626261; }
.versus-proof-num { display:block; font-family:"Lora","Lora Fallback",Georgia,"Times New Roman",serif; font-size:min(30px, calc(100cqi / var(--proof-em, 9.4))); line-height:1.12; white-space:nowrap; letter-spacing:-0.01em; font-variant-numeric:tabular-nums; color:#000; }
.versus-proof-cell p:last-child { margin:12px 0 0; max-width:30ch; font-size:15px; line-height:1.5; color:#626261; text-wrap:pretty; }
@media (max-width:1080px){ .versus-proof { grid-template-columns:repeat(2,1fr); column-gap:32px; padding:40px 0; } .versus-proof-cell { padding-bottom:32px; } }
@media (max-width:520px){ .versus-proof { grid-template-columns:1fr; } }

/* --- versus: photo hero background --- */
.versus-hero { position:relative; background:#0d0d0d url('/assets/images/versus-hero-bg.jpg') center 42% / cover no-repeat; }
.versus-hero::before { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,8,8,.55) 0%, rgba(8,8,8,.72) 100%); z-index:0; }
.versus-hero > .wrap { position:relative; z-index:1; }
.versus-hero h1 { color:#fff; }
.versus-hero p.sub { color:rgba(255,255,255,.88); }
.versus-hero .pill-tag { background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.28); }

  .pay-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2.75rem 3.5rem; margin: 3rem auto 0; max-width: 900px; filter: grayscale(1); opacity: 0.62; }
  .pay-row img { height: 30px; width: auto; object-fit: contain; }
  @media (max-width: 560px) { .pay-row { gap: 2rem 2.5rem; } .pay-row img { height: 24px; } }
/* --- book-a-demo: white card behind the HubSpot form (page section is dark) --- */
  /* Book a demo form (HubSpot embed, brand-styled) */
  .demo-form-wrap { background: #fff; border-radius: 24px; padding: 2.5rem; color: var(--ink); }
  .demo-form-wrap .hs-form-field { margin-bottom: 1.4rem; }
  .demo-form-wrap .hs-form-field > label { display: block; font-weight: 600; font-size: 0.95rem; color: var(--ink); margin-bottom: 0.5rem; }
  .demo-form-wrap .hs-form-required { color: var(--lava); margin-left: 2px; }
  .demo-form-wrap .hs-input:not([type=checkbox]):not([type=radio]) {
    width: 100% !important;
    box-sizing: border-box;
    background: #f2ede3;
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 0.9rem 1rem;
    font: inherit;
    font-size: 0.95rem;
    color: var(--ink);
    transition: border-color 0.15s ease, background 0.15s ease;
  }
  .demo-form-wrap select.hs-input { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.6' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; }
  .demo-form-wrap .hs-input:focus { outline: none; border-color: var(--lava); background: #fff; }
  .demo-form-wrap .hs-input.invalid.error, .demo-form-wrap .hs-input.error { border-color: #d0342c; }
  .demo-form-wrap .hs-error-msgs { list-style: none; margin: 0.4rem 0 0; padding: 0; }
  .demo-form-wrap .hs-error-msg, .demo-form-wrap .hs-error-msgs label { color: #d0342c; font-size: 0.82rem; }
  .demo-form-wrap fieldset { max-width: none !important; }
  .demo-form-wrap fieldset.form-columns-2 .hs-form-field { float: none; width: 100% !important; }
  .demo-form-wrap fieldset.form-columns-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; }
  .demo-form-wrap fieldset.form-columns-2 .input { margin-right: 0 !important; }
  .demo-form-wrap .hs-richtext, .demo-form-wrap .legal-consent-container, .demo-form-wrap .hs-form p { font-size: 0.88rem; color: var(--body); line-height: 1.5; margin: 0.5rem 0 1.25rem; }
  .demo-form-wrap .hs-richtext a, .demo-form-wrap a { color: var(--lava); text-decoration: underline; }
  .demo-form-wrap .hs-phone .input { display: flex; gap: 0.5rem; }
  .demo-form-wrap .hs-button, .demo-form-wrap input[type=submit] {
    background: var(--lava);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.9rem 2.6rem;
    font: inherit;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.15s ease;
  }
  .demo-form-wrap .hs-button:hover, .demo-form-wrap input[type=submit]:hover { background: var(--lava-dark); }
  .demo-form-wrap .hs_submit .actions { display: flex; justify-content: flex-end; margin-top: 0.5rem; }
  .demo-form-wrap .hs_recaptcha { margin: 0.5rem 0 1.25rem; }
  .demo-form-wrap .submitted-message { font-size: 1.05rem; font-weight: 500; color: var(--ink); }
  @media (max-width: 560px) { .demo-form-wrap fieldset.form-columns-2 { grid-template-columns: 1fr; } }

  /* Brand eyebrow label */
  .eyebrow { display: block; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); margin: 0 0 1rem; }
  .eyebrow.accent { color: var(--lava); }

  /* Brand pixel feature icons + grid framing (site-wide) */
  .feature-cols > div { border-top: 1px solid var(--border); padding: 1.6rem 1.75rem 0.5rem; }
  .feature-cols > div + div { border-left: 1px solid var(--border); }
.feature-cols.cols-3 > div:nth-child(3n+1) { border-left: none; }
.feature-cols.cols-4 > div:nth-child(4n+1) { border-left: none; }
  .feature-cols > div::before { content: ""; display: block; width: 30px; height: 30px; margin: 0 0 1.1rem; background-color: var(--lava); -webkit-mask: center/contain no-repeat; mask: center/contain no-repeat; }
  .feature-cols > div:nth-child(1)::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22black%22%3E%3Crect%20x%3D%221%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22black%22%3E%3Crect%20x%3D%221%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3C%2Fsvg%3E"); }
  .feature-cols > div:nth-child(2)::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22black%22%3E%3Crect%20x%3D%221%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%229%22%20y%3D%229%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22black%22%3E%3Crect%20x%3D%221%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%229%22%20y%3D%229%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3C%2Fsvg%3E"); }
  .feature-cols > div:nth-child(3)::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22%2523000%22%3E%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%228%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%221%22%20height%3D%228%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%221%22%20width%3D%221%22%20height%3D%228%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%228%22%20width%3D%228%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22%2523000%22%3E%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%228%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%221%22%20height%3D%228%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%221%22%20width%3D%221%22%20height%3D%228%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%228%22%20width%3D%228%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%2F%3E%3C%2Fsvg%3E"); }
  .feature-cols > div:nth-child(4)::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22%2523000%22%3E%3Crect%20x%3D%222%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22%2523000%22%3E%3Crect%20x%3D%222%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3C%2Fsvg%3E"); }
  .feature-cols > div:nth-child(5)::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22%2523000%22%3E%3Crect%20x%3D%220%22%20y%3D%226%22%20width%3D%221%22%20height%3D%224%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%224%22%20width%3D%221%22%20height%3D%226%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%221%22%20width%3D%221%22%20height%3D%229%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%225%22%20width%3D%221%22%20height%3D%225%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%223%22%20width%3D%221%22%20height%3D%227%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22%2523000%22%3E%3Crect%20x%3D%220%22%20y%3D%226%22%20width%3D%221%22%20height%3D%224%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%224%22%20width%3D%221%22%20height%3D%226%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%221%22%20width%3D%221%22%20height%3D%229%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%225%22%20width%3D%221%22%20height%3D%225%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%223%22%20width%3D%221%22%20height%3D%227%22%2F%3E%3C%2Fsvg%3E"); }
  .feature-cols > div:nth-child(6)::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22%2523000%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22%2523000%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3C%2Fsvg%3E"); }
  .feature-cols > div:first-child { padding-left: 0; }
  /* first cell of EVERY row sits flush left (not just the very first) */
  .feature-cols.cols-3 > div:nth-child(3n+1) { padding-left: 0; }
  .feature-cols.cols-4 > div:nth-child(4n+1) { padding-left: 0; }
  .feature-cols:not(.cols-2):not(.cols-3):not(.cols-4):not(.narrow-3) > div:nth-child(4n+1) { padding-left: 0; border-left: none; }
  .feature-cols.cols-2 > div:nth-child(2n+1) { padding-left: 0; border-left: none; }
  @media (max-width: 900px) { .feature-cols > div + div { border-left: none; } .feature-cols > div { padding-left: 0; } }


/* --- thank-you page: photo hero + image cards --- */
.thanks-hero { position:relative; background:#0d0d0d url('/assets/images/thanks-hero-bg.jpg') center 32% / cover no-repeat; }
.thanks-hero::before { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,8,8,.5) 0%, rgba(8,8,8,.72) 100%); z-index:0; }
.thanks-hero > .wrap { position:relative; z-index:1; }
.thanks-hero h1 { color:#fff; }
.thanks-hero p.sub { color:rgba(255,255,255,.88); }
.thanks-hero .pill-tag { background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.28); }
.wait-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:1rem; }
.wait-card { display:block; color:inherit; text-decoration:none; }
.wait-card img { display:block; width:100%; height:210px; object-fit:cover; border-radius:12px; margin-bottom:1.1rem; }
.wait-card h3 { font-size:1.3rem; font-weight:600; margin:0 0 .45rem; }
.wait-card p { color:var(--body); margin:0 0 .7rem; font-size:1rem; line-height:1.5; }
.wait-card:hover .link-arrow { text-decoration:underline; }
@media (max-width:820px){ .wait-cards { grid-template-columns:1fr; } }

  @media (max-width: 900px) {
    .demo-logos { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem 1.5rem; align-items: center; justify-items: start; }
    .demo-logos img { height: 22px; }
  }
/* --- glossary --- */
.glossary-body { max-width:720px; }
.glossary-body p { font-size:1.15rem; line-height:1.7; color:var(--body); margin:0 0 1.6rem; white-space:pre-line; }
.glossary-related { background:var(--bg); border-radius:12px; padding:1.1rem 1.4rem; margin:0 0 2rem; }
.glossary-related p { margin:0; font-size:0.98rem; color:var(--body); }
.glossary-related a { color:var(--lava); font-weight:600; text-decoration:underline; }
.glossary-cta { display:flex; flex-direction:column; align-items:center; gap:1.4rem; text-align:center; }
.glossary-cta .link-arrow { margin:0; }

.glossary-back-link { display:inline-block; margin:0 0 2.5rem; }
.glossary-closing {
  background:var(--bg); border-radius:16px; padding:2.75rem 2.5rem;
  display:flex; flex-direction:column; align-items:center; gap:1rem; text-align:center;
}
.glossary-closing h3 { margin:0; font-size:1.4rem; }
.glossary-closing p { margin:0; font-size:1rem; color:var(--body); line-height:1.6; max-width:34rem; }
@media (max-width:600px){ .glossary-closing { padding:1.75rem; } }

.glossary-index { columns:3; column-gap:3rem; }
.glossary-index a { display:block; padding:0.95rem 0; color:var(--body); text-decoration:none; border-bottom:1px solid var(--border); break-inside:avoid; font-size:1.02rem; }
.glossary-index a:hover { color:#000; }
@media (max-width:820px){ .glossary-index { columns:1; } }

.glossary-az-nav {
  display:flex; flex-wrap:wrap; justify-content:center; gap:0.15rem;
  margin:0 0 3rem; padding:0.85rem 1rem;
  position:sticky; top:var(--header-h, 64px); z-index:5;
  background:rgba(255,255,255,0.85); -webkit-backdrop-filter:saturate(1.1) blur(10px); backdrop-filter:saturate(1.1) blur(10px);
  border:1px solid var(--border); border-radius:999px;
  max-width:fit-content; margin-left:auto; margin-right:auto;
  transition:box-shadow 0.2s ease;
}
.glossary-az-nav.is-stuck { box-shadow:0 8px 24px rgba(0,0,0,0.06); }
.glossary-az-nav a {
  display:inline-flex; align-items:center; justify-content:center;
  width:1.9rem; height:1.9rem; border-radius:999px;
  font-family: var(--serif, serif); font-size:0.95rem; font-weight:400; color:var(--muted-2);
  text-decoration:none; transition:background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.glossary-az-nav a:hover { background:var(--bg); color:var(--ink); }
.glossary-az-nav a.is-current { color:#fff; background:var(--lava); font-style:italic; }
.glossary-az-nav a.is-disabled { color:#e2e2e2; pointer-events:none; }
.glossary-letter-group {
  margin:0 0 2.75rem; scroll-margin-top:6.5rem;
  opacity:0; transform:translateY(14px);
  transition:opacity 0.6s ease, transform 0.6s ease;
}
.glossary-letter-group.is-visible { opacity:1; transform:translateY(0); }
.glossary-letter-heading {
  font-family: var(--serif, serif); font-size:1.5rem; margin:0 0 0.25rem;
  color:var(--lava); font-style:italic;
}
@media (prefers-reduced-motion: reduce) {
  .glossary-letter-group { opacity:1; transform:none; transition:none; }
}

.glossary-subcats { display:flex; flex-wrap:wrap; gap:0.6rem; margin:0 0 2.5rem; }
.glossary-subcat-chip {
  display:inline-flex; align-items:center; gap:0.5rem;
  background:#fff; border:1px solid var(--border); border-radius:999px;
  padding:0.55rem 1.05rem; font-size:0.86rem; font-weight:500; color:var(--ink);
  cursor:pointer; transition:background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.glossary-subcat-chip .glossary-category-count { background:var(--bg); color:var(--muted); }
.glossary-subcat-chip:hover { border-color:var(--ink); }
.glossary-subcat-chip.is-active { background:var(--ink); border-color:var(--ink); color:#fff; }
.glossary-subcat-chip.is-active .glossary-category-count { background:rgba(255,255,255,0.2); color:#fff; }

.glossary-categories-sec { padding-top:4rem; padding-bottom:4rem; }
.glossary-categories { display:flex; flex-wrap:wrap; gap:0.85rem; justify-content:center; max-width:920px; margin:0 auto; }
.glossary-category-chip {
  display:inline-flex; align-items:center; gap:0.55rem;
  background:#fff; border:1px solid var(--border); border-radius:999px;
  padding:0.7rem 1.25rem; font-size:0.92rem; font-weight:500; color:var(--ink);
  transition:background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.glossary-category-chip:hover { background:var(--ink); border-color:var(--ink); color:#fff; }
.glossary-category-chip:hover .glossary-category-count { background:rgba(255,255,255,0.2); color:#fff; }
.glossary-category-count {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:1.5rem; height:1.5rem; padding:0 0.4rem;
  background:var(--bg); color:var(--muted); border-radius:999px; font-size:0.78rem; font-weight:600;
}
.glossary-crumb { margin: 0 0 1.5rem; font-size: 0.85rem; font-weight: 600; }
.glossary-crumb a { color: rgba(255,255,255,0.75); }
.glossary-crumb a:hover { color: #fff; }
.glossary-crumb-sep { margin: 0 0.55rem; color: rgba(255,255,255,0.4); }
.glossary-crumb-current { color: rgba(255,255,255,0.75); }

.glossary-random {
  display:inline-flex; align-items:center; gap:0.55rem; margin-top:0.5rem;
  background:rgba(255,255,255,0.94); color:var(--ink); border:none;
}
.glossary-random:hover { background:#fff; }

/* --- glossary hero backgrounds ---
   Term pages: plain, slightly-off-black background, so attention stays on the word.
   Index + category pages: keep the photo background for a bit more atmosphere. */
.glossary-hero { position:relative; background:#0d0d0d; }
.glossary-hero::before { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,8,8,.15) 0%, rgba(8,8,8,.32) 100%); z-index:0; }
.glossary-hero.glossary-hero-photo { background:#0d0d0d url('/assets/images/glossary-hero-bg.jpg') 70% 78% / cover no-repeat; }
.glossary-hero.glossary-hero-photo::before { background:linear-gradient(180deg, rgba(8,8,8,.5) 0%, rgba(8,8,8,.72) 100%); }
.glossary-hero > .wrap { position:relative; z-index:1; }
.glossary-hero h1 { color:#fff; }
.glossary-hero p.sub { color:rgba(255,255,255,.88); }
.glossary-hero .pill-tag { background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.28); }
.glossary-term-word { font-style:italic; margin-bottom:0.6rem; line-height:1.4; }

/* Glossary term-page icon: contextual pixel-mark next to the h1, same visual language as the feature-cols icons */
.glossary-term-icon {
  display: inline-block; flex: none; width: 2.35rem; height: 2.35rem;
  background-color: var(--lava);
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}
.glossary-term-icon.icon-spark { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22%2523000%22%3E%3Crect%20x%3D%224%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22%2523000%22%3E%3Crect%20x%3D%224%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3C%2Fsvg%3E"); }
.glossary-term-icon.icon-audit { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22%23000%22%3E%3Crect%20x%3D%222%22%20y%3D%221%22%20width%3D%222%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%224%22%20width%3D%222%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22%23000%22%3E%3Crect%20x%3D%222%22%20y%3D%221%22%20width%3D%222%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%224%22%20width%3D%222%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3C%2Fsvg%3E"); }
.glossary-term-icon.icon-tax { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22%23000%22%3E%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%222%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%222%22%20width%3D%222%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%227%22%20width%3D%222%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%228%22%20width%3D%222%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22%23000%22%3E%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%222%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%222%22%20width%3D%222%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%227%22%20width%3D%222%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%228%22%20width%3D%222%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3C%2Fsvg%3E"); }
.glossary-term-icon.icon-compliance { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22%23000%22%3E%3Crect%20x%3D%223%22%20y%3D%220%22%20width%3D%224%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%226%22%20width%3D%222%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22%23000%22%3E%3Crect%20x%3D%223%22%20y%3D%220%22%20width%3D%224%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%226%22%20width%3D%222%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3C%2Fsvg%3E"); }
.glossary-term-icon.icon-ledger { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22%23000%22%3E%3Crect%20x%3D%222%22%20y%3D%220%22%20width%3D%226%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%229%22%20width%3D%226%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%220%22%20width%3D%221%22%20height%3D%2210%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%220%22%20width%3D%221%22%20height%3D%2210%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%223%22%20width%3D%226%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%225%22%20width%3D%226%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%227%22%20width%3D%226%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%220%22%20width%3D%221%22%20height%3D%2210%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22%23000%22%3E%3Crect%20x%3D%222%22%20y%3D%220%22%20width%3D%226%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%229%22%20width%3D%226%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%220%22%20width%3D%221%22%20height%3D%2210%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%220%22%20width%3D%221%22%20height%3D%2210%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%223%22%20width%3D%226%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%225%22%20width%3D%226%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%227%22%20width%3D%226%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%220%22%20width%3D%221%22%20height%3D%2210%22%2F%3E%3C%2Fsvg%3E"); }
.glossary-term-icon.icon-ai { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22%23000%22%3E%3Crect%20x%3D%224%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%221%22%20width%3D%223%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%227%22%20width%3D%223%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22%23000%22%3E%3Crect%20x%3D%224%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%221%22%20width%3D%223%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%227%22%20width%3D%223%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3C%2Fsvg%3E"); }
.glossary-term-icon.icon-workflow { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22%23000%22%3E%3Crect%20x%3D%220%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%224%22%20width%3D%222%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%224%22%20width%3D%222%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22%23000%22%3E%3Crect%20x%3D%220%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%224%22%20width%3D%222%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%224%22%20width%3D%222%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%2F%3E%3C%2Fsvg%3E"); }
.glossary-term-icon.icon-clock { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22%23000%22%3E%3Crect%20x%3D%223%22%20y%3D%220%22%20width%3D%224%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%229%22%20width%3D%224%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%223%22%20width%3D%221%22%20height%3D%224%22%2F%3E%3Crect%20x%3D%229%22%20y%3D%223%22%20width%3D%221%22%20height%3D%224%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%223%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%223%22%20height%3D%221%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22%23000%22%3E%3Crect%20x%3D%223%22%20y%3D%220%22%20width%3D%224%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%229%22%20width%3D%224%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%223%22%20width%3D%221%22%20height%3D%224%22%2F%3E%3Crect%20x%3D%229%22%20y%3D%223%22%20width%3D%221%22%20height%3D%224%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%223%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%223%22%20height%3D%221%22%2F%3E%3C%2Fsvg%3E"); }
.glossary-term-icon.icon-chart { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22%23000%22%3E%3Crect%20x%3D%220%22%20y%3D%229%22%20width%3D%229%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%226%22%20width%3D%222%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%223%22%20width%3D%222%22%20height%3D%226%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%221%22%20width%3D%222%22%20height%3D%228%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22%23000%22%3E%3Crect%20x%3D%220%22%20y%3D%229%22%20width%3D%229%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%226%22%20width%3D%222%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%223%22%20width%3D%222%22%20height%3D%226%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%221%22%20width%3D%222%22%20height%3D%228%22%2F%3E%3C%2Fsvg%3E"); }
.glossary-term-icon.icon-database { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22%23000%22%3E%3Crect%20x%3D%222%22%20y%3D%220%22%20width%3D%226%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%222%22%20width%3D%228%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%223%22%20width%3D%221%22%20height%3D%224%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%223%22%20width%3D%221%22%20height%3D%224%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%224%22%20width%3D%226%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%226%22%20width%3D%226%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%227%22%20width%3D%228%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%228%22%20width%3D%226%22%20height%3D%221%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22%23000%22%3E%3Crect%20x%3D%222%22%20y%3D%220%22%20width%3D%226%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%222%22%20width%3D%228%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%223%22%20width%3D%221%22%20height%3D%224%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%223%22%20width%3D%221%22%20height%3D%224%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%224%22%20width%3D%226%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%226%22%20width%3D%226%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%227%22%20width%3D%228%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%228%22%20width%3D%226%22%20height%3D%221%22%2F%3E%3C%2Fsvg%3E"); }
.glossary-term-icon.icon-people { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22%23000%22%3E%3Crect%20x%3D%222%22%20y%3D%221%22%20width%3D%222%22%20height%3D%222%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%224%22%20width%3D%224%22%20height%3D%224%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%222%22%20width%3D%222%22%20height%3D%222%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%225%22%20width%3D%224%22%20height%3D%223%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22%23000%22%3E%3Crect%20x%3D%222%22%20y%3D%221%22%20width%3D%222%22%20height%3D%222%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%224%22%20width%3D%224%22%20height%3D%224%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%222%22%20width%3D%222%22%20height%3D%222%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%225%22%20width%3D%224%22%20height%3D%223%22%2F%3E%3C%2Fsvg%3E"); }
.glossary-term-icon.icon-lock { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22%23000%22%3E%3Crect%20x%3D%223%22%20y%3D%221%22%20width%3D%221%22%20height%3D%222%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%221%22%20width%3D%221%22%20height%3D%222%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%220%22%20width%3D%224%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%223%22%20width%3D%226%22%20height%3D%226%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22%23000%22%3E%3Crect%20x%3D%223%22%20y%3D%221%22%20width%3D%221%22%20height%3D%222%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%221%22%20width%3D%221%22%20height%3D%222%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%220%22%20width%3D%224%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%223%22%20width%3D%226%22%20height%3D%226%22%2F%3E%3C%2Fsvg%3E"); }
.glossary-term-icon.icon-globe { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22%23000%22%3E%3Crect%20x%3D%223%22%20y%3D%220%22%20width%3D%224%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%229%22%20width%3D%224%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%223%22%20width%3D%221%22%20height%3D%224%22%2F%3E%3Crect%20x%3D%229%22%20y%3D%223%22%20width%3D%221%22%20height%3D%224%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%224%22%20width%3D%228%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22%23000%22%3E%3Crect%20x%3D%223%22%20y%3D%220%22%20width%3D%224%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%229%22%20width%3D%224%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%223%22%20width%3D%221%22%20height%3D%224%22%2F%3E%3Crect%20x%3D%229%22%20y%3D%223%22%20width%3D%221%22%20height%3D%224%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%224%22%20width%3D%228%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3C%2Fsvg%3E"); }
.glossary-term-icon.icon-building { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22%23000%22%3E%3Crect%20x%3D%222%22%20y%3D%221%22%20width%3D%221%22%20height%3D%228%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%221%22%20width%3D%221%22%20height%3D%228%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%221%22%20width%3D%226%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%228%22%20width%3D%226%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22%23000%22%3E%3Crect%20x%3D%222%22%20y%3D%221%22%20width%3D%221%22%20height%3D%228%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%221%22%20width%3D%221%22%20height%3D%228%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%221%22%20width%3D%226%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%228%22%20width%3D%226%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3C%2Fsvg%3E"); }
.glossary-term-head { display: flex; align-items: center; justify-content: center; gap: 0.85rem; margin-bottom: 0.6rem; }
.glossary-term-icon { align-self: center; }
.glossary-term-head .glossary-term-word { margin-bottom: 0; }
.glossary-phonetic {
  font-family: "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;
  font-size: 1rem; letter-spacing: 0.02em; color: rgba(255,255,255,.65); margin: 0;
}
.glossary-term-nav {
  display: flex; justify-content: space-between; align-items: center; gap: 1.25rem;
  margin-top: 2.25rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,0.12);
}
.glossary-term-nav-link {
  display: flex; align-items: center; gap: 0.55rem; max-width: 45%;
  color: rgba(255,255,255,0.7); text-decoration: none; font-size: 0.92rem; font-weight: 600;
  transition: color 0.15s ease;
}
.glossary-term-nav-link:hover { color: #fff; }
.glossary-term-nav-next { flex-direction: row-reverse; margin-left: auto; text-align: right; }
.glossary-term-nav-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.glossary-term-nav-arrow { flex: none; font-size: 1.15rem; line-height: 1; }
@media (max-width: 600px) {
  .glossary-term-nav-label { max-width: 7.5rem; }
  .glossary-term-nav-link { font-size: 0.85rem; }
}
.glossary-tldr {
  font-family: var(--serif); font-style: italic; font-size: 1.2rem; line-height: 1.5;
  color: var(--ink); margin: 0 0 2rem; padding: 0 0 1.75rem; border-bottom: 1px solid var(--border);
}
.glossary-tldr-label {
  font-family: var(--sans, inherit); font-style: normal; font-weight: 700; letter-spacing: 0.04em;
  color: var(--lava); font-size: 0.78rem; text-transform: uppercase; margin-right: 0.6rem;
  vertical-align: middle;
}

  /* Themed pixel icons for interactive tab features */
  .feature-cols > div.pico-cashflow::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22%2523000%22%3E%3Crect%20x%3D%220%22%20y%3D%224%22%20width%3D%227%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22%2523000%22%3E%3Crect%20x%3D%220%22%20y%3D%224%22%20width%3D%227%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3C%2Fsvg%3E"); }
  .feature-cols > div.pico-invoice::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22%2523000%22%3E%3Crect%20x%3D%222%22%20y%3D%220%22%20width%3D%226%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%229%22%20width%3D%226%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%220%22%20width%3D%221%22%20height%3D%2210%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%220%22%20width%3D%221%22%20height%3D%2210%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%224%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%224%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%227%22%20width%3D%222%22%20height%3D%221%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22%2523000%22%3E%3Crect%20x%3D%222%22%20y%3D%220%22%20width%3D%226%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%229%22%20width%3D%226%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%220%22%20width%3D%221%22%20height%3D%2210%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%220%22%20width%3D%221%22%20height%3D%2210%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%224%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%224%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%227%22%20width%3D%222%22%20height%3D%221%22%2F%3E%3C%2Fsvg%3E"); }
  .feature-cols > div.pico-subs::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%3E%3Cg%20fill%3D%22%23000%22%3E%3Crect%20x%3D%224%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%3E%3Cg%20fill%3D%22%23000%22%3E%3Crect%20x%3D%224%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
  .feature-cols > div.pico-revrec::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22%2523000%22%3E%3Crect%20x%3D%221%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22%2523000%22%3E%3Crect%20x%3D%221%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3C%2Fsvg%3E"); }
  .feature-cols > div.pico-bell::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22%2523000%22%3E%3Crect%20x%3D%224%22%20y%3D%221%22%20width%3D%222%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%222%22%20width%3D%224%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%223%22%20width%3D%226%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%224%22%20width%3D%226%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%225%22%20width%3D%226%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%226%22%20width%3D%228%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%227%22%20width%3D%222%22%20height%3D%221%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22%2523000%22%3E%3Crect%20x%3D%224%22%20y%3D%221%22%20width%3D%222%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%222%22%20width%3D%224%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%223%22%20width%3D%226%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%224%22%20width%3D%226%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%225%22%20width%3D%226%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%226%22%20width%3D%228%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%227%22%20width%3D%222%22%20height%3D%221%22%2F%3E%3C%2Fsvg%3E"); }
  .feature-cols > div.pico-coin::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22%2523000%22%3E%3Crect%20x%3D%224%22%20y%3D%220%22%20width%3D%222%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%224%22%20width%3D%221%22%20height%3D%222%22%2F%3E%3Crect%20x%3D%229%22%20y%3D%224%22%20width%3D%221%22%20height%3D%222%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%229%22%20width%3D%222%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22%2523000%22%3E%3Crect%20x%3D%224%22%20y%3D%220%22%20width%3D%222%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%224%22%20width%3D%221%22%20height%3D%222%22%2F%3E%3Crect%20x%3D%229%22%20y%3D%224%22%20width%3D%221%22%20height%3D%222%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%229%22%20width%3D%222%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%2F%3E%3C%2Fsvg%3E"); }
  .feature-cols > div.pico-approval::before { -webkit-mask: none; mask: none; background-color: transparent; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%23f5410f%22%2F%3E%3Cg%20fill%3D%22%23ffffff%22%3E%3Crect%20x%3D%222%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center/contain no-repeat; image-rendering: pixelated; image-rendering: crisp-edges; }
  .feature-cols > div.pico-card::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22%2523000%22%3E%3Crect%20x%3D%221%22%20y%3D%222%22%20width%3D%227%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%226%22%20width%3D%227%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%222%22%20width%3D%221%22%20height%3D%225%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%222%22%20width%3D%221%22%20height%3D%225%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%224%22%20width%3D%225%22%20height%3D%221%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22%2523000%22%3E%3Crect%20x%3D%221%22%20y%3D%222%22%20width%3D%227%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%226%22%20width%3D%227%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%222%22%20width%3D%221%22%20height%3D%225%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%222%22%20width%3D%221%22%20height%3D%225%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%224%22%20width%3D%225%22%20height%3D%221%22%2F%3E%3C%2Fsvg%3E"); }
  .feature-cols > div.pico-limits::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%3E%3Cg%20fill%3D%22%23000%22%3E%3Crect%20x%3D%221%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%229%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%3E%3Cg%20fill%3D%22%23000%22%3E%3Crect%20x%3D%221%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%229%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
  .feature-cols > div.pico-receipt::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22%2523000%22%3E%3Crect%20x%3D%222%22%20y%3D%220%22%20width%3D%226%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%220%22%20width%3D%221%22%20height%3D%228%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%220%22%20width%3D%221%22%20height%3D%228%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%229%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%229%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%229%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%222%22%20width%3D%224%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%224%22%20height%3D%221%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22%2523000%22%3E%3Crect%20x%3D%222%22%20y%3D%220%22%20width%3D%226%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%220%22%20width%3D%221%22%20height%3D%228%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%220%22%20width%3D%221%22%20height%3D%228%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%229%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%229%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%229%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%222%22%20width%3D%224%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%224%22%20height%3D%221%22%2F%3E%3C%2Fsvg%3E"); }

/* --- Events page --- */
.events-hero-ctas { display: flex; gap: 1rem; justify-content: center; align-items: center; margin-top: 0.5rem; flex-wrap: wrap; }

/* Hackathon Tour: standalone section with a clearly visible (non-background) video */
.hackathon-video-frame { max-width: 900px; margin: 0 auto 3rem; border-radius: 14px; overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,0.14); background: #000; }
.hackathon-video-frame video { display: block; width: 100%; height: auto; }

.events-subhead { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; color: var(--ink); margin: 3rem 0 1rem; }
.events-subhead:first-of-type { margin-top: 0; }

.events-table { max-width: 900px; margin: 0 auto; border-top: 1px solid var(--border); }
.events-row { display: grid; grid-template-columns: 2.2fr 1fr 1fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--border); align-items: center; text-decoration: none; color: inherit; }
.events-row-head { color: var(--muted); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; padding-bottom: 0.75rem; }
a.events-row { transition: background 0.15s ease; }
a.events-row:hover { background: #faf9f7; }
.events-row .ev-name { font-family: var(--serif); font-size: 1.05rem; color: var(--ink); display: flex; align-items: center; gap: 0.5rem; font-variant-ligatures: none; -webkit-font-variant-ligatures: none; }
.events-row .ev-name .arr { color: var(--lava); opacity: 0; transition: opacity 0.15s ease; }
a.events-row:hover .ev-name .arr { opacity: 1; }
.events-row .ev-loc, .events-row .ev-date { color: var(--body); font-size: 0.95rem; }
.events-row .ev-link a { color: var(--lava); font-weight: 600; }
.events-row .ev-link a:hover { color: var(--lava-dark, var(--lava)); text-decoration: underline; }

/* Upcoming table gains a 4th (Link) column; Past stays 3-up. */
.events-table[data-panel="upcoming"] .events-row { grid-template-columns: 2fr 1fr 1fr 0.7fr; }

/* Toggle bar shares the table's box (max-width + centering) so "Upcoming"/"Past"
   line up with the table below them instead of sitting flush against the wrap. */
.events-toggle-wrap { max-width: 900px; margin: 2.5rem auto 0; }
.events-toggle { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; }
.events-toggle-btn { font: inherit; font-size: 0.95rem; font-weight: 600; padding: 0.55rem 1.2rem; border-radius: 999px; border: 1px solid var(--border); background: #fff; color: var(--body); cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.events-toggle-btn:hover { border-color: var(--muted); }
.events-toggle-btn.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.events-toggle-wrap .events-table { margin: 0; }

@media (max-width: 700px) {
  .events-row { grid-template-columns: 1fr; gap: 0.2rem; padding: 1.1rem 0; }
  .events-row-head { display: none; }
  .events-row .ev-date { order: -1; color: var(--muted); font-size: 0.85rem; }
  .events-table[data-panel="upcoming"] .events-row { grid-template-columns: 1fr; }
  .events-row .ev-link { order: 2; }
  .events-row .ev-link a::before { content: "Sign up: "; color: var(--muted); font-weight: 400; }
}

/* manufacturing procure-to-pay icons */
  .feature-cols > div.pico-request::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%3E%3Cg%20fill%3D%22%23000%22%3E%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%3E%3Cg%20fill%3D%22%23000%22%3E%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
  .feature-cols > div.pico-po::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%3E%3Cg%20fill%3D%22%23000%22%3E%3Crect%20x%3D%221%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%229%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%229%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%229%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%229%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%229%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%229%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%229%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%3E%3Cg%20fill%3D%22%23000%22%3E%3Crect%20x%3D%221%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%229%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%229%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%229%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%229%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%229%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%229%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%229%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
  .feature-cols > div.pico-match::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%3E%3Cg%20fill%3D%22%23000%22%3E%3Crect%20x%3D%224%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%229%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%229%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%3E%3Cg%20fill%3D%22%23000%22%3E%3Crect%20x%3D%224%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%229%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%229%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
  .feature-cols > div.pico-sync::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%3E%3Cg%20fill%3D%22%23000%22%3E%3Crect%20x%3D%223%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%3E%3Cg%20fill%3D%22%23000%22%3E%3Crect%20x%3D%223%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }

/* big pull-quote in photo-split (customer story) */
.big-quote { font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.32; letter-spacing: -0.01em; margin: 0 0 1.4rem; color: var(--ink); }
.big-quote-cite { font-style: normal; font-family: var(--sans); font-size: 0.98rem; font-weight: 600; color: var(--ink); }
.big-quote-cite span { display: block; font-weight: 400; color: var(--muted); margin-top: 2px; }

.big-quote .accent-orange { color: var(--lava); }
.big-quote-by { display: flex; align-items: center; gap: 0.9rem; }
.big-quote-avatar { width: 52px; height: 52px; }

/* Standalone anonymous pull-quote band (home) */
.quote-band blockquote { max-width: 58rem; margin: 0 auto; text-align: center; }
.quote-band blockquote p { font-family: var(--serif); font-weight: 400; font-size: clamp(1.7rem, 3.6vw, 2.8rem); line-height: 1.26; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 1.75rem; }
.quote-band cite { font-style: normal; font-family: var(--sans); font-size: 1rem; color: var(--muted); }

/* full (uncropped) photo in a photo-split */
.photo-split.photo-natural img { height: auto; min-height: 0; object-fit: contain; align-self: center; }
/* B&W photos blend into the pastel background */
.blend-multiply { mix-blend-mode: multiply; }

  /* nav over a dark media hero: light text until scrolled */
  header.site.media-hero:not(.scrolled) .nav-pill a.navlink { color: #fff; opacity: 0.95; }
  header.site.media-hero:not(.scrolled) .nav-pill a.navlink:hover { color: var(--lava); opacity: 1; }
  .logo .logo-white { display: none; }
  header.site.media-hero:not(.scrolled) .logo .logo-black { display: none; }
  header.site.media-hero:not(.scrolled) .logo .logo-white { display: block; }
  header.site.media-hero:not(.scrolled) .btn-nav { background: rgba(255,255,255,0.16); color: #fff; border-color: rgba(255,255,255,0.28); }
  header.site.media-hero:not(.scrolled) .btn-nav:hover { background: var(--mint); color: #fff; border-color: var(--mint); }

/* book-a-demo: photo beside the form */
.demo-photo { width: 100%; border-radius: 20px; display: block; margin: 1.75rem 0; aspect-ratio: 3 / 2; object-fit: cover; }

/* app-store-demo: shorter fixed-height photo so the hero fits a standard 14" laptop
   viewport without scrolling; dropped entirely on mobile, where the page is already
   long and the photo added nothing but scroll distance to the form. */
.app-store-photo { height: 220px; margin: 0.5rem 0 0; }
@media (max-width: 900px) {
  .app-store-photo { display: none; }
}

/* app-store-demo: tighter top/bottom padding than the book-a-demo default, so the
   hero (text + photo + form) sits comfortably within one screen at 100% zoom. */
.demo-page.tight { padding: 3.25rem 0 3.5rem; }

/* footer build stamp */
.build-meta { font-size: 0.78rem; color: var(--muted); opacity: 0.75; white-space: nowrap; }

/* AI Symposium: session videos */
.session-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem 2rem; }
.session-card .video-embed { margin-bottom: 1.1rem; }
.session-card .num { display: block; font-size: 0.78rem; font-weight: 600; color: var(--lava); letter-spacing: 0.06em; margin-bottom: 0.4rem; }
.session-card h3 { font-size: 1.2rem; font-weight: 600; font-family: var(--sans); margin: 0 0 0.5rem; color: var(--ink); }
.session-card p { margin: 0; color: var(--body); font-size: 0.95rem; }
.video-embed.lite-yt { background-size: cover; background-position: center; cursor: pointer; }
@media (max-width: 780px) { .session-grid { grid-template-columns: 1fr; } }

/* secondary CTA on a video/photo hero needs light treatment */
.hero.hero-video .btn:not(.btn-black):not(.btn-lava),
.hero.hero-photo .btn:not(.btn-black):not(.btn-lava) { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.55); padding: 1rem 2.5rem; }
.hero.hero-video .btn:not(.btn-black):not(.btn-lava):hover,
.hero.hero-photo .btn:not(.btn-black):not(.btn-lava):hover { background: rgba(255,255,255,0.14); }

/* bare video hero: no overlay text, no darkening scrim */
.hero.hero-video.bare { padding: 0; aspect-ratio: 21 / 9; min-height: 420px; }
.hero.hero-video.bare::before { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* partners: the two things to fix */
.fix-num { display: block; font-family: var(--serif); font-size: 2.2rem; line-height: 1; color: var(--lava); margin-bottom: 0.75rem; }
.fix-col h3 { font-size: 1.6rem; font-family: var(--serif); font-weight: 400; margin: 0 0 0.9rem; }
.fix-col p + p { margin-top: 0.9rem; }
.fix-col strong { color: var(--ink); font-weight: 600; }

/* two-things columns: numbers carry it, no pixel icon */
.feature-cols > div.fix-col::before { display: none; }

/* perf: width/height attrs exist for aspect-ratio (CLS); never let them dictate
   width where a height is set inline */

/* mobile menu logo: CSS owns the size (height attr is only an aspect hint now) */
.mm-top img { height: auto; width: 100px; }

/* Product overview — plugin brand logos + comparison chips */
.plugin-logo { height: 30px; width: auto; display: block; margin: 0 0 0.75rem; }
.plugin-logos { display: flex; gap: 12px; align-items: center; margin-bottom: 0.75rem; }
.plugin-logos .plugin-logo { height: 26px; margin: 0; }
.compare-chips { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; max-width: 880px; margin: 0 auto; }
.compare-chip { display: inline-block; padding: 0.6rem 1.15rem; border: 1px solid #e2e2e2; border-radius: 999px; color: #111; font-weight: 500; transition: border-color .15s, background .15s, color .15s; }
.compare-chip:hover { border-color: #111; }
.compare-chip.primary { background: #111; color: #fff; border-color: #111; }
.compare-chip.primary:hover { background: #333; }

/* Product page — hide position symbols on plugin cards (they carry brand logos) */
.plugins-cols > div::before { display: none; }
/* Product page — new symbols for functions 7-9 (were bare red blocks) */
#products .feature-cols > div:nth-child(7)::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22%2523000%22%3E%3Crect%20x%3D%221%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22%2523000%22%3E%3Crect%20x%3D%221%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3C%2Fsvg%3E"); }
#products .feature-cols > div:nth-child(8)::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22%2523000%22%3E%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22%2523000%22%3E%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3C%2Fsvg%3E"); }
#products .feature-cols > div:nth-child(9)::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22%2523000%22%3E%3Crect%20x%3D%221%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22%2523000%22%3E%3Crect%20x%3D%221%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3C%2Fsvg%3E"); }

/* Product page — embedded comparison table under the chips */
.compare-table-head { text-align: center; font-family: var(--serif); font-weight: 400; font-size: 1.5rem; margin: 2.9rem 0 1.25rem; }
.versus-table.compare-embed { max-width: 760px; margin: 0 auto; }

/* Product page — comparison competitor picker */
.compare-picker { text-align: center; margin: 0 auto 0.5rem; }
.compare-picker label { display: block; font-size: 0.9rem; color: var(--body); margin-bottom: 0.55rem; }
.compare-select { font: inherit; padding: 0.6rem 2.6rem 0.6rem 2.6rem; border: 1px solid #ccc; border-radius: 999px; background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23111' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1.25rem center; background-size: 12px 8px; -webkit-appearance: none; -moz-appearance: none; appearance: none; color: #111; cursor: pointer; min-width: 260px; text-align: center; }
.compare-select:focus { outline: none; border-color: #111; }

/* Product page — CFO agentic starter pack */
.pack-subhead { text-align: center; font-family: var(--serif); font-weight: 400; font-size: 1.3rem; margin: 2.8rem 0 0.4rem; }
.pack-grid > div::before { display: none; }
.pack-note { text-align: center; color: var(--body); margin-top: 1.6rem; font-size: 0.95rem; }

/* CFO pack on black background */
.sec.black .pack-grid > div { border-color: rgba(255,255,255,0.16); }
.sec.black .pack-grid h3 { color: #fff; }
.sec.black .pack-grid p { color: #c9c9c9; }
.sec.black .pack-subhead { color: #fff; }
.sec.black .pack-note { color: #b5b5b5; }

/* CFO pack — per-agent / per-skill mission icons */
.pack-grid .pack-icon { width: 26px; height: 26px; display: block; margin: 0 0 0.75rem; color: var(--ink); }

/* CFO pack — single agent icon at top of section */
.pack-hero { text-align: center; }
.pack-hero-icon { width: 44px; height: 44px; color: var(--ink); display: inline-block; margin: 0 0 1rem; }

/* CFO pack — Light MCP link */
.pack-connect { text-align: center; margin-top: 0.9rem; color: #b5b5b5; font-size: 0.95rem; }
.pack-connect a { color: #fff; text-decoration: underline; }

/* Pack icons: white on black sections */
.sec.black .pack-grid .pack-icon, .sec.black .pack-hero-icon { color: #fff; }

/* Extra breathing room between the agents grid and the workflows heading */
.pack-grid + .pack-subhead { margin-top: 4.75rem; }

/* Skip style/layout/paint for off-screen sections until they're scrolled near.
   contain-intrinsic-size reserves a placeholder box so the scrollbar stays
   stable and CLS is unaffected; the browser replaces it with the real size
   once the section is rendered. The hero is excluded - it must paint immediately. */
.sec:not(.hero),
footer.site {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}

/* CFO pack email gate */
.pack-gate { max-width: 540px; margin: 0 auto; }
.pack-gate-row { display: flex; gap: 10px; margin-bottom: 10px; }
.pack-gate input { flex: 1; min-width: 0; width: 100%; padding: 0.72rem 0.9rem; border: 1px solid #ccc; border-radius: 8px; font: inherit; background: #fff; color: #111; }
.pack-gate input.invalid { border-color: #e5484d; }
.pack-gate .cf-turnstile { display: flex; justify-content: center; margin: 0; min-height: 0; }
.pack-gate .center-link { margin-top: 0; }
.pack-gate-note { text-align: center; font-size: 0.8rem; margin-top: 0.9rem; opacity: 0.7; }
.pack-gate-error { text-align: center; color: #ff6b6b; margin-top: 0.7rem; }
.pack-gate-done { text-align: center; }
.pack-gate-thanks { font-family: var(--serif); font-size: 1.25rem; margin-bottom: 1rem; }
@media (max-width: 560px) { .pack-gate-row { flex-direction: column; } }

/* More breathing room above the pack gate button/form */
#cfo-pack .pack-note + .center-link { margin-top: 4.75rem; }
#cfo-gate-wrap { margin-top: 4.75rem; }

/* Turnstile holder (flexible size fills the form width) */
.pack-gate .ts-holder { margin: 0.5rem 0 0.2rem; }

/* Language globe. The anchor was an inline-level box, so it took line-height from
   the nav and grew taller than its parent, overflowing upward and lifting the icon
   ~3px above Login / Book a demo. Making both the item and the anchor flex takes it
   out of inline layout entirely, so the icon centres on the same axis as the text. */
.nav-item.nav-lang { display: flex; align-items: center; }
.nav-lang > .navlink { display: flex; align-items: center; justify-content: center; line-height: 1; padding: 0; }
.nav-lang > .navlink svg { display: block; }

/* --- Help Center (/help) — content synced from the help-center API at build time --- */
.help-hero { text-align: center; }
.help-hero h1 { color: #fff; }

/* Search box in the hero, with a results dropdown */
.help-search { position: relative; max-width: 560px; margin: 2rem auto 0; text-align: left; }
.help-search-icon { position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.help-search input {
  width: 100%; padding: 1rem 1.25rem 1rem 3rem;
  font: 500 1.05rem var(--sans); color: var(--ink);
  background: #fff; border: 1px solid transparent; border-radius: 10px;
  outline: none; box-shadow: 0 10px 30px rgba(0,0,0,0.18);
}
.help-search input:focus { border-color: var(--lava); }
.help-search-results {
  position: absolute; top: calc(100% + 0.5rem); left: 0; right: 0; z-index: 30;
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 18px 44px rgba(0,0,0,0.16); overflow: hidden;
  max-height: 26rem; overflow-y: auto;
}
.help-search-results a { display: block; padding: 0.8rem 1.1rem; border-bottom: 1px solid #f1ece2; }
.help-search-results a:last-child { border-bottom: none; }
.help-search-results a:hover, .help-search-results a:focus { background: var(--bg); }
.help-search-result-title { display: block; font-weight: 600; color: var(--ink); font-size: 0.98rem; }
.help-search-result-cat { display: block; color: var(--muted); font-size: 0.82rem; margin-top: 0.1rem; }
.help-search-empty { margin: 0; padding: 0.9rem 1.1rem; color: var(--muted); font-size: 0.95rem; }

/* Category cards on the help index */
.help-category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.help-category-card {
  display: block; background: #fff; border: 1px solid var(--border); border-radius: 14px;
  padding: 1.7rem 1.6rem 1.5rem; transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.sec.white .help-category-card { background: var(--bg); border-color: transparent; }
.help-category-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,0.08); }
.help-category-card h3 { font-size: 1.15rem; font-weight: 600; margin: 0.9rem 0 0.25rem; color: var(--ink); }
.help-category-count { margin: 0; color: var(--muted); font-size: 0.9rem; }
@media (max-width: 900px) { .help-category-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .help-category-grid { grid-template-columns: 1fr; } }
.help-contact-ctas { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.help-contact-ctas .btn-white { border: 1px solid var(--border); }

/* Category + article page heroes (light, like blog posts) */
.help-page-hero { padding: 4rem 0 2.5rem; }
.help-page-hero h1 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.18; }
.help-cat-head { display: flex; align-items: center; justify-content: center; gap: 0.85rem; margin-bottom: 0.4rem; }
.help-cat-head h1 { margin: 0; }

/* Article list on category pages */
.help-article-list { max-width: 46rem; margin: 0 auto; }
.help-article-row {
  position: relative; display: block; padding: 1.35rem 2.4rem 1.35rem 0;
  border-bottom: 1px solid var(--border);
}
.help-article-row:first-child { border-top: 1px solid var(--border); }
.help-article-row h2 { font-family: var(--sans); font-size: 1.12rem; font-weight: 600; margin: 0 0 0.3rem; color: var(--ink); }
.help-article-row p { margin: 0; color: var(--muted); font-size: 0.95rem; line-height: 1.55; }
.help-article-row-arrow { position: absolute; right: 0.4rem; top: 50%; transform: translateY(-50%); color: var(--muted-2); transition: transform 0.15s ease, color 0.15s ease; }
.help-article-row:hover h2 { color: var(--lava); }
.help-article-row:hover .help-article-row-arrow { color: var(--lava); transform: translateY(-50%) translateX(3px); }

/* Article page: prose + sticky aside */
.help-article-layout { display: grid; grid-template-columns: minmax(0, 46rem) 15.5rem; gap: 4rem; justify-content: center; align-items: start; }
.help-article-layout .prose { margin: 0; }
.help-article-aside { position: sticky; top: 90px; }
.help-toc { margin-bottom: 2.2rem; }
.help-toc h2 { font-family: var(--sans); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 0 0 0.7rem; }
.help-toc ul { list-style: none; margin: 0; padding: 0; }
.help-toc li { margin: 0; }
.help-toc a, .help-toc span { display: block; padding: 0.32rem 0; font-size: 0.9rem; line-height: 1.4; color: var(--body); }
.help-toc a:hover { color: var(--lava); }
.help-toc li.is-current span { color: var(--lava); font-weight: 600; }
@media (max-width: 1000px) {
  .help-article-layout { grid-template-columns: minmax(0, 46rem); }
  .help-article-aside { position: static; order: -1; }
  .help-more { display: none; }
}

/* Prose extras for synced articles: heading anchors, tables, code */
.help-prose h2 .heading-anchor, .help-prose h3 .heading-anchor, .help-prose h4 .heading-anchor {
  float: left; margin-left: -1.3em; width: 1.3em; color: var(--muted-2);
  opacity: 0; transition: opacity 0.12s ease;
}
.help-prose h2:hover .heading-anchor, .help-prose h3:hover .heading-anchor, .help-prose h4:hover .heading-anchor { opacity: 1; }
.help-prose h2 { scroll-margin-top: 90px; }
.help-prose h3, .help-prose h4 { scroll-margin-top: 90px; }
.help-prose table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.95rem; }
.help-prose th, .help-prose td { padding: 0.7rem 0.9rem; text-align: left; border: 1px solid var(--border); vertical-align: top; }
.help-prose thead th { background: var(--bg); font-weight: 600; }
.help-prose code { background: #f5f1e8; border-radius: 4px; padding: 0.1em 0.35em; font-size: 0.9em; }
.help-prose pre { background: #171717; color: #f2f2f2; border-radius: 10px; padding: 1.1rem 1.3rem; overflow-x: auto; margin: 1.5rem 0; }
.help-prose pre code { background: none; padding: 0; font-size: 0.88rem; line-height: 1.6; }
.help-prose blockquote { margin: 1.5rem 0; padding: 0.2rem 0 0.2rem 1.2rem; border-left: 3px solid var(--lava); color: var(--body); }
.help-prose blockquote p { margin: 0.4rem 0; }
.help-prose hr { border: none; border-top: 1px solid var(--border); margin: 2.5rem 0; }

/* Feedback widget */
.help-feedback { margin: 3rem 0 0; padding: 1.6rem 1.7rem; background: var(--bg); border-radius: 14px; }
.help-feedback-q { font-weight: 600; margin: 0 0 0.9rem; color: var(--ink); }
.help-feedback-btns { display: flex; gap: 0.7rem; }
.help-feedback .btn-white { border: 1px solid var(--border); padding: 0.6rem 1.6rem; }
.help-feedback .btn-white.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.help-feedback-form { margin-top: 1.1rem; }
.help-feedback-form label { display: block; font-size: 0.92rem; color: var(--body); margin-bottom: 0.45rem; }
.help-feedback-form textarea {
  width: 100%; padding: 0.7rem 0.85rem; font: 400 0.95rem var(--sans); color: var(--ink);
  border: 1px solid var(--border); border-radius: 8px; background: #fff; resize: vertical; margin-bottom: 0.8rem;
}
.help-feedback-form textarea:focus { outline: none; border-color: var(--lava); }
.help-feedback-form .btn-black { padding: 0.7rem 1.8rem; font-size: 0.95rem; }
.help-feedback-thanks { margin: 0.9rem 0 0; color: var(--body); font-weight: 500; }

/* Prev/next article nav */
.help-article-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.2rem; }
.help-article-nav-link { display: block; max-width: 46%; }
.help-article-nav-next { text-align: right; margin-left: auto; }
.help-article-nav-dir { display: block; font-size: 0.82rem; color: var(--muted); margin-bottom: 0.15rem; }
.help-article-nav-title { display: block; font-weight: 600; font-size: 0.98rem; color: var(--ink); line-height: 1.35; }
.help-article-nav-link:hover .help-article-nav-title { color: var(--lava); }
/* Centre stacked sections on narrow screens.
   When these grids collapse to one column the content stays left-aligned while
   the section heading above it is centred, which reads as a misalignment.
   Scoped to .plugins-cols (product page only) rather than .cols-4, which is
   also used on partners / claude-mcp / manufacturing. */
@media (max-width: 900px) {
  .plugins-cols > div { text-align: center; }
  /* Standalone logos are display:block, so auto margins centre them.
     Must use the child combinator: the two logos inside .plugin-logos are flex
     items, and auto margins there absorb the free space and push them apart. */
  .plugins-cols > div > .plugin-logo { margin-left: auto; margin-right: auto; }
  .plugins-cols .plugin-logos { justify-content: center; }
}

/* Quote cards: same treatment once .quote-grid drops to a single column (960px).
   Applies to /product, the homepage and the 9 language homepages. */
@media (max-width: 960px) {
  .quote-card { text-align: center; }
  .quote-card .who { justify-content: center; }
}

/* Works-where-you-work homepage section: float the app screenshot on beige */
.works-section .phone-wrap { display: flex; justify-content: center; margin: 2.5rem 0 3.75rem; }
.works-section .app-screenshot { display: block; width: 100%; max-width: 300px; height: auto; filter: drop-shadow(0 34px 60px rgba(0,0,0,0.45)); }
/* Localized "in your pocket" mobile-sec (dark bg): same real screenshot, sized/centered */
.mobile-sec .app-screenshot { display: block; width: 100%; max-width: 300px; height: auto; margin: 2.5rem auto 0; }

/* Rillet-style prose comparison table on enriched versus pages */
.versus-table.versus-detail th:not(:first-child), .versus-table.versus-detail td:not(:first-child) { text-align:left; width:38%; }
.versus-table.versus-detail td { vertical-align:top; font-size:0.97rem; line-height:1.45; }
.versus-table.versus-detail td:nth-child(2) { color:var(--ink); }
.versus-table.versus-detail td:nth-child(3) { color:var(--muted); }
.versus-cards.signs .versus-card { padding-bottom:1.7rem; }
/* Enriched versus detail table: stack to labeled blocks on mobile */
@media (max-width: 700px) {
  .versus-table.versus-detail thead { display:none; }
  .versus-table.versus-detail, .versus-table.versus-detail tbody { display:block; }
  .versus-table.versus-detail tr { display:grid; grid-template-columns:1fr 1fr; column-gap:1.15rem; padding:1.25rem 0; border-top:1px solid var(--border); border-bottom:none; }
  .versus-table.versus-detail td { display:block; width:100%; border-bottom:none; padding:0; font-size:0.9rem; line-height:1.45; }
  /* Neutralise the desktop 38% column width (higher specificity) so the
     stacked cells fill their full grid track instead of ~1/3 of it. */
  .versus-table.versus-detail td:not(:first-child) { width:100%; }
  .versus-table.versus-detail td.vd-aspect { grid-column:1 / -1; padding-bottom:1rem; font-size:1.0625rem; letter-spacing:-0.01em; }
  .versus-table.versus-detail td:nth-child(3) { padding-left:1.15rem; border-left:1px solid var(--border); }
  .versus-table.versus-detail td[data-label]::before { content:attr(data-label); display:block; font-size:0.75rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:0.5rem; }
  .versus-table.versus-detail td:nth-child(2)[data-label]::before { color:var(--lava); }
  .versus-table.versus-detail td:nth-child(3)[data-label]::before { color:var(--muted-2); }
}

/* Described versus table: "Also in Light" list under it */
.versus-also-h { margin:3.5rem 0 1.25rem; font-family:var(--serif); font-weight:400; font-size:1.6rem; letter-spacing:-0.01em; color:var(--ink); }
.versus-also.feature-cols h3 { font-size:1.2rem; }
/* Versus 'Also in Light' card icons (Martin 2026-09-28): grid of squares, magnifier (same as glossary icon-audit), single person */
.feature-cols > div.pico-grid::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22%23000%22%3E%3Crect%20x%3D%222%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22%23000%22%3E%3Crect%20x%3D%222%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3C%2Fsvg%3E"); }
.feature-cols > div.pico-magnifier::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22%23000%22%3E%3Crect%20x%3D%222%22%20y%3D%221%22%20width%3D%222%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%224%22%20width%3D%222%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22%23000%22%3E%3Crect%20x%3D%222%22%20y%3D%221%22%20width%3D%222%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%224%22%20width%3D%222%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3C%2Fsvg%3E"); }
.feature-cols > div.pico-person::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22%23000%22%3E%3Crect%20x%3D%224%22%20y%3D%221%22%20width%3D%222%22%20height%3D%222%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%224%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%225%22%20width%3D%226%22%20height%3D%223%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22%23000%22%3E%3Crect%20x%3D%224%22%20y%3D%221%22%20width%3D%222%22%20height%3D%222%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%224%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%225%22%20width%3D%226%22%20height%3D%223%22%2F%3E%3C%2Fsvg%3E"); }
.feature-cols > div.pico-clock::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22%23000%22%3E%3Crect%20x%3D%223%22%20y%3D%220%22%20width%3D%224%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%229%22%20width%3D%224%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%223%22%20width%3D%221%22%20height%3D%224%22%2F%3E%3Crect%20x%3D%229%22%20y%3D%223%22%20width%3D%221%22%20height%3D%224%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%223%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%223%22%20height%3D%221%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22%23000%22%3E%3Crect%20x%3D%223%22%20y%3D%220%22%20width%3D%224%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%229%22%20width%3D%224%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%223%22%20width%3D%221%22%20height%3D%224%22%2F%3E%3Crect%20x%3D%229%22%20y%3D%223%22%20width%3D%221%22%20height%3D%224%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%223%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%223%22%20height%3D%221%22%2F%3E%3C%2Fsvg%3E"); }


/* Footer: second-opinion LLM links */
.footer-llm { text-align:center; margin:0 0 3rem; }
.footer-llm p { color:var(--muted-2); font-size:0.95rem; margin:0 0 1rem; }
.llm-links { display:flex; justify-content:center; gap:0.75rem; flex-wrap:wrap; }
.llm-links a { display:inline-block; padding:0.5rem 1.1rem; border:1px solid rgba(255,255,255,0.22); border-radius:999px; font-size:0.875rem; font-weight:500; color:#eee; background:transparent; transition:border-color .15s ease, color .15s ease; }
.llm-links a:hover { border-color:var(--lava); color:var(--lava); }

/* CFO pack chooser */
.pack-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 860px; margin: 0 auto 1.6rem; }
.pack-card { border: 1px solid rgba(255,255,255,0.22); border-radius: 12px; padding: 20px 22px; text-align: left; }
.pack-card h3 { margin: 0 0 2px; }
.pack-card-sub { font-size: 0.8rem; opacity: 0.65; margin: 0 0 10px; }
.pack-card p { margin: 0; font-size: 0.92rem; opacity: 0.85; }
.pack-choice { display: flex; flex-direction: column; gap: 8px; margin: 2px 0 12px; text-align: left; }
.pack-choice label { display: flex; align-items: center; justify-content: flex-start; gap: 9px; cursor: pointer; font-size: 0.95rem; }
.pack-choice input { flex: none; width: auto; }
.pack-choice input { accent-color: currentColor; }
.pack-choice span { opacity: 0.6; font-size: 0.82rem; }
@media (max-width: 640px) { .pack-cards { grid-template-columns: 1fr; } }

/* Light Universe (/universe) */
.universe-paths .module-card { display: flex; flex-direction: column; }
.universe-paths .module-card .module-label { align-self: flex-start; }
.universe-paths .module-card .link-arrow { margin-top: auto; padding-top: 1.1rem; }
.industry-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; max-width: 860px; margin: 3.5rem auto 0; }
.soon-tag { display: inline-block; background: var(--pill-gray); border-radius: 4px; padding: 0.3rem 0.85rem; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.9rem; }
.cert-grid.soc-facts .card .partner-logo { height: 26px; width: auto; margin-bottom: 1rem; }
.cert-grid.soc-facts .card.lava { background: var(--lava); border-color: var(--lava); }
.cert-grid.soc-facts .card.lava h3, .cert-grid.soc-facts .card.lava p, .cert-grid.soc-facts .card.lava .link-arrow { color: #fff; }
.cert-grid.founding { grid-template-columns: repeat(5, 1fr); max-width: none; gap: 1.25rem; }
.cert-grid.founding .card { padding: 1.5rem 1.35rem; }
@media (max-width: 1100px) { .cert-grid.founding { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .cert-grid.founding { grid-template-columns: 1fr; } }
.soon-tag.live { background: #e4f3ea; color: #1a9e5f; }
/* Light App Store preview (/universe) */
.appstore { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 4rem; max-width: 1000px; margin: 0 auto; }
.app-row { display: flex; align-items: center; gap: 1.1rem; padding: 1.35rem 0; border-top: 1px solid var(--border); }
.appstore .app-row:nth-child(-n+2) { border-top: none; }
.app-icon { flex: none; width: 58px; height: 58px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.65rem; font-weight: 700; }
.app-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; overflow-wrap: break-word; }
.app-name { font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.app-sub { color: var(--muted); font-size: 0.9rem; line-height: 1.35; }
.app-action { flex: none; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; }
.app-btn { background: var(--pill-gray); color: var(--lava); font-weight: 700; font-size: 0.9rem; border-radius: 999px; padding: 0.4rem 1.5rem; transition: background 0.15s ease, color 0.15s ease; }
.app-row:hover .app-btn { background: var(--lava); color: #fff; }
.app-note { font-size: 0.68rem; color: var(--muted-2); text-transform: uppercase; letter-spacing: 0.04em; }
@media (max-width: 820px) {
  .appstore { grid-template-columns: minmax(0, 1fr); }
  .appstore .app-row:nth-child(2) { border-top: 1px solid var(--border); }
}
/* Narrow phones: reclaim width for the subtitle so the Install pill stays on-row */
@media (max-width: 560px) {
  .app-row { gap: 0.85rem; }
  .app-icon { width: 46px; height: 46px; border-radius: 11px; font-size: 1.35rem; }
  .app-icon svg { width: 24px; height: 24px; }
  .app-btn { padding: 0.35rem 1rem; font-size: 0.85rem; }
}
.app-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
/* Universe hero: orbital dot-matrix graphic (.hero- prefix keeps these in critical CSS) */
.hero.universe-hero { position: relative; overflow: hidden; padding-top: 11.5rem; }
.hero.universe-hero .wrap { position: relative; z-index: 1; }
.hero-orbits { position: absolute; left: 50%; top: 3.75rem; transform: translateX(-50%); width: 1400px; height: 700px; pointer-events: none; }
.hero-orbits circle { fill: none; stroke: var(--border); stroke-width: 1.5; }
.hero-orbits circle.dotted { stroke-width: 2.5; stroke-dasharray: 0.5 14; stroke-linecap: square; }
.hero-orbits rect { fill: var(--lava); }
.hero-orbits .sun line { stroke: var(--lava); stroke-width: 3; stroke-dasharray: 3 1; }
.hero-orbits rect.ink { fill: var(--ink); }
.hero-orbits rect.peach { fill: var(--off-orange); }
.hero-orbits rect.star { fill: var(--border); }
.hero-orbits .orbit { transform-origin: 700px 60px; animation: hero-orbit-spin 120s linear infinite; }
.hero-orbits .orbit.reverse { animation-direction: reverse; animation-duration: 160s; }
@keyframes hero-orbit-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hero-orbits .orbit { animation: none; } }
@media (max-width: 700px) { .hero-orbits { width: 900px; height: 450px; } }
.hero-orbits .orbit rect { transform-box: fill-box; transform-origin: center; animation: hero-orbit-spin 120s linear infinite reverse; }
.hero-orbits .orbit.reverse rect { animation-direction: normal; animation-duration: 160s; }
@media (prefers-reduced-motion: reduce) { .hero-orbits .orbit rect { animation: none; } }
/* Universe: industry list (static, not a control) */
.ind-chip { border: 1px solid var(--border); background: #fff; border-radius: 999px; padding: 0.45rem 1.05rem; font-size: 0.9rem; font-family: var(--sans); color: var(--body); cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease; }
.ind-chip:hover { border-color: var(--ink); }
.ind-chip.is-active { background: var(--lava); border-color: var(--lava); color: #fff; font-weight: 600; }
.industry-panel { max-width: 640px; margin: 1.75rem auto 0; text-align: center; min-height: 6rem; }
.ind-body p { margin: 0; font-size: 1.05rem; line-height: 1.6; color: var(--body); }
@media (max-width: 700px) { .industry-panel { min-height: 9rem; } }
/* Universe: App Store panel */
.store-panel { border: 1px solid var(--border); border-radius: 20px; background: #fff; padding: 0 2rem 1.5rem; box-shadow: 0 14px 40px rgba(0,0,0,0.05); }
.store-panel-bar { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 1.4rem 0 0.2rem; border-bottom: 1px solid var(--border); margin-bottom: 0.5rem; }
.store-panel-title { font-weight: 700; font-size: 1.05rem; }
.store-panel-meta { font-size: 0.85rem; color: var(--muted-2); }
.store-panel .appstore { column-gap: 3rem; }
.store-panel .app-row { padding: 1.15rem 0; }
@media (max-width: 640px) { .store-panel { padding: 0 1.25rem 1rem; } }
/* Universe: customer quote cards */
.uni-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.uni-quote { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 1.9rem; transition: transform 0.18s ease, box-shadow 0.18s ease; }
.uni-quote:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(0,0,0,0.08); }
.uni-quote .qmark { font-family: var(--serif); font-size: 2.6rem; line-height: 0.6; color: var(--lava); }
.uni-quote blockquote { font-family: var(--serif); font-size: 1.3rem; line-height: 1.3; margin: 1rem 0 1.25rem; color: var(--ink); }
.uni-quote cite { font-style: normal; font-size: 0.9rem; font-weight: 600; color: var(--ink); }
.uni-quote cite span { display: block; font-weight: 400; color: var(--muted); }
.uni-quote .link-arrow { margin-top: auto; padding-top: 1.25rem; font-size: 0.9rem; }
@media (max-width: 900px) { .uni-quotes { grid-template-columns: 1fr; } }
/* Universe: calmer vertical rhythm on small screens */
@media (max-width: 700px) {
  .universe-page .sec { padding: 3.25rem 0; }
  .universe-page .section-head { margin-bottom: 2rem; }
  .universe-page .statement { padding: 4rem 1.5rem; }
}
.app-icon svg { width: 30px; height: 30px; display: block; }
.app-row.full { grid-column: 1 / -1; border-top: 1px solid var(--border); }
.app-icon img { object-fit: contain; padding: 7px; }
.app-icon.agent-icon { background: var(--ink); color: var(--lava); }
.app-icon.agent-icon svg .dim { opacity: 0.3; }
.app-name { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.app-by-logo { height: 14px; width: auto; padding: 0; object-fit: contain; flex: none; }
.app-by-word { font-style: normal; font-weight: 400; font-size: 0.8rem; color: var(--muted-2); margin-left: 0.15rem; }
  /* ============ Close the Books — arcade game (/close-the-books) ============ */
  /* Self-hosted pixel font, used only by .ctb-* selectors so the file is
     fetched exclusively on the game page. */
  @font-face {
    font-family: "Press Start 2P";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/assets/fonts/press-start-2p-latin.woff2) format("woff2");
  }

  .ctb-arena { padding: 1.5rem 0 3.5rem; background: var(--bg); }
  .ctb-px { font-family: "Press Start 2P", "Courier New", monospace; line-height: 1.6; }

  .ctb-stage {
    position: relative;
    height: min(76vh, 700px);
    min-height: 420px;
    border: 3px solid #16100c;
    border-radius: 10px;
    overflow: hidden;
    background: #221240;
    box-shadow: 0 18px 50px rgba(22, 16, 12, 0.35);
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
  }
  .ctb-canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; cursor: crosshair; }
  .ctb-nogl::after {
    content: "This machine is out of order (WebGL unavailable). The agent wins by forfeit.";
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: #fff; padding: 2rem; text-align: center;
  }

  .ctb-scanlines {
    position: absolute; inset: 0; z-index: 3; pointer-events: none;
    background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.16) 0 1px, transparent 1px 3px);
    box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.45);
  }

  /* --- HUD: SF2-style bars, timer, splashes --- */
  .ctb-hud { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
  .ctb-bars { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px 0; }
  .ctb-side { flex: 1; min-width: 0; }
  .ctb-right { text-align: right; }
  .ctb-name {
    font-family: "Press Start 2P", monospace; font-size: clamp(7px, 1.4vw, 10px);
    color: #fff; text-shadow: 1px 1px 0 #16100c, 2px 2px 0 #16100c; margin-bottom: 5px;
    white-space: nowrap; overflow: hidden;
  }
  .ctb-bar {
    height: 16px; border: 2px solid #16100c; background: #b3231a;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.25), 0 2px 0 rgba(0, 0, 0, 0.4);
  }
  .ctb-fill {
    height: 100%; width: 100%; background: linear-gradient(#ffe873, #f7c948 55%, #eaa221);
    transition: width 0.18s steps(6);
  }
  .ctb-right .ctb-fill { margin-left: auto; }
  .ctb-count {
    font-family: "Press Start 2P", monospace; font-size: clamp(6px, 1.2vw, 8px);
    color: #ffd98a; text-shadow: 1px 1px 0 #16100c; margin-top: 5px;
  }
  .ctb-timer {
    flex: none; width: 3.2em; text-align: center;
    font-family: "Press Start 2P", monospace; font-size: clamp(16px, 3vw, 26px);
    color: #fff; text-shadow: 2px 2px 0 #16100c, -1px -1px 0 #16100c, 1px -1px 0 #16100c, -1px 1px 0 #16100c;
    padding-top: 2px;
  }

  .ctb-combo {
    position: absolute; left: 8%; top: 26%; opacity: 0; transform: scale(0.6) rotate(-6deg);
    font-family: "Press Start 2P", monospace; font-size: clamp(11px, 2.2vw, 18px);
    color: #ffd98a; text-shadow: 2px 2px 0 #b3231a, 3px 3px 0 #16100c;
    transition: opacity 0.12s, transform 0.12s;
  }
  .ctb-combo.show { opacity: 1; transform: scale(1) rotate(-6deg); }

  .ctb-splash {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-family: "Press Start 2P", monospace; font-size: clamp(26px, 7vw, 64px);
    color: #ffd98a; text-shadow: 3px 3px 0 var(--lava), 6px 6px 0 #16100c;
    opacity: 0; transform: scale(1.6); pointer-events: none; text-align: center;
  }
  .ctb-splash.show { opacity: 1; transform: scale(1); transition: transform 0.16s cubic-bezier(0.2, 1.6, 0.4, 1), opacity 0.1s; }
  .ctb-splash.ko { color: #fff; letter-spacing: 0.05em; }

  /* --- start / end panels --- */
  .ctb-screen {
    position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column;
    align-items: center; justify-content: flex-start; gap: 1.1rem; text-align: center;
    padding: 1.5rem; background: rgba(12, 7, 24, 0.82); color: #fff;
    overflow-y: auto;
  }
  /* flexible spacers, not justify-content: center — the content stays centered
     while it fits, and scrolls from the top (not clipped both ends) on the
     short stage of a phone held sideways */
  .ctb-screen::before, .ctb-screen::after { content: ""; flex: 1 0 0; }
  .ctb-screen.hidden { display: none; }
  .ctb-small { font-size: clamp(9px, 1.6vw, 12px); color: #ffd98a; margin: 0; }
  .ctb-vs { font-size: clamp(14px, 3vw, 24px); margin: 0; }
  .ctb-vs span { color: var(--lava); text-shadow: 2px 2px 0 #16100c; padding: 0 0.4em; }
  .ctb-endtitle { font-size: clamp(16px, 3.4vw, 28px); color: #ffd98a; margin: 0; }
  .ctb-rank { font-size: clamp(9px, 1.8vw, 13px); color: var(--lava); margin: 0; }
  .ctb-stats { font-size: clamp(8px, 1.5vw, 11px); color: #d9d2c7; margin: 0; }
  .ctb-stats em { color: #ffd98a; font-style: normal; }
  .ctb-rules {
    max-width: 40rem; margin: 0; color: #d9d2c7;
    font-family: "Press Start 2P", "Courier New", monospace;
    font-size: clamp(8px, 1.5vw, 11px); line-height: 2;
  }
  .ctb-coin {
    font-size: clamp(10px, 2vw, 14px); color: #16100c; background: #ffd98a;
    border: 3px solid #16100c; border-radius: 6px; padding: 0.9rem 1.6rem; cursor: pointer;
    box-shadow: 0 4px 0 #16100c; animation: ctb-blink 1.2s steps(2) infinite;
  }
  .ctb-coin:hover { background: #ffe8b8; }
  .ctb-coin:active { transform: translateY(3px); box-shadow: 0 1px 0 #16100c; }
  @keyframes ctb-blink { 50% { opacity: 0.75; } }
  .ctb-endbtns { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; justify-content: center; }

  @media (max-width: 640px) {
    .ctb-stage { height: 68vh; min-height: 380px; }
    .ctb-stage.ctb-haspad { height: min(48vh, 440px); min-height: 300px; }
    .ctb-timer { width: 2.4em; }
  }
  /* a phone held sideways (or any short window): the 420px minimum would
     overflow the viewport, so size the stage to leave room for the cabinet's
     marquee and coin panel instead */
  @media (max-height: 600px) {
    .ctb-stage { height: calc(100vh - 160px); height: calc(100svh - 160px); min-height: 220px; }
    .ctb-stage.ctb-haspad { height: calc(100vh - 250px); height: calc(100svh - 250px); min-height: 180px; }
    .ctb-screen { gap: 0.75rem; padding: 1rem 1.25rem; }
    .ctb-rules { line-height: 1.7; }
  }
  @media (prefers-reduced-motion: reduce) {
    .ctb-coin { animation: none; }
    .ctb-splash.show { transition: none; }
  }

  /* --- fighter controls: on-screen pad (touch) + key hints --- */
  /* the control deck sits under the screen, like an arcade cabinet's panel */
  .ctb-touch {
    display: none; align-items: center; justify-content: space-between;
    margin-top: 10px; padding: 14px 16px;
    background: #181210; border: 3px solid #16100c; border-radius: 10px;
    box-shadow: 0 10px 30px rgba(22, 16, 12, 0.3);
    touch-action: none; user-select: none; -webkit-user-select: none;
  }
  .ctb-touch.show { display: flex; }
  /* leave room for the deck: shorter screen whenever the pad is in use */
  .ctb-haspad { height: min(52vh, 480px); min-height: 320px; }
  .ctb-dpad, .ctb-abtns { display: flex; gap: 10px; align-items: flex-end; }
  .ctb-touch button {
    pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none;
    width: 58px; height: 58px; border-radius: 12px;
    border: 3px solid #16100c; box-shadow: 0 4px 0 #16100c;
    background: rgba(255, 237, 229, 0.82); color: #16100c;
    font-family: "Press Start 2P", monospace; font-size: 16px;
    display: flex; align-items: center; justify-content: center;
  }
  .ctb-touch button.on { transform: translateY(3px); box-shadow: 0 1px 0 #16100c; background: #ffd98a; }
  .ctb-dpad button[data-k="jump"] { border-radius: 50%; }
  .ctb-abtns button { border-radius: 50%; width: 64px; height: 64px; }
  .ctb-abtns .ctb-bp { background: rgba(245, 65, 15, 0.9); color: #fff; }
  .ctb-abtns .ctb-bk { background: rgba(255, 217, 138, 0.9); }
  .ctb-abtns .ctb-bp.on { background: #d6350a; }

  .ctb-keys { font-size: clamp(8px, 1.5vw, 11px); color: #ffd98a; margin: 0; }
  .ctb-keys-coarse { display: none; }
  @media (pointer: coarse) {
    .ctb-keys-fine { display: none; }
    .ctb-keys-coarse { display: block; }
  }

  /* --- 5-round mode: d-pad cross, ally bar, move names, offer screens --- */
  .ctb-dpad {
    display: grid; gap: 6px;
    grid-template-columns: 52px 52px 52px;
    grid-template-areas: ". up ." "left down right";
  }
  .ctb-dpad .ctb-d-up { grid-area: up; }
  .ctb-dpad .ctb-d-left { grid-area: left; }
  .ctb-dpad .ctb-d-down { grid-area: down; }
  .ctb-dpad .ctb-d-right { grid-area: right; }
  .ctb-dpad button { width: 52px; height: 52px; font-size: 14px; }

  .ctb-allybar {
    display: none; height: 7px; margin-top: 4px; border: 2px solid #16100c;
    background: #6e2018; width: 55%;
  }
  .ctb-allybar.show { display: block; }
  .ctb-allyfill { height: 100%; width: 100%; background: linear-gradient(#ffb090, var(--lava)); transition: width 0.18s steps(4); }

  .ctb-move {
    position: absolute; left: 50%; bottom: 22%; transform: translateX(-50%) scale(0.7);
    font-family: "Press Start 2P", monospace; font-size: clamp(10px, 2vw, 16px);
    color: #fff; text-shadow: 2px 2px 0 var(--lava), 3px 3px 0 #16100c;
    opacity: 0; white-space: nowrap; pointer-events: none;
  }
  .ctb-move.show { opacity: 1; transform: translateX(-50%) scale(1); transition: transform 0.1s, opacity 0.08s; }

  .ctb-ghostbtn {
    font-size: clamp(9px, 1.6vw, 12px); color: #d9d2c7; background: transparent;
    border: 3px solid #d9d2c7; border-radius: 6px; padding: 0.9rem 1.4rem; cursor: pointer;
  }
  .ctb-ghostbtn:hover { color: #fff; border-color: #fff; }

  .ctb-controls { display: flex; flex-direction: column; gap: 0.55rem; }
  .ctb-controls .ctb-px { font-size: clamp(8px, 1.5vw, 11px); color: #fff; margin: 0; }
  .ctb-gold { color: #ffd98a !important; }
  .ctb-dim { color: #9a8f84; }
  .ctb-screen { overflow-y: auto; }

  /* controls-card variants: show exactly one of the two hint blocks */
  .ctb-controls.ctb-keys-coarse { display: none; }
  @media (pointer: coarse) {
    .ctb-controls.ctb-keys-fine { display: none; }
    .ctb-controls.ctb-keys-coarse { display: flex; }
  }

  /* --- arcade page layout: marquee hero, cabinet frame, roster, bezel, hi-scores --- */
  /* Hero rules stay scoped under .hero-arcade so critical-css picks them up. */
  .hero-arcade { padding-bottom: 0; }
  .hero-arcade h1 {
    font-family: "Press Start 2P", "Courier New", monospace;
    font-size: clamp(22px, 4.6vw, 42px); line-height: 1.45; letter-spacing: 0.02em;
  }
  .hero-arcade p.sub {
    font-family: "Press Start 2P", "Courier New", monospace;
    font-size: clamp(9px, 1.5vw, 12px); line-height: 2.1; max-width: 46rem;
  }
  .hero-arcade .arc-eyebrow {
    font-family: "Press Start 2P", "Courier New", monospace;
    font-size: clamp(9px, 1.6vw, 12px); color: var(--lava);
    letter-spacing: 0.12em; margin: 0 0 1.5rem;
  }
  .hero-arcade .arc-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin: 1.9rem 0 3.2rem; }
  .hero-arcade .arc-chips span {
    font-family: "Press Start 2P", "Courier New", monospace;
    font-size: clamp(7px, 1.3vw, 10px); color: var(--ink); line-height: 1;
    border: 1px solid var(--border); background: var(--white); border-radius: 4px;
    padding: 0.6rem 0.9rem;
  }
  /* finish-line strip between hero and arena: 12px vermilion checkerboard */
  .hero-arcade .arc-checker {
    height: 24px;
    background: repeating-conic-gradient(var(--lava) 0% 25%, transparent 0% 50%) 0 0 / 24px 24px;
  }

  /* the cabinet: backlit marquee on top, bezel around the screen, coin panel below */
  .arc-cab {
    background: #16100c; border-radius: 16px; padding: 12px;
    box-shadow: 0 24px 60px rgba(22, 16, 12, 0.4);
  }
  /* rapid taps must never double-tap-zoom the page: everything tappable in
     the cabinet opts out (deliberate pinch zoom stays available) */
  .arc-cab, .arc-cab button, .arc-cab input { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
  /* the pad keeps its stricter no-pan behaviour for thumb drags */
  .arc-cab .ctb-touch, .arc-cab .ctb-touch button { touch-action: none; }
  /* mashing misses the buttons too: the whole game page refuses double-tap
     zoom (scroll and pinch still work), and in fullscreen play the surface
     ignores every browser gesture - two stray thumbs read as a pinch */
  body:has(.arc-cab) { touch-action: manipulation; }
  .arc-cab.ctb-fs, .arc-cab.ctb-fs .ctb-stage { touch-action: none; }
  .arc-marquee {
    text-align: center; padding: 1rem 0.75rem 1.15rem;
    font-size: clamp(13px, 2.6vw, 22px); color: #ffd98a; letter-spacing: 0.1em;
    text-shadow: 0 0 14px rgba(245, 65, 15, 0.85), 2px 2px 0 #000;
    background: radial-gradient(ellipse at 50% 130%, rgba(245, 65, 15, 0.3), transparent 70%);
    animation: arc-glow 2.4s ease-in-out infinite;
  }
  @keyframes arc-glow { 50% { text-shadow: 0 0 26px rgba(245, 65, 15, 1), 2px 2px 0 #000; } }
  .arc-cab .ctb-stage { border-color: #000; border-radius: 8px; box-shadow: none; }
  .arc-panel {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 0.95rem 0.5rem 0.5rem;
    font-size: clamp(7px, 1.3vw, 10px); color: #ffd98a; line-height: 1;
  }
  .arc-panel-msg { color: #9a8f84; letter-spacing: 0.08em; text-align: center; }
  .arc-slot { flex: none; width: 26px; height: 34px; border-radius: 4px; border: 2px solid #3a2c22; background: #221a14; position: relative; }
  .arc-slot i {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 3px; height: 16px; background: #000; border-radius: 2px;
    box-shadow: 0 0 6px rgba(245, 65, 15, 0.6);
  }

  /* shared: pixel-font section eyebrows */
  .arc-px-eyebrow { font-family: "Press Start 2P", "Courier New", monospace; font-weight: 400; font-size: clamp(8px, 1.5vw, 11px); letter-spacing: 0.14em; }

  /* pixel type throughout the page: the arcade sections swap the serif/sans
     headings for the cabinet font (the hero variants live with the hero rules above) */
  .arc-sec .section-head h2 { font-family: "Press Start 2P", "Courier New", monospace; font-weight: 400; font-size: clamp(15px, 2.6vw, 24px); line-height: 1.7; letter-spacing: 0.02em; }
  .arc-sec .section-head p { font-family: "Press Start 2P", "Courier New", monospace; font-size: clamp(9px, 1.5vw, 12px); line-height: 2.1; }
  .arc-over .btn-lava { font-family: "Press Start 2P", "Courier New", monospace; font-size: 11px; }

  /* HUD score readout, under the round timer */
  .ctb-mid { flex: none; text-align: center; }
  .ctb-score {
    font-family: "Press Start 2P", monospace; font-size: clamp(7px, 1.3vw, 9px);
    color: #ffd98a; text-shadow: 1px 1px 0 #16100c; margin-top: 4px;
  }

  /* the game toggles this class on buttons too, not just full screens */
  .ctb-coin.hidden { display: none; }

  /* --- top-10 leaderboard, right under the cabinet --- */
  /* dark arcade room around the board, with a scrolling perspective floor
     grid along the bottom edge (decorative, behind .wrap) */
  .arc-lb { background: #16100c; position: relative; overflow: hidden; }
  .arc-lb .wrap { position: relative; z-index: 1; }
  .arc-lb::after {
    content: ""; position: absolute; z-index: 0; pointer-events: none;
    left: -25%; right: -25%; bottom: -10rem; height: 38rem;
    background:
      repeating-linear-gradient(to right, var(--lava) 0 2px, transparent 2px 84px),
      repeating-linear-gradient(to bottom, var(--lava) 0 2px, transparent 2px 62px);
    transform: perspective(560px) rotateX(58deg);
    transform-origin: 50% 0;
    opacity: 0.26;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 60%);
    mask-image: linear-gradient(to bottom, transparent, #000 60%);
    animation: arc-gridscroll 2.6s linear infinite;
  }
  @keyframes arc-gridscroll { to { background-position: 0 0, 0 62px; } }
  .arc-lb .section-head { margin-bottom: 2.25rem; }
  .arc-lb .section-head h2 { color: #fff; }
  .arc-lb .section-head p { color: #d9d2c7; }
  .arc-lb .arc-px-eyebrow { color: #ffd98a; }
  .arc-lbboard {
    max-width: 34rem; margin: 0 auto; background: #1d1510; border-radius: 12px;
    padding: 1.6rem 1.5rem 1.8rem; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
    border: 2px solid rgba(245, 65, 15, 0.35);
  }
  .arc-board-title { margin: 0 0 1.3rem; text-align: center; font-size: clamp(11px, 2vw, 15px); letter-spacing: 0.12em; color: var(--lava); text-shadow: 0 0 12px rgba(245, 65, 15, 0.6); }
  .arc-lbrows { list-style: none; margin: 0; padding: 0; }
  .arc-lbrows li { display: flex; align-items: baseline; gap: 1.1rem; margin-top: 0.75rem; font-size: clamp(8px, 1.5vw, 11px); line-height: 1.6; color: #fff; }
  .arc-lbrows li:first-child { color: #ffd98a; }
  .arc-lbrows b { flex: none; min-width: 1.6em; font-weight: 400; }
  .arc-lbrows span { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .arc-lbrows em { font-style: normal; }
  .arc-lbrows .arc-lbempty { color: #4a3a2e; }
  .arc-lbrows .arc-lbme { color: var(--lava); text-shadow: 0 0 10px rgba(245, 65, 15, 0.5); }
  .arc-lbnote { margin: 1.3rem 0 0; text-align: center; font-size: clamp(7px, 1.3vw, 9px); letter-spacing: 0.1em; color: #9a8f84; }
  /* landscape nudge: touch devices in portrait only, gone the moment they tilt */
  .ctb-tilt { display: none; margin: 0; font-size: clamp(8px, 1.5vw, 10px); color: #ffd98a; letter-spacing: 0.06em; animation: ctb-blink 1.6s steps(2) infinite; }
  @media (pointer: coarse) and (orientation: portrait) {
    .ctb-tilt { display: block; }
  }

  /* name entry, on the cabinet's INSERT COIN screen */
  .ctb-namerow { display: flex; gap: 0.7rem; justify-content: center; flex-wrap: wrap; }
  .ctb-namerow input {
    width: 11ch; text-transform: uppercase; background: #221a14; color: #ffd98a;
    border: 2px solid #3a2c22; border-radius: 6px; padding: 0.8rem 0.9rem;
    /* 16px minimum: anything smaller makes iOS auto-zoom the page on focus */
    font-size: 16px; caret-color: var(--lava);
  }
  .ctb-namerow input:focus { outline: 2px solid var(--lava); outline-offset: 2px; }
  .ctb-namerow input::placeholder { color: #6e5c4c; }
  .ctb-namerow .ctb-coin { animation: none; }

  /* --- closing CTA on the cream section --- */
  .arc-over { background: var(--bg); text-align: center; }
  .arc-over-head { margin-bottom: 2.25rem; }
  .arc-over-btns { display: flex; flex-wrap: wrap; gap: 1.1rem; align-items: center; justify-content: center; }
  /* every button on the arcade page speaks pixel — including the standard
     site .btn used for the demo CTAs on the end screen and page sections */
  .ctb-screen .btn,
  .arc-sec .btn,
  .hero-arcade .btn {
    font-family: "Press Start 2P", "Courier New", monospace;
    font-size: 11px;
    line-height: 1.7;
  }

  .arc-replay {
    font-size: 10px; color: var(--ink); background: var(--white);
    border: 2px solid var(--ink); border-radius: 6px; padding: 0.95rem 1.3rem;
    box-shadow: 0 3px 0 var(--ink);
  }
  .arc-replay:hover { background: #ffd98a; }
  .arc-replay:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }

  /* --- mobile fullscreen cabinet: a run takes over the viewport --- */
  /* the game toggles .ctb-fs on the cabinet (touch devices only) when a run
     starts, and body.ctb-noscroll pins the page behind it */
  body.ctb-noscroll { overflow: hidden; }
  .ctb-fsx { display: none; }
  .arc-cab.ctb-fs {
    position: fixed; inset: 0; z-index: 1000; margin: 0; padding: 0;
    border-radius: 0; display: flex; flex-direction: column;
  }
  .arc-cab.ctb-fs .arc-marquee, .arc-cab.ctb-fs .arc-panel { display: none; }
  .arc-cab.ctb-fs .ctb-stage {
    flex: 1; height: auto !important; min-height: 0 !important;
    border: 0; border-radius: 0;
  }
  .arc-cab.ctb-fs .ctb-touch {
    margin-top: 0; border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0;
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
  }
  .arc-cab.ctb-fs .ctb-fsx {
    display: flex; position: absolute; z-index: 6;
    right: calc(10px + env(safe-area-inset-right));
    bottom: calc(10px + env(safe-area-inset-bottom));
    width: 36px; height: 36px; align-items: center; justify-content: center;
    background: rgba(22, 16, 12, 0.7); color: #ffd98a;
    border: 2px solid #3a2c22; border-radius: 6px; font-size: 12px; cursor: pointer;
  }
  /* landscape: controls overlay the stage edges, under each thumb */
  @media (orientation: landscape) {
    .arc-cab.ctb-fs .ctb-touch {
      position: absolute; inset: 0; z-index: 6; margin: 0;
      background: transparent; border: 0; box-shadow: none;
      align-items: flex-end; justify-content: space-between;
      pointer-events: none;
      padding: 0 calc(14px + env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left));
    }
    .arc-cab.ctb-fs .ctb-touch button { pointer-events: auto; }
    .arc-cab.ctb-fs .ctb-fsx { bottom: auto; top: calc(64px + env(safe-area-inset-top)); }
  }

  @media (max-width: 640px) {
    .arc-panel-msg { display: none; }
    .hero-arcade .arc-checker { background-size: 16px 16px; height: 16px; }
    .arc-marquee { font-size: 12px; letter-spacing: 0.04em; white-space: nowrap; }
  }
  @media (prefers-reduced-motion: reduce) {
    .arc-marquee { animation: none; }
    .arc-lb::after { animation: none; }
    .ctb-tilt { animation: none; }
  }

  /* ============ Chase the Close — flappy chase game (/chase-the-close) ============ */
  /* The cabinet chrome, screens and fullscreen mode all reuse the
     .arc-/.ctb- rules above; the whole canvas is the flap button. */
  .ctc-canvas {
    display: block; width: 100%; height: 100%;
    image-rendering: pixelated;
    touch-action: none; /* tapping the sky flaps, never scrolls */
    cursor: pointer;
  }
  /* fullscreen on a notched phone held sideways: the game sets
     viewport-fit=cover, and this padding keeps the playfield (and the HUD
     drawn at its edges) out of the notch and home-indicator zones — the
     uncovered strips stay black. resize() measures the canvas box, so the
     game sees the padded size. Scoped to this stage: Close the Books sizes
     its canvas from stage.clientWidth, which a padding here would break. */
  .arc-cab.ctb-fs .ctc-stage {
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    background: #000;
  }

  /* --- "More games in the arcade": cross-links on every game page --- */
  .arc-more { background: var(--bg); text-align: center; border-top: 1px solid var(--border); }
  .arc-more-grid { display: flex; flex-wrap: wrap; gap: 1.25rem; justify-content: center; }
  .arc-more-card {
    display: flex; flex-direction: column; align-items: center; gap: 0.95rem;
    width: 16.5rem; padding: 1.6rem 1.3rem 1.4rem;
    background: var(--white); color: var(--ink); text-decoration: none;
    border: 2px solid var(--ink); border-radius: 10px; box-shadow: 0 4px 0 var(--ink);
    transition: transform 0.1s, box-shadow 0.1s;
  }
  .arc-more-card:hover { transform: translateY(-3px); box-shadow: 0 7px 0 var(--ink); }
  .arc-more-card:active { transform: translateY(0); box-shadow: 0 2px 0 var(--ink); }
  .arc-more-card svg { width: 64px; height: 64px; }
  .arc-more-card b { font-weight: 400; font-size: 11px; letter-spacing: 0.04em; }
  .arc-more-card span { font-size: 0.85rem; line-height: 1.55; opacity: 0.75; }
  .arc-more-card em { font-style: normal; font-size: 9px; color: var(--lava); }
  @media (prefers-reduced-motion: reduce) {
    .arc-more-card, .arc-more-card:hover { transition: none; transform: none; }
  }

  /* How Light works — agents / policies model (products/agents) */
  .agent-model {
    display: grid;
    grid-template-columns: 1fr auto 1.15fr auto 1fr;
    gap: 1.1rem;
    align-items: stretch;
    max-width: 1080px;
    margin: 0 auto;
  }
  .am-col { display: flex; flex-direction: column; gap: 1rem; }
  .am-col-center { justify-content: center; position: relative; padding-top: 1.5rem; }
  .am-step {
    display: block; text-align: center;
    font-size: 0.75rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--muted); margin-bottom: 0.2rem;
  }
  .am-col-center .am-step { position: absolute; top: 0; left: 0; right: 0; }
  .am-card {
    background: var(--white); border: 1px solid var(--border); border-radius: 14px;
    padding: 1.25rem 1.35rem;
  }
  .am-card h3 { margin: 0 0 0.45rem; font-size: 1.05rem; font-weight: 600; font-family: var(--sans); color: var(--ink); }
  .am-card p { margin: 0; font-size: 0.9rem; line-height: 1.55; color: var(--body); }
  .am-card-policy { border-color: rgba(245, 65, 15, 0.45); }
  .am-card-policy h3 { color: var(--lava); }
  .am-card-policy .am-chips li { background: rgba(245, 65, 15, 0.07); border-color: rgba(245, 65, 15, 0.35); }
  .am-card-exec { background: rgba(248, 180, 145, 0.3); border-color: rgba(248, 180, 145, 0.9); }
  .am-card-exec .am-chips li { background: var(--white); border-color: rgba(23, 23, 23, 0.12); }
  .am-card-exec .am-badge { background: var(--white); }
  .am-card-flow { background: var(--off-green); border-color: #b6bfb2; }
  .am-card-flow .am-chips li { background: var(--white); border-color: rgba(23, 23, 23, 0.12); }
  .am-card-audit { background: var(--off-blue); border-color: #b9c2cf; }
  .am-card-audit .am-badge { background: var(--white); }
  .am-card-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.45rem; }
  .am-card-head h3 { margin: 0; }
  .am-badge {
    display: inline-block; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--ink); background: var(--pill-gray); border-radius: 999px; padding: 0.2rem 0.6rem; white-space: nowrap;
  }
  .am-chips { list-style: none; margin: 0.9rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
  .am-chips li {
    font-size: 0.78rem; font-weight: 500; color: var(--ink);
    background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 0.22rem 0.65rem;
  }
  .am-card-report { background: var(--ink); border-color: var(--ink); }
  .am-card-report h3 { color: #fff; }
  .am-card-report p { color: #b5b5b5; }
  .am-arrow {
    align-self: center; display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
    color: var(--lava); padding-top: 1rem;
  }
  .am-arrow span { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
  .am-arrow svg { display: block; }
  .am-down { display: flex; justify-content: center; color: var(--lava); margin: -0.35rem 0; }
  .am-down svg { display: block; }
  .am-rail {
    grid-column: 1 / -1; position: relative; height: 2.4rem; margin: 0.4rem 4.5rem 0.6rem;
    border: 1px dashed rgba(245, 65, 15, 0.5); border-top: none; border-radius: 0 0 14px 14px;
  }
  .am-rail span {
    position: absolute; left: 50%; bottom: -0.7em; transform: translateX(-50%);
    background: var(--bg); padding: 0 0.85rem; white-space: nowrap;
    font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; color: var(--lava);
  }
  @media (max-width: 900px) {
    .agent-model { grid-template-columns: 1fr; gap: 0.9rem; }
    .am-col-center { justify-content: flex-start; padding-top: 0; }
    .am-col-center .am-step { position: static; }
    .am-step { display: none; }
    .am-arrow { flex-direction: column; align-items: center; justify-content: center; padding: 0.2rem 0; gap: 0; }
    .am-arrow svg { transform: rotate(90deg); width: 34px; height: 10px; margin: 13px 0; }
    .am-rail { height: auto; border: none; margin: 0.2rem 0 0; }
    .am-rail span { position: static; transform: none; display: block; text-align: center; background: none; padding: 0; white-space: normal; }
  }

  /* Governance examples — step-by-step walkthroughs (products/agents) */
  .gov-examples { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin: 0 auto; }
  .gov-example { background: var(--white); border: 1px solid var(--border); border-radius: 14px; padding: 1.7rem 1.8rem 1.4rem; }
  .gov-example h3 { margin: 0; font-size: 1.35rem; font-weight: 400; font-family: var(--serif); color: var(--ink); letter-spacing: -0.01em; }
  .gov-steps { list-style: none; margin: 1.3rem 0 0; padding: 0; }
  .gov-steps li { position: relative; padding: 0 0 1.35rem 1.8rem; }
  .gov-steps li::before { content: ""; position: absolute; left: 5px; top: 20px; bottom: -3px; width: 1px; background: var(--border); }
  .gov-steps li:last-child { padding-bottom: 0.2rem; }
  .gov-steps li:last-child::before { display: none; }
  .gov-steps li::after { content: ""; position: absolute; left: 0; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--white); border: 1.5px solid var(--muted-2); }
  .gov-steps li:has(.gov-actor)::after { border-color: var(--lava); background: var(--lava); }
  .gov-steps li:has(.gov-actor-exec)::after { border-color: #f09b6e; background: #f09b6e; }
  .gov-steps li:has(.gov-actor-flow)::after { border-color: #9aa695; background: #9aa695; }
  .gov-steps li:has(.gov-actor-audit)::after { border-color: #98a6bb; background: #98a6bb; }
  .gov-steps li:has(.gov-actor-report)::after { border-color: var(--ink); background: var(--ink); }
  .gov-actor {
    display: inline-block; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--lava); background: rgba(245, 65, 15, 0.1); border-radius: 999px; padding: 0.2rem 0.6rem; margin-bottom: 0.4rem;
  }
  .gov-actor-exec { color: var(--ink); background: rgba(248, 180, 145, 0.55); }
  .gov-actor-flow { color: var(--ink); background: var(--off-green); }
  .gov-actor-audit { color: var(--ink); background: var(--off-blue); }
  .gov-actor-report { color: #fff; background: var(--ink); }
  .gov-steps p { margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--body); }
  @media (max-width: 1000px) { .gov-examples { grid-template-columns: 1fr; max-width: 560px; } }

  /* ---- /integrations ------------------------------------------------- */
  /* Hero stat row: the four numbers that say how wide the coverage is. */
  .int-hero { padding-bottom: 1rem; }
  .int-hero .sub { margin-bottom: 0; }
  .int-stat-num {
    font-family: var(--serif); font-weight: 400; line-height: 1;
    font-size: clamp(1.9rem, 4vw, 2.6rem); color: var(--lava);
    margin-right: 0.2rem; vertical-align: -0.12em;
  }

  /* Rotating word in the hero H1: a one-word-tall window over a column of
     words; JS slides the column and eases the window's width to the current
     word every 1.2s. Without JS (or with reduced motion) it sits on the
     first word. */
  .hero-rotate {
    display: inline-flex; flex-direction: column; align-items: flex-start;
    overflow: hidden; height: 1.3em; vertical-align: bottom;
    transition: width 0.4s ease;
  }
  .hero-rotate span {
    display: block; flex: none; height: 1.3em; line-height: 1.3;
    white-space: nowrap; transition: transform 0.45s ease;
  }

  /* Toolbar: search plus category chips, stuck under the site header so the
     filters stay reachable while scrolling several hundred cards. */
  .int-browse { padding-top: 1rem; }
  .int-toolbar {
    position: sticky; top: var(--header-h, 72px); z-index: 20;
    background: var(--bg); padding: 0.75rem 0 1rem; margin-bottom: 0.25rem;
  }
  .int-search { position: relative; max-width: 620px; margin: 0 auto 1.25rem; }
  .int-search-icon { position: absolute; left: 1.05rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
  .int-search input {
    width: 100%; padding: 0.9rem 1.15rem 0.9rem 2.9rem;
    font: 500 1rem var(--sans); color: var(--ink);
    background: #fff; border: 1px solid var(--border); border-radius: 10px; outline: none;
  }
  .int-search input:focus { border-color: var(--lava); }
  .int-search input::-webkit-search-cancel-button { cursor: pointer; }
  .int-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
  .int-chip {
    display: inline-flex; align-items: center; gap: 0.45rem;
    border: 1px solid var(--border); background: #fff; border-radius: 999px;
    padding: 0.45rem 0.95rem; font: 500 0.9rem var(--sans); color: var(--body);
    cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
  }
  .int-chip:hover { border-color: var(--ink); }
  .int-chip.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
  .int-chip-count { font-size: 0.78rem; color: var(--muted); background: var(--bg); border-radius: 999px; padding: 0.05rem 0.45rem; }
  .int-chip.is-active .int-chip-count { color: #fff; background: rgba(255, 255, 255, 0.2); }
  @media (max-width: 700px) {
    .int-toolbar { position: static; }
    .int-chips { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0.35rem; -webkit-overflow-scrolling: touch; }
    .int-chip { white-space: nowrap; }
  }

  .int-count { text-align: center; color: var(--muted); font-size: 0.9rem; margin: 0 0 1.75rem; }

  /* The card grid: a logo tile, a name and its category, and nothing else.
     No card chrome - the logo tiles carry the rhythm, so rows stay tight and
     every card is the same height whatever it is. */
  .int-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem 2rem; }
  @media (max-width: 1000px) { .int-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 560px) { .int-grid { grid-template-columns: 1fr; } }

  .int-card { display: flex; gap: 0.9rem; align-items: center; min-width: 0; }
  .int-card[hidden] { display: none; }
  .int-logo {
    flex: none; display: grid; place-items: center;
    width: 52px; height: 52px; border-radius: 12px;
    background: #fff; border: 1px solid var(--border); overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .int-logo img { width: 34px; height: 34px; object-fit: contain; }
  .int-monogram { font-family: var(--serif); font-size: 1.25rem; color: var(--ink); line-height: 1; }
  .int-card:hover .int-logo { border-color: var(--ink); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07); }
  .int-card-text { min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
  .int-card-name { font-size: 0.98rem; font-weight: 600; color: var(--ink); line-height: 1.3; }
  .int-card:hover .int-card-name { color: var(--lava); }
  .int-pill {
    align-self: flex-start; margin-top: 0.15rem;
    font-size: 0.68rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--lava); background: rgba(245, 65, 15, 0.1);
    border-radius: 999px; padding: 0.15rem 0.55rem; line-height: 1.5;
  }

  .int-empty { text-align: center; color: var(--body); margin: 2.5rem 0 0; }
  .int-empty a { color: var(--lava); text-decoration: underline; }
  .int-more-wrap { display: flex; justify-content: center; margin-top: 2.5rem; }
  .int-more[hidden] { display: none; }

  .int-faq { max-width: 780px; margin: 0 auto; }
  .int-faq details { border-bottom: 1px solid var(--border); }
  .int-faq summary {
    list-style: none; cursor: pointer; padding: 1.15rem 2rem 1.15rem 0; position: relative;
    font-weight: 600; font-size: 1.02rem; color: var(--ink);
  }
  .int-faq summary::-webkit-details-marker { display: none; }
  .int-faq summary::after {
    content: "+"; position: absolute; right: 0.2rem; top: 50%; transform: translateY(-50%);
    font-weight: 400; font-size: 1.4rem; color: var(--lava); line-height: 1;
  }
  .int-faq details[open] summary::after { content: "\2013"; }
  .int-faq p { margin: 0 0 1.25rem; color: var(--body); line-height: 1.65; max-width: 66ch; }
  .int-faq a { color: var(--lava); text-decoration: underline; }

  /* ---- /app-store: AppOS overview -------------------------------------
     An Apple-style product introduction: a glowing hero wordmark over a
     bento grid of feature cards with mixed spans. Each card pairs a serif
     headline with a mock-UI vignette and closes on a short accent line. */
  .appos { padding: 7rem 0 6.5rem; overflow: hidden; }
  .appos-hero { text-align: center; max-width: 46rem; margin: 0 auto; }
  .appos-setup {
    font-family: var(--serif); font-size: clamp(1.1rem, 2vw, 1.35rem); line-height: 1.6;
    color: #b5b5b5; margin: 0 0 2.25rem; text-wrap: balance;
  }
  .appos-setup em { font-style: normal; color: var(--lava); }
  .appos-title {
    font-family: var(--serif); font-weight: 400; letter-spacing: -0.02em;
    font-size: clamp(3.4rem, 9vw, 6.5rem); line-height: 1; color: #fff; margin: 0 0 1.1rem;
  }
  .appos-sub {
    font-family: var(--serif); font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.3;
    color: #b5b5b5; margin: 0 0 1.75rem;
  }
  .appos-intro { font-size: 1.1rem; line-height: 1.7; color: #8f8f8f; margin: 0 auto; max-width: 44rem; text-wrap: balance; }
  .appos-intro em { font-style: normal; color: var(--lava); }

  /* The bento grid: mixed-span cards on a 6-column grid. */
  .appos-bento {
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.25rem;
    margin-top: 4.5rem;
  }
  .appos-card {
    grid-column: span 6;
    display: flex; flex-direction: column; gap: 1.1rem; text-align: left;
    background: var(--dark-2); border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 24px; padding: 2.5rem;
  }
  .appos-card.span-2 { grid-column: span 2; }
  .appos-card.span-3 { grid-column: span 3; }
  .appos-card.span-4 { grid-column: span 4; }
  .appos-card h3 {
    font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em;
    font-size: clamp(1.45rem, 2.4vw, 1.9rem); line-height: 1.25; color: #fff; margin: 0;
  }
  .appos-card.span-6 h3 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
  .appos-card p { font-size: 0.98rem; line-height: 1.65; color: #9a9a9a; margin: 0; }
  /* Split cards: copy on the left, vignette on the right. */
  .appos-card.appos-split {
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 1.1rem 3rem; align-items: center;
  }
  .appos-card-copy { display: flex; flex-direction: column; gap: 1.1rem; }

  /* Mock-UI vignettes inside the cards. */
  .appos-visual { margin: 0; display: flex; justify-content: center; width: 100%; }
  .appos-card > .appos-visual { margin-top: auto; padding-top: 1.1rem; }
  .appos-card.appos-split > .appos-visual { margin-top: 0; padding-top: 0; align-self: center; }
  .appos-panel {
    text-align: left; width: 100%; max-width: 30rem;
    background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px; padding: 1.4rem 1.6rem;
  }
  .appos-panel-head { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #8f8f8f; margin-bottom: 0.9rem; }
  .appos-flag { margin-right: 0.3rem; }
  .appos-panel-foot { font-size: 0.82rem; color: #8f8f8f; margin-top: 0.9rem; }

  .appos-rate-row { display: flex; align-items: baseline; gap: 0.7rem; font-family: var(--serif); font-size: 1.55rem; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .appos-rate-old { color: #6b6b6b; text-decoration: line-through; text-decoration-thickness: 1px; font-size: 1.1rem; }
  .appos-rate-row svg { align-self: center; color: #8f8f8f; flex: none; }
  .appos-rate-new { color: var(--lava); }

  .appos-repair-msg { font-size: 0.95rem; line-height: 1.6; color: #cfcfcf; margin-bottom: 1.2rem; }
  .appos-track { display: flex; align-items: center; gap: 0.6rem; font-size: 0.8rem; font-variant-numeric: tabular-nums; }
  .appos-step { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; color: #9a9a9a; }
  .appos-step i { width: 11px; height: 11px; border-radius: 50%; background: #6b6b6b; flex: none; }
  .appos-track-line { flex: 1; height: 1px; background: rgba(255, 255, 255, 0.16); min-width: 0.6rem; }
  .appos-step.is-fixed { color: #fff; font-weight: 600; }
  .appos-step.is-fixed i { background: var(--lava); }

  /* The repair replays once when the panel scrolls into view: steps rise in
     left to right while the lines draw between them, overlapping so it reads
     as one motion, and the Fixed dot turns lava and keeps a slow breathing
     pulse. JS arms it by adding .is-armed (skipped under
     prefers-reduced-motion) and .is-played fires the playback; without JS
     the finished state above simply renders, static. */
  .appos-repair.is-armed .appos-step {
    opacity: 0; transform: translateY(0.35em);
    transition-property: opacity, transform, color;
    transition-duration: 0.5s;
    transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .appos-repair.is-armed .appos-track-line {
    transform: scaleX(0); transform-origin: left center;
    transition: transform 0.6s cubic-bezier(0.45, 0, 0.25, 1);
  }
  .appos-repair.is-armed .appos-step.is-fixed { color: #9a9a9a; }
  .appos-repair.is-armed .appos-step.is-fixed i { background: #6b6b6b; transition: background-color 0.5s ease; }
  .appos-repair.is-played .appos-step { opacity: 1; transform: translateY(0); }
  .appos-repair.is-played .appos-track-line { transform: scaleX(1); }
  .appos-repair.is-played .appos-step.is-fixed { color: #fff; }
  .appos-repair.is-played .appos-step.is-fixed i {
    background: var(--lava); transition-delay: 3.7s;
    animation: appos-dot-breathe 2.4s ease-in-out 4.1s infinite;
  }
  /* Each stage is current in turn: it lands white with the lava dot, the
     dot beats twice, the line draws onward, and the stage dims to grey as
     the next takes over. Fixed keeps the white and breathes. */
  .appos-repair.is-played .appos-track > :nth-child(1) { animation: appos-step-pass 2.4s ease 0s both; }
  .appos-repair.is-played .appos-track > :nth-child(1) i { animation: appos-dot-pass 2.4s ease 0s both; }
  .appos-repair.is-played .appos-track > :nth-child(2) { transition-delay: 1.3s; }
  .appos-repair.is-played .appos-track > :nth-child(3) { animation: appos-step-pass 2.4s ease 1.8s both; }
  .appos-repair.is-played .appos-track > :nth-child(3) i { animation: appos-dot-pass 2.4s ease 1.8s both; }
  .appos-repair.is-played .appos-track > :nth-child(4) { transition-delay: 3.1s; }
  .appos-repair.is-played .appos-track > :nth-child(5) { transition-delay: 3.6s, 3.6s, 3.65s; }
  @keyframes appos-step-pass {
    0% { opacity: 0; transform: translateY(0.35em); color: #fff; }
    21% { opacity: 1; transform: none; color: #fff; }
    75% { color: #fff; }
    100% { opacity: 1; transform: none; color: #9a9a9a; }
  }
  /* Lava while current, with one heartbeat, then grey as it hands off. */
  @keyframes appos-dot-pass {
    0% { background-color: var(--lava); transform: scale(1); }
    25% { transform: scale(1); }
    38% { transform: scale(1.5); }
    54% { transform: scale(1); }
    75% { background-color: var(--lava); }
    100% { background-color: #6b6b6b; transform: scale(1); }
  }
  @keyframes appos-dot-breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.4); }
  }
  @media (max-width: 480px) {
    .appos-track { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
    .appos-track-line { display: none; }
  }

  .appos-privacy { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .appos-privacy-head { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #8f8f8f; margin-bottom: 0.7rem; }
  .appos-privacy ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
  .appos-privacy li { font-size: 0.95rem; display: flex; align-items: flex-start; gap: 0.55rem; }
  .appos-privacy li::before { flex: none; font-size: 0.85rem; line-height: inherit; }
  .appos-privacy li.is-seen { color: #e8e8e8; }
  .appos-privacy li.is-seen::before { content: "\2713"; color: #e8e8e8; }
  .appos-privacy li.is-never { color: #6b6b6b; text-decoration: line-through; text-decoration-thickness: 1px; }
  .appos-privacy li.is-never::before { content: "\00d7"; text-decoration: none; }

  .appos-flow { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; }
  .appos-flow-node {
    flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 0.1rem;
    border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 12px; background: rgba(255, 255, 255, 0.045);
    padding: 0.65rem 0.5rem; font-size: 0.92rem; color: #e8e8e8; min-width: 0;
  }
  .appos-flow-node small { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: #8f8f8f; }
  .appos-flow-node.is-human { border-color: var(--lava); }
  .appos-flow-node.is-human small { color: var(--lava); }
  .appos-flow-arrow { width: 0.9rem; height: 1px; background: rgba(255, 255, 255, 0.25); position: relative; flex: none; }
  .appos-flow-arrow::after {
    content: ""; position: absolute; right: -1px; top: -3px;
    border-left: 5px solid rgba(255, 255, 255, 0.35); border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent;
  }
  @media (max-width: 420px) {
    .appos-flow-arrow { display: none; }
    .appos-flow { flex-wrap: wrap; }
    .appos-flow-node { flex: 1 1 44%; }
  }

  /* Coverage as the brand's pixel-cluster motif: squares accumulating row
     by row, the newest one in lava. */
  .appos-pixels { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
  .appos-pixels-grid { display: grid; grid-template-columns: repeat(8, 1.05rem); gap: 0.45rem; }
  .appos-pixels-grid i { width: 1.05rem; height: 1.05rem; border-radius: 2px; background: rgba(255, 255, 255, 0.07); }
  .appos-pixels-grid i.on { background: rgba(255, 255, 255, 0.78); }
  .appos-pixels-grid i.is-now { background: var(--lava); }

  @media (max-width: 1000px) {
    .appos-card.span-2, .appos-card.span-3, .appos-card.span-4 { grid-column: span 3; }
    .appos-bento > .appos-card:last-child { grid-column: span 6; }
  }
  @media (max-width: 700px) {
    .appos { padding: 5rem 0 4.5rem; }
    .appos-bento { margin-top: 3.25rem; gap: 1rem; }
    .appos-card, .appos-card.span-2, .appos-card.span-3, .appos-card.span-4 { grid-column: span 6; }
    .appos-card { padding: 1.9rem 1.5rem; }
    .appos-card.appos-split { grid-template-columns: 1fr; }
  }

  /* ---- /integrations/<slug> ------------------------------------------- */
  .int-detail-hero { text-align: left; padding-bottom: 3rem; }
  .int-crumbs { font-size: 0.88rem; color: var(--muted); margin-bottom: 1.6rem; }
  .int-crumbs a { color: var(--muted); }
  .int-crumbs a:hover { color: var(--ink); }
  .int-crumb-sep { margin: 0 0.5rem; color: var(--muted-2); }
  .int-detail-head { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 1.6rem; }
  .int-logo-lg { width: 72px; height: 72px; border-radius: 16px; }
  .int-logo-lg img { width: 46px; height: 46px; }
  .int-logo-lg .int-monogram { font-size: 1.9rem; }
  .int-detail-hero h1 { margin: 0 0 0.3rem; }
  .int-detail-sub { margin: 0; color: var(--body); font-size: 1.02rem; max-width: 44rem; }
  .int-detail-hero .events-hero-ctas { justify-content: flex-start; }
  @media (max-width: 620px) {
    .int-detail-head { flex-direction: column; align-items: flex-start; gap: 1rem; }
  }

  .int-detail-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 3.5rem; align-items: start; }
  @media (max-width: 900px) { .int-detail-wrap { grid-template-columns: 1fr; gap: 2.5rem; } }
  .int-h2 { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; color: var(--ink); margin: 2.75rem 0 1.1rem; }
  .int-detail-main > .int-h2:first-child, .int-detail-aside .int-h2 { margin-top: 0; }
  .int-detail-main p { color: var(--body); line-height: 1.7; margin: 0 0 1.1rem; max-width: 62ch; }
  .int-note { font-weight: 600; color: var(--ink) !important; margin-bottom: 0.6rem !important; }

  .int-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  @media (max-width: 700px) { .int-tiles { grid-template-columns: 1fr; } }
  .int-tile { background: var(--bg); border-radius: 14px; padding: 1.25rem 1.3rem; }
  .int-tile strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.35rem; line-height: 1.25; color: var(--ink); margin-bottom: 0.3rem; }
  .int-tile span { font-size: 0.88rem; color: var(--muted); }

  .int-list { margin: 0 0 1.1rem; padding-left: 1.15rem; color: var(--body); line-height: 1.7; max-width: 62ch; }
  .int-list li { margin-bottom: 0.4rem; }

  .int-countries { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem 1rem; }
  @media (max-width: 700px) { .int-countries { grid-template-columns: repeat(2, 1fr); } }
  .int-countries li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; color: var(--body); }
  .int-flag { font-size: 1rem; }

  .int-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.45rem; }
  .int-tags li {
    border: 1px solid var(--border); border-radius: 999px; padding: 0.3rem 0.8rem;
    font-size: 0.85rem; color: var(--body); background: #fff;
  }

  .int-detail-aside {
    background: var(--bg); border-radius: 16px; padding: 1.75rem 1.6rem;
    position: sticky; top: calc(var(--header-h, 72px) + 1.5rem);
  }
  @media (max-width: 900px) { .int-detail-aside { position: static; } }
  .int-facts { margin: 0 0 1.25rem; }
  .int-facts dt { font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin-top: 0.9rem; }
  .int-facts dt:first-child { margin-top: 0; }
  .int-facts dd { margin: 0.15rem 0 0; font-size: 0.95rem; color: var(--ink); overflow-wrap: anywhere; }
  .int-grid-related { max-width: 1000px; margin: 0 auto; }


  /* ================================================================
     Home keynote (src/index.html)
     The keynote structure (claim -> problem -> three layers -> turn ->
     proof -> close) in the site's own brand: serif display type, one
     vermilion accent, the shared video hero above. The header behavior
     hangs off header.site (already in the critical-CSS set); all .kn-*
     classes are below the fold and stay out of the inline critical CSS.
     ================================================================ */

  /* hero kicker over the video: small caps, lava */
  .hero-kicker {
    display: block;
    font-size: 0.8rem;
    font-weight: 650;
    letter-spacing: 0.38em;
    text-transform: uppercase;
    color: var(--lava);
    margin: 0 0 1.1rem;
  }

  /* --- The hero build: a Light assembled live on the /build-your-light
     engine (home-hero-build.js). All classes carry "hero" so the block is
     part of the inline critical CSS, like the rest of the hero. --- */
  .hero.hero-build {
    position: relative; text-align: left; padding: 0; overflow: hidden;
    min-height: min(78vh, 720px); display: flex; align-items: center;
    background: radial-gradient(110% 120% at 64% 42%, #fff9f4 0%, var(--bg) 58%, #f8ddd0 100%);
  }
  .hero.hero-build > .wrap { max-width: 1360px; width: 100%; }
  .hero-build .hero-copy { position: relative; z-index: 2; max-width: 26rem; }
  .hero-build h1 { margin: 0 0 0.9rem; font-size: clamp(2.3rem, 4vw, 3.4rem); line-height: 1.08; }
  .hero-build p.sub { margin: 0 0 1.1rem; max-width: 30rem; font-size: 1.05rem; line-height: 1.55; }
  /* category line above the H1 */
  .hero-build-kicker { margin: 0 0 1rem; font-size: 0.76rem; font-weight: 650; letter-spacing: 0.2em; text-transform: uppercase; color: var(--lava); }
  /* The stage bleeds to the band's top, right and bottom edges; only the copy
     column on the left keeps it from the full width. */
  .hero-build-stage {
    position: absolute; top: 0; right: 0; bottom: 0; left: 30%;
    touch-action: pan-y;
  }
  .hero-build-stage canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; cursor: grab; }
  .hero-build-stage canvas:active { cursor: grabbing; }
  .hero-build-tip {
    position: absolute; transform: translate(-50%, calc(-100% - 12px));
    background: var(--ink); color: #fff; font-size: 0.78rem;
    padding: 0.3rem 0.55rem; border-radius: 6px; pointer-events: none; white-space: nowrap;
  }
  .hero-build-crew {
    position: absolute; top: 1.1rem; right: 1.25rem;
    background: rgba(255, 255, 255, 0.88); border: 1px solid var(--border); border-radius: 12px;
    padding: 0.6rem 0.85rem 0.65rem;
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    font-size: 0.78rem; color: var(--ink); pointer-events: none;
  }
  .hero-build-crew-h {
    margin: 0 0 0.4rem; font-size: 0.62rem; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--muted-2);
  }
  .hero-build-crew ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.32rem; }
  .hero-build-crew li { display: flex; align-items: center; gap: 0.45rem; opacity: 0; transform: translateY(4px); transition: opacity 0.4s ease, transform 0.4s ease; }
  .hero-build-crew li.is-in { opacity: 1; transform: none; }
  .hero-crew-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lava); flex: none; }
  .hero-build-crew li.is-audit .hero-crew-dot { background: transparent; border: 1.6px solid var(--ink); }
  .hero-build-ticker {
    position: absolute; left: 1rem; right: 1rem; bottom: 0.95rem; margin: 0;
    text-align: center; font-size: 0.9rem; color: var(--ink);
    opacity: 0; transform: translateY(6px);
    transition: opacity 0.35s ease, transform 0.35s ease;
    pointer-events: none;
  }
  .hero-build-ticker.is-in { opacity: 1; transform: none; }
  /* The one CTA, standing in the built scene's corner. */
  .hero-build-cta { position: absolute; right: 1.25rem; bottom: 1.1rem; z-index: 3; }
  /* Its phone counterpart: the demo, in vermilion. Swapped in below 900px. */
  .hero-build-cta-demo { display: none; background: var(--lava); color: #fff; padding: 0.6rem 1.35rem; font-size: 0.85rem; }
  .hero-build-cta-demo:hover { background: var(--lava-dark); }
  /* The monthly control report, behind a click on the REPORT desk. */
  .hero-build-mcr { position: fixed; inset: 0; z-index: 220; display: flex; align-items: center; justify-content: center; padding: 1.25rem; }
  .hero-build-mcr-backdrop { position: absolute; inset: 0; background: rgba(23, 23, 23, 0.45); }
  .hero-build-mcr-doc {
    position: relative; background: #fff; border-radius: 16px;
    max-width: 560px; width: 100%; max-height: 84vh; overflow: auto;
    padding: 1.9rem 2.1rem 1.6rem; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28);
  }
  .hero-build-mcr-close {
    position: absolute; top: 0.7rem; right: 0.85rem; border: 0; background: none;
    font-size: 1.5rem; line-height: 1; color: var(--muted); cursor: pointer; padding: 0.25rem;
  }
  .hero-build-mcr-close:hover { color: var(--ink); }
  .hero-build-mcr-kicker {
    margin: 0 0 0.4rem; font-size: 0.66rem; font-weight: 650;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--lava);
  }
  .hero-build-mcr-doc h3 { margin: 0 0 0.35rem; font-family: var(--serif); font-weight: 400; font-size: 1.55rem; color: var(--ink); }
  .hero-build-mcr-meta { margin: 0 0 0.35rem; font-size: 0.82rem; color: var(--muted); }
  /* Short stacked facts, one per line, the way the reference report opens. */
  .hero-build-mcr-sub { margin: 0 0 1.3rem; display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.88rem; line-height: 1.5; color: var(--muted); }
  .hero-build-mcr-doc ul { list-style: none; margin: 0 0 1.2rem; padding: 0; display: flex; flex-direction: column; }
  .hero-build-mcr-doc li {
    display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.75rem 0;
    border-top: 1px solid var(--border);
  }
  .hero-build-mcr-doc li:first-child { border-top: 0; }
  .hero-mcr-icon {
    flex: none; width: 22px; height: 22px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; margin-top: 0.1rem;
  }
  .hero-mcr-icon svg { width: 12px; height: 12px; }
  .hero-mcr-body { display: flex; flex-direction: column; gap: 0.15rem; }
  .hero-mcr-body b { font-size: 0.9rem; font-weight: 650; color: var(--ink); }
  .hero-mcr-body span { font-size: 0.82rem; line-height: 1.45; color: var(--muted); }
  /* PASS reads calm and green; CAUGHT carries the accent as a live warning;
     RESOLVED is neutral ink — a check, but not a pass. */
  li.is-pass .hero-mcr-icon { background: #e3f3e6; color: #1e8a3c; }
  li.is-caught .hero-mcr-icon { background: rgba(245, 65, 15, 0.12); color: var(--lava); }
  li.is-resolved .hero-mcr-icon { background: #eceef0; color: #6b7280; }
  .hero-build-mcr-sig {
    margin: 0; border-top: 1px solid var(--border); padding-top: 0.9rem;
    display: flex; gap: 0.55rem; align-items: center; font-size: 0.8rem; color: var(--muted);
  }
  .hero-mcr-ring { width: 11px; height: 11px; border: 2px solid var(--ink); border-radius: 50%; flex: none; }
  /* Between the full desktop layout and the stacked phone layout below, the
     text column (26rem) can exceed 30% of the viewport and sit under the
     animation. Give the copy less room and push the stage further right so
     the two never overlap, without going all the way to the stacked layout. */
  @media (max-width: 1300px) and (min-width: 901px) {
    .hero-build .hero-copy { max-width: 20rem; }
    .hero-build-stage { left: 48%; }
  }
  @media (max-width: 900px) {
    .hero.hero-build { display: block; min-height: 0; padding: 2rem 0 0; }
    .hero-build .hero-copy { max-width: none; }
    /* Four lines of sub-headline pushed the scene and its CTA below the fold on
       a phone. The headline carries the pitch; the sub stays in the markup for
       the crawlers and reads again in the sections below. */
    .hero-build .hero-copy .sub { display: none; }
    .hero-build-stage { position: relative; inset: auto; height: 56vh; min-height: 400px; margin-top: 1.5rem; }
    /* No room beside the model on a phone: the card would sit on top of it. */
    .hero-build-crew { display: none; }
    /* The bottom strip belongs to the ticker and the CTA; the scene draws
       higher (home-hero-build.js frames tighter on narrow viewports). */
    .hero-build-ticker { bottom: 4.6rem; }
    .hero-build-cta { left: 1rem; right: 1rem; bottom: 1rem; text-align: center; }
    /* The configurator is a desk job; on a phone the corner asks for the demo. */
    .hero-build-cta:not(.hero-build-cta-demo) { display: none; }
    .hero-build-cta-demo { display: inline-flex; }
  }

  /* --- Below the fold: keynote sections --- */
  .kn { color: var(--ink); }
  .kn-wrap { max-width: 1080px; margin: 0 auto; padding: 0 2.25rem; }

  /* segment banding, same three stage colors the rest of the site uses */
  .kn-cream { background: var(--bg); }
  .kn-black { background: #000; color: #fff; }
  .kn-black h2 { color: #fff; }
  .kn-black .kn-lead { color: #d9d9d9; }
  .kn-black .kn-proof-copy { color: #c9c9c9; }

  /* scroll-in reveals: only when JS is up (html.kn-js), fire once */
  .kn-js .kn-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; }
  .kn-js .kn-reveal.on { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) {
    .kn-js .kn-reveal { opacity: 1; transform: none; transition: none; }
  }

  /* S2 + S6: full-viewport type-only statements */
  .kn-state {
    min-height: 40svh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4.5rem 1.5rem;
  }
  .kn-state p {
    max-width: 26ch;
    margin: 0;
    font-family: var(--serif);
    font-weight: 400;
    letter-spacing: -0.01em;
    font-size: clamp(1.9rem, 4.4vw, 3.4rem);
    line-height: 1.16;
  }
  .kn-state p em { font-style: normal; color: var(--lava); }
  .kn-state.kn-turn { min-height: 60svh; padding: 6rem 1.5rem; display: flex; align-items: center; justify-content: center; }
  /* The recap headline is now its own section, split from the two lines
     that used to follow it directly underneath - shorter than the full
     .kn-turn height since it holds only one line. */
  .kn-state.kn-turn.kn-turn-headline {
    min-height: 34svh; padding: 4rem 1.5rem 2rem; color: #fff;
    background:
      linear-gradient(180deg, rgba(10,10,10,0.5) 0%, rgba(10,10,10,0.62) 100%),
      url('/assets/images/agents-hero.jpg');
    background-size: cover;
    background-position: center 55%;
    background-repeat: no-repeat;
  }
  .kn-turn-copy { display: flex; flex-direction: column; gap: 1.4rem; align-items: center; }
  .kn-turn p { max-width: 32ch; }
  .kn-turn .kn-turn-quiet { font-family: var(--sans); font-size: clamp(1.3rem, 2.4vw, 1.8rem); color: var(--muted); }
  .kn-turn-headline .kn-turn-quiet { color: #d9d9d9; }

  /* S3–S5: one layer per screen */
  .kn-layer {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 6rem 1.5rem 5rem;
  }
  .kn-kicker {
    font-size: 0.8rem;
    font-weight: 650;
    letter-spacing: 0.38em;
    text-transform: uppercase;
    color: var(--lava);
    margin: 0 0 1.1rem;
  }
  .kn-layer h2 {
    max-width: 24ch;
    margin: 0 0 1.1rem;
    font-family: var(--serif);
    font-weight: 400;
    letter-spacing: -0.01em;
    font-size: clamp(2.2rem, 4.8vw, 3.8rem);
    line-height: 1.1;
  }
  .kn-lead {
    max-width: 44rem;
    margin: 0 auto 0.9rem;
    font-size: clamp(1.05rem, 1.7vw, 1.3rem);
    line-height: 1.55;
    color: var(--body);
  }
  .kn-proof-copy {
    max-width: 42rem;
    margin: 0 auto 1.4rem;
    font-size: 0.98rem;
    line-height: 1.6;
    color: var(--muted);
  }
  .kn-more { font-weight: 500; color: var(--lava); font-size: 1rem; }
  .kn-more:hover { text-decoration: underline; }

  .kn-visual { position: relative; margin-top: 2.6rem; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2rem; }
  .kn-stage-canvas { width: min(620px, 92vw); height: clamp(200px, 34vw, 320px); display: block; }

  /* S4: app tiles from the App Store */
  .kn-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.9rem; max-width: 700px; }
  .kn-tile {
    width: 68px;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--border);
    box-shadow: 0 10px 24px -10px rgba(23, 23, 23, 0.14);
  }
  .kn-tile img { width: 38px; height: 38px; }

  /* --- /workforce: materiality-based approval controls ---
     A white policy card on the dark band, with three worked examples under
     it. materiality.js walks the examples and adds .is-active to the example
     and to the policy row it lands in; every rule below is additive, so with
     no JS the card and all three examples still read straight through. */
  .mat { display: flex; flex-direction: column; align-items: center; gap: 2rem; }
  .mat-policy {
    width: min(620px, 100%);
    text-align: left;
    background: #fff;
    color: var(--ink);
    border-radius: 14px;
    padding: 1.7rem 1.9rem;
    box-shadow: 0 22px 50px -20px rgba(0, 0, 0, 0.55);
  }
  .mat-policy-title {
    margin: 0 0 0.35rem;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .mat-policy-scope { margin: 0 0 1.1rem; font-size: 1.05rem; font-weight: 600; color: var(--ink); }
  .mat-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
  .mat-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 0.15rem 1.25rem;
    padding: 0.85rem 0.7rem;
    margin: 0 -0.7rem;
    border-bottom: 1px solid var(--border);
    border-radius: 8px;
    transition: background 0.35s ease, box-shadow 0.35s ease;
  }
  .mat-when { font-size: 0.98rem; color: var(--ink); font-variant-numeric: tabular-nums; }
  .mat-then { font-size: 0.98rem; font-weight: 500; color: var(--ink); text-align: right; }
  /* the requirement sits under the action, quiet — it repeats the ladder, it
     does not compete with it */
  .mat-req { grid-column: 2; font-size: 0.82rem; color: var(--muted); text-align: right; }
  .mat-row.is-active { background: rgba(245, 65, 15, 0.07); box-shadow: inset 3px 0 0 var(--lava); }
  .mat-row.is-active .mat-then { color: var(--lava); }
  .mat-applies {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.3rem 1rem;
    margin-top: 1.1rem;
  }
  .mat-applies-label { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
  .mat-applies-value { font-size: 0.9rem; color: var(--body); }

  .mat-examples {
    list-style: none;
    margin: 0;
    padding: 0;
    width: min(1000px, 100%);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
  .mat-example {
    padding: 1.25rem 1.35rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    transition: border-color 0.35s ease, background 0.35s ease, transform 0.35s ease;
  }
  .mat-example p { margin: 0; }
  .mat-example-amount { font-size: 1.05rem; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
  .mat-example .mat-example-action { margin-top: 0.5rem; font-size: 0.95rem; color: #d9d9d9; }
  .mat-example .mat-example-note { margin-top: 0.2rem; font-size: 0.85rem; color: #8f8f8f; }
  .mat-example.is-active {
    border-color: var(--lava);
    background: rgba(245, 65, 15, 0.1);
    transform: translateY(-2px);
  }
  .mat-example.is-active .mat-example-action { color: var(--lava); }

  .mat-close { max-width: 44rem; margin: 3.5rem auto 0; text-align: center; }
  .mat-close h3 { margin: 0 0 1rem; font-size: clamp(1.25rem, 2.4vw, 1.7rem); line-height: 1.3; color: #fff; }
  .mat-close p { margin: 0 0 0.7rem; color: #b5b5b5; font-size: 1.05rem; line-height: 1.6; }
  .mat-close p:last-child { margin-bottom: 0; }

  @media (max-width: 760px) {
    .mat-examples { grid-template-columns: 1fr; }
  }
  @media (max-width: 480px) {
    .mat-policy { padding: 1.35rem 1.25rem; }
    .mat-row { grid-template-columns: 1fr; padding: 0.8rem 0.6rem; margin: 0 -0.6rem; }
    .mat-then, .mat-req { grid-column: 1; text-align: left; }
    .mat-then { margin-top: 0.1rem; }
  }

  /* S5: a peeking-card carousel of agents - the approval policy agent
     first, then several more real agents, so a visitor gets a sense of the
     range. All cards share one collapsed height so paging never jumps the
     page; the next card's edge peeks through a fixed strip on the right as
     the cue to keep going, instead of an arrow. Panel widths are set in JS
     (a flex child's percentage width can't resolve against this auto-sized
     track), so only the visual chrome lives here. */
  /* Full-bleed, not just a wide box inside .kn-layer's padding: at min(1600px,
     94vw) a peeking card's edge got clipped by the viewport's overflow:hidden
     well short of the actual page edge, reading as an arbitrary cut with dead
     black space beyond it rather than the carousel continuing off-screen. */
  .kn-agent-carousel {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    display: flex; flex-direction: column; align-items: center; gap: 1.1rem;
  }
  .kn-agent-viewport { position: relative; width: 100%; overflow: hidden; transition: height 0.2s ease; }
  /* Panels are positioned individually (not a flex row) so the carousel can
     wrap around - the previous/current/next slot is just whichever three
     panels are within one cyclic step of the current index, computed and
     placed in JS. */
  .kn-agent-track { position: relative; touch-action: pan-y; }
  .kn-agent-prev-hit,
  .kn-agent-next-hit {
    position: absolute; top: 0; bottom: 0; width: clamp(24px, 15%, 140px);
    border: none; cursor: pointer; padding: 0;
    transition: visibility 0s;
  }
  .kn-agent-prev-hit { left: 0; background: linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,0.05)); }
  .kn-agent-next-hit { right: 0; background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.05)); }
  .kn-agent-dots { display: flex; gap: 0.45rem; }
  .kn-agent-dot {
    width: 0.5rem;
    height: 0.5rem;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: rgba(255,255,255,0.25);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
  }
  .kn-agent-dot.is-active { background: var(--lava); transform: scale(1.3); }

  /* One card style for the whole carousel, policy card included - a fixed
     min-height so every collapsed card, table or no table, is the same
     size. */
  .kn-agent-card {
    position: absolute;
    top: 0;
    min-height: 226px;
    box-sizing: border-box;
    text-align: left;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.6rem 1.8rem;
    box-shadow: 0 18px 44px -16px rgba(23, 23, 23, 0.16);
    transition: left 0.3s ease, visibility 0s;
  }
  .kn-agent-more {
    display: inline-block;
    margin-top: 0.9rem;
    font: 600 0.82rem var(--sans);
    color: var(--lava);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
  }
  .kn-agent-more:hover { text-decoration: underline; }
  .kn-agent-detail { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--border); }
  .kn-agent-detail p { margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--body); }
  @media (max-width: 520px) {
    .kn-agent-card { padding: 1.3rem 1.25rem; min-height: 260px; }
  }

  .kn-policy-eyebrow {
    margin: 0 0 0.4rem;
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lava);
  }
  .kn-policy-title { margin: 0 0 0.6rem; font-size: 1.2rem; font-weight: 600; color: var(--ink); }
  .kn-policy-does { margin: 0 0 1.3rem; font-size: 0.92rem; line-height: 1.5; color: var(--body); }
  .kn-policy-table { width: 100%; border-collapse: collapse; }
  .kn-policy-table caption {
    text-align: left;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--muted);
    padding-bottom: 0.7rem;
  }
  .kn-policy-meta { margin-top: 1rem; }
  .kn-policy-meta p { margin: 0 0 0.5rem; font-size: 0.86rem; line-height: 1.5; color: var(--muted); }
  .kn-policy-meta p:last-child { margin-bottom: 0; }
  .kn-policy-table th,
  .kn-policy-table td {
    padding: 0.8rem 0;
    font-size: 0.95rem;
    line-height: 1.4;
    text-align: left;
    border-bottom: 1px solid var(--border);
  }
  .kn-policy-table thead th {
    padding-top: 0;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .kn-policy-table tbody th {
    font-weight: 500;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
  }
  .kn-policy-table td { color: var(--body); text-align: right; padding-left: 1.25rem; }
  .kn-policy-table thead th:last-child { text-align: right; }
  .kn-policy-table tbody tr:last-child th,
  .kn-policy-table tbody tr:last-child td { border-bottom: 0; }
  /* the band nobody has to touch */
  .kn-policy-table td.is-auto { color: var(--lava); font-weight: 500; }
  .kn-policy-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 1rem;
    align-items: baseline;
    justify-content: space-between;
    margin-top: 0.5rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--border);
  }
  .kn-policy-foot-label { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
  .kn-policy-foot-value { font-size: 0.9rem; color: var(--body); }
  @media (max-width: 520px) {
    .kn-policy { padding: 1.3rem 1.25rem; }
    .kn-policy-table th, .kn-policy-table td { font-size: 0.88rem; }
    .kn-policy-table td { padding-left: 0.75rem; }
  }

  /* S8: who it's for */
  .kn-audience { padding: 7rem 0; text-align: center; }
  .kn-audience h2 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); line-height: 1.18; max-width: 30ch; margin: 0 auto 1.4rem; }
  .kn-audience p { max-width: 44rem; margin: 0 auto; color: var(--body); font-size: 1.05rem; line-height: 1.65; }

  /* S9: the compliance points ride inside the audience section as the
     site's pixel-icon feature cards */
  .kn-audience .feature-cols { margin-top: 3.25rem; }
  .kn-audience .feature-cols h3 { font-size: 1.15rem; font-weight: 600; margin: 0 0 0.45rem; }
  .kn-audience .feature-cols p { max-width: none; margin: 0 0 0.7rem; font-size: 0.95rem; color: var(--body); text-align: left; }

  /* S10: close */
  .kn-close { min-height: 46svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 2.2rem; padding: 4rem 1.5rem; background: #0c0c0c; color: #fff; }
  .kn-close-copy { display: flex; flex-direction: column; gap: 1rem; }
  .kn-close p { margin: 0; font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; font-size: clamp(1.7rem, 3.4vw, 2.7rem); line-height: 1.2; max-width: 34ch; }
  .kn-close p + p { font-size: clamp(2.2rem, 5vw, 4rem); }
  .kn-close p em { font-style: normal; color: var(--lava); }

  /* Shared heading for the three sections between the logos and the layers */
  .kn-h2 {
    max-width: 38ch;
    margin: 0 auto 1rem;
    font-family: var(--serif);
    font-weight: 400;
    letter-spacing: -0.01em;
    font-size: clamp(1.9rem, 3.6vw, 2.9rem);
    line-height: 1.12;
    text-align: center;
  }
  .kn-how .kn-kicker, .kn-replace .kn-kicker, .kn-how .kn-lead, .kn-replace .kn-lead { text-align: center; }

  /* Customer results: four figures, each a link to the story it comes from */
  .kn-results { padding: 3rem 0 4.5rem; }
  .kn-results-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin-top: 2.6rem; }
  .kn-results-tile {
    display: block;
    color: inherit;
    text-decoration: none;
    background: var(--surface, #fff);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color 0.15s ease, transform 0.15s ease;
  }
  .kn-results-tile:hover { border-color: var(--lava); transform: translateY(-2px); }
  .kn-results-photo { display: block; aspect-ratio: 4 / 3; background: var(--bg); overflow: hidden; }
  /* All four cards read as one set, so every photo is forced to black and
     white here even if the source image (like Famly's) is in color. */
  .kn-results-photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1); }
  .kn-results-body { display: block; padding: 1.15rem 1.15rem 1.3rem; }
  .kn-results-num { display: block; margin-bottom: 0.55rem; font-family: var(--serif); font-size: clamp(1.5rem, 2vw, 1.8rem); line-height: 1.05; letter-spacing: -0.01em; color: var(--ink); }
  .kn-results-src { display: block; margin-bottom: 0.5rem; font-size: 0.76rem; font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lava); }
  .kn-results-body p { margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--muted); }
  .kn-results-tile:hover .kn-results-num { color: var(--lava); }

  /* How it works: the four steps between signing and the first close, each
     marked with a small icon instead of a number. */
  .kn-how { padding: 6.5rem 0; }
  .kn-steps { list-style: none; margin: 3rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.75rem; }
  .kn-step { border-top: 1px solid var(--border); padding-top: 1.2rem; }
  .kn-step-icon { display: block; width: 26px; height: 26px; margin: 0 0 0.9rem; background-color: var(--lava); -webkit-mask: center/contain no-repeat; mask: center/contain no-repeat; }
  .kn-step-icon--move { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22black%22%3E%3Crect%20x%3D%221%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%229%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%229%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%229%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%229%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%229%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%229%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%229%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%229%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22black%22%3E%3Crect%20x%3D%221%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%229%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%229%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%229%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%229%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%229%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%229%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%229%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%229%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3C%2Fsvg%3E"); }
  .kn-step-icon--connect { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22black%22%3E%3Crect%20x%3D%220%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22black%22%3E%3Crect%20x%3D%220%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3C%2Fsvg%3E"); }
  .kn-step-icon--agents { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22black%22%3E%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22black%22%3E%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3C%2Fsvg%3E"); }
  .kn-step-icon--close { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22black%22%3E%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22black%22%3E%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3C%2Fsvg%3E"); }
  .kn-step h3 { margin: 0 0 0.6rem; font-family: var(--serif); font-weight: 400; font-size: 1.35rem; line-height: 1.2; color: var(--ink); }
  .kn-step p { margin: 0 0 0.85rem; font-size: 0.95rem; line-height: 1.6; color: var(--body); }
  .kn-step .kn-more { font-size: 0.92rem; }

  /* Migration: the how-it-works treatment (steps on hairlines, three of
     them) plus the four questions CFOs asked in the Sep 2026 Wynter rounds
     and one customer who has done it. A white band between the cream audience
     section and the customer results. */
  .kn-migrate { padding: 6.5rem 0; background: #fff; }
  .kn-migrate .kn-kicker, .kn-migrate .kn-lead { text-align: center; }
  .kn-migrate .kn-steps { grid-template-columns: repeat(3, 1fr); }
  .kn-migrate-asks-h { margin: 3.75rem 0 0; font-family: var(--serif); font-weight: 400; font-size: 1.35rem; line-height: 1.2; color: var(--ink); }
  /* The four questions fold: a native <details> per question, closed by
     default, a hairline between each, a pixel plus that turns into a minus
     when open. */
  .kn-migrate-asks { margin-top: 1.2rem; border-top: 1px solid var(--border); }
  .kn-migrate-ask { border-bottom: 1px solid var(--border); }
  .kn-migrate-ask summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.05rem 0; font-family: var(--serif); font-weight: 400; font-size: 1.2rem; line-height: 1.25; color: var(--ink); }
  .kn-migrate-ask summary::-webkit-details-marker { display: none; }
  .kn-migrate-ask summary:hover .kn-migrate-ask-q, .kn-migrate-ask[open] summary .kn-migrate-ask-q { color: var(--lava); }
  .kn-migrate-ask summary:focus-visible { outline: 2px solid var(--lava); outline-offset: 4px; }
  .kn-migrate-ask-tog { position: relative; flex: none; width: 14px; height: 14px; }
  .kn-migrate-ask-tog::before, .kn-migrate-ask-tog::after { content: ""; position: absolute; background: var(--lava); left: 0; top: 6px; width: 14px; height: 2px; }
  .kn-migrate-ask-tog::after { transform: rotate(90deg); transition: transform 0.18s ease; }
  .kn-migrate-ask[open] .kn-migrate-ask-tog::after { transform: rotate(0deg); }
  .kn-migrate-ask p { margin: 0; padding: 0 2.5rem 1.2rem 0; max-width: 46rem; font-size: 0.95rem; line-height: 1.6; color: var(--body); }
  .kn-migrate-quote { display: grid; grid-template-columns: 3fr 2fr; gap: 2.5rem; align-items: center; margin-top: 3.5rem; padding: 2.4rem 2.6rem; background: var(--bg); border-radius: 14px; }
  .kn-migrate-quote blockquote { margin: 0; font-family: var(--serif); font-size: clamp(1.3rem, 2.1vw, 1.7rem); line-height: 1.3; color: var(--ink); }
  .kn-migrate-quote cite { display: block; margin-top: 1rem; font-style: normal; font-size: 0.92rem; color: var(--muted); }
  .kn-migrate-result { border-left: 1px solid var(--border); padding-left: 2.5rem; }
  .kn-migrate-result p { margin: 0 0 0.9rem; font-size: 0.95rem; line-height: 1.55; color: var(--body); }
  .kn-migrate-result-after { font-style: italic; color: var(--muted); }
  .kn-migrate-result-after span { display: block; font-style: normal; font-size: 0.85rem; margin-top: 0.25rem; }
  .kn-migrate-result .kn-more { font-size: 0.92rem; }
  .kn-migrate-foot { margin: 2rem 0 0; text-align: center; }
  @media (max-width: 760px) {
    .kn-migrate .kn-steps, .kn-migrate-quote { grid-template-columns: 1fr; }
    .kn-migrate-ask summary { font-size: 1.08rem; }
    .kn-migrate-quote { padding: 1.8rem 1.5rem; }
    .kn-migrate-result { border-left: 0; padding-left: 0; border-top: 1px solid var(--border); padding-top: 1.5rem; }
  }
  @media (max-width: 720px) { .kn-migrate { padding: 4.5rem 0; } }

  /* What it replaces: the ERP, the tools around it, and what it connects to */
  .kn-replace { padding: 6rem 0; }
  .kn-replace-diagram {
    max-width: 800px; margin: 2.6rem auto 4.5rem;
    display: flex; align-items: center; justify-content: center; gap: 2rem;
  }
  .kn-replace-diagram-left { width: 50%; max-width: 420px; height: auto; display: block; overflow: visible; }
  .kn-replace-diagram-divider { align-self: stretch; width: 1px; background: var(--border); }
  .kn-replace-diagram-right { display: flex; flex-direction: column; align-items: center; }
  /* Same ~1.94:1 aspect as the full-size .kn-stage-canvas - the Scene's
     fit math assumes that wide framing, and a squarer canvas clipped and
     stretched the cubes. */
  .kn-diagram-canvas { width: 340px; height: 175px; }
  .kn-diagram-label { font: 650 0.76rem var(--sans); letter-spacing: 0.14em; text-transform: uppercase; fill: var(--muted); color: var(--muted); margin: 0 0 0.5rem; }
  .kn-diagram-node { font: 600 0.72rem var(--sans); fill: var(--ink); }
  @media (max-width: 640px) {
    .kn-replace-diagram { flex-direction: column; gap: 2.5rem; }
    .kn-replace-diagram-left { width: 100%; max-width: 340px; }
    .kn-replace-diagram-divider { width: 60%; height: 1px; align-self: center; }
  }
  .kn-replace-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.8rem; }
  /* The rule sits under each heading, not above the column - same weight
     and colour for all three, "Connects" included. */
  .kn-replace-col h3 { margin: 0 0 1.1rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--ink); font-size: 0.8rem; font-weight: 650; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); }
  .kn-replace-col ul { list-style: none; margin: 0 0 1rem; padding: 0; }
  .kn-replace-col li { padding: 0.4rem 0; border-bottom: 1px solid var(--border); font-size: 0.98rem; line-height: 1.5; color: var(--body); }
  .kn-replace-col li:last-child { border-bottom: none; }
  .kn-replace-col .kn-more { font-size: 0.92rem; }

  @media (max-width: 760px) {
    .kn-results-grid, .kn-steps { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 720px) {
    .kn-layer { min-height: 0; padding: 5rem 1.5rem 4rem; }
    .kn-state { min-height: 0; padding: 3rem 1.5rem; }
    .kn-results { padding-bottom: 4rem; }
    .kn-how, .kn-replace { padding: 4.5rem 0; }
    .kn-replace-cols { grid-template-columns: 1fr; }
  }
  @media (max-width: 560px) {
    .kn-results-grid, .kn-steps { grid-template-columns: 1fr; }
  }

  /* ---- /build-your-light: the configurator -----------------------------
     Two halves that scroll as one: a sticky canvas model on the left, the
     three-step picker on the right. Both are pinned to the same height so the
     model never leaves the screen while you are choosing what goes into it. */
  .byl-intro { background: var(--bg); padding: 3.5rem 0 1.75rem; }
  .byl-intro h1 { font-size: clamp(2rem, 4.4vw, 3.4rem); margin: 0.5rem 0 0.75rem; max-width: 20ch; }
  .byl-intro .sub { font-size: 1.05rem; color: var(--body); max-width: 62ch; margin: 0; }
  .byl-intro strong { font-weight: 600; color: var(--ink); }

  .byl { background: var(--bg); padding: 0 0 4rem; scroll-margin-top: 90px; }
  .byl-shell {
    max-width: 1500px; margin: 0 auto; padding: 0 1.5rem;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 470px);
    gap: 1.25rem; align-items: start;
  }

  /* ── the model ── */
  .byl-stage {
    position: sticky; top: calc(var(--header-h, 72px) + 1rem);
    height: min(78vh, 820px); border-radius: 20px; overflow: hidden;
    background:
      radial-gradient(120% 90% at 50% 18%, #fff9f4 0%, var(--bg) 62%, #f8ddd0 100%);
    border: 1px solid var(--border);
    touch-action: pan-y;
  }
  /* Absolutely positioned on purpose: the script sizes the canvas from the
     stage, so a canvas in normal flow would feed its own height back into the
     box it is measured against. Out of flow, that loop cannot exist. */
  .byl-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; cursor: grab; }
  .byl-canvas:active { cursor: grabbing; }

  .byl-legend { position: absolute; top: 0.9rem; left: 0.9rem; display: flex; gap: 0.4rem; }
  .byl-leg {
    display: flex; align-items: center; gap: 0.4rem;
    background: rgba(255, 255, 255, 0.82); border: 1px solid var(--border);
    border-radius: 999px; padding: 0.3rem 0.7rem 0.3rem 0.5rem;
    font: inherit; font-size: 0.78rem; color: var(--body); cursor: pointer;
    backdrop-filter: blur(4px);
  }
  .byl-leg:hover { border-color: var(--lava); color: var(--ink); }
  .byl-leg-swatch { width: 9px; height: 9px; border-radius: 2px; }
  .byl-leg-swatch.is-core { background: #efe9dc; border: 1px solid #cdc3ae; }
  .byl-leg-swatch.is-app { background: var(--lava); }
  .byl-leg-swatch.is-agent { background: var(--ink); border-radius: 50%; }
  .byl-leg-n { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

  .byl-empty, .byl-ticker, .byl-hint { position: absolute; margin: 0; pointer-events: none; }
  .byl-empty {
    left: 50%; top: 22%; transform: translateX(-50%); width: max-content; max-width: 80%;
    font-family: var(--serif); font-size: clamp(1.1rem, 2.1vw, 1.6rem); color: var(--ink);
    text-align: center;
  }
  /* Clear of the hint line under it, so the two never overprint. */
  .byl-ticker {
    left: 1rem; right: 1rem; bottom: 2.5rem; text-align: center;
    font-size: 0.9rem; color: var(--ink); opacity: 0;
  }
  .byl-ticker.is-in { animation: bylTick 4.5s ease forwards; }
  @keyframes bylTick {
    0% { opacity: 0; transform: translateY(6px); }
    12% { opacity: 1; transform: translateY(0); }
    76% { opacity: 1; }
    100% { opacity: 0; }
  }
  .byl-hint {
    right: 0.95rem; bottom: 0.9rem; font-size: 0.7rem; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--muted-2);
  }
  .byl-tip {
    position: absolute; transform: translate(-50%, calc(-100% - 12px));
    background: var(--ink); color: #fff; font-size: 0.78rem;
    padding: 0.3rem 0.55rem; border-radius: 6px; pointer-events: none; white-space: nowrap;
  }

  /* ── the picker ── */
  .byl-panel {
    position: sticky; top: calc(var(--header-h, 72px) + 1rem);
    height: min(78vh, 820px); display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--border); border-radius: 20px; overflow: hidden;
  }
  .byl-steps { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--border); }
  .byl-step {
    display: flex; align-items: center; gap: 0.5rem; padding: 0.85rem 0.7rem;
    background: var(--off-yellow); border: 0; border-right: 1px solid var(--border);
    font: inherit; text-align: left; cursor: pointer; color: var(--muted);
  }
  .byl-step:last-child { border-right: 0; }
  .byl-step.is-on { background: #fff; color: var(--ink); }
  .byl-step-n {
    flex: none; width: 22px; height: 22px; border-radius: 50%;
    display: grid; place-items: center; font-size: 0.75rem; font-weight: 700;
    background: #fff; border: 1px solid var(--border); color: var(--muted);
  }
  .byl-step.is-on .byl-step-n { background: var(--lava); border-color: var(--lava); color: #fff; }
  .byl-step-t { display: block; font-size: 0.9rem; font-weight: 500; line-height: 1.2; min-width: 0; }
  .byl-step-t em { display: block; font-style: normal; font-size: 0.72rem; color: var(--muted); font-weight: 400; }

  .byl-body { flex: 1; min-height: 0; display: flex; }
  .byl-pane { display: none; flex-direction: column; min-height: 0; width: 100%; }
  .byl-pane.is-on { display: flex; }
  .byl-pane:focus-visible { outline: 2px solid var(--lava); outline-offset: -4px; }
  .byl-pane-head { padding: 0.95rem 1.2rem 0.6rem; }
  .byl-pane-head h2 { font-size: 1.2rem; margin: 0 0 0.35rem; }
  .byl-pane-head p { margin: 0; font-size: 0.86rem; color: var(--muted); line-height: 1.5; }

  .byl-tools { padding: 0 1.2rem 0.6rem; }
  .byl-search {
    width: 100%; font: inherit; font-size: 0.9rem; padding: 0.55rem 0.75rem;
    border: 1px solid var(--border); border-radius: 8px; background: var(--off-yellow); color: var(--ink);
  }
  .byl-search:focus { outline: none; border-color: var(--lava); background: #fff; }
  /* One row that scrolls, rather than three rows that steal the list's height. */
  .byl-filters {
    display: flex; gap: 0.3rem; margin-top: 0.55rem;
    overflow-x: auto; scrollbar-width: none; padding-bottom: 0.15rem;
  }
  .byl-filters::-webkit-scrollbar { display: none; }
  .byl-filter { flex: none; }
  .byl-filter {
    font: inherit; font-size: 0.75rem; padding: 0.28rem 0.6rem; cursor: pointer;
    border: 1px solid var(--border); border-radius: 999px; background: #fff; color: var(--muted);
  }
  .byl-filter:hover { border-color: var(--lava); color: var(--ink); }
  .byl-filter.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }

  .byl-scroll { flex: 1; min-height: 160px; overflow-y: auto; padding: 0.25rem 1.2rem 1.2rem; overscroll-behavior: contain; }
  .byl-group + .byl-group { margin-top: 1.1rem; }
  .byl-group h3 {
    font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--muted-2); margin: 0 0 0.5rem; font-weight: 600;
  }
  .byl-group h3 em { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--muted-2); }
  .byl-recs h3 { color: var(--lava); }

  .byl-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
  .byl-chip {
    display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer;
    font: inherit; font-size: 0.85rem; padding: 0.4rem 0.7rem;
    border: 1px solid var(--border); border-radius: 999px; background: #fff; color: var(--ink);
    transition: border-color 0.15s, background 0.15s, transform 0.12s;
  }
  .byl-chip:hover { border-color: var(--lava); transform: translateY(-1px); }
  .byl-chip.is-on { background: var(--lava); border-color: var(--lava); color: #fff; }
  .byl-chip.is-on .byl-chip-c { color: rgba(255, 255, 255, 0.75); }
  .byl-flag { font-size: 1rem; line-height: 1; }
  .byl-chip-c { font-size: 0.72rem; color: var(--muted-2); }

  .byl-cards { display: grid; gap: 0.4rem; }
  .byl-card {
    position: relative; display: grid; grid-template-columns: 34px 1fr 18px; gap: 0.65rem;
    align-items: center; text-align: left; cursor: pointer; font: inherit;
    padding: 0.6rem 0.7rem; border: 1px solid var(--border); border-radius: 10px;
    background: #fff; color: var(--ink); transition: border-color 0.15s, background 0.15s;
  }
  .byl-card:hover { border-color: var(--lava); }
  .byl-card.is-on { border-color: var(--lava); background: #fff6f2; }
  .byl-card-ico {
    width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center;
    background: var(--off-yellow); overflow: hidden;
  }
  .byl-card-ico img { width: 22px; height: 22px; object-fit: contain; }
  .byl-mono { font-weight: 600; color: var(--muted); }
  .byl-card-txt { min-width: 0; }
  .byl-card-n { display: block; font-size: 0.88rem; font-weight: 500; }
  .byl-card-d {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: 0.76rem; color: var(--muted); line-height: 1.4; margin-top: 0.1rem;
  }
  .byl-card-mark {
    width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--border);
    background: #fff; display: grid; place-items: center;
  }
  .byl-card.is-on .byl-card-mark { background: var(--lava); border-color: var(--lava); }
  /* Centred by the grid, then rotated about its own middle — an absolutely
     positioned tick lands off-centre as soon as the rotation changes its box. */
  .byl-card.is-on .byl-card-mark::after {
    content: ""; width: 4px; height: 8px;
    border: solid #fff; border-width: 0 2px 2px 0;
    transform: translateY(-1px) rotate(45deg);
  }
  /* The workforce reads as its role: agents are lava, workflows are steps, and
     the audit layer is the hollow ring it draws as. */
  .byl-ico-agent { background: var(--lava); position: relative; }
  .byl-ico-agent::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #fff; }
  .byl-ico-workflow { background: var(--off-blue); position: relative; }
  .byl-ico-workflow::after { content: ""; width: 14px; height: 2px; background: var(--ink); box-shadow: 0 5px 0 var(--ink), 0 -5px 0 var(--ink); }
  .byl-ico-audit { background: #fff; border: 1px solid var(--border); position: relative; }
  .byl-ico-audit::after { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ink); }

  .byl-note { font-size: 0.78rem; color: var(--muted); line-height: 1.5; margin: 1rem 0 0; }
  .byl-note a { color: var(--lava); text-decoration: underline; text-underline-offset: 2px; }
  #bylAuditWarn { color: var(--lava); }

  /* ── the readout, the code and the calls to action ── */
  .byl-out { border-top: 1px solid var(--border); padding: 0.7rem 1.2rem 0.85rem; background: var(--off-yellow); }
  .byl-spec { display: flex; flex-wrap: wrap; gap: 0.15rem 1rem; font-size: 0.8rem; color: var(--muted); }
  .byl-spec b { font-size: 1rem; color: var(--ink); font-variant-numeric: tabular-nums; margin-right: 0.2rem; }

  .byl-code { margin-top: 0.7rem; }
  .byl-code label {
    display: block; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--muted-2); margin-bottom: 0.3rem; font-weight: 600;
  }
  .byl-code-row { display: flex; gap: 0.4rem; }
  .byl-code-field {
    flex: 1; min-width: 0; font: inherit; font-size: 0.95rem; font-weight: 600; letter-spacing: 0.04em;
    padding: 0.5rem 0.65rem; border: 1px solid var(--ink); border-radius: 8px; background: #fff; color: var(--ink);
  }
  .byl-code-field:focus { outline: none; border-color: var(--lava); box-shadow: 0 0 0 3px rgba(245, 65, 15, 0.15); }
  .byl-code-field.is-bad { border-color: var(--lava); background: #fff3ee; }
  .byl-copy {
    font: inherit; font-size: 0.85rem; padding: 0.5rem 0.9rem; cursor: pointer;
    border: 1px solid var(--ink); border-radius: 8px; background: var(--ink); color: #fff;
  }
  .byl-copy:hover { background: #333; }

  .byl-acts { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.7rem; }
  .byl-acts .btn-lava { padding: 0.6rem 1.1rem; font-size: 0.9rem; flex: 1; }
  .byl-ghost {
    font: inherit; font-size: 0.85rem; color: var(--muted); background: none; border: 0;
    cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: 0.4rem 0;
  }
  .byl-ghost:hover { color: var(--lava); }

  .byl-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-top: 0.55rem; font-size: 0.75rem; color: var(--muted); }
  .byl-preset {
    font: inherit; font-size: 0.75rem; padding: 0.25rem 0.6rem; cursor: pointer;
    border: 1px dashed var(--muted-2); border-radius: 999px; background: transparent; color: var(--body);
  }
  .byl-preset:hover { border-style: solid; border-color: var(--lava); color: var(--lava); }

  .byl-explain .link-arrow { font-size: 0.9rem; }

  @media (max-width: 1080px) {
    .byl-shell { grid-template-columns: 1fr; }
    .byl-stage { height: 44vh; min-height: 300px; top: calc(var(--header-h, 72px) + 0.5rem); z-index: 2; }
    .byl-panel { position: static; height: auto; }
    .byl-scroll { max-height: 52vh; }
  }
  @media (max-width: 560px) {
    .byl-intro { padding-top: 2.5rem; }
    .byl-shell { padding: 0 0.9rem; }
    .byl-step { padding: 0.7rem 0.5rem; gap: 0.35rem; }
    .byl-step-t { font-size: 0.82rem; }
    .byl-legend { gap: 0.25rem; }
    .byl-leg-l { display: none; }
    .byl-acts { flex-direction: column; align-items: stretch; }
  }
  @media (prefers-reduced-motion: reduce) {
    .byl-ticker.is-in { animation: none; opacity: 1; }
    .byl-chip, .byl-card { transition: none; }
  }

  /* The /build-your-light code a visitor books with, shown above the demo form. */
  .demo-build {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.6rem;
    background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
    padding: 0.7rem 0.9rem; margin-bottom: 1.25rem;
  }
  .demo-build-l { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); font-weight: 600; }
  .demo-build code { font-family: var(--sans); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.04em; color: var(--ink); }
  .demo-build-n { flex-basis: 100%; font-size: 0.78rem; color: var(--muted); }
  .demo-build-n a { color: var(--lava); text-decoration: underline; text-underline-offset: 2px; }

  .byl-noscript {
    position: absolute; inset: auto 1.5rem 1.5rem; text-align: center;
    font-size: 0.9rem; color: var(--muted);
  }

  .byl-ico-policy { background: var(--off-yellow); position: relative; }
  .byl-ico-policy::after {
    content: ""; width: 13px; height: 15px; background: #fff;
    border: 1px solid var(--ink); border-radius: 1px;
    box-shadow: inset 0 4px 0 -3px var(--ink), inset 0 8px 0 -3px var(--ink), inset 0 12px 0 -3px var(--ink);
  }

  /* E-invoicing coverage map */
  .ic-map-card {
    position: relative; background: #fff; border: 1px solid var(--border); border-radius: 16px;
    padding: 1.5rem 1.5rem 1.25rem; max-width: 1080px; margin: 0 auto;
  }
  .ic-map-card svg { display: block; width: 100%; height: auto; }
  .im-country { fill: var(--border); stroke: var(--bg); stroke-width: 0.6; cursor: default; transition: fill 0.12s; }
  .im-country.is-covered { fill: var(--lava); cursor: pointer; }
  .im-country:hover { fill: #d8cbab; }
  .im-country.is-covered:hover { fill: var(--lava-dark); }
  .im-marker { stroke: #fff; stroke-width: 1; }
  .ic-legend { display: flex; flex-wrap: wrap; gap: 1.4rem; justify-content: center; margin-top: 1.1rem; font-size: 0.85rem; color: var(--muted); }
  .ic-legend span { display: inline-flex; align-items: center; gap: 0.45rem; }
  .ic-legend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
  .ic-legend .ic-dot-covered { background: var(--lava); }
  .ic-legend .ic-dot-open { background: var(--border); }
  .ic-tip {
    position: absolute; z-index: 5; pointer-events: none; background: var(--ink); color: #fff;
    border-radius: 8px; padding: 0.5rem 0.7rem; font-size: 0.8rem; line-height: 1.35; max-width: 220px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.25); opacity: 0; transform: translateY(3px); transition: opacity 0.1s, transform 0.1s;
  }
  .ic-tip.is-on { opacity: 1; transform: translateY(0); }
  .ic-tip b { display: block; font-family: var(--sans); font-weight: 600; margin-bottom: 0.15rem; }
  .ic-tip span { color: #cfcfcf; }
  @media (max-width: 640px) {
    .ic-map-card { padding: 1.1rem 1rem 1rem; border-radius: 12px; }
    .ic-tip { display: none; }
  }

  /* Coverage table status chips */
  .ic-status { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 20px; font-size: 0.78rem; font-weight: 600; white-space: nowrap; }
  .ic-status.ic-mandatory { background: var(--lava); color: #fff; }
  .ic-status.ic-phasing { background: rgba(245, 65, 15, 0.12); color: var(--lava-dark); border: 1px solid rgba(245, 65, 15, 0.3); }
  .ic-status.ic-available { background: var(--pill-gray); color: var(--muted); }
  .ic-light { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 20px; font-size: 0.78rem; font-weight: 600; white-space: nowrap; }
  .ic-light.ic-light-yes { background: var(--lava); color: #fff; }
  .ic-light.ic-light-soon { background: rgba(245, 65, 15, 0.12); color: var(--lava-dark); border: 1px solid rgba(245, 65, 15, 0.3); }
  .ic-light.ic-light-no { background: transparent; color: var(--muted-2); border: 1px solid var(--border); }
  .prose h3.ic-region { font-family: var(--sans); font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-2); margin: 2.6rem 0 0.8rem; }
  .prose h3.ic-region:first-of-type { margin-top: 1.8rem; }



  /* ---------------------------------------------------------------------
     /products/custom-agents
     One story, read top to bottom: the instruction, the work that comes back,
     that it keeps coming back, where it sits in the workforce, and what you
     would hand over. One visual per section, short lines, nothing that needs
     a second read.
     --------------------------------------------------------------------- */

  /* Hero. One idea, so the headline runs a size larger than the shared .hero
     default, the paragraph is single and the button is an ordinary button —
     .btn-black's 5.5rem flanks read as a checkout bar at this scale and pull
     rank on the headline. */
  .ca-hero h1 { font-size: clamp(2.1rem, 4.2vw, 3.4rem); line-height: 1.18; }
  .ca-hero p.sub.ca-hero-line { max-width: 38rem; font-size: 1.08rem; margin-bottom: 2.2rem; }
  .ca-hero .btn-black.ca-hero-cta { padding: 0.8rem 1.7rem; font-size: 0.95rem; }

  /* The film, right in the hero under the CTA. Its poster is a 960x960 frame
     off the same video, so this keeps the plain .video-embed.square box
     rather than stretching it - full-bleed cover behind the headline cropped
     straight through the face and the caption baked into the shot. */
  .ca-hero-media { margin: 3rem auto 0; }

  /* The demonstration. Not a quote about what an agent can do — somebody
     giving Light the job, in a composer, at input scale, and then the work
     coming back. One column, a couple of seconds. */
  .ca-demo { padding-top: 7rem; }
  .ca-run { max-width: 34rem; margin: 0 auto; text-align: center; }
  .ca-composer {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    padding: 1.15rem 1.2rem 0.8rem;
    text-align: left;
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
  }
  .ca-run.is-sent .ca-composer { border-color: rgba(245, 65, 15, 0.4); box-shadow: 0 2px 14px rgba(245, 65, 15, 0.07); }
  .ca-composer-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
  .ca-composer-meta { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); }
  .ca-composer-send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background: var(--pill-gray);
    color: var(--muted);
    transition: background-color 0.35s ease, color 0.35s ease;
  }
  .ca-run.is-sent .ca-composer-send { background: var(--lava); color: #fff; }

  /* The instruction being typed. .ca-type-ghost is a zero-opacity copy of the
     finished sentence holding the composer at its final height so nothing
     below it moves while the visible copy fills in; .ca-type-out sits on top
     of it. Both are built by JS, so with no script or reduced motion only the
     sentence itself is in the DOM and it renders in full. */
  .ca-type {
    position: relative;
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.6;
    color: var(--ink);
  }
  .ca-type-ghost { opacity: 0; }
  .ca-type-out { position: absolute; inset: 0; }
  .ca-type.is-typing .ca-type-out::after {
    content: "";
    display: inline-block;
    width: 0.5ch;
    height: 1.05em;
    margin-left: 0.08em;
    vertical-align: -0.16em;
    background: var(--lava);
    animation: ca-caret 1s steps(1) infinite;
  }
  @keyframes ca-caret { 50% { opacity: 0; } }

  /* What follows the send: the work itself. No intermediate state — the point
     is that you ask and it happens. Visible by default; only hidden once JS
     arms the run. */
  .ca-run.is-armed [data-step] {
    opacity: 0;
    transform: translateY(0.7em);
    transition: opacity 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .ca-run.is-done [data-step="result"] { opacity: 1; transform: translateY(0); }

  .ca-seq-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--muted-2);
    margin-bottom: 0.7rem;
  }
  .ca-seq-arrow { display: flex; justify-content: center; padding: 0.5rem 0; color: var(--muted-2); }
  .ca-seq-result {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 1.6rem 1.6rem 1.4rem;
    box-shadow: 0 6px 26px rgba(0, 0, 0, 0.05);
    text-align: left;
  }
  .ca-seq-result .ca-seq-label { color: var(--muted); }
  .ca-seq-rows { list-style: none; margin: 0 0 1.1rem; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
  .ca-seq-rows li { display: flex; align-items: baseline; gap: 0.65rem; color: var(--body); font-size: 1rem; }
  .ca-seq-rows .n { font-family: var(--serif); font-size: 1.5rem; line-height: 1; color: var(--ink); min-width: 2.2ch; }
  .ca-seq-final { margin: 0; padding-top: 1rem; border-top: 1px solid var(--border); font-size: 1.1rem; font-weight: 600; color: var(--ink); }

  /* Four moments on one rail. The rail draws itself and the moments land on it
     one after another, slowly enough to read as time passing — the idea is
     recurrence, not a checklist of capabilities, so the marks are quiet dots
     rather than ticks. */
  .ca-cal { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin-top: 2.6rem; padding-top: 1px; }
  .ca-cal::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--border);
    transform-origin: left center;
  }
  .ca-cal-item { position: relative; padding: 2.5rem 1.2rem 0 0; }
  .ca-cal-item::before {
    content: "";
    position: absolute;
    top: -0.28rem;
    left: 0;
    width: 0.58rem;
    height: 0.58rem;
    border-radius: 50%;
    background: var(--lava);
  }
  .ca-cal-when { display: block; font-family: var(--serif); font-size: clamp(1.15rem, 1.8vw, 1.45rem); line-height: 1.25; color: var(--ink); margin-bottom: 0.5rem; }
  .ca-cal-what { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.5; }

  /* Armed by the shared reveal script. The rail runs ahead of the moments, and
     each moment waits half a second on the one before it. The extra class
     outranks the shared reveal delays whatever order the rules land in. */
  .ca-cal.is-armed::before { transform: scaleX(0); transition: transform 2.4s cubic-bezier(0.22, 0.61, 0.36, 1); }
  .ca-cal.is-in::before { transform: scaleX(1); }
  .ca-cal.is-armed .ca-cal-item::before { transform: scale(0); transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
  .ca-cal.is-in .ca-cal-item::before { transform: scale(1); }
  .ca-cal.ca-reveal.is-armed > :nth-child(1), .ca-cal.is-armed .ca-cal-item:nth-child(1)::before { transition-delay: 0.15s; }
  .ca-cal.ca-reveal.is-armed > :nth-child(2), .ca-cal.is-armed .ca-cal-item:nth-child(2)::before { transition-delay: 0.65s; }
  .ca-cal.ca-reveal.is-armed > :nth-child(3), .ca-cal.is-armed .ca-cal-item:nth-child(3)::before { transition-delay: 1.15s; }
  .ca-cal.ca-reveal.is-armed > :nth-child(4), .ca-cal.is-armed .ca-cal-item:nth-child(4)::before { transition-delay: 1.65s; }

  @media (max-width: 860px) {
    .ca-cal { grid-template-columns: 1fr; gap: 0; margin-left: 0.9rem; padding-top: 0; }
    .ca-cal::before { top: 0; bottom: 0; right: auto; width: 1px; height: auto; transform-origin: center top; }
    .ca-cal.is-armed::before { transform: scaleY(0); }
    .ca-cal.is-in::before { transform: scaleY(1); }
    .ca-cal-item { padding: 0 0 2.2rem 2.2rem; }
    .ca-cal-item:last-child { padding-bottom: 0; }
    .ca-cal-item::before { top: 0.35rem; left: -0.29rem; }
  }

  /* Policies, agents, audit — one line the reader takes in at a glance. The
     five-box drawing this replaces was accurate and read as enterprise
     architecture; the full diagram lives on /workforce. */
  .ca-flow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    max-width: 46rem;
    margin: 0 auto;
  }
  .ca-flow-node {
    padding: 0.75rem 1.15rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    font-size: 0.98rem;
    color: var(--ink);
    white-space: nowrap;
  }
  .ca-flow-node em { font-style: normal; color: var(--lava-dark); }
  .ca-flow-arrow { display: inline-flex; color: var(--muted-2); }
  @media (max-width: 620px) {
    .ca-flow { flex-direction: column; gap: 0.55rem; }
    .ca-flow-node { white-space: normal; text-align: center; }
    .ca-flow-arrow svg { transform: rotate(90deg); }
  }

  /* One quiet line handing the reader on to the rest of the workforce. */
  .ca-onward { margin: 2.6rem 0 0; text-align: center; font-size: 1.05rem; color: var(--body); }
  .ca-onward a { color: var(--lava); font-weight: 500; }
  .ca-onward a:hover { text-decoration: underline; }

  /* The clip is a square screen capture on a black ground, so it sits on its
     own black frame rather than stretching to fill the taller photo-split
     column like a photograph would. */
  .ca-delivery { align-items: center; }
  .ca-delivery video { aspect-ratio: 1 / 1; height: auto; background: #000; align-self: center; }

  /* Real instructions, set large and stripped of card chrome. The specificity
     is what sells, so nothing should compete with the words. */
  .ca-jobs { list-style: none; max-width: 54rem; margin: 0 auto; padding: 0; }
  .ca-jobs li {
    border-top: 1px solid var(--border);
    padding: 1.9rem 0;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: clamp(1rem, 1.9vw, 1.35rem);
    line-height: 1.5;
    color: var(--ink);
  }
  .ca-jobs li:last-child { border-bottom: 1px solid var(--border); }

  /* Proof, not specification: one number, one line. */
  .ca-proof { padding: 7rem 0; text-align: center; }
  .ca-proof h2 { font-size: clamp(1.6rem, 3vw, 2.5rem); line-height: 1.25; color: var(--body); margin: 0 0 1rem; }
  .ca-proof-num { display: block; font-size: clamp(4rem, 13vw, 9.5rem); line-height: 0.95; letter-spacing: -0.03em; color: var(--lava); margin-bottom: 0.5rem; }
  .ca-proof p { margin: 0; color: var(--muted); font-size: 1.05rem; }

  /* The close. Whitespace, one question, one field, one button, and nothing
     underneath it. The typed job travels to /book-a-demo as ?agent= and shows
     back on that page, so the visitor sees it came across. */
  .ca-climax { padding: 8rem 0; text-align: center; }
  .ca-climax h2 { font-size: clamp(2rem, 4.6vw, 3.5rem); line-height: 1.2; color: var(--ink); margin: 0 0 1.4rem; }
  .ca-climax p { margin: 0 auto; max-width: 34rem; font-size: 1.15rem; color: var(--body); }
  .ca-climax .ca-climax-line { margin-top: 0.35rem; }
  .ca-handover { max-width: 34rem; margin: 3rem auto 0; }
  .ca-handover-row { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; }
  .ca-handover textarea {
    width: 100%;
    min-height: 96px;
    padding: 1rem 1.1rem;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.98rem;
    line-height: 1.55;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    resize: vertical;
  }
  .ca-handover textarea::placeholder { color: var(--muted-2); }
  .ca-handover textarea:focus { outline: 2px solid var(--lava); outline-offset: 1px; }
  @media (max-width: 700px) {
    .ca-climax { padding: 5rem 0; }
    .ca-handover-row .btn { width: 100%; }
  }

  /* Shared reveal. Children rise in once, staggered, on first view. JS arms it
     by adding .is-armed (skipped under prefers-reduced-motion) and .is-in
     fires it; the finished state is the default, so without JS everything
     renders static. */
  .ca-reveal.is-armed > * {
    opacity: 0;
    transform: translateY(0.7em);
    transition: opacity 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .ca-reveal.is-in > * { opacity: 1; transform: translateY(0); }
  .ca-reveal.is-armed > :nth-child(2) { transition-delay: 0.14s; }
  .ca-reveal.is-armed > :nth-child(3) { transition-delay: 0.28s; }
  .ca-reveal.is-armed > :nth-child(4) { transition-delay: 0.42s; }
  .ca-reveal.is-armed > :nth-child(5) { transition-delay: 0.56s; }
  .ca-reveal.is-armed > :nth-child(6) { transition-delay: 0.7s; }
  .ca-reveal.is-armed > :nth-child(7) { transition-delay: 0.84s; }
  .ca-reveal.is-armed > :nth-child(8) { transition-delay: 0.98s; }
  .ca-reveal.is-armed > :nth-child(9) { transition-delay: 1.12s; }
  .ca-reveal.is-armed > :nth-child(10) { transition-delay: 1.26s; }

  /* ---------------------------------------------------------------
     Partner Access (/partner-access)
     Terms-acceptance gate for the Foundational Bootcamp. Left-aligned
     hero (the shared .hero centres), a numbered 01-12 list, and a
     placeholder form card pending the HubSpot embed.
     --------------------------------------------------------------- */
  .pa-hero { text-align: left; padding: 4.5rem 0 3.5rem; }
  .pa-hero h1 { margin: 0 0 1.5rem; max-width: 18ch; }
  .pa-kicker {
    margin: 0 0 1.4rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .pa-intro { margin: 0; max-width: 46rem; font-size: 1.08rem; line-height: 1.6; color: var(--body); }
  .pa-intro strong { color: var(--ink); }

  .pa-sec { padding-top: 3.5rem; }
  .pa-points { list-style: none; counter-reset: pa; margin: 0; padding: 0; max-width: 52rem; border-top: 1px solid var(--border); }
  .pa-points > li {
    counter-increment: pa;
    position: relative;
    margin: 0;
    padding: 2rem 0 2rem 4rem;
    border-bottom: 1px solid var(--border);
  }
  .pa-points > li::before {
    content: counter(pa, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 2.15rem;
    font: 600 0.82rem var(--sans);
    letter-spacing: 0.06em;
    color: var(--muted-2);
  }
  .pa-points > li h2 { margin: 0 0 0.6rem; font-family: var(--sans); font-size: 1.06rem; font-weight: 700; color: var(--ink); }
  .pa-points > li p { margin: 0; color: var(--muted); line-height: 1.65; }

  .pa-form-sec { background: var(--bg); }
  .pa-form { background: #fff; border-radius: 24px; padding: 2.5rem; color: var(--ink); max-width: 34rem; }
  .pa-form h2 { margin: 0 0 0.5rem; font-family: var(--sans); font-size: 1.35rem; font-weight: 700; }
  .pa-form-sub { margin: 0 0 2rem; color: var(--muted); font-size: 0.95rem; }
  /* HubSpot renders into a cross-origin iframe here and posts height changes
     back to resize it, so this only reserves space before the frame loads.
     Field styling lives in HubSpot's form editor; CSS cannot cross into it. */
  .pa-form .hs-form-frame { min-height: 18rem; }
  .pa-form .hs-form-frame iframe { width: 100%; border: 0; display: block; }

  @media (max-width: 600px) {
    .pa-points > li { padding-left: 0; padding-top: 2.6rem; }
    .pa-points > li::before { top: 1.5rem; }
    .pa-form { padding: 1.75rem 1.4rem; }
  }

/* ── /trust-center ─────────────────────────────────────────────────────────
   All below the fold except .tc-hero-actions / .tc-livebar, which sit inside
   .hero and so ride in on the critical subset with it. */
  .tc-hero-actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; }
  .tc-hero-actions .btn-white { border: 1px solid var(--border); }

  /* Live status line. Starts as a plain reviewed-on stamp; the Vanta overlay
     swaps in a live "last checked" once it answers, and sets data-live. */
  .tc-livebar {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin: 2rem 0 0;
    padding: 0.45rem 1rem 0.45rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    color: var(--muted);
    font-size: 0.875rem;
  }
  .tc-livebar .tc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted-2); flex: none; }
  .tc-livebar[data-live="on"] .tc-dot { background: var(--lava); }
  .tc-livebar[data-live="on"] .tc-dot { animation: tc-pulse 2.4s ease-in-out infinite; }
  .tc-livebar[data-live="stale"] .tc-dot { background: var(--off-orange); }
  @keyframes tc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
  @media (prefers-reduced-motion: reduce) {
    .tc-livebar[data-live="on"] .tc-dot { animation: none; }
  }

  /* Frameworks */
  .tc-frameworks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
  .tc-framework {
    display: block;
    padding: 1.6rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    transition: border-color 0.15s ease, transform 0.15s ease;
  }
  .tc-framework:hover { border-color: var(--lava); transform: translateY(-2px); }
  .tc-framework-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
  /* The compliance mark. Sized in CSS as well as on the element so a slow SVG
     decode can't reflow the card. */
  .tc-framework-logo { width: 44px; height: 44px; flex: none; border-radius: 50%; }
  .tc-framework h3 { margin: 0.9rem 0 0.5rem; font-family: var(--serif); font-size: 1.35rem; font-weight: 400; color: var(--ink); letter-spacing: -0.01em; }
  .tc-framework p { margin: 0; color: var(--body); font-size: 0.95rem; line-height: 1.6; }
  .tc-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
  }
  .tc-badge-ok { background: var(--pill-gray); color: var(--ink); }
  .tc-badge-attention { background: var(--lava); color: #fff; }
  /* Work in flight, not an attained certification — outlined so it cannot be
     mistaken at a glance for the audited frameworks beside it. */
  .tc-badge-progress { background: transparent; border: 1px solid var(--muted-2); color: var(--muted); }

  /* Documents */
  .tc-docs { max-width: 820px; margin: 0 auto; border-top: 1px solid var(--border); }
  .tc-doc {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.15rem 0.25rem;
    border-bottom: 1px solid var(--border);
    transition: background 0.15s ease;
  }
  .tc-doc:hover { background: rgba(255, 255, 255, 0.6); }
  .tc-doc-body { display: flex; flex-direction: column; gap: 0.2rem; }
  .tc-doc-name { font-family: var(--serif); font-size: 1.1rem; color: var(--ink); }
  .tc-lock { font-size: 0.75rem; opacity: 0.55; }
  .tc-doc-detail { color: var(--muted); font-size: 0.9rem; }
  .tc-doc-action { color: var(--lava); font-weight: 600; font-size: 0.9rem; white-space: nowrap; }

  /* Controls */
  .tc-controls { max-width: 880px; margin: 0 auto; border-top: 1px solid var(--border); }
  .tc-cat { border-bottom: 1px solid var(--border); }
  .tc-cat > summary {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding: 1.4rem 0;
    cursor: pointer;
    list-style: none;
  }
  .tc-cat > summary::-webkit-details-marker { display: none; }
  /* The native marker is hidden, so the row needs its own affordance or nothing
     says these open. Same +/- as the FAQ disclosures, so the site has one
     vocabulary for "this expands". */
  .tc-cat > summary::after {
    content: "+";
    flex: none;
    width: 1rem;
    text-align: center;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1;
    color: var(--lava);
  }
  .tc-cat[open] > summary::after { content: "\2013"; }
  .tc-cat > summary:hover .tc-cat-name { color: var(--lava); }
  .tc-cat-head { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; min-width: 0; }
  .tc-cat-name { transition: color 0.15s ease; }
  .tc-cat-name { font-family: var(--serif); font-size: 1.4rem; color: var(--ink); letter-spacing: -0.01em; }
  .tc-cat-summary { color: var(--muted); font-size: 0.95rem; }
  .tc-cat-count {
    flex: none;
    min-width: 2.1rem;
    text-align: center;
    padding: 0.15rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
    font-size: 0.8rem;
  }
  .tc-cat[open] .tc-cat-count { border-color: var(--lava); color: var(--lava); }

  /* Controls render as a table — control on the left, status on the right —
     matching how the same controls read on the Vanta Trust Center they mirror. */
  .tc-table {
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    margin: 0 0 1.75rem;
  }
  .tc-table-head {
    display: grid;
    grid-template-columns: 1fr 2.5rem;
    gap: 1.5rem;
    align-items: center;
    padding: 0.8rem 1.25rem;
    background: #faf9f7;
    border-bottom: 1px solid var(--border);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .tc-table-head span:last-child { text-align: right; }

  .tc-control-list { list-style: none; margin: 0; padding: 0; }
  .tc-control {
    display: grid;
    grid-template-columns: 1fr 2.5rem;
    gap: 1.5rem;
    align-items: center;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--border);
  }
  .tc-control:last-child { border-bottom: none; }
  .tc-control strong { display: block; font-weight: 600; font-size: 1rem; color: var(--ink); }
  .tc-control-detail { display: block; color: var(--muted); font-size: 0.9rem; line-height: 1.55; margin-top: 0.25rem; }

  /* Status dot. The glyph is an inline SVG rather than a rotated bordered box:
     a CSS tick made from two borders is centred on its bounding box, but its ink
     sits toward one corner, so it reads visibly low and left inside the circle.
     An SVG path centres on its own artwork and stays crisp at any size.

     Green is the signal colour here rather than the brand vermilion: on a trust
     page a tick has to read as "passing", and vermilion reads as an accent (and,
     next to a failing control, as one colour meaning two things). */
  .tc-check {
    justify-self: end;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9a9a' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 11.3 9.9 16.2 19 7.0'/%3E%3C/svg%3E");
  }
  .tc-control[data-status="ok"] .tc-check {
    background-color: var(--pass);
    border-color: var(--pass);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 11.3 9.9 16.2 19 7.0'/%3E%3C/svg%3E");
  }
  /* An exclamation, not a tick — the shape carries the meaning, not just colour. */
  .tc-control[data-status="attention"] .tc-check {
    background-color: var(--lava);
    border-color: var(--lava);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 6.8v7.4'/%3E%3Cpath d='M12 18.1v0.1'/%3E%3C/svg%3E");
  }

  .tc-note { max-width: 820px; margin: 1.75rem auto 0; color: var(--muted); font-size: 0.9rem; }
  .tc-note a { color: var(--lava); text-decoration: underline; }

  @media (max-width: 900px) {
    .tc-frameworks { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 600px) {
    /* Reclaim the horizontal room the desktop padding and gap take, so control
       descriptions don't wrap to five lines on a phone. */
    .tc-table-head, .tc-control { padding-left: 0.9rem; padding-right: 0.9rem; gap: 0.75rem; grid-template-columns: 1fr 1.5rem; }
    .tc-check { width: 18px; height: 18px; background-size: 10px 10px; }
    .tc-frameworks { grid-template-columns: 1fr; }
    .tc-doc { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
    .tc-cat > summary { flex-direction: row; align-items: flex-start; }
    .tc-cat-name { font-size: 1.2rem; }
  }

  /* In-page anchors (#documents, #controls, #agents, and each control category)
     have to clear the sticky header, or the heading they land on sits under it. */
  #documents, #controls, #agents, .tc-cat { scroll-margin-top: 90px; }


  /* ==========================================================================
     The line grid: the foundation under /customers, /customers/<slug>, /blog,
     /blog/<slug> and /events.

     One field of hairlines is painted behind the page, 12 columns wide (4 on
     mobile) on an 80px row rhythm. Every content block carries `data-mask` and
     paints the page ground over it, so the field survives only in the page
     margins and never runs behind copy. Each block also draws its own 1px
     rules; because the block's ground covers the field line beneath it, a cell
     edge is exactly one hairline rather than two stacked.

     Geometry comes from light-grid.js as custom properties on .lg-host, because
     the column step is snapped to whole device pixels and CSS cannot do that
     arithmetic. Colour is entirely here, on the .cs-page tokens, so the closing
     crossfade to black has one source of truth and the field, the rules and the
     ground all turn together.

     Two rules the blocks have to hold to, both enforced by the snap pass:
     authored top and bottom padding are equal (the engine only ever adds to
     them, splitting the row remainder between the two ends so content stays
     optically centred), and no block sets a top margin (a mask's top rides on
     the block above, since an unpainted strip between two blocks would let the
     field through and read as a stray cell).
     ========================================================================== */
  .lg-host {
    position: relative;
    isolation: isolate;
    /* flow-root, so the first block's margin cannot escape the host and drag
       the field's top edge off the row. */
    display: flow-root;
    width: var(--grid-width, 100%);
    margin: 0 0 0 var(--grid-offset, 0);
  }

  .lg-field {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: -1;
    transform: translateZ(0);
    pointer-events: none;
    /* Three stacked gradients: the verticals, the horizontals, and one
       cell-sized fill that follows the pointer. light-grid.js writes the three
       background-size values and the fill's position, so this list's order is
       load-bearing. */
    background-image:
      linear-gradient(to right, var(--cs-rule) 0 1px, transparent 1px),
      linear-gradient(to bottom, var(--cs-rule) 0 1px, transparent 1px),
      linear-gradient(var(--lg-cell), var(--lg-cell));
    background-repeat: repeat, repeat, no-repeat;
    background-position: 0 0, 0 0, -9999px -9999px;
    /* The field is a shade under full strength on white and full strength on
       black, where the same hairline would otherwise disappear. */
    opacity: 0.55;
    transition: opacity 0.8s ease;
    /* Hidden until the engine has measured: see the note in writeVars. */
    display: none;
  }
  .lg-host.is-measured .lg-field { display: block; }
  .cs-page { --lg-cell: rgba(232, 232, 231, 0.45); }
  .cs-page.is-dark { --lg-cell: #1a1a19; }
  .cs-page.is-dark .lg-field { opacity: 1; }

  /* The masks. Every block paints the ground and rules in the page's own
     tokens, so one class covers all five pages and the crossfade needs no
     per-page work. Which edges a block rules is the block's business: these are
     the sides every cell shares. */
  .lg-host [data-mask] {
    position: relative;
    width: var(--span12, 100%);
    margin: 0;
    background: var(--cs-ground);
    border-left: 1px solid var(--cs-rule);
    border-right: 1px solid var(--cs-rule);
    transition: background-color 0.8s ease, border-color 0.8s ease;
  }
  .lg-host [data-mask].lg-rule-top { border-top: 1px solid var(--cs-rule); }
  .lg-host [data-mask].lg-rule-bottom { border-bottom: 1px solid var(--cs-rule); }

  /* The spacing scale every block is padded on. Top and bottom are always the
     same value, which the snap pass relies on: it splits the row remainder
     between the two ends, so an authored asymmetry would compound rather than
     centre. Horizontal padding is the cell gutter: the block's own left and
     right rules sit at the field's outer columns, so the gutter is the only
     thing holding text off that hairline, and desktop had let it go all the
     way to zero, which reads as text sitting on the line rather than beside
     it. It still narrows on the wider canvas, but never to nothing.

     Named for what the artboard calls them so the two can be read side by side:
     blockPad between article modules, sectionPad around a section, closePad on
     the closing rail, heroPad at the head of a page, ctaPad on the last cell. */
  .cs-page {
    --lg-gutter: 20px;
    --lg-block: 20px;
    --lg-section: 24px;
    --lg-close: 28px;
    --lg-hero: 40px;
    --lg-cta: 64px;
  }
  @media (min-width: 768px) {
    .cs-page {
      --lg-gutter: 24px;
      --lg-block: 28px;
      --lg-section: 32px;
      --lg-close: 36px;
      --lg-hero: 60px;
      --lg-cta: 88px;
    }
  }
  @media (min-width: 1200px) {
    .cs-page {
      --lg-gutter: 32px;
      --lg-block: 36px;
      --lg-section: 40px;
      --lg-close: 48px;
      --lg-hero: 80px;
      --lg-cta: 120px;
    }
  }
  .lg-host [data-mask].lg-pad-block { padding: var(--lg-block) var(--lg-gutter); }
  .lg-host [data-mask].lg-pad-section { padding: var(--lg-section) var(--lg-gutter); }
  .lg-host [data-mask].lg-pad-close { padding: var(--lg-close) var(--lg-gutter); }
  .lg-host [data-mask].lg-pad-hero { padding: var(--lg-hero) var(--lg-gutter); }
  .lg-host [data-mask].lg-pad-cta { padding: var(--lg-cta) var(--lg-gutter); }

  /* The measure. Body copy runs in 616px on both article pages; a figure gets
     900px and the portrait 380px, and each box is centred in its cell both ways
     rather than sitting at the left edge of it. Column, not row: a blog post's
     last cell carries the article and the share line as two stacked children,
     and a row centres a multi-child cell as one horizontal group instead of
     centring each child on its own, which pushed the whole cell off toward the
     left edge and, with it, every breakout (a card strip, a checklist) sized
     against that cell's own now-off-centre measure. Every other cell here
     holds a single child, for which column reads identically to row. */
  .lg-host [data-mask].lg-centre { display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .lg-measure { width: 100%; max-width: 616px; }
  .lg-measure-figure { width: 100%; max-width: 900px; }
  .lg-measure-portrait { width: 100%; max-width: 380px; }
  .lg-measure-portrait-post { width: 100%; max-width: 420px; }
  .lg-measure-hero { width: 100%; max-width: 1040px; }

  /* Image wells: the ground an image sits on before it loads. The canvas
     computes #161615 on the dark ground, not the #1C1C1B its own colour table
     lists, and the export is the reference. */
  .cs-page { --lg-well: #ededec; }
  .cs-page.is-dark { --lg-well: #161615; }
  .lg-well {
    background: var(--lg-well);
    border-radius: 8px;
    overflow: hidden;
    transition: background-color 0.8s ease;
  }

  /* The scroll reveal moves the children of a mask, never the mask itself,
     whose background is what hides the field. light-grid.js sets the opacity
     and transform inline; this only stops the two from being animated when the
     reader has asked for less motion. */
  @media (prefers-reduced-motion: reduce) {
    .lg-host [data-mask] > * { opacity: 1 !important; transform: none !important; transition: none !important; }
    .lg-field { transition: none; }
  }

  /* ==========================================================================
     /customers — the Customer Stories canvas, as shipped.

     The canvas runs a whiter, squarer treatment than the rest of the site: a
     pure-white ground rather than the cream, black ink, hairlines a shade
     cooler than --border, and no corner radius on any control. Those values
     live as tokens on .cs-page so the palette is named and stays inside this
     page instead of spreading as loose hex.

     Two things are deliberately the site's and not the canvas's. The serif is
     --serif (the canvas mocks it up in Lora, which the site does not ship, and
     a second serif for one page is not worth the bytes). The header and footer
     are the real ones from layout.njk; the canvas draws its own only because
     an artboard has no site around it.

     Card geometry comes in as custom properties written per card: --gc-*
     (grid column), --ar-* (media aspect ratio), --mt-* (the nudge that
     bottom-aligns a pair), --show-* (inside the "Load more" cut), with the
     m/t/d suffix picked up by the breakpoint that wants it. The build writes
     the unfiltered values; customer-stories.js rewrites them per filter.
     ========================================================================== */
  .cs-page {
    /* The canvas draws in Lora and marks with #E8562A. Both are the artboard's
       own values, deliberately not --serif and --lava: these pages are the
       canvas as drawn, not the canvas translated into the site's tokens. */
    --cs-serif: "Lora", "Lora Fallback", Georgia, "Times New Roman", serif;
    --cs-accent: #e8562a;
    --cs-ground: #ffffff;
    --cs-ink: #000000;
    --cs-ink-2: #313130;
    --cs-muted: #626261;
    --cs-faint: #929291;
    --cs-rule: #e8e8e7;
    --cs-line: #c3c3c2;
    --cs-peach: #ffdcd1;
    --cs-plate: #1c1c1b;
    background: var(--cs-ground);
    color: var(--cs-ink);
    /* The canvas body sets no line-height. Without this the site's 1.5 leaks
       into every element the artboard leaves at `normal`: the chips, the card
       CTA, the buttons and the outcome captions all sit looser than drawn. */
    line-height: normal;
  }
  /* The canvas's base sheet: every link is vermilion unless the artboard gives
     it a colour of its own, the selection is peach, and focus is a vermilion
     ring. Carried over rather than left to the site's defaults. */
  .cs-page a { color: var(--cs-accent); }
  .cs-page ::selection { background: var(--cs-peach); }
  .cs-page :focus-visible { outline: 2px solid var(--cs-accent); outline-offset: 3px; }
  .cs-page .cs-wrap { max-width: 1440px; margin: 0 auto; padding-inline: 20px; }

  .cs-hero { padding: 160px 0 40px; display: flex; flex-direction: column; align-items: center; text-align: center; }
  .cs-hero h1 {
    margin: 0;
    max-width: 13ch;
    font-family: var(--cs-serif);
    font-weight: 400;
    font-size: clamp(44px, 5.4vw, 78px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }
  .cs-hero p {
    margin: 24px 0 0;
    max-width: 52ch;
    font-size: 15px;
    line-height: 1.65;
    color: var(--cs-muted);
    text-wrap: pretty;
  }
  .cs-hero .cs-btn-solid { margin-top: 28px; }

  /* Squared buttons: solid black on the light ground, inverted in the closing
     band, and a ghost outline for "Load more". */
  .cs-page .cs-btn-solid {
    display: inline-block;
    padding: 12px 26px;
    border-radius: 0;
    background: #000000;
    color: #ffffff;
    font-family: var(--sans);
    font-size: 14px;
  }
  .cs-hero .cs-btn-solid { transition: none; }
  .cs-hero .cs-btn-solid:hover { background: #313130; color: #ffffff; }
  .cs-cta .cs-btn-solid, .cs-story-cta .cs-btn-solid {
    transition: background-color 0.8s ease, color 0.8s ease, opacity 0.25s ease;
  }
  .cs-cta .cs-btn-solid:hover, .cs-story-cta .cs-btn-solid:hover { opacity: 0.75; }
  .cs-page .cs-btn-ghost {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 110px;
    height: 56px;
    padding: 18px 20px;
    gap: 10px;
    border: 1px solid currentColor;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: opacity 0.25s ease;
  }
  .cs-page .cs-btn-ghost:hover { opacity: 0.6; }

  .cs-logos { padding: 40px 0 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; }
  .cs-logos-label { margin: 0; font-size: 12px; letter-spacing: 0.02em; color: var(--cs-faint); }
  .cs-logos .logo-marquee {
    width: 100%;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  }
  /* Flat silhouettes, not greyscale photographs of logos. */
  /* The artboard runs the strip at 260s, not the site's 50s: overriding only
     the animation's name left it turning five times too fast. */
  .cs-logos .logo-track { filter: brightness(0); opacity: 0.42; animation: cs-logos 260s linear infinite; }
  @keyframes cs-logos { from { transform: translateX(-50%); } to { transform: translateX(0); } }
  .cs-logos .logo-set { gap: 56px; padding-right: 56px; }
  .cs-logos .logo-set img { height: 26px; max-width: 140px; }

  .cs-filters { padding: 48px 0 8px; display: flex; justify-content: safe center; gap: 6px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .cs-filters::-webkit-scrollbar { display: none; }
  .cs-chip {
    padding: 8px 16px;
    /* The artboard's chip declares a border and then zeroes its width, so an
       idle chip is bare text and the active one is a black fill. */
    border: 0 solid var(--cs-line);
    border-radius: 0;
    background: transparent;
    color: var(--cs-ink-2);
    font-family: var(--sans);
    font-size: 13px;
    cursor: pointer;
  }
  .cs-chip.is-active { background: var(--cs-ink); border-color: var(--cs-ink); color: var(--cs-ground); }

  .cs-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 0;
    row-gap: 64px;
    padding: 40px 0 60px;
  }
  .cs-card { grid-column: var(--gc-m); margin-top: var(--mt-m); }
  /* Held back only once the script is in: with no JS the whole grid renders. */
  .cs-grid.is-collapsed .cs-card { display: var(--show-m); }

  .cs-art { position: relative; overflow: hidden; border-radius: 8px; aspect-ratio: var(--ar-m); }
  .cs-art-film { background: var(--cs-plate); }
  /* One hit area over the whole still. The heading keeps the real, readable
     link for anyone on a keyboard or a screen reader. */
  .cs-hit { position: absolute; inset: 0; z-index: 2; display: block; }
  .cs-zoom { position: absolute; inset: 0; animation: cs-kenburns 6s ease-in-out infinite alternate; animation-play-state: paused; }
  .cs-art-film video, .cs-art-film img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; display: block; }
  @keyframes cs-kenburns { from { transform: scale(1); } to { transform: scale(1.08); } }

  .cs-art-logo { display: flex; align-items: center; justify-content: center; }
  .cs-plate-black { background: var(--cs-ink); }
  .cs-plate-white { background: var(--cs-ground); border: 1px solid var(--cs-rule); }
  .cs-plate-peach { background: var(--cs-peach); }
  .cs-logo { width: auto; max-width: 70%; object-fit: contain; }
  .cs-logo.is-invert { filter: brightness(0) invert(1); }
  .cs-wordmark { font-size: 44px; font-weight: 500; letter-spacing: -0.01em; color: var(--cs-ink); }
  .cs-wordmark.is-invert { color: var(--cs-ground); }

  .cs-foot { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 24px; }
  .cs-foot h3 a { color: inherit; }
  .cs-foot h3 {
    margin: 20px 0 0;
    width: 100%;
    max-width: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    font-family: var(--cs-serif);
    font-weight: 400;
    font-size: clamp(21px, 1.9vw, 27px);
    line-height: 1.18;
    letter-spacing: -0.012em;
    text-wrap: balance;
  }
  /* The feature breaks the grid: square media on the left, the heading and its
     link on the right, split 50/50 and centred against the image. A little
     more line-height than the grid card gets: at the feature's larger size,
     1.18 was tight enough that a descender on the clamped third line (a g, a
     y) sat right on the clip edge. */
  .cs-card.is-feature .cs-foot h3 {
    margin: 0;
    max-width: 20ch;
    font-size: clamp(28px, 3.4vw, 46px);
    line-height: 1.28;
  }
  /* Non-feature tiles fill the card's own width; the feature card keeps
     its own clamp for the split layout. */
.cs-card:not(.is-feature) .cs-foot h3 { max-width: 100%; display: block; -webkit-line-clamp: unset; overflow: visible; line-height: 1.28; }
  /* The underline is a background image so it can grow from nothing rather
     than blink on. Below desktop there is no hover, so the CTA always shows. */
  .cs-read {
    display: inline-block;
    padding-bottom: 3px;
    font-size: 14px;
    white-space: nowrap;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 1px;
  }
  .cs-page .cs-read {
    transition: opacity 0.28s ease,
                background-size 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
                color 0.8s ease;
  }
  .cs-card:hover .cs-read, .cs-read:focus-visible { background-size: 100% 1px; }

  .cs-more { padding: 80px 0; display: flex; flex-direction: column; align-items: center; }
  /* Inert without the script, so it is not rendered until the script arrives. */
  .cs-page:not(.is-ready) .cs-more { display: none; }

  .cs-stats { padding: 80px 0; }
  .cs-stats-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; padding-bottom: 64px; }
  .cs-stats-head h2 {
    margin: 0;
    max-width: 12ch;
    font-family: var(--cs-serif);
    font-weight: 400;
    font-size: clamp(38px, 5.4vw, 78px);
    line-height: 0.98;
    letter-spacing: -0.02em;
  }
  .cs-stats-head p { margin: 0; max-width: 62ch; font-size: 16px; line-height: 1.65; color: var(--cs-muted); text-wrap: pretty; }
  .cs-stat-grid { display: grid; grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .cs-stat { width: fit-content; padding: 28px 0; }
  .cs-num { display: block; font-family: var(--cs-serif); font-size: clamp(40px, 4.3vw, 62px); line-height: 1; font-variant-numeric: tabular-nums; }
  .cs-stat p { margin: 12px auto 0; max-width: 26ch; font-size: 15px; line-height: 1.5; color: var(--cs-muted); text-wrap: pretty; }

  /* The band is transparent. The black arrives underneath it, from the page
     ground crossfading as the band comes into view (see .is-dark below), which
     is how the canvas gets one continuous dark field rather than a dark box. */
  .cs-cta { padding: 160px 0; background: transparent; border: 1px solid var(--cs-rule); transition: border-color 0.8s ease; }
  .cs-cta .cs-wrap { display: flex; flex-direction: column; align-items: center; gap: 24px; }
  .cs-cta h2 {
    margin: 0;
    max-width: 12ch;
    font-family: var(--cs-serif);
    font-weight: 400;
    font-size: clamp(38px, 7vw, 96px);
    line-height: 0.98;
    letter-spacing: -0.02em;
    text-align: center;
    color: inherit;
  }
  .cs-cta p {
    margin: 0;
    max-width: 52ch;
    font-size: 16px;
    line-height: 1.44;
    letter-spacing: -0.01em;
    text-align: center;
    color: inherit;
  }
  .cs-cta .cs-btn-solid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 54px;
    margin-top: 19px;
    padding: 18px 20px;
    font-weight: 500;
    line-height: 18px;
    text-align: center;
    white-space: nowrap;
  }

  /* The ground crossfades to black as the closing band is reached, and the
     copy, rules, plates and marks follow it so nothing is left dark on dark.
     The canvas flips at 0.72 of the viewport height; customer-stories.js and
     customer-story.js both add .is-dark on that same threshold. */
  .cs-page { transition: background-color 0.8s ease, color 0.8s ease; }
  .cs-page :where(p, h1, h2, h3, a, dt, dd, li, span, figcaption, cite, .cs-num) {
    transition: color 0.8s ease, border-color 0.8s ease, background-color 0.8s ease;
  }
  .cs-page .logo-track, .cs-page .cs-logo { transition: filter 0.8s ease; }
  .cs-page.is-dark {
    --cs-ground: #000000;
    --cs-ink: #e9e9e9;
    --cs-ink-2: #c3c3c2;
    --cs-muted: #a8a8a7;
    --cs-rule: #313130;
    --cs-line: #313130;
    background: #000000;
    color: #e9e9e9;
  }
  .cs-page.is-dark .cs-cta { border-color: #313130; }
  /* Only the closing button inverts with the ground. The hero's is fixed black
     in the artboard and stays that way. */
  .cs-page.is-dark .cs-cta .cs-btn-solid,
  .cs-page.is-dark .cs-story-cta .cs-btn-solid { background: #ffffff; color: #000000; }
  .cs-page.is-dark .cs-chip { border-color: #313130; color: #c3c3c2; }
  .cs-page.is-dark .cs-chip.is-active { background: #ffffff; border-color: #ffffff; color: #000000; }
  .cs-page.is-dark .cs-logos .logo-track { filter: brightness(0) invert(1); }
  .cs-page.is-dark .cs-plate-white { background: #000000; border-color: #313130; }
  .cs-page.is-dark .cs-rail-card { color: #ffffff; }
  .cs-page.is-dark .cs-rail-plate { background: #0e0e0e; }
  .cs-page.is-dark .cs-rail-mark img { filter: brightness(0) invert(1); }
  .cs-page.is-dark .cs-rail-btn { background: #161615; }
  .cs-page.is-dark .cs-rail-btn.is-next { background: var(--cs-accent); color: #ffffff; }
  .cs-page.is-dark .cs-figure img, .cs-page.is-dark .cs-figure video,
  .cs-page.is-dark .cs-story-hero > * { background: #161615; }

  /* Tablet: the editorial rhythm gives way to a uniform two-up. */
  @media (min-width: 768px) {
    .cs-page .cs-wrap { padding-inline: 32px; }
    .cs-grid { column-gap: 24px; row-gap: 96px; }
    .cs-foot h3 { max-width: 34ch; }
    .cs-card.is-feature {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      column-gap: 24px;
      row-gap: 28px;
      align-items: center;
    }
    .cs-card.is-feature .cs-foot { height: 100%; flex-direction: column; justify-content: center; }
    .cs-card { grid-column: var(--gc-t); margin-top: var(--mt-t); }
    .cs-grid.is-collapsed .cs-card { display: var(--show-t); }
    .cs-art { aspect-ratio: var(--ar-t); }
    .cs-stat-grid { grid-template-columns: repeat(2, 1fr); text-align: left; }
    .cs-stat { padding: 36px 0; }
    .cs-stat p { margin-left: 0; margin-right: 0; max-width: 30ch; }
  }

  @media (min-width: 1200px) {
    .cs-page .cs-wrap { padding-inline: 48px; }
    .cs-grid { column-gap: 40px; row-gap: 160px; }
    .cs-foot h3 { max-width: 24ch; }
    .cs-card.is-feature { column-gap: 40px; }
    /* The action link waits for the pointer only where there is one. */
    .cs-read { opacity: 0; }
    .cs-card:hover .cs-read, .cs-read:focus-visible { opacity: 1; }
    .cs-card { grid-column: var(--gc-d); margin-top: var(--mt-d); }
    .cs-grid.is-collapsed .cs-card { display: var(--show-d); }
    .cs-art { aspect-ratio: var(--ar-d); }
    .cs-stat-grid { grid-template-columns: repeat(3, 1fr); }

    /* Below this width the gutter still does the same job it does on mobile
       and tablet: content sits inside the mask's own rules with room to
       breathe. Only the desktop step closed that room to nothing, on the
       idea that the rule itself would read as the margin; on the canvases
       that carry left-aligned copy right up to their own edge (the grid,
       the filter rows, the stat band), it read instead as text sitting on
       the line. Restoring it here, rather than in --lg-gutter itself, keeps
       the change to the handful of blocks that set their own padding
       outside the lg-pad-* scale and never inherited the variable at all. */
    .cs-filters, .cs-grid, .cs-more, .cs-stats { padding-left: var(--lg-gutter); padding-right: var(--lg-gutter); }
    /* Heading and CTA share a line, the CTA settling on the first baseline. */
    .cs-foot { flex-direction: row; justify-content: space-between; gap: 48px; }
    .cs-read { margin-top: 26px; opacity: 0; }
    .cs-card:hover .cs-read, .cs-read:focus-visible { opacity: 1; }
    /* Regular tiles keep the CTA stacked under the headline and always
       visible; the feature card keeps the shared-line, hover-reveal
       treatment above. */
    .cs-card:not(.is-feature) .cs-foot { flex-direction: column; justify-content: flex-start; gap: 24px; }
    .cs-card:not(.is-feature) .cs-read { margin-top: 0; opacity: 1; }
  }

  @media (prefers-reduced-motion: reduce) {
    .cs-page, .cs-page * { transition: none !important; }
    .cs-zoom { animation: none; }
    .cs-logos .logo-track { animation: none; }
  }

  /* ==========================================================================
     /customers/<slug>: the Customer Story canvas.

     Built on the palette .cs-page already defines for /customers, so the index
     and the stories are one system. The artboard's shape: a centred breadcrumb
     and title, a wide still, the outcome figures, then a 560px measure that
     carries every word. Figures, pull quotes and the before/after stack are the
     only things allowed to break out of that measure.

     Vermilion is the accent throughout (eyebrows, the breadcrumb's own brand,
     quote marks, the rule beside a closing statement). The artboard uses
     #E8562A; the site's --lava is the same colour in the brand's own token.
     ========================================================================== */
  .cs-story .cs-wrap { max-width: 1440px; }

  .cs-story-head { padding: 56px 0 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; }
  .cs-crumbs { margin: 0; font-size: 13px; color: var(--cs-muted); text-wrap: pretty; }
  .cs-crumbs a { color: inherit; }
  .cs-crumbs a:hover { color: var(--cs-ink); }
  .cs-crumbs span { color: var(--cs-line); }
  .cs-crumbs em { font-style: normal; color: var(--cs-accent); }
  .cs-story-head h1 {
    margin: 0;
    max-width: 20ch;
    font-family: var(--cs-serif);
    font-weight: 400;
    font-size: clamp(38px, 5.4vw, 78px);
    line-height: 0.98;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }

  .cs-story-hero { padding-top: 56px; }
  .cs-story-hero > * { aspect-ratio: 3/4; border-radius: 8px; overflow: hidden; background: #ededec; }
  .cs-story-hero video, .cs-story-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .cs-story-plate { display: flex; align-items: center; justify-content: center; background: var(--cs-peach); }
  .cs-story-plate img { width: auto; height: 56px; max-width: 60%; object-fit: contain; }
  .cs-story-plate span { font-size: 44px; font-weight: 500; letter-spacing: -0.01em; }

  /* Film facade: the poster is a background, so nothing loads until it is asked for. */
  .cs-film { position: relative; background-size: cover; background-position: center; cursor: pointer; }
  .cs-film.is-playing { cursor: default; background: #000; }
  .cs-film iframe { width: 100%; height: 100%; border: 0; display: block; }

  /* A played film cannot crop the way its still can: Vimeo letterboxes to fit
     rather than filling the slot, so the artboard's wide hero crop leaves the
     poster showing behind the bars once the iframe mounts. Give the landscape
     film its own ratio, close to the source footage, so the player fills the
     frame edge to edge the same way the portrait crop already does below. */
  .cs-story-hero .cs-film:not(.is-portrait) { aspect-ratio: 16/9; }
  .cs-play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 68px;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.25s ease;
  }
  .cs-film:hover .cs-play { transform: scale(1.08); }
  .cs-film.is-playing .cs-play { display: none; }

  .cs-story-stats { padding-top: 56px; display: grid; grid-template-columns: 1fr; justify-items: start; gap: 32px; }
  .cs-story-stats .cs-num { font-size: clamp(30px, 2.8vw, 40px); line-height: 1.08; letter-spacing: -0.01em; }
  .cs-story-stats .cs-stat { padding: 0; }
  .cs-story-stats .cs-stat p { margin: 12px 0 0; max-width: 30ch; font-size: 15px; line-height: 1.5; color: var(--cs-muted); text-wrap: pretty; }
  /* The outcome's own label. The canvas has no slot for it, so it sits quietly
     above the figure rather than borrowing the vermilion an eyebrow marks a
     section with. */
  .cs-story-stats .cs-stat-label { margin: 0 0 6px; font-size: 13px; color: var(--cs-muted); }

  /* The measure. Everything that is not a figure sits inside it. */
  .cs-col { width: 100%; max-width: 560px; margin: 0 auto; }
  .cs-lead { margin: 96px 0 0; font-weight: 500; font-size: 17px; line-height: 1.6; letter-spacing: -0.005em; text-wrap: pretty; }
  .cs-body { margin: 0 0 18px; font-size: 14px; line-height: 1.7; color: var(--cs-ink-2); text-wrap: pretty; }
  .cs-col > .cs-body:first-child { margin-top: 40px; }

  .cs-facts { margin: 56px 0 40px; display: grid; grid-template-columns: 1fr; border: 1px solid var(--cs-rule); }
  .cs-facts > div { padding: 16px 18px; border-bottom: 1px solid var(--cs-rule); }
  .cs-facts > div:last-child { border-bottom: 0; }
  .cs-facts dt { font-size: 11px; color: var(--cs-muted); }
  .cs-facts dd { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--cs-ink-2); text-wrap: pretty; }
  .cs-facts a { color: var(--cs-accent); }

  .cs-block { margin-top: 88px; }
  .cs-eyebrow { margin: 0; font-size: 13px; color: var(--cs-accent); text-wrap: pretty; }
  .cs-block h2 {
    margin: 12px 0 20px;
    max-width: 24ch;
    font-family: var(--cs-serif);
    font-weight: 400;
    font-size: 30px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-wrap: balance;
  }
  .cs-attrib { margin: 24px 0 0; font-size: 13px; line-height: 1.5; color: var(--cs-muted); }
  .cs-attrib span { display: block; font-weight: 500; color: var(--cs-ink); }

  .cs-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--cs-rule); }
  .cs-list li { padding: 14px 0; border-bottom: 1px solid var(--cs-rule); font-size: 14px; line-height: 1.6; color: var(--cs-ink-2); text-wrap: pretty; }
  /* "What [Customer] runs on Light": a small accent dot, close enough to the
     text to read as one unit even once the line wraps. */
  .cs-block > ul.cs-list li { display: flex; align-items: flex-start; gap: 12px; }
  .cs-block > ul.cs-list li::before {
    content: "";
    flex: 0 0 6px;
    width: 6px;
    height: 6px;
    margin-top: 7px;
    border-radius: 50%;
    background: var(--cs-accent);
  }
  .cs-stack { width: 100%; table-layout: fixed; border-collapse: collapse; margin-top: 28px; }
  .cs-stack th, .cs-stack td { text-align: left; border-bottom: 1px solid var(--cs-rule); }
  .cs-stack th { padding: 0 0 8px; font-size: 13px; font-weight: 400; color: var(--cs-accent); }
  .cs-stack td { padding: 18px 0; vertical-align: middle; font-size: 14px; line-height: 1.6; color: var(--cs-ink-2); text-wrap: pretty; }
  .cs-stack th:first-child, .cs-stack td:first-child { padding-right: 16px; }
  .cs-stack th:last-child, .cs-stack td:last-child { padding-left: 16px; }
  .cs-stack-systems { margin: 0; padding: 0; list-style: none; }
  .cs-stack-systems li + li { margin-top: 8px; }
  .cs-stack-note { margin: 20px 0 0; font-size: 13px; line-height: 1.6; color: var(--cs-muted); }

  /* Pull quote: the opening mark hangs outside the measure on desktop, which is
     what gives the artboard's column its edge. */
  .cs-quote { margin: 64px 0; display: flex; flex-direction: column; gap: 20px; }
  .cs-quote p {
    position: relative;
    margin: 0;
    font-family: var(--cs-serif);
    font-size: 40px;
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-wrap: pretty;
  }
  .cs-mark { color: var(--cs-accent); }
  .cs-quote figcaption { font-size: 13px; line-height: 1.5; color: var(--cs-muted); }
  .cs-quote figcaption span { display: block; font-weight: 500; color: var(--cs-ink); }
  .cs-quote-rule { padding: 28px 0 28px 28px; border-left: 1px solid var(--cs-accent); }

  .cs-figure { margin: 0 auto; width: 100%; }
  .cs-figure img, .cs-figure video { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 8px; background: #ededec; }
  .cs-figure-wide { max-width: 900px; }
  .cs-figure-wide img, .cs-figure-wide video { aspect-ratio: 16/9; }
  /* 15% taller than 16:9, for a source shot taller than the standard 16:9 crop
     leaves room for, so a group photo's heads clear the top of the frame
     without the box needing to run the source's own height. */
  .cs-figure-wide-tall { max-width: 900px; }
  .cs-figure-wide-tall img, .cs-figure-wide-tall video { aspect-ratio: 16/10.35; }
  .cs-figure-portrait { max-width: 380px; }
  .cs-figure-portrait img, .cs-figure-portrait video { aspect-ratio: 3/4; }

  /* The figure's cell already pads it top and bottom; the figure's own margin
     on top of that read as nearly double the gap the rest of the page uses
     between a block and its neighbour. The same sliver the blog gives its own
     post figures, for the same reason: unifies the two templates' rhythm. */
  .lg-host [data-mask].lg-pad-block:has(> .cs-figure) { padding-block: calc(var(--lg-block) / 4); }

  .cs-rule { margin: 120px 0 0; border: 0; height: 1px; background: var(--cs-rule); }

  .cs-story-cta { padding: 96px 0; display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
  .cs-story-cta h2 {
    margin: 0;
    max-width: 12ch;
    font-family: var(--cs-serif);
    font-weight: 400;
    font-size: clamp(38px, 7vw, 96px);
    line-height: 0.98;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }
  .cs-story-cta p { margin: 0; max-width: 34ch; font-size: 16px; line-height: 1.44; letter-spacing: -0.01em; text-wrap: pretty; }
  .cs-story-cta .cs-btn-solid { margin-top: 19px; display: flex; align-items: center; justify-content: center; height: 54px; padding: 18px 20px; font-weight: 500; line-height: 18px; text-align: center; white-space: nowrap; }

  .cs-rail-sec { padding: 0 0 140px; }
  .cs-rail-head { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-bottom: 28px; }
  .cs-rail-head h2 { margin: 0; font-family: var(--cs-serif); font-weight: 400; font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -0.02em; text-wrap: balance; }
  .cs-rail-nav { display: flex; gap: 8px; }
  .cs-rail-btn {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 2px;
    background: #ededec;
    color: var(--cs-muted);
    font-size: 13px;
    cursor: pointer;
    transition: background-color 0.25s ease;
  }
  .cs-rail-btn:hover { background: #c3c3c2; }
  .cs-rail-btn.is-next { background: var(--cs-accent); color: #ffffff; transition: opacity 0.25s ease; }
  .cs-rail-btn.is-next:hover { background: var(--cs-accent); opacity: 0.8; }
  .cs-rail { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: 8px; scrollbar-width: none; -ms-overflow-style: none; }
  .cs-rail::-webkit-scrollbar { display: none; }
  .cs-rail-card { flex: 0 0 84%; min-width: 0; scroll-snap-align: start; display: flex; flex-direction: column; gap: 16px; }
  .cs-page .cs-rail-card { color: var(--cs-ink); transition: color 0.8s ease; }
  .cs-rail-plate { aspect-ratio: 4/3; border-radius: 8px; background: #f4f4f3; display: flex; align-items: center; justify-content: center; overflow: hidden; transition: background-color 0.8s ease; }
  .cs-rail-mark { display: flex; align-items: center; justify-content: center; width: 100%; height: 52px; transition: transform 0.55s cubic-bezier(0.33, 1, 0.68, 1); }
  /* The mark carries the ground's filter, so on the dark plate at the foot of
     the page the logos read white instead of sinking into it. */
  .cs-rail-mark img { max-width: 56%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; filter: none; transition: filter 0.8s ease; }
  .cs-rail-mark span { font-size: 26px; font-weight: 500; letter-spacing: -0.02em; color: inherit; }
  .cs-rail-card:hover .cs-rail-mark { transform: translateY(-6px); }
  .cs-rail-card p { margin: 0; max-width: 38ch; font-size: 13px; line-height: 1.55; color: var(--cs-ink-2); text-wrap: pretty; }

  @media (min-width: 768px) {
    .cs-story-head { padding-top: 56px; }
    .cs-story-hero { padding-top: 96px; }
    .cs-story-hero > * { aspect-ratio: 16/10; }
    .cs-story-stats { padding-top: 80px; grid-template-columns: repeat(3, 1fr); justify-items: start; gap: 40px; }
    .cs-facts { grid-template-columns: repeat(2, 1fr); }
    .cs-facts > div:nth-last-child(-n+2) { border-bottom: 0; }
    .cs-quote { margin: 104px 0; padding-left: 40px; }
    .cs-quote-rule { margin: 72px 0 72px 40px; padding: 28px 0 28px 28px; width: calc(100% + 60px); }
    .cs-story-cta { padding: 120px 0; }
    .cs-rail-card { flex-basis: calc((100% - 24px) / 2); }
  }

  @media (min-width: 1200px) {
    .cs-story-hero > * { aspect-ratio: 16/7; }
    .cs-facts { grid-template-columns: repeat(4, 1fr); }
    .cs-facts > div { border-bottom: 0; }
    /* The quote runs wider than the measure and hangs its mark into the margin. */
    .cs-quote { padding-left: 72px; width: calc(100% + 110px); }
    /* The artboard hangs the opening mark clear of the measure. */
    .cs-quote .cs-mark-open { position: absolute; left: -28px; top: 0; }
    .cs-quote-rule { margin: 80px 0 80px 72px; width: calc(100% + 190px); }
    .cs-story-cta { padding: 160px 0; }
    .cs-rail-card { flex-basis: calc((100% - 72px) / 4); }
  }

  @media (prefers-reduced-motion: reduce) {
    .cs-rail { scroll-behavior: auto; }
    .cs-rail-card:hover .cs-rail-plate img { transform: none; }
  }

  /* A film shot portrait keeps its crop rather than being letterboxed into the
     artboard's 16/7 slot. */
  .cs-story-hero .cs-film.is-portrait { aspect-ratio: 3/4; max-width: 560px; margin: 0 auto; }
  /* stack-compare brings its own <section class="sec white">, which carries the
     site's own padding. Inside the story column that reads as a double gap. */
  .cs-stackcompare { margin-top: 88px; }
  .cs-stackcompare .sec { padding: 0; background: none; }
  .cs-stackcompare .wrap { padding: 0; max-width: 900px; }
  .cs-stackcompare .section-head { margin-bottom: 28px; }
  .cs-stackcompare .section-head h2 { font-family: var(--cs-serif); font-weight: 400; font-size: 30px; line-height: 1.2; letter-spacing: -0.01em; color: var(--cs-ink); }

  /* --- The finance-stack orbit (partials/stack-orbit.njk) --------------------
     The one black plate on a cream page: a dark stage inset in the story
     column, replacing the pair of before/after diagrams.

     Everything inside .cs-orbit-scaler is drawn by stack-orbit.js at a design
     width of 1200px and scaled to whatever column it lands in, so the
     composition holds at every size instead of reflowing. The toggle sits
     outside the scaler, at real size, so it stays legible on a phone.
     ------------------------------------------------------------------------ */
  /* The story column centres its cells with align-items, so a panel that only
     asks for width:100% shrinks to its content instead of filling the column. */
  .cs-orbit-sec, .cs-orbit-sec .wrap { width: 100%; }
  .cs-orbit {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: 18px;
    background: #0a0a0a;
    color: #f2f0ec;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    /* The panel sits mid-article, so a vertical swipe stays the page's; only a
       gesture that commits to the horizontal spins the sphere. */
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
  }
  .cs-orbit[data-ready] { cursor: grab; }
  .cs-orbit.is-dragging { cursor: grabbing; }

  .cs-orbit-scaler { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
  .cs-orbit-stage { position: absolute; width: 0; height: 0; }

  .cs-orbit-tile {
    position: absolute;
    left: 0;
    top: 0;
    will-change: transform, width, height, opacity;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
  }
  .cs-orbit-logo {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16%;
    pointer-events: none;
  }
  .cs-orbit-logo svg { width: 100%; height: auto; max-height: 100%; flex: 0 1 auto; overflow: visible; }
  /* A bare icon needs room for the name beside it; a name on its own gets the
     tile. */
  .cs-orbit-logo.has-word svg { width: 24%; flex: 0 0 auto; }
  .cs-orbit-logo.is-word-only { padding: 13%; }
  .cs-orbit-word-mark {
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
    letter-spacing: -0.02em;
    white-space: nowrap;
    text-align: center;
  }
  .cs-orbit-word-mark.is-wide { letter-spacing: 0.06em; }
  .cs-orbit-word-mark.is-stack { white-space: normal; line-height: 1.25; font-weight: 600; letter-spacing: 0; }

  /* light.inc's own wordmark, scaled up from nothing as the ring closes. */
  .cs-orbit-light { position: absolute; z-index: 200; pointer-events: none; transform: translate(-50%, -50%) scale(0); }
  .cs-orbit-light svg { display: block; width: 100%; height: auto; }

  .cs-orbit-toggle {
    position: absolute;
    left: 50%;
    top: 16px;
    transform: translateX(-50%);
    z-index: 300;
    display: flex;
    gap: 2px;
    padding: 4px;
    border: 1px solid #2b2b2b;
    border-radius: 999px;
    background: #1a1a1a;
  }
  .cs-orbit-toggle button {
    appearance: none;
    border: 0;
    border-radius: 999px;
    padding: 9px 22px;
    background: transparent;
    color: #8a8a8a;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.01em;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease;
  }
  .cs-orbit-toggle button.is-active { background: #2e2e2e; color: #f2f0ec; }

  /* The description the two diagrams carried. It is the panel's only text, so
     it stands in the middle until the canvas exists, then goes to screen
     readers alone. */
  .cs-orbit-alt {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(80%, 620px);
    margin: 0;
    text-align: center;
    font-size: 15px;
    line-height: 1.5;
    color: #8a8a8a;
  }
  .cs-orbit[data-ready] .cs-orbit-alt {
    top: 0;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    transform: none;
  }

  @media (max-width: 700px) {
    /* A square panel keeps the ring from flattening into a line on a phone. */
    .cs-orbit { aspect-ratio: 1 / 1; border-radius: 14px; }
    .cs-orbit-toggle { top: 12px; }
    .cs-orbit-toggle button { padding: 8px 12px; font-size: 12px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .cs-orbit-toggle button { transition: none; }
  }

  /* ==========================================================================
     /events: the Events canvas.

     Built on the ground .cs-page defines and the cells light-grid.js snaps, so
     the palette, the closing crossfade and the 80px row all come from there.
     What this page adds is its own: a full-bleed black carousel, the sticky
     filter panel, a list whose rows share one rule, and a closing cell with a
     plate field behind the copy.

     The calendar is real (src/_data/events.js, synced from Notion). The canvas
     mocks three filter groups, Format / Location / Status, but the calendar
     carries no format and its statuses are Confirmed and Done, so the panel
     offers Location and When instead of inventing the other two.
     ========================================================================== */
  .ev-head { padding: 64px 0 56px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
  .ev-head h1 {
    margin: 0;
    font-family: var(--cs-serif);
    font-weight: 400;
    font-size: clamp(38px, 5vw, 64px);
    line-height: 1.02;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }
  .ev-head p { margin: 0; max-width: 40ch; font-size: 16px; line-height: 1.6; color: var(--cs-muted); transition: color 0.8s ease; text-wrap: pretty; }

  /* The carousel cell runs the full viewport rather than the 12 columns: the
     black slide goes edge to edge while the cell's rules stay on the column
     lines. The engine writes both values, so the breakout costs no media query. */
  .lg-host [data-mask].ev-carousel {
    width: var(--lg-viewport, 100%);
    margin-left: var(--lg-viewport-left, 0);
  }
  .ev-carousel {
    padding: 0 0 88px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
  }
  .ev-viewport { width: 100%; overflow: hidden; background: #000000; }
  .ev-track { display: flex; width: 100%; transition: transform 0.7s cubic-bezier(0.33, 1, 0.68, 1); }
  .ev-slide { flex: 0 0 100%; display: grid; grid-template-columns: 1fr; background: #000000; color: #ffffff; }
  /* Mobile stacks the photograph above the copy, so the slide leads with the
     image the way the artboard does. */
  .ev-slide-media { order: 1; min-height: 240px; background: #1a1a19; overflow: hidden; }
  .ev-slide-copy { order: 2; padding: 32px 28px 36px; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; }
  .ev-slide-media img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1); }
  .ev-slide-meta { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--cs-line); }
  .ev-slide-meta .ev-dot { color: var(--cs-muted); }
  .ev-slide-main { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
  .ev-slide-main h2 {
    margin: 0;
    max-width: 16ch;
    font-family: var(--cs-serif);
    font-weight: 400;
    font-size: 32px;
    line-height: 1.06;
    letter-spacing: -0.01em;
    text-wrap: balance;
  }
  /* A white button turns accent on hover, like every other white button here. */
  .cs-page .ev-btn-white {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 110px;
    height: 54px;
    padding: 18px 20px;
    background: #ffffff;
    border: 1px solid #ffffff;
    border-radius: 0;
    color: #000000;
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    white-space: nowrap;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
  }
  .cs-page .ev-btn-white:hover { background: var(--cs-accent); border-color: var(--cs-accent); color: #ffffff; }

  .ev-dots { display: flex; gap: 8px; }
  .ev-dot-btn { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 100px; background: #d6d6d5; cursor: pointer; transition: background-color 0.3s ease; }
  .ev-dot-btn.is-on { background: var(--cs-ink); }

  .ev-body { padding: 48px 0 64px; display: grid; grid-template-columns: 1fr; align-items: start; }

  /* The filter panel. Opaque on purpose: it is the one surface that scrolls over
     content, so it cannot let the field or the rows show through it. */
  .ev-panel {
    position: static;
    top: 60px;
    z-index: 20;
    align-self: start;
    margin: 0 0 0 -1px;
    padding: 24px;
    border: 1px solid var(--cs-rule);
    background: var(--cs-ground);
    display: flex;
    flex-direction: column;
    gap: 20px;
    transition: background-color 0.8s ease, border-color 0.8s ease;
  }
  .ev-panel-title { font-family: var(--cs-serif); font-size: 20px; }
  .ev-groups { display: flex; flex-direction: column; }
  .ev-group { padding: 14px 0; border-top: 1px solid var(--cs-rule); transition: border-color 0.8s ease; }
  .ev-group-head {
    width: 100%;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-family: var(--sans);
    font-weight: 500;
    font-size: 14px;
    color: inherit;
  }
  .ev-group-icon { font-size: 16px; color: var(--cs-muted); transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1); }
  .ev-group.is-open .ev-group-icon { transform: rotate(45deg); }
  .ev-options { display: none; flex-direction: column; gap: 10px; padding-top: 14px; }
  .ev-group.is-open .ev-options { display: flex; }
  .ev-option { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--cs-muted); cursor: pointer; }
  /* The checkbox itself is the 12px square; the input stays for the keyboard
     and the screen reader rather than being replaced by it. */
  .ev-option input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
  .ev-box { width: 12px; height: 12px; border: 1px solid var(--cs-line); background: transparent; transition: background-color 0.2s ease, border-color 0.2s ease; }
  .ev-option:has(input:checked) { color: var(--cs-ink); }
  .ev-option:has(input:checked) .ev-box { border-color: var(--cs-ink); background: var(--cs-ink); }
  .ev-option:has(input:focus-visible) .ev-box { outline: 2px solid var(--cs-accent); outline-offset: 2px; }
  .ev-clear button { padding: 0; background: transparent; border: 0; cursor: pointer; font-size: 13px; color: var(--cs-accent); }

  .ev-btn-ghost {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    min-width: 110px;
    height: 54px;
    padding: 18px 20px;
    border: 1px solid var(--cs-line);
    border-radius: 0;
    background: transparent;
    color: inherit;
    font-family: var(--sans);
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.8s ease;
  }
  .ev-btn-ghost:hover { background: var(--cs-ink); border-color: var(--cs-ink); color: var(--cs-ground); }

  .ev-list { display: flex; flex-direction: column; margin: 40px 0 0; }
  .ev-list-head { height: 80px; padding: 0 24px; border: 1px solid var(--cs-rule); display: flex; align-items: center; transition: border-color 0.8s ease; }
  .ev-list-head h2 { margin: 0; font-family: var(--cs-serif); font-weight: 400; font-size: 24px; letter-spacing: -0.01em; }
  /* Every row pulls up a pixel so its top border lands on the bottom border of
     the row above: one shared rule rather than two stacked. */
  .ev-row {
    margin-top: -1px;
    min-height: 80px;
    padding: 16px 20px;
    border: 1px solid var(--cs-rule);
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    align-items: center;
    color: inherit;
    transition: color 0.25s ease, background-color 0.25s ease, border-color 0.8s ease;
  }
  .cs-page .ev-row { color: var(--cs-ink); }
  .cs-page .ev-row[href]:hover { color: var(--cs-accent); }
  .ev-row-name { font-family: var(--cs-serif); font-size: 17px; }
  .ev-row-city, .ev-row-date { font-size: 14px; color: var(--cs-muted); transition: color 0.8s ease; }
  .ev-empty { margin-top: -1px; height: 80px; padding: 0 24px; border: 1px solid var(--cs-rule); display: flex; align-items: center; font-size: 14px; color: var(--cs-muted); }
  .ev-more { margin-top: -1px; height: 160px; border: 1px solid var(--cs-rule); display: flex; align-items: center; justify-content: center; }

  /* The closing cell: a plate field with two photographs laid into it and the
     copy over the top. A plate lightens under the pointer, which is the same
     move the grid field makes behind the rest of the page. */
  .lg-host [data-mask].ev-cta {
    width: var(--lg-viewport, 100%);
    margin-left: var(--lg-viewport-left, 0);
  }
  .ev-cta { position: relative; overflow: hidden; padding: 160px 24px; gap: 24px; }
  .ev-cta h2 { max-width: 16ch; }
  .ev-mosaic {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: grid;
    grid-template-columns: 1.35fr 0.8fr 1.15fr 0.9fr 1.45fr 0.85fr;
    grid-template-rows: 70px 110px 1fr 100px 80px;
  }
  .cs-page {
    --ev-t0: #ffffff;
    --ev-t1: #f6f6f5;
    --ev-t2: #efefee;
    --ev-t3: #fafaf9;
    --ev-t4: #eaeae9;
    --ev-band: #ffffff;
    --ev-plate-hover: #dededd;
  }
  .cs-page.is-dark {
    --ev-t0: #0d0d0c;
    --ev-t1: #151514;
    --ev-t2: #1c1c1b;
    --ev-t3: #111110;
    --ev-t4: #191918;
    --ev-band: #000000;
    --ev-plate-hover: #2a2a29;
  }
  .ev-plate { transition: background-color 0.5s ease; }
  .ev-tone-0 { background: var(--ev-t0); }
  .ev-tone-1 { background: var(--ev-t1); }
  .ev-tone-2 { background: var(--ev-t2); }
  .ev-tone-3 { background: var(--ev-t3); }
  .ev-tone-4 { background: var(--ev-t4); }
  .ev-plate-band { background: var(--ev-band); }
  .ev-plate:not(.ev-plate-band):hover { background: var(--ev-plate-hover); }
  .ev-frame { position: relative; overflow: hidden; background: var(--lg-well); }
  .ev-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
  .ev-frame-a { grid-area: 1 / 1 / span 2 / span 2; }
  .ev-frame-b { grid-area: 4 / 5 / span 2 / span 2; }
  .ev-cta > :not(.ev-mosaic) { position: relative; z-index: 1; }

  @media (min-width: 768px) {
    .ev-head { padding: 104px 0 88px; }
    .ev-slide { grid-template-columns: 1fr 1fr; min-height: calc(100vh - 156px); }
    .ev-slide-media { order: 0; min-height: 0; }
    .ev-slide-copy { order: 0; padding: 40px; }
    .ev-slide-main h2 { font-size: 42px; }
    .ev-body { padding: 80px 0; }
    .ev-list-head h2 { font-size: 30px; }
    /* The last two tracks are fixed rather than auto so the column labels
       land over their own columns: auto would size the header to "Date"
       and the rows to "Sep 22-24 2026". */
    .ev-row { padding: 0 24px; grid-template-columns: 1.6fr 1fr 140px 44px; gap: 24px; }
    .ev-row-date, .ev-row-link { justify-self: end; }
    .ev-row-head span:nth-child(3), .ev-row-head span:nth-child(4) { justify-self: end; }
    .ev-cta { padding: 220px 32px; }
    .ev-mosaic { grid-template-rows: 90px 130px 1fr 120px 95px; }
  }

  @media (min-width: 1200px) {
    .ev-slide-copy { padding: 48px; }
    .ev-slide-main h2 { font-size: 56px; }
    /* Three columns of panel to seven of list, no gutter, so the panel's rules
       and the rows' land on the same column lines as the field behind them. */
    .ev-body { grid-template-columns: 3fr 7fr; }
    .ev-panel { position: sticky; }
    .ev-list { margin: 0 0 0 -1px; }
    .ev-cta { padding: 320px 48px; }
    .ev-mosaic { grid-template-rows: 105px 155px 1fr 140px 115px; }
  }

  /* The modules the page carried before it moved onto the canvas: the kicker
     over the headline, the hackathon split, the three steps, the photographs,
     and the head over the calendar. All of them are cells on the field, built
     from the canvas's own vocabulary rather than the old site's sections. */
  .ev-kicker { margin: 0; font-size: 13px; color: var(--cs-accent); }

  .ev-split { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
  .ev-split-copy { display: flex; flex-direction: column; gap: 12px; max-width: 46ch; }
  .ev-split-copy h2 {
    margin: 0;
    font-family: var(--cs-serif);
    font-weight: 400;
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-wrap: balance;
  }
  .ev-split-copy p:last-child { margin: 0; font-size: 16px; line-height: 1.7; color: var(--cs-ink-2); text-wrap: pretty; }
  .ev-split-media { border-radius: 8px; overflow: hidden; background: var(--lg-well); aspect-ratio: 16/10; transition: background-color 0.8s ease; }
  .ev-split-media video { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1); }

  .ev-steps { display: grid; grid-template-columns: 1fr; gap: 32px; }
  .ev-step h3 {
    margin: 0 0 12px;
    font-family: var(--cs-serif);
    font-weight: 400;
    font-size: 21px;
    line-height: 1.2;
    letter-spacing: -0.01em;
  }
  .ev-step p { margin: 0; max-width: 34ch; font-size: 15px; line-height: 1.5; color: var(--cs-muted); text-wrap: pretty; }

  /* The photographs keep the arrangement they had: one wide across the top,
     then four. Every well takes the shared radius and ground. */
  .ev-photo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .ev-photo-grid img {
    width: 100%;
    height: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
    border-radius: 8px;
    background: var(--lg-well);
    filter: grayscale(1);
  }
  .ev-photo-grid img.is-wide { grid-column: 1 / -1; aspect-ratio: 16/9; }
  .ev-more-link { margin: 28px 0 0; }

  .ev-listhead { display: flex; flex-direction: column; gap: 12px; }
  .ev-listhead h2 {
    margin: 0;
    font-family: var(--cs-serif);
    font-weight: 400;
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: -0.01em;
  }
  .ev-listhead p { margin: 0; max-width: 62ch; font-size: 16px; line-height: 1.65; color: var(--cs-muted); text-wrap: pretty; }

  /* The table's column labels, kept as the first of the shared-rule rows. */
  .ev-row-head { font-size: 13px; color: var(--cs-faint); }
  .ev-row-head span { font-family: var(--sans); }
  .ev-row-link { font-size: 14px; color: var(--cs-muted); transition: color 0.8s ease; }

  @media (min-width: 768px) {
    .ev-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
    .ev-steps { grid-template-columns: repeat(3, 1fr); gap: 40px; }
    .ev-photo-grid { grid-template-columns: repeat(4, 1fr); }
    .ev-photo-grid img.is-wide { grid-column: 1 / -1; aspect-ratio: 21/9; }
    .ev-split-copy h2, .ev-listhead h2 { font-size: 27px; }
    .ev-step h3 { font-size: 24px; }
  }

  @media (min-width: 1200px) {
    .ev-split { gap: 40px; }
    .ev-split-copy h2, .ev-listhead h2 { font-size: 30px; }
    .ev-step h3 { font-size: 27px; }
  }

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

  /* ==========================================================================
     /blog and /blog/<slug> — the Blog and Blog Post canvases, as shipped.

     Both artboards are drawn on the ground the Customer Stories canvases use,
     so these pages carry .cs-page for it: the palette tokens, the vermilion
     base sheet, the 1440/20-32-48 wrap, the squared solid button and the
     closing crossfade all come from there rather than being restated here.
     .bl-page adds only what the blog artboards draw and /customers does not.

     Same two deliberate substitutions as /customers: the serif is the site's
     Lora (--cs-serif), and the header and footer are the real ones from
     layout.njk, because an artboard has to draw its own and a page does not.

     Card geometry arrives as custom properties written per card — --gc-* (grid
     column), --ar-* (media ratio), --ts-* (title size), --gap, --show (inside
     the "Load more" cut) — with the m/t/d suffix picked up by the breakpoint
     that wants it. eleventy.config.js writes the unfiltered values from
     blog-layout.js; blog.js rewrites them from that same module per filter, so
     build time and run time cannot drift.
     ========================================================================== */

  /* ---- /blog: the index ---- */

  /* The artboard heads with the title and the standfirst side by side, and only
     at desktop: below 1200px the intro drops under the title, left aligned. */
.bl-head { padding: 160px var(--lg-gutter) 40px; display: flex; flex-direction: column; align-items: center; text-align: center; border-top: 1px solid var(--cs-rule); }
.bl-head h1 { margin: 0; max-width: 13ch; font-family: var(--cs-serif); font-weight: 400; font-size: clamp(44px, 5.4vw, 78px); line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; }
.bl-head p { margin: 24px 0 0; max-width: 52ch; font-size: 15px; line-height: 1.65; color: var(--cs-muted); text-wrap: pretty; }

  /* Category pills. Rounded here, unlike the squared chips on /customers: the
     two artboards genuinely draw them differently, so the blog keeps its own. */
  .bl-filters { padding: 48px var(--lg-gutter) 40px; display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 8px; overflow-x: auto; scrollbar-width: none; }
  .bl-filters::-webkit-scrollbar { display: none; }
  .bl-pill {
    padding: 7px 14px;
    /* The idle pill declares a transparent border so nothing shifts when the
       hover border and the active fill arrive. */
    border: 1px solid transparent;
    border-radius: 100px;
    background: var(--cs-ground);
    color: var(--cs-ink-2);
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }
  .bl-pill:hover { border-color: var(--cs-ink); }
  .bl-pill.is-active { background: var(--cs-ink); border-color: var(--cs-ink); color: var(--cs-ground); }

  /* The editorial rhythm, on a three-column grid: a full-width opener, a pair
     pushed to the right, then a full row of three, repeating every six. */
  .bl-grid { display: grid; grid-template-columns: 1fr; column-gap: 24px; row-gap: 80px; padding-top: 40px; padding-left: var(--lg-gutter); padding-right: var(--lg-gutter); border-top: 1px solid var(--cs-rule); }
  /* The artboard sets the card's own colour: without out-ranking the ground's
     "every link is vermilion" rule, the whole card — heading included — reads
     as a link. The CTA inside it keeps the vermilion. */
  .cs-page .bl-card { display: flex; flex-direction: column; gap: var(--gap); color: var(--cs-ink); }
  /* Held back only once the script is in: with no JS the whole grid renders. */
  .bl-grid.is-collapsed .bl-card { display: var(--show); }

  .bl-card-media { aspect-ratio: var(--ar-m); border-radius: 8px; overflow: hidden; background: #ededec; }
  .bl-card-media img, .bl-card-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Safari does not reliably clip a <video> to an ancestor's overflow:hidden
       plus border-radius once the element gets its own compositing layer, so
       the square corners bleed past the rounded card on real iOS devices even
       though every other browser clips it correctly. Rounding the video (and,
       for consistency, the image) directly closes that gap. */
    border-radius: inherit;
    transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1), filter 0.5s ease;
  }
  /* A clip on black keeps its own ground rather than the plate the stills fade
     in from, so the card does not flash grey before the first frame paints. */
  .bl-card-media:has(video), .bl-sim-media:has(video) { background: #000; }
  /* A post with no image of its own keeps the plate and names its category,
     which is what the old blog grid did and the artboard never had to. */
  .bl-wordmark { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-family: var(--cs-serif); font-size: 20px; color: var(--cs-faint); }
  .bl-card-body { display: flex; flex-direction: column; gap: 10px; }
  .bl-card h2 {
    margin: 0;
    font-family: var(--cs-serif);
    font-weight: 400;
    font-size: var(--ts-m);
    line-height: 1.18;
    letter-spacing: -0.01em;
    max-width: 30ch;
    text-wrap: balance;
  }
  .bl-card-meta { font-size: 12px; color: var(--cs-muted); }
  .bl-cta-row { margin-top: 24px; display: flex; }
  .bl-cta {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    font-size: 16px;
    line-height: 1.2;
    color: var(--cs-accent);
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.33, 1, 0.68, 1);
  }
  /* The rule under the CTA grows from nothing rather than blinking on. */
  .bl-cta-bar { height: 1px; background: var(--cs-accent); width: 0%; transition: width 0.45s cubic-bezier(0.33, 1, 0.68, 1); }

  /* "Load more" is the blog artboard's own button, not the /customers ghost:
     wider at its minimum, 14px/18px at weight 500, and it inverts to black on
     hover instead of fading. */
  .bl-more { padding: 80px var(--lg-gutter) 0; display: flex; justify-content: center; }
  .bl-page:not(.is-ready) .bl-more { display: none; }
  .bl-btn-ghost {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    min-width: 110px;
    height: 56px;
    padding: 18px 20px;
    border: 1px solid var(--cs-ink);
    border-radius: 0;
    background: var(--cs-ground);
    color: var(--cs-ink);
    font-family: var(--sans);
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease;
  }
  .bl-btn-ghost:hover { background: var(--cs-ink); color: var(--cs-ground); }

  /* The index artboard closes on a 140px gap and then the footer: no closing
     band, so unlike every other canvas page it never leaves its light ground. */
  .bl-tail { height: 140px; }

  /* /blog/category/<slug> heads with the trail and its own intro where the
     index has the pills, and holds the same gap before the grid. */
  .bl-cat-intro { padding: 24px 0 40px; display: flex; justify-content: center; }
  .bl-cat-intro p { margin: 0; max-width: 52ch; font-size: 14px; line-height: 1.6; color: var(--cs-muted); text-align: center; text-wrap: pretty; }

  /* ---- /blog/<slug>: the post ---- */

  .bl-post-head { padding: 56px 0 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; }
  /* On a phone the grid field only shows as a 20px strip either side of the
     column, with the column's own hairlines beside it, which reads as a stray
     border rather than the artboard's ruled ground. A post drops both below
     768px and runs on the plain ground; the grid returns once the margins are
     wide enough to read as a field. */
  @media (max-width: 767px) {
    .bl-post .lg-host.is-measured .lg-field { display: none; }
    .bl-post.lg-host [data-mask], .bl-post .lg-host [data-mask] { border-left-color: transparent; border-right-color: transparent; }
  }
  /* The trail reads as a hierarchy, the way a customer story's does: where the
     reader has been is muted, where they are is the vermilion. The artboard
     runs the whole line in vermilion, which flattens the two and makes /blog
     look like the page you are on. */
  .bl-crumbs { width: 100%; margin: 0; font-size: 13px; color: var(--cs-muted); text-wrap: pretty; }
  .bl-crumbs a { color: inherit; }
  .bl-crumbs a:hover { color: var(--cs-ink); }
  .bl-crumbs span { color: var(--cs-line); }
  .bl-crumbs em { font-style: normal; }
  .bl-crumbs .bl-here, .bl-crumbs .bl-here:hover { color: var(--cs-accent); }
  .bl-post-head h1 {
    margin: 0;
    max-width: 20ch;
    font-family: var(--cs-serif);
    font-weight: 400;
    font-size: clamp(34px, 4.4vw, 62px);
    line-height: 1.04;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }
  /* Author, date, reading time. The artboard sets a portrait beside the name;
     the site has photographs for a handful of its twenty-odd bylines, so the
     row carries the name alone rather than a face for some and a gap for the
     rest. The author's role keeps the muted colour of the line around it. */
  /* On a phone the row does not fit, and letting it wrap leaves a separator
     dangling at the end of a line. So it stacks: author, date and reading time
     each take their own line, and the separators go with the row they belonged
     to. It becomes the artboard's single centred line at 768px, where it fits
     with room to spare — it only ever wrapped below about 500px. */
  .bl-byline { margin: 0; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px; color: var(--cs-muted); }
  .bl-byline > span { white-space: nowrap; }
  .bl-byline .bl-who { white-space: normal; }
  .bl-byline .bl-author { color: var(--cs-ink); }
  .bl-byline .bl-sep { display: none; color: var(--cs-line); }

  /* A body figure's cell keeps a sliver of the block pad rather than the full
     one: with the prose cell's own pad stacked on top, the full token read as
     twice the gap everything else gets. */
  .lg-host [data-mask].bl-post-figure { padding-block: calc(var(--lg-block) / 4); }
  .bl-post-figure figure { margin: 0; }
  .bl-post-hero { padding: 72px 0 0; display: flex; justify-content: center; }
  .bl-post-hero > div { width: 100%; max-width: 1040px; aspect-ratio: 4/3; border-radius: 8px; overflow: hidden; background: #ededec; transition: background-color 0.8s ease; }
  .bl-post-hero img, .bl-post-hero video { width: 100%; height: 100%; object-fit: cover; display: block; }
  /* A hero clip on black keeps its own ground rather than sitting on the
     placeholder grey the still fades in from. */
  .bl-post-hero > div:has(video) { background: #000; }
  /* A cover shot portrait keeps its crop rather than being letterboxed into the
     artboard's wide slot, the same call .cs-story-hero makes for a portrait
     film. Its own ratio and measure, held to the centre. */
  .bl-post-hero.is-portrait > div { aspect-ratio: 3/4; max-width: 560px; }

  /* The measure. The artboard carries every word in a 620px column and lets
     figures break out of it to 900px.
     The article stays in normal block flow so its vertical margins collapse the
     way the artboard's stacked blocks read (a grid would add the paragraph's
     18px to the heading's 96px). Breakouts are sized against the wrap through
     a container query rather than the viewport, so a scrollbar cannot push one
     off the right edge. */
  .bl-article { container-type: inline-size; }
  /* The surrounding lg-pad-block cells already provide vertical spacing,
     including the grid's row alignment. Keep prose from adding a second gap. */
  .bl-prose { max-width: 620px; margin: 0 auto; padding: 0; }
  .bl-prose > :is(figure:not(.bl-quote):not(.bl-aside), table, .post-cards, .post-stats, .post-checklist, .schema-figure, .trace-figure, .video-embed),
  .bl-prose > p:has(> img:only-child) {
    /* 900px where the wrap can hold it, the wrap itself where it cannot. */
    width: min(900px, 100cqw);
    margin-inline: min(0px, calc((100% - min(900px, 100cqw)) / 2));
  }

  /* The measure's own top gap is the artboard's; whatever the post opens with
     does not add its own on top of it. */
  .bl-prose > :first-child { margin-top: 0; }
  /* 16px on mobile: the 620px measure is a cap, not the real column, and on a
     phone the actual line is closer to 330-350px. At 14px that line holds few
     enough words that the paragraph reads as choppy and cramped; 16px is also
     the general floor for comfortable mobile body copy. Wider viewports keep
     the smaller size below, where the fuller measure makes it read fine. */
  .bl-prose p { margin: 0 0 18px; font-size: 16px; line-height: 1.6; color: var(--cs-ink-2); text-wrap: pretty; }
  /* The standfirst: the artboard sets the opening paragraph heavier and larger
     than the body it introduces. Only the post's opening run (.is-open, set by
     post.njk on the first prose cell) carries it: a paragraph that merely
     starts a run after a figure is body text. */
  .bl-prose.is-open > p:first-child { font-weight: 500; font-size: 17px; line-height: 1.6; letter-spacing: -0.005em; color: var(--cs-ink); }
  .bl-prose h2 {
    margin: 56px 0 20px;
    max-width: 24ch;
    font-family: var(--cs-serif);
    font-weight: 400;
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--cs-ink);
    text-wrap: balance;
  }
  /* The artboard has no third level. This is the h2 stepped down into the
     body's own family, so a sub-head reads as one and not as a second h2. */
  .bl-prose h3 { margin: 32px 0 12px; font-family: var(--sans); font-weight: 500; font-size: 16px; line-height: 1.4; letter-spacing: -0.005em; color: var(--cs-ink); }
  .bl-prose ul, .bl-prose ol { margin: 0 0 18px; padding-left: 20px; font-size: 16px; line-height: 1.6; color: var(--cs-ink-2); }
  .bl-prose li { margin-bottom: 8px; text-wrap: pretty; }
  .bl-prose strong { font-weight: 500; color: var(--cs-ink); }
  .bl-prose a { color: var(--cs-accent); }
  .bl-prose hr { margin: 56px 0; border: 0; height: 1px; background: var(--cs-rule); }

  /* The ruled pull quote, the artboard's second quote style: an indent, a
     vermilion rule, and no quotation marks — the rule is the mark. Markdown
     gives the copy no way to ask for the other one (the marked quote that hangs
     its opening mark into the margin), and a quote must never carry both, so
     every `>` block renders ruled. */
  .bl-prose blockquote { margin: 56px 0 56px; padding: 28px 0 28px 28px; border-left: 1px solid var(--cs-accent); }
  .bl-prose blockquote p {
    margin: 0;
    font-family: var(--cs-serif);
    font-weight: 400;
    font-size: 26px;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--cs-ink);
    text-wrap: pretty;
  }
  .bl-prose .prose-cite { margin: -40px 0 56px 28px; padding: 0; border: 0; font-size: 13px; line-height: 1.5; color: var(--cs-muted); }

  /* Figures break the measure at the artboard's 900px. The still it draws is
     cropped to 16/9; a real screenshot is not, so an image keeps its own ratio
     rather than losing its edges to a crop the canvas only needed to size a
     placeholder. */
  .bl-prose img, .bl-prose video { width: 100%; height: auto; margin: 0; display: block; border-radius: 8px; background: #ededec; }
  .bl-prose > p:has(> img:only-child) { margin-block: 72px; }
  .bl-prose figure:not(.bl-quote) { margin-block: 72px; }
  .bl-prose > .video-embed { margin-block: 72px; }
  .bl-prose figcaption { margin-top: 12px; font-size: 12px; color: var(--cs-muted); }
  /* The marked pull quote: the artboard's other quote style, and the one a
     spoken quote gets (see postQuotes). The accent pair belongs to the
     template, the opening mark hangs clear of the measure on desktop, and the
     speaker sits under it — name on its own line, role and company below. */
  .bl-quote { margin: 64px 0; display: flex; flex-direction: column; gap: 20px; }
  .bl-quote p {
    position: relative;
    margin: 0;
    font-family: var(--cs-serif);
    font-weight: 400;
    font-size: 26px;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--cs-ink);
    text-wrap: pretty;
  }
  .bl-mark { color: var(--cs-accent); }
  .bl-quote figcaption { margin-top: 0; font-size: 13px; line-height: 1.5; color: var(--cs-muted); }
  .bl-quote figcaption span { display: block; font-weight: 500; color: var(--cs-ink); }

  /* The same marked quote with the speaker beside it. Stacked here, because a
     portrait squeezed into a phone's column crops to a sliver; it takes its own
     column once there is room for one (see the 1000px block below). */
  .bl-quote.has-portrait img {
    width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 8px; margin-bottom: 4px;
  }

  /* A face beside body copy rather than beside a pull quote. Same portrait and
     the same two columns as .bl-quote.has-portrait, and the words stay at
     reading size: a quote long enough to need three lines of display serif is
     better read than displayed. */
  .bl-aside { margin: 56px 0; display: flex; flex-direction: column; gap: 20px; }
  .bl-aside img {
    width: 200px; max-width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 8px;
  }
  .bl-aside p { margin: 0 0 18px; font-size: 14px; line-height: 1.7; color: var(--cs-ink-2); text-wrap: pretty; }
  .bl-aside p:last-of-type { margin-bottom: 12px; }
  .bl-aside figcaption { margin-top: 0; font-size: 13px; line-height: 1.5; color: var(--cs-muted); }
  .bl-aside figcaption span { display: block; font-weight: 500; color: var(--cs-ink); }

  .bl-prose table { border-collapse: collapse; margin-block: 40px; font-size: 13px; }
  .bl-prose th, .bl-prose td { border: 1px solid var(--cs-rule); padding: 10px 12px; text-align: left; vertical-align: top; color: var(--cs-ink-2); }
  .bl-prose th { font-weight: 500; background: none; color: var(--cs-ink); }

  /* The visual components posts already use — the card strip, the stat tiles,
     the numbered checklist, the schema and trace figures — are the site's, and
     are drawn in the site's cream tokens. Inside the canvas they take the
     canvas's ground, hairline and vermilion, so a post does not change palette
     halfway down. Only the colour and the corner change; the components
     themselves are untouched. */
  .bl-prose :is(.post-card, .schema-panel, .trace-panel) { background: var(--cs-ground); border-color: var(--cs-rule); border-radius: 8px; }
  .bl-prose :is(.post-card.accent, .schema-panel.accent, .trace-panel.accent) { border-color: var(--cs-accent); }
  .bl-prose :is(.post-card .post-card-verdict, .post-stat, .post-checklist, .post-checklist li,
                .post-checklist li::before, .schema-note, .trace-result, .trace-verdict,
                .trace-steps li::before) { border-color: var(--cs-rule); }
  .bl-prose :is(.post-card h3, .post-stat .num, .schema-label, .trace-name, .trace-sum,
                .trace-q, .trace-verdict, .post-checklist li strong, .schema-note strong) { color: var(--cs-ink); }
  .bl-prose :is(.post-kicker, .post-card .post-card-verdict, .post-stat p, .schema-note,
                .schema-figure figcaption, .trace-steps li, .trace-kicker, .trace-why) { color: var(--cs-muted); }
  .bl-prose :is(.post-card.accent .post-kicker, .post-card.accent .post-card-verdict,
                .post-checklist li::before, .schema-panel.accent .schema-label,
                .trace-panel.accent .trace-name, .trace-panel.accent .trace-sum,
                .trace-panel.accent .trace-steps li.hit) { color: var(--cs-accent); }

  .bl-share { margin: 40px auto 0; max-width: 620px; padding-top: 24px; border-top: 1px solid var(--cs-rule); display: flex; flex-wrap: wrap; gap: 24px; font-size: 13px; transition: border-color 0.8s ease; }
  .bl-share a { color: var(--cs-ink-2); }
  .bl-share a:hover { color: var(--cs-accent); }

  .bl-similar { padding: 96px 0 0; }
  .bl-similar h2 { margin: 0 0 28px; font-family: var(--cs-serif); font-weight: 400; font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -0.02em; color: var(--cs-ink); }
  .bl-similar-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
  .cs-page .bl-sim { display: flex; flex-direction: column; gap: 16px; color: var(--cs-ink); }
  .bl-sim-media { aspect-ratio: 4/3; border-radius: 8px; overflow: hidden; background: #ededec; transition: background-color 0.8s ease; }
  .bl-sim-media img, .bl-sim-media video { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1); }
  .bl-sim:hover :is(.bl-sim-media img, .bl-sim-media video) { transform: scale(1.02); }
  .bl-sim-body { display: flex; flex-direction: column; gap: 8px; }
  .bl-sim-title { font-size: 15px; line-height: 1.45; max-width: 34ch; text-wrap: pretty; }
  .bl-sim-date { font-size: 12px; color: var(--cs-muted); }

  /* The plates darken with the ground, the way /customers does it, so the
     closing band, the page and the footer read as one field. */
  .cs-page.is-dark .bl-card-media, .cs-page.is-dark .bl-post-hero > div,
  .cs-page.is-dark .bl-sim-media, .cs-page.is-dark .bl-prose img,
  .cs-page.is-dark .bl-prose video { background: #161615; }

  @media (min-width: 768px) {
    .bl-filters { padding: 80px 0 56px; flex-wrap: wrap; justify-content: center; overflow-x: visible; }
    .bl-cat-intro { padding: 24px 0 56px; }
    .bl-grid { grid-template-columns: repeat(2, 1fr); }
    .bl-card { grid-column: var(--gc-t); }
    .bl-card-media { aspect-ratio: var(--ar-t); }
    .bl-card h2 { font-size: var(--ts-t); }
    .bl-byline { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 16px; }
    .bl-byline .bl-sep { display: inline; }
    .bl-post-hero > div { aspect-ratio: 16/10; }
    /* The measure has room to breathe from here up, so body copy drops back to
       the artboard's 14px: the mobile bump above is for the narrow column. */
    .bl-prose p, .bl-prose ul, .bl-prose ol { font-size: 14px; line-height: 1.7; }
    .bl-prose h2 { margin-top: 72px; }
    .bl-prose h2 { font-size: 30px; }
    .bl-prose blockquote p { font-size: 32px; }
    /* The rule sits on the prose's left edge and the quote keeps to the
       measure, so it reads as part of the column rather than stepping out. */
    .bl-prose blockquote { margin: 72px 0; }
    .bl-quote { margin: 104px 0; padding-left: 40px; }
    .bl-quote p { font-size: 32px; }
    .bl-similar { padding-top: 136px; }
    .bl-similar-grid { grid-template-columns: repeat(2, 1fr); }
  }

  @media (min-width: 1000px) {
    .bl-quote.has-portrait {
      display: grid;
      grid-template-columns: 260px 1fr;
      align-items: center;
      column-gap: 48px;
      padding-left: 0;
      width: min(900px, 100cqw);
      margin-inline: min(0px, calc((100% - min(900px, 100cqw)) / 2));
    }
    .bl-quote.has-portrait img { grid-column: 1; grid-row: 1 / span 2; margin-bottom: 0; }
    .bl-quote.has-portrait p, .bl-quote.has-portrait figcaption { grid-column: 2; }
    /* The opening mark hangs into the margin on a full-measure quote. Beside a
       portrait there is no margin to hang into, so it stays in the column. */
    .bl-quote.has-portrait .bl-mark-open { position: static; }

    /* Two columns, the words in their own box so the portrait centres against
       the whole of them rather than against a grid row. */
    .bl-aside {
      flex-direction: row;
      align-items: center;
      gap: 48px;
      width: min(900px, 100cqw);
      margin-inline: min(0px, calc((100% - min(900px, 100cqw)) / 2));
    }
    .bl-aside img { flex: 0 0 260px; width: 260px; }
  }

  @media (min-width: 1200px) {
    /* Six columns, so the pair (three each) and the row of three (two each) both fill the width. Spans come from blog-layout.js. */
    .bl-grid { grid-template-columns: repeat(6, 1fr); padding-left: var(--lg-gutter); padding-right: var(--lg-gutter); }
    /* The filter row is the same fix as the grid below it: at this width the
       gutter had gone to zero and the pills sat flush on the rule. */
    .bl-filters { padding-left: var(--lg-gutter); padding-right: var(--lg-gutter); }
    .bl-card { grid-column: var(--gc-d); }
    .bl-card-media { aspect-ratio: var(--ar-d); }
    .bl-card h2 { font-size: var(--ts-d); }
    .bl-post-hero > div { aspect-ratio: 16/9; }
    .bl-prose h2 { margin-top: 96px; }
    .bl-prose blockquote { margin: 80px 0; }
    /* The quote runs wider than the measure and hangs its opening mark into
       the margin beside it, exactly as the artboard draws it. */
    .bl-quote { padding-left: 72px; width: calc(100% + 110px); }
    .bl-quote p { font-size: 40px; }
    .bl-quote .bl-mark-open { position: absolute; left: -28px; top: 0; }
    .bl-prose blockquote p { font-size: 40px; }
    .bl-similar { padding-top: 180px; }
    .bl-similar-grid { grid-template-columns: repeat(3, 1fr); }
  }

  /* The artboard greys every still and hides the CTA until the pointer is on
     the card. What decides that is whether there is a pointer, not how wide the
     window is: a laptop with its window pulled in narrow still hovers, and a
     phone at any width never will. So the grey and the reveal are asked for by
     capability. Without one the card shows as its own hover state, colour and
     CTA both, rather than staying grey with no way in — the call .cs-read
     already makes on /customers. */
  @media (hover: hover) and (pointer: fine) {
    .bl-card-media img, .bl-card-media video { filter: grayscale(1); }
    .bl-cta { opacity: 0; transform: translateY(6px); }
    .bl-card:hover :is(.bl-card-media img, .bl-card-media video), .bl-card:focus-visible :is(.bl-card-media img, .bl-card-media video) { filter: grayscale(0); }
    .bl-card:hover .bl-cta, .bl-card:focus-visible .bl-cta { opacity: 1; transform: translateY(0); }
    .bl-card:hover .bl-cta-bar, .bl-card:focus-visible .bl-cta-bar { width: 100%; }
  }

  /* The lift is the one part of the hover the artboard keeps for desktop: it
     suppresses the scale on anything narrower, pointer or not. */
  @media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
    .bl-card:hover :is(.bl-card-media img, .bl-card-media video), .bl-card:focus-visible :is(.bl-card-media img, .bl-card-media video) { transform: scale(1.02); }
  }

  @media (prefers-reduced-motion: reduce) {
    .bl-page, .bl-page * { transition: none !important; }
  }

/* --- /docs — the API documentation, built from src/_data/apiDocs.js ---------
   Sits on the site's own tokens: vermilion accent, warm cream, the hairline
   border. The only place it departs from the rest of the site is density —
   a reference page is scanned, not read, so the type is a step smaller and
   the rhythm tighter than .prose elsewhere.
   ------------------------------------------------------------------------- */

/* Slim bar under the site header */
.docs-bar { background: var(--ink); color: #fff; }
.docs-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.7rem 0; }
.docs-bar-title { margin: 0; font-weight: 600; font-size: 1rem; }
.docs-bar-title a { color: #fff; }
.docs-bar-version { margin-left: 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--muted-2); }
.docs-bar-menu {
  display: none; padding: 0.4rem 0.9rem; font: 600 0.85rem var(--sans); color: #fff;
  background: transparent; border: 1px solid rgba(255,255,255,0.3); border-radius: 999px; cursor: pointer;
}

/* Two-column page: navigation rail + content */
.docs-page { padding-top: 2.2rem; }
.docs-layout { display: grid; grid-template-columns: 16.5rem minmax(0, 1fr); gap: 2.8rem; align-items: start; }
.docs-main { min-width: 0; }
.docs-main h1 { font-family: var(--serif); font-size: clamp(1.9rem, 3vw, 2.4rem); margin: 0 0 0.6rem; color: var(--ink); }
.docs-crumbs { font-size: 0.85rem; color: var(--muted); margin: 0 0 0.7rem; }
.docs-crumbs a { color: var(--muted); }
.docs-crumbs a:hover { color: var(--lava); }
.docs-crumbs span { margin: 0 0.35rem; color: var(--muted-2); }
.docs-lede { color: var(--body); font-size: 1.05rem; line-height: 1.6; margin: 0 0 1.8rem; max-width: 44rem; }
.docs-lede code { background: #f5f1e8; border-radius: 4px; padding: 0.1em 0.35em; font-size: 0.9em; }

/* Navigation rail */
.docs-sidebar { position: sticky; top: 1.5rem; }
.docs-sidebar-inner { max-height: calc(100vh - 3rem); overflow-y: auto; padding-right: 0.6rem; }
.docs-side-search { position: relative; margin-bottom: 1.4rem; }
.docs-side-search input {
  width: 100%; padding: 0.6rem 0.8rem; font: 500 0.9rem var(--sans); color: var(--ink);
  background: #fff; border: 1px solid var(--border); border-radius: 8px; outline: none;
}
.docs-side-search input:focus { border-color: var(--lava); }
.docs-search-results {
  position: absolute; top: calc(100% + 0.4rem); left: 0; right: 0; z-index: 30;
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 18px 44px rgba(0,0,0,0.16); max-height: 24rem; overflow-y: auto;
}
.docs-search-results a { display: block; padding: 0.6rem 0.8rem; border-bottom: 1px solid #f1ece2; }
.docs-search-results a:last-child { border-bottom: none; }
.docs-search-results a:hover { background: var(--bg); }
.docs-search-title { display: block; font-weight: 600; font-size: 0.9rem; color: var(--ink); }
.docs-search-sub { display: block; font-size: 0.76rem; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.docs-search-empty { margin: 0; padding: 0.8rem; color: var(--muted); font-size: 0.9rem; }

.docs-side-title { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2); margin: 1.4rem 0 0.5rem; }
.docs-side-list { list-style: none; margin: 0; padding: 0; }
.docs-side-list a { display: block; padding: 0.28rem 0; font-size: 0.9rem; color: var(--body); }
.docs-side-list a:hover { color: var(--lava); }
.docs-side-list a.is-current { color: var(--lava); font-weight: 600; }
.docs-side-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; width: 100%;
  padding: 0.3rem 0; font: 600 0.9rem var(--sans); color: var(--ink);
  background: none; border: none; cursor: pointer; text-align: left;
}
.docs-side-toggle:hover { color: var(--lava); }
.docs-side-count { font-size: 0.75rem; font-weight: 500; color: var(--muted-2); }
.docs-side-endpoints { list-style: none; margin: 0 0 0.5rem; padding: 0 0 0 0.2rem; border-left: 1px solid var(--border); }
.docs-side-endpoints a { display: flex; align-items: baseline; gap: 0.45rem; padding: 0.24rem 0 0.24rem 0.7rem; font-size: 0.85rem; line-height: 1.35; }
/* Collapsed rails are the enhanced state: without docs.js every resource stays
   open, so the reader still gets the whole tree rather than 31 dead buttons. */
.docs-sidebar.is-live .docs-side-resource:not(.is-open) .docs-side-endpoints { display: none; }
.docs-sidebar:not(.is-live) .docs-side-toggle { cursor: default; }

/* Method badges */
.docs-method {
  display: inline-block; padding: 0.12rem 0.45rem; border-radius: 4px;
  font: 700 0.68rem/1.5 var(--sans); letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--pill-gray); color: var(--light-grey); white-space: nowrap;
}
.docs-side-method { min-width: 3.1rem; text-align: center; font-size: 0.6rem; padding: 0.1rem 0.3rem; }
.docs-method-get { background: #dfe7f1; color: #2a4f7c; }
.docs-method-post { background: #d8ecdf; color: #1d6b40; }
.docs-method-put, .docs-method-patch { background: #f6e6cf; color: #8a5a12; }
.docs-method-delete { background: #f7dcd4; color: #a33517; }
.docs-method-options, .docs-method-head { background: var(--pill-gray); color: var(--light-grey); }

/* Endpoint header */
.docs-endpoint-line { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; margin: 0 0 1.4rem; }
.docs-endpoint-path {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9rem;
  background: #f5f1e8; border: 1px solid var(--border); border-radius: 6px; padding: 0.3rem 0.6rem;
  overflow-wrap: anywhere; color: var(--ink);
}
.docs-deprecated-banner {
  margin: 0 0 1.2rem; padding: 0.7rem 0.9rem; border-left: 3px solid var(--lava);
  background: rgba(245,65,15,0.06); color: var(--body); font-size: 0.92rem;
}

/* Reference + code, side by side */
.docs-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); gap: 2.4rem; align-items: start; }
.docs-body > * { min-width: 0; max-width: 100%; }
.docs-code-sticky { position: sticky; top: 1.5rem; }
.docs-section { margin: 0 0 2.2rem; }
.docs-section h2 { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.8rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); }
.docs-note { color: var(--muted); font-size: 0.9rem; margin: 0 0 0.9rem; }
.docs-note code { background: #f5f1e8; border-radius: 4px; padding: 0.1em 0.35em; }
.docs-intro { max-width: none; margin-bottom: 2rem; }
.docs-intro p { margin: 0 0 0.8rem; }
.docs-auth-list { list-style: none; margin: 0; padding: 0; }
.docs-auth-list li { padding: 0.5rem 0; border-bottom: 1px solid var(--border); }
.docs-auth-list li:last-child { border-bottom: none; }
.docs-auth-label { font-weight: 600; font-size: 0.92rem; color: var(--ink); }

/* Field and parameter lists */
.docs-fields { list-style: none; margin: 0; padding: 0; }
.docs-field { padding: 0.65rem 0; border-bottom: 1px solid var(--border); }
.docs-field:last-child { border-bottom: none; }
.docs-fields-d0 > .docs-field:first-child { padding-top: 0; }
.docs-field-head { display: flex; align-items: baseline; gap: 0.55rem; flex-wrap: wrap; margin: 0; }
.docs-field-name { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.88rem; font-weight: 600; color: var(--ink); }
.docs-field-type { font-size: 0.78rem; color: var(--muted); }
.docs-field-req { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--lava); }
.docs-field-dep { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-2); }
.docs-field-desc { margin: 0.3rem 0 0; color: var(--body); font-size: 0.88rem; line-height: 1.55; }
.docs-field-desc p { margin: 0 0 0.4rem; }
.docs-field-desc p:last-child { margin-bottom: 0; }
.docs-field-desc ul { margin: 0.3rem 0; padding-left: 1.1rem; }
.docs-field-desc code { background: #f5f1e8; border-radius: 4px; padding: 0.05em 0.3em; font-size: 0.9em; }
.docs-field-enum { margin: 0.35rem 0 0; font-size: 0.8rem; color: var(--muted); }
.docs-field-enum span { margin-right: 0.3rem; }
.docs-field-enum code { background: #f5f1e8; border-radius: 4px; padding: 0.05em 0.3em; margin-right: 0.25rem; }
/* Nested objects step in behind a hairline rather than a deeper indent, so a
   five-level response body still fits the column. */
.docs-fields:not(.docs-fields-d0) { margin: 0.5rem 0 0; padding-left: 0.85rem; border-left: 1px solid var(--border); }
.docs-fields:not(.docs-fields-d0) .docs-field { padding: 0.45rem 0; }

/* Code panels */
.docs-code-group, .docs-code-block { position: relative; background: #171717; border-radius: 10px; overflow: hidden; margin: 0 0 1rem; }
.docs-tabs { display: flex; gap: 0; background: #0f0f0f; overflow-x: auto; }
.docs-tab {
  padding: 0.55rem 0.9rem; font: 600 0.78rem var(--sans); color: #9a9a9a;
  background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap;
}
.docs-tab:hover { color: #e8e8e8; }
.docs-tab.is-active { color: #fff; border-bottom-color: var(--lava); }
/* Panels only start hiding once docs.js has run; before that every language is
   on screen, which is the readable failure mode. */
.docs-code-group.is-live .docs-tab-panel { display: none; }
.docs-code-group.is-live .docs-tab-panel.is-active { display: block; }
.docs-code-group pre, .docs-code-block pre { margin: 0; padding: 1rem 1.1rem; overflow-x: auto; }
.docs-code-group code, .docs-code-block code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8rem; line-height: 1.6; color: #f2f2f2;
}
.docs-copy {
  position: absolute; top: 0.4rem; right: 0.5rem; z-index: 2;
  padding: 0.25rem 0.6rem; font: 600 0.72rem var(--sans); color: #cfcfcf;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16); border-radius: 6px; cursor: pointer;
}
.docs-copy:hover { color: #fff; background: rgba(255,255,255,0.16); }
.docs-tab-panel { position: relative; }
/* Inside a tab group the panel starts below the tab strip, so a button at the
   panel's top-right lands on the first line of code. Lift it into the strip,
   which has room to spare. */
.docs-code-group .docs-tab-panel .docs-copy { top: -2.05rem; }
/* And in a plain block, keep the code clear of the button rather than letting
   a long first line slide underneath it. */
.docs-code-block pre { padding-right: 4rem; }
.docs-code-caption { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 1.4rem 0 0.5rem; }
.docs-code-note { font-size: 0.78rem; color: var(--muted-2); margin: 0.4rem 0 0; line-height: 1.5; }

/* Guides */
.docs-guide-layout { display: grid; grid-template-columns: minmax(0, 1fr) 13rem; gap: 2.6rem; align-items: start; }
/* Both docs grids hold code blocks, and a <pre> with a long curl line in it
   will otherwise widen its own grid item well past its track — the prose ends
   up 1183px wide in a 594px column, running under the "On this page" rail and
   off the right of the viewport. min-width:0 alone does NOT stop it (measured:
   still 1183px); max-width:100% does, by clamping the item to its grid area
   whatever its contents contribute. Keep both. */
.docs-guide-layout > * { min-width: 0; max-width: 100%; }
/* Wide enough to fill the docs column (the site-wide .prose caps at 46rem),
   but never wider than it: "none" here loses to nothing and quietly beat the
   max-width:100% clamp above, since both selectors carry one class. */
.docs-prose { max-width: 100%; }
.docs-prose h2 { font-family: var(--serif); font-size: 1.5rem; margin: 2.2rem 0 0.8rem; scroll-margin-top: 90px; }
.docs-prose h3 { font-size: 1.05rem; font-weight: 600; margin: 1.6rem 0 0.5rem; scroll-margin-top: 90px; }
.docs-prose p, .docs-prose li { font-size: 0.95rem; }
.docs-prose code { background: #f5f1e8; border-radius: 4px; padding: 0.1em 0.35em; font-size: 0.9em; }
.docs-prose pre { background: #171717; color: #f2f2f2; border-radius: 10px; padding: 1rem 1.1rem; overflow-x: auto; margin: 1.2rem 0; }
.docs-prose pre code { background: none; padding: 0; font-size: 0.8rem; line-height: 1.6; }
/* A tab group inside prose: the panel already supplies the frame and the
   spacing, but `.docs-prose pre` above it matches the same element at the same
   specificity and comes later, so it wins and re-adds a 1.2rem margin — a gap
   between the tab strip and the code it belongs to. Put it back to zero. */
.docs-prose .docs-code-group pre { margin: 0; border-radius: 0; }
.docs-prose blockquote { margin: 1.4rem 0; padding: 0.2rem 0 0.2rem 1.1rem; border-left: 3px solid var(--lava); color: var(--body); }
.docs-prose blockquote p { font-family: var(--sans); font-size: 0.92rem; line-height: 1.6; }
.docs-prose table { font-size: 0.88rem; }
/* Links in docs copy. The site's base rule is `a { color: inherit; text-decoration:
   none }`, so without this a cross-reference in a guide or a field description
   renders as plain black text — the reader cannot tell it is a link at all. The
   heading anchor is an <a> too and stays muted. */
.docs-prose a:not(.heading-anchor),
.docs-field-desc a,
.docs-note a { color: var(--lava); text-decoration: underline; text-underline-offset: 0.15em; }
.docs-prose a:not(.heading-anchor):hover,
.docs-field-desc a:hover,
.docs-note a:hover { color: var(--lava-dark); }
.docs-prose .heading-anchor { opacity: 0; margin-right: 0.3rem; color: var(--muted-2); text-decoration: none; }
.docs-prose h2:hover .heading-anchor, .docs-prose h3:hover .heading-anchor { opacity: 1; }
.docs-prose .docs-code-group { margin: 1.2rem 0; }

/* On this page */
.docs-toc { position: sticky; top: 1.5rem; font-size: 0.85rem; }
.docs-toc h2 { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2); margin: 0 0 0.6rem; }
.docs-toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--border); }
.docs-toc li a { display: block; padding: 0.25rem 0 0.25rem 0.8rem; color: var(--muted); line-height: 1.4; }
.docs-toc li a:hover { color: var(--lava); }
.docs-toc-d3 a { padding-left: 1.5rem; font-size: 0.82rem; }

/* Endpoint lists on resource and reference pages */
.docs-endpoint-list { list-style: none; margin: 0 0 2rem; padding: 0; }
.docs-endpoint-list li { border-bottom: 1px solid var(--border); }
.docs-endpoint-list a { display: flex; align-items: baseline; gap: 0.8rem; padding: 0.7rem 0; flex-wrap: wrap; }
.docs-endpoint-list a:hover .docs-endpoint-list-title { color: var(--lava); }
.docs-endpoint-list-title { font-weight: 600; font-size: 0.95rem; color: var(--ink); }
.docs-endpoint-list-path { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.78rem; color: var(--muted); margin-left: auto; }
.docs-ref-resource { margin: 0 0 2.6rem; }
.docs-ref-resource h2 { font-family: var(--serif); font-size: 1.4rem; margin: 0 0 0.4rem; scroll-margin-top: 90px; }
.docs-ref-resource h2 a { color: var(--ink); }
.docs-ref-resource h2 a:hover { color: var(--lava); }

/* Prev/next */
.docs-pager { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid var(--border); }
.docs-pager-link { display: block; max-width: 46%; }
.docs-pager-next { text-align: right; margin-left: auto; }
.docs-pager-dir { display: block; font-size: 0.78rem; color: var(--muted); margin-bottom: 0.15rem; }
.docs-pager-title { display: block; font-weight: 600; font-size: 0.95rem; color: var(--ink); line-height: 1.35; }
.docs-pager-link:hover .docs-pager-title { color: var(--lava); }

@media (max-width: 1100px) {
  .docs-body { grid-template-columns: minmax(0, 1fr); }
  .docs-code-sticky { position: static; }
  .docs-guide-layout { grid-template-columns: minmax(0, 1fr); }
  .docs-toc { position: static; display: none; }
}

@media (max-width: 1000px) {
  /* The rail becomes an off-canvas drawer opened from the docs bar. It is
     still in the HTML in reading order, so with JS off it renders as a plain
     list above the content instead of a drawer that cannot be opened. */
  .docs-layout { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
  .docs-bar-menu { display: inline-block; }
  .docs-sidebar.is-live {
    position: fixed; inset: 0 auto 0 0; z-index: 60; width: min(20rem, 86vw);
    background: #fff; border-right: 1px solid var(--border); padding: 1.2rem 1rem;
    transform: translateX(-100%); transition: transform 0.2s ease; overflow: hidden;
  }
  .docs-nav-open .docs-sidebar.is-live { transform: translateX(0); box-shadow: 0 0 60px rgba(0,0,0,0.25); }
  .docs-sidebar.is-live .docs-sidebar-inner { max-height: 100%; height: 100%; }
}

@media (max-width: 620px) {
  .docs-endpoint-list-path { margin-left: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .docs-sidebar.is-live { transition: none !important; }
}

/* --- /docs: editorial annotations -------------------------------------------
   Notes from src/_data/apiDocs.content.json, marking behaviour the OpenAPI
   spec gets wrong or leaves out. Vermilion rule so they read as an aside from
   Light rather than as part of the generated reference around them.
   -------------------------------------------------------------------------- */
.docs-callout {
  margin: 0 0 2rem; padding: 0.9rem 1.1rem;
  background: rgba(245, 65, 15, 0.05); border-left: 3px solid var(--lava); border-radius: 0 8px 8px 0;
}
.docs-callout .docs-prose p { margin: 0 0 0.6rem; font-size: 0.92rem; }
.docs-callout .docs-prose p:last-child { margin-bottom: 0; }
.docs-callout code { background: rgba(0,0,0,0.05); }
.docs-field-note {
  margin: 0.4rem 0 0; padding: 0.4rem 0 0.4rem 0.7rem;
  border-left: 2px solid var(--lava); color: var(--body); font-size: 0.86rem; line-height: 1.55;
}
.docs-field-note p { margin: 0 0 0.35rem; }
.docs-field-note p:last-child { margin-bottom: 0; }
.docs-field-note code { background: #f5f1e8; border-radius: 4px; padding: 0.05em 0.3em; font-size: 0.92em; }

/* --- Cookie consent banner (HubSpot) --------------------------------------
   The banner itself is injected by HubSpot's tracking script and its copy is
   owned by the HubSpot portal (Settings > Privacy & Consent) - nothing in this
   repo renders it. Out of the box it lands as a full-width slab across the top
   of the page, in HubSpot's default blues, covering the nav and the hero.
   These rules pull it down to a small card in the lower-right corner and put
   it on the brand: cream surface, warm hairline, the site's own type.
   HubSpot writes inline styles onto every one of these elements, so each
   override needs !important to win.
   Accept and Decline are deliberately the same size, weight and shape: under
   GDPR refusing has to be as easy as accepting, so this is not the place for a
   loud primary next to a faint secondary. */
#hs-eu-cookie-confirmation,
#hs-eu-cookie-confirmation.hs-cookie-notification-position-top,
#hs-eu-cookie-confirmation.hs-cookie-notification-position-bottom {
  position: fixed !important;
  top: auto !important;
  bottom: 1.25rem !important;
  right: 1.25rem !important;
  left: auto !important;
  width: min(21.5rem, calc(100vw - 2.5rem)) !important;
  max-width: none !important;
  padding: 0 !important;
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  box-shadow: 0 14px 36px rgba(0,0,0,0.08) !important;
  font-family: var(--sans) !important;
  color: var(--body) !important;
  z-index: 1000 !important;
  animation: hs-cookie-in 0.28s ease-out both;
}
#hs-eu-cookie-confirmation-inner {
  max-width: none !important;
  padding: 1.05rem 1.1rem 1.1rem !important;
  margin: 0 !important;
  background: transparent !important;
}
#hs-eu-policy-wording {
  margin: 0 0 0.85rem !important;
  text-align: left !important;
}
#hs-eu-policy-wording p,
#hs-eu-policy-wording div {
  margin: 0 0 0.5rem !important;
  font-family: var(--sans) !important;
  font-size: 0.78rem !important;
  line-height: 1.5 !important;
  color: var(--body) !important;
}
#hs-eu-policy-wording p:last-child { margin-bottom: 0 !important; }
#hs-eu-policy-wording a {
  color: var(--lava) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}
/* HubSpot nests the buttons two deep, and the outer id really is "hs-en", not
   "hs-eu" - see its banner script. The settings link is emitted before the
   accept/decline pair, so the column reorders it underneath. The :has() clause
   is a fallback in case a future banner version moves the pair again. */
#hs-en-cookie-confirmation-buttons-area {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}
#hs-eu-cookie-confirmation-button-group,
#hs-eu-cookie-confirmation-inner div:has(> #hs-eu-confirmation-button) {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  order: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}
#hs-eu-confirmation-button,
#hs-eu-decline-button,
#hs-eu-cookie-settings-button {
  flex: 1 1 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0.5rem 0.9rem !important;
  border-radius: 999px !important;
  font-family: var(--sans) !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  text-transform: none !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background 0.15s ease, border-color 0.15s ease;
}
#hs-eu-confirmation-button {
  background: var(--lava) !important;
  border: 1px solid var(--lava) !important;
  color: #fff !important;
}
#hs-eu-confirmation-button:hover {
  background: var(--lava-dark) !important;
  border-color: var(--lava-dark) !important;
}
#hs-eu-decline-button {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  color: var(--ink) !important;
}
#hs-eu-decline-button:hover { background: #ffe2d5 !important; }
/* Third button when cookie categories are on: a quiet full-width row under the
   other two, since it opens a panel rather than answering the question. */
#hs-eu-cookie-settings-button {
  order: 2 !important;
  flex: 0 0 auto !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--muted) !important;
  font-size: 0.75rem !important;
}
#hs-eu-cookie-settings-button:hover { color: var(--ink) !important; }
/* The x, when HubSpot's "show close button" option is on: top-right of the
   card, out of the copy's way. */
#hs-eu-close-button-container {
  position: absolute !important;
  top: 0.35rem !important;
  right: 0.5rem !important;
  margin: 0 !important;
  padding: 0 !important;
}
#hs-eu-close-button {
  display: block !important;
  padding: 0.2rem 0.35rem !important;
  color: var(--muted-2) !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  text-decoration: none !important;
}
#hs-eu-close-button:hover { color: var(--ink) !important; }
@keyframes hs-cookie-in {
  from { opacity: 0; transform: translateY(0.75rem); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 600px) {
  #hs-eu-cookie-confirmation,
  #hs-eu-cookie-confirmation.hs-cookie-notification-position-top,
  #hs-eu-cookie-confirmation.hs-cookie-notification-position-bottom {
    right: 0.75rem !important;
    left: 0.75rem !important;
    bottom: 0.75rem !important;
    width: auto !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  #hs-eu-cookie-confirmation { animation: none; }
}

  /* ==========================================================================
     /manifesto — the Manifesto canvas, recreated from Manifesto.dc.html.

     Sits on the ground the other canvases do: .cs-page carries the palette,
     the base sheet and the hairline field, and every section is one
     [data-mask] cell on the 80px row rhythm. What is particular to this page
     is that a cell is a whole SECTION — the heading and every paragraph under
     it are one module, not a heading cell above a prose cell — and that the
     chart is the single figure with a cell of its own.

     Every value here is the artboard's. Its vals() computes them from the
     viewport width; they are real media queries at 768px and 1200px instead,
     and there is no resize listener.

     Both set pieces rest in their FINISHED state, painted here, so the page is
     complete with manifesto.js blocked and under prefers-reduced-motion. The
     script sets the start state itself before it animates forward.
     ========================================================================== */
  .mf-page {
    /* leadPad, and the sign-off's own three. The rest of the scale is the
       shared --lg-* set the other canvases use. */
    --mf-lead: 32px;
    --mf-sign-gap: 32px;
    --mf-sign-size: 24px;
    --mf-portrait: 4 / 5;
  }
  .lg-host [data-mask].lg-pad-lead { padding: var(--mf-lead) var(--lg-gutter); }

  /* ---- Head ------------------------------------------------------------- */
  .mf-head { display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
  .mf-crumbs { margin: 0; font-size: 14px; color: var(--cs-muted); text-wrap: pretty; }
  .mf-crumbs span { color: var(--cs-line); }
  .mf-crumbs em { font-style: normal; color: var(--cs-accent); }
  .mf-head h1 {
    margin: 0;
    max-width: 18ch;
    font-family: var(--cs-serif);
    font-weight: 400;
    font-size: clamp(34px, 4.6vw, 64px);
    line-height: 1.04;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }

  /* ---- Prose ------------------------------------------------------------
     Every prose cell is one centred column at the 616px measure. The artboard
     sets the run of paragraphs on 18px, and opens the lead cell on 48px. */
  .mf-lede, .mf-sec { display: flex; justify-content: center; }
  .mf-lede-line {
    margin: 0 0 48px;
    font-weight: 500;
    font-size: 17px;
    line-height: 1.6;
    letter-spacing: -0.005em;
    text-wrap: pretty;
  }
  .mf-lede p, .mf-sec p {
    margin: 0 0 18px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--cs-ink);
    transition: color 0.8s ease;
    text-wrap: pretty;
  }
  .mf-lede p:last-child, .mf-sec p:last-child { margin-bottom: 0; }
  .mf-sec p strong { font-weight: 500; color: var(--cs-ink); }
  .mf-sec p em { font-style: italic; }
  .mf-sec h2 {
    margin: 0 0 20px;
    max-width: 24ch;
    font-family: var(--cs-serif);
    font-weight: 400;
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-wrap: balance;
  }

  /* ---- The chart --------------------------------------------------------
     Inline SVG, not the manifesto-chart.png asset. The bands are the accent at
     a tenth strength and the axis draws in the page ink, so both follow the
     ground when the closing band turns the page over. */
  .mf-chart { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
  .mf-chart-box { width: 100%; max-width: 1240px; }
  .mf-chart-plate { padding: 24px 0 8px; border-radius: 8px; overflow: hidden; }
  .mf-chart-svg {
    display: block;
    width: 100%;
    height: auto;
    color: var(--cs-ink);
    transition: color 0.8s ease;
  }
  /* The two groups the script fades, at rest. */
  .mf-chart-svg [data-anim-bands], .mf-chart-svg [data-anim-axis] { opacity: 1; }
  .mf-chart-line { stroke-dashoffset: 0; }
  .mf-chart figcaption {
    margin: 12px 0 0;
    font-size: 12px;
    color: var(--cs-muted);
    transition: color 0.8s ease;
    text-wrap: pretty;
  }

  /* ---- The sign-off ------------------------------------------------------
     Portrait left, the closing statement and the mark right. */
  .mf-sign { display: grid; grid-template-columns: 1fr; align-items: center; gap: var(--mf-sign-gap); }
  .mf-sign-portrait { aspect-ratio: var(--mf-portrait); border-radius: 8px; overflow: hidden; }
  .mf-sign-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1); }
  .mf-sign-copy { display: flex; flex-direction: column; gap: 40px; }
  .mf-sign-line {
    margin: 0;
    max-width: 22ch;
    font-family: var(--cs-serif);
    font-weight: 400;
    font-size: var(--mf-sign-size);
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-wrap: pretty;
  }
  .mf-sign-mark { display: flex; flex-direction: column; gap: 16px; }
  .mf-sig { display: block; width: 190px; height: auto; overflow: visible; }
  /* The sweep's rest state is the whole mark uncovered: the band is 1201 wide
     and starts one width to the left, so a full travel of 1221 clears it. */
  .mf-sig-sweep { transform: translateX(1221px); }
  .mf-sign-caption { margin: 0; font-size: 13px; line-height: 1.5; color: var(--cs-muted); transition: color 0.8s ease; }

  /* ---- The closing band -------------------------------------------------- */
  .mf-cta { display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
  /* The closing cell is a mask like every other, so it keeps the ground the
     mask rule gives it. .cs-cta sets `background: transparent` for the other
     canvases, where it is a plain section with the field nowhere near it; here
     that would let the hairlines run straight through the copy. Padding is the
     only thing this needs from it. */
  .mf-page .cs-cta { padding: var(--lg-cta) var(--lg-gutter); background: var(--cs-ground); }
  .mf-cta h2 {
    margin: 0;
    max-width: 14ch;
    font-family: var(--cs-serif);
    font-weight: 400;
    font-size: clamp(38px, 7vw, 96px);
    line-height: 0.98;
    letter-spacing: -0.02em;
    color: inherit;
    text-wrap: balance;
  }
  .mf-cta .cs-btn-solid {
    margin-top: 40px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 110px;
    height: 54px;
    padding: 18px 20px;
    gap: 10px;
    border-radius: 0;
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    white-space: nowrap;
  }
  .mf-cta .cs-btn-solid:hover { background: var(--cs-accent); color: #ffffff; opacity: 1; }
  .cs-page.is-dark .mf-cta .cs-btn-solid { background: #ffffff; color: #000000; }
  .cs-page.is-dark .mf-cta .cs-btn-solid:hover { background: var(--cs-accent); color: #ffffff; }

  /* The artboard's vals(), as real queries. */
  @media (min-width: 768px) {
    .mf-page {
      --mf-lead: 40px;
      --mf-sign-gap: 40px;
      --mf-sign-size: 27px;
      --mf-portrait: 3 / 4;
    }
    .mf-sec h2 { font-size: 27px; }
    .mf-sign { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  }
  @media (min-width: 1200px) {
    .mf-page {
      --mf-lead: 48px;
      --mf-sign-gap: 64px;
      --mf-sign-size: 32px;
    }
    .mf-sec h2 { font-size: 30px; }
  }

  /* Reduced motion: both set pieces are already in their finished state above,
     and manifesto.js checks before it touches either, so nothing is animated
     and nothing is left hidden. */
  @media (prefers-reduced-motion: reduce) {
    .mf-chart-line { stroke-dashoffset: 0; }
    .mf-sig-sweep { transform: translateX(1221px); }
  }

/* Versus hero: clear heading, short introduction and four secondary-brand cards. */
.versus-hero-v2 { text-align:left; padding:2.75rem 0 2.75rem; }
.versus-hero-v2::before { background:linear-gradient(180deg, rgba(8,8,8,.74) 0%, rgba(8,8,8,.88) 100%); }
.versus-hero-v2 .pill-tag { margin-bottom:1.25rem; }
.versus-hero-v2 h1 { font-size:clamp(2.6rem, 5.2vw, 4.25rem); line-height:1.06; margin:0 0 1rem; max-width:14em; }
.versus-hero-v2 p.sub { margin:0 0 1.75rem; max-width:44rem; font-size:1.125rem; line-height:1.5; }
.versus-hero-v2 .btn-lava { font-size:1.05rem; padding:1rem 2.4rem; }
.vh2-stats { list-style:none; margin:2.5rem 0 0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.vh2-stat { position:relative; margin:0; padding:1.35rem 1.4rem 1.35rem 1.7rem; border:1px solid rgba(255,255,255,.16); border-radius:12px; background:rgba(255,255,255,.06); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.vh2-stat::before { content:''; position:absolute; left:0; top:1.25rem; bottom:1.25rem; width:3px; border-radius:2px; background:var(--lava); }
.vh2-num { display:block; font-family:var(--serif); font-size:clamp(1.7rem, 2.3vw, 2.25rem); line-height:1.1; color:#fff; letter-spacing:-0.01em; font-variant-numeric:tabular-nums; }
.vh2-stat p { margin:.5rem 0 0; font-size:.95rem; line-height:1.45; color:rgba(255,255,255,.78); text-wrap:pretty; }
/* Flat secondary-brand surfaces shared by every comparison page. */
.vh2-stats-secondary .vh2-stat { min-width:0; padding:1.35rem 1.4rem; border:0; background:var(--off-yellow); backdrop-filter:none; -webkit-backdrop-filter:none; }
.vh2-stats-secondary .vh2-stat::before { content:none; }
.vh2-stats-secondary .vh2-num { color:var(--ink); }
.vh2-stats-secondary .vh2-stat p { color:var(--body); }
/* Long editorial titles and long translated figures step down a size so the boxes stay on the first screen. */
.versus-hero-v2 h1.vh2-long { font-size:clamp(2.1rem, 3.4vw, 3rem); line-height:1.1; max-width:18em; }
.vh2-num.vh2-num-long { font-size:clamp(1.35rem, 1.75vw, 1.7rem); text-wrap:balance; }
.versus-intro { max-width:46rem; margin:0 auto 1.5rem; font-size:1.05rem; line-height:1.55; color:var(--body); text-wrap:pretty; }
@media (max-width:1080px){ .vh2-stats { grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){
  .versus-hero-v2 { padding:2.25rem 0 2rem; }
  .versus-hero-v2 h1 { font-size:2.5rem; }
  .versus-hero-v2 p.sub { font-size:1.05rem; margin-bottom:1.5rem; }
  .vh2-stats { gap:.6rem; margin-top:2rem; }
  .vh2-stat { padding:1rem .9rem 1rem 1.15rem; border-radius:10px; }
  .vh2-stats-secondary .vh2-stat { padding:1rem .9rem; }
  .vh2-stats-secondary .vh2-num-long { font-size:1.1rem; }
  .vh2-num { font-size:1.45rem; }
  .vh2-stat p { font-size:.82rem; margin-top:.35rem; }
}
@media (max-width:379px){ .vh2-stats-secondary { grid-template-columns:1fr; } }