/* --- Mobile / in-app browser hardening (site-wide) --- */
  html {
    /* Stop iOS Safari and Android in-app browsers (LINE, Instagram, Facebook)
       from inflating font sizes on their own. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  a, button {
    /* Subtle brand-tinted tap flash instead of the default grey block. */
    -webkit-tap-highlight-color: rgba(91, 79, 224, 0.15);
  }

  :root {
    --ink: #272A42;
    --ink-soft: #333756;
    --paper: #FFFFFF;
    --paper-dim: #F3F1FB;
    --signal: #5B4FE0;
    --signal-bright: #A79CFF;
    --line: #3D4166;
    --line-soft: #E8E5F9;
    --muted: #6B7089;
    --muted-on-ink: #ADB2D6;
    --status-live: #5B4FE0;

    --space-1: clamp(0.5rem, 0.4rem + 0.4vw, 0.75rem);
    --space-2: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
    --space-3: clamp(1.5rem, 1.2rem + 1.2vw, 2.5rem);
    --space-4: clamp(2.5rem, 2rem + 2vw, 4.5rem);
    --space-5: clamp(4rem, 3rem + 4vw, 8rem);

    --container: 1240px;
    --gutter: clamp(1rem, 0.6rem + 3vw, 2.5rem);
    --header-height: 70px;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  html { scroll-behavior: smooth; }

  main > section {
    min-height: calc(100svh - var(--header-height));
    height: auto;
    scroll-margin-top: var(--header-height);
    position: relative;
    overflow: visible;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* Content-heavy sections align to the top and grow naturally instead of centering */
  main > section#services,
  main > section#track-record,
  main > section#who-for,
  main > section.why-section,
  main > section#about,
  main > section#insights,
  main > section#contact {
    justify-content: flex-start;
    padding-top: var(--space-4);
  }

  /* Landing sections size to their content (NOT a forced full viewport) and
     top-align, so a light section like "how it works" doesn't become a
     half-empty full-screen block and the footer connects to the content
     above it. Their own padding (in signal.css) sets the vertical rhythm. */
  main > section.signal-hero,
  main > section.pricing-section,
  main > section.how-it-works {
    min-height: 0;
    justify-content: flex-start;
  }

  /* ---- Landing spacing scale (8pt-based section rhythm + one page grid) ---- */
  :root {
    --landing-max: 1080px;      /* single content width for hero/pricing/enterprise/methodology */
    --sec-pad: clamp(56px, 4vw + 40px, 88px);  /* consistent section vertical padding */
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
  }

  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  body {
    background: var(--paper);
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
    font-size: clamp(15px, 14.3px + 0.25vw, 16.5px);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  .wrap {
    width: min(100% - (var(--gutter) * 2), var(--container));
    margin-inline: auto;
    padding-inline: 0;
  }

  img, svg, video, canvas {
    display: block;
    max-width: 100%;
    height: auto;
  }

  button, input, select, textarea {
    max-width: 100%;
    font: inherit;
  }

  h1, h2, h3, p, li, span, a, div {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  a { color: inherit; }

  .display {
    font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
    font-weight: 900;
    letter-spacing: -0.015em;
    line-height: 0.98;
  }

  .mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  }

  .eyebrow {
    font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--signal);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: var(--space-2);
  }

  .eyebrow::before {
    content: '';
    width: 22px;
    height: 1px;
    background: var(--signal);
    display: inline-block;
  }

  h1, h2, h3 { font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; }

  ::selection { background: var(--signal); color: var(--paper); }

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

  .hero :focus-visible,
  .why-section :focus-visible,
  .contact-section :focus-visible {
    outline-color: var(--signal-bright);
  }

  /* A fixed paper-grain overlay, multiply-blended across the whole viewport.
     At z-index 9999 it sat on top of everything including the sticky nav, so
     the bar was never actually pure white: it was white multiplied by noise.
     Dropped to 300, which is above page content (main and footer are at 0) and
     below the header at 400, the CTA at 900 and modals at 1000. The texture
     still lands on the page; the chrome is left alone. */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 300;
    pointer-events: none;
    opacity: 0.035;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }

  [data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    [data-reveal] { opacity: 1; transform: none; transition: none; }
  }

  /* Solid at every width, not just on a phone. The mobile-only override was
     scoped to max-width:767px, which a phone in landscape and any tablet sail
     straight past: an iPhone 14 Pro Max held sideways is 932px and was still
     being served this frosted rule. Since the whole point was no blur and no
     transparency, the base rule is the right place for it. */
  /* Page content is confined to one stacking context, sitting at z-index 0,
     strictly below the header's 400. This is the structural version of a fix I
     have now attempted three times element by element: it does not matter which
     descendant of main gets a compositor layer, or which browser mis-orders
     layers against a sticky element, because nothing inside a stacking context
     can paint outside it. .pricing-badge hangs 13px above its card's top edge
     and was landing on the nav; now it cannot, and neither can anything else.
     Every modal, the consent bar and the sticky CTA are siblings of main rather
     than descendants, so none of them are trapped by this. */
  main, footer {
    position: relative;
    z-index: 0;
    isolation: isolate;
  }

  header.site-header {
    position: sticky;
    top: 0;
    /* Above every layer the page content can create. The bar was z-index 100
       and losing to .pricing-card, which runs a scroll-linked transform
       animation and is therefore composited: on iOS Safari a GPU layer can
       paint over a non-promoted sticky element regardless of z-index, which is
       why the "No subscription required" badge appeared on top of the nav and
       read as the bar being see-through. Modals are raised above this. */
    z-index: 400;
    /* No translateZ(0) here. Promoting the bar did win the z-order fight, but a
       composited layer rasterises its text at a fixed resolution, so the nav's
       type went soft. Trading a stacking bug for blurry text is not a fix. The
       overlap is solved at the other end instead: the card that was jumping the
       bar no longer gets a layer at all. */
    background: #fff;
    border-bottom: 1px solid var(--line-soft);
  }

  nav.site-nav {
    max-width: var(--container);
    margin: 0 auto;
    padding: 16px var(--gutter);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    gap: var(--space-2);
  }

  .brand {
    font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
    font-weight: 900;
    font-size: clamp(14px, 13px + 0.6vw, 17px);
    text-decoration: none;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
  }

  .brand-logo {
    height: clamp(28px, 26px + 1vw, 36px);
    width: auto;
  }

  .brand .brand-dot { color: var(--signal); }

  .nav-links {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }

  @media (min-width: 861px) and (max-width: 1439px) {
    .nav-links {
      gap: clamp(12px, 1vw, 24px);
    }
    .nav-links a:not(.nav-cta) {
      font-size: 11.5px;
    }
    .nav-cta {
      padding: 9px 14px;
      font-size: 11.5px;
    }
  }

  .nav-links a:not(.nav-cta) {
    font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
    font-size: 12.5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--muted);
    transition: color 0.15s ease;
  }

  .nav-links a:not(.nav-cta):hover { color: var(--ink); }

  .nav-cta {
    background: var(--signal);
    color: var(--paper);
    padding: 10px 18px;
    font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: background 0.15s ease;
  }

  .nav-cta:hover { background: #4840c9; }

  /* Categorized nav dropdowns */
  .nav-dd { position: relative; }
  .nav-dd-t { background:none; border:0; cursor:pointer; font-family:-apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-size:12.5px; letter-spacing:0.04em; text-transform:uppercase; color:var(--muted); padding:0; display:inline-flex; align-items:center; gap:5px; transition:color .15s ease; }
  .nav-dd-t:hover, .nav-dd:hover .nav-dd-t, .nav-dd.open .nav-dd-t { color:var(--ink); }
  .nav-dd-t .caret { font-size:9px; opacity:.7; }
  .nav-dd-m { position:absolute; top:100%; left:50%; transform:translateX(-50%); margin-top:12px; min-width:240px; background:#fff; border:1px solid var(--line-soft,#E8E5F9); border-radius:12px; box-shadow:0 16px 44px rgba(21,19,42,0.15); padding:7px; display:none; z-index:200; }
  .nav-dd-m::before { content:""; position:absolute; top:-12px; left:0; right:0; height:12px; }
  .nav-dd:hover .nav-dd-m, .nav-dd.open .nav-dd-m { display:block; }
  .nav-dd-m a { display:block; padding:9px 12px; border-radius:8px; font-family:-apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-size:11.5px; letter-spacing:0.02em; text-transform:none; color:var(--ink,#272A42); text-decoration:none; white-space:nowrap; }
  .nav-dd-m a:hover { background:#faf9fe; color:var(--signal,#5B4FE0); }
  .nav-dd-m a small { display:block; font-family:-apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-size:11px; color:var(--muted); text-transform:none; letter-spacing:0; margin-top:1px; }
  @media (max-width: 860px) {
    /* Accordion: sections collapsed by default, tap a header to expand. The
       shared .nav-dd.open rule + the existing click JS handle the toggling;
       previously mobile forced every section open (pointer-events:none on the
       header), which made the menu three screens tall. */
    .nav-dd-m { position:static; transform:none; box-shadow:none; border:0; margin-top:0; padding:2px 0 8px 14px; min-width:0; }
    .nav-dd:not(.open) .nav-dd-m { display:none; }
    .nav-dd-m::before { display:none; }
    .nav-dd-t {
      color:var(--ink); font-weight:700; width:100%; justify-content:space-between;
      padding:13px 0; min-height:44px; border-bottom:1px solid var(--line-soft);
    }
    .nav-dd.open .nav-dd-t { color:var(--signal); }
    .nav-dd-t .caret { display:inline-block; transition:transform .15s ease; }
    .nav-dd.open .nav-dd-t .caret { transform:rotate(180deg); }
  }

  /* Linear progress bar for the wizard loading states (replaces the spinner). */
  .otw-pbar { flex: 1; height: 6px; background: var(--line-soft, #E8E5F9); border-radius: 99px; overflow: hidden; margin-left: 8px; min-width: 60px; }
  .otw-pbar > i { display: block; height: 100%; width: 0; background: var(--signal, #5B4FE0); border-radius: 99px; }

  .nav-links { order: 1; }

  .nav-persistent {
    order: 2;
    margin-left: 16px;
    display: flex;
    align-items: center;
    gap: 18px;
  }

  .nav-phone {
    font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s ease;
  }

  .nav-phone:hover { color: var(--signal); }

  .menu-toggle { order: 3; }

  @media (max-width: 860px) {
    nav.site-nav { flex-wrap: nowrap; }
    .nav-persistent {
      margin-left: auto;
      gap: 10px;
    }
    .nav-phone { font-size: 10.5px; }
    .nav-cta-persistent {
      padding: 9px 13px;
      font-size: 11px;
      white-space: nowrap;
    }
  }

  @media (max-width: 480px) {
    .nav-phone { font-size: 9.5px; }
    .nav-cta-persistent { padding: 8px 10px; font-size: 10px; }
  }

  @media (max-width: 400px) {
    .nav-persistent { gap: 6px; }
    .nav-phone { font-size: 8.5px; }
    .nav-cta-persistent { padding: 7px 8px; font-size: 9px; }
  }

  .menu-toggle {
    display: none;
    background: none;
    border: 1px solid var(--line);
    padding: 11px 16px;
    min-height: 44px;
    font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
    font-size: 12px;
    cursor: pointer;
  }

  @media (max-width: 860px) {
    .nav-links { display: none; }
    .nav-links.is-open {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 2px;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: var(--paper);
      border-bottom: 1px solid var(--line-soft);
      padding: var(--space-2) var(--gutter);
      max-height: calc(100vh - 60px);
      /* svh: in-app browsers (LINE, Instagram) overlay their URL bar over vh */
      max-height: calc(100svh - 60px);
      overflow-y: auto;
    }
    .nav-links.is-open a:not(.nav-cta) {
      padding: 13px 0;
      border-bottom: 1px solid var(--line-soft);
      width: 100%;
    }
    .nav-links.is-open .nav-cta {
      display: block;
      margin-top: 10px;
      text-align: center;
      min-height: 44px;
      line-height: 22px;
    }
    .menu-toggle { display: block; }
  }

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    padding: clamp(13px, 12px + 0.4vw, 15px) clamp(18px, 14px + 2vw, 26px);
    border: 1px solid transparent;
    cursor: pointer;
    max-width: 100%;
    min-height: 44px;
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  }

  .btn-primary {
    background: var(--signal-bright);
    color: var(--ink);
  }

  .btn-primary:hover { background: var(--paper); color: var(--ink); }

  .btn-outline {
    border-color: var(--line);
    color: var(--ink);
    background: transparent;
  }

  .btn-outline:hover { border-color: var(--ink); }

  .btn-outline.on-ink {
    border-color: var(--muted-on-ink);
    color: var(--paper);
  }

  .btn-outline.on-ink:hover { border-color: var(--paper); }

  .hero {
    background: var(--ink);
    color: var(--paper);
    padding: clamp(2.5rem, 4svh, 5rem) 0 clamp(2rem, 3svh, 3.5rem);
    position: relative;
    overflow: visible;
  }

  .hero .eyebrow { color: var(--signal-bright); }
  .hero .eyebrow::before { background: var(--signal-bright); }

  .hero-grid {
    display: grid;
    grid-template-columns: 1.25fr 0.9fr;
    gap: var(--space-4);
    align-items: end;
  }

  .hero-grid > * { min-width: 0; }

  @media (max-width: 1023px) {
    .hero-grid { grid-template-columns: 1fr; }
  }

  @media (min-width: 1024px) and (max-width: 1439px) {
    .hero-grid { grid-template-columns: 1.15fr 0.85fr; gap: var(--space-3); }
  }

  .hero h1 {
    font-size: clamp(2.1rem, 1.6rem + 2.6vw, 4.25rem);
    color: var(--paper);
    margin: var(--space-2) 0 var(--space-3);
    line-height: 1.05;
  }

  .hero h1 .accent { color: var(--signal-bright); }

  .hero .sub {
    font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
    color: var(--muted-on-ink);
    max-width: 520px;
    margin-bottom: var(--space-3);
    line-height: 1.6;
  }

  .hero-ctas {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
  }

  .brief-terminal {
    background: var(--ink-soft);
    border: 1px solid var(--line);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  }

  .brief-terminal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
  }

  .brief-terminal-head .brief-label {
    font-size: 11.5px;
    letter-spacing: 0.1em;
    color: var(--muted-on-ink);
  }

  .live-dot {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    letter-spacing: 0.08em;
    /* The badge only ever appears inside the dark terminal panel, where the
       brand purple lands at 2:1. The lighter accent is the on-dark variant. */
    color: var(--signal-bright);
  }

  .live-dot::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--status-live);
    animation: pulseDot 1.8s ease-in-out infinite;
  }

  @keyframes pulseDot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
  }

  .brief-terminal-body {
    padding: 20px;
  }

  .brief-line {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 0;
    border-bottom: 1px dashed var(--line);
    font-size: clamp(12.5px, 12px + 0.2vw, 13.5px);
  }

  @media (max-width: 599px) {
    .brief-line {
      flex-direction: column;
      gap: 4px;
    }
    .brief-line .v { text-align: left; }
  }

  .brief-line:last-child { border-bottom: none; }

  .brief-line .k {
    color: var(--muted-on-ink);
    letter-spacing: 0.04em;
  }

  .brief-line .v {
    color: var(--paper);
    font-weight: 600;
    text-align: right;
    min-width: 0;
    flex: 1 1 auto;
  }

  #brief-status-value {
    display: inline-block;
    min-width: 140px;
    text-align: right;
    transition: opacity 0.25s ease;
  }

  .brief-terminal-foot {
    padding: 12px 18px;
    border-top: 1px solid var(--line);
    font-size: 10.5px;
    color: var(--muted-on-ink);
    letter-spacing: 0.06em;
    display: flex;
    justify-content: space-between;
  }

  @media (prefers-reduced-motion: reduce) {
    .live-dot::before { animation: none; }
  }

  .proof-section {
    background: var(--paper);
    border-bottom: 1px solid var(--line-soft);
  }

  .proof-ledger {
    display: flex;
    flex-wrap: wrap;
    padding: var(--space-3) 0;
  }

  .proof-item {
    flex: 1 1 200px;
    padding: var(--space-1) var(--space-3) var(--space-1) 0;
    border-right: 1px solid var(--line-soft);
    position: relative;
    min-width: 0;
  }

  .proof-item:last-child { border-right: none; }

  .proof-item .num {
    font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
    font-weight: 900;
    font-size: clamp(2.2rem, 1.8rem + 1.5vw, 3.2rem);
    color: var(--ink);
    line-height: 1;
  }

  .proof-item .num .accent { color: var(--signal); }

  .proof-item .lbl {
    font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
    font-size: 11.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 8px;
  }

  @media (max-width: 700px) {
    .proof-item { border-right: none; border-bottom: 1px solid var(--line-soft); flex: 1 1 45%; }
  }

  @media (max-width: 420px) {
    .proof-item { flex: 1 1 100%; padding-right: 0; }
  }

  section { padding: var(--space-5) 0; }

  section h2 {
    font-size: clamp(1.8rem, 1.5rem + 2vw, 3rem);
    max-width: 780px;
    margin-bottom: var(--space-2);
    line-height: 1.05;
  }

  .section-sub {
    color: var(--muted);
    font-size: clamp(15px, 14.3px + 0.3vw, 17px);
    max-width: 600px;
    margin-bottom: var(--space-4);
    line-height: 1.65;
  }

  .section-sub.on-ink { color: var(--muted-on-ink); }

  .system-rail {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
  }

  .system-rail > .system-node { min-width: 0; }

  @media (max-width: 767px) {
    .system-rail { grid-template-columns: 1fr; }
  }

  .system-rail::before {
    content: '';
    position: absolute;
    top: 46px;
    left: 4%;
    right: 4%;
    height: 1px;
    background: repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 14px);
  }

  @media (max-width: 767px) {
    .system-rail::before { display: none; }
  }

  .system-node {
    position: relative;
    padding-top: var(--space-3);
  }

  .system-node .node-marker {
    width: 12px;
    height: 12px;
    background: var(--ink);
    border: 2px solid var(--signal);
    margin-bottom: var(--space-2);
    position: relative;
    z-index: 2;
  }

  .system-node .node-index {
    font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
    font-size: 11.5px;
    color: var(--signal);
    letter-spacing: 0.08em;
    margin-bottom: 10px;
  }

  .system-node h3 {
    font-size: 22px;
    margin-bottom: 10px;
  }

  .system-node p {
    color: var(--muted);
    font-size: 15px;
    line-height: 1.65;
    max-width: 320px;
  }

  .system-loop {
    margin-top: var(--space-3);
    padding-top: var(--space-2);
    border-top: 1px solid var(--line-soft);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .system-loop .accent { color: var(--signal); }

  .service-index {
    border-top: 1px solid var(--line);
  }

  details.service-row {
    border-bottom: 1px solid var(--line);
  }

  details.service-row summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) 0;
  }

  details.service-row summary::-webkit-details-marker { display: none; }

  .service-row .svc-num {
    font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
    font-size: 13px;
    color: var(--signal);
    flex-shrink: 0;
    width: 34px; font-variant-numeric:tabular-nums;}

  .service-row .svc-name {
    font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: clamp(1.15rem, 1rem + 1vw, 1.6rem);
    flex-grow: 1;
    min-width: 0;
  }

  .service-row .svc-toggle {
    font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
    font-size: 20px;
    color: var(--muted);
    transition: transform 0.2s ease;
    flex-shrink: 0;
  }

  details.service-row[open] .svc-toggle { transform: rotate(45deg); }

  .service-detail {
    padding: 0 0 var(--space-3) 46px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2) var(--space-3);
    max-width: 880px;
  }

  .service-detail > div { min-width: 0; }

  @media (max-width: 700px) {
    .service-detail { grid-template-columns: 1fr; padding-left: 0; }
  }

  .service-detail .field-label {
    font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 6px;
  }

  .service-detail p {
    font-size: 14.5px;
    color: var(--ink);
    line-height: 1.6;
  }

  .service-detail .svc-cta {
    grid-column: 1 / -1;
    margin-top: 6px;
  }

  .service-detail .svc-cta a {
    font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--signal);
    text-decoration: none;
    border-bottom: 1px solid transparent;
  }

  .service-detail .svc-cta a:hover { border-bottom-color: var(--signal); }

  .track-strip {
    overflow: hidden;
    position: relative;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }

  .track-track {
    display: flex;
    align-items: stretch;
    gap: 2px;
    width: max-content;
    animation: trackMarquee 36s linear infinite;
  }

  .track-strip:hover .track-track { animation-play-state: paused; }

  @keyframes trackMarquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }

  .track-card {
    background: var(--paper);
    border: 1px solid var(--line);
    padding: clamp(18px, 14px + 2vw, 26px) clamp(20px, 14px + 3vw, 34px);
    flex-shrink: 0;
    transition: background 0.2s ease, color 0.2s ease;
  }

  .track-card:hover {
    background: var(--ink);
    color: var(--paper);
  }

  .track-card .track-name {
    font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
    font-weight: 900;
    font-size: clamp(1.3rem, 1.1rem + 1vw, 1.75rem);
    line-height: 1;
    letter-spacing: -0.01em;
    white-space: nowrap;
  }

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

  .case-slots {
    margin-top: var(--space-4);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
  }

  @media (max-width: 1023px) {
    .case-slots { grid-template-columns: repeat(2, 1fr); }
  }

  @media (max-width: 767px) {
    .case-slots { grid-template-columns: 1fr; }
  }

  .case-slot {
    border: 1px solid var(--line);
    padding: var(--space-2);
    min-width: 0;
  }

  .case-slot .slot-tag {
    font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: var(--space-2);
  }

  .case-slot .slot-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 13px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line-soft);
  }

  .case-slot .slot-field:last-child { border-bottom: none; }

  .case-slot .slot-field .fk { color: var(--signal); font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; }
  .case-slot .slot-field .fv { color: var(--ink); line-height: 1.5; }

  .problem-wrap {
    display: grid;
    grid-template-columns: 0.65fr 1.35fr;
    border: 1px solid var(--line);
    min-height: 360px;
  }

  .problem-wrap > * { min-width: 0; }

  @media (max-width: 860px) {
    .problem-wrap { grid-template-columns: 1fr; min-height: 0; }
  }

  .problem-nav {
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
  }

  @media (max-width: 860px) {
    .problem-nav {
      border-right: none;
      border-bottom: 1px solid var(--line);
    }
  }

  .problem-nav-item {
    display: flex;
    align-items: baseline;
    gap: 14px;
    text-align: left;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--line-soft);
    padding: clamp(16px, 14px + 1vw, 20px) clamp(16px, 12px + 2vw, 22px);
    min-height: 44px;
    cursor: pointer;
    font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
    transition: background 0.15s ease;
  }

  .problem-nav-item:last-child { border-bottom: none; }

  .problem-nav-item:hover { background: var(--paper-dim); }

  .problem-nav-item.is-active {
    background: var(--ink);
  }

  .problem-nav-item .pn-num {
    font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: var(--signal);
    flex-shrink: 0; font-variant-numeric:tabular-nums;}

  .problem-nav-item.is-active .pn-num { color: var(--signal-bright); }

  .problem-nav-item .pn-title {
    font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: var(--ink);
  }

  .problem-nav-item.is-active .pn-title { color: var(--paper); }

  .problem-panel {
    padding: var(--space-4);
    transition: opacity 0.2s ease;
  }

  .problem-panel .pp-num {
    font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
    font-size: 13px;
    color: var(--signal);
    letter-spacing: 0.08em;
    margin-bottom: 14px; font-variant-numeric:tabular-nums;}

  .problem-panel h3 {
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
    margin-bottom: 18px;
  }

  .problem-panel p {
    color: var(--muted);
    font-size: clamp(15px, 14.3px + 0.3vw, 17px);
    line-height: 1.7;
    max-width: 560px;
    margin-bottom: var(--space-3);
  }

  .pp-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .pp-tags span {
    font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
    font-size: 12px;
    border: 1px solid var(--line);
    padding: 7px 14px;
    color: var(--muted);
  }

  .selective-note {
    margin-top: var(--space-3);
    font-size: 14px;
    color: var(--muted);
    max-width: 560px;
    font-style: italic;
    font-family: ui-serif, Georgia, serif;
  }

  .why-section {
    background: var(--ink);
    color: var(--paper);
  }

  .why-section .eyebrow { color: var(--signal-bright); }
  .why-section .eyebrow::before { background: var(--signal-bright); }
  .why-section h2 { color: var(--paper); }

  .why-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--line);
  }

  .why-split > .why-col { min-width: 0; }

  @media (max-width: 767px) {
    .why-split { grid-template-columns: 1fr; }
  }

  .why-col { padding: var(--space-3); }

  .why-col.typical { border-right: 1px solid var(--line); }

  @media (max-width: 767px) {
    .why-col.typical { border-right: none; border-bottom: 1px solid var(--line); }
  }

  .why-col .why-head {
    font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
    font-size: 11.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: var(--space-2);
    color: var(--muted-on-ink);
  }

  .why-col.desk .why-head { color: var(--signal-bright); }

  .why-stat {
    font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: clamp(1.15rem, 1rem + 0.8vw, 1.5rem);
    line-height: 1.35;
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
    color: var(--muted-on-ink);
  }

  .why-col.desk .why-stat { color: var(--paper); }

  .why-stat:last-child { border-bottom: none; }

  .about-section {
    border-bottom: 1px solid var(--line-soft);
  }

  .about-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: var(--space-4);
    align-items: start;
  }

  .about-grid > * { min-width: 0; }

  @media (max-width: 767px) {
    .about-grid { grid-template-columns: 1fr; }
  }

  .portrait-frame {
    aspect-ratio: 4 / 5;
    max-width: 280px;
    background: var(--ink);
    border: 1px solid var(--line);
    position: relative;
    overflow: hidden;
  }

  .portrait-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }

  .portrait-frame .portrait-caption {
    position: absolute;
    bottom: 18px;
    left: 18px;
    font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
    font-size: 10.5px;
    letter-spacing: 0.08em;
    color: var(--paper);
    background: rgba(39,42,66,0.75);
    padding: 6px 10px;
  }

  .about-copy p {
    margin-bottom: 18px;
    font-size: clamp(15px, 14.3px + 0.3vw, 16.5px);
    line-height: 1.75;
  }

  .about-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: var(--space-2) 0 var(--space-3);
  }

  .about-tag {
    font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
    font-size: 12px;
    border: 1px solid var(--line);
    padding: 6px 12px;
    color: var(--muted);
  }

  .about-tag.more {
    border-style: dashed;
    color: var(--signal);
  }

  .credential-row {
    display: flex;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: 14.5px;
    gap: 16px;
  }

  @media (max-width: 599px) {
    .credential-row {
      flex-direction: column;
      gap: 6px;
    }
    .credential-row .cred-v { text-align: left; }
  }

  .credential-row .cred-k {
    font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    color: var(--muted);
    flex-shrink: 0; letter-spacing:0.06em;}

  .credential-row .cred-v {
    text-align: right;
    font-weight: 600;
    min-width: 0;
    flex: 1 1 auto;
  }

  .cert-strip {
    overflow: hidden;
    position: relative;
    margin-top: var(--space-3);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }

  .cert-track {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    width: max-content;
    animation: certMarquee 30s linear infinite;
    padding: 4px 0;
  }

  .cert-strip:hover .cert-track { animation-play-state: paused; }

  @keyframes certMarquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }

  .cert-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    width: 92px;
  }

  .cert-seal {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
    font-weight: 900;
    font-size: 15px;
    letter-spacing: -0.02em;
  }

  .cert-caption {
    font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
    font-size: 10.5px;
    letter-spacing: 0.02em;
    /* --muted-on-ink is the muted for DARK panels; these captions sit on white,
       where it lands at a 2.1:1 contrast ratio, well under legible. */
    color: var(--muted);
    text-align: center;
    line-height: 1.3;
  }

  .cert-seal.seal-google { background: linear-gradient(135deg, #4285F4, #34A853 50%, #FBBC05 75%, #EA4335); color: #fff; }
  .cert-seal.seal-sa360 { background: #4285F4; color: #fff; }
  .cert-seal.seal-dv360 { background: #34A853; color: #fff; }
  .cert-seal.seal-amazon { background: #FF9900; color: #14181F; }
  .cert-seal.seal-ttd { background: #1F1F1F; color: #fff; }
  .cert-seal.seal-pinterest { background: #E60023; color: #fff; }
  .cert-seal.seal-reddit { background: #FF4500; color: #fff; }
  .cert-seal.seal-vistar { background: #0B6E6E; color: #fff; }
  .cert-seal.seal-more { background: transparent; border: 1.5px dashed var(--line); color: var(--muted); }

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

  .articles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
  }

  @media (max-width: 1023px) {
    .articles-grid { grid-template-columns: repeat(2, 1fr); }
  }

  @media (max-width: 599px) {
    .articles-grid { grid-template-columns: 1fr; }
  }

  .article-card {
    border: 1px solid var(--line-soft);
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
    transition: border-color 0.15s ease;
  }

  a.article-card:hover { border-color: var(--signal); }

  .article-card .draft-tag {
    font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--signal);
    border: 1px solid var(--signal);
    padding: 4px 10px;
    display: inline-block;
    width: fit-content;
    margin-bottom: var(--space-2);
  }

  .article-card h3 {
    font-size: 19px;
    line-height: 1.3;
    margin-bottom: 12px;
  }

  .article-card p {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.6;
    flex-grow: 1;
  }

  .contact-section {
    background: var(--ink);
    color: var(--paper);
  }

  .contact-section .eyebrow { color: var(--signal-bright); }
  .contact-section .eyebrow::before { background: var(--signal-bright); }
  .contact-section h2 { color: var(--paper); }

  .contact-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: var(--space-4);
    align-items: start;
  }

  .contact-grid > * { min-width: 0; }

  @media (max-width: 767px) {
    .contact-grid { grid-template-columns: 1fr; }
  }

  .contact-expect {
    margin-top: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .contact-expect .expect-row {
    display: flex;
    gap: 12px;
    font-size: 14px;
    color: var(--muted-on-ink);
  }

  .contact-expect .expect-row .expect-num {
    font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
    color: var(--signal-bright);
    flex-shrink: 0; font-variant-numeric:tabular-nums;}

  form.brief-form {
    background: var(--ink-soft);
    border: 1px solid var(--line);
    padding: var(--space-3);
  }

  .form-field { margin-bottom: var(--space-2); }

  .form-field label {
    display: block;
    font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted-on-ink);
    margin-bottom: 8px;
  }

  .form-field input,
  .form-field select,
  .form-field textarea {
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--line);
    background: transparent;
    font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
    font-size: 16px;
    padding: 12px 2px;
    min-height: 44px;
    color: var(--paper);
  }

  .form-field select option { background: var(--ink-soft); color: var(--paper); }

  .form-field input:focus,
  .form-field select:focus,
  .form-field textarea:focus {
    outline: none;
    border-bottom-color: var(--signal);
  }

  .form-field textarea { min-height: 92px; resize: vertical; }

  form.brief-form button[type="submit"] {
    width: 100%;
    margin-top: 6px;
  }

  .form-status {
    margin-top: 14px;
    font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
    font-size: 13px;
    display: none; font-variant-numeric:tabular-nums;}

  .form-status.success { color: var(--status-live); display: block; }
  .form-status.error { color: var(--signal-bright); display: block; }

  footer {
    background: #F7F6FD;
    color: var(--muted);
    padding: var(--space-3) 0;
    font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
    font-size: 12.5px;
    border-top: 1px solid var(--line);
  }

  footer .footer-row {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
  }

  footer .footer-legal {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
  }

  footer .footer-legal a {
    color: var(--muted);
    text-decoration: none;
  }

  footer .footer-legal a:hover {
    color: var(--ink);
    text-decoration: underline;
  }

  /* Mobile footer: stack instead of squeezing space-between columns; let the
     legal row wrap and give the contact line its own full-width row. */
  @media (max-width: 640px) {
    footer .footer-row { flex-direction: column; gap: 4px; }
    footer .footer-legal { flex-wrap: wrap; gap: 10px 18px; }
    footer .footer-contact { margin-left: 0; flex-basis: 100%; }
  }

  footer .footer-contact {
    margin-left: auto;
    font-size: 13px;
    color: var(--muted);
  }

  footer .footer-contact a {
    color: var(--signal);
  }

  /* --- Article pages --- */
  .article-hero {
    background: var(--ink);
    color: var(--paper);
    padding: clamp(3rem, 5svh, 6rem) 0 clamp(2.5rem, 4svh, 4rem);
  }

  .article-hero .article-meta {
    font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted-on-ink);
    margin-bottom: var(--space-2);
  }

  .article-hero h1 {
    font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
    font-weight: 900;
    font-size: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
    line-height: 1.08;
    max-width: 900px;
  }

  .article-hero .dek {
    font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
    color: var(--muted-on-ink);
    max-width: 640px;
    margin-top: var(--space-2);
    line-height: 1.6;
  }

  .article-body {
    padding: clamp(2.5rem, 4svh, 5rem) 0;
  }

  .article-body .prose {
    max-width: 700px;
    font-size: clamp(1.05rem, 1rem + 0.2vw, 1.15rem);
    line-height: 1.75;
  }

  .article-body .prose p { margin-bottom: 1.4em; }

  .article-body .prose h2 {
    font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
    font-weight: 800;
    font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem);
    margin: 1.6em 0 0.6em;
    line-height: 1.2;
  }

  .article-body .prose h2:first-child { margin-top: 0; }

  .article-body .prose ul {
    margin: 0 0 1.4em 1.3em;
  }

  .article-body .prose li {
    margin-bottom: 0.5em;
    line-height: 1.65;
  }

  .article-body .pull-quote {
    border-left: 3px solid var(--signal);
    padding: 4px 0 4px 24px;
    margin: 1.8em 0;
    font-family: ui-serif, Georgia, serif;
    font-style: italic;
    font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem);
    color: var(--ink);
    line-height: 1.5;
  }

  .article-footer-nav {
    border-top: 1px solid var(--line-soft);
    padding: var(--space-4) 0;
  }

  .article-footer-nav .afn-label {
    font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: var(--space-2);
  }

  .article-footer-nav .afn-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
  }

  @media (max-width: 767px) {
    .article-footer-nav .afn-links { grid-template-columns: 1fr; }
  }

  .article-footer-nav .afn-links a {
    display: block;
    border: 1px solid var(--line-soft);
    padding: var(--space-2);
    text-decoration: none;
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.35;
    transition: border-color 0.15s ease;
  }

  .article-footer-nav .afn-links a:hover { border-color: var(--signal); }

/* --- Nav "More" dropdown (consulting page) --- */
.nav-dropdown { position: relative; display: inline-block; }
.nav-dropdown-toggle {
  background: none; border: none; cursor: pointer; padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-size: 12.5px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--muted); transition: color 0.15s ease;
}
.nav-dropdown-toggle:hover { color: var(--ink); }
.nav-dropdown-menu {
  display: none; position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%);
  background: var(--paper); border: 1px solid var(--line-soft); border-radius: 10px;
  padding: 8px; min-width: 160px; box-shadow: 0 8px 24px rgba(0,0,0,0.08); z-index: 50;
}
.nav-dropdown-menu.open { display: flex; flex-direction: column; }
.nav-dropdown-menu a {
  padding: 8px 12px; border-radius: 6px; white-space: nowrap;
  font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-size: 12px; text-transform: uppercase;
  letter-spacing: 0.04em; text-decoration: none; color: var(--muted);
}
.nav-dropdown-menu a:hover { background: var(--paper-dim); color: var(--ink); }

