/* ============================================================
   LAUNCH7 — long-form page components
   Used by the six agent-*.html detail pages, service.html and
   notes.html. Loaded AFTER components.css.

   These pages predate the token system; this file replaces the
   old assets/agent.css and the inline <style> blocks in
   notes.html / service.html, keeping the original class names so
   the markup did not have to be rewritten line by line.

   Semantic tokens only. Same rules as components.css.
   ============================================================ */

/* ---------- page head ----------
   Was a full-bleed blue band with a 2.5px black rule. Now the same
   white page head every other page uses, with the spec row as a
   bordered stat strip rather than reversed-out type. */
.head{padding-block:var(--space-8) var(--space-7)}
.head .ix,
.head .eyebrow{
  display:block;
  font-family:var(--font-mono);font-size:var(--step-eyebrow);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-accent);
  margin-bottom:var(--space-4);
}
.head h1{max-width:20ch;margin-bottom:var(--space-5)}
.head .plain,
.head>.wrap>p:not(.ix):not(.eyebrow){
  font-size:var(--step-body-lg);color:var(--text-secondary);max-width:58ch;
}

.specrow{
  display:grid;gap:var(--space-5) var(--space-7);
  margin-top:var(--space-7);padding-top:var(--space-6);
  border-top:1px solid var(--border);
}
@media(min-width:760px){.specrow{grid-template-columns:repeat(4,1fr)}}
.specrow dt{
  font-family:var(--font-mono);font-size:var(--step-eyebrow);
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);
  margin-bottom:var(--space-2);
}
.specrow dd{font-size:var(--step-sm);color:var(--text-primary);line-height:1.4}

/* ---------- sections ---------- */
main{padding-block:var(--space-7) var(--space-8)}
section.blk{margin-bottom:var(--section-y)}
section.blk h2{margin-bottom:var(--space-4)}
section.blk p{max-width:65ch;color:var(--text-secondary);margin-top:var(--space-4)}
section.blk p strong{color:var(--text-primary)}
section.blk .lede{margin-top:var(--space-4)}

/* pull quote — was a 3px blue left rule, now a quiet oversized line */
.pull{
  border-left:3px solid var(--border-accent);
  padding:var(--space-1) 0 var(--space-1) var(--space-5);
  margin-block:var(--space-6);
  font-size:var(--step-body-lg);line-height:1.4;font-weight:600;
  max-width:52ch;color:var(--text-primary);
}

/* ---------- research callout ----------
   Third-party figures. Visually distinct from Launch7's own claims
   on purpose — that distinction is the point of the component. */
.research{
  background:var(--bg-tint);border:1px solid var(--border);
  border-radius:var(--radius-card);padding:var(--space-6);
  margin-top:var(--space-6);max-width:68ch;
}
.research .k{
  display:block;font-family:var(--font-mono);font-size:var(--step-eyebrow);
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-accent);
  margin-bottom:var(--space-4);
}
.research ul{display:grid;gap:var(--space-3)}
.research li{
  position:relative;padding-left:var(--space-5);
  color:var(--text-secondary);font-size:var(--step-sm);line-height:1.55;
}
.research li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:7px;height:7px;border-radius:50%;background:var(--text-accent);
}
.research li b{color:var(--text-primary)}
.research .src{
  font-family:var(--font-mono);font-size:var(--step-eyebrow);
  color:var(--text-muted);margin-top:var(--space-5);line-height:1.6;
}

/* ---------- two-column compare ---------- */
.two{display:grid;gap:var(--space-6);margin-top:var(--space-6)}
@media(min-width:820px){.two{grid-template-columns:1fr 1fr;gap:var(--space-8)}}
.two h3{
  font-family:var(--font-mono);font-size:var(--step-eyebrow);font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--text-muted);
  margin-bottom:var(--space-4);
}
.two ul{display:grid;gap:var(--space-3)}
.two li{
  position:relative;padding-left:var(--space-5);
  color:var(--text-secondary);line-height:1.55;font-size:var(--step-sm);
}
.two li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:7px;height:7px;border-radius:50%;background:var(--text-accent);
}

/* ---------- step list ----------
   dl.steps, not .steps — components.css owns ol.steps for the
   contact page. Two different components, two different elements. */
