/* ==========================================================
   /blueprint, the free guide (VLP-1234): the page layer only.

   WHAT THIS FILE OWNS
   Everything that is this page and no other: the two-column hero, the
   depreciation chart that is this page's one bespoke device, the meta strip
   and the qualifying block, the six inside cards, the request form and its
   success state, the onward trio, 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, the grids, the form fields, the more cards, the
   footer, the sticky CTA. This file adds to that layer and never restates it.

   LOAD ORDER
   critical fallback <style> -> /folio.css -> /blueprint-guide-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.
   ========================================================== */

/* ---------------- hero ---------------- */
.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 not pinned (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;justify-content:center;
  min-height:100svh;background:var(--ink);
  padding:calc(var(--nav-h) + var(--nav-inset) + 40px) 0 48px}
.hero-stage::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at 52% 0%,rgba(76,141,255,.09),transparent 62%)}
/* margin-inline:auto on a flex item cancels the cross-axis stretch, so a .wrap inside a stage
   shrinks to its own content and the grid comes out narrow. */
.hero-stage>.wrap,.closer-stage>.wrap{width:100%}
.guide-hero-grid{position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center}
.hero-in{min-width:0;display:flex;flex-direction:column;align-items:flex-start;text-align:left}
/* 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:20px;max-width:14ch;font-size:clamp(34px,4.6vw,64px)}
.hero-lead{margin-top:22px;max-width:52ch;font-size:clamp(16px,1.4vw,18px)}
.hero-cta{margin-top:28px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}

/* The meta strip: four facts about the artefact, in the previous page's own words. */
.meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.meta span{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--dim);
  border:1px solid var(--line-2);border-radius:999px;padding:6px 11px}

/* The qualifying block, above the ask on every width: the page says who it is for before it
   asks anybody for an address. */
.who{border-top:1px solid var(--line-2);margin-top:32px;padding-top:22px}
.who p{font-size:14.5px;color:var(--muted);line-height:1.6;max-width:54ch}
.who p+p{margin-top:12px}
.who b{color:var(--text);font-weight:500}

/* ---------------- the depreciation chart ----------------
   This page's one bespoke device, and the reason it is markup rather than a picture: the whole
   argument is a shape, and a shape can be drawn as the reader arrives at it. Six lines on the
   folio frame, five falling and one rising, drawn from the act's own progress so the
   appreciating line lands last. --sc-p defaults to 1, so a browser that never runs the script,
   a capture tool and reduced motion all get the finished chart. */
.guide-chart-stage{min-width:0}
.chart{padding:22px;background:linear-gradient(180deg,var(--surface-2),var(--ink))}
.chart-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  flex-wrap:wrap;font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--dim);padding-bottom:16px;
  border-bottom:1px solid var(--line);margin-bottom:16px}
.chart svg{display:block;width:100%;height:auto}
.chart .ln{fill:none;stroke-width:1.5;stroke-linecap:round;
  stroke-dasharray:340px;stroke-dashoffset:calc(340px * (1 - var(--draw,1)))}
.chart .dep{stroke:rgba(244,241,234,.3)}
.chart .app{stroke:var(--blue);stroke-width:2}
/* The five falling lines are the ground: they are already there on the first painted frame,
   because the depreciation is the thing the reader already lives with, and because a chart that
   starts empty reads on the landing screen as a panel that failed to load. The index is the only
   line that writes itself, upward, across the pin: that is the claim, and it is the one thing on
   this page worth stopping for. It finishes at p = 0.72, well inside the 270px of pinned travel
   a 1.3 span buys, so nobody scrolls past a half-drawn argument. */
.chart .dep{--draw:1}
.chart .app{--draw:clamp(0,calc((var(--sc-p,1) - .06) / .66),1)}
.chart-key{display:flex;gap:22px;flex-wrap:wrap;margin-top:16px;padding-top:16px;
  border-top:1px solid var(--line)}
.chart-key span{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);
  font-size:10px;color:var(--muted)}
.chart-key i{width:14px;height:2px;border-radius:2px;flex:none}
.chart-key .kd{background:rgba(244,241,234,.3)}
.chart-key .ka{background:var(--blue)}
.guide-chart-stage .cap{text-align:center}

/* ---------------- 02 what is inside ----------------
   The seam after a pinned act is cut, not padded, and stated by id so the value survives the
   hero being demoted to flow on a phone or under reduced motion. */
#inside{padding-top:calc(var(--sec-pad) * .5)}
/* Six cards in two rows of the shared trio: the guide's own contents list, one item per card. */
.guide-inside .card{padding-bottom:26px}
.guide-inside h3{margin-top:14px}
.guide-inside .card>p{margin-top:10px}

/* ---------------- 03 the ask ---------------- */
.guide-grid{align-items:start}
.guide-terms{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:28px}
.ticks{margin-top:22px;display:flex;flex-direction:column;gap:12px;
  border-top:1px solid var(--line);padding-top:20px}