@media (max-width: 860px) {
  .nav-dropdown { display: block; width: 100%; }
  .nav-dropdown-menu { position: static; transform: none; box-shadow: none; border: none; padding: 4px 0 4px 12px; width: 100%; }
}

/* ============================================================
   Global accessibility (added 2026-07): a visible keyboard-focus
   ring on every interactive element (WCAG 2.4.7) and respect for
   prefers-reduced-motion sitewide. :focus-visible only triggers on
   keyboard navigation, so mouse clicks stay clean.
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--signal, #5B4FE0);
  outline-offset: 2px;
  border-radius: 3px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ===== Sitemap footer columns ===== */
.footer-cols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:26px;padding:36px 0 6px;}
/* Colours are stated against the footer's own light background. They were
   white-on-dark until the footer went light, which left every group heading
   (PRODUCT, RESEARCH, LEARN...) invisible on a phone, where those headings are
   the whole footer navigation. */
.footer-cols h4{font-family:-apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;font-size:10.5px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);margin:0 0 10px;}
.footer-cols a{display:block;font-size:13px;line-height:1.5;color:var(--ink);text-decoration:none;padding:3px 0;}
.footer-cols a:hover{color:var(--signal);}
@media (max-width:760px){.footer-cols{grid-template-columns:1fr 1fr;gap:20px;}}
@media (max-width:420px){.footer-cols{grid-template-columns:1fr;}}

