/* ==========================================================
   /media-node (VLP-1234) : the Media Node page layer only.

   WHAT THIS FILE OWNS
   Everything that is this page and no other: the hero and the lift that brings
   the library up level under the nav pill, this page's two authored window
   crops, the panel form of the rules list, the two tier cards and their price
   figures, the managed terms row, the closer, this page's act seams by id, and
   the no-JS, static and reduced-motion restatements for exactly those moves.

   WHAT IT DEPENDS ON
   /folio.css, loaded first: tokens, reset, base type, the section formula,
   buttons, the nav, frames and the window device, the grids, the FAQ, the
   footer, the modal, the sticky CTA. This file adds to that layer and never
   restates it.

   LOAD ORDER
   critical fallback <style> -> /folio.css -> /media-node-v2.css ->
   /scrollcraft.css. The engine sheet is last so the page can override its
   tokens; folio.css restates every engine base rule it changes at a higher
   specificity.

   CANDIDATES FOR PROMOTION INTO folio.css
   .mn-rules-2 (a .rules list laid out as two columns) is the same shape as
   capabilities-v2's .cap-rules-2. The second page to want it is the argument
   for moving it into the shared layer; see docs/media-node-v2.md.
   ========================================================== */

/* ---------------- hero ----------------
   Ink only, lifted by one very faint radial so the field is not a flat wall.
   No photograph: the product is the picture. */
.hero{position:relative;min-height:100svh}
/* The act is only a length. Everything the reader sees lives on the stage, which is what the
   engine sticks; when the hero is demoted (phones, coarse pointers, reduced motion) the same
   block simply flows, because every rule here is on the stage rather than on the act. */
.hero-stage{position:relative;display:flex;flex-direction:column;background:var(--ink);
  padding:calc(var(--nav-h) + var(--nav-inset) + 24px) 0 0}
.hero-stage::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at 50% 0%,rgba(244,241,234,.06),transparent 60%)}
.hero-in{position:relative;z-index:1;width:100%;min-width:0;display:flex;flex-direction:column;
  align-items:center;text-align:center}
/* margin-inline:auto on a flex item cancels the cross-axis stretch, so a .wrap inside a stage
   shrinks to its own content and a centred frame comes out narrow. */
.hero-stage>.stage.wrap,.closer-stage>.wrap{width:100%}
/* Line masks reserve descender room. Instrument Serif hangs its g, y and p a long way below the
   baseline, and the engine's default 0.14em shears them at this line-height. */
.hero h1 .sc-split--line{padding-bottom:.26em;margin-bottom:-.26em}
.hero h1{margin-top:16px;max-width:15ch}
.hero-lead{margin-top:16px;max-width:50ch;font-size:clamp(16px,1.4vw,18.5px)}
.hero-cta{margin-top:22px;display:flex;align-items:center;gap:22px;flex-wrap:wrap;justify-content:center}
/* The price, in the fold, at the size the Free Build page sets its terms line: 13.5px in --text
   rather than the 10.5px --dim of a .fine. The v1 page put a number in this fold and v2 had
   dropped it, which left the site's only $6,000 page opening on a metaphor and no figure. */
.mn-terms{margin-top:14px;letter-spacing:.12em;text-transform:uppercase;font-size:13.5px;
  color:var(--text);text-align:center}
/* The library has to be IN the first screen at 1440, not 130px under it: the fold is the only
   place a reader decides whether this page is showing them a product or a promise. The copy
   above it is tightened and the stage's own lead-in is shorter. */
.hero-stage>.stage.wrap{padding-top:34px}

/* ---------------- the lift ----------------
   Two nested transforms on purpose. The lean follows the pointer, and needs a transition or it
   tracks the mouse with no weight; the lift is written from --sc-p every frame, and a transition
   on it would make the frame lag the hand. One element cannot carry both. */
.mn-lean{transform-style:preserve-3d;
  transform:rotateX(calc((var(--sc-my,.5) - .5) * -2.4deg)) rotateY(calc((var(--sc-mx,.5) - .5) * 2.6deg));
  transition:transform 620ms var(--ease-out)}
/* The library does not merely level, it travels: it starts where the first screen shows it, a
   tilted plane whose top edge is most of a screen down, and arrives level and full with its top
   24px under the nav pill. --mn-rise is that distance, measured by media-node-v2.js off the real
   layout rather than hardcoded at one viewport. Two ramps, not one: the plane straightens by
   p = 0.72 and finishes arriving by p = 0.86, so it reads as a console standing up as it comes
   rather than as one flat rectangle sliding, and the last seventh of the travel is a hold.
   --sc-p defaults to 1 so the plane is already level for a browser that never runs the script. */