dl.steps{display:grid;margin-top:var(--space-6);border-top:1px solid var(--border)}
dl.steps>div{
  display:grid;gap:var(--space-1) var(--space-6);
  padding-block:var(--space-4);border-bottom:1px solid var(--border);
}
@media(min-width:700px){dl.steps>div{grid-template-columns:160px 1fr}}
dl.steps dt{
  font-family:var(--font-mono);font-size:var(--step-eyebrow);
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-accent);
  padding-top:.2em;
}
dl.steps dd{color:var(--text-secondary);max-width:62ch;font-size:var(--step-sm)}

/* ---------- calculator ---------- */
.calc{
  display:grid;gap:var(--space-6);
  background:var(--bg-surface);border:1px solid var(--border);
  border-radius:var(--radius-card);box-shadow:var(--shadow-ambient);
  padding:clamp(20px,3vw,32px);margin-top:var(--space-6);
}
@media(min-width:900px){.calc{grid-template-columns:.85fr 1.15fr;gap:var(--space-8)}}

.dial{margin-bottom:var(--space-5)}
.dial label{
  display:flex;justify-content:space-between;gap:var(--space-4);
  font-size:var(--step-sm);color:var(--text-secondary);margin-bottom:var(--space-2);
}
.dial output{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  color:var(--text-accent);font-weight:700;
}
.dial input[type=range]{
  width:100%;-webkit-appearance:none;appearance:none;
  height:28px;background:none;cursor:pointer;
}
.dial input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:var(--radius-pill);background:var(--border-strong)}
.dial input[type=range]::-moz-range-track{height:4px;border-radius:var(--radius-pill);background:var(--border-strong)}
.dial input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:22px;height:22px;border-radius:50%;
  background:var(--btn-primary-bg);border:3px solid var(--bg-surface);
  box-shadow:var(--shadow-ambient);margin-top:-9px;cursor:grab;
}
.dial input[type=range]::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;
  background:var(--btn-primary-bg);border:3px solid var(--bg-surface);
  box-shadow:var(--shadow-ambient);cursor:grab;
}

.chart-head{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:var(--space-4);flex-wrap:wrap;margin-bottom:var(--space-5);
  font-size:var(--step-sm);
}
.chart-head span{font-family:var(--font-mono);font-size:var(--step-xs);color:var(--text-muted)}
.bars{
  display:flex;align-items:flex-end;gap:var(--space-2);
  height:180px;border-bottom:1px solid var(--border-strong);
}
.bar{
  flex:1;height:0;position:relative;
  background:var(--btn-primary-bg);
  border-radius:var(--radius-chip) var(--radius-chip) 0 0;
  transition:height var(--dur-slow) var(--ease);
}
.bar:nth-child(2){transition-delay:.06s}
.bar:nth-child(3){transition-delay:.12s}
.bar:nth-child(4){transition-delay:.18s}
.bar:nth-child(5){transition-delay:.24s}
.bar:nth-child(6){transition-delay:.30s}
.bar em{
  position:absolute;top:-1.6rem;left:50%;transform:translateX(-50%);
  font-family:var(--font-mono);font-size:var(--step-eyebrow);font-style:normal;
  color:var(--text-secondary);white-space:nowrap;
}
.months{display:flex;gap:var(--space-2);margin-top:var(--space-2)}
.months span{flex:1;text-align:center;font-family:var(--font-mono);font-size:var(--step-eyebrow);color:var(--text-muted)}
.foot{font-size:var(--step-xs);color:var(--text-muted);margin-top:var(--space-4);line-height:1.6;max-width:64ch}
.foot strong{color:var(--text-primary)}
.nojs{font-size:var(--step-sm);color:var(--text-muted);font-family:var(--font-mono)}
.js .nojs{display:none}

