/* Backdrop sits behind content; hide the BaseLayout aurora on datascape pages. */
  body.datascape .aurora { display: none !important; }
  body.datascape { background: #0a1518; }

  .ds-backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: #0a1518 center/cover no-repeat;
    pointer-events: none;
  }
  .ds-video {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; will-change: contents;
  }
  /* Poster layers for the mobile/reduced-motion static path.
     Two absolutely-stacked divs cross-fade via opacity (GPU-friendly, animatable).
     The non-working `transition: background-image` has been removed. */
  .ds-poster-layer {
    position: absolute;
    inset: 0;
    background: center/cover no-repeat;
    transition: opacity 0.6s ease;
    will-change: opacity;
  }
  @media (prefers-reduced-motion: reduce) {
    .ds-poster-layer { transition: none; }
  }
  .ds-grade {
    position: absolute; inset: 0; pointer-events: none;
    background:
      radial-gradient(120% 90% at 50% 0%, transparent 55%, rgba(6, 15, 18, 0.45) 100%),
      linear-gradient(180deg, rgba(6, 15, 18, 0.35) 0%, transparent 22%, transparent 60%, rgba(6, 15, 18, 0.5) 100%);
  }
  /* Page content must stack above the backdrop. */
  body.datascape #main { position: relative; z-index: 1; }.spohad-reveal[data-astro-cid-l46cz6xs]{display:flex;align-items:center;gap:clamp(1.5rem,5vw,4.5rem);flex-wrap:wrap;justify-content:center}.spohad-phone-wrap[data-astro-cid-l46cz6xs]{position:relative;flex-shrink:0;width:clamp(208px,23vw,290px)}.spohad-phone[data-astro-cid-l46cz6xs]{position:relative;width:100%;aspect-ratio:9 / 19.5;border-radius:clamp(28px,3vw,40px);padding:9px;background:linear-gradient(155deg,#1c2b2e,#0a1417 60%);box-shadow:0 0 0 1.5px rgba(94,234,212,0.22),0 40px 90px -30px rgba(20,184,166,0.7),0 18px 50px -20px rgba(0,0,0,0.8)}.spohad-pause-btn[data-astro-cid-l46cz6xs]{position:absolute;bottom:0.6rem;right:-0.5rem;z-index:10;display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:50%;border:1px solid rgba(94,234,212,0.35);background:rgba(6,15,18,0.65);color:rgba(94,234,212,0.8);cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background 0.2s ease,border-color 0.2s ease,opacity 0.2s ease;opacity:0.72;padding:0}.spohad-pause-btn[data-astro-cid-l46cz6xs]:hover,.spohad-pause-btn[data-astro-cid-l46cz6xs]:focus-visible{background:rgba(6,15,18,0.88);border-color:rgba(94,234,212,0.75);opacity:1}.spohad-pause-btn[data-astro-cid-l46cz6xs]:focus-visible{outline:2px solid var(--color-teal-300, #5eead4);outline-offset:2px}.sp-icon--play[data-astro-cid-l46cz6xs]{display:none}.spohad-pause-btn[data-astro-cid-l46cz6xs].is-paused .sp-icon--pause[data-astro-cid-l46cz6xs]{display:none}.spohad-pause-btn[data-astro-cid-l46cz6xs].is-paused .sp-icon--play[data-astro-cid-l46cz6xs]{display:block}@media (prefers-reduced-motion: reduce){.spohad-pause-btn[data-astro-cid-l46cz6xs]{display:none}}.spohad-screen[data-astro-cid-l46cz6xs]{position:relative;width:100%;height:100%;border-radius:clamp(21px,2.3vw,32px);overflow:hidden;background:#06141a}.spohad-ob[data-astro-cid-l46cz6xs]{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 0.7s ease}.spohad-ob[data-astro-cid-l46cz6xs].on{opacity:1}.spohad-meta[data-astro-cid-l46cz6xs]{max-width:30rem;text-align:left}.spohad-logo[data-astro-cid-l46cz6xs]{display:inline-flex;align-items:center;gap:0.6rem;color:var(--color-teal-300, #5eead4);margin-bottom:0.9rem;filter:drop-shadow(0 0 18px rgba(94,234,212,0.55))}.spohad-logo[data-astro-cid-l46cz6xs] b[data-astro-cid-l46cz6xs]{font-family:var(--font-display, Georgia, serif);font-weight:560;font-size:1.9rem;letter-spacing:0.01em;color:var(--color-fg, #f5f1e8)}.spohad-badge[data-astro-cid-l46cz6xs]{display:inline-block;font-size:0.72rem;letter-spacing:0.16em;text-transform:uppercase;padding:0.3rem 0.7rem;border-radius:999px;color:#04110f;background:linear-gradient(180deg,#5eead4,#14b8a6);margin-bottom:1rem;font-weight:700}.spohad-title[data-astro-cid-l46cz6xs]{font-family:var(--font-wonk, var(--font-display, Georgia, serif));font-weight:580;letter-spacing:-0.02em;line-height:1.1;font-size:clamp(1.95rem,1.6rem + 1.5vw,2.6rem);margin:0 0 0.8rem;text-wrap:balance;color:var(--color-fg, #f5f1e8);text-shadow:0 1px 18px rgba(6,15,18,0.65)}.spohad-sub[data-astro-cid-l46cz6xs]{margin:0 0 0.6rem;color:var(--color-fg-muted, #c8d6d4);font-size:1.05rem}.spohad-priv[data-astro-cid-l46cz6xs]{margin:0 0 1.5rem;font-size:0.92rem;color:var(--color-teal-300, #5eead4);opacity:0.92}.spohad-cta[data-astro-cid-l46cz6xs]{display:inline-flex;align-items:center;padding:0.8rem 1.5rem;border-radius:999px;font-weight:700;text-decoration:none;color:#04110f;background:linear-gradient(180deg,#5eead4,#14b8a6);box-shadow:0 14px 40px -16px rgba(20,184,166,0.8);transition:transform 0.2s ease}.spohad-cta[data-astro-cid-l46cz6xs]:hover{transform:translateY(-2px)}@media (max-width: 768px){.spohad-meta[data-astro-cid-l46cz6xs]{text-align:center}.spohad-logo[data-astro-cid-l46cz6xs]{justify-content:center}}/* ===== Datascape cinematic scenes ===== */
  body.datascape .scene {
    position: relative;
    z-index: 1;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(3.5rem, 9vh, 8rem) clamp(1rem, 5vw, 3rem);
    box-sizing: border-box;
  }
  body.datascape .scene--center { text-align: center; }
  body.datascape .scene__inner {
    position: relative;
    width: 100%;
    max-width: 56rem;
    /* soft legibility scrim behind content */
    padding: clamp(1.25rem, 3vw, 2.5rem);
    border-radius: 1.5rem;
    background: radial-gradient(130% 130% at 50% 45%, rgba(6,15,18,0.66) 0%, rgba(6,15,18,0.34) 60%, transparent 100%);
  }
  body.datascape .scene__inner--wide { max-width: 72rem; }
  body.datascape .scene--hero .scene__inner {
    max-width: 46rem; margin-right: auto;
    background: radial-gradient(120% 130% at 28% 40%, rgba(6,15,18,0.62) 0%, rgba(6,15,18,0.28) 60%, transparent 100%);
    /* CLS-FIX part B: anchor top-left so font-swap cannot move the block vertically.
       min-height reserves space; align-items:flex-start (on the section below) keeps
       the top of this element pinned to section-top+padding regardless of content height. */
    min-height: 320px;
  }
  body.datascape .scene--hero {
    justify-content: flex-start;
    /* CLS-FIX part B: flex-start pins scene__inner to top of section so content-height
       changes (Fraunces font swap, poster swap) don't shift its top coordinate.
       Vertical centering was causing 0.91 CLS when content grew after first paint. */
    align-items: flex-start;
  }

  body.datascape .ds-eyebrow {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
    color: var(--color-teal-300);
    border: 1px solid var(--color-hairline); border-radius: 999px; padding: 0.35rem 0.85rem;
    margin-bottom: 1.1rem;
  }
  body.datascape .ds-h1 {
    font-family: var(--font-wonk, var(--font-display)); font-weight: 600; letter-spacing: var(--ls-h1);
    line-height: var(--lh-display); font-size: var(--fs-display); margin: 0 0 1.1rem;
    /* CLS-FIX part C: replaced max-width:18ch with a stable rem value.
       The `ch` unit is relative to the loaded font's "0" glyph width, so it changes
       when Fraunces Variable swaps in, altering line-breaks and H1 height → 0.91 CLS.
       At desktop (56px font), 18ch ≈ 504px ≈ 31.5rem; we cap with min() for mobile.
       rem is font-swap-stable: the H1 breaks into the same number of lines before
       and after Fraunces loads, eliminating the height-driven CLS. */
    max-width: min(31rem, 100%); text-wrap: balance;
    color: var(--color-fg); text-shadow: 0 1px 24px rgba(6,15,18,0.6);
  }
  body.datascape .ds-h2 {
    font-family: var(--font-wonk, var(--font-display)); font-weight: 560; letter-spacing: var(--ls-h2);
    line-height: var(--lh-heading); font-size: var(--fs-h2); margin: 0 0 0.8rem; color: var(--color-fg);
    text-wrap: balance; text-shadow: 0 1px 18px rgba(6,15,18,0.65);
  }
  body.datascape .ds-kicker {
    margin: 0 0 1rem; font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
    color: var(--color-teal-300);
  }
  body.datascape .ds-lead { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--color-fg-muted); margin: 0 0 1.6rem; text-shadow: 0 1px 16px rgba(6,15,18,0.65); max-width: var(--measure-lead); }
  body.datascape .ds-sub { color: var(--color-fg-muted); margin: 0 0 1rem; line-height: var(--lh-body); max-width: var(--measure); }
  /* reading measure for any body paragraph in a scene (leads/centered exempt) */
  body.datascape .scene p:not(.ds-lead):not(.spohad-sub):not(.spohad-priv) { max-width: var(--measure); }
  body.datascape .scene--center .ds-sub { margin-left: auto; margin-right: auto; }
  body.datascape .ds-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; }
  body.datascape .ds-cta--center { justify-content: center; margin-top: 1.6rem; }

  body.datascape .ds-faq { max-width: 40rem; margin: 0 auto; }
  body.datascape .ds-faq > summary {
    cursor: pointer; font-family: var(--font-display); font-size: 1.3rem; color: var(--color-fg);
    list-style: none;
  }
  body.datascape .ds-faq > summary::-webkit-details-marker { display: none; }

  body.datascape .ds-cue {
    position: absolute; bottom: 1.6rem; left: 50%; transform: translateX(-50%);
    width: 26px; height: 42px; border: 2px solid color-mix(in oklab, var(--color-teal-300) 55%, transparent);
    border-radius: 14px;
  }
  body.datascape .ds-cue::before {
    content: ""; position: absolute; top: 7px; left: 50%; width: 4px; height: 8px; border-radius: 2px;
    background: var(--color-teal-300); transform: translateX(-50%); animation: dscue 1.6s ease-in-out infinite;
  }
  @keyframes dscue { 0%,100% { opacity: 0.3; transform: translate(-50%,0); } 50% { opacity: 1; transform: translate(-50%,10px); } }
  @media (prefers-reduced-motion: reduce) { body.datascape .ds-cue::before { animation: none; } }

  /* Heavier readability boost on phones (posters behind) */
  @media (max-width: 768px) {
    body.datascape .scene__inner { background: rgba(6,15,18,0.6); backdrop-filter: blur(2px); }
  }