/* Cutaway — the front surfaces (the landing page, js/landing.js). Loaded after css/app.css, whose tokens it uses.
 * One vertical scroll through a real system: the closed technical casing turns to glass as the page scrolls, live
 * traffic runs inside, numbered callouts name its parts. Paper white, charcoal at night; heavy Archivo display,
 * condensed uppercase labels; steel for links and balloons; red only on faults. No gradients, glows or cards outside
 * the machine (the masks below are the reveal's mechanics, not paint).
 *
 * Scroll-linked motion: js/landing.js writes one progress value per scrubbed element (--cut on .lp-run, --hp on the
 * paragraph), 0..1, from the scroll position. Everything here is derived from it with clamp(); nothing is timed.
 * Modes on .lp-run: .is-track (wide screens: the stage is pinned while about 200vh scroll by), .is-flow (narrower
 * screens: the reveal runs as the drawing rises through the screen), .is-static (reduced motion: open from the start). */

.lp-main { padding: 0; --gutter: clamp(16px, 4vw, 56px); }
.lp-main .page-meta a { font-weight: 600; }

/* ---------- type ---------- */
.lp-h1 { font-size: clamp(44px, 7vw, 92px); font-weight: 800; letter-spacing: -0.035em; line-height: .96; max-width: 8.6em; }
.lp-lede { margin: 22px 0 0; font-size: clamp(18px, 1.45vw, 20px); line-height: 1.45; color: var(--text-2); max-width: 38em; }
.lp-h2 { font-size: clamp(34px, 4.4vw, 60px); font-weight: 800; letter-spacing: -0.032em; line-height: 1; }
.lp-h3 { font-size: clamp(21px, 1.8vw, 25px); font-weight: 750; letter-spacing: -0.02em; line-height: 1.2; }

/* ---------- the large search (hero and "Find any idea"): the header's box, bigger ---------- */
.lp-main .search.lp-search { display: block; position: relative; flex: none; width: min(100%, 32rem); margin: 30px 0 0; z-index: 5; }
.lp-main .lp-search .search-input {
  height: 64px; padding: 0 24px 0 58px; font-size: 18px;
  background: var(--surface); border: 1px solid var(--border-strong);
}
.lp-main .lp-search .search-input:hover { border-color: var(--text-3); }
.lp-main .lp-search .search-input:focus { border-color: var(--link); box-shadow: 0 0 0 4px var(--accent-bg); }
.lp-main .lp-search .search-ic { left: 22px; color: var(--text-2); }
.lp-main .lp-search .search-ic svg { width: 22px; height: 22px; }
.lp-main .lp-search .search-kbd, .lp-main .lp-search .search-close { display: none; }
.lp-main .lp-search .search-pop { width: min(560px, 100%); top: calc(100% + 10px); }
.lp-tries { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin: 14px 0 0; padding-left: 4px; font-size: var(--fs-ui); color: var(--text-3); }
.lp-tries a { font-weight: 600; }
/* while the hero's search is on screen, the header's own box steps back (it returns once focused, or scrolled past) */
.topbar .search { transition: opacity .2s var(--ease-out); }
body.lp-hero-search .topbar .search:not(:focus-within) { opacity: 0; pointer-events: none; }

/* ---------- stops 1 and 2: the machine ---------- */
.lp-run { --cut: 0; position: relative; }
.lp-stage {
  position: relative; max-width: 1560px; margin: 0 auto;
  /* the drawing's height and width: about 60% of the screen's height, never more than 60% of its width (the map's
     plane is large: the more room it has, the less its names crowd; its empty top left corner leaves the lede room) */
  --fh: min(60svh, calc(60vw / var(--ar, 1.5)));
  --fw: calc(var(--fh) * var(--ar, 1.5));
}
.lp-fig { position: relative; margin: 0; aspect-ratio: var(--ar, 1.5); }
.lp-layer { position: absolute; inset: 0; }
.lp-layer svg.iso { width: 100%; height: 100%; max-width: none; }
/* the glass drawing's dots are on a canvas over it (dotsLayer: 'canvas'): the pair fills the layer */
.lp-layer .iso-stack { position: absolute; inset: 0; }
.lp-glass svg.iso-glass { border-radius: 16px; }

