/* Landing interaction layer
   Touch targets, trace choreography, progressive disclosure, and the compact
   responsive states shared by the landing chapters. */
/* phone: the glass must never exceed its column — pre-formatted content
   scrolls inside the body instead of widening the window */
.hero-fold>*,.hero-terminal,.terminal-stack{min-width:0}
.lt-wrap,.lt-strip,.lt-window{max-width:100%;min-width:0}
@media (max-width:700px){
  .hero-kicker{white-space:normal;letter-spacing:.08em}
  .hero-h1,.site-hero-title{font-size:clamp(36px,11vw,64px)}
}

/* the command returns after the trace has earned it — same artifact as the
   hero, spanning both rails so it reads as the section's closing action */
.recipe-cta{margin-top:clamp(24px,3.8vh,36px);display:flex;flex-direction:column;gap:8px;max-width:min(46ch,100%)}
.recipe-cta .lab{color:var(--accent)}

/* tap targets: text links and controls meet the 44px floor on touch without
   shifting the visual layout (padding + negative margin trick) */
@media (pointer:coarse){
  .mastnav>a.lnk{padding:14px 4px;margin:-14px -4px}
  .hero-cmd-note a,.closing-links a,.closing-links .ta,.bigfoot .rail a{display:inline-block;padding:12px 4px;margin:-12px -4px}
  .mastnav .btn2.sm{min-height:40px}
}

/* the host list is a parameter value: it gets its own line as a whole,
   never splitting mid-list; the play URI is an artifact — it never breaks */
.trace-blank-list{display:block;width:fit-content;margin-top:3px}
.trace-foot .replay-uri .mono{overflow-wrap:normal;white-space:nowrap;font-size:clamp(10px,.82vw,12px)}

/* the @N legend: one plain sentence at the moment the first receipt appears */
.trace-legend{flex-basis:100%;margin:2px 0 0;font:500 12.5px/1.5 var(--font-editorial);color:color-mix(in srgb,var(--text-primary) 72%,transparent)}
.trace-legend b{font-weight:750}

/* while the mini-film runs, the slot holds a quiet loader: a dark square
   tile at card scale, a 5×5 dot matrix inside, one keyframe + a per-dot
   delay map (the spiral order lives in the markup). When the save lands the
   tile fades and the minted card grows out of the same spot. */
.breadth-mint-spin{width:min(100%,240px);aspect-ratio:1;
  display:grid;grid-template-columns:repeat(5,14px);grid-auto-rows:14px;gap:9px;place-content:center;
  transition:opacity .26s ease,transform .26s ease}
.breadth-mint-spin i{width:5px;height:5px;border-radius:50%;background:var(--text-primary);opacity:.14;
  place-self:center;animation:mint-dot 2s linear infinite}
.breadth-mint-spin.is-done{opacity:0;transform:scale(.92)}
@keyframes mint-dot{0%{opacity:.14}5%{opacity:1}16%{opacity:.14}100%{opacity:.14}}
@media (prefers-reduced-motion:reduce){.breadth-mint-spin i{animation:none;opacity:.4}}

/* the glass changes hands: creator-mode wears ember, recipient-mode wears
   sage. The accent is registered so the shift itself is visible (~.45s) —
   caret, asks, gates, receipts and badges all move together. */
