/* ===========================================================================
   static/su/landing.css — the landing export's own <style> block.

   Byte for byte from `UI REDO/Landing.dc.html`, generated by
   work/port_landing.py, with ONE change, below the fold of this comment:

   `bl` and `blw` animate `opacity: 0 -> 1`. A running animation pins its
   element at the from-keyframe until a frame arrives, and frames are not
   guaranteed — a hidden tab, a throttled renderer, a screenshot pass. This
   build has shipped a screen where every figure was present, correct and
   invisible for exactly that reason; see the header of frontend/motion.js and
   CLAUDE.md hazard 5. Both now animate transform and blur only.

   Neither is referenced by the export's markup — its entrance is driven by
   Framer Motion, not by these — so this costs nothing today and closes the
   door on the next edit that reaches for `animation: bl`.

   The Google Fonts <link> that sat above this block in the export is not here:
   Instrument Serif, Barlow and IBM Plex Mono are all self-hosted in
   static/skin.css, which the landing shell links for its @font-face rules.
   =========================================================================== */

html,body{margin:0;background:#000;color:#fff;font-family:'Barlow',sans-serif}
a{color:#fff;text-decoration:none}a:hover{color:rgba(255,255,255,.72)}
::selection{background:rgba(225,173,102,.34)}
*:focus-visible{outline:2px solid #e1ad66;outline-offset:3px}
::-webkit-scrollbar{width:9px}::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:9px}
::-webkit-scrollbar-thumb:hover{background:rgba(225,173,102,.5)}::-webkit-scrollbar-track{background:#000}
@keyframes bl{from{filter:blur(10px);transform:translate3d(0,20px,0)}to{filter:blur(0);transform:none}}
@keyframes blw{from{filter:blur(10px);transform:translate3d(0,50px,0)}to{filter:blur(0);transform:none}}
@keyframes amb{0%,100%{transform:translate3d(-4%,-2%,0) scale(1)}50%{transform:translate3d(4%,3%,0) scale(1.12)}}
@keyframes mq{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(225,173,102,.5)}70%{box-shadow:0 0 0 9px rgba(225,173,102,0)}}

/* The export has no reduced-motion block. Its aurora, its marquee and its
   pulse all run forever, and a 70s marquee is the kind of thing that makes a
   page unusable for a reader who asked the operating system to stop. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}


/* ===========================================================================
   DENSITY — the export's rhythm, measured and tightened.

   The export lays out at 4,168px on a 1440x900 viewport: 4.63 screens of
   scrolling for six sections. Measured per section, with the distance from the
   box edge to the first and last piece of INK:

       section            height   ink-top   ink-bottom
       hero                  900         0            0
       function set          782       115          115
       numbers               379       101          100     <- 53% padding
       screen miniatures     946       116          115
       capabilities         1036         0            0     <- 100vh, twice
       footer                 77        31           30

   662px of the page is padding on three sections, and the capabilities block
   is pinned to the viewport by `min-height:100vh` on BOTH the section and its
   inner column, so its three cards sit under a band of nothing. That is not a
   design decision to preserve — `clamp(70px, 8vw, 120px)` resolves to 115px
   only because 8vw of 1440 is 115, and the export was composed at that width.

   WHY THIS IS CSS AND NOT AN EDIT TO THE MARKUP. Every one of those values is
   an INLINE style on the section, so `static/su/landing.tpl.html` stays byte
   for byte what `EDITS` above produced, and re-exporting the design file
   cannot silently drop these. The cost is that each rule needs `!important` to
   outrank an inline declaration — the same cascade fact that made every hover
   state in the export dead until tpl.js started importantifying them.

   NOTHING HERE TOUCHES THE HERO. It is `min-height:100vh` on purpose and is
   the one section whose full-bleed height is the point.
   =========================================================================== */

/* The three in-flow sections. `:not(:first-of-type)` spares the hero;
   `:not(#capabilities)` spares the block handled separately below. */
#su-landing > div > section:not(:first-of-type):not(#capabilities) {
  padding-block: clamp(40px, 4vw, 64px) !important;
}

/* Capabilities: let it size to its content. With the two 100vh minimums gone
   the heading's `margin-bottom:auto` has no free space left to push into, so
   the band between the heading and the cards closes on its own. */
#su-landing > div > section#capabilities { min-height: 0 !important; }
#su-landing > div > section#capabilities > div:last-child {
  min-height: 0 !important;
  padding-block: clamp(44px, 4.4vw, 70px) clamp(40px, 4vw, 56px) !important;
}
#su-landing > div > section#capabilities > div:last-child > div:last-child {
  margin-top: clamp(28px, 3vw, 44px) !important;
}