/* the reveal: a soft cut plane, parallel to the casing's short side, sweeps along its length; the technical drawing
   gives way behind it and the glass drawing of the same parts takes its place */
.lp-fig { --sw: clamp(0, (var(--cut) - .05) / .35, 1); }
.lp-glass {
  -webkit-mask-image: linear-gradient(150deg, var(--ink) calc(var(--sw) * 130% - 15%), transparent calc(var(--sw) * 130%));
  mask-image: linear-gradient(150deg, var(--ink) calc(var(--sw) * 130% - 15%), transparent calc(var(--sw) * 130%));
}
.lp-tech {
  -webkit-mask-image: linear-gradient(150deg, transparent calc(var(--sw) * 130% - 15%), var(--ink) calc(var(--sw) * 130%));
  mask-image: linear-gradient(150deg, transparent calc(var(--sw) * 130% - 15%), var(--ink) calc(var(--sw) * 130%));
}
.lp-run:not(.is-cutting) .lp-glass, .lp-run.is-glass .lp-tech { visibility: hidden; }
.lp-run.is-static .lp-glass { visibility: visible; -webkit-mask-image: none; mask-image: none; }
.lp-run.is-static .lp-tech { display: none; }

/* the closed casing: hidden lines show the domains, the boxes inside and the ducts between them, the section line A-A
   marks where the cut will run, and a title block lies on the lid */