.mn-lift{
  --l:clamp(0,calc(var(--sc-p,1) / .72),1);
  --u:clamp(0,calc(var(--sc-p,1) / .86),1);
  transform-origin:50% 100%;
  transform:rotateX(calc((1 - var(--l)) * 6deg))
            scale(calc(.97 + .03 * var(--u)))
            translate3d(0,calc((1 - var(--u)) * 14px - var(--u) * var(--mn-rise,0px)),0)}
/* The copy greets, then gets out of the frame's way: it drifts up while its cues ramp out, so
   the two moves are one gesture rather than a fade over a rise. The drift lives on the block,
   which no cue owns; a cue writes transform on its own element, and stacking a second transform
   there would silently discard one of them. */
.hero-in{transform:translate3d(0,calc(clamp(0,calc(var(--sc-p,0) / .5),1) * -86px),0)}

/* This page's hero window. The library screenshot is 16/10 inside a 16/8.6 frame, so it really
   overflows and the pan has somewhere to go: 0px at the start of the act, the second crop by the
   end of it. data-window="pin" makes the ruler the act's own progress, because a pinned frame
   does not move on screen and the position-based ruler would never advance. */
.frame-hero{aspect-ratio:16/7.2}
.frame-hero img{--w-from:0px;--w-to:-84px}

/* ---------------- the statement panel ----------------
   The rules list as a two-up panel: four short terms, no media, on the page's centred spine. */
.mn-panel{max-width:1000px;margin:52px auto 0;padding:34px 34px 36px;border-radius:22px;
  border:1px solid var(--line);background:var(--surface)}
.mn-rules-2{margin-top:0;border-top:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 44px}
.mn-rules-2 li{padding:22px 0 24px;border-top:1px solid var(--line)}
.mn-rules-2 li+li{border-top:1px solid var(--line)}
.mn-rules-2 li:nth-child(-n+2){border-top:0;padding-top:0}
.mn-rules-2 li:last-child{padding-bottom:0}
.mn-rules-2 li p{max-width:42ch}
/* Standing on its own, outside a panel, the terms row still wants the hairline above it. */
.sec-managed .mn-rules-2{max-width:1000px;margin:52px auto 0}

/* ---------------- the two tiers ----------------
   Plain cards, no screenshot: the offer is the argument here, and a picture under it would make
   the price look like a caption. The price is the only amber on the page, twice, once per tier. */
.mn-tier{padding-bottom:30px}
.mn-tier .num{color:var(--muted)}
.mn-tier h3{margin-top:14px;font-size:21px}
.mn-figure{margin-top:22px;display:flex;flex-direction:column;gap:8px}
.mn-figure .price{font-family:var(--serif);font-size:44px;line-height:1;letter-spacing:-.01em;
  font-weight:400}
.mn-incl{margin-top:26px}
.mn-incl li{padding:14px 0 15px}
.mn-incl li p{margin-top:0;color:var(--muted);font-size:14.5px;max-width:40ch}
.mn-tier-cta{margin-top:28px}
.mn-tier-cta .btn{width:100%;justify-content:center;min-height:46px}

/* ---------------- what runs on it ----------------
   The duplicates screen has no tuned crop in the shared layer, so this page authors one: the
   group rows, not the page chrome, and a second crop for the window to travel to. */
.mn-shot-dupes{aspect-ratio:4/3;--zoom:205%;--sx:-30%;--sy:-8%;--w-from:0px;--w-to:-92px}

/* ---------------- the closer ---------------- */
/* Bottom-set for the same reason as /referral: the engine writes height:100svh on a pinned stage,
   and a closer of copy alone centred in it left 162px of ink between the last line and the
   footer. */
.closer-stage{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:100svh;background:var(--ink);
  padding:calc(var(--nav-h) + var(--nav-inset) + 34px) 0 56px}
.closer-stage::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at 50% 100%,rgba(76,141,255,.07),transparent 62%)}
.closer-in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;
  text-align:center}
.closer-in .display{margin-top:22px}
.closer-in .lead{margin-top:22px;text-align:center}

/* ---------------- this page's seams ----------------
   A flow section straight after a pinned act takes reduced padding: the stage needs a whole
   viewport to slide off, and full section padding on top of that is a second near-empty screen.
   Addressed by id so the value survives the act being demoted to flow. */
