/* Generated by tools/build-home-css.sh. Do not edit; edit the section files and rebuild. */

/* ==== assets/home-base.css ==== */
/* Homepage base styles, moved out of index.html (2026-09-09, HOME_CSS_BUNDLE). Edit here, then run tools/build-home-css.sh and bump ?v=home in index.html. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    /* Design System 2 / tcs-tokens.ts + DESIGN_DIRECTION */
    --navy: #0B1829;
    --navy-mid: #152236;
    --navy-light: #22344F;
    --panel: #152236;
    --electric: #2A8EFF;
    --electric-dim: #1a6fd0;
    --electric-print: #1F63D6;
    --btn-fill: #1F63D6;      /* HIG_AUDIT_V39: white text on #2A8EFF measured 3.28:1; on this, 5.51:1 */
    --orange: #F26419; /* marker only */
    --white: #FFFFFF;
    --paper: #F4F7FB;
    --muted: #8CA3BE;
    --text-light: #C3D2E4;
    --border: rgba(255,255,255,0.08);
    --border-light: rgba(42,142,255,0.18);
    --shadow-card: 0 8px 24px rgba(0,0,0,0.2);
    --surface-float: #22344F;     /* FLOAT_SURFACE_LOCK: lifted card tone (navy-light) */
    --shadow-float: 0 32px 64px -20px rgba(0,0,0,0.65), 0 12px 28px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.06);
    --radius: 8px;
    --section-pad-y: 80px;
    --section-pad-y-alt: 64px;
    --content-max: 1120px;
    --prose-max: 720px;
    --font-display: 'Barlow Condensed', sans-serif;
    --font-body: 'Barlow', sans-serif;
    --nav-h: 64px;
    --nav-h-mobile: 64px;
  }

  html { scroll-behavior: smooth; }

  body {
    font-family: var(--font-body);
    background: var(--navy);
    color: var(--white);
    font-size: 1.125rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  a { color: inherit; }

  img { max-width: 100%; height: auto; }

  .skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: 999;
    background: var(--btn-fill);
    color: var(--white);
    padding: 12px 24px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 0 0 8px 0;
  }
  .skip-link:focus {
    position: fixed;
    left: 0;
    top: 0;
    width: auto;
    height: auto;
    overflow: visible;
  }

  /* NAV. sticky + solid/blur so content never collides */
  nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(11,24,41,0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    padding: 0 5%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--nav-h);
    gap: 16px;
    transition: background 0.25s ease, backdrop-filter 0.25s ease;
  }

  nav.is-scrolled {
    background: rgba(11,24,41,0.96);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  .nav-logo {
    text-decoration: none;
    display: flex;
    align-items: center;
    flex-shrink: 1;
    min-width: 0;
    max-width: 360px;
  }

  .nav-logo img {
    display: block;
    height: 52px;
    width: auto;
    max-height: 56px;
    max-width: 100%;
    object-fit: contain;
  }

  .nav-links {
    display: flex;
    align-items: center;
    gap: 28px;
    list-style: none;
  }

  .nav-links a {
    font-size: 16px;
    font-weight: 500;
    color: var(--muted);
    text-decoration: none;
    letter-spacing: 0.3px;
    transition: color 0.2s;
    white-space: nowrap;
  }

  .nav-links a:hover { color: var(--white); }

  .nav-cta {
    background: var(--btn-fill) !important;
    color: var(--white) !important;
    padding: 10px 20px !important;
    border-radius: 6px;
    font-weight: 600 !important;
    transition: background 0.2s !important;
    min-height: 44px;
    display: inline-flex !important;
    align-items: center;
  }

  .nav-cta:hover { background: var(--electric-dim) !important; }

  .nav-hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 10px;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
  }

  .nav-hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--white);
    border-radius: 2px;
  }

  /* Gil LOCK · full-viewport hamburger dashboard (OTP feel, TCS tokens) */
  /* MENU_MOTION_LOCK: overlay fades (0.3s), links rise in a 60ms stagger,
     everything settles before the close hides it. [hidden] keeps display:none
     for a11y; JS drops it a frame before .open and restores it after the fade. */
  .mobile-menu {
    display: flex;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    position: fixed;
    inset: 0;
    z-index: 200;
    width: 100%;
    height: 100%;
    min-height: 100dvh;
    background: #0B1829;
    flex-direction: column;
    align-items: stretch;
    padding: max(12px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-menu[hidden] {
    display: none;
  }

  .mobile-menu.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.3s ease, visibility 0s;
  }

  .mobile-menu-link,
  .mobile-menu-cta {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  /* Legal line fades in place with the CTA. No drift, so it never reads as
     floating up after the menu has settled. */
  .mobile-menu-legal {
    opacity: 0;
    transition: opacity 0.2s ease;
  }

  .mobile-menu.open .mobile-menu-link,
  .mobile-menu.open .mobile-menu-cta,
  .mobile-menu.open .mobile-menu-legal {
    opacity: 1;
    transform: none;
    transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1), transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .mobile-menu.open .mobile-menu-link:nth-child(1) { transition-delay: 80ms; }
  .mobile-menu.open .mobile-menu-link:nth-child(2) { transition-delay: 140ms; }
  .mobile-menu.open .mobile-menu-link:nth-child(3) { transition-delay: 200ms; }
  .mobile-menu.open .mobile-menu-link:nth-child(4) { transition-delay: 260ms; }
  .mobile-menu.open .mobile-menu-link:nth-child(5) { transition-delay: 320ms; }
  .mobile-menu.open .mobile-menu-link:nth-child(6) { transition-delay: 380ms; }
  .mobile-menu.open .mobile-menu-cta { transition-delay: 440ms; }
  .mobile-menu.open .mobile-menu-legal { transition-delay: 440ms; }

  @media (prefers-reduced-motion: reduce) {
    .mobile-menu,
    .mobile-menu.open,
    .mobile-menu-link,
    .mobile-menu-cta,
    .mobile-menu-legal,
    .mobile-menu.open .mobile-menu-link,
    .mobile-menu.open .mobile-menu-cta,
    .mobile-menu.open .mobile-menu-legal {
      transition: none;
      transform: none;
    }
  }

  .mobile-menu-top {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 40px;
    margin-bottom: 0;
  }

  .mobile-menu-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--white);
    cursor: pointer;
    font-size: 28px;
    line-height: 1;
  }

  .mobile-menu-close:focus-visible {
    outline: 2px solid var(--electric);
    outline-offset: 2px;
  }

  /* MENU_FIT_SCREEN (Gil, 2026-09-09): the whole menu, Fit Call included,
     fits one phone screen. Rows and type scale with the viewport height;
     the legal line sits after the button in the flow, never floating. */
  .mobile-menu > * { flex-shrink: 0; }
  .mobile-menu-nav {
    /* MENU_NAV_ELEMENT: a div, not <nav>, so the page's sticky bar rules never reach it */
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
    background: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 0 !important;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    /* MENU_BREATHE (Gil, 2026-09-09): the list grows to fill the overlay and
       the rows share the height evenly, so the menu uses the whole screen
       above the Fit Call button instead of bunching at the top. */
    flex: 1 0 auto;
    justify-content: space-between;
    padding: 0;
  }

  .mobile-menu-link {
    padding: 4px 0 !important;
    flex: 1 1 0;
    min-height: 44px; /* HIG_AUDIT_V39: 44pt touch floor */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    width: 100%;
    gap: 14px;
    padding: 18px 0;
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 3.1dvh, 2rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--white);
    text-decoration: none;
    line-height: 1.15;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }

  .mobile-menu-link .n {
    display: inline-block;
    font-size: 0.85em;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 0.02em;
    flex: 0 0 1.75em;
    width: 1.75em;
    min-width: 1.75em;
    text-align: left;
    font-variant-numeric: tabular-nums;
  }

  .mobile-menu-link:hover,
  .mobile-menu-link:focus-visible {
    color: var(--electric);
  }

  .mobile-menu-link:focus-visible {
    outline: 2px solid var(--electric);
    outline-offset: 4px;
  }

  .mobile-menu-cta {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: clamp(10px, 1.6dvh, 20px);
    padding: 13px 22px !important;
    min-height: 46px;
    border-radius: 999px;
    background: var(--btn-fill) !important;
    color: var(--white) !important;
    font-family: var(--font-body);
    font-size: 1.0625rem;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
    text-decoration: none;
    text-transform: none;
  }

  .mobile-menu-cta:hover { background: var(--electric-dim) !important; }

  .mobile-menu-legal {
    position: static;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    padding-top: 4px;
    font-size: 0.8125rem;
    color: var(--muted);
  }

  .mobile-menu-legal a {
    color: var(--muted);
    text-decoration: none;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
  }

  .mobile-menu-legal a:hover { color: var(--electric); }

  .mobile-menu-legal .sep { opacity: 0.5; }

  body.menu-open {
    overflow: hidden;
    touch-action: none;
  }

  /* Sticky Book a Fit Call (OTP chrome pack §2) */
  .sticky-fit-call {
    position: fixed;
    z-index: 90;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 20px;
    border-radius: 999px;
    background: var(--btn-fill);
    color: var(--white);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity 0.22s ease, transform 0.22s ease;
    right: 24px;
    bottom: 24px;
  }

  .sticky-fit-call.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .sticky-fit-call:focus-visible {
    outline: 2px solid var(--white);
    outline-offset: 3px;
  }

  body.menu-open .sticky-fit-call { opacity: 0 !important; pointer-events: none !important; }

  @media (max-width: 820px) {
    .sticky-fit-call {
      right: 16px;
      bottom: max(16px, env(safe-area-inset-bottom, 0px));
      min-height: 44px;
      padding: 12px 18px;
    }
  }

  /* BUTTONS */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--btn-fill);
    color: var(--white);
    padding: 14px 22px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    min-height: 48px;
    border: none;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    font-family: var(--font-body);
  }

  .btn:hover { background: var(--electric-dim); }

  .btn-ghost {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.14);
    color: var(--white);
  }

  .btn-ghost:hover {
    background: rgba(255,255,255,0.04);
    border-color: var(--electric);
  }

  .btn-white {
    background: var(--white);
    color: var(--navy);
  }

  .btn-white:hover { background: #F4F7FB; }

  /* LAYOUT */
  .section {
    padding: var(--section-pad-y) 5%;
    background: var(--navy);
  }

  .section--alt {
    background: var(--panel);
    padding: var(--section-pad-y-alt) 5%;
  }

  .section-inner {
    max-width: var(--content-max);
    margin: 0 auto;
  }

  .prose {
    max-width: var(--prose-max);
  }

  .eyebrow {
    color: var(--muted);
    font-size: 0.8125rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 8px;
  }

  .hero-rule {
    width: 40px;
    height: 3px;
    background: var(--orange);
    margin: 0 0 12px;
    border-radius: 2px;
  }

  .punch {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: clamp(0.9375rem, 2.2vw, 1.125rem);
    line-height: 1.35;
    color: #FFFFFF;
    margin: 0 0 10px;
    max-width: var(--prose-max);
  }

  h1 {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 6vw, 3.5rem);
    line-height: 1.05;
    font-weight: 800;
    margin: 0 0 8px;
    letter-spacing: -0.01em;
  }

  h2 {
    font-family: var(--font-display);
    font-size: clamp(1.625rem, 3.5vw, 2.125rem);
    line-height: 1.2;
    font-weight: 800;
    margin: 0 0 18px;
    letter-spacing: -0.01em;
  }

  .sub {
    color: var(--muted);
    font-size: 1.125rem;
    line-height: 1.6;
  }
  .hero .sub {
    margin: 0;
  }

  /* HERO ENTER. staggered once; reduced-motion shows final */
  .hero-enter {
    opacity: 0;
    transform: translateY(22px);
  }
  .hero.is-ready .hero-enter {
    opacity: 1;
    transform: none;
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  }
  /* The h1 is revealed line by line by reveal.js (marker wipe), not by the rise. */
  .hero .hero-enter[data-rv],
  .hero.is-ready .hero-enter[data-rv] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .hero.is-ready .hero-enter:nth-child(1) { transition-delay: 0ms; }
  .hero.is-ready .hero-enter:nth-child(2) { transition-delay: 50ms; }
  .hero.is-ready .hero-enter:nth-child(3) { transition-delay: 100ms; }
  .hero.is-ready .hero-enter:nth-child(4) { transition-delay: 150ms; }
  .hero.is-ready .hero-enter:nth-child(5) { transition-delay: 200ms; }
  .hero.is-ready .hero-enter:nth-child(6) { transition-delay: 250ms; }
  .hero.is-ready .hero-enter:nth-child(7) { transition-delay: 300ms; }
  .hero.is-ready .hero-enter:nth-child(8) { transition-delay: 350ms; }
  @media (prefers-reduced-motion: reduce) {
    .hero-enter { opacity: 1; transform: none; }
    .hero.is-ready .hero-enter { transition: none; }
  }

  /* HERO. OTP density (DENSITY_PASS_LOCK) */
  /* OPENING_FOLD_LOCK: OTP structure. The fold is a full-height panel over
     the b-roll; the statement panel follows on scroll over the same layer. */
  .hero {
    background: transparent;
    padding: clamp(2.5rem, 6vw, 4rem) 5% clamp(2.5rem, 6vw, 4rem);
    min-height: calc(100vh - var(--nav-h));
    min-height: calc(100dvh - var(--nav-h));
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
  }
  .hero-problem {
    margin-top: 0.875rem; /* HIG_AUDIT_V39: qualifier line sits directly under the button */
    max-width: 760px;
  }
  .hero-problem .hero-fit-strip {
    margin: 0;
  }
  .hero-statement {
    font-size: clamp(1.5rem, 3.2vw, 2rem);
    line-height: 1.2;
    margin: 0 0 12px;
  }
  .hero-problem .sub {
    margin: 0;
    max-width: var(--prose-max);
  }
  .hero .hero-actions {
    margin-top: 1.5rem;
  }
  /* Media and panels share one grid cell: the media is sticky inside the
     full-height cell (no negative margins, so it can never overrun the
     opening), and the panels scroll over it. */
  .opening {
    position: relative;
    background: var(--navy);
    display: grid;
    grid-template-columns: 100%;
  }
  .opening > .hero-media,
  .opening > .opening-panels {
    grid-area: 1 / 1;
  }
  .opening-panels {
    position: relative;
    z-index: 1;
  }
  .opening-panel {
    position: relative;
    z-index: 1;
    min-height: calc(100vh - var(--nav-h));
    min-height: calc(100dvh - var(--nav-h));
    display: flex;
    align-items: center;
    padding: clamp(3rem, 8vw, 5rem) 5%;
    background: transparent;
  }
  .opening-panel .section-inner {
    max-width: var(--content-max);
    margin: 0 auto;
    width: 100%;
  }
  .opening-panel h2 {
    font-size: clamp(2rem, 4.5vw, 2.75rem);
    line-height: 1.1;
    max-width: 18ch;
  }
  .opening-panel .sub {
    max-width: var(--prose-max);
  }
  .workflow-story {
    position: relative;
    z-index: 2;
    background: var(--navy);
    padding-top: clamp(2.5rem, 6vw, 4rem);
  }
  .workflow-story .wt {
    margin-top: 0;
  }

  .hero-inner {
    max-width: var(--content-max);
    margin: 0 auto;
    width: 100%;
    position: relative;
    z-index: 1;
  }

  /* HERO_BROLL_LOCK: optional b-roll under the first viewport of the hero,
     tinted navy so the headline stays readable and fading into the page. */
  .hero-media {
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
  }
  .hero-media video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.2s ease;
    filter: saturate(0.85);
  }
  .opening.is-playing .hero-media video {
    opacity: 0.55;
  }
  .hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(11, 24, 41, 0.6) 0%, rgba(11, 24, 41, 0.66) 100%),
      linear-gradient(90deg, rgba(11, 24, 41, 0.4) 0%, rgba(11, 24, 41, 0) 60%);
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-media { display: none; }
  }

  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.125rem; /* ~18px punch→actions */
  }

  .chips {
    display: flex;
    gap: 0.875rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
  }

  .chip {
    background: var(--panel);
    border: 1px solid var(--border-light);
    padding: 14px 18px;
    border-radius: var(--radius);
    font-size: 0.875rem;
    color: var(--muted);
    min-width: 168px;
    box-shadow: var(--shadow-card);
  }

  .chip strong {
    color: var(--white);
    display: block;
    font-size: 1.25rem;
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-bottom: 2px;
  }


  /* SWIM-LANES. Option 1 LOCK (parallel Current | Target) */
  #problem .swimlanes {
    margin-top: 1.75rem;
    margin-bottom: 48px;
  }

  .swimlanes {
    background: rgba(11,24,41,0.55);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.15rem 1.2rem 1.25rem;
    box-shadow: var(--shadow-card);
    max-width: var(--content-max);
  }

  .swimlanes-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 0.875rem;
    flex-wrap: wrap;
  }

  .swimlanes-head .diagram-label {
    margin-bottom: 0;
  }

  .diagram-label {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--electric);
    font-weight: 600;
  }

  .pill {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--electric);
    background: rgba(42,142,255,0.2);
    border: 1px solid rgba(42,142,255,0.45);
    padding: 6px 12px;
    border-radius: 999px;
    white-space: nowrap;
  }

  .lanes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: start;
  }

  .lane-title {
    margin: 0 0 8px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .lane-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .lane-steps li {
    background: var(--navy);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 0.8125rem; /* HIG_AUDIT_V39: 12px body text raised to 13px */
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.3;
    color: var(--text-light);
  }

  .lane--current .lane-steps li {
    opacity: 0.78;
    border-color: rgba(255,255,255,0.08);
  }

  .lane--target .lane-steps li {
    border-color: rgba(42,142,255,0.35);
    background: rgba(42,142,255,0.08);
    color: var(--white);
    opacity: 1;
    border-left: 2px solid var(--orange);
  }

  .lane--target .lane-title {
    color: var(--electric);
  }

  @media (min-width: 821px) {
    .lane-steps li { font-size: 0.8125rem; }
  }

  /* keep legacy .diagrams unused; avoid mobile stacking lanes */



  /* Option B: 10–100 slim strip under lanes (not chip card) */
  .hero-fit-strip {
    margin: 0.75rem 0 0;
    padding: 0;
    color: var(--muted);
    font-size: 0.8125rem;
    line-height: 1.4;
  }
  .hero-fit-strip strong {
    color: var(--white);
    font-weight: 700;
    margin-right: 0.35rem;
  }
  .hero-below {
    margin-top: 1.25rem;
  }
  .hero-below .hero-actions {
    margin-top: 0.75rem;
  }


  /* Target module carousel N=2 — no segment tabs */
  .lanes--carousel {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: 8px;
  }
  .lane-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
  }
  .lane-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--border-light);
  }
  .lane-dot.is-active {
    background: var(--electric);
  }
  .lane-example-tag {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--muted);
    letter-spacing: 0.02em;
    margin-top: 2px;
    text-transform: none;
  }
  .lane-steps li {
    text-transform: none;
    letter-spacing: 0;
  }

  /* OUTCOMES */
  .outcomes-list {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px;
    margin-top: 1.5rem;
    grid-auto-flow: dense;
  }

  .outcomes-list li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .outcomes-list li {
    color: #FFFFFF; /* OUTCOMES_WHITE (Gil, 2026-09-08): bright white inside the cards */
    font-weight: 500;
    padding: 16px 16px 16px 2.85rem;
    position: relative;
    line-height: 1.55;
    background: rgba(11,24,41,0.45);
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }

  .outcomes-list li::before {
    content: "✓";
    position: absolute;
    left: 16px;
    top: 16px;
    color: var(--electric);
    font-weight: 700;
  }

  /* HOW STEPS. OTP-like short cards (TCS 1–6) */
  .steps {
    counter-reset: step;
    list-style: none;
    margin: 1.5rem 0 0;
    max-width: var(--content-max);
    display: grid;
    grid-template-columns: 1fr;
    gap: 11px;
  }
  @media (min-width: 821px) {
    .steps { grid-template-columns: 1fr 1fr; }
  }

  .steps li {
    margin: 0;
    padding: 16px 16px 16px 3.25rem;
    position: relative;
    color: var(--muted);
    line-height: 1.5;
    font-size: 0.9375rem;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
  }

  .steps li::before {
    counter-increment: step;
    content: counter(step);
    position: absolute;
    left: 14px;
    top: 16px;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: rgba(42,142,255,0.12);
    border: 1px solid var(--border-light);
    color: var(--white);
    font-size: 0.8125rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .steps strong { color: var(--white); }

  #how .btn { margin-top: 24px; }

  /* PROOF */
  .quote {
    background: rgba(11,24,41,0.5);
    padding: 28px 32px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    border-left: 3px solid var(--electric);
    color: var(--muted);
    max-width: 640px;
    font-size: 1.05rem;
    line-height: 1.65;
    font-style: italic;
    box-shadow: var(--shadow-card);
  }

  .quote-attr {
    margin-top: 1rem;
    font-style: normal;
    font-size: 0.875rem;
    color: var(--text-light);
  }

  .quote-attr span {
    color: var(--muted);
    font-size: 0.8125rem;
  }

  .proof-todo {
    margin-top: 1.25rem;
    font-size: 0.8125rem;
    color: var(--muted);
    opacity: 0.75;
  }

  .software .section-inner { max-width: 720px; }

  /* LOWER_BAND_SPACING_LOCK (+ REVISE): soft software + closer + footer
     Facing pads: mobile ≤32 (16+16), desktop ≤40 (20+20).
     Mobile final-cta pb ~28. One .final-cta shorthand (no dead early pt). */
  #software h2 {
    margin-bottom: 12px;
  }
  #software .sub {
    margin: 0;
  }
  #software.section {
    padding: 40px 5% 16px;
  }
  .final-cta {
    text-align: center;
    padding: 16px 5% 28px;
    background: var(--navy);
  }
  @media (min-width: 821px) {
    #software.section { padding: 52px 5% 20px; }
    .final-cta { padding: 20px 5% 56px; }
  }

  .final-cta h2 {
    max-width: 22ch;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.125rem;
  }

  .cta-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.875rem;
    max-width: 560px;
    margin: 1.75rem auto 0;
    text-align: left;
  }

  .cta-form .form-full { grid-column: 1 / -1; }

  .cta-form input,
  .cta-form select {
    width: 100%;
    padding: 14px 16px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.14);
    background: var(--navy-mid);
    color: var(--white);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    min-height: 48px;
  }

  .cta-form input::placeholder { color: var(--muted); }

  .cta-form select { color: var(--muted); }
  .cta-form select:valid { color: var(--white); }

  .cta-form-msg {
    grid-column: 1 / -1;
    font-size: 0.875rem;
    min-height: 1.2em;
  }

  .cta-form-msg.success { color: #4ade80; }
  .cta-form-msg.error { color: #f87171; }

  .cta-note {
    margin-top: 0.75rem;
    color: var(--muted);
    font-size: 0.875rem;
  }

  /* FOOTER */
  footer {
    background: var(--panel);
    border-top: 1px solid var(--border);
    padding: 32px 5% 28px;
  }

  .footer-inner {
    max-width: var(--content-max);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
    flex-wrap: wrap;
  }

  .footer-brand {
    color: var(--muted);
    font-size: 0.875rem;
    line-height: 1.6;
  }

  .footer-brand strong {
    color: var(--white);
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    display: block;
    margin-bottom: 6px;
  }

  .footer-powered {
    opacity: 0.7;
    font-size: 0.8125rem;
    margin-top: 8px;
  }

  .footer-powered a {
    color: #A0B4D8;
    text-decoration: none;
  }

  .footer-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  .footer-bottom {
    max-width: var(--content-max);
    margin: 1.75rem auto 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 0.8125rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
  }

  .footer-legal {
    margin: 0;
    font-size: 0.8125rem;
  }

  .footer-legal a {
    color: #A0B4D8;
    text-decoration: none;
  }

  .footer-legal a:hover { color: var(--electric); }

  .footer-links {
    display: flex;
    gap: 1.25rem; /* ≥20px desktop */
    list-style: none;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    width: 100%;
    justify-content: center;
  }

  .footer-links a {
    color: var(--muted);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 700;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .footer-links a:hover { color: var(--electric); }

  .footer-cta {
    min-height: 48px;
    width: 100%;
    text-align: center;
  }


  /* LOGO_SIZE_LOCK rev · Gil LOCK Option B · 56px mobile */
  @media (max-width: 1023px) {
    nav { height: 64px; }
    .nav-logo { max-width: 340px; }
    .nav-logo img {
      height: 56px;
      max-height: 56px;
      width: auto;
      max-width: 100%;
      object-fit: contain;
    }
  }

  @media (max-width: 767px) {
    nav { height: 64px; }
    .nav-logo { max-width: min(320px, 82vw); }
    .nav-logo img {
      height: 56px;
      max-height: 56px;
      width: auto;
      max-width: 100%;
      object-fit: contain;
    }
  }

  @media (max-width: 820px) {

    nav {
      height: var(--nav-h-mobile);
      padding: 0 16px;
    }
    .nav-links { display: none; }
    .nav-hamburger { display: flex; }
  }
  @media (min-width: 821px) and (max-width: 1024px) {
    .nav-links { gap: 14px; }
    .nav-links a { font-size: 15px; }
    .nav-links > li:nth-child(5) { display: none; }
    .nav-logo { max-width: min(320px, 82vw); }
    .nav-logo img {
      height: 56px;
      max-height: 56px;
      width: auto;
      max-width: 100%;
      object-fit: contain;
    }

    .outcomes-list,
    .cta-form {
      grid-template-columns: 1fr;
    }

    .lanes {
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .lane-steps li {
      padding: 8px 10px;
      font-size: 0.75rem;
      line-height: 1.35;
    }

    .swimlanes {
      padding: 0.9rem 0.75rem 1rem;
    }

    .hero {
      padding: 1.15rem 16px 0.85rem;
      min-height: auto;
    }
    .eyebrow { margin-bottom: 8px; }
    .hero-rule { margin: 0 0 10px; }
    h1 { margin: 0 0 8px; }
    .punch {
      font-size: 0.9375rem;
      font-weight: 700;
      margin: 0 0 0;
      color: #FFFFFF;
    }
    .hero-actions {
      flex-direction: column;
      align-items: stretch;
      gap: 0.75rem;
      margin-top: 1.125rem; /* ~18px punch→actions */
    }
    .hero-fit-strip { margin-top: 0.5rem; }
    .hero-below { margin-top: 1.15rem; }
    .chips { display: none; }

    h1 {
      font-size: clamp(36px, 9vw, 44px);
      line-height: 1.08;
    }

    .sub { font-size: 1.0625rem; }

    .hero-actions .btn { width: 100%; min-height: 48px; }

    .section { padding: clamp(3.25rem, 10vw, 5rem) 5%; }

    .footer-inner {
      flex-direction: column;
      gap: 18px;
    }

    .footer-nav {
      width: 100%;
      gap: 14px;
    }

    .footer-links {
      display: flex;
      flex-wrap: wrap;
      column-gap: 18px;
      row-gap: 8px;
      width: 100%;
      justify-content: center;
    }

    .footer-cta {
      width: 100%;
      text-align: center;
    }

    .footer-bottom {
      flex-direction: column;
      align-items: flex-start;
      gap: 6px;
    }

    .chip { width: 100%; }

    .section { padding: 48px 5%; }
    .section--alt { padding: 40px 5%; }
    /* lower-band pads live in base + 821px rules above; footer pad amend 20–24 */
    footer { padding: 22px 5% 22px; }

  }

  /* RAIL_COLUMN_LOCK: on the homepage the fixed rail owns a 264px column at
     desktop widths (OTP: content padding-left 264px), so page content starts
     to its right instead of underneath it. The top nav keeps its own padding. */
  @media (min-width: 1025px) {
    .section,
    .hero,
    .opening-panel,
    .final-cta,
    footer {
      padding-left: max(5%, 264px);
    }
  }

  /* PROOF_SCOTT_RONE (Gil, 2026-09-18): customer story in the Proof section.
     16:9, full width of the content column, no frame or padding, click to play. */
  .proof-video { margin: 0 0 28px; }
  .proof-video video { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; background: #152235; }
  .proof-video figcaption { margin-top: 10px; color: var(--muted); font-size: 0.95rem; }

/* ==== assets/workflow-transformation.css ==== */
/* WorkflowTransformation — uses site tokens from index.html :root */
.wt {
  --wt-orange: var(--orange, #F26419);
  --wt-electric: var(--electric, #2A8EFF);
  --wt-navy: var(--navy, #0B1829);
  --wt-muted: var(--muted, #8CA3BE);
  --wt-text: var(--text-light, #C3D2E4);
  --wt-border: var(--border, rgba(255,255,255,0.08));
  width: 100%;
  max-width: var(--content-max, 1120px);
  margin-top: 1rem;
  /* FLOAT_SURFACE_LOCK: lifted tone + floating shadow so the card pops off
     the page navy. Inner cards stay page-navy so they read as insets. */
  background: var(--surface-float, #22344F);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius, 8px);
  padding: 1.15rem 1.2rem 1.25rem;
  box-shadow: var(--shadow-float, 0 32px 64px -20px rgba(0,0,0,0.65), 0 12px 28px rgba(0,0,0,0.35));
  overflow-x: clip;
  overflow-y: visible;
  touch-action: pan-y;
}

.wt-inner {
  touch-action: pan-y;
  position: relative;
}

.wt-chrome {
  margin-bottom: 0.85rem;
}

.wt-chrome-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.65rem;
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wt-electric);
}

.wt-chrome-arrow {
  color: var(--wt-orange);
  font-weight: 700;
}

/* WT_CARD_HEADER_LOCK: card header at section-h2 size. */
.wt-tagline {
  margin: 0 0 0.6rem;
  font-family: var(--font-display, 'Barlow Condensed', sans-serif);
  font-size: clamp(1.625rem, 3.5vw, 2.125rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--white, #fff);
}

.wt-stage {
  touch-action: pan-y;
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  min-height: 0;
}

.wt-lists {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem;
  position: relative;
}

@media (min-width: 821px) {
  .wt {
    padding: 1.6rem 1.75rem 1.75rem;
  }
  .wt-lists {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: start;
  }
  .wt-stage {
    overflow-y: visible;
    min-height: 420px;
    transition: min-height var(--tcs-dur-mid) ease;
  }
}

/*
 * WT_DESKTOP_DENSITY_REVISE — desktop only. Same PASS motion language
 * (fade/slide, power2.out). After the 9 Current cards leave, the Current
 * column collapses to width 0 (Target-primary), Target combines to centre,
 * and the REMOVED cluster (3 orange lines + "9 handoffs → 4 connected steps")
 * settles centred UNDER the Target stack — never bottom-left of empty Current.
 * Mobile dual-stack / fire path is untouched (rules scoped ≥ 821px only).
 */
@media (min-width: 821px) {
  .wt.is-condensed .wt-stage {
    min-height: 340px;
  }
  .wt.is-condensed .wt-lists {
    grid-template-columns: minmax(0, 520px);
    justify-content: center;
  }
  .wt.is-condensed .wt-col--current {
    display: none;
  }
  .wt.is-condensed .wt-callouts,
  .wt.is-condensed .wt-closing {
    width: 100%;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }
}

.wt-list {
  touch-action: pan-y;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.wt-list-label {
  margin: 0 0 6px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wt-muted);
}

.wt-list--target .wt-list-label {
  color: var(--wt-electric);
}

.wt-card {
  touch-action: pan-y;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(11, 24, 41, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--wt-text);
  transform-origin: center center;
  width: 100%;
  box-sizing: border-box;
}

.wt-card--current {
  opacity: 0.9;
  border-color: rgba(255, 255, 255, 0.08);
}

.wt-card--current.is-merging {
  border-color: rgba(242, 100, 25, 0.55);
  color: var(--white, #fff);
}

.wt-card--target {
  border-color: rgba(42, 142, 255, 0.35);
  background: rgba(42, 142, 255, 0.08);
  color: var(--white, #fff);
  border-left: 2px solid var(--wt-orange);
  opacity: 0;
  visibility: hidden;
}

/* No !important — GSAP inline opacity must win during the once-enter fade (VISIBLE_MOTION) */
.wt-card--target.is-visible {
  opacity: 1;
  visibility: visible;
}

.wt-card-num {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--wt-muted);
  margin-top: 1px;
}

.wt-card--target .wt-card-num {
  background: rgba(42, 142, 255, 0.18);
  border-color: rgba(42, 142, 255, 0.4);
  color: var(--white, #fff);
}

.wt-card-label {
  flex: 1 1 auto;
  min-width: 0;
}

.wt-callouts {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 1.5rem;
}

.wt-callout {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wt-orange);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
}

.wt-closing {
  margin: 0.9rem 0 0;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--white, #fff);
  opacity: 0;
  visibility: hidden;
}

/* Settled lock: wins over incomplete scrub / CSS opacity:0 fights */
.wt-closing.is-settled {
  opacity: 1 !important;
  visibility: visible !important;
  color: var(--white, #fff) !important;
  pointer-events: auto;
}

.wt.is-reduced .wt-card--current {
  display: none;
}

.wt.is-reduced .wt-card--target {
  opacity: 1;
  visibility: visible;
}

.wt.is-reduced .wt-callout,
.wt.is-reduced .wt-closing {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.wt.is-reduced .wt-closing.is-settled {
  opacity: 1 !important;
  visibility: visible !important;
}

.wt.is-reduced [data-wt-chrome-current] {
  opacity: 0.4;
}

.wt-card--current.is-merged {
  display: none;
  pointer-events: none;
}

/*
 * WT_STORY_MORPH_LOCK: desktop (>= 821px) pinned, scrubbed 9 -> 4 morph.
 * Current sits as a scattered 3x3 field (tilts via --wt-tilt, offsets via
 * margin-top); Target waits as dim slots on the right. An SVG wire layer sits
 * under the cards: orange tangle wires between the nine handoffs, electric
 * merge wires from each handoff to its stage. GSAP drives strokeDashoffset,
 * transform, and opacity only. Mobile rules below are untouched.
 */
.wt-wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
  display: none;
}

.wt-wire {
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wt-wire--tangle {
  stroke: rgba(242, 100, 25, 0.5);
}

.wt-wire--merge {
  stroke: var(--wt-electric);
  stroke-width: 1.75;
}

.wt-col {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.wt-card--target {
  position: relative;
}

.wt-card-glow {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid var(--wt-electric);
  background: rgba(42, 142, 255, 0.12);
  box-shadow: 0 0 0 3px rgba(42, 142, 255, 0.12);
  pointer-events: none;
  opacity: 0;
}

.wt-chrome-count {
  margin-left: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--wt-muted);
}

.wt-chrome-count b {
  font-weight: 700;
  color: var(--wt-orange);
}

.wt-chrome-count.is-lit b {
  color: var(--wt-electric);
}

.wt-col--target .wt-callouts {
  margin-top: 0.75rem;
}

@media (min-width: 821px) {
  .wt.is-story .wt-wires {
    display: block;
  }
  .wt.is-story .wt-stage {
    min-height: 0;
  }
  /* WT_FILL_LOCK (Gil, 2026-09-08): bigger type and cards; both columns
     stretch to the stage so the card has no dead band under the tiles. */
  .wt.is-story .wt-lists {
    grid-template-columns: 1.6fr 1fr;
    gap: 2rem;
    align-items: stretch;
  }
  .wt.is-story .wt-list--current {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 14px;
    align-items: start;
  }
  .wt.is-story .wt-card--current {
    font-size: 1.0625rem;
    line-height: 1.35;
    padding: 14px 16px;
    min-height: 84px;
    rotate: var(--wt-tilt, 0deg);
    will-change: transform, opacity;
    backface-visibility: hidden;
  }
  .wt.is-story .wt-card--current:nth-child(1) { --wt-tilt: -1.4deg; }
  .wt.is-story .wt-card--current:nth-child(2) { --wt-tilt: 1.1deg; margin-top: 10px; }
  .wt.is-story .wt-card--current:nth-child(3) { --wt-tilt: -0.8deg; margin-top: 4px; }
  .wt.is-story .wt-card--current:nth-child(4) { --wt-tilt: 1.3deg; margin-top: 6px; }
  .wt.is-story .wt-card--current:nth-child(5) { --wt-tilt: -1.2deg; }
  .wt.is-story .wt-card--current:nth-child(6) { --wt-tilt: 0.9deg; margin-top: 12px; }
  .wt.is-story .wt-card--current:nth-child(7) { --wt-tilt: -0.9deg; margin-top: 8px; }
  .wt.is-story .wt-card--current:nth-child(8) { --wt-tilt: 1.2deg; }
  .wt.is-story .wt-card--current:nth-child(9) { --wt-tilt: -1.1deg; margin-top: 6px; }
  .wt.is-story .wt-card--target {
    will-change: transform, opacity;
  }
  /* WT_FIT_BOX (Gil, 2026-09-08): the Target column is a flex column, so the
     four tiles share whatever height is left after the label, the REMOVED
     lines and the closing line. Nothing hangs below the card. */
  .wt.is-story .wt-col--target {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .wt.is-story .wt-list--target {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    gap: 12px;
    justify-content: stretch;
  }
  .wt.is-story .wt-card--target {
    flex: 1 1 0;
    align-items: center;
    min-height: 52px;
    max-height: 120px;
    padding: 12px 18px;
    font-size: 1.125rem;
  }
  .wt.is-story .wt-col--target .wt-callouts,
  .wt.is-story .wt-col--target .wt-closing {
    flex: 0 0 auto;
  }
  .wt.is-story .wt-list-label {
    font-size: 0.875rem;
  }
  .wt.is-story .wt-callout {
    font-size: 1rem;
  }
  .wt.is-story .wt-closing {
    font-size: 1.125rem;
  }
  /* Reduced-motion condensed state shows every stage lit. */
  .wt.is-condensed .wt-card-glow {
    opacity: 1;
  }
}

@media (max-width: 820px) {
  .wt-tagline {
    margin-bottom: 0.5rem;
  }
  .wt {
    margin-top: 0.85rem;
    padding: 0.9rem 0.75rem 1rem;
    width: 100%;
    max-width: 100%;
  }

  .wt-card {
    font-size: 0.8125rem;
    padding: 12px 14px;
  }


  .wt-stage {
    overflow-y: visible;
    overflow-x: clip;
  }

  /* Non-sticky target column below current: four distinct cards, no sticky clip */
  .wt-col--target {
    position: relative;
    top: auto;
    z-index: 1;
    background: var(--wt-navy);
    padding-bottom: 2px;
    margin-top: 0.35rem;
  }

  .wt-list--target {
    gap: 8px;
  }

  .wt-card--target {
    position: relative;
    z-index: 1;
  }

  /* Static touch: both stacks visible; native scroll, no blank CURRENT */
  .wt.is-static-touch .wt-card--current {
    opacity: 0.9;
    visibility: visible;
  }

  .wt.is-static-touch .wt-card--target {
    opacity: 1;
    visibility: visible;
  }
}

/* Hero enter compat */
.hero .wt.hero-enter {
  /* inherits hero-enter transition from page */
}

/* Dual-stack settled: solid after enter (VISIBLE_MOTION) — no !important so GSAP can animate */
.wt.is-dual-stack.is-motion-done .wt-card--target,
.wt.is-dual-stack.is-motion-done .wt-card--target.is-visible,
.wt.is-dual-stack.is-motion-done .wt-card--current {
  opacity: 1;
  visibility: visible;
}

/*
 * WT_STORY_MOBILE: the same 9 -> 4 story on a compact phone layout (< 821px).
 * Current = tight 3x3 field, Target = 2x2 tiles under it, wires drop
 * top-to-bottom. The REMOVED lines + closing overlay the Current field and
 * stamp in once it has emptied, which keeps the pinned card short enough to
 * fit a phone viewport under the sticky nav.
 */
@media (max-width: 820px) {
  .wt.is-story .wt-wires {
    display: block;
  }
  .wt.is-story .wt-lists {
    position: relative;
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }
  .wt.is-story .wt-col--current {
    min-height: 15.5rem; /* reserves the field so the callout overlay never collides */
  }
  .wt.is-story .wt-list--current {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    align-items: start;
  }
  .wt.is-story .wt-card--current {
    font-size: 0.75rem;
    line-height: 1.25;
    padding: 7px 7px;
    gap: 6px;
    rotate: var(--wt-tilt, 0deg);
    will-change: transform, opacity;
    backface-visibility: hidden;
  }
  .wt.is-story .wt-card--current .wt-card-num {
    width: 1rem;
    height: 1rem;
    font-size: 0.5625rem;
  }
  .wt.is-story .wt-card--current:nth-child(1) { --wt-tilt: -1.4deg; }
  .wt.is-story .wt-card--current:nth-child(2) { --wt-tilt: 1.1deg; margin-top: 5px; }
  .wt.is-story .wt-card--current:nth-child(3) { --wt-tilt: -0.8deg; margin-top: 2px; }
  .wt.is-story .wt-card--current:nth-child(4) { --wt-tilt: 1.3deg; margin-top: 3px; }
  .wt.is-story .wt-card--current:nth-child(5) { --wt-tilt: -1.2deg; }
  .wt.is-story .wt-card--current:nth-child(6) { --wt-tilt: 0.9deg; margin-top: 6px; }
  .wt.is-story .wt-card--current:nth-child(7) { --wt-tilt: -0.9deg; margin-top: 4px; }
  .wt.is-story .wt-card--current:nth-child(8) { --wt-tilt: 1.2deg; }
  .wt.is-story .wt-card--current:nth-child(9) { --wt-tilt: -1.1deg; margin-top: 3px; }

  .wt.is-story .wt-col--target {
    position: static; /* overlay children position against .wt-lists */
    margin-top: 0;
    padding-bottom: 0;
    background: transparent;
  }
  .wt.is-story .wt-list--target {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .wt.is-story .wt-card--target {
    font-size: 0.8125rem;
    line-height: 1.3;
    padding: 9px 10px;
    will-change: transform, opacity;
  }
  .wt.is-story .wt-chrome { font-size: 0.75rem; }
  .wt.is-story .wt-list-label { font-size: 0.75rem; }
  .wt.is-story .wt-callout { font-size: 0.75rem; }
  .wt.is-story .wt-closing { font-size: 0.9375rem; }
  .wt.is-story .wt-tagline { font-size: 1.375rem; }
  .wt.is-story .wt-col--target .wt-callouts {
    position: absolute;
    left: 0;
    right: 0;
    top: 1.6rem;
    margin-top: 0;
    z-index: 2;
    pointer-events: none;
  }
  .wt.is-story .wt-closing {
    position: absolute;
    left: 0;
    right: 0;
    top: 6.6rem;
    margin: 0;
    z-index: 2;
    pointer-events: none;
  }
}

/* ==== assets/phase2-motion.css ==== */
/* Design Phase 2 motion LOCK: How stagger + Final CTA rise.
   End-state safety for prefers-reduced-motion (Phase 2 only; WT untouched). */
@media (prefers-reduced-motion: reduce) {
  #how .steps li,
  #contact.final-cta {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==== assets/hub-links.css ==== */
/* HUB_LINKS (Gil, 2026-09-08): "How TCS Closes These Gaps" as a hub. Job
   Tracking sits in the centre; Billing, Crew Management, Job Costing and
   Map Annotator feed into it. On desktop the grid pins under the bar and the
   scroll draws each wire and lights each module in turn; packets then travel
   into the hub. Transform, opacity and stroke only. */
.solutions-grid.hub-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  grid-template-rows: auto auto;
  gap: 44px 64px;
  align-items: stretch;
}
.hub-grid .solution-card { position: relative; z-index: 1; padding: 22px 24px !important; transition: opacity var(--tcs-dur-mid, 0.45s) ease, border-color var(--tcs-dur-mid, 0.45s) ease, box-shadow var(--tcs-dur-mid, 0.45s) ease, transform var(--tcs-dur-short, 0.25s) ease; }
#tcs-hub .solution-card p { font-size: 15px !important; line-height: 1.5 !important; }
#tcs-hub .solution-card h3 { font-size: 1.2rem !important; }
.hub-grid .solution-card[data-spoke="left"] { grid-column: 1; grid-row: 1; }
.hub-grid .solution-card.is-hub { grid-column: 2; grid-row: 1; }
.hub-grid .solution-card[data-spoke="right"] { grid-column: 3; grid-row: 1; }
.hub-grid .solution-card[data-spoke="bottom-left"] { grid-column: 1; grid-row: 2; }
.hub-grid .solution-card[data-spoke="bottom-right"] { grid-column: 3; grid-row: 2; }
.hub-grid .solution-card[data-spoke="bottom"] { grid-column: 2; grid-row: 2; }
.hub-grid .solution-card.is-hub {
  border-color: rgba(42, 142, 255, 0.55);
  background: linear-gradient(180deg, rgba(42, 142, 255, 0.14), rgba(21, 34, 54, 1));
  box-shadow: 0 0 0 1px rgba(42, 142, 255, 0.25), 0 18px 44px -18px rgba(42, 142, 255, 0.55);
}
.hub-grid .solution-card.is-hub::before {
  content: "Hub";
  position: absolute;
  top: 14px;
  right: 14px;
  font-family: var(--font-display, 'Barlow Condensed', sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #F26419;
  border: 1px solid rgba(242, 100, 25, 0.6);
  border-radius: 999px;
  padding: 3px 8px;
}
/* Story state: spokes wait dim until their wire reaches the hub. */
.hub-grid.is-story .solution-card[data-spoke] { opacity: 0.45; }
.hub-grid.is-story .solution-card[data-spoke].is-lit { opacity: 1; border-color: rgba(42, 142, 255, 0.55); box-shadow: 0 0 0 1px rgba(42, 142, 255, 0.2), 0 14px 34px -18px rgba(42, 142, 255, 0.5); }
.hub-wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}
.hub-wires path.wire {
  fill: none;
  stroke: rgba(42, 142, 255, 0.55);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hub-wires .packet { fill: #F26419; opacity: 0; transition: opacity var(--tcs-dur-short, 0.25s) ease; }
.hub-grid.is-linked .hub-wires .packet { opacity: 1; }
.hub-wires .tip { fill: rgba(42, 142, 255, 0.9); opacity: 0; transition: opacity var(--tcs-dur-short, 0.25s) ease; }
.hub-wires .tip.is-lit { opacity: 1; }
@keyframes hubPulse {
  0% { box-shadow: 0 0 0 0 rgba(42, 142, 255, 0.45), 0 18px 44px -18px rgba(42, 142, 255, 0.55); }
  100% { box-shadow: 0 0 0 22px rgba(42, 142, 255, 0), 0 18px 44px -18px rgba(42, 142, 255, 0.55); }
}
.hub-grid.is-linked .solution-card.is-hub { animation: hubPulse 1.1s ease-out 0.2s 1; }
.hub-pin { position: relative; }
@media (min-width: 1025px) { .hub-pin.is-armed > .hub-pin-block { position: sticky; top: calc(var(--tcs-nav-h, 64px) + 12px); } }
@media (max-width: 820px) {
  .solutions-grid.hub-grid { grid-template-columns: 1fr; grid-template-rows: none; gap: 22px; padding-left: 26px; }
  .hub-grid .solution-card.is-hub { grid-column: 1; grid-row: 1; }
  .hub-grid .solution-card[data-spoke="left"] { grid-column: 1; grid-row: 2; }
  .hub-grid .solution-card[data-spoke="right"] { grid-column: 1; grid-row: 3; }
  .hub-grid .solution-card[data-spoke="bottom-left"] { grid-column: 1; grid-row: 4; }
  .hub-grid .solution-card[data-spoke="bottom-right"] { grid-column: 1; grid-row: 5; }
}
@media (prefers-reduced-motion: reduce) {
  .hub-grid .solution-card.is-hub { animation: none !important; }
  .hub-wires .packet { display: none; }
  .hub-grid.is-story .solution-card[data-spoke] { opacity: 1; }
}

/* HUB_ON_HOME (Gil, 2026-09-08): the hub replaces the two homepage islands.
   Base card styles travel with the module so the homepage needs no inline
   copy of the ROI page's card CSS. */
.hub-section .solutions-title { font-family: var(--font-display, 'Barlow Condensed', sans-serif); font-size: clamp(2rem, 3.6vw, 2.75rem); font-weight: 800; text-align: center; color: #FFFFFF; margin: 0 0 12px; text-wrap: balance; }
.hub-section .hub-lede { max-width: 720px; margin: 0 auto 40px; text-align: center; color: var(--text-light, #C3D2E4); line-height: 1.55; }
.hub-section .solutions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.hub-section .solution-card { background: var(--navy-mid, #152236); border: 1px solid var(--border, rgba(255,255,255,0.08)); border-radius: 12px; padding: 28px; text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: border-color var(--tcs-dur-mid, .45s) var(--tcs-ease-out), transform var(--tcs-dur-short, .25s) var(--tcs-ease-out), background var(--tcs-dur-mid, .45s) var(--tcs-ease-out); }
.hub-section .solution-card:hover { border-color: rgba(255,255,255,0.18); transform: translateY(-4px); background: linear-gradient(135deg, rgba(42,142,255,0.08), var(--navy-mid, #152236)); }
.hub-section .solution-card h3 { font-family: var(--font-display, 'Barlow Condensed', sans-serif); font-size: 1.2rem; font-weight: 800; margin: 0 0 10px; color: #FFFFFF; }
.hub-section .solution-card p { color: var(--text-light, #C3D2E4); margin: 0 0 16px; flex-grow: 1; }
.hub-section .solution-link { display: inline-flex; align-items: center; gap: 6px; color: var(--electric, #2A8EFF); font-weight: 600; font-size: 15px; }
.hub-section .solution-card:hover .solution-link { color: #FFFFFF; }
.hub-section .hub-jobs { text-align: center; margin: 40px auto 0; color: var(--text-light, #C3D2E4); max-width: 720px; }
.hub-section .hub-jobs a { color: var(--electric, #2A8EFF); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(42,142,255,0.4); }
.hub-section .hub-jobs a:hover { color: #FFFFFF; border-bottom-color: #FFFFFF; }

/* ==== assets/software-band.css ==== */
/* SOFTWARE_BAND_LOCK (Gil, 2026-09-08): the "system doesn't stop at a
   roadmap" block flies in from the right as you scroll while an orange road
   fills left to right beneath it, in proportion to the scroll.
   SOFTWARE_BAND_INSIDE (Gil, 2026-09-08): the copy sits inside the road, the
   road bleeds edge to edge, and it is as tall as the paragraph needs.
   Transform and opacity only. */
.software-band-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

#software.section.software-band-section {
  padding: 0;
  margin: 28px 0 24px;
}

.software-band {
  position: absolute;
  inset: 0;
  display: block;
  background: var(--orange, #F26419);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
  z-index: 0;
}

.software-band-copy {
  position: relative;
  z-index: 1;
  padding: 44px 5% 48px;
  will-change: transform, opacity;
}

/* SOFTWARE_BAND_TYPE (Gil, 2026-09-08): bigger and bolder on the road. */
#software .software-band-copy h2 {
  color: #0B1829;
  font-size: clamp(2rem, 3.8vw, 3.1rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
  text-wrap: balance;
}

#software .software-band-copy .sub {
  color: #0B1829;
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  font-weight: 600;
  line-height: 1.45;
  margin: 0;
  max-width: 780px;
}

@media (min-width: 821px) {
  #software.section.software-band-section { margin: 36px 0 28px; }
  .software-band-copy { padding: 56px 5% 60px; }
}

/* No JS or reduced motion: final state, no movement. */
html.no-js .software-band,
html.software-band-static .software-band {
  transform: none;
}

/* ==== assets/outcomes-stack.css ==== */
/* OUTCOMES_STACK_LOCK (Gil, 2026-09-08): the outcome cards stack as you
   scroll, bottom row first, like building blocks, each landing with an
   orange fill that settles to an orange tint. Transform and opacity only. */
.outcomes-list[data-outcomes-stack] li {
  position: relative;
  overflow: hidden;
}

.outcomes-list .oc-fill {
  position: absolute;
  inset: 0;
  background: var(--orange, #F26419);
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}

.outcomes-list .oc-text {
  position: relative;
  z-index: 1;
}

.outcomes-list li::before {
  z-index: 1;
}

.outcomes-list li.is-set {
  border-color: rgba(242, 100, 25, 0.55);
}

.outcomes-list li.is-set .oc-fill {
  transform: none;
  opacity: 0.2;
}

/* No JS or reduced motion: every card set, no movement. */
html.outcomes-stack-static .outcomes-list li .oc-fill {
  transform: none;
  opacity: 0.2;
}
html.outcomes-stack-static .outcomes-list li {
  border-color: rgba(242, 100, 25, 0.55);
}

/* OUTCOMES_BUILD_PIN (Gil, 2026-09-08): the section pins while the blocks
   build from the foundation up, one row per scroll step, so nothing is
   already standing when it comes into view. Compact cards on phones so the
   whole stack fits under the bar while pinned. */
@media (max-width: 820px) {
  .outcomes-list[data-outcomes-stack] li {
    padding: 11px 12px 11px 2.5rem;
    font-size: 16px !important;
    line-height: 1.4;
  }
  .outcomes-list[data-outcomes-stack] li::before {
    top: 11px;
    left: 12px;
  }
  .outcomes-list[data-outcomes-stack] {
    gap: 9px;
    margin-top: 1rem;
  }
}

/* ==== assets/how-steps.css ==== */
/* HOW_STEPS_ACHIEVE (Gil, 2026-09-08): "How we work with you" reads as
   progress being made. Each step is checked off as it scrolls into view: the
   number badge flips to a filled orange disc, a check draws in, the card's
   edge lights. When all six are checked, a completion line appears and the
   Fit Call button gives one pulse. Transform and opacity only; reduced motion
   shows every step checked. */
#how .steps li { transition: border-color var(--tcs-dur-mid) ease, background-color var(--tcs-dur-mid) ease; }
#how .steps li .hw-check {
  position: absolute;
  left: 14px;
  top: 16px;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: #F26419;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0);
  transition: transform var(--tcs-dur-mid) var(--tcs-ease-pop);
  will-change: transform;
}
#how .steps li .hw-check svg { width: 14px; height: 14px; display: block; }
#how .steps li .hw-check path {
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 22;
  stroke-dashoffset: 22;
  transition: stroke-dashoffset var(--tcs-dur-mid) ease var(--tcs-dur-short);
}
#how .steps li.is-done .hw-check { transform: scale(1); }
#how .steps li.is-done .hw-check path { stroke-dashoffset: 0; }
#how .steps li.is-done { border-color: rgba(242, 100, 25, 0.55); background: rgba(242, 100, 25, 0.06); }
#how .steps li::before { transition: opacity var(--tcs-dur-short) ease; }
#how .steps li.is-done::before { opacity: 0; }

/* Completion line: appears once all six are checked */
#how .hw-done {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 0;
  font-family: var(--font-display, 'Barlow Condensed', sans-serif);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #F26419;
  opacity: 0;
  transform: translateY(10px);
  /* HW_DONE_SLOW (Gil, 2026-09-09): the closing line reveals slowly after the
     sixth check, then the rule draws out behind it. Deliberately longer than
     the motion tokens: this is the section's last word. */
  transition: opacity 1.6s var(--tcs-ease-out) 0.3s, transform 1.6s var(--tcs-ease-out) 0.3s;
}
#how .hw-done .hw-done-bar {
  flex: 1 1 auto;
  height: 2px;
  background: rgba(242, 100, 25, 0.5);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 2.2s var(--tcs-ease-out) 1.2s;
}
#how.is-complete .hw-done { opacity: 1; transform: none; }
#how.is-complete .hw-done .hw-done-bar { transform: scaleX(1); }
@keyframes hwPulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.05); }
  100% { transform: scale(1); }
}
#how.is-complete .btn { animation: hwPulse var(--tcs-dur-long) var(--tcs-ease-pop) 2.4s 1; }

@media (prefers-reduced-motion: reduce) {
  #how .steps li .hw-check, #how .steps li .hw-check path, #how .hw-done, #how .hw-done .hw-done-bar { transition: none !important; }
  #how.is-complete .btn { animation: none !important; }
}

/* ==== assets/homepage-spine.css ==== */
/* HOMEPAGE SPINE — HOMEPAGE_SPINE_PLACEMENT_LOCK + Design Option A
   Calm vertical step list. TCS navy/electric/orange only.
   No ScrollTrigger. No pin. Light enter stagger (IO-driven .in class).
   Leaves WT + map-to-invoice untouched. */

#spine {
  border-top: 1px solid rgba(255,255,255,0.06);
}

#spine .spine-head {
  margin: 0 0 8px;
}

#spine .spine-sub {
  color: var(--muted);
  margin: 0 0 32px;
  max-width: 56ch;
}

/* Vertical step list */
#spine .spine-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 680px;
  position: relative;
}

/* The spine line runs behind the numbered nodes */
#spine .spine-list::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, var(--electric) 0%, var(--navy-light) 100%);
  opacity: 0.55;
}

#spine .spine-step {
  position: relative;
  display: grid;
  grid-template-columns: 36px 1fr;
  column-gap: 16px;
  align-items: start;
  padding: 0 0 22px;
}

#spine .spine-step:last-child {
  padding-bottom: 0;
}

/* Numbered node */
#spine .spine-num {
  position: relative;
  z-index: 1;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--white);
  background: var(--navy-mid);
  border: 2px solid var(--electric);
  box-shadow: var(--shadow-card);
}

#spine .spine-body {
  padding-top: 4px;
}

#spine .spine-label {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1875rem;
  letter-spacing: 0.01em;
  color: var(--white);
  line-height: 1.25;
}

#spine .spine-detail {
  display: block;
  color: var(--text-light);
  font-size: 0.9375rem;
  margin-top: 2px;
}

/* SPINE_MARKER_LOCK (Gil, 2026-09-08): the orange node starts on step 1 and
   moves down to the step nearest the reading line as you scroll. The line
   fills in orange behind it. Transform and colour only. */
#spine .spine-list::after {
  content: "";
  position: absolute;
  left: 17px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--orange);
  transform: scaleY(var(--spine-progress, 0));
  transform-origin: top center;
  transition: transform var(--tcs-dur-mid) ease-out;
}
#spine .spine-num {
  transition: border-color var(--tcs-dur-short) ease, background-color var(--tcs-dur-short) ease, box-shadow var(--tcs-dur-short) ease, transform var(--tcs-dur-short) ease;
}
#spine .spine-step.is-active .spine-num {
  border-color: var(--orange);
  background: rgba(242, 100, 25, 0.14);
  box-shadow: 0 0 0 5px rgba(242, 100, 25, 0.16), var(--shadow-card);
  transform: scale(1.08);
}
#spine .spine-step.is-done .spine-num {
  border-color: var(--orange);
}
@media (prefers-reduced-motion: reduce) {
  #spine .spine-list::after { transition: none; }
  #spine .spine-num { transition: none; }
  #spine .spine-step.is-active .spine-num { transform: none; }
}

/* Optional packet line, nested under step 5 */
#spine .spine-optional {
  margin-top: 8px;
  padding: 8px 12px;
  border-left: 2px solid var(--orange);
  background: rgba(242,100,25,0.06);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--muted);
  font-size: 0.875rem;
}

/* Light enter stagger — hidden state only applies once JS marks the list.
   No-JS users see everything immediately. */
#spine .spine-list.spine-anim .spine-step {
  opacity: 0;
  transform: translateY(12px);
}

#spine .spine-list.spine-anim.in .spine-step {
  opacity: 1;
  transform: none;
  transition: opacity var(--tcs-dur-mid) ease, transform var(--tcs-dur-mid) ease;
}

#spine .spine-list.spine-anim.in .spine-step:nth-child(1) { transition-delay: 0ms; }
#spine .spine-list.spine-anim.in .spine-step:nth-child(2) { transition-delay: 80ms; }
#spine .spine-list.spine-anim.in .spine-step:nth-child(3) { transition-delay: 160ms; }
#spine .spine-list.spine-anim.in .spine-step:nth-child(4) { transition-delay: 240ms; }
#spine .spine-list.spine-anim.in .spine-step:nth-child(5) { transition-delay: 320ms; }

@media (prefers-reduced-motion: reduce) {
  #spine .spine-list.spine-anim .spine-step {
    opacity: 1;
    transform: none;
  }
  #spine .spine-list.spine-anim.in .spine-step {
    transition: none;
  }
}

@media (max-width: 640px) {
  #spine .spine-sub { margin-bottom: 24px; }
  #spine .spine-label { font-size: 1.125rem; }
}

/* ==== assets/reveal.css ==== */
/*
 * HEADLINE_MARKER_REVEAL_LOCK: line-by-line marker reveal for headlines.
 * JS splits a [data-rv] heading into natural lines, lays a solid bar over each
 * line, and wipes the bars off right-to-left (scaleX 1 -> 0, power3.inOut,
 * 0.12s line stagger). Hero h1 plays on load; section h2s play once on enter.
 * html.rv-js is set inline in <head> so a JS-enabled page never flashes the
 * unrevealed heading; without JS the headings simply render.
 */
/* Load-mode headings (hero) hide from first paint; everything else only
   once the visitor has scrolled (html.rv-armed), so a non-scrolling renderer
   sees the page fully visible. */
html.rv-js [data-rv="load"]:not(.rv-shown),
html.rv-armed [data-rv]:not(.rv-shown) {
  visibility: hidden;
}

.rv-line {
  position: relative;
  display: block;
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
}

.rv-bar {
  position: absolute;
  inset: -0.06em 0;
  background: var(--rv-bar, var(--electric, #2A8EFF));
  transform-origin: right center;
  pointer-events: none;
  will-change: transform;
}

/* COPY_SCRUB_RISE_LOCK */
.rv-line--scrub {
  overflow: visible;
  will-change: transform, opacity;
}

/* Rise targets stay invisible until GSAP takes over (no flash on load). */
html.rv-armed [data-rv-rise]:not(.rv-shown),
html.rv-armed [data-rv-rise-group] > :not(.rv-shown) {
  opacity: 0;
}

/* PROOF_ODOMETER_LOCK: each digit is a 10-row roller inside a 1em mask. */
[data-odometer] {
  display: inline-flex;
  align-items: baseline;
  line-height: 1;
}

.odo-slot {
  display: inline-block;
  height: 1em;
  overflow: hidden;
  vertical-align: baseline;
}

.odo-roll {
  display: block;
  will-change: transform;
}

.odo-roll span {
  display: block;
  height: 1em;
  line-height: 1;
}

.odo-static {
  display: inline-block;
  line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
  html.rv-js [data-rv],
  html.rv-armed [data-rv],
  html.rv-armed [data-rv-rise]:not(.rv-shown),
  html.rv-armed [data-rv-rise-group] > :not(.rv-shown) {
    visibility: visible;
    opacity: 1;
  }
  .rv-bar {
    display: none;
  }
}

/* ==== assets/rail.css ==== */
/*
 * SIDE_RAIL_SPY_LOCK (OTP-matched): fixed left column on the homepage at
 * >= 1025px. Links start 40px under the nav at x=51, 12.8px bold uppercase
 * with 0.1em tracking on a 27px row pitch, numbers at 66%, rows at 62% until
 * hovered or active. A 14px electric marker sits at x=26 beside the active
 * row. Legal links sit bottom-left. The page content is offset to 264px on
 * the homepage so the column never collides (see index.html). Hidden while
 * the mobile menu is open; reduced motion drops the transitions.
 */
.rail {
  --rail-electric: var(--electric, #2A8EFF);
  --rail-text: #FFFFFF;
  --rail-muted: rgba(255, 255, 255, 0.66);
  position: fixed;
  left: 26px;
  top: 2px; /* RAIL_LOGO_UP (Gil, 2026-09-08): the wordmark sits inside the 64px top strip */
  bottom: 24px;
  z-index: 101; /* above the sticky top bar so the rail logo sits in its row */
  display: none;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  width: auto;
  height: auto;
  padding: 0;
  background: none;
  border: 0;
  opacity: 0;
  transition: opacity var(--tcs-dur-long) ease;
  pointer-events: none;
}

.rail.is-ready {
  opacity: 1;
  pointer-events: auto;
}

body.menu-open .rail {
  opacity: 0;
  pointer-events: none;
}

@media (min-width: 1025px) {
  .rail {
    display: flex;
  }
}

.rail-logo {
  display: block;
  width: 170px;
  height: 64px;
  margin: 0 0 24px;
  line-height: 0;
}

.rail-logo svg {
  display: block;
  width: 210px;
  height: 64px;
  overflow: visible;
}

.rail-logo .tcs-wordmark {
  width: 210px;
  height: 64px;
}

/* HEADER_TRANSPARENT_LOCK: with the rail carrying the logo and the section
   links, the top bar on this page at desktop widths reduces to a fixed,
   transparent strip holding only the Fit Call button (OTP header). The
   opening then runs from the very top of the viewport. */
@media (min-width: 1025px) {
  html.has-rail {
    scroll-padding-top: var(--nav-h, 64px);
  }
  html.has-rail nav,
  html.has-rail nav.is-scrolled {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 0;
    justify-content: flex-end;
  }
  html.has-rail nav .nav-logo {
    display: none;
  }
  /* NAV_MODULES_LOCK: the strip carries the module links beside the CTA
     (section links live in the rail). Text shadow keeps them legible over
     the b-roll with no bar behind them. */
  html.has-rail nav .nav-links {
    gap: 26px;
  }
  html.has-rail nav .nav-links a:not(.nav-cta) {
    color: rgba(255, 255, 255, 0.86);
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7);
  }
  html.has-rail nav .nav-links a:not(.nav-cta):hover {
    color: #FFFFFF;
  }
  html.has-rail .hero {
    min-height: 100vh;
    min-height: 100dvh;
    padding-top: calc(var(--nav-h, 64px) + 2.5rem);
  }
  html.has-rail .opening-panel {
    min-height: 100vh;
    min-height: 100dvh;
  }
}

.rail-top {
  display: flex;
  flex-direction: column;
}

.rail-nav {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.rail-marker {
  position: absolute;
  left: 0;
  top: 2px;
  width: 14px;
  height: 14px;
  background: var(--rail-electric);
  transition: transform var(--tcs-dur-mid) var(--tcs-ease-inout), opacity var(--tcs-dur-short) ease;
  opacity: 0;
  pointer-events: none;
}

.rail.has-active .rail-marker {
  opacity: 1;
}

.rail-link {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 0;
  padding: 0 0 0 25px;
  font-family: var(--font-body, 'Barlow', sans-serif);
  font-size: 14px;
  line-height: 18px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rail-text);
  text-decoration: none;
  opacity: 0.62;
  transition: opacity var(--tcs-dur-short) ease;
  white-space: nowrap;
}

.rail-link:hover,
.rail-link:focus-visible,
.rail-link.is-active {
  opacity: 1;
}

.rail-link:focus-visible {
  outline: 2px solid var(--rail-electric);
  outline-offset: 3px;
}

.rail-idx {
  flex: 0 0 auto;
  width: 27px;
  color: var(--rail-muted);
  font-weight: 700;
}

.rail-label {
  opacity: 1;
  transform: none;
}

.rail-foot,
.rail-foot__pages,
.rail-foot__legal {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 0;
}

.rail-foot__pages a {
  opacity: 0.8;
}

.rail-foot a {
  font-family: var(--font-body, 'Barlow', sans-serif);
  font-size: 11.2px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rail-text);
  text-decoration: none;
  opacity: 0.7;
  transition: opacity var(--tcs-dur-short) ease;
}

.rail-foot a:hover,
.rail-foot a:focus-visible {
  opacity: 1;
}

.rail-foot__rule {
  width: 18px;
  height: 1px;
  background: currentColor;
  opacity: 0.35;
  margin: 6px 0;
}

@media (prefers-reduced-motion: reduce) {
  .rail,
  .rail-marker,
  .rail-link,
  .rail-foot a {
    transition: none;
  }
}

/* ==== assets/explainer-clips.css ==== */
/* EXPLAINER_CLIPS (Gil, 2026-09-08): the Higgsfield explainer on the site.
   Full 80-second cut on the homepage platform section; ten-second segments
   as before/with-TCS pairs on the solution pages. Clips are muted, loop,
   play only while on screen, and never crop: every frame shows at 16:9. */
.xc { margin: 0; position: relative; }
.xc-media { position: relative; }
.xc video { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: contain; background: #0B1829; border-radius: 12px; }
.xc-feature { max-width: 1080px; margin: 0 auto 44px; }
.xc-feature video { border: 1px solid rgba(255,255,255,0.10); box-shadow: 0 30px 80px -30px rgba(0,0,0,0.7), 0 0 0 1px rgba(42,142,255,0.12); }
.xc-feature .xc-logo { position: absolute; top: 14px; left: 16px; width: 150px; height: auto; opacity: 0.92; pointer-events: none; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6)); }
.xc-feature figcaption { text-align: center; color: var(--text-light, #C3D2E4); margin: 14px 0 0; font-size: 16px; }
.xc-sound { position: absolute; right: 14px; bottom: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.25); background: rgba(11,24,41,0.72); color: #FFFFFF; font: 600 14px/1 var(--font-body, 'Barlow', sans-serif); cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background var(--tcs-dur-short, .25s) var(--tcs-ease-out), transform var(--tcs-dur-short, .25s) var(--tcs-ease-out); }
.xc-sound:hover { background: rgba(42,142,255,0.85); transform: translateY(-1px); }
.xc-sound[aria-pressed="true"] { background: var(--electric, #2A8EFF); border-color: transparent; }
.xc-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 0 0 2.5rem; }
.xc-pair .xc { border-radius: 14px; padding: 10px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); }
.xc-pair .xc.is-bright { border-color: rgba(42,142,255,0.35); background: linear-gradient(180deg, rgba(42,142,255,0.10), rgba(255,255,255,0.02)); }
.xc-pair .xc.is-dark { filter: saturate(0.9); }
.xc-pair figcaption { display: flex; align-items: baseline; gap: 10px; padding: 12px 6px 4px; color: var(--text-light, #C3D2E4); font-size: 15px; line-height: 1.4; }
.xc-pair .xc-tag { flex: none; font-family: var(--font-display, 'Barlow Condensed', sans-serif); font-size: 12px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; padding: 4px 8px; border-radius: 4px; }
.xc.is-dark .xc-tag { color: #FFFFFF; background: rgba(255,255,255,0.12); }
.xc.is-bright .xc-tag { color: #FFFFFF; background: var(--orange, #F26419); }
.xc-single { max-width: 720px; margin: 28px auto 0; }
.xc-single figcaption { text-align: center; color: var(--text-light, #C3D2E4); font-size: 15px; margin-top: 12px; }
.xc-head { font-family: var(--font-display, 'Barlow Condensed', sans-serif); font-size: 1.35rem; font-weight: 800; color: #FFFFFF; margin: 0 0 14px; }
@media (max-width: 760px) {
  .xc-pair { grid-template-columns: 1fr; gap: 14px; }
  .xc-feature .xc-logo { width: 110px; top: 10px; left: 10px; }
  .xc-feature figcaption { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .xc-sound { display: none; } }

/* ==== assets/tcs-type.css ==== */
/* TYPE_FLOOR_LOCK: one readable scale across every page (Gil, 2026-09-08:
   "a good size font easy to read throughout"). Loaded after each page's own
   styles. Floors, not overrides: max(floor, inherited) keeps larger sizes. */
body { font-size: 18px; line-height: 1.65; }

/* The workflow card (.wt) is a diagram, not body copy: its own stylesheet
   sizes it per breakpoint, so it is exempt (WT_MOBILE_FIT, 2026-09-08). */
main p:not(.eyebrow):not(.meta-label):not(.video-slot-k):not(.article-meta):not(.post-meta):not(.disclaimer):not(.input-help):not(.footer-family):not(.footer-nap):not(.note):not(.scroll-hint):not(.spine-sub):not(.wt-chrome):not(.wt-callout):not(.wt-closing):not(.wt-list-label):not(.wt-tagline):not(.pth-panel-helper):not(.pth-panel-title):not(.pth-panel-meta):not(.pth-chrome-id),
main li:not(.wt-card), main dd, main dt, main blockquote, main td, main th, main label, main figcaption, main summary,
article p:not(.eyebrow), article li,
.article-container p, .article-container li,
.feature-card p, .step p, .card p, .diff-item p, .solution-card p,
.cta-section p, .cta-inner p, .hero p, .hero-sub, .lede,
.faq-answer-text, .post-card p, .blog-cta-inner p,
.states .helper, .steps-list li, .compare-row .k, .headline-card p, .assumptions li {
  font-size: max(17px, 1em) !important;
  line-height: 1.65;
}

/* Secondary text keeps a 15px floor. */
.article-meta, .post-meta, .related-post-excerpt, .input-help, .disclaimer,
.footer-tagline, .footer-links a, .footer-section a, .footer-section li, .footer-bottom, .footer-bottom p,
.footer-family, .footer-nap, .subscribe-fallback, .tagline, .note, .footer-col a, .footer-contact,
.mobile-menu-legal a, .tcs-mobile-menu-legal a, .post-card .read-more, .post-card .post-meta,
.comparison-table th, .comparison-table td, .column-filters label, .input-group label, .input-value {
  font-size: max(15px, 1em) !important;
}

/* Content headings inside cards and steps. */
.feature-card h3, .step h4, .card h3, .solution-card h3, .diff-item h3,
.post-card h2, .article-container h3, .faq-question, .states b, .steps-list b {
  font-size: max(21px, 1em) !important;
  line-height: 1.25;
}
.step h4::before { width: 32px !important; height: 32px !important; font-size: 15px !important; }

/* Navigation and buttons. */
nav .nav-links a, nav .links a, .nav-links a { font-size: 16px !important; }
.btn, .btn-primary, .cta-button, .nav-cta, .hero-cta, .tcs-mobile-menu-cta, .mobile-menu-cta { font-size: max(16px, 1em) !important; }

/* ==== assets/tcs-footer.css ==== */
/* TCS shared footer (FOOTER_CANONICAL_LOCK, Gil, 2026-09-08).
   One sitemap-style footer on every page: every label goes to its own
   destination, no duplicates, no homepage-anchor stand-ins. Page stylesheets
   still style a bare `footer`; these rules win on purpose. */
footer.tcs-footer {
  background: #08111F !important;
  color: #C3D2E4 !important;
  padding: 56px 5% 28px !important;
  margin: 0 !important;
  border-top: 1px solid rgba(42, 142, 255, 0.18) !important;
  font-family: 'Barlow', sans-serif !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  text-align: left !important;
}
footer.tcs-footer * { box-sizing: border-box; }
.tcsf-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
}
.tcsf-brand strong {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #FFFFFF;
  margin: 0 0 8px;
}
.tcsf-brand p { margin: 0 0 12px; color: #C3D2E4; }
.tcsf-brand a { color: #C3D2E4; text-decoration: none; }
.tcsf-brand a:hover { color: #FFFFFF; }
.tcsf-brand .tcsf-powered { font-size: 14px; color: #8CA3BE; }
.tcsf-brand .tcsf-powered a { color: #A0B4D8; }
.tcsf-cta {
  display: inline-block;
  margin-top: 6px;
  background: #1F63D6; /* HIG_AUDIT_V39: 5.51:1 with white */
  color: #FFFFFF !important;
  padding: 11px 20px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
}
.tcsf-cta:hover { background: #1a6fd0; }
/* FOOTER_HEADINGS (Gil, 2026-09-08): column names bigger and bolder than the
   links under them. */
.tcsf-col h4 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #2A8EFF;
  line-height: 1.1;
  margin: 0 0 14px;
}
.tcsf-col ul { list-style: none; margin: 0; padding: 0; }
.tcsf-col li { margin: 0 0 9px; padding: 0; }
.tcsf-col a {
  color: #C3D2E4;
  text-decoration: none;
  font-size: 16px;
  transition: color var(--tcs-dur-short);
}
.tcsf-col a:hover { color: #FFFFFF; }
.tcsf-col a[aria-current="page"] { color: #FFFFFF; font-weight: 600; }
.tcsf-bottom {
  max-width: 1200px;
  margin: 40px auto 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: #8CA3BE;
  font-size: 14px;
}
.tcsf-bottom p { margin: 0 0 6px; }
.tcsf-bottom a { color: #A0B4D8; text-decoration: none; }
@media (max-width: 960px) {
  .tcsf-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
  .tcsf-brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  footer.tcs-footer { padding: 40px 5% 24px !important; }
  .tcsf-inner { grid-template-columns: 1fr; gap: 28px; }
}

/* HIG_AUDIT_V39: the menu's Resources link lands here under the sticky bar */
#resources { scroll-margin-top: calc(var(--nav-h, 64px) + 16px); }