.lp-tech svg.iso { overflow: visible; }
.lp-hidden { pointer-events: none; }
.lp-hidden-part, .lp-hidden-duct { fill: none; stroke: var(--ink); stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.lp-hidden-part { opacity: .42; }
.lp-hidden-duct { opacity: .26; stroke-dasharray: 3 3; }
.lp-hidden-zone { fill: none; stroke: var(--ink); stroke-width: 1; stroke-dasharray: 10 4; opacity: .3; vector-effect: non-scaling-stroke; }
.lp-hidden-zone.is-bnd { stroke-dasharray: 2 3; }
.lp-section { fill: none; stroke: var(--ink); stroke-width: 1; stroke-dasharray: 16 4 3 4; opacity: .55; vector-effect: non-scaling-stroke; }
.lp-section-end { stroke: var(--ink); stroke-width: 2; stroke-linecap: butt; vector-effect: non-scaling-stroke; }
.lp-section-head { fill: var(--ink); }
.lp-section-t { fill: var(--ink); font-family: var(--font-body); font-stretch: 75%; font-weight: 800; font-size: 15px; }
.lp-plate-box { fill: var(--paper); stroke: var(--ink); stroke-width: 1.2; }
.lp-plate-rule { stroke: var(--ink); stroke-width: .8; }
.lp-plate-t { fill: var(--ink); font-family: var(--font-body); font-stretch: 75%; font-weight: 700; font-size: 15px; letter-spacing: .16em; }
text.lp-plate-s { fill: var(--text-2); font-family: var(--font-body); font-stretch: 75%; font-weight: 600; font-size: 11.5px; letter-spacing: .12em; }

/* callouts draw in, in number order: the dot, the leader from the part outward, then the balloon */
.lp-fig .iso-callouts > g:nth-child(2) { --k: 1; } .lp-fig .iso-callouts > g:nth-child(3) { --k: 2; }
.lp-fig .iso-callouts > g:nth-child(4) { --k: 3; } .lp-fig .iso-callouts > g:nth-child(5) { --k: 4; }
.lp-fig .iso-callouts > g:nth-child(6) { --k: 5; } .lp-fig .iso-callouts > g:nth-child(7) { --k: 6; }
.lp-fig .iso-callout { --c: clamp(0, (var(--cut) - .44 - var(--k, 0) * .07) / .06, 1); }
.lp-fig .iso-leader { vector-effect: none; stroke-width: var(--lw, 1px); stroke-dasharray: 1 1; stroke-dashoffset: calc(var(--c) - 1); }
.lp-fig .iso-callout .iso-dot { opacity: clamp(0, var(--c) * 5, 1); }
.lp-fig .iso-balloon, .lp-fig .iso-num {
  --b: clamp(0, (var(--c) - .55) / .45, 1);
  opacity: var(--b); transform: scale(calc(.6 + .4 * var(--b))); transform-box: fill-box; transform-origin: center;
}

/* where the drawing is too small for its names (phones), the parts list names them: no names, counters or floor names */
.lp-fig.is-small .iso-lid, .lp-fig.is-small .iso-tag, .lp-fig.is-small .iso-zone-title { display: none; }

/* the cut: its title, the key and the numbered parts, each a link to its idea */
.lp-sub { margin: 12px 0 0; font-size: var(--fs-body-s); line-height: 1.5; color: var(--text-2); max-width: 36em; }
.lp-key { display: inline-flex; gap: 5px; margin-right: 8px; vertical-align: 1px; }
.lp-key i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.lp-key i.req { background: var(--gl-req); }
.lp-key i.res { background: var(--gl-res); }
.lp-parts { list-style: none; margin: 22px 0 0; padding: 0; border-top: 1px solid var(--border); }
.lp-parts li { border-bottom: 1px solid var(--border); }
.lp-parts li:nth-child(2) { --k: 1; } .lp-parts li:nth-child(3) { --k: 2; } .lp-parts li:nth-child(4) { --k: 3; }
.lp-parts li:nth-child(5) { --k: 4; } .lp-parts li:nth-child(6) { --k: 5; } .lp-parts li:nth-child(7) { --k: 6; }
.lp-part {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  min-height: 46px; padding: 6px 2px; color: var(--text);
}
.lp-part:hover { color: var(--text); text-decoration: none; }
.lp-num {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  border: 1.3px solid var(--steel); color: var(--steel); background: var(--paper);
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1;
  transition: background-color .15s, color .15s;
}
.lp-part:hover .lp-num, .lp-part:focus-visible .lp-num { background: var(--steel); color: var(--on-accent); }
.lp-part-l { font-size: var(--fs-body); font-weight: 650; letter-spacing: -0.01em; }
.lp-part-c { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); color: var(--text-3); transition: color .15s; }
.lp-part:hover .lp-part-c { color: var(--link); }
.lp-go { display: inline-grid; }
.lp-go svg { width: 14px; height: 14px; }
.lp-more { display: flex; flex-direction: column; gap: 6px; margin: 20px 0 0; }
.lp-more-link { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; min-height: 36px; font-weight: 700; }
.lp-more-link span { display: inline-grid; }
.lp-more-link svg { width: 16px; height: 16px; }
.lp-truth { font-size: var(--fs-micro); color: var(--text-3); }
.lp-cue { display: none; }

