/* ══════════════════════════════════════════════════════════════════════════
   supplier-sdr-kit.css — the step-through stage and its scenes.

   Two brands live on this page and they must never be confused for each other.
   AdQuick blue (--aq) is the campaign brain: the agent, the campaign card, the
   tool ledger. Demo Outdoor green (--sup) is the fictional supplier: the
   phone line, the website, the rep. Nothing borrows the other's ink.

   The stage is a fixed frame on desktop and a stack of sections under 900px.
   Both render the same scene markup, so every rule here is written for a
   scene that does not know which container it landed in.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* A DARK ROOM AND A LIT SCREEN.
     The page, the lab bar, the transport and the writing are dark, so the frame
     reads as a frame and the demo reads as something being shown. Inside the
     frame is product, and product sits on a light surface: cards on a black
     canvas look like a stylesheet failed to load, which is exactly what the
     first version of this looked like.

     The one exception is the cold open, which is a title card with no UI on it
     and stays dark, so the demo opens in the room and then turns the screen
     on. */
  --pit: #070A09;          /* the page around the frame                       */
  --stage-bg: #0D1412;     /* the canvas a scene sits on                      */
  --stage-ink: #EAF2EF;
  --stage-meta: #9DB0AA;
  --stage-dim: #6D817B;
  --stage-line: #1E2A26;
  --stage-soft: #121B18;

  --aq: #2B7FFF;
  --aq-soft: #EFF5FF;
  --sup: #1F6F5C;
  --sup-soft: #EEF6F3;
  --ink: #171717;
  --body: #262626;
  --meta: #737373;
  --dim: #A1A1A1;
  --line: #E5E5E5;
  --hair: #EFF0F2;
  --soft: #F7F7F8;
  --warn: #BB4D00;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --r: 12px;
}

*, *::before, *::after { box-sizing: border-box }
body {
  margin: 0; background: var(--pit); color: var(--stage-meta);
  font-family: Inter, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 28px }

/* ── page head ───────────────────────────────────────────────────────────── */
header.page { border-bottom: 1px solid var(--stage-line); padding: 30px 0 24px }
.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
           color: var(--dim); margin: 0 0 10px }
h1 { font-size: 26px; font-weight: 700; letter-spacing: -.022em; margin: 0 0 10px; line-height: 1.15;
     color: var(--stage-ink) }
.lede { font-size: 14px; line-height: 1.65; color: var(--stage-meta); max-width: 66ch; margin: 0 }
.meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px }
.tag { font-size: 11.5px; font-weight: 500; color: var(--stage-meta); background: var(--stage-soft);
       border: 1px solid var(--stage-line); border-radius: 999px; padding: 3px 9px }
