/* ===================================================================================================
   Split pane: three areas (owner-approved Oct 24, 2026; integrated in site v9).
   The live pinned frame (gold corners, inner keyline, pre-blurred film backdrop, the same crossfade,
   the same crossfade) now rotates the three approved area sections across the WHOLE frame: both sides change
   together. Sides alternate: AI = text | chart, Security = radar | text, Growth = text | city.
   The section rules come unchanged from ai.css / sx.css / gr.css; this file only re-seats them in the frame.
   Scroll per item: 120vh (owner-approved Oct 24, up from the live 90vh) so the Growth city (lit ~6.6 s after activation) finishes at a brisk scroll.
   Modes:
     html.sa-pin (set by scroll.js: desktop >= 1024px, motion allowed): pinned, one area at a time.
     no .sa-pin  (no JS, reduced motion):                              all three stacked, static, finished visuals.
     < 1024px:                                                         stacked cards (the live panel's mobile pattern), visual above text.
   =================================================================================================== */

/* ---------- shell (all modes) ---------- */
.split{position:relative}
.split-frame{position:relative;width:100%;max-width:var(--maxw);margin:0 auto;
  background:var(--panel);border:1px solid var(--hair);box-shadow:var(--shadow-panel);backdrop-filter:blur(14px) saturate(115%);-webkit-backdrop-filter:blur(14px) saturate(115%)}
.split-frame::after{content:"";position:absolute;inset:10px;border:1px solid var(--hair-faint);pointer-events:none}
.areas-stack{position:relative}
/* the standalone sections are full-viewport blocks with their own hairlines; inside the frame they are items */
.areas-stack>.area{min-height:0;max-width:none;margin:0}
.areas-stack>.area::before,.areas-stack>.area::after{display:none}
.rail{display:none}

/* ---------- desktop (>= 1024px) ---------- */
@media (min-width:1024px){
  /* static (no JS / reduced motion): one frame, three areas stacked with hairline separators, finished visuals */
  .split{padding:var(--s9) var(--pad)}
  .areas-stack>.area{padding:var(--s8) clamp(48px,5vw,80px)}
  .areas-stack>.area+.area{border-top:1px solid var(--hair)}
  /* copy column inside the frame: wide enough that every approved line holds (Go stealth. / Secure by design. are nowrap blocks;
     "presence online." stays on one line; Learn more sits inline beside the button, as approved at desktop).
     7.9 x the headline size ("Secure by design." measures 7.81em; headline = clamp(40px,3.6vw,56px)), never over 444px. From 1280px up it is >= 365px, so Learn more sits inline beside the button (button 220 + 30 + link 112);
     below about 1280px (narrow desktops) Learn more wraps under the button, the approved phone behaviour, so the visual keeps its size. The visual takes the rest. */
  .areas-stack{--sa-copy:clamp(330px,28.5vw,444px)}
  .areas-stack>.ai,.areas-stack>.gr{grid-template-columns:var(--sa-copy) minmax(0,1fr)}
  .areas-stack>.sx{grid-template-columns:minmax(0,1fr) var(--sa-copy)}

  /* pinned: the live split-pane mechanics (see design-system.md "Split pane"), n = 3 */
  /* v9.1 (owner): 65 small-viewport units of scroll per area (was 120vh, sized when the panel had six). svh = the visible height with
     browser toolbars shown (Safari iPad, also in desktop mode), so the pin never runs taller than what is on screen; vh is the
     fallback for browsers without svh. Size only: no user-agent or touch checks. */
  .sa-pin .split{height:calc(100vh + 3 * 65vh);height:calc(100svh + 3 * 65svh);padding:0}
  /* the pin is exactly one visible screen; the frame sits centred in the space below the fixed top bar, with an even gap
     above and below, and never taller than that space (or 760px), so its whole border is on screen at every scroll point */
  .sa-pin .split-pin{--sa-gap:clamp(16px,4vh,56px);--sa-gap:clamp(16px,4svh,56px);position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;
    padding:calc(var(--nav-h,76px) + var(--sa-gap)) var(--pad) var(--sa-gap)}
  .sa-pin .split-frame{height:min(760px,100%)}
  .sa-pin .areas-stack{position:absolute;inset:0}
  /* each area fills the frame: same padding as the live panes; right side keeps room for the progress rail */
  .sa-pin .areas-stack>.area{position:absolute;inset:0;align-content:center;border-top:0;
    padding:var(--s7) clamp(40px,4.5vw,72px);   /* the live panes' side padding, both sides (the rail sits in the right padding) */
    opacity:0;pointer-events:none;will-change:opacity;   /* own, pre-painted layer: activation is a compositor-only fade (measured) */
    transition:opacity .9s var(--ease-out)}
  /* hidden areas stay painted (no visibility:hidden, whose first repaint on activation cost a dropped frame); scroll.js sets inert +
     aria-hidden on them instead, so they cannot be focused, clicked or read */
  .sa-pin .areas-stack>.area.on{opacity:1;pointer-events:auto;transition:opacity .9s var(--ease-out) .12s}
  /* the live crossfade timing (design-system.md "Panel crossfade"): 0.9s ease-out, incoming waits 0.12s so the outgoing clears first,
     hidden areas are inert (see below). The live 16px rise / -12px drift is left out here: any moving layer
     over the drawing-in city or chart made each repaint re-raster (measured at 1440 2x: 7-9 frames over 20ms with the drift on the whole
     area or on the copy alone; 0 frames in 2 of 3 runs, 2 in 1 run, with opacity only). */
  /* Security puts its copy on the right: give that side the live right pane's wider padding so the text clears the progress rail */
  .sa-pin .areas-stack>.sx{padding-right:clamp(72px,5.6vw,88px)}
  /* progress rail: the live 1px track with gold fill, three ticks */
  .sa-pin .rail{display:flex;position:absolute;right:32px;top:50%;height:240px;transform:translateY(-50%);width:1px;margin:0;padding:0;list-style:none;background:rgba(198,165,104,.38);
    flex-direction:column;justify-content:space-between;z-index:1}
  .rail-fill{position:absolute;left:0;top:0;width:1px;height:0;background:var(--gold);transition:height .25s linear}
  .rail li{position:relative;width:13px;height:1px;margin-left:-6px;background:rgba(198,165,104,.72);transition:background var(--t-med) var(--ease-out),width var(--t-med) var(--ease-out),margin var(--t-med) var(--ease-out),height var(--t-med) var(--ease-out)}
  .rail li.on{background:var(--gold);width:27px;height:2px;margin-left:-13px;box-shadow:0 0 0 1px rgba(10,18,32,.6)}
}
/* shorter desktop viewports: the live panel's tighter padding */
@media (min-width:1024px) and (max-height:820px){
  .sa-pin .areas-stack>.area{padding-top:var(--s6);padding-bottom:var(--s6)}
}