/* track: the stage is pinned under the header while the reveal scrolls by */
.lp-run.is-track { height: calc(100svh + 200vh); }
.lp-run.is-track .lp-stage { position: sticky; top: var(--topbar-h); height: calc(100svh - var(--topbar-h)); }
.lp-run.is-track .lp-hero { position: absolute; z-index: 2; left: var(--gutter); top: clamp(28px, 7svh, 76px); width: min(49rem, calc(100% - 2 * var(--gutter))); }
.lp-run.is-track .lp-fig { position: absolute; right: var(--gutter); bottom: max(6svh, 40px); width: var(--fw); }
.lp-run.is-track .lp-cut {
  position: absolute; z-index: 1; left: var(--gutter); top: clamp(28px, 7svh, 76px);
  width: min(30rem, calc(100% - var(--fw) - 2 * var(--gutter) - 32px));
}
.lp-run.is-track .search.lp-search { width: min(32rem, calc(min(100vw, 1560px) - var(--fw) * .7 - 2 * var(--gutter) - 56px)); }
.lp-run.is-track .lp-cut .lp-h2, .lp-run.is-static .lp-cut .lp-h2 { font-size: clamp(30px, 2.8vw, 40px); }
.lp-run.is-track .lp-cue {
  display: inline-flex; align-items: center; gap: 8px; position: absolute; left: var(--gutter); bottom: max(3svh, 22px);
  font-size: var(--fs-small); font-weight: 650; font-stretch: 85%; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3);
  opacity: calc(1 - clamp(0, var(--cut) / .05, 1));
}
.lp-cue span { display: inline-grid; }
.lp-cue svg { width: 16px; height: 16px; }
/* the hero steps back and lifts away as the cut begins; the parts list arrives where it stood */
.lp-run.is-track .lp-hero {
  --o: clamp(0, (var(--cut) - .03) / .13, 1);
  opacity: calc(1 - var(--o)); transform: translateY(calc(var(--o) * -28px)); filter: blur(calc(var(--o) * 5px));
}
.lp-run.is-track.is-past-hero .lp-hero { pointer-events: none; }
.lp-run.is-track .lp-cut { --i: clamp(0, (var(--cut) - .18) / .12, 1); opacity: var(--i); transform: translateY(calc((1 - var(--i)) * 24px)); }
.lp-run.is-track:not(.is-open) .lp-cut { pointer-events: none; }
.lp-run.is-track .lp-parts li { --c: clamp(0, (var(--cut) - .44 - var(--k, 0) * .07) / .06, 1); opacity: calc(.3 + .7 * var(--c)); }
.lp-run.is-track .lp-more { opacity: clamp(0, (var(--cut) - .9) / .06, 1); }

/* flow and static: the hero, the drawing, then the parts, one after another */
.lp-run.is-flow .lp-stage, .lp-run.is-static .lp-stage { padding: clamp(28px, 6vh, 64px) var(--gutter) 0; }
.lp-run.is-flow .lp-fig, .lp-run.is-static .lp-fig { width: min(100%, 980px); margin: 40px 0 0; }
.lp-run.is-flow .lp-cut, .lp-run.is-static .lp-cut { margin-top: 36px; max-width: 40rem; }
/* reduced motion on a wide screen: the copy and the parts beside the open drawing */
@media (min-width: 1024px) {
    /* the copy's column keeps the headline on two lines; the drawing takes what is left */
  .lp-run.is-static .lp-stage { display: grid; grid-template-columns: minmax(min(100%, 42rem), 1fr) minmax(0, var(--fw)); column-gap: 48px; align-items: start; }
  .lp-run.is-static .lp-hero { grid-column: 1; grid-row: 1; }
  .lp-run.is-static .lp-cut { grid-column: 1; grid-row: 2; }
  .lp-run.is-static .lp-fig { grid-column: 2; grid-row: 1 / span 2; width: 100%; margin: 0; align-self: center; }
}

/* ---------- the rest of the page ---------- */
.lp-rest { max-width: 1560px; margin: 0 auto; padding: 0 var(--gutter) 64px; }
.lp-rest > .site-foot { margin-top: clamp(96px, 12vh, 140px); }