/* ---------- field-note card ---------- */
.notecard{
  display:block;margin-top:var(--space-5);
  background:var(--bg-surface);border:1px solid var(--border);
  border-radius:var(--radius-card);box-shadow:var(--shadow-ambient);
  padding:var(--space-5) var(--space-6);color:var(--text-primary);
  transition:box-shadow var(--dur-base) var(--ease),transform var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease);
}
.notecard:hover{
  text-decoration:none;box-shadow:var(--shadow-lift);
  transform:translateY(-2px);border-color:var(--border-strong);
}
.notecard .k{
  display:block;font-family:var(--font-mono);font-size:var(--step-eyebrow);
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-accent);
  margin-bottom:var(--space-2);
}
.notecard b{display:block;font-size:var(--step-h3);line-height:1.25;letter-spacing:-.014em}
.notecard em{
  display:block;font-style:normal;font-family:var(--font-mono);
  font-size:var(--step-eyebrow);color:var(--text-muted);margin-top:var(--space-2);
}

/* ---------- the other agents ---------- */
.others{display:grid;gap:var(--space-3);margin-top:var(--space-5)}
@media(min-width:700px){.others{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.others{grid-template-columns:repeat(3,1fr)}}
.others a{
  display:block;min-height:64px;
  background:var(--bg-surface);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:var(--space-4) var(--space-5);
  color:var(--text-primary);
  transition:box-shadow var(--dur-base) var(--ease),transform var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease);
}
.others a:hover{
  text-decoration:none;box-shadow:var(--shadow-ambient);
  transform:translateY(-2px);border-color:var(--border-strong);
}
.others .n{font-family:var(--font-mono);font-size:var(--step-eyebrow);color:var(--text-accent)}
.others b{display:block;font-size:var(--step-sm);line-height:1.3;margin-top:var(--space-1)}

/* ---------- closing CTA ----------
   Was a white box with an 11px hard blue offset shadow. Now the
   same tinted band the rebuilt pages use. */
.endcta{
  background:var(--bg-tint);border:1px solid var(--border);
  border-radius:var(--radius-card);padding:clamp(32px,5vw,64px);
  margin-top:var(--section-y);
}
.endcta h2{margin-bottom:var(--space-4);max-width:22ch}
.endcta p{color:var(--text-secondary);max-width:58ch;margin-bottom:var(--space-6)}

/* ============================================================
   NOTES PAGE
   ============================================================ */

.index{
  background:var(--bg-surface);border:1px solid var(--border);
  border-radius:var(--radius-card);box-shadow:var(--shadow-ambient);
  overflow:hidden;margin-bottom:var(--section-y);
}
.index h2{
  font-size:var(--step-sm);padding:var(--space-4) var(--space-5);
  border-bottom:1px solid var(--border);background:var(--bg-tint);
}
.index ol{counter-reset:n}
.index li{counter-increment:n;border-bottom:1px solid var(--border)}
.index li:last-child{border-bottom:none}
.index a{
  display:flex;gap:var(--space-4);align-items:baseline;
  padding:var(--space-4) var(--space-5);color:var(--text-primary);
  transition:background var(--dur-fast) var(--ease);
}
.index a:hover{background:var(--bg-tint);text-decoration:none}
.index a::before{
  content:"0" counter(n);font-family:var(--font-mono);
  font-size:var(--step-xs);color:var(--text-accent);flex:none;
}
.index .t{font-weight:600;line-height:1.35}
.index .m{
  margin-left:auto;font-family:var(--font-mono);font-size:var(--step-eyebrow);
  color:var(--text-muted);white-space:nowrap;flex:none;
}

article.note{
  padding-top:var(--space-6);margin-bottom:var(--section-y);
  border-top:1px solid var(--border-strong);scroll-margin-top:96px;
}
article.note .kicker{
  display:block;font-family:var(--font-mono);font-size:var(--step-eyebrow);
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-accent);
  margin-bottom:var(--space-3);
}
article.note h2{max-width:24ch;margin-bottom:var(--space-2)}
article.note .meta{
  font-family:var(--font-mono);font-size:var(--step-eyebrow);
  color:var(--text-muted);margin-bottom:var(--space-6);
}
article.note p{max-width:65ch;margin-bottom:var(--space-4);color:var(--text-secondary)}
article.note p strong{color:var(--text-primary)}
article.note h3{margin:var(--space-6) 0 var(--space-3);max-width:60ch}
article.note ul{display:grid;gap:var(--space-3);max-width:65ch;margin-bottom:var(--space-4)}
article.note li{
  position:relative;padding-left:var(--space-5);
  color:var(--text-secondary);line-height:1.55;
}
article.note li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:7px;height:7px;border-radius:50%;background:var(--text-accent);
}