/* ===== Mobile refinement, added 2026-07-26 =====
   Audited in a 390x844 viewport. Page-level horizontal overflow was already
   zero, so this is not about layout collapsing. Two systemic problems showed
   up instead, both coming from shared chrome rather than any one page:
     1. label text rendering as small as 9px, which is not readable on a phone
     2. 229 non-prose links with hit areas under the 44px minimum
   Hit-area rules are deliberately scoped to chrome and controls. Inline links
   inside prose are left alone, because padding those out breaks paragraph
   rhythm and they are not the ones people are trying to thumb. */
@media (max-width: 767px) {
  /* --- Hit areas --- */
  .site-nav a, .nav-links a, .nav-persistent a, .nav-dd-m a, .nav-dd-t,
  footer a, .footer-cols a, .footer-contact a,
  .menu-toggle, .lang-switch, .auth-link-btn, .nav-cta, .brand,
  .otwc-b, .sm-tab, .preview-link, .text-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  footer a, .footer-cols a { padding: 2px 0; }
  .site-nav a, .nav-links a { padding: 0 2px; }
  button, .btn, [role="button"], summary { min-height: 44px; }
  /* Anything genuinely tappable gets breathing room from its neighbours. */
  .footer-cols li + li, .nav-links li + li { margin-top: 2px; }

  /* --- Legibility floor --- */
  /* Measured offenders, smallest first. A phone held at arm's length cannot
     resolve letterspaced caps below about 12px. */
  .prio, .nav-cta, .hm-tag, .hm-label, .sm-tag, .badge, .tag,
  .hm-ci, .stat, .pricing-badge, .eyebrow, .signal-eyebrow,
  .pct, .sm-tab, .sm-note, .hm-quote, .chip-label, .wdb-label,
  .rec-badge, .src-count, .cite, .fk, .upsell-badge, .sp-save,
  .status-line, .form-status, .about-tag, .pp-tags span,
  .competitor-freq, .verify-row .sp, .ready-flag, .rl-head {
    font-size: 12.5px !important;
    letter-spacing: 0.04em;
  }
  th, .th { font-size: 12.5px !important; }
  td { font-size: 14px; }
  h4 { font-size: 13px; }
  label { font-size: 13px; }


  /* --- Second pass: selectors that lost on specificity, measured not guessed --- */
  footer h4, .footer-cols h4 { font-size: 12.5px !important; }
  .lang-switch, .menu-toggle, .preview-link, .guide-eyebrow,
  .idx-score small, .idx-share a, .auth-link-btn { font-size: 12.5px !important; }
  .form-field label, .signal-card label, label { font-size: 13px !important; }
  .hm-rec span, .pricing-card > div:not([class]) { font-size: 13px !important; }
  /* Share buttons are a real target, not prose. */
  .idx-share a, .idx-share button { min-height: 44px; padding: 0 14px; }
  /* Inline links inside a note read as text and are left at their natural size
     on purpose: padding them out would break the sentence they sit in. */
  /* Tab strips and the verify row are real controls, so they get the full
     44px even though they are visually small chips. */
  .sm-tab { min-height: 44px !important; padding: 0 14px; }
  .verify-row a, .idx-share a, .guide-nav a, .learn-card a { min-height: 44px; display: inline-flex; align-items: center; }
  /* A six-line paragraph centred at 390px is hard to scan, so the hero copy
     goes left-aligned on a phone even though it is centred on tablet. */
  .hero-grid .hero-left h1, .hero-grid .hero-left .sub { text-align: left !important; }
  /* --- Mobile hero: get the form above the fold --- */
  /* Measured at 390x844: the input sat at 628px and the submit at 701px, so the
     one action this page exists for was below the fold on a phone. The headline
     ran to four lines and the standfirst to six. The detail sentences move out
     of the way on mobile only; they are still there on tablet and desktop, and
     the same facts appear again in the pricing section and under the button. */
  .signal-hero h1 { font-size: clamp(30px, 8.2vw, 38px); line-height: 1.1; }
  .hero-left .sub { margin-bottom: 18px; }
  .hero-left .sub-more { display: none; }
  .signal-hero .signal-card { margin-top: 4px; }
  .signal-eyebrow { margin-bottom: 8px; }
  /* The two secondary links wrapped onto separate lines and left the middot
     stranded at the end of the first. Stack them cleanly instead. */
  .hero-altlinks { display: flex; flex-direction: column; align-items: center; gap: 2px; }
  .hero-altlinks .altlink-sep { display: none; }
  .hero-altlinks a, .hero-altlinks button { min-height: 40px; display: inline-flex; align-items: center; }
  /* --- Vertical rhythm should follow content, not the viewport --- */
  /* These sections carry min-height:100vh, which is rhythm on a desktop and
     dead space on a phone: section one's content is 297px sitting in a 610px
     box. Padding keeps the breathing room without the emptiness. */
  main > section { min-height: 0 !important; }
  main > section:not(.signal-hero) { padding-top: clamp(44px, 10vw, 68px); padding-bottom: clamp(44px, 10vw, 68px); }

  /* --- Sticky action bar --- */
  /* Once the hero form scrolls away there is no way to act for 3.4 screens,
     because the nav CTA lives inside the hamburger on mobile. This brings the
     action back without stealing space while the form is still on screen. */
  /* Laid out at all times on mobile and parked fully below the fold, because a
     display change cannot be transitioned: the previous version snapped into
     place instead of rising. Inert until .is-on, and aria-hidden is toggled
     alongside so it is not announced while parked. */
  .mobile-cta {
    display: block;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid var(--line-soft, #E8E5F9);
    transform: translate3d(0, 115%, 0);
    pointer-events: none;
    /* visibility carries correctness, transform carries the motion. If the
       transform is ever momentarily identity, on first style resolution, on an
       orientation change, or on any frame the compositor has not caught up
       with, the bar still cannot flash across the bottom of the screen. It is
       held until the slide-out finishes, then hidden in one step. */
    visibility: hidden;
  }
  .mobile-cta.is-on { transform: translate3d(0, 0, 0); pointer-events: auto; visibility: visible; }
  .mobile-cta a {
    display: flex; align-items: center; justify-content: center;
    min-height: 50px; border-radius: 12px; background: var(--signal, #5B4FE0);
    color: #fff; font-weight: 700; font-size: 15.5px; text-decoration: none;
  }
  body.has-mobile-cta { padding-bottom: 78px; }
  /* Static. Not translucent, not blurred, not animated, and not a function of
     scroll position in any way. Four attempts at a bar that changed as you
     scrolled all ended with something showing through it at some point in the
     scroll, so the whole mechanism is gone rather than narrowed: no animation,
     no timeline, no transition, no state class. There is now no frame in which
     this bar can be anything other than opaque white.
     nav.site-nav carries the same solid fill as a second opaque layer, so even
     if the header's own background were ever skipped, the strip is still filled. */
  header.site-header {
    background: #fff;
    border-bottom-color: var(--line-soft, #E8E5F9);
    box-shadow: 0 1px 6px rgba(26, 28, 46, 0.05);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition: none;
    animation: none;
  }
  nav.site-nav { background: #fff; }

  /* --- content-visibility: measured, then rejected --- */
  /* `content-visibility: auto` on the below-fold sections is the textbook fix
     for a nine-screen page, and it was measured here rather than assumed. The
     sections on this page run from 295px to 1724px tall, so a single
     contain-intrinsic-size estimate is wrong for all of them: scroll height went
     from 6387px to 7009px, a 10% error, and #pricing moved 600px from where it
     really is. Anchor links landing in the wrong place is a worse defect than
     the paint cost it saves on a page whose only image is the logo.
     Per-section estimates would fix it and would then be wrong again at the next
     copy edit. Left out on purpose; revisit if this page ever carries media. */

  /* --- Touch handling --- */
  /* Browsers still reserve a beat on tap to see whether a second tap is coming,
     which is what makes a mobile site feel a frame behind a native one. Telling
     them these targets will never be double-tapped to zoom removes the wait.
     Scoped to controls: prose and figures keep pinch and double-tap zoom, which
     is an accessibility affordance, not a bug. */
  a, button, summary, label, .sm-tab, .otwc-b, [role="button"] { touch-action: manipulation; }

  /* --- Scroll containment --- */
  /* Reaching the end of a horizontal scroller used to hand the gesture to the
     page, which on iOS means a swipe through a wide table can trigger the
     back-navigation gesture and lose the reader's place entirely. */
  .sm-tabs, .cmp-wrap, .pc-wrap, .fig, .marginfig, table {
    overscroll-behavior-inline: contain;
  }
  .modal-backdrop, .nav-links.is-open { overscroll-behavior: contain; }

  /* --- Safe areas --- */
  /* viewport-fit=cover was tried here and reverted: it tells the browser to
     draw the page under the status bar, which is what put scrolling content in
     the strip above the nav. The default viewport already insets content clear
     of the notch and the home indicator, so cover bought nothing the sticky CTA
     needed. These max() rules are kept because they are correct either way:
     with the default viewport every inset resolves to 0 and the gutter wins. */
  .wrap, nav.site-nav, .mobile-cta, footer > .wrap {
    padding-left: max(var(--gutter), env(safe-area-inset-left));
    padding-right: max(var(--gutter), env(safe-area-inset-right));
  }
  .wrap { width: 100%; margin-inline: 0; }

  /* --- The sticky bar --- */
  /* It was 76px of translucent chrome, 11% of the viewport, carrying four
     controls: logo, FR, Log in, MENU. Because the nav is space-between with
     three children, FR and Log in floated in the middle of the bar with a
     140px gap either side, which is what made it read as unfinished.
     Group the controls right, drop to 56px, and move the language switch
     into the menu where it does not compete with Log in. */
  nav.site-nav { padding: 8px var(--gutter); gap: 4px; }
  nav.site-nav .nav-persistent { margin-left: auto; }
  nav.site-nav .auth-bar .lang-switch { display: none; }
  /* .auth-link-btn already buys a 44px hit area with padding:12px 10px and a
     matching negative margin, so the blanket min-height above was stacking on
     top of it: a 68px box that dragged the whole bar to 76px. */
  /* The desktop button buys its 44px hit area with padding:12px 10px plus a
     matching negative margin. On mobile that collapsed the auth bar to the
     button's margin box, 37px, and "Log in" overflowed it. Drop the trick here
     and let a plain min-height do the same job with no overflow. */
  .auth-bar .auth-link-btn {
    min-height: 44px; padding: 0 6px; margin: 0;
    white-space: nowrap; display: inline-flex; align-items: center; flex: 0 0 auto;
  }
  nav.site-nav .nav-persistent, nav.site-nav .auth-bar { min-height: 0; align-items: center; }
  .menu-toggle { margin-left: 4px; }
  .nav-links .nav-lang-m { display: block; }

  /* --- The comparison section --- */
  /* 177 words in a 927px block. Each cell keeps its claim and drops the
     qualifying clause; desktop still gets the full sentence. */
  .cmp-more { display: none; }

  /* "In a hurry? Buy now" sits directly under the primary button, offering a
     second, harder decision at the exact moment someone is making the easy one.
     On a phone that is the whole screen. Desktop keeps it for returning buyers
     who know what they want. */
  #expressOpen, .hero-altlinks .altlink-sep { display: none; }

  /* --- Fewer competing actions --- */
  /* "View a sample report" appeared three times on one page. Once is a helpful
     escape hatch; three times is the page arguing with itself about what the
     reader should do next. The hero keeps one, and the See-it band above
     pricing carries both demos at every width, so the pricing-card links stay
     hidden here rather than being the only way in on a phone (which is what
     they were before that band existed). */
  .pricing-card .preview-link { display: none !important; }
  /* This link is not another sample/demo escape hatch. It is the only
     in-card revenue path for an active subscriber whose plan CTA has become
     "Open your dashboard". Hiding every .preview-link on mobile accidentally
     made entitlement and new-purchase intent mutually exclusive again. */
  .pricing-card .preview-link.account-next-measure { display: block !important; }

  /* --- One sample report, not two --- */
  /* The hero carries a static sample card and the "inspect it yourself" section
     carries an interactive one, showing the same fictional business at the same
     score. On a desktop they sit side by side with the form and read as one
     idea; stacked on a phone they are simply the same demo twice, 516px apart
     from the thing that follows it. The interactive one wins: it is the better
     artefact and it is the one the section is built around. */
  .hero-mock { display: none; }

  /* --- Footer: 30 links is a second page, not a footer --- */
  /* Each group collapses on a phone. They are <details open> in the markup, so
     desktop is untouched and anyone without JS keeps today's fully open footer;
     a script closes them only when the screen is narrow. */
  .footer-cols { display: block; }
  .foot-group { border-bottom: 1px solid var(--line-soft, #E8E5F9); }
  .foot-group:last-child { border-bottom: 0; }
  .foot-group > summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between;
    min-height: 48px; padding: 0 2px;
  }
  .foot-group > summary::-webkit-details-marker { display: none; }
  .foot-group > summary::after {
    content: '+'; font-size: 19px; line-height: 1; color: var(--muted); font-weight: 400;
  }
  .foot-group[open] > summary::after { content: '\2013'; }
  .foot-group > summary h4 { margin: 0; }
  .foot-group .foot-links { padding: 2px 0 14px; }
  .foot-group .foot-links a { display: flex; align-items: center; min-height: 44px; }

  /* --- Comparison: one rival, not two --- */
  /* Four topics against three columns is twelve statements. That is a desktop
     scale of argument. On a phone the reader needs one contrast, not two, and
     the free-checker line was the weakest of the pair: "$0, built to upsell
     you" and "Once. A coin flip." are already said in the FAQ and in the
     problem section. Dropping that column removes four of the eight muted
     paragraphs and keeps the comparison that actually costs money to lose. */
  .cmp-table .cmp-them[data-c="Free checkers"] { display: none; }
  .cmp-intro-more { display: none; }   /* the heading already says "less than the big suites" */
  /* Name ourselves once to establish the pattern, then stop. Repeating
     "OTW Signal:" in accent on all four blocks was four hits of colour telling
     the reader something they worked out at the first one. After that, the
     bold line is ours because the muted line beneath it is labelled as theirs. */
  /* Sibling selector, not :first-of-type: the hidden column-header row is
     also a <tr>, so :first-of-type matched it and stripped all four. */
  .cmp-table .cmp-row ~ .cmp-row .cmp-ours::before { content: none; }
  /* The eyebrow above the heading said "why us and not the big suites" directly
     above a heading that says "we do less than the big suites". Once is enough. */
  .cmp-eyebrow { display: none; }
  .cmp-table .cmp-row { padding: 16px 0; }
  .cmp-table .cmp-ours { margin-bottom: 6px; }

  /* --- Proof bar --- */
  /* Two rule systems collided here: signal.css lays this out as a grid, while
     styles.css (from an older flex version) gives every item a bottom border.
     The result was hairlines under the bottom row leading nowhere, which read
     as a broken table rather than as structure. Four numbers with labels do not
     need rules between them; space is enough. */
  .proof-item { border-right: 0 !important; border-bottom: 0 !important; }
  .proof-bar { gap: 4px 14px; padding-left: 18px; padding-right: 18px; }
  .proof-item { padding: 14px 6px; }
  .proof-item b { font-size: 26px; }

  /* --- The four-column competitor comparison --- */
  /* A four-column table with a scrollbar is a desktop table wearing a phone
     costume: the reader still has to hold a heading in their head and swipe to
     reach the thing being compared. On mobile it becomes one block per topic
     instead. Our answer leads and is the only thing in accent colour; the other
     two sit under it, labelled and muted, so the contrast is read rather than
     cross-referenced. No swiping, no sticky column, no horizontal scroll. */
  .cmp-wrap { overflow: visible; }
  .cmp-table { display: block; min-width: 0 !important; white-space: normal !important; }
  .cmp-table tbody { display: block; }
  .cmp-table tr:first-child { display: none; }            /* column headings */
  .cmp-table .cmp-row { display: block; padding: 20px 0; border-bottom: 1px solid var(--line-soft, #E8E5F9); }
  .cmp-table .cmp-row:last-child { border-bottom: 0; }
  .cmp-table td { display: block; padding: 0 !important; border: 0 !important; }
  .cmp-table .cmp-label {
    font-size: 12.5px; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--muted); font-weight: 600; margin-bottom: 8px;
  }
  .cmp-table .cmp-ours {
    font-size: 15.5px; line-height: 1.5; color: var(--ink);
    font-weight: 500; margin-bottom: 10px;
  }
  /* Our label sits inline and at body size like the other two. Repeating it in
     accent caps above every block turned a comparison into four small
     billboards. The weight of the answer carries the emphasis instead. */
  .cmp-table .cmp-ours::before {
    content: attr(data-c) ": ";
    color: var(--signal, #5B4FE0); font-weight: 700;
  }
  .cmp-table .cmp-them {
    font-size: 13.5px; line-height: 1.5; color: var(--muted); margin-top: 6px;
  }
  .cmp-table .cmp-them::before {
    content: attr(data-c) ": ";
    color: var(--muted); font-weight: 600;
  }
  /* --- Tables --- */
  /* A table wider than the phone has to be swipeable, not clipped. */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  table thead, table tbody, table tr { white-space: normal; }
}

/* Never on desktop, whatever the script does. Ranged against the mobile block
   rather than relying on source order, because the mobile rule is now a bare
   class and an equal-specificity global would otherwise win at every width. */
@media (min-width: 768px) {
  .mobile-cta { display: none; }
}

/* Scoped to touch devices: this is a mobile-only pass and a desktop
   mouse-down should behave exactly as it did before. */
@media (hover: none) {
  /* ===== Touch feel =====
     There were no :active states anywhere in either stylesheet. A phone has no
     hover, so every button on the site gave zero feedback when pressed, which is
     the single cheapest-feeling thing an interface can do. iOS also paints its
     own grey box on tap, which we replace with a press state we control. */
  a, button, summary, [role="button"], input, select, textarea, label {
    -webkit-tap-highlight-color: transparent;
  }
  button, .btn, .signal-submit, .pricing-cta, .nav-cta, .otwc-b, .mobile-cta a,
  .sm-tab, .wizard-btn, .text-btn, .feedback-submit, .nps-btn {
    transition: transform 90ms ease, filter 90ms ease, background-color 120ms ease;
  }
  button:active, .btn:active, .signal-submit:active, .pricing-cta:active,
  .nav-cta:active, .otwc-b:active, .mobile-cta a:active, .sm-tab:active,
  .wizard-btn:active, .text-btn:active, .feedback-submit:active, .nps-btn:active {
    transform: scale(0.985);
    filter: brightness(0.95);
  }
  .foot-group > summary:active h4, .footer-cols a:active, .site-nav a:active {
    opacity: 0.62;
  }
  /* Anyone who has asked the system to calm down gets no movement. */
  @media (prefers-reduced-motion: reduce) {
    button, .btn, .signal-submit, .pricing-cta, .nav-cta, .otwc-b, .mobile-cta a,
    .sm-tab, .wizard-btn, .text-btn, .feedback-submit, .nps-btn { transition: none; }
    button:active, .btn:active, .signal-submit:active, .pricing-cta:active,
    .nav-cta:active, .otwc-b:active, .mobile-cta a:active, .sm-tab:active { transform: none; }
  }

}

/* Desktop keeps FR in the persistent bar, so the in-menu duplicate stays off. */
@media (min-width: 768px) {
  .nav-links .nav-lang-m { display: none; }
}

/* The mobile footer accordion wraps each column in <details><summary>, which on
   a desktop browser renders the heading as a list-item with a disclosure
   triangle and makes it collapsible. Neither was true before. Desktop gets its
   plain heading back: no marker, no pointer, nothing to click. */
@media (min-width: 768px) {
  .foot-group > summary { display: block; list-style: none; cursor: default; pointer-events: none; }
  .foot-group > summary::-webkit-details-marker { display: none; }
  .foot-group > summary::after { content: none; }
}

/* ===== Scroll-driven nav state =====
   Where the browser has scroll-driven animations, the bar's state is a pure
   function of scroll offset evaluated on the compositor. No listener, no
   main-thread work, and it cannot drift out of sync the way a throttled scroll
   handler can when the main thread is busy. Everything else falls back to the
   IntersectionObserver in nav-state.js, which is also listener-free. */
/* The nav bar is deliberately static; see the mobile block above. The scroll
   probe and the solidify keyframes that used to drive it are gone with it. */


/* ===== Cross-document transitions =====
   A tap that leads to a new page normally flashes white while the next document
   paints, and that flash is most of what makes a multi-page site feel like a
   website rather than an app. One declaration replaces it with a cross-fade the
   browser runs itself, and browsers without it navigate exactly as before.
   Mobile only, because this pass is mobile only. */
@media (max-width: 767px) {
  @view-transition { navigation: auto; }
}
::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: 160ms;
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ===== Scroll choreography =====
   Mobile only. Every one of these is scroll-LINKED, not scroll-triggered: the
   element's opacity and transform are a function of where it sits in the
   viewport, so it tracks the reader's thumb instead of firing once and being
   over. That continuous response is the difference between a page that feels
   alive under your finger and a page that plays a canned animation at you.
   All of it runs on the compositor via view() timelines, so none of it costs
   main-thread work, and it animates only opacity and transform, so none of it
   can shift layout. Browsers without scroll-driven animations get the same
   choreography from an IntersectionObserver in nav-state.js. Browsers without
   either, or with JavaScript off, get the page with everything already visible:
   the hidden start state is only ever applied by the mechanism that can undo it. */

@keyframes otwRise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes otwRiseSm {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes otwPop {
  from { opacity: 0; transform: scale(0.86); }
  to   { opacity: 1; transform: scale(1); }
}
/* The interval opens outward from the point estimate, which is what a
   confidence interval actually is. Watching it widen says more about the
   product than the sentence next to it does. */
@keyframes otwSpread {
  from { opacity: 0; transform: scaleX(0); }
  to   { opacity: 1; transform: scaleX(1); }
}

@media (max-width: 767px) {
  @supports (animation-timeline: view()) {

    /* Headings and body copy deliberately do not animate. Making a sentence
       arrive with a flourish delays the reading and teaches nothing. The test
       applied to the copy applies here: does it carry meaning, or is it there
       to feel impressive. */

    /* --- Four facts, landing one after another --- */
    /* A 2x2 grid, so the pairs share a y position and would otherwise arrive
       together. The even column is offset to break the tie. */
    .proof-item {
      animation: otwRise linear both;
      animation-timeline: view();
      animation-range: entry 6% entry 54%;
    }
    .proof-item:nth-child(even) { animation-range: entry 15% entry 63%; }

    /* --- The sample report: the payoff moment of the whole page --- */
    .hm-score { animation: otwPop linear both; animation-timeline: view(); animation-range: entry 10% entry 58%; }
    .hm-ci-bar .range {
      transform-origin: 50% 50%;
      animation: otwSpread linear both;
      animation-timeline: view();
      animation-range: entry 18% entry 72%;
    }
    .hm-ci-bar .pt { animation: otwPop linear both; animation-timeline: view(); animation-range: entry 30% entry 78%; }
    .hm-rec { animation: otwRiseSm linear both; animation-timeline: view(); animation-range: entry 8% entry 56%; }

    /* The comparison rows keep a light entrance because they are a sequence,
       and arriving in order tells the reader to read them in order. The FAQ,
       the pricing rows and the footer no longer animate: they are reference,
       and reference should simply be there when you arrive at it.
       .pricing-card stays out for a separate reason: .pricing-badge is
       positioned above the card's top edge, so compositing the card floats the
       badge over the sticky nav. */
    .cmp-row {
      animation: otwRiseSm linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 50%;
    }
  }

  /* --- Progress --- */
  /* Removed, not moved. A scroll-driven animation on a pseudo-element of the
     sticky bar promotes the bar itself onto a compositor layer that updates on
     the scroll thread, and a composited sticky header is exactly the shape of
     bug being chased here. The bar now has nothing attached to it that reacts
     to scroll at all, which is the only way to be sure. A progress indicator
     can come back as its own fixed element, owning its own layer and leaving
     the header alone, once the bar is confirmed solid. */

  /* The action bar rises into place rather than being switched on. */
  .mobile-cta {
    transition: transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1),
                visibility 0s linear 280ms;
  }
  .mobile-cta.is-on {
    transition: transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1),
                visibility 0s linear 0s;
  }

  /* --- The fallback path, for browsers without scroll-driven animations --- */
  /* nav-state.js puts .otw-reveal-js on <html> and .otw-rv on each element only
     when it has an IntersectionObserver to bring them back. Nothing here can
     hide content that will not be revealed. */
  .otw-reveal-js .otw-rv {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 560ms cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 560ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .otw-reveal-js .otw-rv.is-in { opacity: 1; transform: translateY(0); }
}

/* Motion is a preference, and this is a lot of it. Everything above resolves to
   the finished state with no movement at all. */
@media (prefers-reduced-motion: reduce) {
  .proof-item, .hm-score, .hm-ci-bar .range, .hm-ci-bar .pt, .hm-rec,
  .cmp-row, .pricing-card, .pricing-compare tr, .faq-item, .foot-group,
  main > section > .wrap > h2, main > section > .wrap > p,
  main > section > .wrap > .signal-eyebrow {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  header.site-header::after { display: none; }
  .mobile-cta, .mobile-cta.is-on { transition: none; }
  .otw-reveal-js .otw-rv { opacity: 1 !important; transform: none !important; transition: none !important; }
}