/* ---- brand tokens (Cyphaira Brand Book V1.0) ---------------------------- */
  :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;

    /* 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-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.68; letter-spacing: 0.002em; font-weight: 400; }
  .sc-display { font-weight: 500; letter-spacing: -0.028em; }
  .sc-display--md { font-weight: 500; }
  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: 100svh;
  }
  .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%);
  }
  .side--intel::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(70% 60% at 30% 50%, color-mix(in oklab, var(--sc-accent) 9%, 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: 0.68rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--sc-ink-soft); white-space: nowrap;
    transition: opacity 240ms var(--sc-ease-out);
  }
  .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 1px 2px hsl(var(--sc-shadow-color) / .5);
  }
  .divider__bar { display: none; }

  /* ---- hero ---------------------------------------------------------------- */
  .hero .side__in { justify-content: space-between; }
  .brand { display: flex; align-items: center; gap: 0.75rem; }
  .brand img { height: 32px; width: auto; }
  .brand img + img { height: 13px; }
  .hero .side--info .brand { margin-left: auto; }
  .hero__h { margin-top: var(--sc-8); max-width: 12ch; }
  .hero__h--intel { color: var(--sc-accent); }
  .hero__p { margin-top: var(--sc-5); max-width: 34ch; }
  .hero__foot { margin-top: var(--sc-8); }
  .hero__foot--info { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); max-width: 30ch; }

  .cta {
    display: inline-flex; align-items: center; gap: 0.6rem;
    background: var(--cy-blue); color: #fff;
    font-weight: 500; font-size: var(--sc-t-sm);
    padding: 0.9rem 1.5rem; border-radius: var(--sc-r-sm);
    text-decoration: none; white-space: nowrap;
    box-shadow: var(--sc-e2), var(--sc-edge);
    transition: transform 140ms var(--sc-ease-out), box-shadow 140ms var(--sc-ease-out), background-color 140ms var(--sc-ease-out);
  }
  .cta::after { content: "→"; font-weight: 400; transition: transform 160ms var(--sc-ease-out); }
  @media (hover: hover) and (pointer: fine) {
    .cta:hover { background: #3A74FF; box-shadow: var(--sc-e3), var(--sc-edge); transform: translateY(-1px); }
    .cta:hover::after { transform: translateX(3px); }
  }
  .cta:active { transform: translateY(1px) scale(0.98); }
  .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); }
  @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: 0.68rem; 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); }
  .trust b { display: block; font-weight: 500; color: var(--sc-ink); margin-bottom: 0.2rem; }
  .you { margin-top: var(--sc-8); max-width: 36ch; }

  /* ---- act 5: the assembly and the collapse -------------------------------- */
  .peak { --cy-collapse: 0; }
  .peak .split { height: 100svh; 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(2.5rem, 8vh, 6rem); 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; }
    .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__h { margin-top: var(--sc-7); }
    .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.6rem; width: auto;
      background: color-mix(in oklab, var(--sc-canvas) 82%, transparent); backdrop-filter: blur(10px); }
    .divider__line, .divider__mark { display: none; }
    .divider__label { top: 0.95rem; }
    .divider__label--info { left: var(--sc-gutter); right: auto; }
    .divider__label--intel { right: var(--sc-gutter); left: auto; }
    .divider__bar { display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--sc-hairline); }
    .divider__bar i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--cy-page, 0) * 100%); background: var(--sc-accent); }
    .peak .copy--intel { left: var(--sc-gutter); top: 3.6rem; 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; }
    .hero .side__in { min-height: 50svh; }
  }
  @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; }
  }