/* ============================================================
   AGENT STAGE — the "watch it work" animation
   One engine (assets/agent-scenes.js) drives all six agent pages;
   each page only supplies a scene script. This file describes the
   frame, the panes and the entrances — nothing agent-specific.

   Message and row shapes are NOT redefined here: the stage reuses
   .bub and .row from components.css, so a change to a chat bubble
   changes it everywhere it appears on the site.

   Accessibility contract, and it is not optional:
   · both panes are aria-hidden — the meaning lives in the visible
     .demo-note and in the dl.steps section directly below;
   · the whole stage is hidden without JS, because an empty frame
     is worse than no frame;
   · it auto-plays, so it ships a real pause control (SC 2.2.2);
   · under reduced-motion the engine paints one complete scene and
     stops, and every entrance below is switched off.
   ============================================================ */

html:not(.js) .stage{display:none}

.stage{
  margin-top:var(--space-6);
  background:var(--bg-surface);border:1px solid var(--border);
  border-radius:var(--radius-card);box-shadow:var(--shadow-ambient);
  overflow:hidden;
}

/* ---- head: what it is, the live meter, the pause control ---- */
.stage-head{
  display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap;
  padding:var(--space-4) var(--space-5);
  border-bottom:1px solid var(--border);background:var(--bg-tint);
}
.stage-head .status{flex:none}
.stage-head .status::before{animation:stage-pulse 2s var(--ease) infinite}

/* the one number the scene is about, counting as the scene runs */
.stage-meter{margin-left:auto;text-align:right;line-height:1.1}
.stage-meter b{
  display:block;font-family:var(--font-mono);font-weight:700;
  font-size:var(--step-body-lg);letter-spacing:-.03em;
  color:var(--text-accent);font-variant-numeric:tabular-nums;
}
.stage-meter span{
  display:block;font-family:var(--font-mono);font-size:var(--step-eyebrow);
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-top:2px;
}

.stage-toggle{
  flex:none;min-height:36px;padding:0 var(--space-4);
  background:var(--bg-surface);color:var(--text-secondary);cursor:pointer;
  border:1.5px solid var(--border-strong);border-radius:var(--radius-pill);
  font-family:var(--font-mono);font-size:var(--step-eyebrow);
  letter-spacing:.1em;text-transform:uppercase;
  transition:background var(--dur-base) var(--ease),color var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease);
}
.stage-toggle:hover{background:var(--btn-ghost-hover-bg);color:var(--text-primary);border-color:var(--text-muted)}

/* On a phone the three head items stack into three rows and the meter's
   right-alignment reads as a mistake. Two rows instead: label + control,
   then the number on its own line, left-aligned like everything else.
   The toggle is the only focusable thing here, so reordering visually
   cannot disturb focus order. */
@media(max-width:559px){
  .stage-head{gap:var(--space-3) var(--space-4)}
  .stage-head .status{order:1}
  .stage-toggle{order:2;margin-left:auto}
  .stage-meter{order:3;flex:1 0 100%;margin-left:0;text-align:left}
}

/* ---- body: a conversation pane and a systems pane ---- */
.stage-body{display:grid;gap:0}
@media(min-width:820px){
  .stage-body{grid-template-columns:1.05fr .95fr}
  .stage-side{border-left:1px solid var(--border);border-top:0}
}
.stage-chat,.stage-side{padding:var(--space-5);min-height:290px}
.stage-chat{display:flex;flex-direction:column;justify-content:flex-end;gap:var(--space-3)}
.stage-side{
  border-top:1px solid var(--border);background:var(--bg-tint);
  display:flex;flex-direction:column;gap:var(--space-2);
}
.stage-side .hd{
  font-family:var(--font-mono);font-size:var(--step-eyebrow);
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);
  margin-bottom:var(--space-2);
}
.stage-side .row{background:var(--bg-surface)}
.stage-side .row.hot{border-color:var(--border-accent);box-shadow:0 0 0 3px var(--bg-accent-soft)}