.tag-live { color: #7FD8C0; background: rgba(127,216,192,.09); border-color: #24403A }

/* ── lab bar ─────────────────────────────────────────────────────────────────
   Lab chrome, not product chrome. It sits outside the stage frame and looks
   like a control strip so nobody reads a toggle as something a buyer sees. */
.lab { position: sticky; top: 0; z-index: 30; background: rgba(7,10,9,.92);
       backdrop-filter: blur(8px); border-bottom: 1px solid var(--stage-line) }
.lab-in { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 10px 0 }
.ctl { display: flex; align-items: center; gap: 8px; min-width: 0 }
.ctl-l { font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
         color: var(--stage-dim) }
.seg { display: inline-flex; background: var(--stage-soft); border-radius: 8px; padding: 2px; gap: 2px;
       border: 1px solid var(--stage-line) }
.seg button { font: inherit; font-size: 12px; font-weight: 600; color: var(--stage-meta);
              background: transparent; border: 0; border-radius: 6px; padding: 5px 10px;
              cursor: pointer; transition: background .12s, color .12s }
.seg button:hover { color: var(--stage-ink) }
.seg button[aria-pressed="true"] { background: #223029; color: var(--stage-ink) }
.seg button.aq[aria-pressed="true"] { color: var(--aq) }
.seg button.warn[aria-pressed="true"] { color: var(--warn) }
.lab-note { margin-left: auto; font-size: 11.5px; color: var(--stage-dim) }

/* ── stage ───────────────────────────────────────────────────────────────── */
main { padding: 26px 0 70px }

.stage {
  position: relative; border: 1px solid #1B2622; border-radius: 16px; background: #fff;
  overflow: hidden; height: 700px; box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
.stage-in { position: absolute; inset: 0; display: flex; flex-direction: column }

/* Watermark. Present on every screen, in both flows, and never on top of a
   control: bottom-right of the frame, above the scene, click-through. */
.mark {
  position: absolute; right: 12px; bottom: 11px; z-index: 12; pointer-events: none;
  font-family: var(--mono); font-size: 10px; letter-spacing: .04em; color: #9A9A9A;
  background: rgba(255,255,255,.86); border: 1px solid var(--line); border-radius: 999px;
  padding: 3px 9px;
}

/* ── the start gate ───────────────────────────────────────────────────────
   Presentation mode only. Every browser blocks audio until a gesture, so the
   choice is between opening silently and hoping, or asking once. A demo whose
   first ninety seconds are a muted phone call is a demo that failed. */
.gate { display: none; position: absolute; inset: 0; z-index: 20; border: 0; padding: 0;
        width: 100%; background: rgba(8,12,11,.72); backdrop-filter: blur(3px);
        cursor: pointer; font: inherit; color: #EAF3EF; align-items: center;
        justify-content: center }
body.gated .gate { display: flex }
/* The watermark is a white pill at z-index 12 and the gate scrim is a dark
   translucent blur at 20, so on the opening screen the pill showed through it
   as a grey smear that read as a rendering bug rather than as a mark. Nothing
   is being watermarked yet at that point — there is no scene behind the gate,
   only a title and a play button — so it waits for the first beat. */
body.gated .mark { display: none }
.gate-in { display: flex; flex-direction: column; align-items: center; gap: 11px }
.gate-play { width: 62px; height: 62px; border-radius: 999px; display: grid; place-items: center;
        background: #EAF3EF; color: #10261F; padding-left: 4px;
        transition: transform .18s ease, background .18s ease }
.gate:hover .gate-play { transform: scale(1.06); background: #fff }
.gate-t { font-size: 20px; font-weight: 650; letter-spacing: -.02em }
.gate-s { font-size: 12.5px; color: #9FB6AE }

/* ── progress and status ──────────────────────────────────────────────────
   Two readouts, because "is this playing?" should not be a question anyone
   answers by staring at the picture. The bar is where this beat is; the pill
   says the word. */
.bar-track { position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 13;
             background: #16211D }
.progress { display: block; height: 100%; width: 0; background: #7FD8C0;
            transition: width .12s linear }
.progress.held { background: var(--warn) }

.status { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px;
         color: var(--stage-meta) }
.status i { width: 7px; height: 7px; border-radius: 999px; background: var(--stage-dim) }
.status.on i { background: #16A34A; animation: pulse 1.6s infinite ease-in-out }
.status.off i { background: var(--warn) }
.status b { font-weight: 650; color: var(--stage-ink); letter-spacing: -.01em }
.status span { font-family: var(--mono); font-size: 10.5px; color: var(--stage-dim) }

/* The sound prompt. Bottom left of the frame, opposite the watermark, and
   gone for good once audio is live. */
.sound-hint { display: none; position: absolute; left: 12px; bottom: 11px; z-index: 12;
  align-items: center; gap: 7px; font-size: 11px; color: var(--meta);
  background: rgba(255,255,255,.9); border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 11px; pointer-events: none }
body.audio-locked .sound-hint { display: inline-flex }
.sound-hint i { width: 6px; height: 6px; border-radius: 99px; background: var(--sup);
  animation: pulse 1.6s infinite ease-in-out }

/* ── beat head ───────────────────────────────────────────────────────────── */
.beat-head { flex: 0 0 auto; padding: 16px 24px 13px; border-bottom: 1px solid var(--hair) }
.beat-kicker { display: flex; align-items: center; gap: 8px; margin: 0 0 7px }
.beat-id { font-family: var(--mono); font-size: 10.5px; font-weight: 600; color: var(--aq);
           background: var(--aq-soft); border-radius: 5px; padding: 2px 6px }
.beat-chapter { font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
                color: var(--dim) }
.beat-title { font-size: 19px; font-weight: 650; letter-spacing: -.018em; color: var(--ink);
             margin: 0 }
.beat-line { font-size: 13.5px; line-height: 1.55; color: var(--meta); margin: 6px 0 0;
            max-width: 75% }

/* ── scene shell ─────────────────────────────────────────────────────────── */
.scene { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 18px 24px 26px;
         background: linear-gradient(180deg, #FAFBFC, #fff 160px) }
/* The cold open carries no product, so it stays in the dark with the room. */
.scene.dark { background: var(--stage-bg) }

.cols { display: grid; gap: 20px; align-items: start }
.cols.c2 { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr) }
.cols.c2-wide { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr) }

.card-slot { display: flex; flex-direction: column; gap: 9px }
.slot-h { display: flex; align-items: center; gap: 8px; padding: 0 2px }
.slot-h .t { font-size: 12px; font-weight: 650; color: var(--ink); letter-spacing: -.01em }
.slot-h .r { margin-left: auto; font-size: 11px; color: var(--dim); font-family: var(--mono) }
.panel { border: 1px solid var(--line); border-radius: var(--r); background: #fff; overflow: hidden }

/* The player's reveal. Everything it brings in starts here and lands with the
   sound that goes with it. */
.rev { opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .3s ease }
.rev.in { opacity: 1; transform: none }
/* The hop between two architecture boxes has no height to translate. */
.hop.rev { transform: none }
.pk-row { opacity: .18; transition: opacity .18s ease }
.pk-row.in { opacity: 1 }
.wrow.rev { transform: none; transition: opacity .25s ease }
.panel-h { display: flex; align-items: center; gap: 8px; padding: 10px 13px;
           border-bottom: 1px solid var(--hair); background: #FCFCFD }
.panel-h .t { font-size: 12px; font-weight: 650; color: var(--ink); letter-spacing: -.01em }
.panel-h .r { margin-left: auto; font-size: 11px; color: var(--dim); font-family: var(--mono) }
.panel-b { padding: 12px }
.panel-b.tight { padding: 9px }

/* ── phone scene ─────────────────────────────────────────────────────────── */
.phone { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #fff }
.phone-bar { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #10261F;
             color: #EAF3EF }
.phone-bar .who { min-width: 0 }
.phone-bar .n { font-size: 13px; font-weight: 600; letter-spacing: -.01em }
.phone-bar .s { font-size: 11px; color: #9FC2B6; margin-top: 2px; font-variant-numeric: tabular-nums }
.phone-bar .state { margin-left: auto; display: flex; align-items: center; gap: 7px;
                    font-size: 11px; font-family: var(--mono); color: #9FC2B6 }
.dotlive { width: 7px; height: 7px; border-radius: 999px; background: #4ADE80 }
.dotlive.ring { background: #FACC15; animation: pulse 1.1s infinite ease-in-out }
.dotlive.ended { background: #7A8F88 }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

/* The silent waveform. v1 has no audio, so the bars are a visual stand-in for
   a live line and never claim to be a real signal. */
.wave { display: flex; align-items: center; justify-content: center; gap: 3px; height: 34px;
        padding: 0 14px; background: #16332A }
.wave i { display: block; width: 3px; border-radius: 99px; background: #3E7A69;
          animation: bob 1.2s infinite ease-in-out }
.wave.off i { animation: none; opacity: .4; height: 4px !important }
.wave.on i { opacity: 1 }
.wave.on.agent i { background: #5FA893 }
.wave.on.caller i { background: #7E8F8A }
/* Nobody is speaking but the line is open: the bars idle low rather than
   freezing, because a frozen waveform reads as a dropped call. */
.wave:not(.off):not(.on) i { animation-duration: 2.4s; opacity: .55 }
@keyframes bob { 0%,100% { transform: scaleY(.45) } 50% { transform: scaleY(1) } }

.turns { padding: 13px 14px; display: flex; flex-direction: column; gap: 11px;
          max-height: 330px; overflow: auto; scroll-behavior: smooth }
.turns > * { flex: 0 0 auto }
.turns .idle { padding: 6px 0 2px }
.turn { display: flex; gap: 9px; align-items: flex-start }
.turn .av { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 999px; display: grid;
            place-items: center; font-size: 9.5px; font-weight: 700; letter-spacing: .02em }
.turn.agent .av { background: var(--sup-soft); color: var(--sup) }
.turn.caller .av { background: var(--soft); color: var(--meta) }
/* A line arrives, it does not appear. 90ms of travel is the difference
   between a transcript and a slide. */
.turn { animation: rise .22s cubic-bezier(.2,.7,.3,1) both }
@keyframes rise { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
.turn .say { font-size: 13.5px; line-height: 1.55; color: var(--body); min-width: 0 }
/* The line currently coming out of the speaker. Quiet: a caption that shouts
   is a caption the room reads instead of listening. */
.turn.now .say { color: var(--ink) }
.turn.now .av { box-shadow: 0 0 0 3px rgba(31,111,92,.14) }
.turn.caller.now .av { box-shadow: 0 0 0 3px rgba(115,115,115,.16) }
.turn .say b { font-weight: 600; color: var(--ink) }
.turn.agent .say { color: var(--ink) }
.cap { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
       color: var(--dim); margin: 0 0 3px }
.eng .cap { color: var(--dim) }

/* ── detail chips ────────────────────────────────────────────────────────── */
.chips { display: flex; flex-direction: column; gap: 7px }
.chip { display: flex; align-items: baseline; gap: 9px; padding: 8px 10px; border-radius: 9px;
        border: 1px solid var(--line); background: #fff }
.chip .k { flex: 0 0 auto; width: 74px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
           text-transform: uppercase; color: var(--dim) }
.chip .v { font-size: 13px; font-weight: 550; color: var(--ink); letter-spacing: -.01em }
.chip.pending { border-style: dashed; background: #FCFCFD }
.chip.pending .v { color: var(--dim); font-weight: 400 }
.chip.fresh { border-color: #BBD8C8; background: var(--sup-soft); animation: land .5s ease both }
@keyframes land { 0% { transform: translateX(5px); opacity: .5 } 100% { transform: none; opacity: 1 } }
.chip.fresh .v { color: var(--sup) }

/* ── packet / ledger ─────────────────────────────────────────────────────── */
/* A payload rendered as tidy label and value pairs is a design of a payload.
   Dark ground, line numbers, quotes, and a cursor still blinking after the
   last field lands is the thing itself, which is the only reason to show it. */
.term { border: 1px solid #16211D; border-radius: var(--r); overflow: hidden; background: #0C1512;
        box-shadow: 0 1px 2px rgba(12,21,18,.2) }
.term-h { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: #101A17;
        border-bottom: 1px solid #1B2621 }
.term-h i.on { width: 7px; height: 7px; border-radius: 999px; background: #4ADE80;
        animation: pulse 2.2s infinite ease-in-out }
.term-h .t { font-family: var(--mono); font-size: 11px; color: #CFE3DC }
.term-h .r { margin-left: auto; font-family: var(--mono); font-size: 10px; color: #5E7A71 }
.term-b { padding: 11px 12px 13px; font-family: var(--mono); font-size: 11.5px; line-height: 1.75 }
.term-b .pk-row { display: flex; gap: 10px; white-space: nowrap }
.term-b .ln { display: inline-block; width: 16px; color: #33473F; text-align: right;
        flex: 0 0 auto; user-select: none }
.term-b .k { color: #6FA898 }
.term-b .p { color: #43594F }
.term-b .v { color: #D9E7E2 }
.term-b .num { color: #E0B872 }
.term-b .hl { color: #7FD8C0; font-weight: 600; text-shadow: 0 0 14px rgba(127,216,192,.35) }
.term-b .brace .p { color: #5E7A71 }
.cursor { display: inline-block; width: 7px; height: 13px; margin-left: 6px; background: #7FD8C0;
        vertical-align: -2px; animation: caret 1.05s steps(1) infinite }
@keyframes caret { 0%, 55% { opacity: 1 } 56%, 100% { opacity: 0 } }

/* The hop between the two ends is a network call, so it is drawn as a dashed
   run rather than a confident solid arrow. */
.flow-arrow.wire { position: relative; height: 38px }
.flow-arrow.wire::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
        border-left: 1px dashed #C9CDD4 }
.flow-arrow.wire svg { position: relative; transform: rotate(90deg); background: #FCFCFD;
        padding: 4px 0 }

.flow { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px }
.flow-arrow { display: grid; place-items: center; color: var(--dim) }
.node { border: 1px solid var(--line); border-radius: var(--r); padding: 12px 13px; background: #fff }
.node .nt { font-size: 12.5px; font-weight: 650; color: var(--ink); letter-spacing: -.01em }
.node .ns { font-size: 11.5px; color: var(--meta); margin-top: 3px; line-height: 1.5 }
.node.aq { border-color: #D6E6FF; background: var(--aq-soft) }
.node.aq .nt { color: var(--aq) }
.node.sup { border-color: #CFE5DC; background: var(--sup-soft) }
.node.sup .nt { color: var(--sup) }

.ledger { display: flex; flex-direction: column; gap: 5px }
/* The quote's ledger is a flash, not an encyclopedia: names only, wrapped into
   as few rows as the width allows. */
.ledger.flash { flex-direction: row; flex-wrap: wrap; gap: 5px }
.ledger.flash .tool { padding: 4px 8px }
.tool { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11.5px;
        color: var(--meta); padding: 5px 8px; border-radius: 7px; background: var(--soft) }
.tool .nm { color: var(--ink); font-weight: 600 }
.tool .rs { margin-left: auto; color: var(--meta); font-family: Inter, sans-serif; font-size: 11px }
.tool.done { background: var(--aq-soft); color: #2F5FA8 }
.tool.done .nm { color: var(--aq) }

/* Working rows, the agent narrating itself while it builds. */
.work { display: flex; flex-direction: column; gap: 7px }
.wrow { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--meta) }
.wrow .wt { min-width: 0 }
.wrow .lat { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--dim);
        font-variant-numeric: tabular-nums }
.panel-h .r { font-family: var(--mono) }
.wrow .ic { flex: 0 0 auto; width: 16px; height: 16px; color: var(--aq) }
.wrow.done { color: var(--body) }
.wrow.now { color: var(--ink); font-weight: 550 }
.wrow.now .ic { animation: spin 1.1s linear infinite }
@keyframes spin { to { transform: rotate(360deg) } }

/* ── outbound ────────────────────────────────────────────────────────────── */
.mailhead { display: flex; flex-direction: column; gap: 3px; padding: 11px 13px;
            border-bottom: 1px solid var(--hair); background: #FCFCFD }
.mailhead .row { display: flex; gap: 8px; font-size: 11.5px; color: var(--meta) }
.mailhead .row .k { width: 44px; color: var(--dim) }
.mailhead .row .v { color: var(--body) }
.mailhead .sub { font-size: 13px; font-weight: 650; color: var(--ink); margin-top: 5px;
                 letter-spacing: -.01em }
.mailbody { padding: 13px; font-size: 13px; line-height: 1.62; color: var(--body) }
.mailbody p { margin: 0 0 10px }
.mailbody p:last-child { margin: 0 }
.btn-link { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600;
            color: #fff; background: var(--aq); border-radius: 8px; padding: 8px 13px;
            text-decoration: none }

.sms { padding: 14px; display: flex; flex-direction: column; gap: 9px; background: #FBFBFC }
.sms .from { font-size: 11px; color: var(--dim); text-align: center; font-family: var(--mono) }
.bubble { align-self: flex-start; max-width: 86%; background: #EDEDEF; color: var(--body);
          border-radius: 16px 16px 16px 5px; padding: 10px 13px; font-size: 13px; line-height: 1.5 }
.bubble a { color: var(--aq); font-weight: 600; text-decoration: none }

/* ── website scene ───────────────────────────────────────────────────────
   Chapter B has to read as a supplier's own website with an embed on it, not
   as a diagram of one. Three things carry that: browser chrome with a real
   tab and a real URL, a page tall enough to run off the bottom edge, and the
   widget sitting INSIDE the page, bottom right, over the content, where every
   one of these actually lives. */
.browser { position: relative; height: 100%; min-height: 0; display: flex; flex-direction: column;
           border: 1px solid #D8DCE2; border-radius: 12px; overflow: hidden; background: #fff;
           box-shadow: 0 1px 3px rgba(23,23,23,.06) }

.br-bar { display: flex; align-items: flex-end; gap: 10px; padding: 7px 11px 0; background: #E8EAEE;
          border-bottom: 1px solid #D8DCE2 }
.br-dots { display: flex; gap: 6px; padding-bottom: 8px }
.br-dots i { width: 10px; height: 10px; border-radius: 999px; background: #C9CDD4 }
.br-dots i:nth-child(1) { background: #FF5F57 }
.br-dots i:nth-child(2) { background: #FEBC2E }
.br-dots i:nth-child(3) { background: #28C840 }
.br-tab { display: flex; align-items: center; gap: 7px; max-width: 290px; padding: 7px 10px;
          background: #fff; border-radius: 8px 8px 0 0; font-size: 11.5px; color: #3F3F46;
          white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.br-tab .fav { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 3px; background: var(--sup) }
.br-tab .x { margin-left: 4px; color: #A1A1A1; font-style: normal }
.br-new { padding-bottom: 7px; color: #8A9099; font-size: 14px }

.br-url { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #fff;
          border-bottom: 1px solid #E8EAEE }
.br-ctl { display: flex; align-items: center; gap: 6px; color: #9AA0A8 }
.br-ctl.right { margin-left: 0 }
.br-ctl .avatar { width: 19px; height: 19px; border-radius: 999px; background: var(--sup);
          color: #fff; font-size: 9.5px; font-style: normal; display: grid; place-items: center }
.br-field { flex: 1; display: flex; align-items: center; gap: 7px; background: #F1F3F5;
          border-radius: 999px; padding: 5px 12px; font-size: 11.5px; color: #71767E;
          font-family: var(--mono) }
.br-field .lk { color: #6B7280 }
.br-field .u-host { color: #262626 }

/* ── the page ── */
.browser .page { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden;
          background: #fff }
.browser .page-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 46px;
          pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,0), #fff) }

.site-nav { display: flex; align-items: center; gap: 22px; padding: 13px 20px;
          border-bottom: 1px solid var(--hair) }
.site-nav .brand { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 700;
          color: #10261F; letter-spacing: -.02em }
.site-nav .brand i { width: 16px; height: 16px; border-radius: 4px; background: var(--sup) }
.site-nav .links { display: flex; gap: 18px }
.site-nav a { font-size: 12.5px; color: #55635E; text-decoration: none }
.site-nav .nav-cta { margin-left: auto; font-size: 12px; font-weight: 600; color: #fff;
          background: var(--sup); border-radius: 7px; padding: 6px 12px }

.site-hero { display: flex; flex-direction: column; gap: 13px; padding: 20px 20px 17px;
          background: linear-gradient(165deg, var(--sup-soft) 10%, #fff 92%) }
.hero-copy { min-width: 0; max-width: 60% }
.hero-copy .eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
          color: var(--sup); margin: 0 0 8px; display: block }
.hero-copy h3 { font-size: 22px; font-weight: 700; letter-spacing: -.028em; color: #10261F;
          margin: 0 0 8px; max-width: 18ch; line-height: 1.12 }
.hero-copy p { font-size: 12.5px; color: #4A5D57; margin: 0 0 12px; max-width: 46ch; line-height: 1.55 }
.hero-cta { display: flex; gap: 8px }
.btn-fill { font-size: 12px; font-weight: 600; color: #fff; background: #10261F; border-radius: 8px;
          padding: 8px 14px }
.btn-ghost { font-size: 12px; font-weight: 600; color: #10261F; background: #fff;
          border: 1px solid #CFE0DA; border-radius: 8px; padding: 8px 14px }
.hero-stats { display: flex; gap: 28px }
.hero-stats div { display: flex; flex-direction: column; gap: 2px }
.hero-stats b { font-size: 17px; font-weight: 700; color: #10261F; letter-spacing: -.02em }
.hero-stats span { font-size: 10.5px; color: #6B7C77 }

.site-sec { padding: 15px 20px 0 }
.sec-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 11px }
.sec-h .t { font-size: 14px; font-weight: 650; color: var(--ink); letter-spacing: -.015em }
.sec-h .r { font-size: 11.5px; color: var(--dim) }
.site-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px }
.site-card { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff }
.site-card .ph { position: relative; height: 58px }
.site-card .ph0 { background: linear-gradient(145deg, #CBD9D4, #EDF2F0) }
.site-card .ph1 { background: linear-gradient(145deg, #D3DCE6, #EFF2F5) }
.site-card .ph2 { background: linear-gradient(145deg, #DCD8CE, #F2F0EB) }
.site-card .ph3 { background: linear-gradient(145deg, #CFDAD6, #EEF2F1) }
.site-card .tag-live { position: absolute; left: 7px; top: 7px; font-size: 9.5px; font-weight: 600;
          color: var(--sup); background: rgba(255,255,255,.92); border: 0; border-radius: 999px;
          padding: 2px 7px }
.site-card .cp { display: flex; flex-direction: column; gap: 2px; padding: 9px 10px 11px }
.site-card .cp .n { font-size: 12px; font-weight: 600; color: var(--ink) }
.site-card .cp .m { font-size: 10.5px; color: var(--meta) }
.site-card .cp .i { font-size: 10.5px; color: var(--sup); font-weight: 600 }

.site-strip { display: flex; align-items: center; gap: 18px; padding: 18px 20px 26px;
          font-size: 11px; color: var(--dim) }
.site-strip .logos { display: flex; gap: 14px }
.site-strip .logos i { width: 46px; height: 11px; border-radius: 3px; background: #E9EBEE }

/* ── the embed ── */
.widget { position: absolute; right: 16px; bottom: 16px; width: 330px; z-index: 5;
          display: flex; flex-direction: column; border-radius: 13px; overflow: hidden;
          background: #fff; border: 1px solid #D9E3DF;
          box-shadow: 0 18px 44px rgba(16,38,31,.22), 0 2px 6px rgba(16,38,31,.1) }
.widget-h { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--sup);
          color: #EAF3EF }
.widget-h i.on { width: 7px; height: 7px; border-radius: 999px; background: #7FD8C0 }
.widget-h .n { font-size: 12.5px; font-weight: 650 }
.widget-h .s { font-size: 10px; color: #B8D5CA; margin-left: auto; font-family: var(--mono) }
.widget-h .min { color: #B8D5CA; font-size: 13px; line-height: 1 }
.widget-b { display: flex; flex-direction: column; gap: 8px; padding: 11px; background: #FBFCFC;
          max-height: 268px; overflow: auto; scroll-behavior: smooth }
.widget-b > * { flex: 0 0 auto }
.wmsg { max-width: 88%; font-size: 12.5px; line-height: 1.5; border-radius: 12px; padding: 8px 10px;
        animation: rise .2s cubic-bezier(.2,.7,.3,1) both }
.wmsg.bot { align-self: flex-start; background: #fff; border: 1px solid var(--line); color: var(--body) }
.wmsg.user { align-self: flex-end; background: var(--sup); color: #F2F8F6 }
.wmsg.typing { display: inline-flex; gap: 4px; align-items: center; padding: 10px 12px }
.wmsg.typing i { width: 5px; height: 5px; border-radius: 99px; background: #B6BDBA;
                 animation: blink 1.1s infinite ease-in-out }
.wmsg.typing i:nth-child(2) { animation-delay: .18s }
.wmsg.typing i:nth-child(3) { animation-delay: .36s }
@keyframes blink { 0%, 100% { opacity: .25 } 50% { opacity: 1 } }

/* The agent answers with artifacts. A quote is not a sentence with a number
   in it, and a hold is a receipt. */
.wcard { align-self: flex-start; width: 100%; border: 1px solid #CFE0DA; border-radius: 11px;
         overflow: hidden; background: #fff; animation: rise .24s cubic-bezier(.2,.7,.3,1) both }
.wcard-h { display: flex; align-items: baseline; padding: 7px 10px; background: var(--sup-soft);
         font-size: 11px; font-weight: 650; color: var(--sup) }
.wcard-h span { margin-left: auto; font-family: var(--mono); font-size: 9.5px; color: #6E9186;
         font-weight: 400 }
.wcard-b { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 10px }
.wcard-b.col { flex-direction: column; gap: 3px; align-items: flex-start }
.wcard-b .big { font-size: 21px; font-weight: 700; letter-spacing: -.03em; color: var(--ink);
         font-variant-numeric: tabular-nums }
.wcard-b .sm { font-size: 11px; color: var(--meta) }
.wcard-b .ok { color: var(--sup) }
.wcard-b .t { font-size: 12.5px; font-weight: 600; color: var(--ink) }
.wcard-b .s { font-size: 11px; color: var(--meta); line-height: 1.45 }
/* Provenance by default, tool names only for the overlay. Four function names
   on a buyer's quote is an answer to a question they did not ask. */
.wcard-f { padding: 0 10px 10px }
.wcard-f .prov { display: block; font-size: 10.5px; line-height: 1.45; color: var(--dim) }
.wcard-f .chips { display: none; margin-top: 8px }
body.eng-on .wcard-f .chips { display: block }
body.eng-on .wcard-f .prov { margin-bottom: 2px }
.wcard.hold { border-color: #CFE0DA; background: var(--sup-soft) }

.widget-c { display: flex; align-items: center; gap: 8px; padding: 8px 11px;
          border-top: 1px solid var(--hair); font-size: 12px; color: var(--dim); background: #fff }
.widget-c .mic { color: var(--sup) }
.widget-c .ph { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis }
.widget-c .ph.typed { color: var(--ink) }
.widget-c .caret { display: inline-block; width: 1.5px; height: 12px; margin-left: 1px;
          background: var(--sup); vertical-align: -2px; animation: caret 1.05s steps(1) infinite }
.widget-c .send { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 999px;
          background: #EDF1EF; color: #8A9A95 }

/* ── result cards ────────────────────────────────────────────────────────── */
.result { border: 1px solid var(--line); border-radius: var(--r); padding: 15px; background: #fff }
.result.good { border-color: #CFE5DC; background: var(--sup-soft) }
.result.hand { border-color: #F0DCC6; background: #FDF6EE }
.result .rt { font-size: 14px; font-weight: 650; letter-spacing: -.015em; color: var(--ink); margin: 0 0 5px }
.rd { font-size: 12.5px; line-height: 1.55; color: var(--meta); margin: 0 }
.result .rows { margin-top: 11px; display: flex; flex-direction: column; gap: 6px }
.rows { display: flex; flex-direction: column; gap: 6px }
.rrow { display: flex; gap: 10px; font-size: 12.5px }
.rrow .k { width: 96px; flex: 0 0 auto; color: var(--dim) }
.rrow .v { color: var(--ink); font-weight: 550 }

.quote { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap }
.quote .big { font-size: 22px; font-weight: 700; letter-spacing: -.03em; color: var(--ink);
              font-variant-numeric: tabular-nums }
.quote .sm { font-size: 12.5px; color: var(--meta) }

.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px }
.tier { border: 1px solid var(--line); border-radius: 10px; padding: 11px }
.tier .tn { font-family: var(--mono); font-size: 10.5px; color: var(--dim); margin-bottom: 4px }
.tier .tx { font-size: 12.5px; line-height: 1.5; color: var(--body) }
.tier.t3 { border-color: #F0DCC6; background: #FDF6EE }

/* ── how it scales ───────────────────────────────────────────────────────
   Three zooms of one generated tree. The layers are stacked and cross faded
   with a little scale on each, so moving out reads as pulling back a camera
   rather than swapping a slide. */
.scale { display: flex; flex-direction: column; gap: 14px; height: 100% }
.sc-plot { position: relative; flex: 1 1 auto; min-height: 0; border: 1px solid var(--line);
        border-radius: var(--r); background: linear-gradient(180deg, #FCFDFC, #F6F8F7);
        overflow: hidden }
.sc-plot svg { position: absolute; inset: 0; width: 100%; height: 100% }
.sc-plot .lay { opacity: 0; transform-origin: 50% 100%; transition: opacity .9s ease,
        transform 1.1s cubic-bezier(.22,.7,.28,1) }
/* Square caps and whole pixels: the runs read as a bus and its drops rather
   than as branches. Bookings wear the magenta the map uses for billboard
   pins, because that is what a leaf is. */
.sc-plot .lay path { stroke: #A9BAB4; stroke-linecap: square; fill: none;
        shape-rendering: crispEdges }
.sc-plot .lf-booked { fill: #9F0088 }
.sc-plot .lf-human { fill: #E8A33D }

.sc-plot[data-at="0"] .lay[data-lay="0"] { opacity: 1; transform: none }
.sc-plot[data-at="0"] .lay[data-lay="1"] { opacity: 0; transform: scale(1.5) }
.sc-plot[data-at="0"] .lay[data-lay="2"] { opacity: 0; transform: scale(2.4) }
.sc-plot[data-at="1"] .lay[data-lay="0"] { opacity: 0; transform: scale(.62) }
.sc-plot[data-at="1"] .lay[data-lay="1"] { opacity: 1; transform: none }
.sc-plot[data-at="1"] .lay[data-lay="2"] { opacity: 0; transform: scale(1.6) }
.sc-plot[data-at="2"] .lay[data-lay="0"] { opacity: 0; transform: scale(.35) }
.sc-plot[data-at="2"] .lay[data-lay="1"] { opacity: 0; transform: scale(.55) }
.sc-plot[data-at="2"] .lay[data-lay="2"] { opacity: 1; transform: none }

/* The legend sits under the steps rather than beside them: in the right hand
   column it collided with the watermark, which is the one thing on the frame
   that cannot move. */
.sc-rail { display: flex; flex-direction: column; gap: 10px; flex: 0 0 auto; padding-bottom: 6px }
.sc-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px }
/* The rule above each blurb is a loader, not a divider: it fills across the
   stage it belongs to. A slide that holds for three seconds with nothing moving
   is indistinguishable from a slide that has hung. */
.sc-step { display: flex; flex-direction: column; gap: 3px; padding-top: 11px; position: relative;
        opacity: .35; transition: opacity .4s ease }
.sc-step .load { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--line);
        overflow: hidden; border-radius: 2px }
.sc-step .load i { display: block; height: 100%; width: 100%; background: var(--sup);
        transform: scaleX(0); transform-origin: 0 50% }
.sc-step.in { opacity: 1 }
.sc-step.now .load { background: #DCE7E3 }
.sc-step .k { font-size: 12.5px; font-weight: 650; color: var(--ink); letter-spacing: -.01em }
.sc-step .n { font-family: var(--mono); font-size: 10.5px; color: var(--sup) }
.sc-step .s { font-size: 11.5px; line-height: 1.5; color: var(--meta) }
.sc-legend { display: flex; align-items: center; gap: 18px; flex-wrap: wrap }
.sc-legend .lg { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--meta) }
.sc-legend .lg i { width: 8px; height: 8px; border-radius: 999px; flex: 0 0 auto }
.sc-legend .lf-booked { background: #9F0088 }
.sc-legend .lf-human { background: #E8A33D }
.sc-legend .note { color: var(--dim); font-size: 10.5px; margin-left: auto; padding-right: 150px }

/* ── cold open and close ─────────────────────────────────────────────────── */
.open { height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 18px;
        padding: 0 8px }
.open h2 { font-size: clamp(30px, 4vw, 46px); font-weight: 700; letter-spacing: -.035em;
           line-height: 1.04; margin: 0; color: var(--stage-ink); max-width: 18ch }
.open .sub { font-size: 15.5px; line-height: 1.6; color: var(--stage-meta); max-width: 54ch; margin: 0 }
.badges { display: flex; gap: 8px; flex-wrap: wrap }
.badge { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600;
         border-radius: 999px; padding: 6px 13px; border: 1px solid var(--stage-line);
         color: var(--stage-meta); background: var(--stage-soft) }
.badge.a { color: #7FD8C0; border-color: #24403A; background: rgba(127,216,192,.08) }
.badge.b { color: #8FBBFF; border-color: #21334D; background: rgba(43,127,255,.1) }

/* ── the close ────────────────────────────────────────────────────────────
   Three bands: what the thing is made of, the one set of numbers on this page
   that came from outside it, and what we are asking for. */
.close { display: flex; flex-direction: column; gap: 14px; height: 100% }

.ref { flex: 1 1 auto; display: flex; flex-direction: column; border: 1px solid var(--line);
        border-radius: var(--r); background: #FCFDFC; padding: 14px }
.ref-h { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px }
.ref-h .t { font-size: 12.5px; font-weight: 650; color: var(--ink); letter-spacing: -.01em;
        flex: 0 0 auto }
.ref-h .s { font-size: 11.5px; color: var(--meta); line-height: 1.5 }

/* A stat tile, not a chart. Three headline figures have no shape worth
   plotting, and the caption does the work an axis would. The number wears ink,
   never an accent: nothing here is a series. */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: auto 0 }
.stat { display: flex; flex-direction: column; gap: 3px; padding-left: 13px;
        border-left: 2px solid #DCE5E1 }
.stat .v { font-size: 34px; font-weight: 700; letter-spacing: -.04em; color: var(--ink);
        line-height: 1; font-variant-numeric: tabular-nums }
.stat .v i { font-style: normal; font-size: 17px; font-weight: 600; color: var(--meta);
        margin-left: 3px; letter-spacing: -.02em }
.stat .k { font-size: 12px; font-weight: 550; color: var(--body); margin-top: 5px }
.stat .s { font-size: 11px; color: var(--dim); line-height: 1.45 }

.ends { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.end { display: flex; flex-direction: column; gap: 5px; border: 1px solid var(--line);
        border-radius: var(--r); padding: 13px }
.end .eh { font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
        color: var(--dim); margin-bottom: 3px }
.end .ep { font-size: 12.5px; line-height: 1.55; color: var(--meta) }
/* The open list is not a call to action and does not dress like one. It is the
   part of the project still to argue about, which is why this page exists. */
.end.open { background: #FCFCFD }
.ol { margin: 2px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px }
.ol li { position: relative; padding-left: 15px; font-size: 12.5px; line-height: 1.5;
        color: var(--body) }
.ol li::before { content: ""; position: absolute; left: 3px; top: 8px; width: 4px; height: 4px;
        border-radius: 999px; background: #C2C8CF }

.arch { display: flex; align-items: stretch; gap: 0 }
.arch .node { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column }
.arch .node .nm { margin-top: auto; padding-top: 9px; font-family: var(--mono); font-size: 9.5px;
        letter-spacing: .04em; color: var(--dim) }

/* Just the line. It goes in the gap between the cards, which is what the
   first pass got wrong: absolutely positioned with no `left`, it stayed at its
   static position and printed a dashed rule through "Qualify, route, hand
   off". Labelled two way arrows came after that and were truer, but four boxes
   and six arrowheads is a lot of diagram for a point the cards already make. */
.hop { flex: 0 0 40px; align-self: center; height: 1px; border-top: 1px dashed #CDD3D9 }

/* ── the chapter card ─────────────────────────────────────────────────────
   Cutting from a call that just ended to a browser that is suddenly there
   reads as a glitch. A second and a half of black with the chapter's name on
   it is all it takes for the jump to read as intended. */
.wipe { position: absolute; inset: 0; z-index: 18; display: grid; place-items: center;
        background: #000; color: #EAF3EF; opacity: 1; transition: opacity .9s ease }
.wipe.out { opacity: 0 }
.wipe-in { display: flex; flex-direction: column; align-items: center; gap: 12px }
.wipe-k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase;
        color: #7FD8C0; opacity: 0; animation: wipeK .9s ease .15s both }
.wipe-t { font-size: 30px; font-weight: 600; letter-spacing: -.005em; opacity: 0;
        animation: wipeT 2.1s cubic-bezier(.16,.8,.24,1) .35s both }
/* The title settles rather than arrives: the letter spacing closing is what
   makes a second and a half read as deliberate instead of slow. */
@keyframes wipeK { from { opacity: 0; letter-spacing: .5em } to { opacity: 1; letter-spacing: .3em } }
@keyframes wipeT { from { opacity: 0; letter-spacing: .12em } to { opacity: 1; letter-spacing: -.005em } }

/* ── eng overlay ─────────────────────────────────────────────────────────────
   Off by default. When on it is a separate rail, never a caption inside the
   product frame, because eng detail read as product is how a demo lies. */
.eng { display: none; margin-top: 16px; border: 1px dashed #C9CDD4; border-radius: var(--r);
       background: #FBFBFD }
body.eng-on .eng { display: block }
.eng-h { display: flex; align-items: center; gap: 8px; padding: 8px 12px;
         border-bottom: 1px dashed #DDE0E6; color: #8E8E93 }
.eng-h .t { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
            color: #8E8E93 }
.eng-b { padding: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px }
.eng-b .col { min-width: 0 }
.eng-b .col > .cap { margin-bottom: 6px }
.eng-note { font-size: 12px; line-height: 1.55; color: var(--meta) }
.eng-note b { color: var(--body); font-weight: 600 }

/* ── transport ───────────────────────────────────────────────────────────── */
.transport { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 0 0 }
.nudge { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
         border: 1px solid #26332F; background: #121917; border-radius: 8px; color: #8FA39C;
         cursor: pointer; transition: background .12s, color .12s }
.nudge:hover:not(:disabled) { background: #18211E; color: var(--stage-ink) }
.nudge:disabled { opacity: .35; cursor: default }
.nudge.play[aria-pressed="true"] { border-color: #245247; background: #16302A; color: #7FD8C0 }
.seg button.sup[aria-pressed="true"] { color: var(--sup) }
.scrub { display: flex; align-items: center; gap: 12px; flex-wrap: wrap }
#dots { display: flex; align-items: center; gap: 14px; flex-wrap: wrap }
.scrub-group { display: flex; align-items: center; gap: 5px }
.scrub-label { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
               color: var(--stage-dim); margin-right: 3px }
.dot { width: 9px; height: 9px; border-radius: 999px; border: 0; background: #26332F; padding: 0;
       cursor: pointer; transition: background .15s, transform .15s }
.dot:hover { transform: scale(1.25) }

/* The beat you are on is a bigger dot followed by a pip per move inside it:
   a line spoken, a row of the build, a send, a zoom, a block of the close. The
   bar across the frame says the beat is advancing; these say how much of it is
   left, which is the question a viewer actually has. */
.dot-wrap { display: inline-flex; align-items: center; gap: 5px }
.dot-wrap .dot { width: 11px; height: 11px }
.pips { display: inline-flex; align-items: center; gap: 3px; padding-left: 1px }
.pips i { width: 4px; height: 4px; border-radius: 999px; background: #26332F;
        transition: background .2s ease, transform .2s ease }
.pips i.on { background: #4E7A6D; transform: scale(1.15) }
.dot.done { background: #38564D }
.dot[aria-current="true"] { background: #7FD8C0; transform: scale(1.25) }
.status { margin-left: auto }

.keys { margin-top: 10px; font-size: 11.5px; color: var(--stage-dim) }
.keys a, .keys code { color: var(--stage-meta) }
kbd { font-family: var(--mono); font-size: 10.5px; background: var(--stage-soft);
      border: 1px solid var(--stage-line); border-radius: 4px; padding: 1px 5px;
      color: var(--stage-meta) }

/* ── note block, below the frame ─────────────────────────────────────────── */
.note { margin-top: 34px; border-top: 1px solid var(--stage-line); padding-top: 20px;
        font-size: 13px; line-height: 1.7; color: var(--stage-meta); max-width: 74ch }
.note h3 { font-size: 13px; font-weight: 650; color: var(--stage-ink); margin: 0 0 8px }
.note code { background: var(--stage-soft); color: var(--stage-meta); border-radius: 3px;
        padding: 1px 5px; font-family: var(--mono); font-size: 11.5px }
.note p { margin: 0 0 12px }
.note a { color: #8FBBFF }

/* ── presentation ─────────────────────────────────────────────────────────
   ?present. Everything that belongs to the lab goes, the page furniture goes,
   and what is left is the frame on a dark ground with a transport under it.
   The scene inside stays light: it is product, and product is not a slide. */
/* Presentation mode is no longer a different skin, only a stripped one: the
   page furniture goes, the frame grows, and everything else was already dark. */
body[data-present] header.page,
body[data-present] .lab,
body[data-present] .note,
body[data-present] .keys { display: none }
body[data-present] main { padding: 0; min-height: 100vh; display: flex; align-items: center;
                          justify-content: center }
body[data-present] main > .wrap { width: 100%; max-width: 1320px; padding: 0 clamp(16px, 4vw, 48px) }
body[data-present] .stage { height: min(74vh, 720px) }
body[data-present] .transport { padding: 18px 2px 0 }

/* ── scroll flow ─────────────────────────────────────────────────────────────
   Under 900px the frame stops being a frame. Every beat renders as its own
   section, in order, and the transport disappears rather than scrolling a
   stage nobody is looking at. */
.flow-scroll { display: none; flex-direction: column; gap: 16px }
body[data-flow="scroll"] .stage,
body[data-flow="scroll"] .transport,
body[data-flow="scroll"] .keys { display: none }
body[data-flow="scroll"] .flow-scroll { display: flex }

.flow-scroll .stage-sec { position: relative; border: 1px solid #1B2622; border-radius: 16px;
                          background: #fff; overflow: hidden;
                          box-shadow: 0 14px 34px rgba(0,0,0,.35) }
.flow-scroll .scene { overflow: visible; padding: 18px 16px 34px }
.flow-scroll .cols.c2, .flow-scroll .cols.c2-wide { grid-template-columns: minmax(0, 1fr) }
.flow-scroll .beat-head { padding: 15px 16px 12px }
.flow-scroll .open { padding: 10px 0 20px }

@media (max-width: 1080px) {
  .site-grid { grid-template-columns: repeat(2, 1fr) }
  .arch { grid-template-columns: repeat(2, 1fr) }
  /* Stacked, the hops would point sideways at nothing. */
  .arch { flex-wrap: wrap }
  .arch .node { flex: 1 1 40% }
  .hop { display: none }
  .eng-b { grid-template-columns: minmax(0, 1fr) }
}
@media (max-width: 760px) {
  .wrap { padding: 0 16px }
  /* The page is narrower than the embed wants to be, so the widget stops
     floating and becomes the last thing on the page. */
  .hero-copy { max-width: 100% }
  .site-grid { grid-template-columns: minmax(0, 1fr) }
  .widget { position: static; width: auto; margin: 0 14px 16px;
            box-shadow: 0 6px 18px rgba(16,38,31,.12) }
  .br-tab { max-width: 180px }
  .site-strip { display: none }
  .tiers { grid-template-columns: minmax(0, 1fr) }
  .flow { grid-template-columns: minmax(0, 1fr); gap: 8px }
  .flow-arrow { transform: rotate(90deg) }
  .lab-in { gap: 12px }
}