/* ---- brand tokens (Cyphaira Brand Book V1.0) ---------------------------- */
  /* Design read: trust-first B2B OTC landing; preserve split + palette;
     dials VARIANCE 5 / MOTION 4 / DENSITY 4 (redesign-preserve +1 motion). */
  :root {
    --sc-canvas:      #0A0F1C;   /* Midnight   */
    --sc-surface:     #0E1B2D;   /* Deep Ocean */
    --sc-ink:         #F2F6FA;   /* Light      */
    --sc-ink-soft:    #9AAABB;   /* Slate, lifted one step for dark-ground body contrast */
    --sc-accent:      #00C2FF;   /* Cyan       */
    --sc-accent-ink:  #06131F;
    --sc-font-display: "Poppins", system-ui, sans-serif;
    --sc-font-text:    "Poppins", system-ui, sans-serif;
    --sc-font-mono:    "Poppins", system-ui, sans-serif;
    --sc-shadow-color: 222 45% 3%;
    --sc-measure: 58ch;
    --sc-ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
    --sc-section: clamp(5rem, 10vw, 12rem);

    /* page-specific */
    --cy-info:  #0A0F1C;   /* information ground (Midnight)   */
    --cy-intel: #0E1B2D;   /* intelligence ground (Deep Ocean) */
    --cy-blue:  #2563FF;   /* Electric Blue: the CTA fill, per brand book */
    --cy-blue-hot: #1D4ED8; /* darker press/hover for WCAG AA on white label */
    --cy-div:   0.5;       /* the balance. Driven per act by the divider script. */
    --cy-gap:   clamp(1.5rem, 4vw, 4rem);
  }
  /* light-on-dark compensation: a touch more leading and tracking on body */
  body { line-height: 1.7; letter-spacing: 0.002em; font-weight: 400; }
  .sc-display { font-weight: 500; letter-spacing: -0.032em; text-wrap: balance; }
  .sc-display--lg { letter-spacing: -0.034em; }
  .sc-display--md { font-weight: 500; letter-spacing: -0.026em; }
  strong { font-weight: 600; color: var(--sc-ink); }
  a { color: inherit; }

  /* ---- the split -------------------------------------------------------- */
  .split {
    display: grid;
    grid-template-columns: calc(var(--cy-div) * 100%) 1fr;
    min-height: 100dvh;
  }
  .split:not(.sc-stage) { position: relative; }
  .split > .side { position: relative; min-width: 0; }
  .side--info  { background: var(--cy-info); }
  .side--intel { background: var(--cy-intel); color: var(--sc-ink); }
  .side__in {
    padding-block: var(--sc-section);
    padding-inline: var(--sc-gutter);
    height: 100%;
    display: flex; flex-direction: column; justify-content: center;
  }
  .side--info .side__in  { align-items: flex-end; text-align: right; padding-right: var(--cy-gap); }
  .side--intel .side__in { align-items: flex-start; text-align: left; padding-left: var(--cy-gap); }
  .side--info .sc-body, .side--info .sc-lede { text-wrap: pretty; }
  .side--info .sc-body { margin-left: auto; }

  /* the information ground carries a faint tabular grid; the intelligence
     ground carries a faint radial field. Depth from the ground, not from boxes. */
  .side--info::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image:
      linear-gradient(color-mix(in oklab, var(--sc-ink) 5%, transparent) 1px, transparent 1px),
      linear-gradient(90deg, color-mix(in oklab, var(--sc-ink) 5%, transparent) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(to right, transparent, black 30%);
    opacity: 0.9;
  }
  .side--intel::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
      radial-gradient(65% 55% at 22% 42%, color-mix(in oklab, var(--sc-accent) 11%, transparent), transparent 68%),
      radial-gradient(40% 35% at 78% 72%, color-mix(in oklab, var(--cy-blue) 8%, transparent), transparent 70%);
  }

  /* ---- the divider: the chrome ------------------------------------------- */
  .divider {
    position: fixed; top: 0; bottom: 0;
    left: calc(var(--cy-div) * 100vw);
    width: 0; z-index: var(--sc-z-chrome);
    pointer-events: none;
  }
  .divider__line {
    position: absolute; top: 0; bottom: 0; left: -0.5px; width: 1px;
    background: linear-gradient(to bottom,
      color-mix(in oklab, var(--sc-accent) 70%, transparent),
      color-mix(in oklab, var(--sc-accent) 40%, transparent) 40%,
      color-mix(in oklab, var(--sc-accent) 40%, transparent) 60%,
      color-mix(in oklab, var(--sc-accent) 70%, transparent));
  }
  .divider__label {
    position: absolute; top: 1.4rem;
    font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--sc-ink-soft); white-space: nowrap;
    transition: opacity 280ms var(--sc-ease-spring);
  }
  .divider__label--info  { right: 1rem; }
  .divider__label--intel { left: 1rem; color: var(--sc-accent); }
  .divider__label--info.is-gone { opacity: 0; }
  /* the argument's progress: a marker that travels down the line with the page */
  .divider__mark {
    position: absolute; left: -3px; width: 7px; height: 7px; border-radius: 50%;
    background: var(--sc-accent);
    top: calc(1.4rem + 1.5rem + var(--cy-page, 0) * (100vh - 6rem));
    box-shadow:
      0 0 0 3px color-mix(in oklab, var(--sc-accent) 22%, transparent),
      0 1px 2px hsl(var(--sc-shadow-color) / .5);
  }
  .divider__bar { display: none; }

  /* ---- hero ---------------------------------------------------------------- */
  /* More air from the split so large display type (esp. the y in They) does not
     collide with the Intelligence divider chrome. */
  .hero { --cy-gap: clamp(2.25rem, 5.5vw, 5.75rem); }
  .hero .side__in {
    justify-content: flex-start;
    gap: clamp(1.5rem, 3vh, 2.75rem);
    padding-top: calc(var(--sc-section) * 0.85);
    padding-bottom: calc(var(--sc-section) * 0.9);
  }
  .hero .side--info .side__in { justify-content: space-between; gap: 0; }
  .hero__stack { display: flex; flex-direction: column; gap: var(--sc-5); width: 100%; }
  .brand { display: flex; align-items: center; gap: 1rem; }
  .brand img {
    height: 56px; width: auto;
  }
  .brand img + img { height: 24px; }
  .hero .side--info .brand {
    align-self: flex-start;
    margin-left: 0;
    margin-right: auto;
  }
  /* Clear the fixed bar+nav; sit on the left so the big mark does not crowd the divider labels */
  .hero .side--info .side__in {
    padding-top: calc(4.35rem + var(--bar-h, 0px) + 1.1rem);
  }
  /* Intel column: clear bar+nav+divider labels so "They need" never kisses INTELLIGENCE */
  .hero .side--intel .side__in {
    padding-top: calc(var(--bar-h, 0px) + 7.25rem);
  }
  .hero__h {
    margin-top: 0;
    max-width: 11ch;
    line-height: 1.08;
    letter-spacing: -0.03em;
  }
  .hero .side--info .hero__h {
    margin-top: var(--sc-7);
    padding-right: 0.06em; /* optical: keep right-aligned display clear of the line */
  }
  .hero__h--intel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    row-gap: 0.5em; /* deliberate air: y must never crowd intelligence */
    color: var(--sc-accent);
    max-width: 12ch;
    letter-spacing: -0.026em;
    line-height: 1.05;
    padding-left: 0.12em; /* optical: clear the divider */
  }
  .hero__h--intel .hero__line {
    display: block;
    max-width: 100%;
    line-height: 1.05;
  }
  .hero__h--intel .hero__line:first-child {
    padding-bottom: 0.18em; /* park the y descender well above the next line */
  }
  .hero__p { margin-top: 0; max-width: 34ch; }
  .hero__foot { margin-top: auto; padding-top: var(--sc-6); }
  .hero .side--intel .hero__foot { margin-top: var(--sc-6); padding-top: 0; }
  .hero__foot--info { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); max-width: 30ch; margin-top: var(--sc-8); padding-top: 0; }
  /* One Talk CTA in the first mobile viewport; desktop keeps it on the intel rail */
  .hero__cta-mobile { display: none; }
  .hero__cta-desktop { display: block; }
  .cta:focus-visible {
    outline: 2px solid var(--sc-accent);
    outline-offset: 3px;
  }

  /* Divider labels sit below the fixed chrome; pages.css adds the home offset */
  .divider__label { top: 1.15rem; letter-spacing: 0.2em; }
  .divider__label--info  { right: 1.15rem; }
  .divider__label--intel { left: 1.15rem; }

  /* ---- who: stop vertically centering a short block into a tall empty panel ---- */
  .who .side__in {
    justify-content: flex-start;
    padding-top: calc(var(--bar-h, 0px) + 6.5rem);
    padding-bottom: var(--sc-section);
    gap: var(--sc-5);
  }

  /* Nested CTA: Electric Blue fill + trailing icon island (taste / high-end) */
  .cta {
    display: inline-flex; align-items: center; gap: 0.75rem;
    background: var(--cy-blue); color: #fff;
    font-weight: 500; font-size: var(--sc-t-sm);
    padding: 0.55rem 0.55rem 0.55rem 1.35rem;
    min-height: 44px; /* feel-better: touch hit area */
    border-radius: 999px;
    text-decoration: none; white-space: nowrap;
    box-shadow:
      0 1px 0 color-mix(in oklab, #fff 14%, transparent) inset,
      0 2px 4px hsl(222 55% 18% / 0.28),
      0 10px 28px -6px hsl(222 70% 28% / 0.45);
    transition:
      transform 280ms var(--sc-ease-spring),
      box-shadow 280ms var(--sc-ease-spring),
      background-color 280ms var(--sc-ease-spring);
  }
  .cta::after {
    content: "→";
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.05rem;
    height: 2.05rem;
    border-radius: 50%;
    background: color-mix(in oklab, #06131F 22%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in oklab, #fff 12%, transparent);
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
    /* feel-better: interruptible icon motion (opacity/scale/blur) */
    transition:
      transform 280ms cubic-bezier(0.2, 0, 0, 1),
      background-color 280ms var(--sc-ease-spring),
      filter 280ms cubic-bezier(0.2, 0, 0, 1),
      opacity 280ms cubic-bezier(0.2, 0, 0, 1);
  }
  @media (hover: hover) and (pointer: fine) {
    .cta:hover {
      background: var(--cy-blue-hot);
      box-shadow:
        0 1px 0 color-mix(in oklab, #fff 18%, transparent) inset,
        0 4px 8px hsl(222 55% 18% / 0.30),
        0 18px 40px -8px hsl(222 70% 32% / 0.50);
      transform: translateY(-1px);
    }
    .cta:hover::after {
      transform: translateX(2px) scale(1);
      filter: blur(0);
      opacity: 1;
      background: color-mix(in oklab, #06131F 28%, transparent);
    }
  }
  .cta:active { transform: scale(0.96); } /* feel-better: scale on press */
  .cta:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
  .link {
    text-underline-offset: 0.28em;
    text-decoration-thickness: 1px;
    text-decoration-color: color-mix(in oklab, var(--sc-accent) 55%, transparent);
    transition: color 220ms var(--sc-ease-spring), text-decoration-color 220ms var(--sc-ease-spring);
  }
  @media (hover: hover) { .link:hover { text-decoration-color: var(--sc-accent); color: var(--sc-ink); } }

  /* ---- act 2: pressure ---------------------------------------------------- */
  .pressure .side__in { justify-content: center; }
  .pile { display: grid; gap: 0.55rem; width: 100%; max-width: 30rem; }
  .pile li {
    list-style: none; display: flex; justify-content: flex-end; gap: 1rem; align-items: baseline;
    font-size: var(--sc-t-sm); color: var(--sc-ink-soft);
    padding: 0.55rem 0; border-bottom: 1px solid var(--sc-hairline);
    /* each item arrives on its own slice of the act's progress */
    --a: calc((var(--sc-p) - var(--i) * 0.055) * 9);
    opacity: clamp(0, var(--a), 1);
    transform: translate3d(0, calc((1 - clamp(0, var(--a), 1)) * 10px), 0);
  }
  .pile li b { font-weight: 500; color: var(--sc-ink); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; }
  .pressure .side--intel .side__in { gap: 0; }
  .pressure .sc-lede { position: absolute; left: var(--cy-gap); right: var(--sc-gutter); top: 50%; translate: 0 -50%; max-width: 30ch; }

  /* ---- act 3: the four levels ---------------------------------------------- */
  .levels { min-height: auto; }
  .levels .side__in { justify-content: flex-start; padding-block: var(--sc-section); }
  .levels__head { max-width: 22ch; }
  .label { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sc-accent); font-weight: 500; }
  .row { padding: var(--sc-6) 0; border-top: 1px solid var(--sc-hairline); max-width: 34rem; width: 100%; }
  .row:last-child { border-bottom: 1px solid var(--sc-hairline); }
  .row .label { color: var(--sc-ink-soft); display: block; margin-bottom: var(--sc-3); }
  .row p { margin: 0; font-size: var(--sc-t-lg); line-height: 1.38; letter-spacing: -0.012em; text-wrap: pretty; }
  .side--info .row p { color: var(--sc-ink-soft); }
  .side--intel .row .label { color: var(--sc-accent); }
  .levels .side--info .side__in { padding-top: calc(var(--sc-section) + 12.5rem); }
  .levels__after { margin-top: var(--sc-8); max-width: 44ch; }
  .levels__note { margin-top: var(--sc-8); }

  /* ---- act 4: not a dashboard ---------------------------------------------- */
  .compare { min-height: auto; }
  .compare .side__in { justify-content: flex-start; padding-bottom: calc(var(--sc-section) * 1.6); } /* authored silence before the peak */
  .pair { padding: var(--sc-6) 0; border-top: 1px solid var(--sc-hairline); width: 100%; max-width: 34rem; }
  .pair:last-of-type { border-bottom: 1px solid var(--sc-hairline); }
  .pair p { margin: 0; text-wrap: pretty; }
  .side--info .pair p { color: var(--sc-ink-soft); }
  .side--intel .pair p { color: var(--sc-ink); }
  .compare .side--info .side__in { padding-top: calc(var(--sc-section) + 11.5rem); }
  .trust { margin-top: var(--sc-8); width: 100%; max-width: 34rem; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-5) var(--sc-6); }
  .trust div {
    font-size: var(--sc-t-sm); color: var(--sc-ink-soft);
    padding: 0.85rem 0.95rem;
    border-radius: 12px;
    background: color-mix(in oklab, var(--sc-canvas) 35%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in oklab, var(--sc-ink) 8%, transparent);
  }
  .trust b { display: block; font-weight: 500; color: var(--sc-ink); margin-bottom: 0.25rem; letter-spacing: -0.01em; }
  .you { margin-top: var(--sc-8); max-width: 36ch; }

  /* ---- act 5: the assembly and the collapse -------------------------------- */
  .peak { --cy-collapse: 0; }
  .peak .split { height: 100dvh; min-height: 0; }
  .assembly { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
  .assembly text { font-family: var(--sc-font-text); font-size: 12px; font-weight: 500; fill: var(--sc-ink-soft); letter-spacing: 0.08em; text-transform: uppercase; }
  .assembly .edge, .assembly .arc { fill: none; stroke: url(#cy-grad); stroke-linecap: round; }
  .assembly .arc { stroke-width: 2.2; }
  .assembly .edge { stroke-width: 1.6; }
  .assembly .node { fill: url(#cy-grad); }
  .assembly__raster { position: absolute; z-index: 3; opacity: 0; pointer-events: none; width: 100px; height: auto; }
  .peak .copy { position: absolute; z-index: 4; }
  .peak .copy--intel { left: calc(var(--cy-div) * 100vw + var(--cy-gap)); top: clamp(4.5rem, 12vh, 8.5rem); max-width: 30rem; }
  .peak .copy--intel h2 { max-width: 18ch; }
  .peak .copy--close {
    left: var(--sc-gutter); bottom: clamp(2.5rem, 10vh, 7rem);
    max-width: min(34rem, 44vw);
  }
  .peak .copy--close .sc-body { margin-top: var(--sc-5); }
  .peak .copy--close .cta { margin-top: var(--sc-6); }
  .foot {
    position: absolute; z-index: 4; left: var(--sc-gutter); right: var(--sc-gutter); bottom: 1.4rem;
    display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    font-size: 0.78rem; color: var(--sc-ink-soft);
  }
  .foot nav { display: flex; gap: 1.4rem; }
  /* the information ground fades as the divider leaves; the intelligence ground fills */
  .peak .side--info::before { display: none; }

  /* ---- mobile: the balance becomes vertical -------------------------------- */
  @media (max-width: 860px) {
    :root { --cy-gap: 1.25rem; }
    .split { grid-template-columns: 1fr; grid-template-rows: auto auto; min-height: auto; }
    .side--info .side__in, .side--intel .side__in { align-items: flex-start; text-align: left; padding-inline: var(--sc-gutter); }
    .side--info .sc-body { margin-left: 0; }
    .hero .side--info .brand { margin-left: 0; }
    .hero .side,
    .hero .side__in {
      height: auto;
      min-height: 0;
    }
    .hero__h { margin-top: var(--sc-4); max-width: 14ch; }
    .hero .side--info .hero__h { margin-top: var(--sc-4); }
    .hero__h--intel { max-width: 14ch; padding-left: 0; row-gap: 0.35em; }
    .hero .side__in {
      padding-top: 1.25rem;
      padding-bottom: 1.5rem;
      gap: var(--sc-4);
      justify-content: flex-start;
    }
    .hero .side--info .side__in,
    .hero .side--intel .side__in {
      justify-content: flex-start;
      gap: var(--sc-4);
      padding-top: 1.25rem;
      padding-bottom: 1.5rem;
    }
    .hero__foot { margin-top: var(--sc-4); padding-top: 0; }
    .hero__foot--info { margin-top: var(--sc-3); }
    .hero__cta-mobile {
      display: block;
      margin-top: 0; /* flex gap already separates from the tagline */
      padding-top: 0;
    }
    .hero__cta-desktop { display: none; }
    .pressure .split, .peak .split { grid-template-rows: calc(var(--cy-div) * 100%) 1fr; }
    .pressure .side__in { padding-block: var(--sc-6); }
    .pile li { justify-content: flex-start; }
    .pressure .sc-lede { position: static; translate: none; }
    .levels .side--info .side__in, .compare .side--info .side__in { padding-top: var(--sc-section); }
    .levels .side--intel .side__in, .compare .side--intel .side__in { padding-top: var(--sc-7); }
    .row p { font-size: var(--sc-t-base); }
    .trust { grid-template-columns: 1fr; }
    .divider { left: 0; right: 0; top: 0; bottom: auto; height: 2.4rem; width: auto;
      background: color-mix(in oklab, var(--sc-canvas) 82%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
    .divider__line, .divider__mark { display: none; }
    .divider__label { top: 0.85rem; }
    .divider__label--info { left: var(--sc-gutter); right: auto; }
    .divider__label--intel { right: var(--sc-gutter); left: auto; }
    /* Hide the mobile progress stub — reads as a stray cyan remnant at rest */
    .divider__bar,
    .divider__bar i { display: none; }
    .peak .split { height: auto; min-height: 100dvh; }
    .peak .copy--intel { left: var(--sc-gutter); top: 5.25rem; max-width: 20rem; }
    .peak .copy--intel .sc-display--md { font-size: var(--sc-t-xl); }
    .peak .copy--close { max-width: none; right: var(--sc-gutter); top: 11.5rem; bottom: auto; }
    .peak .copy--close .sc-display--lg { font-size: var(--sc-t-2xl); }
    .peak .copy--close .sc-body { font-size: var(--sc-t-sm); margin-top: var(--sc-4); }
    .peak .copy--close .cta { margin-top: var(--sc-5); }
    .foot { bottom: 0.8rem; font-size: 0.7rem; }
    .long { display: none; }
    .pile { gap: 0.25rem; } .pile li { padding: 0.32rem 0; font-size: 0.8rem; gap: 0.6rem; }
  }
  @media (max-width: 700px) {
    .hero__h { font-size: var(--sc-t-2xl); }
  }
  @media (prefers-reduced-motion: reduce) {
    .pile li { opacity: 1; transform: none; }
    .assembly { visibility: hidden; }
    .assembly__raster { opacity: 1 !important; }
    .cta, .cta::after, .link { transition: none; }
  }