/* ---------- stacked (< 1024px): the live panel's card pattern, one column, visual above text ---------- */
@media (max-width:1023px){
  .split{padding:var(--s9) var(--pad) var(--s10)}
  .split-frame{background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
  .split-frame::after,.split-frame>.corner{display:none}
  .areas-stack{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair);box-shadow:var(--shadow-panel)}
  .areas-stack>.area{grid-template-columns:minmax(0,1fr);gap:var(--s7);background:var(--panel-solid);padding:var(--s8) clamp(28px,4vw,44px) var(--s8)}
  .areas-stack .ai-vis,.areas-stack .sx-vis,.areas-stack .gr-vis{order:-1}
  .areas-stack .ai-vis,.areas-stack .gr-vis{margin:0 -10px}
  /* v9.1: the live v7 card entrance, restored as it was (owner: the "gold shuffle"). Each card fades in and rises 18px over the
     gold hairline backing of the stack (var(--hair)), so it reads gold first and settles to navy; .11s stagger per card,
     1.1s ease-out, triggered at 12% in view (scroll.js reveal observer). Armed only by scroll.js (html.sa-rv: JS on, motion
     allowed); no JS / reduced motion = cards shown. Opacity + transform only (no layout shift). */
  .sa-rv .areas-stack>.area.rv{opacity:0;transform:translateY(18px);transition:opacity var(--t-reveal) var(--ease-out),transform var(--t-reveal) var(--ease-out);transition-delay:calc(var(--d,0) * var(--stagger))}
  .sa-rv .areas-stack>.area.rv.in{opacity:1;transform:none}
  .sa-rv .areas-stack>.area.rv.done{transition-delay:0s}
  .rm .areas-stack>.area.rv{opacity:1;transform:none;transition:none}
}
/* phones: cards run edge to edge so the copy column is exactly the approved mobile width (22px side padding) */
@media (max-width:700px){
  .split{padding:var(--s9) 0 var(--s10)}
  .areas-stack{border-left:0;border-right:0}
  .areas-stack>.area{padding:var(--s8) 22px var(--s8)}
}