/* The capability cards carry `min-height:360px` and a `flex:1` spacer, so a
   card shorter than 360 renders the difference as a void above its figure. */
#su-landing [data-fm="card"] { min-height: 0 !important; }

/* The four screen miniatures are a 2x2 of 240px-minimum cards; the figure in
   each is a grid that fills whatever it is given. */
#su-landing [data-fm="screen"] { min-height: 210px !important; }

/* The section headings sit under a `// label` with 18px beneath it and 38-40px
   under the heading itself. Two lines of 72px serif do not need both. */
#su-landing > div > section > div > div > h2 { line-height: .96 !important; }

/* THE HERO'S OWN RHYTHM. Its column is centred in the viewport with 112px of
   top padding for the fixed header; the stat cards then land close to the
   fold. 88px clears the 48px header with room and lifts the whole group. */
#su-landing > div > section:first-of-type > div[style*="z-index:10"] {
  padding-top: 88px !important;
}


/* ===========================================================================
   THE PHONE, WHICH THIS SHEET DID NOT HAVE.

   This file shipped with exactly one `@media` block and it was
   `prefers-reduced-motion`. Zero width breakpoints — while the landing page it
   styles serves only four assets and links NEITHER `static/landing.css` (which
   has four breakpoints) NOR `static/mobile.css`. So the redesigned landing had
   no phone layout at all, and the export was composed at 1440.

   MEASURED FIRST, at 390x844 in real Chrome. Two useful facts came out of it:

     · The page does NOT overflow. `scrollWidth == innerWidth` at 390, 360 and
       768, because the export uses `clamp()` and `minmax()` throughout. So
       this is not a rescue job; it is a handful of blocks composed for a
       desktop column.
     · The header IS broken. Its `nav` is `flex-wrap: wrap` and at 390px it
       wraps to two rows, 82px tall, with the white CTA landing under the four
       links and over the mark.

   `!important` ON EVERY RULE, because the export keeps its layout in 635
   inline `style` attributes and an inline declaration outranks any author
   selector. Same reason the density block above needs it.

   SCOPED TO THE TOP TWO LEVELS, WHICH IS HAZARD 36. A blanket
   `[style*="grid-template-columns"]` inside this page would also flatten the
   decorative chart grids — measured, they run to 18, 28 and 30 columns of
   3-7px cells inside `[data-fm]` cards, and one column each would erase them.
   The direct-child chains below stop two levels under `section`; every chart
   grid is four or more levels down.
   =========================================================================== */