/* single-pane scenes (voice, outbound) let the chat run full width */
.stage[data-solo] .stage-body{grid-template-columns:1fr}
.stage[data-solo] .stage-side{display:none}

/* ---- the pieces the engine appends ---- */
.stage .bub,.stage .row,.stage-sys{animation:stage-pop var(--dur-slow) var(--ease) both}
.stage .bub{max-width:88%}
.stage-sys{
  align-self:center;text-align:center;
  padding:var(--space-2) var(--space-4);border-radius:var(--radius-pill);
  background:var(--bg-tint);border:1px solid var(--border);
  font-family:var(--font-mono);font-size:var(--step-eyebrow);
  letter-spacing:.06em;color:var(--text-muted);
}
.stage-typing{
  align-self:flex-start;display:flex;gap:4px;align-items:center;
  padding:var(--space-3) var(--space-4);border-radius:var(--radius-sm);
  background:var(--bg-tint);border-bottom-left-radius:4px;
  animation:stage-pop var(--dur-base) var(--ease) both;
}
.stage-typing i{width:6px;height:6px;border-radius:50%;background:var(--text-muted);opacity:.4;animation:wa-blink 1s infinite}
.stage-typing i:nth-child(2){animation-delay:.16s}
.stage-typing i:nth-child(3){animation-delay:.32s}

/* ---- foot: the caption that narrates, and scene progress ---- */
.stage-foot{
  display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap;
  padding:var(--space-4) var(--space-5);
  border-top:1px solid var(--border);
}
.stage-cap{
  flex:1;min-width:14rem;
  font-family:var(--font-mono);font-size:var(--step-eyebrow);
  letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);
  min-height:1.2em;
}
.stage-cap b{color:var(--text-accent);font-weight:700}
.stage-track{display:flex;gap:5px;flex:none}
.stage-track i{
  width:22px;height:4px;border-radius:var(--radius-pill);background:var(--border-strong);
  transition:background var(--dur-base) var(--ease);
}
.stage-track i.on{background:var(--text-accent)}

@keyframes stage-pop{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}
@keyframes stage-pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.35;transform:scale(.8)}
}

@media(prefers-reduced-motion:reduce){
  .bar,.notecard,.others a,.index a{transition:none}
  .stage .bub,.stage .row,.stage-sys,.stage-typing{animation:none}
  .stage-typing i{animation:none;opacity:.4}
  .stage-head .status::before{animation:none}
  .stage-track i{transition:none}
}

/* ============================================================
   TEARDOWN LANDING — teardown.html
   The destination behind the Instagram bio link and the nav's
   petite button. One column, one action, no navigation.
   Centred because the page is a hero with a single CTA; the form
   inside stays left-aligned, because labels and values always are.
   ============================================================ */
.td-page{min-height:100dvh;display:flex;flex-direction:column;background:var(--bg-page)}

.td-bar{
  display:flex;justify-content:center;
  padding:var(--space-5);
  border-bottom:1px solid var(--border);
}

.td-main{flex:1 0 auto;padding:var(--space-7) var(--space-5) var(--space-8)}

/* ~62ch at the 18px reading size — inside the 45–75 measure. */
.td-col{max-width:560px;margin-inline:auto}

.td-head{text-align:center}
.td-head h1{margin-top:var(--space-3)}
.td-head .lede{margin-top:var(--space-4);color:var(--text-secondary)}

.td-chips{
  display:flex;justify-content:center;flex-wrap:wrap;
  gap:var(--space-4) var(--space-6);
  margin-top:var(--space-6);
  padding-bottom:var(--space-6);
  border-bottom:1px solid var(--border);
}
.td-chips .chip{align-items:center;text-align:center}

.td-ticks{margin-top:var(--space-6)}
.td-card{margin-top:var(--space-6)}

.td-alt{
  margin-top:var(--space-6);
  text-align:center;font-size:var(--step-sm);color:var(--text-secondary);
}

.td-foot{
  display:grid;gap:var(--space-2);
  padding:var(--space-6) var(--space-5);
  border-top:1px solid var(--border);
  text-align:center;font-size:var(--step-xs);color:var(--text-muted);
}