/* stops 3 and 4: the book's paragraph beside the live card, then the three steps */
.lp-books-say { margin-top: clamp(112px, 16vh, 200px); }
.lp-run.is-track + .lp-rest .lp-books-say { margin-top: clamp(48px, 8vh, 112px); }
.lp-page { margin-top: 28px; padding: clamp(22px, 2.6vw, 34px) clamp(22px, 2.8vw, 38px); background: var(--wash); border-radius: 6px; }
.lp-text {
  position: relative; z-index: 0; margin: 0; max-width: 64ch;
  font-size: var(--fs-body-s); line-height: 1.6; color: var(--text-2); hyphens: auto;
}
.lp-mark {
  --m: clamp(0, (var(--hp, 0) - .1 - var(--k, 0) * .19) / .1, 1);
  position: relative; white-space: nowrap; background: none;
  color: color-mix(in srgb, var(--text) calc(var(--m) * 100%), var(--text-2));
}
.lp-mark::before {
  content: ''; position: absolute; z-index: -1; inset: -1px -4px; border-radius: 6px 6px 0 0;
  background: color-mix(in srgb, var(--steel) 26%, transparent); border-bottom: 2px solid var(--steel);
  transform: scaleX(var(--m)); transform-origin: left center;
}
.lp-turn { margin: 32px 0 0; font-size: clamp(21px, 1.9vw, 26px); font-weight: 650; letter-spacing: -0.018em; line-height: 1.25; max-width: 20em; color: var(--text); }
.lp-card { margin-top: 48px; }
.lp-card .card-title { font-size: clamp(24px, 2.2vw, 30px); }
.lp-card-wait { margin: 0; padding: 48px 0; font-size: var(--fs-small); color: var(--text-3); }
.lp-break { margin-top: 56px; }
.lp-steps { list-style: none; counter-reset: lp-step; margin: 20px 0 0; padding: 0; max-width: 40rem; }
.lp-steps li {
  counter-increment: lp-step; position: relative; padding: 16px 0 16px 46px; border-top: 1px solid var(--border);
  font-size: var(--fs-body); line-height: 1.55; color: var(--text-2);
}
.lp-steps li::before {
  content: counter(lp-step); position: absolute; left: 0; top: 15px;
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  border: 1.3px solid var(--steel); color: var(--steel); font-size: 13px; font-weight: 700;
}
.lp-steps li b { color: var(--text); font-weight: 650; }
/* each lit phrase lights its part of the live drawing; wide screens also draw its leader (js: bookStops) */
.lp-card .vz-node.lp-lit .vz-shape { stroke: var(--steel); stroke-width: 2.6; }
.lp-card .vz-box.lp-lit rect { stroke: var(--steel); stroke-width: 2; stroke-dasharray: none; }
.lp-card .vz-box.lp-lit text { fill: var(--steel); }
.lp-card g.lp-lit > path.vz-link { stroke: var(--steel); stroke-width: 3; }
.lp-card .vz-node .vz-shape, .lp-card .vz-box rect, .lp-card .vz-link { transition: stroke .25s var(--ease-out); }
.lp-leads, .lp-mk { display: none; }
.lp-mw { white-space: nowrap; }
@media (min-width: 1024px) {
  /* the last row takes the card's extra height, so the steps sit right under the page instead of below a void */
  .lp-books-say { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: auto auto 1fr; column-gap: clamp(40px, 5vw, 96px); align-items: start; }
  /* the claim, then its answer beside it: the paragraph faces the picture it turns into */
  .lp-pages { grid-column: 1; grid-row: 1 / span 2; }
  .lp-turn { grid-column: 2; grid-row: 1; align-self: end; margin: 0; padding-bottom: 6px; }
  .lp-card { grid-column: 2; grid-row: 2 / span 2; margin-top: 28px; position: sticky; top: calc(var(--topbar-h) + 28px); }
  .lp-break { grid-column: 1; grid-row: 3; align-self: start; }
  .lp-leads { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 3; }
  /* a leader is dashed and hairline, so where it ends on a link it never reads as part of the drawing */
  .lp-lead-line { fill: none; stroke: var(--steel); stroke-width: 1; stroke-dasharray: 4 3; }
  .lp-lead-dot { fill: var(--steel); }
  .lp-lead-ball { fill: var(--paper); stroke: var(--steel); stroke-width: 1.3; }
  .lp-lead-num { fill: var(--steel); font-family: var(--font-body); font-size: var(--fs-micro); font-weight: 700; font-variant-numeric: tabular-nums; }
  /* each phrase's number, in the line right after it: outlined until the phrase lights, then filled */
  .lp-mk {
    display: inline-grid; place-items: center; width: 17px; height: 17px; margin-left: 3px; vertical-align: 0; border-radius: 50%;
    border: 1.2px solid var(--border-strong); color: var(--text-3); background: none;
    font-size: var(--fs-micro); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; text-indent: 0;
    transition: background-color .2s var(--ease-out), border-color .2s var(--ease-out), color .2s var(--ease-out);
  }
  .lp-mk.is-on { border-color: var(--steel); background: var(--steel); color: var(--on-accent); }
}

