:root {
    /* Tweakable typography stack */
    --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', system-ui, sans-serif;
    --font-body:    -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, sans-serif;
    --font-mono:    -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, sans-serif;
    --font-serif:   -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', system-ui, sans-serif;
    --display-tracking: -0.025em;
    --display-weight: 500;
    --serif-accents: 1; /* 1 = use serif italic em accents, 0 = sans accents */
    --ink: #020203;
    --bone: #f5f1ea;
    --bone-dim: rgba(245, 241, 234, 0.62);
    --bone-faint: rgba(245, 241, 234, 0.32);
    --hairline: rgba(245, 241, 234, 0.14);
    --accent: #2d4ea8;
    --accent-light: #5a7cd0;
    --accent-deep: #1a2f6e;
    /* 3D blue: highlight at top, deep navy at bottom — gives a subtle "lit" feel */
    --accent-grad: linear-gradient(180deg, #5a7cd0 0%, #3a5fb8 30%, #2d4ea8 60%, #1f3a87 100%);
    --accent-grad-hover: linear-gradient(180deg, #6e8ed8 0%, #4a6fc7 30%, #3a5fb8 60%, #2843a0 100%);
  }

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

  html, body {
    background: #000000;
    color: var(--bone);
    font-family: var(--font-body);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
  }

  body { overflow-x: hidden; font-weight: 400; }

  /* ============================================================
     FIXED CINEMATIC BACKGROUND — three stacked canvas layers
     persist through the whole scroll journey
     ============================================================ */
  .scene {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
  }
  .scene canvas {
    position: absolute;
    inset: 0;
    width: 100vw;
    height: 100vh;
  }
  #bg-canvas  { z-index: 1; }      /* atmospheric fog + motes */
  #net-canvas { z-index: 2; }      /* constellation network */
  #viz-canvas { z-index: 3; }      /* section-tied data viz */

  /* Film grain — fixed too, sits over scene */
  .scene-grain {
    position: fixed;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    opacity: 0.07;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  }

  /* All page content sits above the scene */
  main, footer.site-footer, section { position: relative; z-index: 5; }

  .hero {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    isolation: isolate;
  }

  /* Hero is now full-bleed with constellation flanking both sides;
     no left veil needed — mask handled in scene.js for the center column. */

  /* Foreground content */
  .content {
    position: relative;
    z-index: 5;
    pointer-events: auto;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 32px 48px;
  }

  /* NAV — centered floating pills */
  nav.top-nav {
    position: absolute;
    top: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px;
    background: rgba(10, 10, 12, 0.88);
    border: 1px solid rgba(245, 241, 234, 0.12);
    border-radius: 999px;
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
    animation: fadeDown 1.2s 0.2s cubic-bezier(0.2,0.7,0.2,1) backwards;
  }

  .nav-mark {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(245, 241, 234, 0.06);
    border: 1px solid rgba(245, 241, 234, 0.10);
    display: grid;
    place-items: center;
    color: var(--accent);
    flex-shrink: 0;
  }
  .nav-mark svg { width: 18px; height: 18px; }

  .nav-pill {
    color: var(--bone);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 10px 18px;
    border-radius: 999px;
    transition: background 0.3s ease, color 0.3s ease;
  }
  .nav-pill:hover {
    background: rgba(245, 241, 234, 0.08);
  }
  .nav-pill.cta {
    background: var(--bone);
    color: var(--ink);
  }
  .nav-pill.cta:hover {
    background: var(--accent-grad);
    box-shadow: 0 4px 12px rgba(60, 95, 180, 0.4), inset 0 1px 0 rgba(255,255,255,0.18);
  }

  /* HERO — centered, single moment */
  .hero-center {
    position: relative;
    z-index: 5;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 24px;
  }

  .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    border-radius: 999px;
    background: rgba(10, 10, 12, 0.55);
    border: 1px solid rgba(245, 241, 234, 0.10);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-family: var(--font-mono);
    font-size: 15px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bone-dim);
    margin-bottom: 40px;
    animation: fadeUp 1s 0.5s cubic-bezier(0.2,0.7,0.2,1) backwards;
  }
  .hero-eyebrow .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 12px var(--accent);
    animation: pulse 2.4s ease-in-out infinite;
  }

  .hero-h1 {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(64px, 11vw, 200px);
    line-height: 0.92;
    letter-spacing: -0.025em;
    color: var(--bone);
    margin: 0;
    text-wrap: balance;
  }
  .hero-h1 em {
    font-style: italic;
    color: var(--accent);
    font-weight: 300;
  }
  .hero-h1 .line {
    display: block;
  }
  .hero-h1 .line span {
    display: inline-block;
    animation: rise 1.2s cubic-bezier(0.2,0.7,0.2,1) backwards;
  }
  .hero-h1 .line:nth-child(1) span { animation-delay: 0.7s; }
  .hero-h1 .line:nth-child(2) span { animation-delay: 0.9s; }

  .hero-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 28px;
    border-radius: 999px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.2,0.7,0.2,1);
  }
  .hero-cta.primary {
    background: var(--accent-grad);
    color: #fff;
    border: 1px solid rgba(90, 124, 208, 0.55);
    box-shadow: 0 12px 32px rgba(60, 95, 180, 0.32), inset 0 1px 0 rgba(255,255,255,0.22);
  }
  .hero-cta.primary:hover {
    background: var(--accent-grad-hover);
    border-color: rgba(120, 150, 220, 0.7);
    transform: translateY(-1px);
    box-shadow: 0 16px 40px rgba(60, 95, 180, 0.5), inset 0 1px 0 rgba(255,255,255,0.28);
  }
  .hero-cta.ghost {
    background: rgba(10, 10, 12, 0.55);
    border: 1px solid rgba(245, 241, 234, 0.14);
    color: var(--bone);
  }
  .hero-cta.ghost:hover {
    background: rgba(245, 241, 234, 0.08);
    border-color: rgba(245, 241, 234, 0.28);
  }
  .hero-cta .arrow {
    width: 14px;
    height: 14px;
    transition: transform 0.4s cubic-bezier(0.2,0.7,0.2,1);
  }
  .hero-cta:hover .arrow { transform: translateX(4px); }

  .hero-sub {
    max-width: 580px;
    font-size: 26px;
    line-height: 1.5;
    color: var(--bone-dim);
    font-weight: 300;
    margin: 32px 0 0;
    text-wrap: pretty;
    animation: fadeUp 1s 1.0s cubic-bezier(0.2,0.7,0.2,1) backwards;
  }

  .hero-cta-row {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    animation: fadeUp 1s 1.2s cubic-bezier(0.2,0.7,0.2,1) backwards;
  }

  /* Quiet meta strip pinned to bottom — three proof stats */
  .hero-bottom {
    position: absolute;
    bottom: 32px;
    left: 0; right: 0;
    z-index: 5;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
    padding: 0 48px;
    pointer-events: none;
    animation: fadeUp 1s 1.6s cubic-bezier(0.2,0.7,0.2,1) backwards;
  }
  .hero-bottom .meta-block {
    font-family: var(--font-serif);
    font-size: 32px;
    line-height: 1;
    color: var(--bone);
    letter-spacing: -0.01em;
  }
  .hero-bottom .meta-block .val {
    font-family: var(--font-mono);
    font-size: 15px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bone-faint);
    margin-top: 10px;
    font-weight: 400;
  }

  .brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-serif);
    font-size: 26px;
    letter-spacing: 0.01em;
  }

  .brand-mark {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
  }

  .brand-mark svg { width: 100%; height: 100%; }

  .nav-links {
    display: flex;
    gap: 40px;
    list-style: none;
  }

  .nav-links a {
    color: var(--bone-dim);
    text-decoration: none;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.04em;
    transition: color 0.3s ease;
    position: relative;
  }

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

  .nav-links a::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -6px;
    height: 1px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.2,0.7,0.2,1);
  }

  .nav-links a:hover::after { transform: scaleX(1); }

  .nav-cta {
    display: flex;
    align-items: center;
    gap: 24px;
  }

  .lang {
    font-family: var(--font-mono);
    font-size: 15px;
    letter-spacing: 0.04em;
    color: var(--bone-faint);
    text-transform: uppercase;
  }

  .nav-button {
    background: transparent;
    border: 1px solid var(--hairline);
    color: var(--bone);
    padding: 10px 22px;
    font-size: 15px;
    font-family: inherit;
    font-weight: 400;
    letter-spacing: 0.04em;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.2,0.7,0.2,1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: rgba(245, 241, 234, 0.04);
  }

  .nav-button:hover {
    background: var(--bone);
    color: var(--ink);
    border-color: var(--bone);
  }

  /* MAIN HERO */
  main {
    flex: 1;
    display: grid;
    grid-template-rows: 1fr auto;
    padding: 48px 0 24px;
  }

  .headline-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 1100px;
  }

  .eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-mono);
    font-size: 15px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bone-dim);
    margin-bottom: 36px;
    animation: fadeUp 1s 0.5s cubic-bezier(0.2,0.7,0.2,1) backwards;
  }

  .eyebrow .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 12px var(--accent);
    animation: pulse 2.4s ease-in-out infinite;
  }

  .eyebrow .divider {
    width: 32px;
    height: 1px;
    background: var(--bone-faint);
  }

  h1 {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(56px, 9vw, 148px);
    line-height: 0.92;
    letter-spacing: -0.02em;
    color: var(--bone);
    margin-bottom: 36px;
  }

  h1 em {
    font-style: italic;
    color: var(--accent);
    font-weight: 300;
  }

  .lede {
    font-size: 26px;
    line-height: 1.55;
    color: var(--bone-dim);
    max-width: 480px;
    font-weight: 300;
    animation: fadeUp 1s 1.3s cubic-bezier(0.2,0.7,0.2,1) backwards;
  }

  .cta-row {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 48px;
    animation: fadeUp 1s 1.5s cubic-bezier(0.2,0.7,0.2,1) backwards;
  }

  .cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--bone);
    color: var(--ink);
    border: none;
    padding: 18px 28px;
    border-radius: 999px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.2,0.7,0.2,1);
  }

  .cta-primary:hover {
    background: var(--accent-grad);
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(60, 95, 180, 0.4), inset 0 1px 0 rgba(255,255,255,0.18);
  }

  .cta-primary .arrow {
    width: 18px;
    height: 18px;
    transition: transform 0.4s cubic-bezier(0.2,0.7,0.2,1);
  }

  .cta-primary:hover .arrow { transform: translateX(4px); }

  .cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    background: transparent;
    border: none;
    color: var(--bone);
    font-family: inherit;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.02em;
    cursor: pointer;
    padding: 18px 8px;
    transition: gap 0.4s cubic-bezier(0.2,0.7,0.2,1);
  }

  .cta-secondary:hover { gap: 20px; }

  .cta-secondary .play {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--hairline);
    display: grid;
    place-items: center;
    transition: all 0.4s cubic-bezier(0.2,0.7,0.2,1);
  }

  .cta-secondary:hover .play {
    border-color: var(--bone);
    background: rgba(245,241,234,0.06);
  }

  /* FOOTER ROW */
  footer {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: end;
    padding-top: 32px;
    border-top: 1px solid var(--hairline);
    animation: fadeUp 1s 1.7s cubic-bezier(0.2,0.7,0.2,1) backwards;
  }

  .meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .meta-label {
    font-family: var(--font-mono);
    font-size: 15px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bone-faint);
  }

  .meta-value {
    font-family: var(--font-serif);
    font-size: 26px;
    color: var(--bone);
    font-style: italic;
  }

  .scroll-cue {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    font-family: var(--font-mono);
    font-size: 15px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bone-dim);
  }

  .scroll-line {
    width: 1px;
    height: 48px;
    background: linear-gradient(180deg, transparent, var(--bone-dim), transparent);
    background-size: 100% 200%;
    animation: scrollPulse 2.4s ease-in-out infinite;
  }

  .meta-right {
    text-align: right;
    align-items: flex-end;
  }

  .reel-counter {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 15px;
    letter-spacing: 0.04em;
    color: var(--bone-dim);
    justify-content: flex-end;
  }

  .reel-counter .num {
    color: var(--bone);
    font-size: 15px;
  }

  .reel-counter .total {
    color: var(--bone-faint);
  }

  .reel-bar {
    display: flex;
    gap: 4px;
    margin-top: 8px;
    justify-content: flex-end;
  }

  .reel-bar span {
    width: 24px;
    height: 2px;
    background: var(--bone-faint);
    transition: background 0.4s ease;
  }

  .reel-bar span.active { background: var(--accent); }

  /* Side rail */
  .side-rail {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: left center;
    font-family: var(--font-mono);
    font-size: 15px;
    letter-spacing: 0.3em;
    color: var(--bone-faint);
    text-transform: uppercase;
    z-index: 6;
    white-space: nowrap;
    animation: fadeUp 1s 1.8s cubic-bezier(0.2,0.7,0.2,1) backwards;
  }

  /* Animations */
  @keyframes rise {
    from { transform: translateY(110%); }
    to { transform: translateY(0); }
  }

  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes fadeDown {
    from { opacity: 0; transform: translateX(-50%) translateY(-12px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
  }

  @keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.85); }
  }

  @keyframes scrollPulse {
    0%, 100% { background-position: 0% 0%; }
    50% { background-position: 0% 100%; }
  }

  /* Responsive */
  @media (max-width: 900px) {
    .content { padding: 20px 24px; }
    .nav-links { display: none; }
    main { padding: 32px 0 16px; }
    .lede { font-size: 15px; }
    footer { grid-template-columns: 1fr; gap: 24px; }
    .meta-right { text-align: left; align-items: flex-start; }
    .reel-counter, .reel-bar { justify-content: flex-start; }
    .side-rail { display: none; }
    .scroll-cue { display: none; }
  }

  /* ============================================================
     PAGE SECTIONS — beyond the hero
     ============================================================ */

  section.page-section {
    position: relative;
    padding: 160px 48px;
    border-top: 1px solid var(--hairline);
  }

  /* First section after the hero — fades from hero's deep black
     into a subtle dark wash so the cinematic scene continues through */
  section.page-section#services {
    border-top: none;
    padding-top: 200px;
    background: linear-gradient(180deg,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,0.85) 12%,
      rgba(4,4,4,0.55) 30%,
      rgba(4,4,4,0.45) 100%);
    position: relative;
    z-index: 6;
  }

  /* Soft overlap between hero and services — a gradient sliver pinned
     to the bottom of the hero so the seam dissolves without clipping
     the hero footer */
  .hero::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 80px;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.95) 100%);
    pointer-events: none;
    z-index: 1;
  }

  /* Mid sections — subtle dark wash so cinematic scene reads through */
  section.page-section#pain,
  section.page-section#how,
  section.page-section#clients,
  section.page-section#stack,
  section.page-section#pricing,
  section.page-section#team,
  section.page-section#faq,
  section.page-section#contact {
    background: rgba(4, 4, 4, 0.62);
    backdrop-filter: blur(0.5px);
    -webkit-backdrop-filter: blur(0.5px);
  }



  .container {
    max-width: 1320px;
    margin: 0 auto;
    width: 100%;
  }

  .section-head {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 48px;
    margin-bottom: 96px;
    align-items: start;
  }

  .section-label {
    font-family: var(--font-mono);
    font-size: 15px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bone-faint);
    padding-top: 12px;
    border-top: 1px solid var(--hairline);
  }

  .section-title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(40px, 5.5vw, 88px);
    line-height: 1.0;
    letter-spacing: -0.015em;
    max-width: 14ch;
  }

  .section-title em {
    font-style: italic;
    color: var(--accent);
  }

  /* SERVICES ----------------------------------------------- */

  .services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--hairline);
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
  }

  .service {
    background: rgba(10, 10, 12, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 56px 48px 48px;
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    gap: 28px;
    min-height: 380px;
    transition: background 0.5s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .service::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 20%, rgba(60, 95, 180, 0.10), transparent 60%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
  }

  .service:hover::before { opacity: 1; }
  .service:hover .service-arrow { transform: translate(6px, -6px); color: var(--accent); }

  .service-num {
    font-family: var(--font-mono);
    font-size: 15px;
    letter-spacing: 0.08em;
    color: var(--bone-faint);
  }

  .service-title {
    font-family: var(--font-serif);
    font-size: 40px;
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.01em;
  }

  .service-desc {
    font-size: 15px;
    line-height: 1.6;
    color: var(--bone-dim);
    max-width: 42ch;
  }

  .service-foot {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 24px;
  }

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

  .service-tag {
    font-family: var(--font-mono);
    font-size: 15px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bone-dim);
    padding: 6px 12px;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    white-space: nowrap;
  }

  .service-arrow {
    width: 22px;
    height: 22px;
    color: var(--bone-dim);
    flex-shrink: 0;
    transition: all 0.5s cubic-bezier(0.2,0.7,0.2,1);
  }

  /* APPROACH ----------------------------------------------- */

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

  .approach-lede {
    font-family: var(--font-serif);
    font-size: clamp(28px, 3vw, 44px);
    line-height: 1.2;
    font-weight: 400;
    color: var(--bone);
    letter-spacing: -0.005em;
  }

  .approach-lede em {
    font-style: italic;
    color: var(--accent);
  }

  .approach-body {
    display: flex;
    flex-direction: column;
    gap: 40px;
  }

  .principle {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 24px;
    padding-top: 28px;
    border-top: 1px solid var(--hairline);
  }

  .principle-num {
    font-family: var(--font-mono);
    font-size: 15px;
    letter-spacing: 0.08em;
    color: var(--accent);
    padding-top: 4px;
  }

  .principle-title {
    font-family: var(--font-serif);
    font-size: 26px;
    margin-bottom: 8px;
    font-weight: 400;
  }

  .principle-text {
    font-size: 15px;
    line-height: 1.6;
    color: var(--bone-dim);
  }

  /* INDUSTRIES --------------------------------------------- */

  .industries-rail {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--hairline);
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
  }

  .industry {
    background: rgba(10, 10, 12, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 40px 32px;
    transition: background 0.4s ease;
    cursor: default;
  }

  .industry:hover { background: rgba(60, 95, 180, 0.04); }

  .industry-name {
    font-family: var(--font-serif);
    font-size: 26px;
    font-weight: 400;
    margin-bottom: 16px;
    line-height: 1.15;
    letter-spacing: -0.005em;
  }

  .industry-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-mono);
    font-size: 15px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bone-faint);
  }

  .industry-meta .dash { width: 16px; height: 1px; background: var(--bone-faint); }

  /* TEAM --------------------------------------------------- */

  .team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }

  .team-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .portrait {
    aspect-ratio: 4 / 5;
    background:
      radial-gradient(ellipse 60% 40% at 50% 30%, rgba(60, 95, 180, 0.18), transparent 65%),
      linear-gradient(180deg, #03050b 0%, #000003 100%);
    border: 1px solid var(--hairline);
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: center;
  }

  .portrait::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    opacity: 0.06;
    mix-blend-mode: overlay;
  }

  .portrait-mono {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 88px;
    color: var(--accent);
    opacity: 0.85;
    z-index: 1;
  }

  .team-name {
    font-family: var(--font-serif);
    font-size: 26px;
    font-weight: 400;
  }

  .team-role {
    font-family: var(--font-mono);
    font-size: 15px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bone-faint);
    margin-top: 4px;
  }

  .team-bio {
    font-size: 15px;
    line-height: 1.6;
    color: var(--bone-dim);
    margin-top: 8px;
  }

  /* TESTIMONIAL -------------------------------------------- */

  .testimonial {
    background:
      linear-gradient(180deg, rgba(60, 95, 180, 0.05) 0%, rgba(0,0,0,0.4) 100%),
      rgba(4, 4, 4, 0.45);
    backdrop-filter: blur(0.5px);
    -webkit-backdrop-filter: blur(0.5px);
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
    padding: 140px 48px;
    position: relative;
    overflow: hidden;
  }

  .testimonial::before {
    content: '"';
    position: absolute;
    top: 60px;
    left: 48px;
    font-family: var(--font-serif);
    font-size: 240px;
    line-height: 1;
    color: var(--accent);
    opacity: 0.2;
    font-style: italic;
  }

  .testimonial-quote {
    max-width: 1000px;
    margin: 0 auto;
    font-family: var(--font-serif);
    font-size: clamp(28px, 3.6vw, 52px);
    line-height: 1.25;
    text-align: center;
    font-weight: 400;
    letter-spacing: -0.005em;
    text-wrap: balance;
  }

  .testimonial-attr {
    margin-top: 56px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .attr-name {
    font-family: var(--font-serif);
    font-size: 26px;
    font-style: italic;
  }

  .attr-role {
    font-family: var(--font-mono);
    font-size: 15px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bone-faint);
  }

  /* CONTACT / CTA ------------------------------------------ */

  .cta-section {
    padding: 200px 48px 80px;
    text-align: center;
    position: relative;
    overflow: hidden;
  }

  .cta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(60, 95, 180, 0.08), transparent 60%);
    pointer-events: none;
  }

  .cta-eyebrow {
    font-family: var(--font-mono);
    font-size: 15px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 32px;
  }

  .cta-title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(48px, 7vw, 120px);
    line-height: 1.0;
    letter-spacing: -0.02em;
    max-width: 16ch;
    margin: 0 auto;
    text-wrap: balance;
  }

  .cta-title em {
    font-style: italic;
    color: var(--accent);
  }

  .cta-section .cta-row {
    justify-content: center;
    margin-top: 56px;
  }

  /* FOOTER ------------------------------------------------- */

  footer.site-footer {
    padding: 80px 48px 48px;
    border-top: 1px solid var(--hairline);
  }

  .footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 64px;
    margin-bottom: 96px;
  }

  .footer-brand-block .brand {
    margin-bottom: 24px;
  }

  .footer-tagline {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 26px;
    color: var(--bone-dim);
    max-width: 30ch;
    line-height: 1.4;
  }

  .footer-col h4 {
    font-family: var(--font-mono);
    font-size: 15px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bone-faint);
    margin-bottom: 24px;
    font-weight: 500;
  }

  .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 14px; }
  .footer-col a {
    color: var(--bone);
    text-decoration: none;
    font-size: 15px;
    transition: color 0.3s ease;
  }
  .footer-col a:hover { color: var(--accent); }

  .footer-bottom {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding-top: 32px;
    border-top: 1px solid var(--hairline);
    font-family: var(--font-mono);
    font-size: 15px;
    letter-spacing: 0.04em;
    color: var(--bone-faint);
  }

  .footer-bottom .right { text-align: right; }
  .footer-bottom a { color: var(--bone-dim); text-decoration: none; }
  .footer-bottom a:hover { color: var(--bone); }

  /* CTA / contact — lighter wash so the constellation pulse reads */
  .cta-section {
    background: linear-gradient(180deg, rgba(4,4,4,0.3) 0%, rgba(4,4,4,0.7) 100%);
  }

  footer.site-footer {
    background: rgba(4, 4, 4, 0.85);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  /* ======= Responsive section overrides ======= */
  @media (max-width: 900px) {
    section.page-section { padding: 96px 24px; }
    .section-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 56px; }
    .services-grid { grid-template-columns: 1fr; }
    .service { padding: 40px 28px 36px; min-height: 0; }
    .service-title { font-size: 32px; }
    .approach-grid { grid-template-columns: 1fr; gap: 56px; }
    .industries-rail { grid-template-columns: 1fr; }
    .team-grid { grid-template-columns: 1fr; gap: 48px; }
    .testimonial { padding: 80px 24px; }
    .testimonial::before { font-size: 140px; top: 30px; left: 24px; }
    .cta-section { padding: 120px 24px 56px; }
    footer.site-footer { padding: 56px 24px 32px; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 56px; }
    .footer-brand-block { grid-column: 1 / -1; }
    .footer-bottom { grid-template-columns: 1fr; gap: 12px; }
    .footer-bottom .right, .footer-bottom .center { text-align: left; }
  }

  /* ============================================================
     NEW SECTIONS
     ============================================================ */

  /* TRUST STRIP — horizontal scroller of testimonial chips ------ */
  .trust-strip {
    position: relative;
    z-index: 6;
    padding: 80px 0 88px;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  }
  .trust-track { width: 100%; overflow: hidden; }
  .trust-row {
    display: flex;
    gap: 24px;
    width: max-content;
    animation: trustScroll 90s linear infinite;
  }
  @keyframes trustScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  .trust-chip {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 28px 30px 24px;
    border: 1px solid var(--v2-glass-border);
    border-radius: 16px;
    background: var(--v2-glass-bg);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    width: 440px;
  }
  .trust-chip .quote {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 22px;
    line-height: 1.35;
    letter-spacing: -0.015em;
    color: var(--v2-bone-hi);
    flex: 1;
  }
  .trust-chip-foot {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 20px;
    border-top: 1px solid var(--v2-glass-border);
  }
  .trust-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--avatar-c, #5a7cd0);
    display: grid;
    place-items: center;
    color: #fff;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 17px;
    letter-spacing: -0.01em;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  }
  .trust-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
  }
  .trust-name {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 14px;
    color: var(--v2-bone-hi);
    letter-spacing: -0.005em;
  }
  .trust-role {
    font-family: var(--font-body);
    font-size: 13px;
    color: rgba(245, 241, 234, 0.5);
    letter-spacing: -0.005em;
  }
  .trust-logo {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: -0.01em;
    color: var(--logo-c, rgba(245, 241, 234, 0.7));
    padding: 6px 10px;
    border: 1px solid var(--v2-glass-border);
    border-radius: 6px;
    background: rgba(245, 241, 234, 0.04);
    flex-shrink: 0;
  }

  /* SECTION LEDE shared utility */
  .section-lede {
    grid-column: 2;
    margin-top: 32px;
    font-size: 26px;
    line-height: 1.6;
    color: var(--bone-dim);
    max-width: 60ch;
  }

  /* PAIN GRID --------------------------------------------------- */
  .pain-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--hairline);
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
  }
  .pain-card {
    background: rgba(10,10,12,0.7);
    backdrop-filter: blur(8px);
    padding: 56px 48px;
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 28px;
    min-height: 220px;
  }
  .pain-num {
    font-family: var(--font-mono);
    font-size: 15px;
    letter-spacing: 0.08em;
    color: var(--accent);
    padding-top: 6px;
  }
  .pain-card h3 {
    font-family: var(--font-serif);
    font-size: 32px;
    line-height: 1.1;
    font-weight: 400;
    margin: 0 0 16px;
    letter-spacing: -0.01em;
    color: var(--bone);
  }
  .pain-card p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--bone-dim);
    margin: 0;
    max-width: 44ch;
  }

  /* PILLARS ------------------------------------------------------ */
  .pillar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 96px;
    align-items: center;
    padding: 96px 0;
    border-top: 1px solid var(--hairline);
  }
  .pillar:first-of-type { border-top: none; padding-top: 64px; }
  .pillar-reverse .pillar-text { order: 2; }
  .pillar-reverse .pillar-visual { order: 1; }

  .pillar-tag {
    font-family: var(--font-mono);
    font-size: 15px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 24px;
  }
  .pillar-title {
    font-family: var(--font-serif);
    font-size: clamp(36px, 4vw, 56px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.015em;
    margin: 0 0 24px;
    color: var(--bone);
  }
  .pillar-body {
    font-size: 26px;
    line-height: 1.65;
    color: var(--bone-dim);
    max-width: 48ch;
    margin: 0 0 32px;
  }
  .pillar-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .pillar-list li {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 15px;
    color: var(--bone);
    font-family: var(--font-mono);
    letter-spacing: 0.02em;
  }
  .pl-check {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 12px rgba(60, 95, 180, 0.5);
    flex-shrink: 0;
  }

  /* Pillar visual: shared frame ---- */
  .pillar-visual {
    position: relative;
    aspect-ratio: 1.1 / 1;
  }

  /* Pillar 1 visual: ledger frame */
  .pv-frame {
    position: absolute;
    inset: 0;
    background: rgba(10,10,12,0.72);
    border: 1px solid var(--hairline);
    backdrop-filter: blur(12px);
    padding: 24px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 40px 80px rgba(0,0,0,0.5);
  }
  .pv-row {
    display: grid;
    grid-template-columns: 90px 1fr 110px 110px;
    gap: 16px;
    padding: 16px 4px;
    font-family: var(--font-mono);
    font-size: 15px;
    letter-spacing: 0.02em;
    color: var(--bone);
    border-bottom: 1px solid var(--hairline);
    align-items: center;
  }
  .pv-row:last-child { border-bottom: none; }
  .pv-head {
    font-size: 15px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bone-faint);
    padding: 8px 4px 12px;
  }
  .pv-foot {
    margin-top: auto;
    background: rgba(60, 95, 180,0.04);
    border-top: 1px solid var(--accent);
    padding: 16px 4px;
    font-size: 15px;
    color: var(--bone-dim);
  }
  .pv-pill {
    font-size: 15px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 999px;
    text-align: center;
    border: 1px solid var(--hairline);
    color: var(--bone-dim);
  }
  .pv-pill.ok { color: var(--accent); border-color: rgba(60, 95, 180,0.4); }
  .pv-pill.flag { color: #f5b9a0; border-color: rgba(245,185,160,0.4); }
  .pv-pill.signed {
    background: var(--accent-grad); color: #050a18; border-color: var(--accent);
    font-weight: 600;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
  }

  /* Pillar 2 visual: Slack mock */
  .slack-frame {
    position: absolute;
    inset: 0;
    background: rgba(10,10,12,0.72);
    border: 1px solid var(--hairline);
    backdrop-filter: blur(12px);
    padding: 24px 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow: hidden;
    box-shadow: 0 40px 80px rgba(0,0,0,0.5);
    font-family: var(--font-mono);
  }
  .slack-head {
    font-size: 15px;
    color: var(--bone);
    padding-bottom: 16px;
    border-bottom: 1px solid var(--hairline);
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .slack-hash { color: var(--bone-faint); }
  .slack-meta { color: var(--bone-faint); font-size: 15px; margin-left: auto; letter-spacing: 0.04em; text-transform: uppercase; }
  .slack-msg { display: flex; gap: 14px; align-items: flex-start; }
  .slack-avatar {
    width: 36px; height: 36px; flex-shrink: 0;
    border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-serif);
    font-size: 26px;
  }
  .slack-av-you { background: rgba(60, 95, 180,0.15); color: var(--accent); border: 1px solid rgba(60, 95, 180,0.3); }
  .slack-av-pp { background: var(--accent-grad); color: #050a18; box-shadow: inset 0 1px 0 rgba(255,255,255,0.2); }
  .slack-body { flex: 1; font-family: var(--font-body); }
  .slack-name {
    font-size: 15px;
    color: var(--bone);
    font-weight: 600;
    margin-bottom: 4px;
    display: flex; gap: 10px; align-items: center;
  }
  .slack-bot {
    font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase;
    background: var(--hairline); color: var(--bone-dim);
    padding: 2px 6px; border-radius: 2px;
    font-family: var(--font-mono);
  }
  .slack-time { color: var(--bone-faint); font-size: 15px; font-weight: 400; }
  .slack-text { font-size: 15px; line-height: 1.5; color: var(--bone); }
  .slack-link { color: var(--accent); cursor: pointer; }
  .slack-typing {
    display: flex; gap: 6px; padding: 8px 12px; align-self: flex-start;
    background: rgba(245,241,234,0.04); border-radius: 999px;
    margin-left: 50px;
  }
  .slack-typing span {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--bone-faint);
    animation: slackBlink 1.4s infinite ease-in-out both;
  }
  .slack-typing span:nth-child(2) { animation-delay: 0.18s; }
  .slack-typing span:nth-child(3) { animation-delay: 0.36s; }
  @keyframes slackBlink {
    0%, 80%, 100% { opacity: 0.3; transform: scale(0.85); }
    40% { opacity: 1; transform: scale(1); background: var(--accent); }
  }

  /* Pillar 3 visual: integration diagram (Balance-style) */
  .pillar-vis-integration { aspect-ratio: 1.25 / 1; }
  .integ-diagram {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 32px;
    padding: 8px;
  }
  .integ-lines {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: visible;
  }
  .integ-lines .il-base {
    fill: none;
    stroke: rgba(245,241,234,0.10);
    stroke-width: 1.2;
  }
  .integ-lines .il-flow {
    fill: none;
    stroke: url(#integFlow);
    stroke-width: 1.6;
    stroke-linecap: round;
    /* stroke-dasharray + animation set inline via JS so dash length matches each path */
  }
  @keyframes integFlow {
    0%   { stroke-dashoffset: var(--flow-len, 600); opacity: 0; }
    8%   { opacity: 1; }
    92%  { opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: 0; }
  }

  .integ-col {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .integ-col-label {
    font-family: var(--font-mono);
    font-size: 15px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bone-faint);
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--hairline);
  }
  .integ-outputs .integ-col-label { text-align: right; }

  .integ-tile {
    background: rgba(10,10,12,0.88);
    border: 1px solid var(--hairline);
    backdrop-filter: blur(8px);
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--bone);
    border-radius: 6px;
    transition: border-color 0.4s ease, transform 0.4s ease;
  }
  .integ-tile:hover {
    border-color: rgba(60, 95, 180,0.4);
    transform: translateX(2px);
  }
  .integ-outputs .integ-tile:hover { transform: translateX(-2px); }

  .it-mark {
    width: 28px; height: 28px;
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 15px;
    flex-shrink: 0;
    color: #fff;
  }
  .it-mark svg { width: 16px; height: 16px; }
  .it-stripe   { background: #635bff; }
  .it-mercury  { background: #1d1d1f; color: #f5f1ea; border: 1px solid rgba(245,241,234,0.15); }
  .it-qbo      { background: #2ca01c; font-size: 15px; }
  .it-gusto    { background: #f45d48; }
  .it-brex     { background: #f96342; }
  .it-slack    { background: #4a154b; }
  .it-whatsapp { background: #25d366; }
  .it-email    { background: #06080f; color: var(--accent); border: 1px solid rgba(60, 95, 180,0.4); }

  .it-name { letter-spacing: 0.005em; }

  /* Hub */
  .integ-hub {
    position: relative;
    z-index: 3;
    width: 110px; height: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .integ-hub-inner {
    width: 84px; height: 84px;
    border-radius: 18px;
    background: linear-gradient(135deg, #06080f 0%, #000003 100%);
    border: 1px solid var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 50px rgba(60, 95, 180,0.35), inset 0 0 30px rgba(60, 95, 180,0.08);
    position: relative;
    z-index: 2;
  }
  .integ-hub-mark {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 44px;
    color: var(--accent);
    line-height: 1;
  }
  .integ-hub-label {
    font-family: var(--font-mono);
    font-size: 15px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bone-dim);
    margin-top: 10px;
  }
  .integ-hub-pulse {
    position: absolute;
    inset: -4px;
    border-radius: 22px;
    border: 1px solid rgba(60, 95, 180,0.5);
    animation: integHubPulse 2.8s ease-out infinite;
    z-index: 1;
  }
  @keyframes integHubPulse {
    0%   { transform: scale(0.92); opacity: 0.7; }
    100% { transform: scale(1.4); opacity: 0; }
  }

  /* CASE STUDIES ------------------------------------------------- */
  .case-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--hairline);
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
  }
  .case-card {
    background: rgba(10,10,12,0.72);
    backdrop-filter: blur(8px);
    padding: 48px 40px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    transition: background 0.4s ease;
  }
  .case-card:hover { background: rgba(14,12,10,0.85); }
  .case-head {
    display: flex; flex-direction: column; gap: 4px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--hairline);
  }
  .case-num {
    font-family: var(--font-mono);
    font-size: 15px; letter-spacing: 0.08em;
    color: var(--accent);
  }
  .case-co {
    font-family: var(--font-serif);
    font-size: 26px;
    color: var(--bone);
    letter-spacing: -0.005em;
  }
  .case-stage {
    font-family: var(--font-mono);
    font-size: 15px;
    letter-spacing: 0.08em;
    color: var(--bone-faint);
  }
  .case-title {
    font-family: var(--font-serif);
    font-size: 26px;
    line-height: 1.2;
    font-weight: 400;
    color: var(--bone);
    margin: 0;
    letter-spacing: -0.01em;
  }
  .case-stats {
    list-style: none;
    padding: 0; margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .case-stats li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 12px 0;
    border-top: 1px solid var(--hairline);
    gap: 16px;
  }
  .cs-num {
    font-family: var(--font-serif);
    font-size: 26px;
    color: var(--accent);
    letter-spacing: -0.01em;
  }
  .cs-lbl {
    font-family: var(--font-mono);
    font-size: 15px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bone-dim);
    text-align: right;
  }
  .case-quote {
    font-family: var(--font-serif);
    font-size: 26px;
    line-height: 1.4;
    font-style: italic;
    color: var(--bone-dim);
    margin: 0;
    padding: 20px 0 0;
    border-top: 1px solid var(--hairline);
  }
  .case-link {
    margin-top: auto;
    font-family: var(--font-mono);
    font-size: 15px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bone);
    text-decoration: none;
    display: flex; gap: 10px; align-items: center;
    transition: color 0.3s ease;
  }
  .case-link:hover { color: var(--accent); }
  .case-link .arrow { transition: transform 0.3s cubic-bezier(0.2,0.7,0.2,1); }
  .case-link:hover .arrow { transform: translateX(6px); }

  /* STACK WALL --------------------------------------------------- */
  .stack-head { margin-bottom: 64px; }
  .stack-wall {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1px;
    background: var(--hairline);
    border: 1px solid var(--hairline);
  }
  .sw-tile {
    background: rgba(10,10,12,0.65);
    backdrop-filter: blur(6px);
    padding: 36px 16px;
    text-align: center;
    font-family: var(--font-serif);
    font-size: 26px;
    letter-spacing: -0.005em;
    color: var(--bone);
    transition: all 0.4s ease;
    cursor: default;
  }
  .sw-tile:hover {
    background: rgba(60, 95, 180,0.06);
    color: var(--accent);
  }
  .sw-tile:last-child { color: var(--bone-faint); font-style: italic; }

  /* PRICING ------------------------------------------------------ */
  .price-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 48px;
  }
  .price-card {
    position: relative;
    background: rgba(10,10,12,0.72);
    backdrop-filter: blur(10px);
    border: 1px solid var(--hairline);
    padding: 48px 40px 40px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    transition: border-color 0.4s ease, transform 0.4s ease;
  }
  .price-card:hover { border-color: rgba(60, 95, 180,0.35); }

  /* Featured card — rotating conic halo behind the card frame */
  @property --halo-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
  }
  .price-card-feature {
    border-color: rgba(60, 95, 180,0.6);
    background: rgba(3, 6, 14,0.78);
    transform: translateY(-12px);
    box-shadow: 0 40px 80px rgba(0,0,0,0.4), 0 0 60px rgba(60, 95, 180,0.08);
    --halo-angle: 0deg;
    isolation: isolate;
  }
  .price-card-feature::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    padding: 2px;
    background: conic-gradient(
      from var(--halo-angle),
      rgba(60, 95, 180,0)   0%,
      rgba(60, 95, 180,0)   18%,
      rgba(60, 95, 180,0.95) 28%,
      rgba(140, 180, 235,1)    33%,
      rgba(60, 95, 180,0.95) 38%,
      rgba(60, 95, 180,0)   50%,
      rgba(60, 95, 180,0)   68%,
      rgba(60, 95, 180,0.7) 78%,
      rgba(60, 95, 180,0)   90%,
      rgba(60, 95, 180,0)  100%
    );
    /* mask so we only see the ring, not the fill */
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
            mask-composite: exclude;
    animation: haloSpin 6s linear infinite;
    pointer-events: none;
    z-index: 0;
  }
  /* Soft outer bloom that pulses with the rotation for extra atmosphere */
  .price-card-feature::after {
    content: '';
    position: absolute;
    inset: -40px;
    border-radius: 24px;
    background: conic-gradient(
      from var(--halo-angle),
      rgba(60, 95, 180,0)   0%,
      rgba(60, 95, 180,0)   22%,
      rgba(60, 95, 180,0.18) 33%,
      rgba(60, 95, 180,0)   50%,
      rgba(60, 95, 180,0)   72%,
      rgba(60, 95, 180,0.10) 80%,
      rgba(60, 95, 180,0)   95%
    );
    filter: blur(28px);
    animation: haloSpin 6s linear infinite;
    pointer-events: none;
    z-index: -1;
    opacity: 0.85;
  }
  @keyframes haloSpin {
    to { --halo-angle: 360deg; }
  }
  /* Make sure card content sits above the halo layers */
  .price-card-feature > * { position: relative; z-index: 1; }
  /* Fallback for browsers without @property — fall back to opacity pulse */
  @supports not (background: conic-gradient(from 0deg, red, red)) {
    .price-card-feature::before,
    .price-card-feature::after { display: none; }
  }
  .price-flag {
    position: absolute;
    top: -1px; right: 24px;
    background: var(--accent-grad);
    color: #050a18;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 4px 12px rgba(60, 95, 180, 0.35);
    font-family: var(--font-mono);
    font-size: 15px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 8px 14px;
    font-weight: 600;
  }
  .price-name {
    font-family: var(--font-serif);
    font-size: 36px;
    font-weight: 400;
    margin: 0 0 12px;
    letter-spacing: -0.015em;
    color: var(--bone);
  }
  .price-desc {
    font-size: 15px;
    line-height: 1.55;
    color: var(--bone-dim);
    margin: 0;
    max-width: 32ch;
  }
  .price-amount {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 24px 0;
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
  }
  .pa-from {
    font-family: var(--font-mono);
    font-size: 15px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bone-faint);
  }
  .pa-num {
    font-family: var(--font-serif);
    font-size: 56px;
    line-height: 1;
    color: var(--accent);
    letter-spacing: -0.025em;
  }
  .pa-unit {
    font-family: var(--font-mono);
    font-size: 15px;
    letter-spacing: 0.08em;
    color: var(--bone-dim);
  }
  .price-list {
    list-style: none;
    padding: 0; margin: 0;
    display: flex; flex-direction: column;
    gap: 14px;
    flex: 1;
  }
  .price-list li {
    font-size: 15px;
    line-height: 1.5;
    color: var(--bone);
    padding-left: 22px;
    position: relative;
  }
  .price-list li::before {
    content: '';
    position: absolute;
    left: 0; top: 9px;
    width: 10px; height: 1px;
    background: var(--accent);
  }
  .price-cta {
    text-align: center;
    padding: 16px 24px;
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 15px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: all 0.3s ease;
    border: 1px solid var(--hairline);
  }
  .price-cta.ghost {
    color: var(--bone);
    background: transparent;
  }
  .price-cta.ghost:hover {
    border-color: var(--accent);
    color: var(--accent);
  }
  .price-cta.primary {
    background: var(--accent-grad);
    color: #050a18;
    border-color: var(--accent);
    box-shadow: 0 6px 20px rgba(60, 95, 180, 0.35), inset 0 1px 0 rgba(255,255,255,0.18);
    font-weight: 600;
  }
  .price-cta.primary:hover {
    background: #4a6fc7;
    border-color: #4a6fc7;
  }
  .price-foot {
    text-align: center;
    font-family: var(--font-mono);
    font-size: 15px;
    letter-spacing: 0.1em;
    color: var(--bone-faint);
    margin: 0;
  }

  /* TEAM --------------------------------------------------------- */
  .team-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
  .op-card {
    display: flex;
    flex-direction: column;
    gap: 28px;
  }
  .op-portrait {
    position: relative;
    aspect-ratio: 4 / 5;
    background: linear-gradient(140deg, #06080f 0%, #0e0a18 100%);
    border: 1px solid var(--hairline);
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
  }
  .op-mono {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 120px;
    color: var(--accent);
    opacity: 0.85;
    letter-spacing: -0.04em;
    line-height: 1;
    z-index: 2;
  }
  .op-grain {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 30% 20%, rgba(60, 95, 180,0.18), transparent 50%),
                      radial-gradient(circle at 70% 80%, rgba(60, 95, 180,0.08), transparent 60%);
    opacity: 1;
    z-index: 1;
  }
  .op-portrait::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    opacity: 0.4;
    mix-blend-mode: overlay;
    z-index: 3;
    pointer-events: none;
  }
  .op-meta { display: flex; flex-direction: column; gap: 12px; }
  .op-name {
    font-family: var(--font-serif);
    font-size: 28px;
    font-weight: 400;
    margin: 0;
    color: var(--bone);
    letter-spacing: -0.01em;
  }
  .op-role {
    font-family: var(--font-mono);
    font-size: 15px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
  }
  .op-bio {
    font-size: 15px;
    line-height: 1.6;
    color: var(--bone-dim);
    margin: 8px 0 0;
  }
  .op-quote {
    font-family: var(--font-serif);
    font-size: 26px;
    line-height: 1.4;
    font-style: italic;
    color: var(--bone);
    margin: 8px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--hairline);
  }

  /* FAQ ---------------------------------------------------------- */
  .faq-container { max-width: 1100px; }
  .faq-list {
    border-top: 1px solid var(--hairline);
  }
  .faq-item {
    border-bottom: 1px solid var(--hairline);
  }
  .faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 32px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
    font-family: var(--font-serif);
    font-size: clamp(22px, 2vw, 28px);
    line-height: 1.2;
    color: var(--bone);
    letter-spacing: -0.005em;
    transition: color 0.3s ease;
  }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary:hover { color: var(--accent); }
  .faq-mark {
    font-family: var(--font-mono);
    font-size: 26px;
    color: var(--bone-faint);
    transition: transform 0.4s cubic-bezier(0.2,0.7,0.2,1), color 0.3s ease;
    flex-shrink: 0;
    line-height: 1;
  }
  .faq-item[open] .faq-mark { transform: rotate(45deg); color: var(--accent); }
  .faq-body {
    padding: 0 0 32px;
    max-width: 70ch;
    font-size: 26px;
    line-height: 1.65;
    color: var(--bone-dim);
  }

  /* FINAL CTA ---------------------------------------------------- */
  .final-cta { padding: 200px 48px 220px; }
  .final-cta-container {
    max-width: 980px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }
  .cta-eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 8px 16px;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 15px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bone-dim);
  }
  .cta-eyebrow .dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 12px rgba(60, 95, 180,0.6);
    animation: ctaPulse 2s ease-in-out infinite;
  }
  @keyframes ctaPulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 8px rgba(60, 95, 180,0.5); }
    50% { opacity: 0.6; box-shadow: 0 0 16px rgba(60, 95, 180,0.8); }
  }
  .cta-title {
    font-family: var(--font-serif);
    font-size: clamp(48px, 7vw, 104px);
    line-height: 0.98;
    font-weight: 400;
    letter-spacing: -0.025em;
    margin: 0;
    max-width: 16ch;
  }
  .cta-title em { font-style: italic; color: var(--accent); }
  .cta-sub {
    font-size: 26px;
    line-height: 1.55;
    color: var(--bone-dim);
    max-width: 56ch;
    margin: 0;
  }
  .cta-actions {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 16px;
  }

  /* RESPONSIVE --------------------------------------------------- */
  @media (max-width: 1100px) {
    .pillar { grid-template-columns: 1fr; gap: 56px; }
    .pillar-reverse .pillar-text { order: 1; }
    .pillar-reverse .pillar-visual { order: 2; }
    .case-grid { grid-template-columns: 1fr; }
    .price-grid { grid-template-columns: 1fr; gap: 16px; }
    .price-card-feature { transform: none; }
    .team-row { grid-template-columns: 1fr; gap: 56px; }
    .stack-wall { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 720px) {
    .pain-grid { grid-template-columns: 1fr; }
    .pain-card { padding: 40px 28px; grid-template-columns: 40px 1fr; gap: 16px; }
    .stack-wall { grid-template-columns: repeat(2, 1fr); }
    /* (intentionally left blank — trust-chip handled by 720px rule above) */
    .pillar-visual { aspect-ratio: 1.2 / 1; }
    .pv-row { grid-template-columns: 60px 1fr 80px 80px; gap: 8px; font-size: 15px; }
    .pv-pill { font-size: 15px; padding: 4px 6px; }
    .integ-diagram { gap: 12px; padding: 4px; }
    .integ-hub { width: 80px; height: 80px; }
    .integ-hub-inner { width: 60px; height: 60px; border-radius: 14px; }
    .integ-hub-mark { font-size: 30px; }
    .integ-hub-label { font-size: 15px; }
    .integ-tile { padding: 8px 10px; font-size: 15px; gap: 8px; }
    .it-mark { width: 22px; height: 22px; font-size: 15px; }
    .it-mark svg { width: 12px; height: 12px; }
    .integ-col-label { font-size: 15px; }
    .case-card { padding: 36px 28px; }
    .price-card { padding: 36px 28px; }
    .pa-num { font-size: 44px; }
    .final-cta { padding: 120px 24px 140px; }
    .cta-actions { flex-direction: column; width: 100%; }
    .cta-actions .hero-cta { width: 100%; justify-content: center; }
  }

  /* ============================================================
     V2 — APPLE-STYLE CLEAN-UP
     Glass cards, bright whites, sans headers, lots of breathing room
     ============================================================ */

  /* Tokens */
  :root {
    --v2-glass-bg: rgba(2, 4, 10, 0.82);
    --v2-glass-border: rgba(245, 241, 234, 0.14);
    --v2-glass-border-strong: rgba(245, 241, 234, 0.22);
    --v2-glass-highlight: rgba(255, 255, 255, 0.08);
    --v2-shadow: 0 30px 80px -20px rgba(0,0,0,0.5), 0 12px 32px -8px rgba(0,0,0,0.35);
    --v2-shadow-hi: 0 50px 120px -20px rgba(0,0,0,0.6), 0 20px 50px -10px rgba(0,0,0,0.45);
    --v2-bone-hi: rgba(245, 241, 234, 0.92);
  }

  /* Section shell — full breathing room, no borders, no fighting backgrounds */
  .v2-section {
    position: relative;
    z-index: 6;
    padding: 200px 48px;
    max-width: 1280px;
    margin: 0 auto;
  }
  .v2-section + .v2-section { padding-top: 80px; }

  /* Section intro — narrow column, sans, big air */
  .v2-section-intro {
    max-width: 880px;
    margin: 0 auto 120px;
    text-align: center;
  }
  .v2-eyebrow {
    font-family: var(--font-mono);
    font-size: 15px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(130, 170, 230, 1);
    margin-bottom: 32px;
  }
  .v2-h2 {
    font-family: var(--font-display);
    font-weight: var(--display-weight, 500);
    font-size: clamp(44px, 6vw, 80px);
    line-height: 1.05;
    letter-spacing: var(--display-tracking, -0.035em);
    color: var(--v2-bone-hi);
    margin: 0 0 32px;
  }
  .v2-h2 em {
    font-family: var(--font-serif);
    font-weight: 400;
    font-style: italic;
    color: var(--accent);
    letter-spacing: -0.02em;
  }
  .v2-lede {
    font-family: var(--font-body);
    font-size: 26px;
    line-height: 1.55;
    color: rgba(245,241,234,0.85);
    font-weight: 400;
    max-width: 60ch;
    margin: 0 auto;
    letter-spacing: -0.005em;
  }

  /* Scroll reveal */
  [data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 1s cubic-bezier(0.2, 0.65, 0.2, 1),
                transform 1s cubic-bezier(0.2, 0.65, 0.2, 1);
    will-change: opacity, transform;
  }
  [data-reveal="left"]  { transform: translateX(-56px); }
  [data-reveal="right"] { transform: translateX(56px); }
  [data-reveal].is-revealed {
    opacity: 1;
    transform: translate(0, 0);
  }
  /* Stagger: when both text and visual are present in a pillar, the
     visual lags slightly so the text leads the eye. */
  .v2-pillar-visual[data-reveal] { transition-delay: 0.18s; }
  @media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1; transform: none; transition: none; }
  }

  /* Glass card — the page's signature surface */
  .v2-glass {
    position: relative;
    background: var(--v2-glass-bg);
    border: 1px solid var(--v2-glass-border);
    border-radius: 24px;
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    box-shadow: var(--v2-shadow);
    overflow: hidden;
  }
  /* Inner highlight for that Apple specular edge */
  .v2-glass::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(180deg, var(--v2-glass-highlight), transparent 30%);
    opacity: 0.7;
  }

  /* ============================================================
     PREVIEW — UI suggestions: focused hero CTA, before/after, sticky CTA
     ============================================================ */

  /* (1) Focused hero CTA — primary becomes hero-sized, ghost becomes a
     subtle text link beneath. */
  .hero-cta-row { gap: 18px; align-items: center; }
  .hero-cta.primary {
    padding: 20px 32px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.005em;
    box-shadow: 0 12px 32px rgba(60, 95, 180, 0.18), inset 0 1px 0 rgba(255,255,255,0.5);
  }
  .hero-cta.primary .arrow { width: 16px; height: 16px; }
  .hero-cta-row .hero-cta.text-link {
    background: transparent;
    border: 0;
    padding: 8px 4px;
    color: var(--bone-dim);
    font-size: 14px;
    text-decoration: none;
    border-bottom: 1px solid transparent;
  }
  .hero-cta-row .hero-cta.text-link:hover {
    color: var(--bone);
    border-bottom-color: rgba(245, 241, 234, 0.4);
    transform: none;
    box-shadow: none;
    background: transparent;
  }

  /* (2) Before / after comparison section */
  .v2-compare {
    padding-top: 96px;
    padding-bottom: 96px;
  }
  .v2-compare-grid {
    display: grid;
    grid-template-columns: 1fr 1.22fr 1fr;
    gap: 18px;
    max-width: 1280px;
    margin: 64px auto 0;
    align-items: stretch;
  }
  .v2-compare-card {
    position: relative;
    padding: 30px 26px 26px;
    background: rgba(14, 15, 20, 0.55);
    border: 1px solid rgba(245, 241, 234, 0.10);
    border-radius: 20px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    gap: 18px;
    opacity: 0.86;
    transition: opacity 0.4s ease;
  }
  .v2-compare-card.is-before,
  .v2-compare-card.is-alt {
    /* Both alternatives share the same neutral grey tone so the eye
       compares them against Peregrine, not against each other. */
    background: rgba(14, 15, 20, 0.55);
    border-color: rgba(245, 241, 234, 0.10);
  }
  .v2-compare-card.is-before:hover,
  .v2-compare-card.is-alt:hover { opacity: 1; }

  .v2-compare-card.is-after {
    /* Peregrine: the obvious choice. Lifted, glowing, gradient bg,
       stronger border, accent halo, no muted opacity. */
    background:
      linear-gradient(180deg, rgba(60, 95, 180, 0.18) 0%, rgba(60, 95, 180, 0) 60%),
      rgba(6, 12, 28, 0.92);
    border-color: rgba(90, 124, 208, 0.55);
    box-shadow:
      0 50px 120px -20px rgba(60, 95, 180, 0.55),
      0 30px 60px -10px rgba(60, 95, 180, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.10);
    transform: translateY(-20px);
    opacity: 1;
    z-index: 2;
  }
  /* Animated accent border on the featured card */
  .v2-compare-card.is-after::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 20px;
    padding: 1px;
    background: linear-gradient(180deg, rgba(90, 124, 208, 0.85), rgba(90, 124, 208, 0.10) 60%, transparent);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
  }
  .v2-compare-best {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent-grad);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 999px;
    box-shadow: 0 8px 20px rgba(60, 95, 180, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.22);
    white-space: nowrap;
  }
  .v2-compare-flag {
    align-self: flex-start;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 5px 11px;
    border-radius: 999px;
  }
  .v2-compare-card.is-before .v2-compare-flag,
  .v2-compare-card.is-alt .v2-compare-flag {
    color: rgba(245, 241, 234, 0.55);
    background: rgba(245, 241, 234, 0.05);
    border: 1px solid rgba(245, 241, 234, 0.10);
  }
  .v2-compare-card.is-after .v2-compare-flag {
    color: #fff;
    background: rgba(60, 95, 180, 0.32);
    border: 1px solid rgba(90, 124, 208, 0.55);
    box-shadow: 0 0 24px rgba(60, 95, 180, 0.35);
  }
  .v2-compare-card.is-after .v2-compare-h em {
    font-family: var(--font-serif);
    font-style: italic;
    color: #a3b6ff;
    font-weight: 400;
  }
  .v2-compare-h {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 22px;
    letter-spacing: -0.02em;
    color: var(--v2-bone-hi);
    margin: 0;
  }
  .v2-compare-rows { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
  .v2-compare-row {
    display: grid;
    grid-template-columns: 22px 1fr;
    align-items: start;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(245, 241, 234, 0.06);
    color: rgba(245, 241, 234, 0.85);
    font-size: 15px;
    line-height: 1.45;
  }
  .v2-compare-row:last-child { border-bottom: 0; }
  .v2-compare-row .icon {
    width: 22px; height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    margin-top: 1px;
  }
  .v2-compare-card.is-before .v2-compare-row .icon,
  .v2-compare-card.is-alt .v2-compare-row .icon {
    background: rgba(245, 241, 234, 0.06);
    color: rgba(245, 241, 234, 0.45);
  }
  .v2-compare-card.is-after .v2-compare-row .icon {
    background: rgba(90, 124, 208, 0.22);
    color: #c5d3ff;
    box-shadow: 0 0 12px rgba(90, 124, 208, 0.3);
  }
  .v2-compare-row strong {
    font-weight: 500;
    color: var(--v2-bone-hi);
    display: block;
    font-size: 14px;
    letter-spacing: -0.005em;
    margin-bottom: 2px;
  }
  .v2-compare-row .meta {
    color: rgba(245, 241, 234, 0.55);
    font-size: 14px;
  }

  @media (max-width: 1100px) {
    .v2-compare-grid { grid-template-columns: 1fr; gap: 24px; margin-top: 40px; max-width: 640px; }
    .v2-compare-card.is-after { transform: none; margin-top: 8px; }
  }
  @media (max-width: 720px) {
    .v2-compare-card { padding: 28px 22px 24px; }
    .v2-compare-h { font-size: 20px; }
  }

  /* (3) Sticky bottom CTA bar — appears after scroll past hero, slides
     out when in the final-cta section */
  .sticky-cta {
    position: fixed;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%) translateY(140%);
    z-index: 9;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 8px 8px 18px;
    border-radius: 999px;
    background: rgba(8, 10, 18, 0.92);
    border: 1px solid rgba(245, 241, 234, 0.14);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    box-shadow: 0 18px 40px -8px rgba(0, 0, 0, 0.6);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.4s ease;
  }
  .sticky-cta.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
  .sticky-cta-text {
    font-family: var(--font-body);
    font-size: 14px;
    color: rgba(245, 241, 234, 0.9);
    letter-spacing: -0.005em;
  }
  .sticky-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--bone);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.005em;
    text-decoration: none;
    transition: background 0.3s ease, transform 0.3s ease;
  }
  .sticky-cta-btn:hover {
    background: var(--accent-grad);
    color: var(--bone);
    transform: translateY(-1px);
  }
  .sticky-cta-btn svg { width: 14px; height: 14px; }
  @media (max-width: 720px) {
    .sticky-cta { bottom: 12px; padding: 6px 6px 6px 14px; }
    .sticky-cta-text { display: none; }
    .sticky-cta-btn { padding: 9px 16px; font-size: 13px; }
  }

  /* ============================================================
     PREVIEW (round 2): featured customer, pullquote, FAQ on home,
     calendar embed, animated counter
     ============================================================ */

  /* Featured customer story */
  .v2-featured {
    padding-top: 120px;
    padding-bottom: 80px;
  }
  .v2-featured-card {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 56px;
    align-items: center;
    padding: 56px;
    background: var(--v2-glass-bg);
    border: 1px solid var(--v2-glass-border);
    border-radius: 28px;
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    box-shadow: 0 40px 100px -30px rgba(60, 95, 180, 0.18);
  }
  .v2-featured-photo {
    aspect-ratio: 1 / 1;
    border-radius: 24px;
    background: linear-gradient(135deg, #d6745f 0%, #b04432 60%, #6a2118 100%);
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, 0.92);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 88px;
    letter-spacing: -0.04em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
    position: relative;
    overflow: hidden;
  }
  .v2-featured-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .v2-featured-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.12), transparent 60%);
    pointer-events: none;
  }
  .v2-featured-content { display: flex; flex-direction: column; gap: 22px; }
  .v2-featured-flag {
    align-self: flex-start;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
  }
  .v2-featured-quote {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 26px;
    line-height: 1.45;
    letter-spacing: -0.015em;
    color: var(--v2-bone-hi);
    margin: 0;
  }
  .v2-featured-quote em {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--accent);
  }
  .v2-featured-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 8px;
    padding-top: 24px;
    border-top: 1px solid var(--v2-glass-border);
  }
  .v2-featured-stat .num {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 32px;
    color: var(--v2-bone-hi);
    letter-spacing: -0.02em;
  }
  .v2-featured-stat .lbl {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(245, 241, 234, 0.5);
    margin-top: 6px;
  }
  .v2-featured-attr {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 4px;
    color: var(--v2-bone-hi);
  }
  .v2-featured-attr .name {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 15px;
  }
  .v2-featured-attr .role {
    font-family: var(--font-body);
    font-size: 14px;
    color: rgba(245, 241, 234, 0.55);
  }
  .v2-featured-attr .sep {
    width: 4px; height: 4px; border-radius: 50%;
    background: rgba(245, 241, 234, 0.3);
  }
  .v2-featured-logo {
    margin-left: auto;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 14px;
    color: rgba(245, 241, 234, 0.7);
    padding: 6px 12px;
    border: 1px solid var(--v2-glass-border);
    border-radius: 8px;
  }

  /* Logo wall beneath featured */
  .v2-logo-wall {
    max-width: 1100px;
    margin: 56px auto 0;
  }
  .v2-logo-wall .lbl {
    display: block;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(245, 241, 234, 0.4);
    margin: 0 auto 28px;
  }
  .v2-logo-track {
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
  }
  .v2-logo-row {
    display: flex;
    align-items: center;
    gap: 72px;
    width: max-content;
    animation: logoScroll 38s linear infinite;
  }
  @keyframes logoScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  .v2-logo-row span {
    flex-shrink: 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 22px;
    letter-spacing: -0.015em;
    color: rgba(245, 241, 234, 0.55);
    transition: color 0.3s ease;
  }
  .v2-logo-row span:hover { color: var(--v2-bone-hi); }

  @media (max-width: 900px) {
    .v2-featured-card {
      grid-template-columns: 1fr;
      gap: 32px;
      padding: 36px 28px;
    }
    .v2-featured-photo {
      width: 96px; height: 96px;
      aspect-ratio: 1 / 1;
      font-size: 36px;
      border-radius: 50%;
    }
    .v2-featured-quote { font-size: 20px; }
    .v2-featured-stats { gap: 16px; }
    .v2-featured-stat .num { font-size: 26px; }
  }

  /* Pull-quote */
  .v2-pullquote {
    padding: 120px 48px;
    text-align: center;
    max-width: 1000px;
    margin: 0 auto;
  }
  .v2-pullquote blockquote {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(28px, 4.2vw, 56px);
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--v2-bone-hi);
    margin: 0;
    text-wrap: balance;
  }
  .v2-pullquote blockquote::before { content: '\201C'; opacity: 0.5; margin-right: 4px; }
  .v2-pullquote blockquote::after { content: '\201D'; opacity: 0.5; margin-left: 4px; }
  .v2-pullquote cite {
    display: block;
    margin-top: 32px;
    font-family: var(--font-mono);
    font-size: 13px;
    font-style: normal;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(245, 241, 234, 0.55);
  }
  @media (max-width: 720px) {
    .v2-pullquote { padding: 80px 20px; }
  }

  /* Calendar mock — looks like a Cal.com / Calendly embed */
  .v2-cal {
    margin-top: 36px;
    background: rgba(8, 10, 18, 0.7);
    border: 1px solid var(--v2-glass-border);
    border-radius: 20px;
    padding: 28px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    text-align: left;
  }
  .v2-cal-h {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    color: rgba(245, 241, 234, 0.6);
    margin-bottom: 12px;
    letter-spacing: -0.005em;
  }
  .v2-cal-month {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
  }
  .v2-cal-month-name {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 18px;
    color: var(--v2-bone-hi);
  }
  .v2-cal-nav {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(245, 241, 234, 0.45);
  }
  .v2-cal-nav button {
    width: 28px; height: 28px;
    background: rgba(245, 241, 234, 0.04);
    border: 1px solid var(--v2-glass-border);
    border-radius: 6px;
    color: inherit;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background 0.2s;
  }
  .v2-cal-nav button:hover { background: rgba(245, 241, 234, 0.1); color: var(--v2-bone-hi); }
  .v2-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
  }
  .v2-cal-grid .dow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(245, 241, 234, 0.4);
    text-align: center;
    padding: 6px 0;
  }
  .v2-cal-day {
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
    font-family: var(--font-body);
    font-size: 13px;
    color: rgba(245, 241, 234, 0.35);
    border-radius: 6px;
    border: 1px solid transparent;
    cursor: default;
  }
  .v2-cal-day.is-available {
    color: var(--v2-bone-hi);
    background: rgba(60, 95, 180, 0.10);
    border-color: rgba(90, 124, 208, 0.28);
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
  }
  .v2-cal-day.is-available:hover { background: rgba(60, 95, 180, 0.22); transform: scale(1.05); }
  .v2-cal-day.is-selected {
    background: var(--bone);
    color: var(--ink);
    border-color: var(--bone);
    font-weight: 600;
  }
  .v2-cal-slots { display: flex; flex-direction: column; gap: 10px; max-height: 320px; overflow-y: auto; }
  .v2-cal-slot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: rgba(245, 241, 234, 0.04);
    border: 1px solid var(--v2-glass-border);
    border-radius: 10px;
    color: var(--v2-bone-hi);
    font-family: var(--font-body);
    font-size: 14px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
  }
  .v2-cal-slot:hover {
    border-color: rgba(90, 124, 208, 0.45);
    background: rgba(60, 95, 180, 0.08);
  }
  .v2-cal-slot .dur {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(245, 241, 234, 0.5);
  }
  .v2-cal-note {
    grid-column: 1 / -1;
    margin-top: 8px;
    padding-top: 18px;
    border-top: 1px solid var(--v2-glass-border);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(245, 241, 234, 0.35);
    text-align: center;
  }
  @media (max-width: 720px) {
    .v2-cal { grid-template-columns: 1fr; padding: 20px; gap: 24px; }
    .v2-cal-slots { max-height: none; }
  }

  /* Cal.com inline embed wrapper — Cal.com renders its own dark UI so
     we just give it a dark backdrop and rounded glass-card chrome. */
  .v2-calendly {
    width: 100%;
    margin-top: 36px;
    border: 1px solid var(--v2-glass-border);
    border-radius: 20px;
    overflow: hidden;
    background: #0a0a0e;
  }
  #my-cal-inline-30min { width: 100%; min-height: 720px; }
  @media (max-width: 720px) {
    .v2-calendly { margin-top: 24px; border-radius: 14px; }
    #my-cal-inline-30min { min-height: 880px; }
  }

  /* ============================================================
     HOW WE WORK
     ============================================================ */
  .v2-how { padding-bottom: 120px; }
  .v2-pillar {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 96px;
    align-items: center;
    padding: 100px 0;
    max-width: 1200px;
    margin: 0 auto;
  }
  /* Add an explicit breath between pillars so 01/02/03 read as
     distinct beats. Padding inside each pillar already gives some
     space; this margin doubles the gap between pillars. */
  .v2-how .v2-pillar + .v2-pillar { margin-top: 120px; }

  /* All three How-We-Work pillars get a wider visual column so the
     mocks read at a comfortable size without forcing the viewer to
     squint. Text column shrinks slightly; visual column gets +20%. */
  .v2-how .v2-pillar {
    grid-template-columns: 0.78fr 1.35fr;
    gap: 64px;
  }
  .v2-pillar-visual:has(.v2-mock-ledger),
  .v2-pillar-visual:has(.v2-mock-slack),
  .v2-pillar-visual:has(.v2-mock-integ) {
    min-height: 620px;
  }
  .v2-pillar-visual:has(.v2-mock-integ) {
    aspect-ratio: 1 / 1;
    min-height: 620px;
  }

  /* Bump every text size inside the ledger mock proportionally so
     the larger card stays balanced and Apple-clean. */
  .v2-mock-ledger .v2-mock-bar { font-size: 15px; padding: 16px 26px 15px; }
  .v2-mock-ledger .v2-mock-status { font-size: 11.5px; padding: 6px 12px; }
  .v2-mock-ledger .v2-mock-stats { padding: 32px 30px; }
  .v2-mock-ledger .v2-mock-stats > .v2-stat + .v2-stat { padding-left: 30px; }
  .v2-mock-ledger .v2-stat-num { font-size: 36px; margin-bottom: 10px; }
  .v2-mock-ledger .v2-stat-lbl { font-size: 12px; }
  .v2-mock-ledger .v2-mock-table { padding: 0 30px 26px; }
  .v2-mock-ledger .v2-mr {
    grid-template-columns: 78px 1fr 122px 122px;
    font-size: 15px;
    padding: 16px 0;
  }
  .v2-mock-ledger .v2-mr-h { font-size: 11.5px; padding: 20px 0 14px; }
  .v2-mock-ledger .v2-mr .pill { font-size: 11px; padding: 5px 12px; }
  .v2-mock-ledger .v2-mr .merchant-ico { width: 26px; height: 26px; font-size: 11px; border-radius: 7px; }
  .v2-mock-ledger .v2-mr .merchant-ico.aws { font-size: 9px; }
  .v2-mock-ledger .v2-mr .merchant-ico.qbo { font-size: 11px; }

  /* Timeline scales up too so it lines up with the bigger card */
  .v2-mock-ledger .v2-mock-timeline { padding: 28px 30px 24px; }
  .v2-mock-ledger .v2-mock-tl-step { gap: 14px; }
  .v2-mock-ledger .v2-mock-tl-step .dot { width: 14px; height: 14px; }
  .v2-mock-ledger .v2-mock-tl-step .lbl { font-size: 11px; }
  .v2-mock-ledger .v2-mock-timeline::before,
  .v2-mock-ledger .v2-mock-timeline::after { top: 35px; }

  /* Footer (signed-off bar) gets matching padding bumps */
  .v2-mock-ledger .v2-mock-foot { padding: 20px 30px 24px; }
  .v2-mock-ledger .v2-signed-mark { width: 34px; height: 34px; font-size: 12px; }
  .v2-mock-ledger .v2-signed-meta { font-size: 13.5px; }
  .v2-mock-ledger .v2-signed-time { font-size: 11px; }
  .v2-mock-ledger .v2-signed-pill { font-size: 11px; padding: 7px 14px; }

  /* Slack mock gets matching scale-ups so the conversation reads at
     the same size class as the bigger card. */
  .v2-mock-slack .v2-mock-bar { padding: 16px 26px 15px; font-size: 14.5px; }
  .v2-mock-slack .v2-slack-feed { padding: 16px 26px 20px; gap: 20px; }
  .v2-mock-slack .v2-av { width: 36px; height: 36px; font-size: 14px; border-radius: 8px; }
  .v2-mock-slack .v2-msg { gap: 14px; }
  .v2-mock-slack .v2-msg-name { font-size: 14px; }
  .v2-mock-slack .v2-msg-bot { font-size: 9.5px; padding: 2px 7px; }
  .v2-mock-slack .v2-msg-time { font-size: 11.5px; }
  .v2-mock-slack .v2-msg-text { font-size: 14.5px; line-height: 1.5; }
  .v2-mock-slack .v2-msg-card { padding: 13px 16px; gap: 14px; }
  .v2-mock-slack .v2-msg-card-ico { width: 24px; height: 24px; }
  .v2-mock-slack .v2-msg-card-body { font-size: 14px; }
  .v2-mock-slack .v2-msg-card-body .meta { font-size: 12px; }
  .v2-mock-slack .v2-msg-budget { padding: 14px 16px; }
  .v2-mock-slack .v2-msg-budget-meta { font-size: 12px; }
  .v2-mock-slack .v2-msg-btn { font-size: 12.5px; padding: 6px 12px; }
  .v2-mock-slack .v2-msg-reaction { font-size: 12.5px; padding: 4px 10px 4px 8px; }
  .v2-mock-slack .v2-msg-reaction-emoji { font-size: 14px; }
  .v2-mock-slack .v2-msg-link { font-size: 13.5px; }
  .v2-mock-slack .v2-typing-dots { padding: 12px 16px; height: 36px; }
  .v2-mock-slack .v2-typing-dots span { width: 6px; height: 6px; }
  .v2-mock-slack .v2-slack-input { padding: 14px 26px 18px; }
  .v2-mock-slack .v2-slack-input-inner { padding: 11px 16px; font-size: 13.5px; }

  /* ============================================================
     Integration mock — vertical flow redesign
     Top: marquee of integrated apps
     Mid: vertical data streams flowing into the agent
     Bot: agent emits chat bubbles to the client
     ============================================================ */
  .v2-mock-integ {
    display: flex !important;
    flex-direction: column;
    padding: 0 !important;
    aspect-ratio: auto !important;
    height: 100%;
    grid-template-columns: none !important;
    align-items: stretch !important;
    gap: 0 !important;
  }
  .v2-pillar-visual:has(.v2-mock-integ) {
    aspect-ratio: auto;
    min-height: 620px;
  }

  /* Top marquee */
  .integ-strip-top {
    position: relative;
    padding: 28px 0 0;
    flex-shrink: 0;
  }
  .integ-strip-label {
    position: absolute;
    top: 12px; left: 26px;
    font-family: var(--font-body);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(245, 241, 234, 0.4);
    z-index: 2;
  }
  .integ-strip-track-wrap {
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
    margin-top: 24px;
    border-bottom: 1px solid rgba(245, 241, 234, 0.06);
    padding-bottom: 18px;
  }
  .integ-strip-track {
    display: flex;
    gap: 10px;
    width: max-content;
    padding: 0 26px;
    animation: integStripScroll 28s linear infinite;
  }
  @keyframes integStripScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  .integ-app-pill {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 14px 8px 8px;
    background: rgba(245, 241, 234, 0.04);
    border: 1px solid var(--v2-glass-border);
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: var(--v2-bone-hi);
    white-space: nowrap;
    backdrop-filter: blur(8px);
  }
  .integ-app-pill .v2-itm {
    width: 24px; height: 24px;
    border-radius: 6px;
    font-size: 11px;
    flex-shrink: 0;
  }

  /* Middle flow zone with vertical data streams + the agent */
  .integ-flow-zone {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px 0 12px;
    min-height: 200px;
  }
  .integ-streams-up {
    position: absolute;
    top: 0; bottom: 30%;
    left: 50%;
    transform: translateX(-50%);
    width: 75%;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
  }
  .integ-stream {
    display: block;
    width: 2px;
    background: rgba(90, 124, 208, 0.10);
    position: relative;
    overflow: hidden;
    border-radius: 2px;
  }
  .integ-stream::before {
    content: '';
    position: absolute;
    left: 0; right: 0;
    top: -40%;
    height: 40%;
    background: linear-gradient(180deg,
      transparent 0%,
      rgba(90, 124, 208, 0.55) 40%,
      var(--accent) 60%,
      transparent 100%);
    box-shadow: 0 0 8px rgba(60, 95, 180, 0.5);
    animation: integStreamFlow 1.8s linear infinite;
  }
  .integ-stream:nth-child(1) { animation-delay: -0.0s; }
  .integ-stream:nth-child(2)::before { animation-delay: -0.30s; }
  .integ-stream:nth-child(3)::before { animation-delay: -0.65s; }
  .integ-stream:nth-child(4)::before { animation-delay: -0.95s; }
  .integ-stream:nth-child(5)::before { animation-delay: -1.20s; }
  .integ-stream:nth-child(6)::before { animation-delay: -0.50s; animation-duration: 2.2s; }
  .integ-stream:nth-child(7)::before { animation-delay: -1.50s; animation-duration: 2.0s; }
  @keyframes integStreamFlow {
    from { top: -40%; }
    to   { top: 100%; }
  }

  /* Agent hub (replaces old radial hub) */
  .integ-agent {
    position: relative;
    width: 130px; height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
  }
  .integ-agent-inner {
    width: 96px; height: 96px;
    border-radius: 24px;
    background: linear-gradient(135deg, #0c1224 0%, #050810 100%);
    border: 1px solid rgba(90, 124, 208, 0.6);
    display: grid; place-items: center;
    box-shadow:
      0 0 60px rgba(60, 95, 180, 0.45),
      inset 0 0 30px rgba(60, 95, 180, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
    animation: integAgentBreathe 2.6s ease-in-out infinite;
    position: relative; z-index: 2;
  }
  .integ-agent-inner span {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 50px;
    line-height: 1;
    color: var(--accent);
  }
  .integ-agent-pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(60, 95, 180, 0.5);
    animation: integAgentPulse 2.8s ease-out infinite;
    pointer-events: none;
  }
  .integ-agent-label {
    position: absolute;
    bottom: -18px; left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-body);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(245, 241, 234, 0.5);
    white-space: nowrap;
  }
  /* Conic halo around the agent */
  .integ-agent::before {
    content: '';
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
      transparent 0%,
      rgba(90, 124, 208, 0.32) 18%,
      transparent 36%,
      rgba(90, 124, 208, 0.5) 58%,
      transparent 76%,
      rgba(90, 124, 208, 0.32) 92%,
      transparent 100%);
    filter: blur(10px);
    animation: integAgentHalo 5.6s linear infinite;
    z-index: 0;
    pointer-events: none;
  }
  @keyframes integAgentHalo {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }
  @keyframes integAgentBreathe {
    0%, 100% { box-shadow: 0 0 50px rgba(60, 95, 180, 0.4),  inset 0 0 26px rgba(60, 95, 180, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
    50%      { box-shadow: 0 0 80px rgba(60, 95, 180, 0.65), inset 0 0 32px rgba(60, 95, 180, 0.2),  inset 0 1px 0 rgba(255, 255, 255, 0.12); }
  }
  @keyframes integAgentPulse {
    0%   { transform: scale(0.95); opacity: 0.75; }
    100% { transform: scale(1.6);  opacity: 0; }
  }

  /* Data droplets — small light dots animated from a marquee app
     down into the agent. JS spawns these on a 0.4–0.8s cadence. */
  .integ-droplet {
    position: absolute;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 10px rgba(60, 95, 180, 0.7), 0 0 4px rgba(255, 255, 255, 0.4) inset;
    pointer-events: none;
    z-index: 4;
    animation: integDropFall 1.15s cubic-bezier(0.4, 0, 0.6, 1) forwards;
  }
  @keyframes integDropFall {
    0%   { transform: translate(-50%, -50%) scale(0.6); opacity: 0; }
    10%  { opacity: 1; }
    100% { transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) scale(0.5); opacity: 0; }
  }

  /* Agent transient states triggered by JS */
  .integ-agent.is-receiving .integ-agent-inner {
    animation: integAgentRecv 0.42s ease-out;
  }
  @keyframes integAgentRecv {
    0%   { box-shadow: 0 0 50px rgba(60, 95, 180, 0.4), inset 0 0 26px rgba(60, 95, 180, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
    50%  { box-shadow: 0 0 90px rgba(60, 95, 180, 0.85), inset 0 0 40px rgba(60, 95, 180, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.18); }
    100% { box-shadow: 0 0 50px rgba(60, 95, 180, 0.4), inset 0 0 26px rgba(60, 95, 180, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
  }
  .integ-agent.is-sending .integ-agent-inner {
    transform: scale(1.04);
    transition: transform 0.18s ease-out;
  }

  /* Bottom: chat bubbles emitted by the agent */
  .integ-bubbles {
    padding: 18px 26px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    border-top: 1px solid rgba(245, 241, 234, 0.06);
  }
  .integ-bubble {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 88%;
    padding: 9px 14px;
    background: rgba(60, 95, 180, 0.14);
    border: 1px solid rgba(90, 124, 208, 0.32);
    border-radius: 14px 14px 14px 4px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: var(--v2-bone-hi);
    backdrop-filter: blur(8px);
    opacity: 0;
    transform: translateY(8px) scale(0.94);
    transition:
      opacity 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
      transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .integ-bubble.is-shown {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  .integ-bubble-tag {
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #a3b6ff;
    background: rgba(90, 124, 208, 0.2);
    padding: 3px 7px;
    border-radius: 4px;
    flex-shrink: 0;
  }

  @media (max-width: 720px) {
    .integ-app-pill { font-size: 12px; padding: 7px 12px 7px 7px; }
    .integ-app-pill .v2-itm { width: 22px; height: 22px; }
    .integ-bubbles { padding: 14px 18px 18px; }
    .integ-bubble { font-size: 12px; padding: 8px 12px; }
    .integ-agent { width: 110px; height: 110px; }
    .integ-agent-inner { width: 82px; height: 82px; }
    .integ-agent-inner span { font-size: 42px; }
  }

  /* Slack mock: bigger window so the conversation has more breathing room */
  .v2-pillar-visual:has(.v2-mock-slack) {
    min-height: 720px;
  }

  @media (max-width: 1100px) {
    .v2-how .v2-pillar { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  }
  .v2-pillar-reverse .v2-pillar-text { order: 2; }
  .v2-pillar-reverse .v2-pillar-visual { order: 1; }

  .v2-tag {
    font-family: var(--font-mono);
    font-size: 15px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 28px;
  }
  .v2-h3 {
    font-family: var(--font-display);
    font-weight: var(--display-weight, 500);
    font-size: clamp(36px, 4vw, 54px);
    line-height: 1.1;
    letter-spacing: var(--display-tracking, -0.025em);
    color: var(--v2-bone-hi);
    margin: 0 0 24px;
    max-width: 18ch;
  }
  .v2-h3 .muted { color: rgba(245,241,234,0.45); }
  .v2-h3 em {
    font-family: var(--font-serif);
    font-weight: 400;
    font-style: italic;
    color: var(--accent);
  }
  .v2-body {
    font-family: var(--font-body);
    font-size: 26px;
    line-height: 1.6;
    color: rgba(245,241,234,0.85);
    font-weight: 400;
    max-width: 44ch;
    margin: 0 0 32px;
    letter-spacing: -0.005em;
  }
  .v2-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .v2-list li {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 400;
    color: rgba(245,241,234,0.85);
    letter-spacing: -0.005em;
  }
  .v2-list li::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 12px rgba(60, 95, 180,0.6);
    flex-shrink: 0;
  }

  /* Pillar visuals — glass mockups */
  .v2-pillar-visual {
    position: relative;
    aspect-ratio: 1.05 / 1;
    min-height: 520px;
  }
  .v2-pillar-visual > .v2-glass {
    position: absolute;
    inset: 0;
    padding: 24px;
    display: flex;
    flex-direction: column;
    z-index: 1;
  }

  /* Generic mockup chrome */
  /* ===== Apple-demo refinement of the close-package mock ===== */

  .v2-mock-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 22px 13px;
    border-bottom: 1px solid rgba(245, 241, 234, 0.06);
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--v2-bone-hi);
    position: relative; z-index: 2;
  }
  .v2-mock-dots { display: flex; gap: 6px; }
  .v2-mock-dots span {
    width: 8px; height: 8px; border-radius: 50%;
    background: rgba(245, 241, 234, 0.16);
    transition: background 0.2s;
  }
  .v2-mock-title { flex: 1; font-weight: 500; color: var(--v2-bone-hi); letter-spacing: -0.01em; }
  .v2-mock-title .hash { color: rgba(245, 241, 234, 0.4); margin-right: 4px; }
  .v2-mock-status {
    font-family: var(--font-body);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(245, 241, 234, 0.55);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(245, 241, 234, 0.04);
    border: 1px solid rgba(245, 241, 234, 0.08);
  }
  .v2-mock-status .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 8px rgba(74, 222, 128, 0.6);
  }

  /* Ledger mockup — Apple-grade spacing and typography */
  .v2-mock-ledger { padding: 0 !important; }

  .v2-mock-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    padding: 28px 28px 28px;
    margin-bottom: 0;
    border-bottom: 1px solid rgba(245, 241, 234, 0.06);
    position: relative; z-index: 2;
  }
  .v2-mock-stats > .v2-stat + .v2-stat {
    border-left: 1px solid rgba(245, 241, 234, 0.06);
    padding-left: 28px;
  }
  .v2-stat-num {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 30px;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--v2-bone-hi);
    margin-bottom: 8px;
    font-variant-numeric: tabular-nums;
  }
  .v2-stat-lbl {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(245, 241, 234, 0.42);
  }

  .v2-mock-table {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0 28px 24px;
    position: relative; z-index: 2;
  }
  .v2-mr {
    display: grid;
    grid-template-columns: 70px 1fr 110px 110px;
    gap: 16px;
    padding: 14px 0;
    font-family: var(--font-body);
    font-size: 13.5px;
    letter-spacing: -0.005em;
    color: rgba(245, 241, 234, 0.78);
    border-bottom: 1px solid rgba(245, 241, 234, 0.04);
    align-items: center;
  }
  .v2-mr:last-child { border-bottom: 0; }
  .v2-mr-h {
    font-family: var(--font-body);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(245, 241, 234, 0.32);
    padding: 18px 0 12px;
    border-bottom: 1px solid rgba(245, 241, 234, 0.08);
  }
  .v2-mr .num {
    font-variant-numeric: tabular-nums;
    color: var(--v2-bone-hi);
    font-weight: 500;
    letter-spacing: -0.005em;
  }

  /* Merchant cell — small brand icon next to the description so the
     merchant is immediately scannable. */
  .v2-mr .merchant {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }
  .v2-mr .merchant-ico {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: -0.02em;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
  }
  .v2-mr .merchant-ico.stripe { background: #635bff; }
  .v2-mr .merchant-ico.aws    { background: #ff9900; color: #1a1a1a; font-size: 8px; font-weight: 800; }
  .v2-mr .merchant-ico.gusto  { background: #f45d48; }
  .v2-mr .merchant-ico.notion { background: #ffffff; color: #000; }
  .v2-mr .merchant-ico.brex   { background: #f96342; }
  .v2-mr .merchant-ico.mercury{ background: #1d1d1f; color: #f5f1ea; border: 1px solid rgba(245, 241, 234, 0.15); }
  .v2-mr .merchant-ico.qbo    { background: #2ca01c; font-size: 9px; font-weight: 800; }
  .v2-mr .pill {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    text-align: center;
    border: 1px solid rgba(245, 241, 234, 0.10);
    color: rgba(245, 241, 234, 0.55);
    background: rgba(245, 241, 234, 0.03);
    width: fit-content;
  }
  .v2-mr .pill.ok {
    color: #6ee7a8;
    border-color: rgba(110, 231, 168, 0.28);
    background: rgba(110, 231, 168, 0.08);
  }
  .v2-mr .pill.flag {
    color: #f5b9a0;
    border-color: rgba(245, 185, 160, 0.28);
    background: rgba(245, 185, 160, 0.08);
  }

  /* ============================================================
     Animated close-package mock: 6-phase cycle
     start → entered → classify → review → approved → closed
     ============================================================ */
  /* Clip the timeline's square top corners to the card's rounded shape
     so we don't see a tiny rectangle peeking out at the corners. */
  .v2-mock-ledger { isolation: isolate; overflow: hidden; }
  .v2-mock-table { position: relative; }

  /* Timeline status bar — sits at the very top of the close-package
     mock and steps through the 6 phases so the viewer always knows
     where in the lifecycle they are. */
  .v2-mock-timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    align-items: start;
    padding: 26px 28px 22px;
    background: linear-gradient(180deg, rgba(245, 241, 234, 0.02), transparent 100%);
  }
  /* Soft hairline below timeline (avoid the heavier border that read
     as a visible square edge against the rounded card). */
  .v2-mock-timeline + .v2-mock-bar { border-top: 1px solid rgba(245, 241, 234, 0.06); }

  /* Connecting track behind the dots */
  .v2-mock-timeline::before,
  .v2-mock-timeline::after {
    content: '';
    position: absolute;
    top: 32px; /* aligns with dot vertical center, accounting for new top padding */
    height: 2px;
    border-radius: 2px;
    z-index: 1;
  }
  /* Pure-percentage positioning so the track lines up with dot centers
     at any card width. First dot center sits at 1/12 (8.333%), last
     dot at 11/12 (91.667%) — so the track spans 8.333% → 91.667%
     (width 83.333%). Dots have z-index above and overlap the track
     at the endpoints. */
  .v2-mock-timeline::before {
    left: 8.333%;
    right: 8.333%;
    background: rgba(245, 241, 234, 0.10);
  }
  .v2-mock-timeline::after {
    left: 8.333%;
    width: var(--tl-fill, 0%);
    background: linear-gradient(90deg, rgba(90, 124, 208, 0.45) 0%, var(--accent) 100%);
    box-shadow: 0 0 10px rgba(60, 95, 180, 0.4);
    /* Smoother glide between phases — slightly longer + softer curve */
    transition: width 1s cubic-bezier(0.4, 0.0, 0.2, 1);
  }
  .v2-mock-tl-step {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    min-width: 0;
  }
  .v2-mock-tl-step .dot {
    width: 12px; height: 12px;
    border-radius: 50%;
    background: rgba(14, 16, 24, 0.95);
    border: 1.5px solid rgba(245, 241, 234, 0.18);
    transition: all 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .v2-mock-tl-step .lbl {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(245, 241, 234, 0.4);
    white-space: nowrap;
    transition: color 0.4s ease;
  }
  .v2-mock-tl-step.is-complete .dot {
    background: rgba(60, 95, 180, 0.55);
    border-color: rgba(90, 124, 208, 0.7);
  }
  .v2-mock-tl-step.is-complete .lbl {
    color: rgba(245, 241, 234, 0.55);
  }
  .v2-mock-tl-step.is-active .dot {
    background: var(--accent);
    border-color: rgba(90, 124, 208, 0.85);
    transform: scale(1.4);
    box-shadow: 0 0 16px rgba(60, 95, 180, 0.7), 0 0 4px rgba(255, 255, 255, 0.4) inset;
    animation: tlPulse 1.6s ease-in-out infinite;
  }
  .v2-mock-tl-step.is-active .lbl {
    color: var(--v2-bone-hi);
    font-weight: 600;
  }
  @keyframes tlPulse {
    0%, 100% { box-shadow: 0 0 16px rgba(60, 95, 180, 0.7), 0 0 4px rgba(255, 255, 255, 0.4) inset; }
    50%      { box-shadow: 0 0 22px rgba(60, 95, 180, 0.95), 0 0 4px rgba(255, 255, 255, 0.5) inset; }
  }
  @media (max-width: 720px) {
    .v2-mock-timeline { padding: 18px 16px 14px; }
    .v2-mock-tl-step .lbl { font-size: 9px; letter-spacing: 0.05em; }
    .v2-mock-tl-step .dot { width: 10px; height: 10px; }
    .v2-mock-timeline::before,
    .v2-mock-timeline::after { top: 24px; }
  }

  /* Scanner sweep during the "classifying" phase — a thin glowing line
     passes down the table mimicking an agent reading row by row. */
  .v2-mock-ledger[data-phase="classifying"] .v2-mock-table::before {
    content: '';
    position: absolute;
    left: 0; right: 0;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, rgba(90, 124, 208, 0.85) 50%, transparent 100%);
    box-shadow: 0 0 12px rgba(90, 124, 208, 0.6);
    pointer-events: none;
    z-index: 3;
    animation: mockScan 1.6s ease-in-out infinite;
  }
  @keyframes mockScan {
    0%   { top: 0;    opacity: 0; }
    15%  {            opacity: 1; }
    85%  {            opacity: 1; }
    100% { top: 100%; opacity: 0; }
  }

  /* Closing flash — gentle green halo when the close package signs */
  .v2-mock-ledger[data-phase="closed"]::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(110, 231, 168, 0.22) 0%, rgba(110, 231, 168, 0.06) 35%, transparent 70%);
    animation: mockClosedBurst 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
    z-index: 1;
  }
  @keyframes mockClosedBurst {
    0%   { opacity: 0; transform: scale(0.96); }
    18%  { opacity: 1; transform: scale(1.02); }
    100% { opacity: 0; transform: scale(1.08); }
  }

  /* Row-level review highlight — during the approved phase, each row
     briefly glows blue while the CPA "looks at" it, then its pill
     flips green. JS adds .is-reviewing for ~280ms before flipping the
     pill and stepping to the next row. The SM avatar in the bottom
     signed-off bar establishes who's doing the review. */
  .v2-mock-ledger .v2-mr.is-reviewing {
    background: linear-gradient(90deg, rgba(60, 95, 180, 0.12) 0%, rgba(60, 95, 180, 0.04) 100%);
    box-shadow: inset 3px 0 0 rgba(90, 124, 208, 0.7);
    transition: background 0.16s ease-out, box-shadow 0.16s ease-out;
  }
  .v2-mock-ledger .v2-mr {
    transition: background 0.45s ease-out, box-shadow 0.45s ease-out;
  }

  /* During the review phase (CPA actively reviewing), pulse the SM
     avatar in the bottom bar so it reads as "actively engaged". */
  .v2-mock-ledger[data-phase="approved"] .v2-signed-mark {
    animation: cpaActivePulse 1.4s ease-in-out infinite;
  }
  @keyframes cpaActivePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(90, 124, 208, 0.5); }
    50%      { box-shadow: 0 0 0 6px rgba(90, 124, 208, 0); }
  }

  .v2-mock-ledger .v2-mr:not(.v2-mr-h) {
    transition: opacity 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .v2-mock-ledger[data-phase="standby"] .v2-mr:not(.v2-mr-h) {
    opacity: 0;
    transform: translateY(6px);
  }
  .v2-mock-ledger[data-phase="entered"] .v2-mr:not(.v2-mr-h) {
    opacity: 1;
    transform: translateY(0);
  }
  /* Pill state colors driven by data-state on each pill */
  .v2-mock-ledger .pill { transition: color 0.4s ease, background 0.4s ease, border-color 0.4s ease; }
  .v2-mock-ledger .pill[data-state="empty"] {
    color: rgba(245, 241, 234, 0.28);
    border-color: rgba(245, 241, 234, 0.10);
    background: transparent;
  }
  .v2-mock-ledger .pill[data-state="new"] {
    color: rgba(245, 241, 234, 0.55);
    border-color: rgba(245, 241, 234, 0.18);
    background: rgba(245, 241, 234, 0.04);
  }
  .v2-mock-ledger .pill[data-state="classified"] {
    color: #a3b6ff;
    border-color: rgba(90, 124, 208, 0.42);
    background: rgba(60, 95, 180, 0.12);
  }
  .v2-mock-ledger .pill[data-state="review"] {
    color: #f5c98a;
    border-color: rgba(220, 180, 90, 0.42);
    background: rgba(220, 180, 90, 0.10);
    animation: mockReviewPulse 1.4s ease-in-out infinite;
  }
  .v2-mock-ledger .pill[data-state="reconciled"] {
    color: #6ee7a8;
    border-color: rgba(110, 231, 168, 0.32);
    background: rgba(110, 231, 168, 0.08);
  }
  @keyframes mockReviewPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
  }

  /* Status indicator (the pulsing "Live" pill) shifts color per phase */
  .v2-mock-status .dot { transition: background 0.4s ease, box-shadow 0.4s ease; }
  .v2-mock-status[data-state="standby"] .dot { background: rgba(245, 241, 234, 0.45); box-shadow: none; animation: none; }
  .v2-mock-status[data-state="standby"] { color: rgba(245, 241, 234, 0.45); }
  .v2-mock-status[data-state="classifying"] .dot { background: #5a7cd0; box-shadow: 0 0 10px rgba(90, 124, 208, 0.5); }
  .v2-mock-status[data-state="classifying"] { color: #a3b6ff; }
  .v2-mock-status[data-state="reviewing"]  .dot { background: #d4a85e; box-shadow: 0 0 10px rgba(220, 180, 90, 0.5); }
  .v2-mock-status[data-state="reviewing"]  { color: #f5c98a; }
  .v2-mock-status[data-state="closed"]     .dot { background: #6ee7a8; box-shadow: 0 0 10px rgba(110, 231, 168, 0.5); animation: none; }
  .v2-mock-status[data-state="closed"]     { color: #6ee7a8; }

  /* Signed-off footer fades in only at "approved" / "closed" phases */
  .v2-mock-ledger .v2-mock-foot {
    transition: opacity 0.5s ease;
  }
  .v2-mock-ledger:not([data-phase="approved"]):not([data-phase="closed"]) .v2-mock-foot {
    opacity: 0.32;
  }
  .v2-mock-ledger .v2-signed-pill { transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease; }
  .v2-mock-ledger:not([data-phase="closed"]) .v2-signed-pill {
    background: rgba(245, 241, 234, 0.04);
    border-color: rgba(245, 241, 234, 0.12);
    color: rgba(245, 241, 234, 0.4);
  }

  .v2-mock-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 28px 22px;
    border-top: 1px solid rgba(245, 241, 234, 0.06);
    position: relative; z-index: 2;
  }
  .v2-signed { display: flex; align-items: center; gap: 12px; }
  .v2-signed-mark {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1f2a4a 0%, #060810 100%);
    border: 1px solid rgba(90, 124, 208, 0.45);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: -0.02em;
    color: var(--accent);
  }
  .v2-signed-meta {
    font-family: var(--font-body);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: rgba(245, 241, 234, 0.85);
  }
  .v2-signed-time {
    font-family: var(--font-body);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(245, 241, 234, 0.42);
    margin-top: 3px;
  }
  .v2-signed-pill {
    background: rgba(60, 95, 180, 0.18);
    color: #c5d3ff;
    border: 1px solid rgba(90, 124, 208, 0.4);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    font-family: var(--font-body);
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 999px;
  }
  .v2-mock-ledger[data-phase="closed"] .v2-signed-pill {
    background: rgba(110, 231, 168, 0.14);
    color: #6ee7a8;
    border-color: rgba(110, 231, 168, 0.32);
  }

  /* Slack mockup */
  /* ===== Slack mock — Apple-grade refinement of all typography ===== */
  .v2-mock-slack { padding: 0 !important; display: flex !important; flex-direction: column; }
  .v2-mock-slack > .v2-mock-bar { padding: 14px 22px 13px; }
  /* The slack pillar visual gets a taller min-height so the entire
     conversation fits on one page, no internal scroll. */
  .v2-pillar-visual:has(.v2-mock-slack) {
    aspect-ratio: auto;
    min-height: 600px;
  }
  .v2-slack-feed {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 14px 22px 18px;
    position: relative; z-index: 2;
    overflow: hidden;   /* no internal scroll bar */
  }
  .v2-msg { display: flex; gap: 12px; align-items: flex-start; }
  .v2-av {
    width: 32px; height: 32px;
    border-radius: 7px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: -0.02em;
  }
  .v2-av-you { background: rgba(60, 95, 180, 0.18); color: #a3b6ff; border: 1px solid rgba(90, 124, 208, 0.35); overflow: hidden; }
  .v2-av-pp { background: var(--accent-grad); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22); overflow: hidden; }
  .v2-av img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;
  }
  .v2-msg-body { flex: 1; min-width: 0; }
  .v2-msg-name {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--v2-bone-hi);
    margin-bottom: 4px;
    display: flex; gap: 8px; align-items: center;
  }
  .v2-msg-bot {
    font-family: var(--font-body);
    font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
    background: rgba(245, 241, 234, 0.10); color: rgba(245, 241, 234, 0.65);
    padding: 2px 6px; border-radius: 3px; font-weight: 600;
  }
  .v2-msg-time {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    color: rgba(245, 241, 234, 0.42);
  }
  .v2-msg-text {
    font-family: var(--font-body);
    font-size: 13.5px;
    line-height: 1.5;
    letter-spacing: -0.005em;
    color: rgba(245, 241, 234, 0.88);
  }
  .v2-msg-text strong { color: var(--v2-bone-hi); font-weight: 600; }
  .v2-msg-text .accent { color: #a3b6ff; font-weight: 600; }
  .v2-msg-link {
    color: #a3b6ff;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none;
    margin-top: 6px;
    display: inline-block;
  }
  .v2-msg-link:hover { color: #c5d3ff; }

  /* Bot "card" — for the proactive close-package update */
  .v2-msg-card {
    margin-top: 6px;
    padding: 12px 14px;
    background: rgba(60, 95, 180, 0.10);
    border: 1px solid rgba(90, 124, 208, 0.28);
    border-left: 3px solid var(--accent);
    border-radius: 8px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
  }
  .v2-msg-card-ico {
    width: 22px; height: 22px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(110, 231, 168, 0.18);
    color: #6ee7a8;
    display: grid; place-items: center;
    margin-top: 1px;
  }
  .v2-msg-card-ico svg { width: 12px; height: 12px; }
  .v2-msg-card-body { font-size: 13px; line-height: 1.45; color: var(--v2-bone-hi); }
  .v2-msg-card-body .meta {
    display: block;
    font-size: 11.5px;
    font-weight: 500;
    color: rgba(245, 241, 234, 0.55);
    margin-top: 4px;
  }

  /* Inline budget vs actual progress bar */
  .v2-msg-budget {
    margin-top: 10px;
    padding: 12px 14px;
    background: rgba(245, 241, 234, 0.03);
    border: 1px solid rgba(245, 241, 234, 0.08);
    border-radius: 8px;
  }
  .v2-msg-budget-track {
    height: 6px;
    border-radius: 3px;
    background: rgba(245, 241, 234, 0.08);
    overflow: hidden;
    position: relative;
  }
  .v2-msg-budget-fill {
    height: 100%;
    width: 74%;
    background: linear-gradient(90deg, rgba(90, 124, 208, 0.6), var(--accent));
    border-radius: 3px;
    box-shadow: 0 0 8px rgba(60, 95, 180, 0.4);
  }
  .v2-msg-budget-meta {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    color: rgba(245, 241, 234, 0.65);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.005em;
  }
  .v2-msg-budget-meta .lead { color: var(--v2-bone-hi); }

  /* Slack-style action buttons under bot messages */
  .v2-msg-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
  }
  .v2-msg-btn {
    padding: 5px 10px;
    font-family: var(--font-body);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: rgba(245, 241, 234, 0.85);
    background: rgba(245, 241, 234, 0.05);
    border: 1px solid rgba(245, 241, 234, 0.14);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    display: inline-flex; align-items: center; gap: 5px;
  }
  .v2-msg-btn:hover {
    background: rgba(245, 241, 234, 0.10);
    border-color: rgba(245, 241, 234, 0.22);
    color: var(--v2-bone-hi);
  }
  .v2-msg-btn.is-cmd {
    font-family: var(--font-mono);
    color: #a3b6ff;
    border-color: rgba(90, 124, 208, 0.35);
    background: rgba(60, 95, 180, 0.10);
  }
  .v2-msg-btn.is-cmd:hover {
    background: rgba(60, 95, 180, 0.18);
    border-color: rgba(90, 124, 208, 0.55);
  }

  .v2-slack-input {
    padding: 12px 22px 16px;
    border-top: 1px solid rgba(245, 241, 234, 0.06);
    position: relative; z-index: 2;
  }
  .v2-slack-input-inner {
    background: rgba(245, 241, 234, 0.04);
    border: 1px solid rgba(245, 241, 234, 0.10);
    border-radius: 8px;
    padding: 9px 14px;
    font-family: var(--font-body);
    font-size: 12.5px;
    color: rgba(245, 241, 234, 0.42);
  }

  /* Progressive reveal of Slack messages — JS toggles .is-shown on
     each message. Hidden messages use display:none so they consume
     no flex gap; revealed messages get display:flex and a fade-up
     keyframe. This avoids margin-trick overlap from the previous
     max-height implementation and keeps the parent flex gap honest. */
  .v2-slack-feed[data-anim="on"] { gap: 18px; }
  .v2-slack-feed[data-anim="on"] .v2-msg[data-step] {
    display: none;
  }
  .v2-slack-feed[data-anim="on"] .v2-msg[data-step].is-shown {
    display: flex;
    animation: msgFadeUp 0.38s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  @keyframes msgFadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Slack-style emoji reaction pill (under a message, like a 🔥 react) */
  .v2-msg-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
  }
  .v2-msg-reaction {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px 3px 7px;
    background: rgba(60, 95, 180, 0.12);
    border: 1px solid rgba(90, 124, 208, 0.35);
    border-radius: 12px;
    font-family: var(--font-body);
    font-size: 11.5px;
    font-weight: 600;
    color: #a3b6ff;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.2s;
    user-select: none;
  }
  .v2-msg-reaction:hover {
    background: rgba(60, 95, 180, 0.20);
    border-color: rgba(90, 124, 208, 0.55);
    transform: translateY(-1px);
  }
  .v2-msg-reaction-emoji {
    font-size: 13px;
    line-height: 1;
    transform: translateY(-0.5px);
  }
  .v2-msg-reaction-count {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
  }
  /* Hidden reaction pills — display:none until revealed, then pop in */
  .v2-slack-feed[data-anim="on"] .v2-msg-reactions[data-step] {
    display: none;
  }
  .v2-slack-feed[data-anim="on"] .v2-msg-reactions[data-step].is-shown {
    display: flex;
    animation: reactPop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }
  @keyframes reactPop {
    from { opacity: 0; transform: scale(0.6); }
    to   { opacity: 1; transform: scale(1); }
  }

  /* Typing indicator — three dots in a Slack-style bubble. JS appends
     the element when it should appear, then removes it. We animate
     the appearance and disappearance via keyframes triggered by
     classes, leveraging the parent flex gap for spacing. */
  .v2-typing {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    animation: msgFadeUp 0.28s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .v2-typing.is-hiding {
    animation: msgFadeDown 0.22s cubic-bezier(0.4, 0, 0.7, 1) both;
  }
  @keyframes msgFadeDown {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-4px); }
  }
  .v2-typing .v2-av { width: 32px; height: 32px; border-radius: 7px; flex-shrink: 0; display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; font-size: 13px; }
  .v2-typing-dots {
    display: inline-flex;
    gap: 5px;
    padding: 10px 14px;
    background: rgba(245, 241, 234, 0.06);
    border-radius: 999px;
    align-items: center;
    height: 32px;
    box-sizing: border-box;
  }
  .v2-typing-dots span {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: rgba(245, 241, 234, 0.55);
    animation: typingBounce 1.2s ease-in-out infinite;
  }
  .v2-typing-dots span:nth-child(2) { animation-delay: 0.18s; }
  .v2-typing-dots span:nth-child(3) { animation-delay: 0.36s; }
  @keyframes typingBounce {
    0%, 60%, 100% { transform: translateY(0);   opacity: 0.45; }
    30%           { transform: translateY(-3px); opacity: 1;    }
  }

  /* Integration mockup */
  .v2-mock-integ {
    padding: 32px !important;
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
  }
  .v2-mock-integ .integ-lines {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: visible;
  }
  .v2-mock-integ .integ-lines .il-base {
    fill: none;
    stroke: rgba(245,241,234,0.12);
    stroke-width: 1.2;
  }
  .v2-mock-integ .integ-lines .il-flow {
    fill: none;
    stroke: url(#integFlow);
    stroke-width: 1.6;
    stroke-linecap: round;
  }
  .v2-integ-col {
    position: relative; z-index: 2;
    display: flex; flex-direction: column; gap: 12px;
  }
  .v2-integ-label {
    font-family: var(--font-mono);
    font-size: 15px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(245,241,234,0.4);
    margin-bottom: 8px;
  }
  .v2-integ-outputs .v2-integ-label { text-align: right; }
  .v2-integ-tile {
    background: rgba(245,241,234,0.04);
    border: 1px solid var(--v2-glass-border);
    backdrop-filter: blur(8px);
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 500;
    color: var(--v2-bone-hi);
    transition: all 0.4s ease;
  }
  .v2-integ-tile:hover {
    border-color: rgba(60, 95, 180,0.4);
    background: rgba(245,241,234,0.07);
  }
  .v2-itm {
    width: 28px; height: 28px;
    border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 15px;
    flex-shrink: 0;
    color: #fff;
  }
  .v2-itm svg { width: 16px; height: 16px; }
  .v2-itm-stripe   { background: #635bff; }
  .v2-itm-mercury  { background: #1d1d1f; color: #f5f1ea; border: 1px solid rgba(245,241,234,0.15); }
  .v2-itm-qbo      { background: #2ca01c; font-size: 15px; }
  .v2-itm-gusto    { background: #f45d48; }
  .v2-itm-brex     { background: #f96342; }
  .v2-itm-slack    { background: #4a154b; }
  .v2-itm-whatsapp { background: #25d366; }
  .v2-itm-email    { background: #06080f; color: var(--accent); border: 1px solid rgba(60, 95, 180,0.4); }

  .v2-integ-hub {
    position: relative;
    z-index: 3;
    width: 96px; height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .v2-integ-hub-inner {
    width: 76px; height: 76px;
    border-radius: 18px;
    background: linear-gradient(135deg, #06080f 0%, #000003 100%);
    border: 1px solid var(--accent);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 50px rgba(60, 95, 180,0.4), inset 0 0 30px rgba(60, 95, 180,0.1);
    position: relative; z-index: 2;
  }
  .v2-integ-hub-inner span {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 40px;
    color: var(--accent);
    line-height: 1;
  }
  .v2-integ-hub-pulse {
    position: absolute;
    inset: 6px;
    border-radius: 22px;
    border: 1px solid rgba(60, 95, 180,0.5);
    animation: integHubPulseV2 2.8s ease-out infinite;
    z-index: 1;
  }
  @keyframes integHubPulseV2 {
    0%   { transform: scale(0.95); opacity: 0.7; }
    100% { transform: scale(1.5); opacity: 0; }
  }

  /* ============================================================
     INTEGRATION MOCK — radial layout + entry animation + motion
     ============================================================ */

  /* Radial layout — override the input/hub/output grid. Pillar visual
     becomes square so the circle reads correctly. */
  .v2-pillar-visual:has(.v2-mock-integ) {
    aspect-ratio: 1 / 1;
    min-height: 540px;
  }
  .v2-mock-integ {
    display: block !important;
    position: relative;
    padding: 0 !important;
    aspect-ratio: 1 / 1;
  }

  /* Hub absolutely centered */
  .v2-mock-integ .v2-integ-hub {
    position: absolute;
    top: 50%; left: 50%;
    width: 96px; height: 96px;
    transform: translate(-50%, -50%);
  }

  /* All 8 tiles absolutely positioned at compass points around the
     hub. Each tile is centered on its position via translate(-50%, -50%);
     the float keyframe composes with that centering. */
  .v2-mock-integ .v2-integ-tile {
    position: absolute;
    width: max-content;
    min-width: 110px;
    transform: translate(-50%, -50%);
    /* Entry animation — opacity + scale ramp from hidden to revealed.
       JS triggers .is-entered after the diagram enters viewport. */
    opacity: 0;
    transition:
      opacity 0.55s cubic-bezier(0.2, 0.7, 0.2, 1),
      border-color 0.18s, background 0.18s, box-shadow 0.18s;
    transition-delay: var(--enter-delay, 0s);
  }
  .v2-mock-integ .v2-integ-tile.is-entered { opacity: 1; }

  /* After entry: continuous float (composes with centering translate) */
  .v2-mock-integ .v2-integ-tile.is-entered {
    animation: integTileFloat 4.4s ease-in-out infinite;
    animation-delay: calc(var(--enter-delay, 0s) + 0.6s);
    will-change: transform;
  }
  .v2-mock-integ .v2-integ-tile[data-pos="ne"] { animation-duration: 4.8s; }
  .v2-mock-integ .v2-integ-tile[data-pos="e"]  { animation-duration: 5.0s; }
  .v2-mock-integ .v2-integ-tile[data-pos="se"] { animation-duration: 4.6s; }
  .v2-mock-integ .v2-integ-tile[data-pos="s"]  { animation-duration: 5.2s; }
  .v2-mock-integ .v2-integ-tile[data-pos="sw"] { animation-duration: 4.5s; }
  .v2-mock-integ .v2-integ-tile[data-pos="w"]  { animation-duration: 4.9s; }
  .v2-mock-integ .v2-integ-tile[data-pos="nw"] { animation-duration: 4.7s; }
  @keyframes integTileFloat {
    0%, 100% { transform: translate(-50%, -50%); }
    50%      { transform: translate(-50%, calc(-50% - 3px)); }
  }

  /* Compass positions on a circle of ~37.5% radius from container center */
  .v2-mock-integ .v2-integ-tile[data-pos="n"]  { top: 12.5%; left: 50%; }
  .v2-mock-integ .v2-integ-tile[data-pos="ne"] { top: 23.5%; left: 76.5%; }
  .v2-mock-integ .v2-integ-tile[data-pos="e"]  { top: 50%;   left: 87.5%; }
  .v2-mock-integ .v2-integ-tile[data-pos="se"] { top: 76.5%; left: 76.5%; }
  .v2-mock-integ .v2-integ-tile[data-pos="s"]  { top: 87.5%; left: 50%; }
  .v2-mock-integ .v2-integ-tile[data-pos="sw"] { top: 76.5%; left: 23.5%; }
  .v2-mock-integ .v2-integ-tile[data-pos="w"]  { top: 50%;   left: 12.5%; }
  .v2-mock-integ .v2-integ-tile[data-pos="nw"] { top: 23.5%; left: 23.5%; }

  /* Connection lines start invisible (stroke-dashoffset = full length).
     JS animates them to 0 after tiles have faded in, so it looks like
     each connection draws out from the hub to its tile. */
  .v2-mock-integ .integ-lines .il-base,
  .v2-mock-integ .integ-lines .il-flow {
    transition: stroke-dashoffset 0.65s cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  /* Brief "ping" when a tile's packet fires toward the hub. Composes
     with the centering translate via translate3d. */
  .v2-integ-tile.is-pinging {
    border-color: rgba(90, 124, 208, 0.7);
    background: rgba(60, 95, 180, 0.18);
    box-shadow: 0 0 22px rgba(60, 95, 180, 0.5);
    z-index: 4;
  }

  /* Brighter, glowing flow packets along each connection */
  .v2-mock-integ .integ-lines .il-flow {
    stroke-width: 2.2;
    filter: drop-shadow(0 0 6px rgba(90, 124, 208, 0.55));
  }
  .v2-mock-integ .integ-lines .il-base {
    stroke: rgba(245, 241, 234, 0.07);
    stroke-width: 1;
    stroke-dasharray: 2 4;
    stroke-linecap: round;
    opacity: 0.6;
  }

  /* Hub gets a conic-gradient halo that rotates continuously, plus a
     stronger inner pulse, so the center reads as a live processing
     core. Replaces the static "border + box-shadow" feel. */
  .v2-integ-hub::before {
    content: '';
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
      transparent 0%,
      rgba(90, 124, 208, 0.35) 18%,
      transparent 36%,
      rgba(90, 124, 208, 0.5) 58%,
      transparent 76%,
      rgba(90, 124, 208, 0.32) 92%,
      transparent 100%);
    filter: blur(10px);
    animation: integHubHalo 5.2s linear infinite;
    z-index: 0;
    pointer-events: none;
  }
  @keyframes integHubHalo {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }
  .v2-integ-hub-inner {
    animation: integHubBreathe 2.6s ease-in-out infinite;
  }
  @keyframes integHubBreathe {
    0%, 100% { box-shadow: 0 0 36px rgba(60, 95, 180, 0.4),  inset 0 0 22px rgba(60, 95, 180, 0.1); }
    50%      { box-shadow: 0 0 56px rgba(60, 95, 180, 0.65), inset 0 0 28px rgba(60, 95, 180, 0.18); }
  }

  /* Output tile receives a brief "received" badge animation when a
     packet arrives. JS toggles .is-receiving for ~700ms. */
  .v2-integ-tile.is-receiving::after {
    content: '';
    position: absolute;
    top: -3px;
    right: -3px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #6ee7a8;
    box-shadow: 0 0 10px rgba(110, 231, 168, 0.7);
    animation: integReceivePop 0.7s ease-out forwards;
  }
  .v2-integ-tile { position: relative; }
  @keyframes integReceivePop {
    0%   { transform: scale(0); opacity: 0; }
    30%  { transform: scale(1.4); opacity: 1; }
    100% { transform: scale(1); opacity: 0; }
  }

  /* ============================================================
     CLIENTS
     ============================================================ */
  .v2-cases {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
  .v2-case {
    padding: 40px 36px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    transition: transform 0.5s cubic-bezier(0.2,0.7,0.2,1), border-color 0.5s ease;
  }
  .v2-case:hover {
    transform: translateY(-6px);
    border-color: var(--v2-glass-border-strong);
    box-shadow: var(--v2-shadow-hi);
  }
  .v2-case-feature {
    border-color: rgba(60, 95, 180,0.35);
    background: rgba(60, 95, 180,0.04);
    transform: translateY(-12px);
  }
  .v2-case-feature:hover { transform: translateY(-18px); }

  .v2-case-head {
    display: flex; flex-direction: column; gap: 4px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--v2-glass-border);
    position: relative; z-index: 2;
  }
  .v2-case-co {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 500;
    letter-spacing: -0.015em;
    color: var(--v2-bone-hi);
  }
  .v2-case-stage {
    font-family: var(--font-mono);
    font-size: 15px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(245,241,234,0.4);
  }
  .v2-case-title {
    font-family: var(--font-display);
    font-weight: var(--display-weight, 500);
    font-size: 26px;
    line-height: 1.25;
    letter-spacing: var(--display-tracking, -0.02em);
    color: var(--v2-bone-hi);
    margin: 0;
    position: relative; z-index: 2;
  }
  .v2-case-stats {
    display: flex; flex-direction: column;
    gap: 12px;
    padding: 16px 0;
    border-top: 1px solid var(--v2-glass-border);
    border-bottom: 1px solid var(--v2-glass-border);
    position: relative; z-index: 2;
  }
  .v2-case-stat {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  }
  .v2-case-stat .num {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 26px;
    letter-spacing: -0.015em;
    color: var(--accent);
  }
  .v2-case-stat .lbl {
    font-family: var(--font-mono);
    font-size: 15px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(245,241,234,0.5);
    text-align: right;
  }
  .v2-case-quote {
    font-family: var(--font-serif);
    font-size: 26px;
    line-height: 1.4;
    font-style: italic;
    color: rgba(245,241,234,0.85);
    margin: 0;
    position: relative; z-index: 2;
  }

  /* ============================================================
     PRICING — Apple-style: scannable, soft glow on featured
     ============================================================ */
  .v2-prices {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
  }
  .v2-price {
    padding: 48px 36px 40px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    transition: transform 0.5s cubic-bezier(0.2,0.7,0.2,1), border-color 0.5s ease;
  }
  .v2-price:hover {
    transform: translateY(-4px);
    border-color: var(--v2-glass-border-strong);
  }
  .v2-price-feature {
    border-color: rgba(60, 95, 180,0.4);
    background:
      radial-gradient(circle at 50% -10%, rgba(60, 95, 180,0.18), transparent 60%),
      rgba(60, 95, 180,0.04);
    transform: translateY(-12px);
    box-shadow:
      0 60px 120px -20px rgba(0,0,0,0.6),
      0 0 80px rgba(60, 95, 180,0.12);
  }
  .v2-price-feature:hover { transform: translateY(-16px); }
  .v2-price-flag {
    position: absolute;
    top: -1px; left: 50%;
    transform: translateX(-50%);
    background: var(--accent-grad);
    color: #050a18;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 4px 12px rgba(60, 95, 180, 0.35);
    font-family: var(--font-mono);
    font-size: 15px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 0 0 8px 8px;
    z-index: 3;
  }
  .v2-price > * { position: relative; z-index: 2; }

  .v2-price-name {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: var(--display-weight, 500);
    letter-spacing: var(--display-tracking, -0.02em);
    color: var(--v2-bone-hi);
  }
  .v2-price-amount {
    display: flex;
    align-items: baseline;
    gap: 8px;
  }
  .v2-pa-num {
    font-family: var(--font-display);
    font-weight: var(--display-weight, 500);
    font-size: 56px;
    line-height: 1;
    letter-spacing: var(--display-tracking, -0.04em);
    color: var(--v2-bone-hi);
    font-variant-numeric: tabular-nums;
  }
  .v2-price-feature .v2-pa-num { color: var(--accent); }
  .v2-pa-unit {
    font-family: var(--font-body);
    font-size: 26px;
    color: rgba(245,241,234,0.5);
    font-weight: 400;
  }
  .v2-price-tag {
    font-family: var(--font-body);
    font-size: 26px;
    line-height: 1.5;
    color: rgba(245,241,234,0.7);
    margin: 0;
    font-weight: 300;
    letter-spacing: -0.005em;
  }
  .v2-price-list {
    list-style: none;
    padding: 16px 0 0;
    margin: 0;
    border-top: 1px solid var(--v2-glass-border);
    display: flex; flex-direction: column;
    gap: 12px;
    flex: 1;
  }
  .v2-price-list li {
    font-family: var(--font-body);
    font-size: 15px;
    color: rgba(245,241,234,0.85);
    display: flex;
    align-items: center;
    gap: 12px;
    letter-spacing: -0.005em;
  }
  .v2-price-list li::before {
    content: '';
    width: 14px; height: 14px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(60, 95, 180,0.15);
    border: 1px solid rgba(60, 95, 180,0.4);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M3.5 7l2.2 2.2 4.8-4.8' fill='none' stroke='%235e8cd9' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-position: center;
    background-repeat: no-repeat;
  }
  .v2-price-cta {
    text-align: center;
    padding: 14px 24px;
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.005em;
    border-radius: 999px;
    transition: all 0.3s ease;
    margin-top: 8px;
  }
  .v2-cta-ghost {
    color: var(--v2-bone-hi);
    border: 1px solid var(--v2-glass-border-strong);
    background: rgba(245,241,234,0.03);
  }
  .v2-cta-ghost:hover {
    background: rgba(245,241,234,0.08);
    border-color: rgba(245,241,234,0.4);
  }
  .v2-cta-primary {
    background: var(--accent-grad);
    color: #050a18;
    border: 1px solid var(--accent);
    box-shadow: 0 6px 20px rgba(60, 95, 180, 0.35), inset 0 1px 0 rgba(255,255,255,0.18);
    box-shadow: 0 8px 24px rgba(60, 95, 180,0.25);
  }
  .v2-cta-primary:hover {
    background: #4a6fc7;
    box-shadow: 0 12px 32px rgba(60, 95, 180,0.4);
    transform: translateY(-1px);
  }

  /* ============================================================
     FAQ
     ============================================================ */
  .v2-faq { max-width: 980px; }
  .v2-faq-intro { margin-bottom: 80px; }
  .v2-faq-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .v2-faq-item {
    background: rgba(14, 14, 16, 0.78);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid rgba(245, 241, 234, 0.10);
    border-radius: 16px;
    overflow: hidden;
    transition: border-color 0.4s ease, background 0.4s ease;
  }
  .v2-faq-item:hover { border-color: rgba(245, 241, 234, 0.18); background: rgba(18, 18, 20, 0.85); }
  .v2-faq-item[open] { border-color: rgba(60, 95, 180, 0.32); background: rgba(3, 5, 12, 0.88); }
  .v2-faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 28px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 500;
    color: var(--v2-bone-hi);
    font-size: 26px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.015em;
    color: var(--v2-bone-hi);
  }
  .v2-faq-item summary::-webkit-details-marker { display: none; }
  .v2-faq-mark {
    position: relative;
    width: 14px; height: 14px;
    flex-shrink: 0;
    transition: transform 0.4s cubic-bezier(0.2,0.7,0.2,1);
  }
  .v2-faq-mark::before,
  .v2-faq-mark::after {
    content: '';
    position: absolute;
    background: var(--accent);
    border-radius: 1px;
    transition: opacity 0.3s ease;
  }
  .v2-faq-mark::before { top: 6px; left: 0; right: 0; height: 2px; }
  .v2-faq-mark::after { left: 6px; top: 0; bottom: 0; width: 2px; }
  .v2-faq-item[open] .v2-faq-mark::after { opacity: 0; }
  .v2-faq-body {
    padding: 0 32px 28px;
    font-family: var(--font-body);
    font-size: 26px;
    line-height: 1.65;
    color: rgba(245,241,234,0.85);
    font-weight: 400;
    max-width: 70ch;
    letter-spacing: -0.005em;
  }

  /* ============================================================
     FINAL CTA
     ============================================================ */
  .v2-final { padding-top: 120px; padding-bottom: 200px; }
  .v2-final-card {
    padding: 96px 48px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    max-width: 980px;
    margin: 0 auto;
    background:
      radial-gradient(circle at 50% 0%, rgba(60, 95, 180,0.12), transparent 60%),
      var(--v2-glass-bg);
  }
  .v2-final-card > * { position: relative; z-index: 2; }
  .v2-final-eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 8px 16px;
    border: 1px solid var(--v2-glass-border-strong);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 15px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(245,241,234,0.7);
    background: rgba(245,241,234,0.04);
  }
  .v2-final-eyebrow .dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 12px rgba(60, 95, 180,0.6);
    animation: ctaPulse 2s ease-in-out infinite;
  }
  .v2-final-title {
    font-family: var(--font-display);
    font-size: clamp(40px, 6vw, 76px);
    font-weight: var(--display-weight, 500);
    line-height: 1.05;
    letter-spacing: var(--display-tracking, -0.035em);
    color: var(--v2-bone-hi);
    margin: 0;
    max-width: 16ch;
  }
  .v2-final-title em {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    color: var(--accent);
    letter-spacing: -0.02em;
  }
  .v2-final-sub {
    font-family: var(--font-body);
    font-size: 26px;
    line-height: 1.55;
    color: rgba(245,241,234,0.7);
    font-weight: 300;
    max-width: 56ch;
    margin: 0;
    letter-spacing: -0.005em;
  }
  .v2-final-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 16px;
  }
  .v2-final-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 28px;
    border-radius: 999px;
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.005em;
    transition: all 0.3s ease;
  }
  .v2-final-cta svg { width: 18px; height: 18px; transition: transform 0.4s cubic-bezier(0.2,0.7,0.2,1); }
  .v2-final-cta { position: relative; }
  .v2-final-cta.primary {
    background: var(--accent-grad);
    color: #fff;
    border: 1px solid rgba(90, 124, 208, 0.55);
    box-shadow: 0 12px 32px rgba(60, 95, 180,0.45), inset 0 1px 0 rgba(255,255,255,0.22);
  }
  .v2-final-cta.primary:hover {
    background: var(--accent-grad-hover);
    box-shadow: 0 16px 40px rgba(60, 95, 180,0.55), inset 0 1px 0 rgba(255,255,255,0.28);
    transform: translateY(-2px);
  }

  /* Subtle radiating pulse on the primary booking CTAs */
  .hero-cta.primary::after,
  .v2-final-cta.primary::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    border: 1px solid rgba(90, 124, 208, 0.6);
    pointer-events: none;
    animation: ctaPulse 2.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  @keyframes ctaPulse {
    0%   { opacity: 0.55; transform: scale(1); }
    70%  { opacity: 0;    transform: scale(1.07); }
    100% { opacity: 0;    transform: scale(1.07); }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-cta.primary::after,
    .v2-final-cta.primary::after { animation: none; opacity: 0; }
  }
  .v2-final-cta.primary:hover svg { transform: translateX(4px); }
  .v2-final-cta.ghost {
    color: var(--v2-bone-hi);
    border: 1px solid var(--v2-glass-border-strong);
    background: rgba(245,241,234,0.03);
  }
  .v2-final-cta.ghost:hover { background: rgba(245,241,234,0.08); border-color: rgba(245,241,234,0.4); }

  /* ============================================================
     FOOTER — minimal
     ============================================================ */
  /* ============================================================
     FOOTER — multi-column, professional
     ============================================================ */
  .v2-footer {
    position: relative;
    z-index: 6;
    padding: 0 48px 28px;
    color: rgba(245, 241, 234, 0.7);
    display: block;
    grid-template-columns: none;
    border-top: 0;
  }
  .v2-footer-inner {
    max-width: 1280px;
    margin: 0 auto;
  }

  /* "Ask an AI" pill row */
  .v2-footer-ai {
    padding: 28px 0 24px;
  }
  .v2-footer-ai-eyebrow {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(245, 241, 234, 0.4);
    margin-bottom: 12px;
  }
  .v2-footer-ai-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .v2-footer-ai-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid var(--v2-glass-border);
    background: rgba(245, 241, 234, 0.03);
    color: var(--v2-bone-hi);
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.005em;
    transition: border-color 0.3s ease, background 0.3s ease, transform 0.2s ease;
  }
  .v2-footer-ai-pill:hover {
    border-color: rgba(245, 241, 234, 0.22);
    background: rgba(245, 241, 234, 0.06);
    transform: translateY(-1px);
  }
  .v2-footer-ai-pill svg { width: 14px; height: 14px; flex-shrink: 0; }

  /* Hairline divider */
  .v2-footer-rule {
    height: 1px;
    background: rgba(245, 241, 234, 0.08);
    margin: 0;
    border: 0;
  }

  /* Brand + social row */
  .v2-footer-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 32px;
    padding: 36px 0 28px;
  }
  .v2-footer-brand-block { max-width: 360px; }
  .v2-footer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--v2-bone-hi);
    margin-bottom: 12px;
  }
  .v2-footer-mark {
    width: 22px; height: 22px;
    color: var(--accent);
  }
  .v2-footer-mark svg { width: 100%; height: 100%; }
  .v2-footer-word {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 17px;
    letter-spacing: -0.01em;
  }
  .v2-footer-tagline {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.5;
    color: rgba(245, 241, 234, 0.55);
    margin: 0;
  }
  .v2-footer-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
  }
  .v2-footer-social {
    display: flex;
    gap: 10px;
  }
  .v2-footer-social a {
    width: 32px; height: 32px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: rgba(245, 241, 234, 0.55);
    transition: color 0.3s ease, background 0.3s ease;
  }
  .v2-footer-social a:hover {
    color: var(--v2-bone-hi);
    background: rgba(245, 241, 234, 0.06);
  }
  .v2-footer-social svg { width: 16px; height: 16px; }
  .v2-footer-contact {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    font-family: var(--font-body);
    font-size: 13px;
    color: rgba(245, 241, 234, 0.55);
  }
  .v2-footer-contact a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
  }
  .v2-footer-contact a:hover { color: var(--accent); }

  /* Link columns */
  .v2-footer-cols {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
    padding: 8px 0 40px;
  }
  .v2-footer-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .v2-footer-col-head {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(245, 241, 234, 0.45);
    margin-bottom: 4px;
  }
  .v2-footer-col a {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--v2-bone-hi);
    text-decoration: none;
    transition: color 0.3s ease;
    width: fit-content;
  }
  .v2-footer-col a:hover { color: var(--accent); }
  .v2-footer-col a.is-muted { color: rgba(245, 241, 234, 0.4); cursor: not-allowed; }

  /* Bottom bar */
  .v2-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 18px;
    padding: 24px 0 0;
    font-family: var(--font-body);
    font-size: 12px;
    color: rgba(245, 241, 234, 0.4);
  }
  .v2-footer-bottom .right {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
  }
  .v2-footer-bottom a {
    color: rgba(245, 241, 234, 0.55);
    text-decoration: none;
    transition: color 0.3s ease;
  }
  .v2-footer-bottom a:hover { color: var(--v2-bone-hi); }

  @media (max-width: 900px) {
    .v2-footer { padding: 0 28px 24px; }
    .v2-footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
    .v2-footer-top { grid-template-columns: 1fr; gap: 24px; }
    .v2-footer-side { align-items: flex-start; }
    .v2-footer-contact { align-items: flex-start; }
    .v2-footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
    .v2-footer-bottom .right { gap: 18px; }
  }
  @media (max-width: 480px) {
    .v2-footer { padding: 0 18px 20px; }
    .v2-footer-cols { grid-template-columns: 1fr; gap: 24px; }
  }

  /* ============================================================
     RESPONSIVE
     ============================================================ */
  @media (max-width: 1100px) {
    .v2-section { padding: 140px 32px; }
    .v2-pillar { grid-template-columns: minmax(0, 1fr); gap: 56px; padding: 64px 0; }
    .v2-how .v2-pillar + .v2-pillar { margin-top: 80px; }
    .v2-pillar > * { min-width: 0; }
    .v2-pillar-reverse .v2-pillar-text { order: 1; }
    .v2-pillar-reverse .v2-pillar-visual { order: 2; }
    .v2-cases { grid-template-columns: 1fr; }
    .v2-case-feature { transform: none; }
    .v2-case-feature:hover { transform: translateY(-6px); }
    .v2-prices { grid-template-columns: 1fr; gap: 16px; }
    .v2-price-feature { transform: none; }
    .v2-price-feature:hover { transform: translateY(-4px); }
  }
  @media (max-width: 720px) {
    .v2-section { padding: 96px 20px; }
    .v2-section-intro { margin-bottom: 64px; }
    .v2-pillar-visual { min-height: 440px; }
    .v2-mr { grid-template-columns: 50px 1fr 80px 80px; gap: 8px; font-size: 15px; }
    .v2-mr .pill { font-size: 15px; padding: 3px 6px; }
    .v2-mock-stats { grid-template-columns: 1fr 1fr; gap: 12px; }
    .v2-mock-stats .v2-stat:last-child { display: none; }
    .v2-stat-num { font-size: 26px; }
    .v2-mock-integ { padding: 20px !important; gap: 8px; }
    .v2-integ-hub { width: 70px; height: 70px; }
    .v2-integ-hub-inner { width: 56px; height: 56px; border-radius: 14px; }
    .v2-integ-hub-inner span { font-size: 30px; }
    .v2-integ-tile { padding: 8px 10px; font-size: 15px; gap: 8px; }
    .v2-itm { width: 22px; height: 22px; font-size: 15px; }
    .v2-itm svg { width: 12px; height: 12px; }
    .v2-integ-label { font-size: 15px; }
    .v2-final-card { padding: 64px 28px; }
    .v2-final-actions { flex-direction: column; width: 100%; }
    .v2-final-cta { width: 100%; justify-content: center; }
    .v2-faq-item summary { padding: 20px 24px; font-size: 26px; gap: 16px; }
    .v2-faq-body { padding: 0 24px 20px; font-size: 15px; }
  }

  /* Serif-accent toggle — when off, em accents use the display sans italic */
  html[data-serif-accents="0"] .v2-h2 em,
  html[data-serif-accents="0"] .v2-h3 em,
  html[data-serif-accents="0"] .v2-final-title em,
  html[data-serif-accents="0"] .hero-h1 em {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    letter-spacing: var(--display-tracking, -0.02em);
  }

  /* ============================================================
     MOBILE / TABLET REFINEMENTS
     Final overrides to keep every section legible on phones and
     small tablets. Placed last so source order wins over earlier
     media queries.
     ============================================================ */
  html { overflow-x: clip; }

  /* Performance — only the footer gets content-visibility because it's
     terminal and never animated in. We tried it on .v2-section earlier
     but it interferes with the data-reveal IntersectionObserver pattern
     (sections that scroll in retain opacity:0). */
  .v2-footer { content-visibility: auto; contain-intrinsic-size: 1px 600px; }

  /* Lighter backdrop-filter — every glass card with backdrop-filter
     repaints when the canvas behind changes (every frame). 14px blur
     is ~half the GPU cost of 24px and visually similar against the
     dark scene. */
  .v2-glass,
  .v2-overview-card,
  .v2-footer-ai-pill,
  .sticky-cta,
  .trust-chip { backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); }

  @media (max-width: 900px) {
    nav.top-nav { gap: 4px; padding: 4px; top: 16px; }
    nav.top-nav .nav-pill:not(.cta) { display: none; }
    nav.top-nav .nav-pill.cta { padding: 9px 16px; font-size: 13px; }
    .nav-mark { width: 32px; height: 32px; }
    .nav-mark svg { width: 16px; height: 16px; }
  }

  @media (max-width: 720px) {
    .hero-bottom { display: none; }
    .hero { height: auto; min-height: 100vh; padding: 120px 0 80px; }

    .hero-h1 { font-size: clamp(44px, 13vw, 72px); }
    .hero-sub { font-size: 18px; line-height: 1.5; margin-top: 24px; }
    .hero-eyebrow { font-size: 12px; padding: 7px 14px; margin-bottom: 28px; }

    .hero-cta-row { flex-direction: column; width: 100%; max-width: 320px; margin-left: auto; margin-right: auto; gap: 12px; }
    .hero-cta-row .hero-cta { width: 100%; justify-content: center; padding: 15px 24px; }

    .v2-h2 { font-size: clamp(36px, 9vw, 52px); }
    .v2-h3 { font-size: clamp(28px, 7.5vw, 38px); max-width: none; }
    .v2-body { font-size: 17px; line-height: 1.55; margin-bottom: 24px; }
    .v2-lede { font-size: 18px; line-height: 1.55; }
    .v2-eyebrow { font-size: 13px; margin-bottom: 20px; }
    .v2-tag { font-size: 13px; margin-bottom: 20px; }
    .v2-list li { font-size: 15px; gap: 12px; }

    .v2-case-title { font-size: clamp(26px, 7vw, 36px); }
    .v2-pa-num { font-size: 56px; }

    .v2-faq-item summary { font-size: 18px; padding: 18px 20px; gap: 14px; }
    .v2-faq-body { font-size: 16px; padding: 0 20px 18px; }

    .trust-chip { width: 320px; padding: 22px 22px 18px; gap: 16px; }
    .trust-chip .quote { font-size: 17px; line-height: 1.4; }
    .trust-chip-foot { padding-top: 14px; gap: 10px; }
    .trust-avatar { width: 38px; height: 38px; font-size: 15px; }
    .trust-name { font-size: 13px; }
    .trust-role { font-size: 12px; }
    .trust-logo { font-size: 11px; padding: 4px 8px; }

    .v2-final-title { font-size: clamp(36px, 9vw, 52px); }

    .v2-pillar-visual { aspect-ratio: auto; min-height: 460px; width: 100%; max-width: 100%; }
    .v2-pillar-visual > .v2-glass { overflow: hidden; }
    .v2-mock-ledger,
    .v2-mock-slack { padding: 18px 18px !important; }

    .v2-mr { grid-template-columns: 46px minmax(0, 1fr) 78px; gap: 8px; font-size: 13px; }
    .v2-mr > :nth-child(4) { display: none; }
    .v2-mr-h { font-size: 11px; }
    .v2-mr .num { font-size: 13px; }
    .v2-stat-num { font-size: 22px; }
    .v2-stat-lbl { font-size: 11px; }

    .v2-mock-integ { padding: 18px !important; gap: 10px; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); }
    .v2-mock-integ .v2-integ-col { min-width: 0; gap: 8px; }
    .v2-integ-tile { padding: 6px 8px; font-size: 12px; gap: 6px; min-width: 0; overflow: hidden; }
    .v2-integ-tile span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
    .v2-itm { width: 20px; height: 20px; font-size: 12px; }
    .v2-itm svg { width: 11px; height: 11px; }
    .v2-integ-label { font-size: 10px; margin-bottom: 4px; letter-spacing: 0.06em; }
    .v2-integ-hub { width: 56px; height: 56px; }
    .v2-integ-hub-inner { width: 44px; height: 44px; border-radius: 12px; }
    .v2-integ-hub-inner span { font-size: 22px; }
  }

  @media (max-width: 420px) {
    .v2-section { padding: 80px 16px; }
    .v2-section + .v2-section { padding-top: 56px; }
    .v2-section-intro { margin-bottom: 48px; }
    .hero-cta { padding: 14px 22px; font-size: 14px; }
    .v2-pillar-visual { min-height: 360px; }
    .v2-pillar { gap: 40px; padding: 40px 0; }
    .v2-how .v2-pillar + .v2-pillar { margin-top: 56px; }
    .v2-final-card { padding: 56px 22px; }
  }

  /* ============================================================
     MULTI-PAGE LAYOUT — additions for /solutions /pricing /customers /about
     ============================================================ */

  /* Make nav fixed across all pages so it persists during scroll */
  nav.top-nav {
    position: fixed;
    transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.3s ease;
  }
  nav.top-nav.is-hidden {
    transform: translateX(-50%) translateY(-180%);
    opacity: 0;
    pointer-events: none;
  }

  /* Interior-page hero: same intro feel but compact, leaves room for fixed nav */
  .v2-page-hero { padding: 140px 48px 40px; }
  .v2-page-hero .v2-section-intro { margin-bottom: 0; }
  @media (max-width: 720px) {
    .v2-page-hero { padding: 110px 20px 24px; }
  }

  /* Homepage overview grid — 4 cards linking to interior pages */
  .v2-overview {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    max-width: 1200px;
    margin: 0 auto;
  }
  .v2-overview-card {
    display: block;
    padding: 40px 32px;
    text-decoration: none;
    color: inherit;
    background: var(--v2-glass-bg);
    border: 1px solid var(--v2-glass-border);
    border-radius: 20px;
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    transition: transform 0.45s cubic-bezier(0.2,0.7,0.2,1), border-color 0.4s ease, background 0.4s ease;
  }
  .v2-overview-card:hover {
    transform: translateY(-4px);
    border-color: rgba(245, 241, 234, 0.22);
    background: rgba(8, 10, 16, 0.86);
  }
  .v2-overview-card .ov-label {
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(130, 170, 230, 1);
    margin-bottom: 18px;
  }
  .v2-overview-card .ov-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 28px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--v2-bone-hi);
    margin: 0 0 12px;
  }
  .v2-overview-card .ov-desc {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.5;
    color: rgba(245,241,234,0.65);
    margin: 0 0 22px;
  }
  .v2-overview-card .ov-arrow {
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 0.06em;
    color: var(--accent);
  }
  @media (max-width: 1100px) {
    .v2-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 560px) {
    .v2-overview { grid-template-columns: 1fr; }
    .v2-overview-card { padding: 32px 24px; }
    .v2-overview-card .ov-title { font-size: 24px; }
  }

  /* Placeholder note styling — for sections marked TODO */
  .v2-placeholder {
    margin: 32px auto 0;
    max-width: 760px;
    padding: 24px 28px;
    border: 1px dashed rgba(245, 241, 234, 0.25);
    border-radius: 12px;
    color: rgba(245, 241, 234, 0.55);
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 0.04em;
    line-height: 1.7;
    text-align: left;
  }
  .v2-placeholder strong { color: var(--accent); }

  /* Pricing calculator */
  .calc-card {
    max-width: 1100px;
    margin: 0 auto;
    background: var(--v2-glass-bg);
    border: 1px solid var(--v2-glass-border);
    border-radius: 24px;
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    padding: 56px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: stretch;
  }
  .calc-input { display: flex; flex-direction: column; gap: 28px; }
  .calc-row { display: flex; flex-direction: column; gap: 10px; }
  .calc-label {
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(245, 241, 234, 0.55);
  }
  .calc-value {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 28px;
    color: var(--v2-bone-hi);
    letter-spacing: -0.02em;
  }
  .calc-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    background: rgba(245, 241, 234, 0.12);
    border-radius: 2px;
    outline: none;
  }
  .calc-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--bone);
    border: 2px solid var(--accent);
    cursor: pointer;
    transition: transform 0.2s;
  }
  .calc-slider::-webkit-slider-thumb:hover { transform: scale(1.1); }
  .calc-slider::-moz-range-thumb {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--bone);
    border: 2px solid var(--accent);
    cursor: pointer;
  }
  .calc-toggles { display: flex; flex-direction: column; gap: 12px; }
  .calc-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    border: 1px solid var(--v2-glass-border);
    border-radius: 12px;
    background: rgba(10, 10, 14, 0.45);
    cursor: pointer;
    transition: border-color 0.3s ease, background 0.3s ease;
  }
  .calc-toggle:hover { border-color: rgba(245, 241, 234, 0.22); }
  .calc-toggle.is-on { border-color: rgba(60, 95, 180, 0.5); background: rgba(60, 95, 180, 0.08); }
  .calc-toggle-text { display: flex; flex-direction: column; gap: 4px; }
  .calc-toggle-title {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 500;
    color: var(--v2-bone-hi);
  }
  .calc-toggle-desc {
    font-family: var(--font-body);
    font-size: 13px;
    color: rgba(245, 241, 234, 0.5);
  }
  .calc-toggle-switch {
    width: 40px; height: 22px;
    background: rgba(245, 241, 234, 0.12);
    border-radius: 999px;
    position: relative;
    flex-shrink: 0;
    transition: background 0.3s ease;
  }
  .calc-toggle-switch::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 18px; height: 18px;
    background: var(--bone);
    border-radius: 50%;
    transition: transform 0.3s ease;
  }
  .calc-toggle.is-on .calc-toggle-switch { background: var(--accent); }
  .calc-toggle.is-on .calc-toggle-switch::after { transform: translateX(18px); }

  .calc-output {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    padding: 32px;
    border: 1px solid var(--v2-glass-border);
    border-radius: 20px;
    background: rgba(8, 12, 22, 0.55);
  }
  .calc-out-label {
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(130, 170, 230, 1);
  }
  .calc-out-tier {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 36px;
    color: var(--v2-bone-hi);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-top: 10px;
  }
  .calc-out-price {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 56px;
    color: var(--v2-bone-hi);
    letter-spacing: -0.02em;
    line-height: 1;
    margin-top: 18px;
  }
  .calc-out-price .unit {
    font-family: var(--font-mono);
    font-size: 15px;
    color: rgba(245, 241, 234, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-left: 6px;
  }
  .calc-out-includes {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.55;
    color: rgba(245, 241, 234, 0.7);
  }
  .calc-out-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 24px;
    border-radius: 999px;
    background: var(--bone);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.3s ease, transform 0.3s ease;
  }
  .calc-out-cta:hover {
    background: var(--accent-grad);
    color: var(--bone);
    transform: translateY(-1px);
  }

  @media (max-width: 1100px) {
    .calc-card { grid-template-columns: 1fr; gap: 40px; padding: 40px; }
  }
  @media (max-width: 720px) {
    .calc-card { padding: 28px; gap: 32px; border-radius: 20px; }
    .calc-out-price { font-size: 44px; }
    .calc-out-tier { font-size: 28px; }
  }