#what{padding-top:calc(var(--sec-pad) * .5)}
/* The terms row is the quietest beat on the page and sits between two loud ones. */
.sec-managed{padding-top:calc(var(--sec-pad) * .86);padding-bottom:calc(var(--sec-pad) * .86)}
/* The last question hands over to the close, which brings its own full screen of ground. */
#questions{padding-bottom:calc(var(--sec-pad) * .62)}

/* ---------------- no JS and ?static=1 ----------------
   If the script never runs, or a capture tool asks for the static page, nothing may stay
   invisible and nothing may sit mid-animation. folio.css covers the cues, reveals and staggers;
   these are this page's own moves. */
html.no-js .mn-lean,html.hv-static .mn-lean,
html.no-js .mn-lift,html.hv-static .mn-lift,
html.no-js .hero-in,html.hv-static .hero-in{transform:none;transition:none}
html.no-js .frame-hero img,html.hv-static .frame-hero img{transform:none}
html.no-js .hero h1 .sc-split__i,html.hv-static .hero h1 .sc-split__i{animation:none}

/* ---------------- reduced motion ----------------
   Fewer and gentler, not zero: the engine keeps the opacity that carries comprehension and drops
   every position change. These are this page's own position changes. */
@media(prefers-reduced-motion:reduce){
  .mn-lean,.mn-lift,.hero-in{transform:none;transition:none}
  .frame-hero img{transform:none}
  .hero h1 .sc-split__i{animation:none}
  /* The hero and the close are demoted to flow under reduce, so the pinned-only stage height
     never applies. Restated rather than inherited, because .sc-stage is what carries it and a
     flow act never gets the class. */
  .closer-stage{min-height:0;padding-top:calc(var(--rhythm) * .5);padding-bottom:0}
}

/* ---------------- responsive ---------------- */
@media(max-width:1060px){
  .mn-figure .price{font-size:38px}
}
@media(max-width:900px){
  /* The hero and the close are flow here, so their progress is not a pin's progress and the
     lift would arrive half resolved. The window still pans. */
  .mn-lean,.mn-lift,.hero-in{transform:none}
  .closer-stage{min-height:0;padding-top:calc(var(--rhythm) * .5);padding-bottom:0}
  .mn-panel{padding:28px 26px 30px}
  .mn-rules-2{grid-template-columns:1fr;gap:0}
  .mn-rules-2 li:nth-child(2){border-top:1px solid var(--line);padding-top:22px}
}
@media(max-width:760px){
  .hero-stage{padding-top:calc(var(--nav-h) + var(--nav-inset) + 30px)}
  .hero h1{margin-top:18px}
  .hero-lead{margin-top:16px}
  .hero-cta{margin-top:24px;gap:16px;flex-direction:column;width:100%}
  .hero-cta .btn{width:100%;justify-content:center;min-height:48px}
  /* A whole 1600px console at 326px is a smudge. The phone frame is taller and the picture is
     enlarged inside it, cropped to the volumes rail and the first cards: the part of the library
     the claim above is actually about. The window still pans, because the enlargement leaves a
     real vertical overflow. */
  .frame-hero{aspect-ratio:4/3.2;border-radius:12px}
  .frame-hero picture{position:absolute;inset:0}
  .frame-hero img{position:absolute;top:0;left:0;width:210%;max-width:none;height:auto;
    --w-from:0px;--w-to:-52px}
  .mn-panel{margin-top:34px}
  .sec-managed .mn-rules-2{margin-top:34px}
  .mn-tier-cta .btn{min-height:48px}
}

/* --- the hero when nothing is pinned ---
   100svh is the pinned stage's own height: the act holds a whole screen and the copy sits in the
   middle of it. Take the pin away, which ?static=1, reduced motion, a coarse pointer and any
   width under 900px all do, and that same screen becomes a fixed measure the copy no longer
   fills, so the fold opened on a band of ground and closed on another one before the next
   section. Unpinned, the hero is as tall as the hero. .sc-act--pinned and .sc-stage are the two
   classes the engine adds to a pinned act and its stage, so this is exactly "not pinned". */
.hero:not(.sc-act--pinned){min-height:0}
.hero-stage:not(.sc-stage){min-height:0}

/* ---------------- type floors on a phone ----------------
   Body copy to 15.5px, mono captions to 11px, the fine print that carries the terms to 12px.
   folio.css sets the shared floors; these are the sizes this page authors itself. */
@media(max-width:760px){
  .mn-incl li p{font-size:15.5px}
}