@property --lt-accent{syntax:'<color>';inherits:true;initial-value:#DD9A76}
.lt-window{transition:--lt-accent .45s ease}
.lt-window.lt-recipient{--lt-accent:#8FC79B}

/* ————— unified trace: nouns printed, verbs animated, qualifiers folded.
   Rows land in a ~2.2s build when first seen; tap/click any row (every
   device, same gesture) folds its detail open in place; wires converge the
   receipts into @13 inside an in-panel gutter. ————— */
.trace-body{position:relative}
.trace-row.tr-open{cursor:pointer;padding-right:58px}
.trace-row.tr-open:hover{background:color-mix(in srgb,var(--text-primary) 4%,transparent)}
.trace-row.tr-open:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.trace-num{position:relative}
.trace-row.tr-open .trace-num::after{content:'+';position:absolute;left:0;top:15px;font:700 12px/1 var(--font-technical);opacity:.7}
.trace-row.tr-open.is-open .trace-num::after{content:'−'}
.tr-x{color:var(--text-tertiary);margin-right:2px}
.trace-mint{position:relative;z-index:2}
.trace-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s ease}
.trace-more.is-open{grid-template-rows:1fr}
.trace-more-in{overflow:hidden;margin:0 18px 0 calc(3.5ch + 14px + 18px);font:500 13.5px/1.55 var(--font-editorial);color:color-mix(in srgb,var(--text-primary) 84%,transparent)}
.trace-more.is-open .trace-more-in{padding:2px 58px 13px 0}
.trace-more-in b{font-weight:750}
.trace-rebuild{border:0;background:none;padding:0;font:inherit;letter-spacing:inherit;color:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.trace-rebuild:hover{color:var(--accent)}
.trace-foot-proof{display:flex;flex-direction:column;gap:7px;align-items:flex-end;justify-self:end}
.trace-foot-proof .lab{opacity:.7}
/* the build */
.trace-ledger.is-build .trace-row{animation:tr-in .3s ease both;animation-delay:calc((var(--tr) - 1)*.22s)}
.trace-ledger.is-build .trace-mint .trace-chip,.trace-ledger.is-build .trace-mint .trace-chip-fixed{animation:tr-pop .28s ease both;animation-delay:calc((var(--tr) - 1)*.22s + .15s)}
.trace-ledger.is-build .trace-foot{animation:tr-in .35s ease both;animation-delay:1.55s}
@keyframes tr-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes tr-pop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){}
@media (max-width:700px){
  .trace-row.tr-open{padding-right:12px}
  .trace-more-in{margin:0 12px 0 12px}
  .trace-more.is-open .trace-more-in{padding:2px 0 12px}
  .trace-foot-proof{align-items:flex-start}
}

/* the agent-working moment: while a step's lesson unfolds, a 3×3 dot
   matrix spins beside it and the text sweeps in wearing ember — reasoning,
   saving, querying — then settles to ink and the dots go quiet */
.tr-dots{display:inline-grid;grid-template-columns:repeat(3,5px);gap:2.5px;margin-right:9px;vertical-align:-3px;transition:opacity .4s ease .3s}
.tr-dots i{width:3.5px;height:3.5px;border-radius:50%;background:var(--accent);opacity:.15;animation:mint-dot 1.15s linear infinite}
.tr-dots i:nth-child(5){animation-delay:-1.15s}
.tr-dots i:nth-child(6){animation-delay:-1.02s}
.tr-dots i:nth-child(9){animation-delay:-.89s}
.tr-dots i:nth-child(8){animation-delay:-.77s}
.tr-dots i:nth-child(7){animation-delay:-.64s}
.tr-dots i:nth-child(4){animation-delay:-.51s}
.tr-dots i:nth-child(1){animation-delay:-.38s}
.tr-dots i:nth-child(2){animation-delay:-.26s}
.tr-dots i:nth-child(3){animation-delay:-.13s}
.trace-more .trace-more-in{display:flex;align-items:flex-start;gap:10px}
.trace-more .tr-dots{flex:0 0 auto;margin:5px 0 0}
.trace-more .tr-text{flex:1 1 auto;min-width:0}
.trace-more .tr-line{display:block}
.trace-more .tr-line+.tr-line{margin-top:3px}
.trace-more.is-live .trace-more-in{color:var(--accent)}
/* reasoning stream: each line sweeps in after the one before it settles */
.trace-more.is-live .tr-line{animation:tr-sweep .9s ease both;animation-delay:calc(var(--l)*var(--stag,.5s) + .15s)}
.trace-more.is-settled .trace-more-in{color:color-mix(in srgb,var(--text-primary) 84%,transparent);transition:color .5s ease}
.trace-more.is-settled .tr-dots{opacity:0}
@keyframes tr-sweep{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion:reduce){
  .tr-dots{display:none}
  .trace-more.is-live .tr-line{animation:none}
  .trace-more.is-live .trace-more-in{color:color-mix(in srgb,var(--text-primary) 84%,transparent)}
}

/* the hold made visible: while the tour teaches a step, the dots keep
   spinning and a story-style bar fills over the hold — the visitor can see
   the visual is still talking and when it will move on */
.trace-more-in{flex-wrap:wrap}
.tr-hold{display:none;flex-basis:100%;align-items:center;gap:9px;margin-top:10px}
.trace-more.is-touring .tr-hold{display:flex}
.tr-hold i{flex:1 1 auto;height:2px;background:color-mix(in srgb,var(--text-primary) 13%,transparent);position:relative;overflow:hidden;border-radius:1px}
.tr-hold i::after{content:'';position:absolute;inset:0;background:var(--accent);transform-origin:left center;transform:scaleX(0)}
.trace-more.is-touring.is-open .tr-hold i::after{animation:tr-fill var(--hold,9s) linear both}
.tr-hold b{font:700 8.5px/1 var(--font-technical);letter-spacing:.09em;color:color-mix(in srgb,var(--text-primary) 55%,transparent)}
/* during the tour the dots never sleep — the settle only quiets them on
   manual opens */
.trace-more.is-touring.is-settled .tr-dots{opacity:1}
@keyframes tr-fill{to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.tr-hold{display:none!important}}

/* the three gives — savings, sameness, sharing — sit inside the poster
   under the numbers, at full reading size: the value, not a footnote */
.gives-cells{margin:clamp(20px,3vh,30px) clamp(4px,1.5vw,20px) 0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,26px);padding-top:clamp(16px,2.2vh,22px);border-top:1px solid color-mix(in srgb,var(--text-primary) 16%,transparent)}
.gives-cell b{display:block;font:800 12px/1 var(--font-technical);letter-spacing:.1em;margin-bottom:6px}
.gives-cell span{font:500 15px/1.5 var(--font-editorial);color:color-mix(in srgb,var(--text-primary) 84%,transparent)}
@media (max-width:760px){.gives-cells{grid-template-columns:1fr;gap:14px}}

/* the team-scale math: arithmetic on the measured run, two stat cells */
.poster-team{margin:clamp(18px,2.6vh,26px) clamp(4px,1.5vw,20px) 0;padding-top:clamp(15px,2.2vh,22px);border-top:1px solid color-mix(in srgb,var(--text-primary) 16%,transparent)}
.poster-team>.lab{display:block;opacity:.65;margin-bottom:12px}
.poster-team-cells{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,34px);max-width:46ch}
.poster-team-cells i{display:block;font:700 9.5px/1 var(--font-technical);font-style:normal;letter-spacing:.1em;opacity:.6;margin-bottom:7px}
.poster-team-cells b{font:850 clamp(27px,2.7vw,40px)/1 var(--font-editorial);letter-spacing:-.02em}
.poster-team-cells small{font:700 11px/1 var(--font-technical);letter-spacing:.06em;margin-left:5px;opacity:.55}
.poster-team-cells .is-ember b{color:var(--accent)}
@media (max-width:560px){.poster-team-cells{grid-template-columns:1fr;gap:14px}}

/* smallest phones: one-line label rows learn to wrap instead of pushing
   past the edge */
@media (max-width:374px){
  .play-eyebrow{flex-wrap:wrap;row-gap:5px}
  .harness-mix{grid-template-columns:repeat(2,1fr)}
  .harness-mix span{white-space:normal}
}