/* stop 5: find any idea */
.lp-find { margin-top: clamp(112px, 16vh, 200px); }
/* each figure stays whole; the line wraps between them, and a separator that would end or start a line hides */
.lp-stats { display: flex; flex-wrap: wrap; align-items: baseline; row-gap: 4px; margin: 16px 0 0; font-size: clamp(17px, 1.4vw, 20px); color: var(--text-2); font-variant-numeric: tabular-nums; }
.lp-stats > span:not(.sep) { white-space: nowrap; }
.lp-main .sep.is-wrap { display: none; }
.lp-stats b { color: var(--text); font-weight: 750; }
.lp-stats .sep { margin: 0 10px; color: var(--text-3); }
.lp-main .search.lp-search-find { width: min(100%, 44rem); margin-top: 32px; }
.lp-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; max-width: 62rem; margin: 22px 0 0; padding: 0; }
.lp-chips .chip.tag { min-height: 38px; padding: 0 16px; font-size: var(--fs-ui); font-weight: 550; color: var(--text); border-color: var(--border-strong); }
.lp-chips .chip.tag:hover { text-decoration: none; color: var(--link); border-color: var(--link); }
.lp-find-links { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 26px 0 0; }
.lp-find-links a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font-weight: 700; }
.lp-find-links span { display: inline-grid; }
.lp-find-links svg { width: 16px; height: 16px; }

/* stop 6: the shelf */
.lp-shelf { margin-top: clamp(112px, 16vh, 200px); }
.lp-shelf .shelf-body { max-width: 1000px; }
.lp-shelf .shelf-list { margin-top: 22px; }
/* a long book's strip wraps instead of running past the row */
.lp-shelf .bs-part { flex-wrap: wrap; row-gap: 4px; }

/* no JavaScript: the promise and every way in */
.lp-noscript { max-width: 46rem; padding: 56px 24px; margin: 0 auto; font-family: var(--font-body); }
.lp-noscript h1 { font-size: clamp(40px, 8vw, 72px); font-weight: 800; letter-spacing: -0.035em; line-height: 1; }
.lp-noscript p, .lp-noscript li { color: var(--text-2); line-height: 1.6; }
.lp-noscript ul { padding-left: 20px; }
.lp-noscript li { margin: 6px 0; }

/* ---------- phones ---------- */
@media (max-width: 640px) {
  .lp-run.is-flow .lp-stage, .lp-run.is-static .lp-stage { padding-top: 32px; }
  .lp-lede { margin-top: 16px; }
  .lp-main .search.lp-search { margin-top: 24px; width: 100%; }
  .lp-main .lp-search .search-input { height: 60px; font-size: 17px; }
  /* the header search's phone overlay must not take the page's own boxes with it */
  body.search-open .lp-main .search.lp-search { position: relative; left: auto; right: auto; top: auto; z-index: 5; padding: 0; background: none; border: 0; box-shadow: none; }
  body.search-open .lp-main .lp-search .search-ic { left: 22px; top: 50%; }
  body.search-open .lp-main .lp-search .search-input { height: 60px; font-size: 17px; }
  .lp-main .lp-search .search-pop {
    position: absolute; left: 0; right: 0; width: auto; margin: 0; max-height: min(60svh, 460px);
    border: 1px solid var(--border); box-shadow: var(--shadow-pop);
  }
  .lp-run.is-flow .lp-fig, .lp-run.is-static .lp-fig { margin-top: 32px; }
  /* the drawing is a picture at this size (js/landing.js hides its names, .is-small): they live in the numbered list */
  .lp-plate-s { display: none; }
  .lp-glass svg.iso-glass { border-radius: 12px; }
  .lp-part { min-height: 48px; }
  .lp-page { margin-left: -16px; margin-right: -16px; border-radius: 0; }
  .lp-text { text-align: left; }
  .lp-stats .sep { margin: 0 6px; }
  .lp-chips .chip.tag { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-run .lp-hero, .lp-run .lp-cut { transform: none; filter: none; }
}