.ticks li{display:flex;gap:12px;font-size:15px;color:var(--text);line-height:1.5}
.ticks li::before{content:"";flex:none;width:14px;height:1px;margin-top:11px;background:var(--blue)}
.guide-terms .fine{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.guide-form{min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:20px;
  padding:28px;display:flex;flex-direction:column;gap:15px}
.guide-form .frow2{gap:15px}
.guide-form .guide-submit{margin-top:6px;width:100%;justify-content:center;min-height:48px}
.guide-form .fine{text-align:center}
/* The success state replaces the form in the same cell, exactly as the previous page did. */
.guide-done{background:var(--surface);border:1px solid var(--line);border-radius:20px;
  padding:44px 28px;text-align:center}
.guide-done h3{font-size:22px}
.guide-done p{color:var(--muted);font-size:14.5px;line-height:1.6;max-width:38ch;margin:10px auto 0}
#guide{padding-bottom:calc(var(--sec-pad) * .62)}

/* ---------------- 04 onward ---------------- */
.sec-more{padding-top:0}
.mcard h3 .price{font-family:var(--mono);font-size:15px;letter-spacing:.02em}

/* ---------------- 05 closer ---------------- */
/* clip, not hidden: an overflow:hidden ancestor turns into the scrollport a sticky stage
   measures itself against, and the pin stops engaging. */
.sec-closer{border-top:1px solid var(--line);overflow:clip}
/* The engine writes height:100svh on a pinned stage, so a closer of copy alone cannot fill it and
   centring left 213px of ink between the last line and the footer, plus the footer's own top pad
   on top of that. The close is bottom-set instead: it reads as the sign-off it is, and the footer
   starts 56px under the last line at every height. */
.closer-stage{display:flex;flex-direction:column;justify-content:flex-end;background:var(--ink);
  min-height:100svh;padding:calc(var(--nav-h) + var(--nav-inset) + 30px) 0 56px}
.closer-in{max-width:880px;margin:0 auto;text-align:center;display:flex;flex-direction:column;
  align-items:center}
.closer-in .display{margin-top:22px;font-size:clamp(30px,3.6vw,52px)}
.closer-in .lead{margin-top:20px;text-align:center;margin-left:auto;margin-right:auto}
.closer-in .inline-cta{margin-top:34px}

/* ---------------- motion ----------------
   The copy greets, then gets out of the chart'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) / .55),1) * -70px),0)}

/* 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 .hero-in,html.hv-static .hero-in{transform:none;transition:none}
html.no-js .chart .ln,html.hv-static .chart .ln{stroke-dashoffset:0}

/* ---------------- reduced motion ----------------
   Fewer and gentler, not zero: the engine keeps the opacity that carries comprehension and drops
   every position change. The chart is a drawing, not a position change, but a line that draws
   itself under the hand is motion by any reading, so it arrives finished. */
@media(prefers-reduced-motion:reduce){
  .hero-in{transform:none;transition:none}
  .chart .ln{stroke-dashoffset:0}
  .hero h1 .sc-split__i{animation:none}
}

/* ---------------- the landing ----------------
   A greet cue is already at full opacity when the act begins, so the engine has nothing to
   animate on the one screen every visitor sees. One CSS animation, played once, gives the hero
   its arrival; animation-fill-mode is backwards only, so the engine's inline values take over
   the instant it ends and scroll owns the element from then on. */
@keyframes bg-rise{from{opacity:0;transform:translate3d(0,112%,0)}}
@keyframes bg-greet{from{opacity:0;transform:translate3d(0,14px,0)}}
@media(prefers-reduced-motion:no-preference){
  .hero h1 .sc-split__i{animation:bg-rise 980ms var(--ease-out) backwards}
  .hero h1 .sc-split--line:nth-child(2) .sc-split__i{animation-delay:100ms}
  .hero h1 .sc-split--line:nth-child(3) .sc-split__i{animation-delay:200ms}
  .hero-in>[data-sc-cue]{animation:bg-greet 720ms var(--ease-out) backwards}
  .hero-in>h1[data-sc-cue]{animation:none}
  .hero-in>.eyebrow{animation-delay:40ms}
  .hero-in>.hero-lead{animation-delay:420ms}
  .hero-in>.hero-cta{animation-delay:530ms}
  .hero-in>.meta{animation-delay:620ms}
  .hero-in>.who{animation-delay:700ms}
}
html.no-js .hero-in>[data-sc-cue],html.hv-static .hero-in>[data-sc-cue],
html.no-js .hero h1 .sc-split__i,html.hv-static .hero h1 .sc-split__i{animation:none}

/* ---------------- responsive ---------------- */
@media(max-width:1120px){
  .guide-hero-grid{gap:36px}
  .guide-grid{gap:20px}
}
@media(max-width:940px){
  /* The pill's CTA is "Get the guide" here, not the page's full sentence, so it needs no
     shrinking; it stands down entirely below 760px through .nav-cta-long in folio.css. */
  .nav-right .btn{padding:0 13px}
}
@media(max-width:900px){
  /* The hero is flow here, so its progress is not a pin's progress and the drift would arrive
     half resolved. */
  .hero-in{transform:none}
  .guide-hero-grid{grid-template-columns:1fr;gap:34px;align-items:start}
  .hero-stage{min-height:0;justify-content:flex-start}
  .closer-stage{min-height:0}
}
@media(max-width:760px){
  .hero-stage{padding:calc(var(--nav-h) + var(--nav-inset) + 34px) 0 40px}
  .hero h1{margin-top:18px;max-width:none}
  .hero-lead{margin-top:16px}
  .hero-cta{margin-top:24px;width:100%}
  .hero-cta .btn{width:100%;justify-content:center;min-height:48px;white-space:normal;text-align:center;line-height:1.3;padding:10px 14px}
  .meta{margin-top:22px}
  .who{margin-top:26px;padding-top:18px}
  .chart{padding:16px}
  .guide-terms,.guide-form,.guide-done{padding:22px;border-radius:16px}
  .closer-stage{padding:calc(var(--nav-h) + var(--nav-inset) + 20px) 0 0}
  .closer-in .inline-cta{margin-top:28px}
  .inline-cta .btn,.hv-sticky .btn{white-space:normal;text-align:center;line-height:1.3;padding:10px 14px}
}

/* --- 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){
  .meta span,.tags span{font-size:11px}
  .who p,.guide-done p{font-size:15.5px}
  .ticks li{font-size:15.5px}
}