@media (max-width: 767px) {

  /* --- THE BACKGROUND VIDEOS COME OFF THE PHONE ENTIRELY. --------------
     Measured at 375px: two `<video>` layers, `width: 120%` / `object-fit:
     cover`, rendering 450x1350 and 375x1362 at 0.55 opacity underneath the
     hero and the capabilities copy. At 1440 they sit behind a wide column of
     large type and read as texture; at 375 the same footage is behind EVERY
     line, at the same opacity, and the moving detail lands directly under
     10-14px text. That is the reported "background elements interrupting the
     main text", and it is a readability fault rather than a taste one --
     contrast against a moving image is not a number you can hold.

     `display: none` rather than a lower opacity, for a second reason that is
     just as good: these are the two heaviest assets the landing page pulls,
     and a phone is the connection least able to afford them. Turning them
     down would keep the download and only half-fix the reading. The ground
     underneath is the page's own, so nothing is left empty. */
  #su-landing video { display: none !important; }

  /* --- The header. -------------------------------------------------------
     The four nav links are dropped, not shrunk. At 390px there is room for the
     mark and one action, and this page carries a full site map at its foot —
     51 links in seven groups — so nothing becomes unreachable. Shrinking them
     instead would land four 33px-tall targets in a row, under the 44px floor
     a finger needs. */
  #su-landing > div > section > header { padding: 0 14px !important; }
  #su-landing > div > section > header > nav {
    flex-wrap: nowrap !important;
    gap: 0 !important;
    padding: 4px !important;
  }
  #su-landing > div > section > header > nav > a:not(:last-child) {
    display: none !important;
  }
  /* The CTA loses the margin that separated it from the links it no longer
     sits beside, and grows to a thumb-sized target. */
  #su-landing > div > section > header > nav > a:last-child {
    margin-left: 0 !important;
    padding: 11px 18px !important;
  }

  /* --- Section grids composed at 1440. -----------------------------------
     `auto-fit` with a 150px floor rather than a fixed count: the 88-chip
     function wall goes 3 columns -> 2, the four screen miniatures stay 2, and
     anything whose content needs more than half the width takes the whole
     row on its own. One rule, no per-section arithmetic to keep in step. */
  #su-landing > div > section > div,
  #su-landing > div > section > div > div {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  }

  /* NO `overflow: hidden` ON THE HERO CARDS, AND THAT IS A CORRECTION.
     A first pass added it: the phone screenshot shows a green line crossing
     out through the SPX card's rounded right edge, which reads exactly like a
     sparkline overflowing its box. It is not. Measured — every `svg` on the
     page against its nearest containing box — ZERO escape. The line is the
     full-bleed ambient tape behind the whole hero, and the desktop shot shows
     it running edge to edge through the lede text in the same way. Clipping it
     would have removed a deliberate backdrop on the strength of a glance, and
     `[data-fm="stat"]`, which the rule also named, exists nowhere on this page
     (hazard 57: a selector written from memory of what a thing is called). */

  /* --- Reading measure. --------------------------------------------------
     Section padding drops to something a 390px column can afford; the density
     block above resolves `clamp(40px, 4vw, 64px)` to 40px here, which is the
     floor rather than a phone value. */
  #su-landing > div > section:not(:first-of-type):not(#capabilities) {
    padding-block: 34px !important;
  }
  #su-landing > div > section > div > div > h2 {
    line-height: 1 !important;
    word-break: normal !important;
    hyphens: auto !important;
  }
}

/* ==========================================================================
   PHONE — the one control on this page a thumb cannot reliably hit.

   Measured at 390x844 with mobile emulation: the hero's secondary action,
   `<a href="#capabilities">Watch a live session</a>`, is 149x18px. It is a
   bare flex link with no padding beside a 39px pill, so it reads as a link and
   behaves like a hairline. Everything else on this page clears 37px.

   TARGETED BY HREF, NOT BY CLASS, AND THAT IS DELIBERATE. The template ships
   its appearance in inline `style` attributes and `frontend/su/tpl.js` mints
   the only classes here at runtime as `su-p${pseudoClasses.size}` — an INDEX.
   `.su-p4` is whatever the fourth distinct pseudo-block happened to be on that
   render, so a stylesheet naming it is correct until someone adds a hover
   state above it (hazards 15 and 57). The href is what the link IS.

   `min-height` and not `height`, so nothing that is already big enough moves,
   and the row is `flex-wrap: wrap` so a taller item cannot push anything off
   the edge.
   ========================================================================== */

@media (max-width: 767px) {
  [data-su-ref="root"] a[href="#capabilities"] {
    min-height: 44px;
    padding: 0 4px;
  }
}