/* Notei — variant D1 "inline motion". Base layout lifted from variant B (block clarity)
   + variant C's contained hero assemble sequence + variant A's pricing/FAQ +
   new small self-running vignette components (buildStaff language from weave-free).
   No scroll-jacking anywhere: vignettes loop gently or trigger on scroll-into-view. */

@font-face{font-family:'Bravura';src:url('./assets/Bravura.woff2') format('woff2');font-weight:normal;font-style:normal;font-display:block}

:root{
  --cream:#fdf8ef; --cream2:#f5ecdb; --border:#e6d6ba; --cream-faint:#efe6d4; --paper:#fffdf8;
  --ink:#1a1a1a; --ink2:#5a5048; --muted:#7a6f65; --ink-faint:#b0a49a; --engrave:#14110a;
  --canvas:#191512; --canvas2:#221c17;
  --honey:#F4A23B; --honey-deep:#c8861e; --honeyd:#c8861e; --honey-soft:#e0a23b;
  --font:'Satoshi',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --ease:cubic-bezier(.2,.75,.25,1); --spring:cubic-bezier(.32,.72,0,1);
  --radius:16px; --radius-lg:22px;
  --maxw:1180px;
}
/* NOT changing --maxw at ultrawide. The hero (.oh-two, 1280px) is wider than
   --maxw (1180px), and raising --maxw to match was tried on 2026-07-18 — but
   the 1728px reference viewport Brian signed off on is ABOVE any sensible
   ultrawide breakpoint, so it re-flowed every section on the approved design
   (.wrap 1180->1280 on all 4 pages). The offset is deliberate-looking and
   stable at every width; treat it as intent, not drift. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 20px)} /* anchor jumps (e.g. index "see it →" links) land the target below the sticky nav, not hidden under it */
body{font-family:var(--font);background:var(--cream);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.5}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:rgba(200,134,30,.2)}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,56px)}
.section{padding:clamp(64px,9vh,112px) 0}
.section.tight{padding:clamp(40px,6vh,72px) 0}
/* issue 5: features.html/ai.html read too tight, too much at once — extra room top/bottom
   so each feature block gets its own moment instead of crowding the next section in. */
.section.roomy{padding:clamp(96px,13vh,160px) 0}
.dk{background:var(--canvas);color:var(--paper)} /* I4a: matches weave-free's .dk one-for-one (was #e9e1d4) */
.dk h2,.dk h3{color:var(--paper)}
.dk p{color:#bdb2a1}

/* ---------- entrance fade (no scroll-jack — one-shot reveal only) ----------
   E1r2g: slowed + gentler per Brian's "walked through, never rushed" — longer
   duration, softer travel distance, wider stagger between siblings. */
.fade{opacity:0;transform:translateY(18px);transition:opacity .5s cubic-bezier(.16,.6,.2,1),transform .5s cubic-bezier(.16,.6,.2,1)}
.fade.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.fade{opacity:1;transform:none;transition:none}}

/* ---------- nav (flat standard bar, E1r2) ---------- */
:root{--nav-h:84px}
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;height:var(--nav-h);padding:0 clamp(20px,5vw,56px);background:var(--cream);border-bottom:1px solid var(--border);transition:background .4s var(--ease),border-color .4s var(--ease)}
.nav-logo{display:flex;align-items:center}
.nav-logo img{height:23px}
.nav-logo .wm-white{display:none}
.nav.on-dark .nav-logo .wm-color{display:none}
.nav.on-dark .nav-logo .wm-white{display:block}
.nav-links{display:flex;gap:2px}
.nav-links a{font-size:.92rem;font-weight:600;text-decoration:none;color:var(--ink2);padding:12px 16px;border-radius:10px;transition:background .25s,color .25s}
.nav-links a:hover,.nav-links a.active{background:rgba(200,134,30,.1);color:var(--honey-deep)}
.nav-cta{font-size:.9rem;font-weight:700;color:#1a1a1a;background:var(--honey);padding:12px 22px;border-radius:999px;text-decoration:none;white-space:nowrap;transition:background .25s,transform .2s}
.nav-cta:hover{background:var(--honey-soft)}
.nav-cta:active{transform:scale(.97)}
/* Mobile nav disclosure. <details> gives focus, Enter/Space toggle and
   aria-expanded for free — a checkbox hack or a JS toggle would hand-roll all
   three. At >=761px `display:contents` removes the wrapper box entirely, so
   .nav-links stays the exact same flex child of .nav it has always been and
   desktop rendering is unchanged. The panel is absolutely positioned off the
   header so opening it can never grow the sticky bar. */
.nav-menu>summary{display:none;list-style:none;cursor:pointer;font-size:.92rem;font-weight:600;color:var(--ink2);padding:12px 14px;border-radius:10px;user-select:none}
.nav-menu>summary::-webkit-details-marker{display:none}
.nav-menu>summary:hover{background:rgba(200,134,30,.1);color:var(--honey-deep)}
@media(min-width:761px){.nav-menu{display:contents}}
@media(max-width:760px){
  .nav-menu>summary{display:block}
  .nav-menu>.nav-links{position:absolute;top:var(--nav-h);left:0;right:0;flex-direction:column;gap:0;background:var(--cream);border-bottom:1px solid var(--border);padding:8px clamp(20px,5vw,56px) 16px;box-shadow:0 14px 28px rgba(0,0,0,.08)}
  .nav.on-dark .nav-menu>summary{color:#e9e1d4}
  .nav.on-dark .nav-menu>.nav-links{background:var(--canvas2);border-bottom-color:rgba(255,255,255,.09)}
  .nav.on-dark .nav-menu>.nav-links a{color:#cfc6b8}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:1rem;padding:13px 15px 13px 26px;border-radius:999px;text-decoration:none;border:0;cursor:pointer;font-family:inherit;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s}
.btn-primary{background:var(--honey);color:#1a1a1a;box-shadow:0 8px 22px rgba(200,134,30,.22)}
.btn-primary:hover{box-shadow:0 12px 28px rgba(200,134,30,.3);background:var(--honey-soft)}
.btn-primary:active{transform:scale(.97)}
.btn-i{width:28px;height:28px;border-radius:999px;background:rgba(0,0,0,.1);display:inline-flex;align-items:center;justify-content:center}
.btn-i::after{content:"";width:6px;height:6px;border-right:2px solid #1a1a1a;border-bottom:2px solid #1a1a1a;transform:rotate(-45deg);margin-left:-2px}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--border);padding:12px 24px}
.btn-ghost:hover{border-color:var(--honey-soft);background:rgba(200,134,30,.05)}
.dk .btn-ghost{border-color:rgba(255,255,255,.2);color:#fff}
.dk .btn-ghost:hover{background:rgba(255,255,255,.08)}

/* variant-A style CTA, lifted verbatim for the pricing page */
.cta{display:inline-flex;align-items:center;gap:12px;background:var(--honey);color:#1a1a1a;font-weight:700;font-size:1rem;padding:11px 13px 11px 24px;border-radius:999px;text-decoration:none;border:0;cursor:pointer;font-family:inherit;box-shadow:0 6px 18px rgba(200,134,30,.18);transition:transform .4s var(--spring),box-shadow .4s var(--ease)}
.cta:hover{box-shadow:0 10px 26px rgba(200,134,30,.26)}.cta:active{transform:scale(.97)}
.cta-i{width:30px;height:30px;border-radius:999px;background:rgba(0,0,0,.10);display:inline-flex;align-items:center;justify-content:center;transition:transform .4s var(--spring)}
.cta:hover .cta-i{transform:translateX(3px)}
.cta-i::after{content:"";width:7px;height:7px;border-right:2px solid #1a1a1a;border-bottom:2px solid #1a1a1a;transform:rotate(-45deg);margin-left:-2px}
.cta.ghost{background:transparent;color:var(--ink);border:1px solid var(--border);box-shadow:none}
.cta.ghost:hover{background:rgba(200,134,30,.06)}

/* ---------- eyebrow / headings ----------
   E1r2g: de-pilled per Brian — plain lowercase small text + the honey dot,
   no chrome (no border/background/pill radius/uppercase). KIT.md "no pill
   eyebrows, no all-caps" rule. */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;font-weight:700;letter-spacing:.01em;margin-bottom:18px;color:var(--honey-deep)}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--honey);flex:0 0 auto}
.dk .eyebrow{color:var(--honey-soft)}
.copy-hl{color:var(--honey-deep);font-weight:700}
h1,h2,h3{letter-spacing:-.03em;font-weight:800;line-height:1.08}
.head{max-width:640px;margin-bottom:44px}
.head .eyebrow{margin-bottom:10px}
.head h1,.head h2{font-size:clamp(1.9rem,3.6vw,2.7rem)} /* I8: pricing.html's top heading became an h1 (was h2, the page had zero h1s) — generalized so its size is unchanged */
.head p{margin-top:18px;font-size:clamp(1rem,1.2vw,1.12rem);color:var(--ink2);max-width:52ch}
.head.center{margin-left:auto;margin-right:auto;text-align:center}
.head.center p{margin-left:auto;margin-right:auto}
/* #featuresHead ("everything about composition, handled by notei.") was reading as three
   cramped lines at this font size — give the statement room: looser line-height + letterspacing
   so the wrap breathes, plus a wider column and extra margin around the whole block. */
#featuresHead{max-width:920px;margin-top:8px;margin-bottom:76px}
#featuresHead h2{line-height:1.32;letter-spacing:-.015em}
/* I2: force the two-line break at the natural comma pause on desktop (1280-1680px verified);
   mobile wraps on its own available width, so the forced break is hidden below the site's
   standard 880px breakpoint. */
@media(max-width:880px){.fh-break{display:none}}

/* ---------- browser-chrome frame ---------- */
.browser-frame{border-radius:var(--radius-lg);overflow:hidden;background:var(--paper);border:1px solid var(--border);box-shadow:0 40px 90px rgba(40,30,10,.16),0 4px 14px rgba(40,30,10,.06)}
.browser-frame .chrome-bar{display:flex;align-items:center;gap:8px;padding:11px 14px;background:#f2e9d8;border-bottom:1px solid #e6d6ba}
.chrome-dot{width:10px;height:10px;border-radius:50%;background:#dccfb8}
.chrome-dot:nth-child(2){background:#e6d6a3}
.chrome-dot:nth-child(3){background:var(--honey-soft)}
.chrome-url{margin-left:12px;flex:1;font-size:.72rem;color:var(--muted);background:#fff;border:1px solid var(--border);border-radius:8px;padding:5px 12px;font-family:ui-monospace,monospace}
.browser-frame img{width:100%;display:block}

/* ============================================================
   VIGNETTES — small self-running/scroll-triggered animated elements
   that live INSIDE a block, beside or instead of copy. Never pinned,
   never scroll-scrubbed. Loop gently or resolve once in view.
   ============================================================ */
.vign{border-radius:var(--radius-lg);background:var(--paper);border:1px solid var(--border);box-shadow:0 30px 70px rgba(40,30,10,.13),0 4px 12px rgba(40,30,10,.05);padding:clamp(30px,4.2vw,46px);display:flex;flex-direction:column;justify-content:center;min-height:250px;position:relative;overflow:hidden}
.dk .vign{background:#231d17;border-color:rgba(255,255,255,.1)}
/* E1r2g: de-pilled — plain small label, no chip chrome (issue 8: fewer pills site-wide) */
.vign-tag{position:absolute;top:16px;left:20px;font-size:.7rem;font-weight:700;letter-spacing:.01em;color:var(--honey-deep)}
.dk .vign-tag{color:var(--honey-soft)}

/* -- mini staff (buildStaff primitives, verbatim language from weave-free) -- */
.stf{position:relative}
.stf .ln{position:absolute;left:0;right:0;height:1px;background:currentColor;opacity:.28}
.nh{position:absolute;width:13px;height:9.8px;border-radius:50%;background:var(--honey-deep);transform:rotate(-18deg);transition:opacity .16s,transform .16s}
.nh.scrub{opacity:0}
/* I1 — accidental glyph for a buildStaff note (n.acc); counter-rotated so it reads upright
   despite the parent notehead's -18deg tilt, and its opacity/scale ride the parent's own
   transitions/inline styles for free (composited, not inherited — no extra JS needed). */
.nh.flat::before{content:"\266D";position:absolute;left:-11px;top:47%;transform:translateY(-50%) rotate(18deg);font-size:13px;font-weight:700;line-height:1}
.stf-ledger{position:absolute;height:1px;background:currentColor;opacity:.4}
.bln{position:absolute;width:1.5px;background:#bcab8a}
.vign-clef{position:absolute;left:0;top:50%;transform:translateY(-54%);font-size:52px;line-height:1;color:var(--engrave);font-family:'Bravura';pointer-events:none;opacity:.9}
.vign-staff-wrap{position:relative;margin:0 0 0 8px;padding-top:6px}

/* -- blinking note cursor (pure CSS, no JS needed) -- */
@keyframes caretblink{0%,66%{opacity:1}66.01%,100%{opacity:0}}
.asm-cur{position:absolute;width:2.5px;border-radius:2px;transform-origin:50% 50%;will-change:left,opacity;transition:left .09s cubic-bezier(.4,0,.2,1)}
.asm-cur b{display:block;width:100%;height:100%;background:var(--honey-deep);border-radius:2px;box-shadow:0 0 10px rgba(200,134,30,.55);animation:caretblink 1.06s steps(1,end) infinite}
.asm-cur.writing b{animation:none;opacity:1}
@media (prefers-reduced-motion:reduce){.asm-cur b{animation:none;opacity:1}}

/* -- honey dot pulsing (pure CSS loop) -- */
@keyframes pulseDot{0%{box-shadow:0 0 0 0 rgba(200,134,30,.4)}70%{box-shadow:0 0 0 10px rgba(200,134,30,0)}100%{box-shadow:0 0 0 0 rgba(200,134,30,0)}}
.pulse-dot{width:9px;height:9px;border-radius:50%;background:var(--honey);animation:pulseDot 2.1s ease-out infinite}
@media (prefers-reduced-motion:reduce){.pulse-dot{animation:none}}

/* -- chat typing vignette (ai.html + index.html howto "ask" step) --
   inline-block so the box shrink-wraps to the typed text: the border-left then always sits
   right against the line it marks. As a plain block spanning the full card width, the border
   stayed pinned to the card's left edge while text-align:center (howto-wrap, index.html) pushed
   the actual text to the middle — the quote bar floated off on its own (shots-roundB howto-ask-mid). */
.vign-chat-line{display:inline-block;font-size:.92rem;color:var(--ink2);border-left:2px solid var(--honey-soft);padding-left:11px;line-height:1.5;min-height:1.6em}
.vign-chat-cursor{display:inline-block;width:2px;height:1em;background:var(--honey);vertical-align:text-bottom;animation:caretblink .9s steps(1,end) infinite}
@media (prefers-reduced-motion:reduce){.vign-chat-cursor{animation:none}}
.vign-chat-answer{margin-top:12px;padding-top:12px;border-top:1px solid var(--border);font-size:.88rem;color:var(--ink);font-weight:600;line-height:1.5;opacity:0;transition:opacity .3s var(--ease)}

/* ============================================================
   HERO — contained assemble sequence (lifted from variant C /
   weave-free's buildStaff hero). Resolves on its own; no pinning,
   no scroll dependency.
   ============================================================ */
/* ---------- hero — base (page-header use on features/ai/etc) ---------- */
.hero{padding:clamp(56px,8vh,88px) 0 clamp(48px,7vh,80px)}
/* ---------- hero-full — home hero only: full first viewport, giant type dominates (E1r2) ----------
   E1r2g: vertically CENTERED per Brian ("sits too high") — the eyebrow-pill row is gone entirely
   (no hype pill above the giant type), so the grid is 2 rows, not 3, and the whole block centers
   as one unit in the viewport instead of hugging the top. */
.hero.hero-full{min-height:calc(100svh - var(--nav-h));display:flex;flex-direction:column;justify-content:center;padding:clamp(40px,6vh,64px) 0;position:relative;overflow:hidden}
.hero-giant{letter-spacing:-.04em}
.hg-main{display:block;font-size:clamp(4.8rem,15vw,12rem);line-height:.9;font-weight:900;will-change:transform}
.hg-sub{display:block;font-size:clamp(1.3rem,3.4vw,2.35rem);font-weight:600;color:var(--ink2);margin-top:clamp(10px,2vh,20px);letter-spacing:-.02em}
/* the giant type spans the full width (unconstrained — it can run up to 12rem and must never be
   squeezed by a column split); the visual sits in column 2 and spans BOTH the giant row and the
   copy row, so it centers against the whole type block, not just the copy line. Column ratio is
   less lopsided than before (1.06:1, was 1.25:1) so the staff visual gets a wider stage to breathe. */
.hero-grid{display:grid;grid-template-columns:1.06fr 1fr;grid-template-rows:auto auto;column-gap:clamp(100px,12vw,170px);row-gap:clamp(24px,3.6vh,42px)}
.hero-grid .hero-giant{grid-column:1/-1;grid-row:1}
.hero-grid .copy{grid-column:1/2;grid-row:2;min-width:0}
.hero-visual{grid-column:2/3;grid-row:1/3;align-self:end;justify-self:center;min-width:0;display:flex;align-items:center;justify-content:center;width:100%}
.hero .sub{margin-top:clamp(18px,2.8vh,30px);font-size:clamp(1rem,1.2vw,1.14rem);color:var(--ink2);max-width:40ch;line-height:1.5}
.hero-actions{display:flex;align-items:center;gap:18px;margin-top:clamp(22px,3.2vh,34px);flex-wrap:wrap}
.hero-meta{margin-top:clamp(18px,2.6vh,28px);font-size:.85rem;color:var(--muted);line-height:1.7}
.hero-meta .live-dot{display:inline-block;vertical-align:middle;width:7px;height:7px;margin-right:8px;border-radius:50%;background:#3fae6b;box-shadow:0 0 0 4px rgba(63,174,107,.16)}
@media(max-width:880px){
  .hero-grid{grid-template-columns:1fr;grid-template-rows:auto auto auto}
  .hero-grid .hero-giant,.hero-grid .copy,.hero-visual{grid-column:1;grid-row:auto}
}

/* staff vignette — byte-equivalent to weave-free/index.html's .asm-* (issue 1, hero staff
   one-for-one): same widths, same clef/timesig size+position, same staff margin. Only the
   mobile min-width query differs from the original's 881px breakpoint (matches this site's
   own MOB()/nav breakpoint of 880px instead), and mobile keeps its own compact clef/staff scale
   so the staff fits inside a 390px viewport without horizontal overflow — the original never
   had to solve this because its own mobile hero falls back to heroStatic() same as here, but
   its fixed 150px-indent staff assumes a wider minimum viewport than our verify gate requires. */
.asm-stage{width:min(620px,100%);margin:0 auto;display:flex;flex-direction:column;align-items:stretch;gap:32px}
.asm-score{position:relative;display:flex;flex-direction:column;justify-content:center;background:transparent}
.asm-zoom{position:relative}
.asm-clef{position:absolute;left:20px;top:50%;transform:translateY(-52%);font-size:90px;line-height:1;color:var(--engrave);font-family:'Bravura';pointer-events:none}
.asm-ts{position:absolute;left:104px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;font-weight:800;color:#2a2520;font-size:33px;line-height:.86;pointer-events:none}
.asm-staff{position:relative;margin:0 8px 0 150px}
.asm-staff .ln{background:#bdbdc4;opacity:1;height:1px}
.asm-prompt{display:flex;align-items:center;gap:10px;padding:0 4px;font-size:13.5px;min-height:1.5em}
.asm-prompt .pa{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:rgba(200,134,30,.1);color:var(--honey-deep);font-size:11px;flex:0 0 auto}
.asm-prompt .pt{color:var(--muted);line-height:1.4;min-height:1.4em;white-space:pre-wrap}
@media(min-width:881px){.asm-score{min-height:330px}}
@media(max-width:600px){.asm-stage{width:100%;gap:22px}.asm-score{min-height:190px}.asm-clef{font-size:44px;left:12px}.asm-ts{font-size:17px;left:54px}.asm-staff{margin:0 18px 0 78px}}

/* ---------- how it works ---------- */
.how-row{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.5vw,28px);margin-top:8px}
.how-step{background:var(--paper);border:1px solid var(--border);border-radius:var(--radius);padding:26px 24px;position:relative}
.how-n{font-size:.72rem;font-weight:800;color:var(--honey-deep);letter-spacing:.04em}
.how-step h3{margin-top:12px;font-size:1.2rem}
.how-step p{margin-top:8px;font-size:.95rem;color:var(--ink2);line-height:1.5}
@media(max-width:760px){.how-row{grid-template-columns:1fr}}

/* ---------- .lnk (used standalone now that the features overview is one-by-one deep-rows) ---------- */
.lnk{font-size:.85rem;font-weight:700;color:var(--honey-deep);align-items:center;gap:6px}

/* ---------- deep-dive (real screenshot band / vignette band) ---------- */
.deep-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,60px);align-items:center;margin-top:clamp(90px,14vh,160px)}
.deep-row:first-of-type{margin-top:0}
.deep-row.rev .deep-copy{order:2}
.deep-row.rev .deep-visual{order:1}
.deep-copy .eyebrow{margin-bottom:14px}
.deep-copy h3{font-size:clamp(1.4rem,2.4vw,1.9rem)}
.deep-copy p{margin-top:12px;color:var(--ink2);font-size:1rem;line-height:1.55;max-width:44ch}
.deep-copy .limit{margin-top:10px;font-size:.86rem;color:var(--ink-faint)}
@media(max-width:880px){.deep-row,.deep-row.rev{grid-template-columns:1fr}.deep-row.rev .deep-copy,.deep-row.rev .deep-visual{order:initial}}

/* ---------- features-overview trim: scoped to #features only (index home page) so features.html/ai.html's own .deep-row rhythm + card size is untouched (Brian: "could be more concise, more in depth on the features tab") ---------- */
/* re-opened a round later (Brian: "too cramped, make it more spacious") — the compressed pass above
   over-cut the air; copy stays short but row gaps + card comfort land back between the original
   2407px and the over-compressed 1580px. */
#features .deep-row{margin-top:clamp(64px,9vh,108px)}
#features .deep-copy p{margin-top:10px;line-height:1.5}
#features .vign{min-height:210px;padding:clamp(26px,3.6vw,40px)}
#features .feat-more{margin-top:clamp(56px,7.5vh,90px)}
.feat-more .lnk{display:inline-flex}

/* ---------- quotes ---------- */
.quote-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.quote-card{background:var(--paper);border:1px solid var(--border);border-radius:var(--radius);padding:28px 26px;display:flex;flex-direction:column}
.quote-card .qm{font-size:2.2rem;line-height:.4;color:var(--honey-soft);font-weight:900;height:.5em;display:block;margin-bottom:14px}
.quote-card .q{font-size:1rem;line-height:1.5;font-weight:500;color:var(--ink)}
.quote-card .by{margin-top:auto;padding-top:18px;font-size:.82rem;color:var(--muted);font-weight:600}
@media(max-width:880px){.quote-grid{grid-template-columns:1fr}}

/* ---------- changelog ---------- */
.log-card{background:var(--paper);border:1px solid var(--border);border-radius:var(--radius-lg);padding:clamp(24px,3vw,36px);max-width:720px;margin:0 auto}
.log-row{display:flex;align-items:baseline;gap:14px;padding:12px 0;border-top:1px solid var(--cream-faint)}
.log-row:first-child{border-top:0}
.log-date{font-size:.78rem;color:var(--muted);width:56px;flex:0 0 auto}
.log-text{flex:1;font-size:.95rem;color:var(--ink)}
.log-stat{font-size:.74rem;font-weight:700;color:var(--honey-deep);background:rgba(200,134,30,.1);border-radius:999px;padding:4px 10px;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.log-row.next .log-stat{background:var(--cream2);color:var(--ink2)}

/* ---------- email updates ---------- */
.email-band{background:var(--paper);border:1px solid var(--border);border-radius:var(--radius-lg);padding:clamp(32px,4vw,52px);max-width:640px;margin:0 auto;text-align:center;box-shadow:0 20px 50px rgba(60,40,10,.08)}
.email-band h2{font-size:clamp(1.6rem,3vw,2.2rem)}
.email-band p{margin-top:12px;color:var(--ink2)}
.email-form{margin:26px auto 0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:440px}
.email-form input{flex:1;background:var(--cream);border:1px solid var(--border);border-radius:999px;padding:13px 20px;color:var(--ink);font-family:var(--font);font-size:.95rem}
.email-form input::placeholder{color:var(--muted)}
.email-form input:focus{outline:none;border-color:var(--honey-soft);box-shadow:0 0 0 3px rgba(200,134,30,.14)}
.email-micro{font-size:.86rem;color:var(--muted);margin-top:14px}
.email-done{margin-top:18px;font-size:1rem;font-weight:800;color:var(--honey-deep);display:none}

/* ---------- FAQ (native <details>, zero JS) — index/features/ai ---------- */
.faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.faq-item{border:1px solid var(--border);border-radius:14px;background:var(--paper);overflow:hidden}
.faq-item summary{cursor:pointer;list-style:none;padding:18px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:1.02rem;font-weight:700}
.faq-item summary::-webkit-details-marker{display:none}
.faq-ic{flex:0 0 auto;width:24px;height:24px;border-radius:50%;border:1px solid var(--border);position:relative}
.faq-ic::before,.faq-ic::after{content:"";position:absolute;background:var(--honey-deep);border-radius:2px;left:50%;top:50%}
.faq-ic::before{width:10px;height:2px;transform:translate(-50%,-50%)}
.faq-ic::after{width:2px;height:10px;transform:translate(-50%,-50%)}
.faq-item[open] .faq-ic::after{display:none}
.faq-item[open] summary{border-bottom:1px solid var(--cream-faint)}
.faq-item p{padding:0 22px 20px;color:var(--ink2);font-size:.95rem;line-height:1.55}

/* ---------- pricing (lifted from variant A) ---------- */
.beta-tag{display:inline-flex;align-items:center;gap:8px;font-size:.76rem;font-weight:700;color:var(--honey-deep);background:rgba(200,134,30,.1);border:1px solid rgba(200,134,30,.3);border-radius:99px;padding:6px 14px;margin-top:18px}
.price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:clamp(40px,6vh,60px)}
.price-card{background:var(--paper);border:1px solid var(--border);border-radius:20px;padding:clamp(24px,2vw,30px);box-shadow:0 16px 40px rgba(60,40,10,.07);display:flex;flex-direction:column}
.price-card.pop{border-color:var(--honey-soft);box-shadow:0 26px 58px rgba(200,134,30,.16);position:relative}
.price-pop-tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);font-size:.66rem;font-weight:700;letter-spacing:.03em;color:#1a1a1a;background:var(--honey);border-radius:99px;padding:4px 12px}
.price-name{font-size:1.1rem;font-weight:800;color:var(--ink)}
.price-amt{font-size:2.3rem;font-weight:900;letter-spacing:-.03em;margin-top:10px}
.price-amt span{font-size:.9rem;font-weight:600;color:var(--muted)}
.price-desc{font-size:.86rem;color:var(--ink2);margin-top:6px}
.price-feats{margin-top:20px;display:flex;flex-direction:column;gap:10px;flex:1}
.price-feats li{list-style:none;font-size:.86rem;color:var(--ink2);display:flex;gap:8px;align-items:flex-start;line-height:1.4}
.price-feats li::before{content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:var(--honey-soft);margin-top:.5em}
.price-card .cta{margin-top:22px;justify-content:center;width:100%}
.price-note{margin-top:10px;text-align:center;font-size:.78rem;color:var(--muted)}
.draft-tag{display:block;width:fit-content;max-width:100%;margin:22px auto 0;font-size:.85rem;color:var(--honey-deep);font-weight:700;background:rgba(200,134,30,.09);border:1px solid rgba(200,134,30,.25);border-radius:999px;padding:9px 20px;text-align:center}
#ai-bridge .deep-copy .cta{display:inline-flex;justify-content:center;padding-left:26px;padding-right:26px}
.scene.cmd-scene{align-items:center}
@media(max-width:1100px){.price-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.price-grid{grid-template-columns:1fr;max-width:420px;margin-left:auto;margin-right:auto}}

/* ---------- tier comparison table ---------- */
.compare-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:clamp(30px,4vh,48px);border:1px solid var(--border);border-radius:16px;background:var(--paper)}
.compare-table{width:100%;border-collapse:collapse;min-width:600px;font-size:.95rem}
.compare-table th,.compare-table td{padding:13px 18px;text-align:center;border-bottom:1px solid var(--border)}
.compare-table thead th{background:var(--cream2);color:var(--ink);font-weight:800;font-size:1rem;border-bottom:2px solid var(--border)}
.compare-table tbody th{text-align:left;font-weight:600;color:var(--ink2);white-space:nowrap}
.compare-table tbody tr:last-child th,.compare-table tbody tr:last-child td{border-bottom:none}
.compare-table td.tier-pop,.compare-table thead th.tier-pop{background:rgba(200,134,30,.07)}
.compare-table thead th.tier-pop{color:var(--honey-deep)}
.tier-price{display:block;font-size:.78rem;font-weight:600;color:var(--muted);margin-top:3px}
.compare-table thead th.tier-pop .tier-price{color:var(--honey-deep);opacity:.85}
.ct-corner{font-size:.76rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.compare-table .ck{display:inline-block;width:15px;height:8px;border-left:2.4px solid var(--honey-deep);border-bottom:2.4px solid var(--honey-deep);transform:rotate(-45deg);font-size:0;position:relative;top:-3px;opacity:1;margin-left:0} /* CSS-drawn check — Satoshi has no U+2713 glyph; opacity:1 overrides the global .ck (AI-chat check) which is opacity:0 */
.compare-table .no{color:var(--ink-faint)}
@media(max-width:600px){.compare-table{font-size:.88rem}.compare-table th,.compare-table td{padding:11px 13px}}

/* pricing FAQ (custom accordion, JS toggles .open — variant A behavior) */
.faq-grid{margin-top:clamp(30px,5vh,50px);display:flex;flex-direction:column;gap:12px;max-width:880px}
.faq-grid .faq-item{border:1px solid var(--border);border-radius:16px;background:var(--paper);overflow:hidden;box-shadow:0 6px 18px rgba(60,40,10,.05);transition:box-shadow .4s var(--ease),border-color .4s}
.faq-grid .faq-item.open{border-color:var(--honey-soft);box-shadow:0 14px 32px rgba(200,134,30,.1)}
.faq-q{width:100%;text-align:left;background:none;border:0;font-family:inherit;cursor:pointer;padding:20px clamp(18px,2.4vw,26px);display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:clamp(1.02rem,1.45vw,1.2rem);font-weight:700;color:var(--ink)}
.faq-grid .faq-ic{transition:.4s var(--ease)}
.faq-grid .faq-ic::after{transition:transform .4s var(--ease)}
.faq-grid .faq-item.open .faq-ic{background:var(--honey);border-color:var(--honey)}
.faq-grid .faq-item.open .faq-ic::before,.faq-grid .faq-item.open .faq-ic::after{background:#1a1a1a}
.faq-grid .faq-item.open .faq-ic::after{transform:translate(-50%,-50%) scaleY(0)}
.faq-a-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s var(--ease)}
.faq-grid .faq-item.open .faq-a-wrap{grid-template-rows:1fr}
.faq-a{overflow:hidden}
.faq-a p{padding:0 clamp(18px,2.4vw,26px) 22px;color:var(--ink2);font-size:clamp(.96rem,1.2vw,1.06rem);line-height:1.55;max-width:64ch}

/* ---------- editor capabilities list (features.html) ---------- */
.cap-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:clamp(28px,4vh,44px)}
.cap-item{background:var(--paper);border:1px solid var(--border);border-radius:14px;padding:26px 26px;font-size:.92rem;color:var(--ink2);display:flex;gap:12px;align-items:flex-start}
.cap-item b{color:var(--ink);font-weight:700;display:block;margin-bottom:3px}
.cap-dot{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--honey);margin-top:7px;animation:pulseDot 2.6s ease-out infinite}
@media (prefers-reduced-motion:reduce){.cap-dot{animation:none}}
@media(max-width:600px){.cap-grid{grid-template-columns:1fr}}
.cap-grid.cols-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:880px){.cap-grid.cols-3{grid-template-columns:1fr}}
/* features "your notebook" — subtle assistant nudge chip woven under editor rows */
.ask-nudge{display:inline-flex;align-items:center;gap:7px;margin-top:18px;font-size:.82rem;font-weight:700;color:var(--honey-deep);background:rgba(200,134,30,.08);border:1px solid rgba(200,134,30,.2);padding:7px 13px;border-radius:999px;text-decoration:none;transition:background .3s var(--ease),transform .3s var(--spring)}
.ask-nudge:hover{background:rgba(200,134,30,.15);transform:translateX(2px)}
.ask-nudge .an-star{font-size:.95em;line-height:1}
.nb-first-staff{max-width:660px;margin:clamp(26px,4vh,44px) auto 0}
/* assistant "in your own words" — scrolling prompt rows */
.pcm{position:relative;overflow:hidden;margin:clamp(26px,4vh,44px) auto 0;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.pcm-row{display:flex;gap:12px;width:max-content;margin:12px 0}
.pcm-row.r1{animation:pcm-l 42s linear infinite}
.pcm-row.r2{animation:pcm-r 52s linear infinite}
.pcm-row.r3{animation:pcm-l 48s linear infinite}
.pcm:hover .pcm-row{animation-play-state:paused}
@keyframes pcm-l{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes pcm-r{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){.pcm-row{animation:none;flex-wrap:wrap;width:auto;justify-content:center}.pcm{-webkit-mask:none;mask:none}}
.pc-chip{font-size:.92rem;font-weight:600;color:var(--ink2);background:var(--paper);border:1px solid var(--border);border-radius:999px;padding:10px 18px;transition:transform .3s var(--spring),border-color .3s var(--ease),color .3s var(--ease);flex:0 0 auto}
.pc-chip:hover{transform:translateY(-2px);border-color:var(--honey-soft);color:var(--ink)}
.pc-chip.hl{color:var(--honey-deep);border-color:rgba(200,134,30,.35);background:rgba(200,134,30,.06)}
/* engagement — cards lift on hover across cap-grids (notation engine, how it works, other things) */
.cap-item{transition:transform .3s var(--spring),border-color .3s var(--ease),box-shadow .3s var(--ease)}
.cap-item:hover{transform:translateY(-3px);border-color:var(--honey-soft);box-shadow:0 12px 28px rgba(40,30,10,.08)}
/* structure break — instrument marquee (CSS auto-scroll, pauses on hover) */
.marquee-band{overflow:hidden;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--cream2);padding:clamp(18px,2.4vw,26px) 0}
.marquee-track{display:flex;align-items:center;width:max-content;animation:mqscroll 36s linear infinite}
.marquee-band:hover .marquee-track{animation-play-state:paused}
.mq-item{font-size:clamp(1.05rem,1.9vw,1.5rem);font-weight:700;color:var(--ink2);white-space:nowrap;padding:0 clamp(18px,2.6vw,36px)}
.mq-dot{color:var(--honey);font-size:1rem;flex:0 0 auto}
@keyframes mqscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none}}
/* structure break — "press play" honey playhead sweeping a static melody */
.playback-card{max-width:660px;margin:clamp(26px,4vh,44px) auto 0}
.pb-wrap{position:relative}
.pb-head{position:absolute;top:-8px;bottom:-8px;left:4%;width:2.5px;background:var(--honey);border-radius:2px;box-shadow:0 0 12px rgba(244,162,59,.65);animation:pbsweep 3.4s cubic-bezier(.45,0,.55,1) infinite}
@keyframes pbsweep{0%{left:2%;opacity:0}6%{opacity:1}94%{opacity:1}100%{left:98%;opacity:0}}
@media(prefers-reduced-motion:reduce){.pb-head{display:none}}
/* pricing — dedicated "student" tier (4th card) */
.price-card.student{background:rgba(200,134,30,.045);border-color:var(--honey-soft)}
.price-feats b{color:var(--ink);font-weight:800}
/* compare table — vertical dividers + category rows with icons + student sub-price */
.compare-table thead th:not(:first-child),.compare-table tbody td{border-left:1px solid var(--border)}
.compare-table tr.ct-cat th{background:var(--cream2);text-align:left;font-weight:800;color:var(--ink);font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;padding-top:17px;padding-bottom:11px;white-space:normal}
.ct-cat-ic{display:inline-flex;vertical-align:-3px;margin-right:9px;color:var(--honey-deep)}
.ct-cat-ic svg{width:16px;height:16px;display:block}
.tier-price em{display:block;font-style:normal;font-size:.72rem;color:var(--honey-deep);font-weight:700;margin-top:3px}

/* ---------- ai.html honesty block ---------- */
.honesty{background:var(--canvas);color:#e9e1d4;border-radius:var(--radius-lg);padding:clamp(30px,4vw,48px)}
.honesty h3{color:#fff;font-size:1.4rem}
.honesty ul{margin-top:18px;display:flex;flex-direction:column;gap:12px}
.honesty li{list-style:none;padding-left:20px;position:relative;color:#cabda9;font-size:.96rem;line-height:1.5}
.honesty li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--honey-soft)}
/* F6: progressive reveal driven every frame from __e1Honesty (not a one-shot IO class) — each
   bullet inks in keyed to its own scroll position, so scrolling slowly scrubs them in one by one. */
.honesty li{opacity:0;transform:translateY(16px)}
@media(prefers-reduced-motion:reduce){.honesty li{opacity:1!important;transform:none!important}}

/* ---------- footer ---------- */
.foot{background:var(--canvas2);color:#cfc6b8;padding:56px clamp(24px,6vw,90px) 40px}
.foot-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:32px;max-width:var(--maxw);margin:0 auto;padding-bottom:32px;border-bottom:1px solid rgba(255,255,255,.08)}
.foot-brand img{height:20px}
.foot-brand p{margin-top:14px;max-width:34ch;font-size:.9rem;color:#a89e8f;line-height:1.5}
.foot-cols{display:flex;gap:56px;flex-wrap:wrap}
.foot-col h4{font-size:.86rem;font-weight:700;letter-spacing:.01em;color:#8a8072;margin-bottom:14px}
.foot-col a,.foot-col span{display:block;font-size:.9rem;color:#cfc6b8;text-decoration:none;margin-bottom:10px}
.foot-col a:hover{color:var(--honey-soft)}
.foot-col .foot-soon{color:#75695a !important;display:flex;align-items:center;gap:8px}
.foot-soon .tag{display:inline-flex;align-items:center;font-size:.62rem;font-weight:700;border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:2px 9px;color:#a89e8f;background:rgba(255,255,255,.05)}
.foot-bottom{max-width:var(--maxw);margin:24px auto 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.82rem;color:#8a8072}
.foot-bottom a{text-decoration:none;color:#8a8072}
.foot-bottom a:hover{color:#cfc6b8}

/* ---------- stub pages (privacy/terms) ---------- */
.stub{padding:clamp(80px,12vh,140px) 0;text-align:center}
.stub h1{font-size:clamp(2rem,4vw,2.8rem)}
.stub p{margin-top:16px;color:var(--ink2);max-width:48ch;margin-left:auto;margin-right:auto}

/* ---------- full legal pages (privacy / terms) ---------- */
.legal{padding:clamp(56px,9vh,110px) 0}
.legal-wrap{max-width:760px}
.legal h1{font-size:clamp(2rem,4vw,2.7rem);margin-bottom:8px}
.legal-body{color:var(--ink2);line-height:1.65}
.legal-body>p:first-child{color:var(--muted);font-size:.9rem;margin-bottom:8px}
.legal-body h2{font-size:1.28rem;color:var(--ink);margin:36px 0 10px;letter-spacing:-.01em}
.legal-body h3{font-size:1.06rem;color:var(--ink);margin:24px 0 8px}
.legal-body p{margin:11px 0}
.legal-body ul{margin:11px 0;padding-left:22px}
.legal-body li{margin:7px 0}
.legal-body strong{color:var(--ink);font-weight:700}
.legal-body a{color:var(--honey-deep);font-weight:600}

/* ============================================================
   E1 additions — the blend: scroll set pieces + self-running
   vignettes + hard panels, layered onto the D1 base. Scoped
   additively; nothing above is overridden.
   ============================================================ */
:root{--honey3:#f4c06a}

/* nav goes solid-dark while a dark scroll piece (the tour) sits behind it */
.nav.on-dark{background:#14100c;border-color:rgba(255,255,255,.12)}
.nav.on-dark .nav-links a{color:#ece3d4}
.nav.on-dark .nav-links a:hover{background:rgba(255,255,255,.1)}

/* ---------- two-column layout (chapter scenes) ---------- */
.two{display:grid;grid-template-columns:1.02fr 1.05fr;gap:clamp(30px,4vw,64px);align-items:center}
.two.rev .copy{order:2}.two.rev .visual{order:1}
.two .copy{max-width:540px}
.two .visual{display:flex;justify-content:center;min-width:0}
@media(max-width:880px){.two,.two.rev{grid-template-columns:1fr;gap:28px}.two.rev .copy,.two.rev .visual{order:initial}.two .visual{order:-1}}

/* ---------- hard panel: single real screenshot + CTA ----------
   E1r2g: this IS the hook — "the first impression of what the actual thing is" per Brian —
   so it gets statement-sized type and generous space, not paragraph-sized copy in a tight band. */
.panel-single{max-width:880px;margin:0 auto;text-align:center}
.panel-single h2{font-size:clamp(2.1rem,4.3vw,3.4rem);letter-spacing:-.03em;max-width:20ch;margin:0 auto}
.panel-single .browser-frame{margin-top:clamp(30px,4.5vh,48px);text-align:left}
.panel-single .btn{margin-top:clamp(26px,4vh,38px)}
/* issue 2: dial the hook section down a notch so heading+sub+mock fit roughly one viewport */
.hook-panel{padding:clamp(48px,7vh,84px) 0}

/* ---------- hook panel mock: CSS-built dark editor, not a screenshot ----------
   Reuses the .app/.score-svg vocabulary (toolbar, rail, staff, assist panel) verbatim
   from MOCK()/SCORE in app.js, recolored ink-on-black instead of paper-on-cream. Static —
   no scroll/JS dependency. Notes stay black/ink (human) except .hook-chord, the one
   AI-voiced chord, in honey — sparingly, the only orange in the whole panel. */
.hook-frame{background:#0f0b06;border-color:#2c2415;box-shadow:0 55px 120px rgba(10,7,2,.4),0 8px 22px rgba(10,7,2,.28)}
.hook-frame .chrome-bar{background:#171009;border-bottom-color:#2c2415}
.hook-frame .chrome-dot{background:#3a2f1c}
.hook-frame .chrome-dot:nth-child(3){background:var(--honey)}
.hook-frame .chrome-url{background:#1c150c;border-color:#332a19;color:#a89a86}
.hook-mock{padding:clamp(20px,3vw,36px);display:flex;justify-content:center}
.hook-mock .app{max-width:640px;background:#140f08;border-color:#2c2415;box-shadow:0 30px 70px -20px rgba(0,0,0,.55)}
.hook-mock .app-top,.hook-mock .app-rail,.hook-mock .app-assist,.hook-mock .app-bottom{background:#19130a;border-color:#2c2415}
.hook-mock .app-file{color:#c8b89e}
.hook-mock .app-menu span{color:#8d8070}
.hook-mock .pill-t{background:#1c150c;border-color:#332a19;color:#c8b89e}
.hook-mock .pill-t.ai{background:rgba(244,162,59,.16);border-color:rgba(244,162,59,.4);color:var(--honey)}
.hook-mock .rail-b{background:#1c150c;border-color:#332a19;color:#8d8070}
.hook-mock .rail-b.on{background:#e8ddc8;color:#140f08;border-color:#e8ddc8}
.hook-mock .app-score{background:linear-gradient(180deg,#181209,#0e0a05);box-shadow:inset 0 0 60px rgba(0,0,0,.4)}
.hook-mock .score-svg{background:#0d0904;border-color:#2c2415;box-shadow:0 24px 54px -18px rgba(0,0,0,.6)}
.hook-mock .brace,.hook-mock .stave,.hook-mock .bar{stroke:#4a3d28}
.hook-mock .clef,.hook-mock .ts,.hook-mock .nh2{fill:#ece0cb}
.hook-mock .stem{stroke:#ece0cb}
.hook-mock .wn{stroke:#ece0cb}
.hook-mock .hook-chord ellipse{fill:var(--honey)}
.hook-mock .hook-chord line{stroke:var(--honey-deep);stroke-width:1.6}
.hook-mock .assist-h{color:var(--honey)}
.hook-mock .assist-line{color:#c8b89e;border-left-color:var(--honey)}
.hook-mock .sugg{background:#1c150c;border-color:#332a19;color:#c8b89e}
.hook-mock .sugg.pick{border-color:var(--honey);box-shadow:0 8px 20px rgba(244,162,59,.14)}
.hook-mock .sugg .st{color:var(--honey)}

/* -- command box mock (ai.html "the command box" — a typed command + the score it just changed,
   not an empty placeholder screenshot; issue 7) -- */
.cmdbar{display:flex;align-items:center;gap:10px;margin:14px 14px 0;padding:11px 16px;border-radius:10px;background:#1c150c;border:1px solid #332a19;font-size:.85rem}
.cmdbar-i{color:var(--honey);flex:0 0 auto}
.cmdbar-text{color:#e8ddc8;font-weight:600;flex:1}
.cmdbar-run{font-size:.72rem;font-weight:700;color:#1a1a1a;background:var(--honey);border-radius:999px;padding:5px 12px;flex:0 0 auto;white-space:nowrap}
@media(max-width:600px){.hook-mock{padding:14px}.hook-mock .app{font-size:11px}.hook-mock .app-main{grid-template-columns:44px 1fr 0;overflow:hidden}.hook-mock .app-assist{display:none}}

/* mini staff / chord voicing + hum demos (buildStaff language, verbatim from weave-free) */
.mini-staff{align-self:stretch;padding-top:18px}
.mini-staff .ln{background:var(--border);opacity:.7}
.mini-staff .chordnote{opacity:0;transform:rotate(-18deg) scale(.55);transition:opacity .55s var(--ease),transform .55s var(--spring)}
.mini-staff.voicing .chordnote{opacity:1;transform:rotate(-18deg) scale(1)}
.mini-hl{position:absolute;border-radius:8px;background:rgba(200,134,30,.13);border:1px solid rgba(224,162,59,.55);opacity:0;transition:opacity .55s var(--ease)}
.mini-staff.voicing .mini-hl{opacity:1}
.voice-tag{position:absolute;right:0;bottom:100%;margin-bottom:9px;font-size:.66rem;font-weight:700;letter-spacing:.06em;color:var(--honey-deep);background:rgba(200,134,30,.14);border:1px solid rgba(200,134,30,.34);border-radius:99px;padding:3px 10px;opacity:0;transform:translateY(4px);transition:.45s var(--ease);box-shadow:0 4px 12px rgba(200,134,30,.12)}
.mini-staff.voicing .voice-tag{opacity:1;transform:none}
/* on narrow cards (.two collapses to 1-col below 880px) copy runs long enough that
   margin-top:auto leaves ~0 clearance above the staff, so the floating tag lands on top of the
   paragraph above it — force a fixed gap on mobile instead of relying on the auto-margin push */
@media(max-width:880px){.mini-staff{margin-top:38px}}
/* I4: root cause of the flat/stretched render — this card sits in the wide 2-col .deep-row
   (~500px) instead of weave-free's ~380-430px bento column, and a stray padding-top:14px (not
   in the original) ate into the fixed height:88px, shrinking the SVG's real content box to
   74px tall. Both together pushed the rendered aspect from the original's ~4.2:1 (svgW/svgH,
   measured on weave-free) to ~6:1 here — since the path uses preserveAspectRatio="none", that
   extra stretch squashes the curve's vertical excursion until it reads flat, while the JS
   counter-scale keeps noteheads a constant rendered px size regardless (so they look
   disproportionately bold against the flattened trace). Fix: drop the padding-top, cap the
   stage to the original's ratio, and center it in the wider card instead of stretching to fill it. */
/* Round K: hum → notation panel = compact notei editor mock (index #feat-hum, features #hum-notation).
   Replaces the old abstract .hum-demo squiggle; matches the notebook-tour editor look. The hummed line
   AND its transcription are the HUMAN's own material, so the curve and every notehead are ink, not honey
   (ink=human / honey=AI rule). The pill/dot chrome carries notei's involvement instead. */
.hum-ed{width:100%;max-width:400px;margin:0 auto;background:var(--paper);border:1px solid var(--border);border-radius:14px;box-shadow:0 1px 2px rgba(20,17,10,.05),0 22px 44px -26px rgba(40,28,10,.35);overflow:hidden}
.he-top{display:flex;align-items:center;gap:9px;padding:9px 13px;border-bottom:1px solid var(--border);background:rgba(20,17,10,.015)}
.he-dot{width:9px;height:9px;border-radius:50%;background:var(--honey);flex:none}
.he-file{font-size:.82rem;font-weight:600;color:var(--ink);letter-spacing:.005em}
.he-pills{margin-left:auto;display:flex;gap:6px}
.he-pill{font-size:.62rem;font-weight:600;color:var(--muted);border:1px solid var(--border);border-radius:6px;padding:3px 7px;line-height:1;white-space:nowrap}
.he-pill.ai{color:var(--honey-deep);border-color:rgba(200,134,30,.35)}
.he-body{padding:12px 14px 11px}
.he-svg{width:100%;height:auto;display:block;overflow:visible}
.he-stave line{stroke:var(--border);stroke-width:1.2}
.he-clef{fill:var(--engrave);font-family:'Bravura'}
.he-hum{stroke:var(--ink2);stroke-width:2.4;fill:none;stroke-linecap:round;opacity:.85}
.he-assist{display:flex;align-items:center;gap:7px;margin-top:9px;font-size:.72rem;color:var(--muted);font-weight:500}
.he-assist-dot{width:6px;height:6px;border-radius:50%;background:var(--honey);flex:none}

/* ---------- SCROLL SET PIECE 1 — "the boring part" (clip-wipe chapter, ~300vh) ---------- */
.chapter{position:relative}
.ch-pin{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--cream)}
.slate{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:radial-gradient(125% 135% at 50% 50%,#241d16,#0e0b08);color:#f3ece0;padding:var(--nav-h) 26px 0}
/* padding-top:var(--nav-h) — the sticky nav overlays the top 66px of this dark band, so centering
   against the full 100vh (as before) reads bottom-heavy: the visible content sits ~66px above true
   center. Reserving that space up front makes justify-content:center balance the space viewers
   actually see, below the nav. */
.slate .ch-no{display:inline-flex;align-items:center;gap:10px;font-size:.7rem;font-weight:700;letter-spacing:.02em;color:var(--honey-soft);margin-bottom:26px}
.slate .ch-no::before,.slate .ch-no::after{content:"";width:26px;height:1px;background:rgba(244,192,106,.5)}
.slate .ch-ti{font-size:clamp(2.1rem,5vw,3.8rem);font-weight:900;line-height:1.0;letter-spacing:-.04em;max-width:18ch}
.slate .ch-sb{font-size:clamp(1rem,1.4vw,1.2rem);color:#cabda9;opacity:.84;max-width:32ch;margin-top:18px;line-height:1.5}
.scene{position:absolute;inset:0;z-index:2;display:flex;align-items:center;background:var(--cream);will-change:clip-path}
.yawn{font-weight:400;font-style:italic;color:var(--honey-deep);opacity:.85}
.instead{color:var(--honey-deep);font-weight:700}

.ba{display:grid;grid-template-columns:1fr 1fr;border-radius:20px;overflow:hidden;box-shadow:0 30px 70px rgba(60,40,10,.16);width:100%;max-width:620px}
.ba .h{padding:26px clamp(18px,2.2vw,30px);position:relative;min-height:min(52vh,420px);display:flex;flex-direction:column;justify-content:center}
.ba .byhand{background:#201b17;color:#cfc6bc}
.ba .bynotei{background:var(--paper);color:var(--ink);position:relative}
.vlabel{font-size:.71rem;font-weight:700;letter-spacing:.02em;opacity:.66;margin-bottom:12px}
.timer{font-family:var(--font);font-weight:800;font-size:2.4rem;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.timer.slow{color:#d09a9a}.timer.fast{color:var(--honey-deep)}
.flash{position:absolute;inset:0;background:radial-gradient(circle at 35% 50%,rgba(200,134,30,.28),transparent 55%);opacity:0;pointer-events:none}
.ck{color:#3fae6b;opacity:0;margin-left:8px}

@media(max-width:880px),(max-height:560px){
  .chapter{height:auto!important}
  .ch-pin{position:static;height:auto;overflow:visible}
  .slate{position:relative;inset:auto;min-height:56vh}
  .scene{position:relative;inset:auto;clip-path:none!important;padding:70px 0}
  .ba{grid-template-columns:1fr}
}

/* ---------- SCROLL SET PIECE 2 — cinematic tour, restored verbatim from weave-free/index.html: full
   820vh camera path, hum-trace + snap-notes + assist-panel + export-chip assets, and the JS-driven
   .tour-static fallback (mobile/reduced-motion) in place of the old prefers-reduced-motion-only rule. ---------- */
.tour-track{position:relative;width:100%;height:820vh;background:#100c09}
.tour-pin{position:sticky;top:0;height:100vh;overflow:hidden;background:radial-gradient(118% 84% at 50% 44%,#241d16 0%,#17120e 66%,#100c09 100%)}
.tour-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.tour-glow{position:absolute;width:min(1000px,82vw);height:min(600px,54vh);left:50%;top:46%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(224,162,59,.26),rgba(224,162,59,0) 62%);filter:blur(46px);pointer-events:none}
.cam{position:relative;width:min(1180px,93vw);transform-origin:center center;will-change:transform;z-index:2}
.cam .app{max-width:none;width:100%;font-size:14px}
.cam .app .app-top,.cam .app .app-rail,.cam .app .app-assist,.cam .app .app-bottom,.cam .app .app-score{transition:opacity .55s var(--ease),filter .55s var(--ease)}
.cam .app.f-score .app-rail,.cam .app.f-score .app-assist,.cam .app.f-score .app-top,.cam .app.f-score .app-bottom{opacity:.3;filter:saturate(.55)}
.cam .app.f-assist .app-rail,.cam .app.f-assist .app-score,.cam .app.f-assist .app-top,.cam .app.f-assist .app-bottom{opacity:.3;filter:saturate(.55)}
.cam .app.f-assist .app-assist{box-shadow:inset 0 0 0 1.5px var(--honey-soft),0 0 26px rgba(224,162,59,.18)}
.cam .app.f-transport .app-rail,.cam .app.f-transport .app-score,.cam .app.f-transport .app-top,.cam .app.f-transport .app-assist{opacity:.3;filter:saturate(.55)}
.cam .app.f-transport .app-bottom{box-shadow:0 0 26px rgba(224,162,59,.16)}
.cam .hl-chord,.cam .hl-hum{transition:none}
.cam .crd,.cam .crd-halo,.cam .snap{transform-box:fill-box;transform-origin:center;opacity:0}
.export-chips{position:absolute;left:50%;transform:translateX(-50%);bottom:46px;display:flex;gap:7px;pointer-events:none;z-index:3}
.export-chips span{font-size:12px;font-weight:700;color:var(--honey-deep);background:rgba(200,134,30,.16);border:1px solid rgba(200,134,30,.5);border-radius:999px;padding:5px 12px;opacity:0;box-shadow:0 6px 16px rgba(200,134,30,.2);white-space:nowrap}
.tour-vignette{position:absolute;inset:0;pointer-events:none;z-index:4;background:radial-gradient(125% 95% at 50% 46%,transparent 40%,rgba(10,7,5,.14) 72%,rgba(10,7,5,.5) 100%)}
.tour-hud{position:absolute;left:0;right:0;top:0;z-index:6;display:flex;flex-direction:column;align-items:center;gap:14px;padding:92px 0 0;pointer-events:none}
.tbar-wrap{width:min(440px,60vw);height:3px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden}
.tbar{height:100%;width:0;background:linear-gradient(90deg,var(--honey),var(--honey3));border-radius:99px}
.tour-dots{display:flex;gap:10px}
.tour-dots .dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.22);transition:background .4s var(--ease),transform .4s var(--spring)}
.tour-dots .dot.on{background:var(--honey-soft);transform:scale(1.5);box-shadow:0 0 12px rgba(224,162,59,.6)}
.caps{position:absolute;left:0;right:0;bottom:10vh;z-index:6;display:flex;justify-content:center;pointer-events:none;min-height:160px}
.cap{position:absolute;left:50%;transform:translateX(-50%);width:min(860px,90vw);text-align:center;opacity:0;background:rgba(18,14,10,.46);backdrop-filter:blur(10px) saturate(150%);-webkit-backdrop-filter:blur(10px) saturate(150%);border:1px solid rgba(255,255,255,.1);border-radius:22px;padding:16px 24px;box-shadow:0 20px 50px rgba(0,0,0,.4)}
.cap-eyebrow{display:block;font-size:.84rem;font-weight:700;letter-spacing:.02em;color:var(--honey3);margin-bottom:13px}
.cap-line{display:block;font-size:clamp(1.7rem,3vw,2.7rem);font-weight:700;line-height:1.15;letter-spacing:-.025em;color:#fbf4e6}
.tour-track.tour-static{height:auto!important} /* mobile/reduced-motion: .tour-track itself carries the pinned-scrub inline height (style="height:1330vh" on the <section>), which only a stylesheet !important can beat (inline style otherwise outranks a plain class rule). The static fallback below drops position:sticky entirely, so without this the stacked captions (~500px) sat at the top of an 1330vh-tall box — a huge empty dead zone underneath (mobile sweep, shots-final). Same fix as the existing `.chapter{height:auto!important}` rule above for the sibling scroll-jack chapters. */
.tour-track.tour-static .tour-pin{position:relative;height:auto;padding:60px 0 48px}
.tour-track.tour-static .tour-stage{position:relative;inset:auto;height:auto;padding:0 18px}
.tour-track.tour-static .cam{transform:none!important;margin:0 auto}
.tour-track.tour-static .tour-vignette,.tour-track.tour-static .tour-hud,.tour-track.tour-static .tour-glow{display:none}
.tour-track.tour-static .caps{position:relative;bottom:auto;min-height:0;flex-direction:column;gap:14px;margin:34px auto 0;align-items:center}
.tour-track.tour-static .cap{position:relative;left:auto;transform:none!important;opacity:1!important}
@media(max-width:760px){.cam{width:94vw}.cap{padding:12px 16px}.cap-line{font-size:clamp(1.35rem,5.4vw,1.9rem)}}
/* below the JS MOB() threshold (880px) the tour caption's inline transform is forced to 'none' (static/no-scrub layout),
   so centering must not rely on translateX(-50%) — use left/right+margin auto instead (transform-independent). */
@media(max-width:880px){.cap{left:0;right:0;margin:0 auto}}

/* ============ the notei editor mock (verbatim language from weave-free, tokens remapped to D1) ============ */
.app{width:100%;max-width:720px;border-radius:15px;background:var(--paper);border:1px solid var(--border);box-shadow:0 40px 90px rgba(40,30,10,.17),0 4px 12px rgba(40,30,10,.06);overflow:hidden;font-size:13px}
.app-top{display:flex;align-items:center;gap:9px;padding:10px 14px;border-bottom:1px solid var(--border);background:var(--cream2)}
.tdot{width:11px;height:11px;border-radius:50%;background:#dccfb8}.tdot.r{background:var(--honey-soft)}
.app-file{font-weight:600;color:var(--muted);margin-left:5px}
.app-menu{display:flex;gap:13px;margin-left:13px}
.app-menu span{color:#9a8f80;font-weight:500;font-size:12px}
.app-tools{margin-left:auto;display:flex;align-items:center;gap:7px}
.pill-t{font-size:11px;font-weight:600;color:var(--ink2);background:#fff;border:1px solid var(--border);border-radius:7px;padding:4px 9px;white-space:nowrap}
/* paid-tier marker — reuses the notei star-pill look */
.paid-tag{display:inline-flex;align-items:center;gap:5px;font-size:.68rem;font-weight:700;letter-spacing:.02em;color:var(--honey-deep);background:rgba(200,134,30,.12);border:1px solid rgba(200,134,30,.4);border-radius:999px;padding:2px 9px;vertical-align:middle;white-space:nowrap}
.cap-item.paid{background:rgba(200,134,30,.05);border-color:var(--honey-soft)}
.paid-note{margin-top:16px;text-align:center;font-size:.85rem;color:var(--ink2)}
.paid-note a{color:var(--honey-deep);font-weight:700}
.pill-t.ai{background:rgba(200,134,30,.12);border-color:rgba(200,134,30,.4);color:var(--honey-deep)}
.app-main{display:grid;grid-template-columns:58px 1fr 228px}
.app-rail{border-right:1px solid var(--border);background:var(--cream2);display:flex;flex-direction:column;align-items:center;gap:9px;padding:13px 0}
.rail-b{width:32px;height:32px;border-radius:7px;background:#fff;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:17px;line-height:1}
.rail-b.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.app-score{position:relative;padding:20px 18px;background:linear-gradient(180deg,var(--cream2),var(--cream-faint));box-shadow:inset 0 0 60px rgba(150,108,38,.09);display:flex;align-items:center;justify-content:center}
.score-svg{width:100%;height:auto;display:block;background:var(--paper);border:1px solid var(--border);border-radius:7px;box-shadow:0 22px 48px -18px rgba(120,80,20,.30),0 6px 16px -8px rgba(120,80,20,.20);padding:10px 14px}
.app-assist{border-left:1px solid var(--border);background:var(--cream);padding:14px 16px}
.assist-h{font-size:11px;font-weight:700;letter-spacing:.02em;color:var(--honey-deep);display:flex;align-items:center;gap:6px}
.assist-h::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--honey-soft)}
.assist-line{font-size:13px;color:var(--ink2);margin-top:11px;line-height:1.4;border-left:2px solid var(--honey-soft);padding-left:9px;min-height:1.4em}
.sugg{margin-top:10px;padding:10px 11px;border-radius:10px;border:1px solid var(--border);background:#fff;font-size:12.5px;color:var(--ink2);line-height:1.35}
.sugg.pick{border-color:var(--honey-soft);box-shadow:0 8px 18px rgba(200,134,30,.13)}
.sugg .st{font-weight:700;color:var(--honey-deep);margin-bottom:2px}
.app-bottom{display:flex;align-items:center;gap:11px;padding:9px 14px;border-top:1px solid var(--border);background:var(--cream2)}
.bplay{width:27px;height:27px;border-radius:50%;background:var(--honey);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.bplay i{width:0;height:0;border-left:8px solid #1a1a1a;border-top:5px solid transparent;border-bottom:5px solid transparent;margin-left:2px}
.btime{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.btrack{flex:1;height:5px;border-radius:99px;background:var(--border);position:relative}
.btrack i{position:absolute;left:0;top:0;bottom:0;width:34%;background:var(--honey);border-radius:99px}
.stave{stroke:#cdbb9a;stroke-width:1}
.brace{stroke:#a89878;stroke-width:2.4;fill:none}
.clef{fill:var(--engrave);font-family:'Bravura'}
.nh2{fill:var(--engrave)}
.wn{fill:none;stroke:var(--engrave);stroke-width:2.4}
.stem{stroke:var(--engrave);stroke-width:1.6}
.bar{stroke:#9a8a6c;stroke-width:1.3}
.ts{fill:var(--engrave);font-weight:800}
.hl-chord{fill:rgba(200,134,30,.13);stroke:rgba(224,162,59,.6);stroke-width:1.2;opacity:0}
.hl-hum{stroke:#c8861e;stroke-width:2.6;fill:none;opacity:0;stroke-linecap:round}

/* Round K: home "ask notei" self-running editor demo (#askEditor). Reuses the .app editor
   vocabulary; adds only the live assist input/reply lines + a mobile stack so the 3-col editor
   grid doesn't overflow 390px. */
.scene.ask-scene{flex-direction:column;justify-content:center;gap:clamp(18px,3.4vh,34px)}
#askEditor .ask-frame{width:100%;max-width:720px;margin:0 auto}
#askEditor .app-score{padding:14px 16px}
.assist-q{margin-top:12px;font-size:12.5px;font-weight:500;color:var(--ink);line-height:1.45;background:#fff;border:1px solid var(--border);border-radius:9px;padding:9px 11px;min-height:2.7em}
.assist-q.typing{border-color:var(--honey-soft)}
.assist-a{margin-top:11px;font-size:13px;color:var(--ink2);line-height:1.4;border-left:2px solid var(--honey-soft);padding-left:9px;min-height:1.4em}
#haSugg{opacity:0} /* JS fades it in with the answer */
.ask-open{margin-left:auto;font-size:12px;font-weight:600;color:var(--honey-deep);text-decoration:none;white-space:nowrap;border-bottom:1px solid transparent;transition:border-color .2s var(--ease)}
.ask-open:hover{border-bottom-color:var(--honey-deep)}
#haNotes .ha-n,#haCtx .ha-n{will-change:opacity}
@media(max-width:600px){
  #askEditor .app-main{grid-template-columns:1fr}
  #askEditor .app-rail{flex-direction:row;justify-content:center;gap:12px;border-right:none;border-bottom:1px solid var(--border);padding:9px 0}
  #askEditor .app-assist{border-left:none;border-top:1px solid var(--border)}
  #askEditor .app-menu{display:none} /* free top-bar room so the tempo / AI pills don't clip on narrow screens */
}

/* ============================================================
   E1r2 "polish + 3x motion" additions — every section below gets
   some scroll response: hairline draw-ins, drifting decorative
   glyphs, a pinned "how it works" step-through, and a scrub-linked
   pan/zoom on real screenshots. Transform/opacity only, additive.
   ============================================================ */

/* -- hairline rule that draws itself across as a head enters view -- */
.rule-draw{width:100%;max-width:120px;height:1px;background:linear-gradient(90deg,transparent,var(--honey-soft),transparent);transform:scaleX(0);transform-origin:center;transition:transform .9s var(--ease);margin:0 auto 14px}
.head:not(.center) .rule-draw{margin:0 0 20px;transform-origin:left}
.rule-draw.in{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){.rule-draw{transform:scaleX(1);transition:none}}

/* -- decorative background glyphs, drift at a slower rate than scroll -- */
.bg-glyph{display:none}
.dk .bg-glyph{opacity:.07}
@media(max-width:880px){.bg-glyph{display:none}}

/* -- fade.lift — a slightly stronger entrance for card grids that should feel "lifted in" -- */
.fade.lift{transform:translateY(20px) scale(.97)}
.fade.lift.in{transform:none}

/* -- browser-frame screenshots pan/zoom + deepen their shadow as they scrub through the viewport -- */
.browser-frame img{will-change:transform;transform-origin:center}

/* ---------- SCROLL SET PIECE — "how it works" pinned 3-step band (~240vh) ----------
   Reuses the .chapter/.ch-pin/.slate->.scene clip-wipe vocabulary from the boring-part
   chapter. Mobile/reduced-motion fallback renders the plain 3-column .how-row grid
   (the same static component other variants use), no JS, no pin. */
.howto-wrap{width:100%;text-align:center;position:relative;z-index:1}
.howto-scene .eyebrow{margin-bottom:clamp(28px,5vh,44px)}
.howto-scene .how-row{position:relative;height:clamp(340px,46vh,440px);margin-top:0}
.howto-scene .how-step{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .5s var(--ease);pointer-events:none;max-width:760px;margin:0 auto;background:none;border:0;padding:0}
.howto-scene .how-step.active{opacity:1;transform:none;pointer-events:auto}
.howto-scene .how-n{font-size:.78rem}
.howto-scene .how-step h3{margin-top:12px;font-size:clamp(1.5rem,2.6vw,2rem)}
.howto-scene .how-step p{margin-top:10px;font-size:1.02rem;color:var(--ink2);max-width:46ch;line-height:1.55}
/* E1r2g: write/ask/hear all use the SAME .vign card (Brian: the row read "unbalanced" because
   write/ask were screenshots in one box size and hear was a flat CSS strip in another). One
   component, one size, for all three — see .howto-scene .vign below. */
.howto-scene .vign{margin-top:22px;width:100%;max-width:520px;padding:clamp(22px,3vw,34px);min-height:220px}
.tbar-mock{width:100%;display:flex;align-items:center;gap:18px}
.tbar-play{width:34px;height:34px;flex:0 0 auto;border-radius:50%;border:0;background:var(--honey);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(200,134,30,.35);cursor:default}
.tbar-play-i{width:0;height:0;margin-left:3px;border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent #fff}
.tbar-time{flex:0 0 auto;font-size:.85rem;font-variant-numeric:tabular-nums;color:var(--ink2)}
.tbar-track{flex:1;height:4px;border-radius:2px;background:var(--cream2)}
.tbar-fill{width:36%;height:100%;border-radius:2px;background:var(--honey)}
.howto-dots{display:flex;justify-content:center;gap:10px;margin-top:clamp(20px,3vh,32px)}
.howto-dots .dot{width:7px;height:7px;border-radius:50%;background:var(--border);transition:background .4s var(--ease),transform .4s var(--spring)}
.howto-dots .dot.on{background:var(--honey);transform:scale(1.5)}
@media(max-width:880px),(max-height:560px),(prefers-reduced-motion:reduce){
  /* wave2: the JS reduced-motion path marks all 3 steps .active at once (by design — no timed
     walkthrough without motion), but the pinned layout above absolutely-positions all 3 steps on
     top of each other, so without this the text piles up unreadable. Reduced-motion gets the same
     plain stacked grid as mobile — the fallback the comment above always intended. */
  .howto-scene .how-row{height:auto;grid-template-columns:1fr;display:grid;gap:16px;margin-top:8px}
  .howto-scene .how-step{position:static;opacity:1;transform:none;text-align:left;align-items:flex-start;max-width:none;background:var(--paper);border:1px solid var(--border);border-radius:var(--radius);padding:26px 24px}
  .howto-scene .how-step p{max-width:none}
  .howto-scene .vign{margin:16px 0 0}
  .howto-dots{display:none}
}

/* === howitworks-scrub === scroll-scrubbed write/ask/hear vignettes (buildStaff-drawn staffs,
   SVG clef, black=human/orange=AI note color). Only the ask step's compact staff needs this
   wrapper — write reuses the existing .vign-staff-wrap (position:relative already set there). */
.howto-mini-wrap{position:relative;width:100%;max-width:280px;margin:0 auto}
.howto-scene #howWriteStaff .nh,.howto-scene #howAskStaff .nh{transition:opacity .2s,transform .2s}

/* ============================================================
   E1r2g — major revision round: original-page sections lifted back in
   (stats band, join+changelog, socials), export-format vignette, and the
   layout-dynamics / de-pill / de-caps pass. See ../_kit/KIT.md for the
   locked style rule this round wrote.
   ============================================================ */

/* ---------- stats band: quiet typographic facts, not numeral tiles (Brian: "i don't like the numbers") ---------- */
/* I4c: number stat tiles, restored — ported one-for-one from weave-free's .stats-row/.stat-n/
   .stat-l (previously replaced with prose facts; Brian's ask this round is real numbers back). */
.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,4vw,60px);margin-top:clamp(30px,5vh,52px)}
.stat{text-align:left}
.stat-n{font-size:clamp(3rem,6.2vw,5rem);font-weight:900;letter-spacing:-.04em;color:var(--paper);font-variant-numeric:tabular-nums;line-height:1}
.stat-l{margin-top:10px;font-size:.86rem;letter-spacing:.02em;color:#9a8f80}
@media(max-width:600px){.stats-row{grid-template-columns:1fr;gap:26px}}

/* ---------- join + build-log, side by side (lifted from weave-free's su-wrap/grow-card) ---------- */
.su-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,4vw,64px);align-items:center;text-align:left}
.su-card h2{font-size:clamp(2.2rem,4.4vw,3.4rem)}
.su-card .su-sub{margin-top:14px;font-size:clamp(1.05rem,1.4vw,1.25rem);color:var(--ink2);line-height:1.5;max-width:46ch}
.perks{margin-top:24px;padding-top:20px;border-top:1px solid var(--cream-faint);display:flex;flex-direction:column;gap:13px}
.perk{display:flex;align-items:flex-start;gap:12px;font-size:.96rem;color:var(--ink2);line-height:1.4}
.perk .pk{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:rgba(200,134,30,.12);border:1px solid rgba(200,134,30,.3);position:relative;margin-top:1px}
.perk .pk::after{content:"";position:absolute;left:7px;top:4px;width:5px;height:9px;border-right:2px solid var(--honey-deep);border-bottom:2px solid var(--honey-deep);transform:rotate(40deg)}
.perk b{color:var(--ink);font-weight:700}
.grow-card{border-radius:22px;padding:7px;background:linear-gradient(160deg,rgba(255,255,255,.6),rgba(232,216,188,.32));border:1px solid var(--border);box-shadow:0 26px 60px rgba(60,40,10,.12)}
.grow-in{border-radius:16px;background:var(--paper);border:1px solid var(--cream-faint);padding:clamp(22px,2.4vw,30px)}
.grow-h{display:flex;align-items:center;gap:8px;font-size:.78rem;font-weight:700;letter-spacing:.01em;color:var(--honey-deep);margin-bottom:16px}
.grow-h::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--honey-soft);box-shadow:0 0 7px var(--honey-soft)}
.grow-in .log-card{box-shadow:none;border:0;padding:0;max-width:none;margin:0;background:transparent}
@media(max-width:880px){.su-wrap{grid-template-columns:1fr;gap:34px;text-align:center}}

/* ---------- socials, fused tiles (lifted from weave-free's fz- prefix; IG/YT present-but-inactive) ---------- */
.fz-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:clamp(26px,4vh,40px)}
.fz-tile{position:relative;display:flex;flex-direction:column;gap:16px;text-decoration:none;border-radius:var(--radius-lg);padding:26px 26px 20px;min-height:250px}
.fz-x{background:#15110d}
.fz-ig{background:linear-gradient(135deg,#f09433 0%,#dc2743 45%,#bc1888 100%)}
.fz-yt{background:#e0342a}
.fz-tile[href]{transition:transform .4s var(--spring)}
.fz-tile[href]:hover{transform:translateY(-4px)}
.fz-top{display:flex;align-items:center;gap:12px}
.fz-ic{width:36px;height:36px;flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.fz-ic svg{width:100%;height:100%}
.fz-handle{display:block;font-size:1rem;font-weight:800;color:#fff;letter-spacing:-.01em}
.fz-desc{display:block;font-size:.78rem;color:rgba(255,255,255,.6);line-height:1.3;margin-top:2px}
.fz-live{flex:1;border-radius:12px;background:rgba(0,0,0,.2);padding:12px 14px;display:flex;flex-direction:column;justify-content:center;gap:8px;border:1px solid rgba(255,255,255,.09)}
.fz-live-label{font-size:.68rem;font-weight:700;letter-spacing:.01em;color:rgba(255,255,255,.45)}
.fz-x-text{font-size:.85rem;color:rgba(255,255,255,.82);font-weight:500;line-height:1.5}
.fz-cta{display:inline-flex;align-items:center;gap:7px;font-size:.8rem;font-weight:700;color:rgba(255,255,255,.58)}
.fz-tile[href]:hover .fz-cta{color:#fff}
.fz-arr{width:11px;height:11px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);display:inline-block;flex:0 0 auto}
@media(max-width:880px){.fz-row{grid-template-columns:1fr;max-width:460px;margin-left:auto;margin-right:auto}}

/* ---------- export-format vignette (clean-exports feature — pure CSS, no screenshot) ---------- */
.fmts{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
.fmt{font-size:.9rem;font-weight:600;color:var(--ink2);background:var(--cream);border:1px solid var(--cream-faint);border-radius:10px;padding:10px 14px;display:flex;align-items:center;gap:8px;animation:fmtLight 4.8s ease-in-out infinite}
.fmt::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--honey-soft)}
.fmt:nth-child(1){animation-delay:0s}.fmt:nth-child(2){animation-delay:.5s}.fmt:nth-child(3){animation-delay:1s}.fmt:nth-child(4){animation-delay:1.5s}
@keyframes fmtLight{0%,8%{border-color:var(--cream-faint);background:var(--cream);color:var(--ink2)}18%,55%{border-color:var(--honey-soft);background:rgba(200,134,30,.1);color:var(--honey-deep)}70%,100%{border-color:var(--cream-faint);background:var(--cream);color:var(--ink2)}}
@media(prefers-reduced-motion:reduce){.fmt{animation:none;border-color:var(--honey-soft);background:rgba(200,134,30,.1);color:var(--honey-deep)}}

/* === hero-original === (ported from weave-free/index.html hero, namespaced oh-/hero-orig so it can't leak into other sections' shared .two/.copy/.sub/.dot classes) */
.hero-orig{position:relative;min-height:calc(100svh - var(--nav-h));display:flex;align-items:center;background:var(--cream);overflow:hidden}
.hero-orig-pin{width:100%;display:flex;align-items:center;padding:clamp(40px,6vh,64px) 0}
.oh-two{display:grid;grid-template-columns:1fr 1.18fr;gap:clamp(30px,4vw,72px);max-width:1280px;width:100%;margin:0 auto;padding:0 clamp(22px,4vw,56px);align-items:center}
.oh-copy{max-width:620px}
.oh-copy h1{font-weight:900;line-height:.95;letter-spacing:-.044em;color:var(--ink);font-size:clamp(2.4rem,4.7vw,4rem)}
.hero-orig .sub{margin-top:22px;font-size:clamp(1.08rem,1.45vw,1.34rem);line-height:1.46;color:var(--ink2);max-width:42ch}
.oh-btns{display:flex;align-items:center;gap:20px;margin-top:32px;flex-wrap:wrap}
.oh-hero-foot{margin-top:30px;display:flex;align-items:center;gap:11px;font-size:.86rem;color:var(--muted)}
/* flex:0 0 auto — without it the dot is a shrinkable flex item and the long
   trust-strip text crushes it to 5px at 320w. Same guard as .he-dot below. */
.oh-dot{flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:#3fae6b;box-shadow:0 0 0 4px rgba(63,174,107,.16)}
/* This strip is prose with an inline link, but display:flex makes every TEXT
   NODE its own flex item — fine on one desktop line, three cramped columns at
   390px ("a" orphaned, "high schooler" broken over two lines). Below 600px drop
   to normal inline flow so it wraps as the sentence it is. Desktop keeps flex,
   so the approved 1728px layout is untouched. */
@media(max-width:600px){
  .oh-hero-foot{display:block;line-height:1.75}
  .oh-hero-foot .oh-dot{display:inline-block;vertical-align:middle;margin-right:9px}
}
.oh-hs-link{color:inherit;text-decoration:underline;text-decoration-color:var(--honey);text-underline-offset:3px;text-decoration-thickness:2px;transition:color .25s}
.oh-hs-link:hover{color:var(--honey-deep)}
.oh-visual{display:flex;justify-content:center;min-width:0}
.oh-io{opacity:0;animation:ohRiseIn .9s var(--ease) both}
@keyframes ohRiseIn{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:880px),(max-height:560px){
  .hero-orig{min-height:auto}
  .hero-orig-pin{padding:48px 0 56px}
  .oh-two{grid-template-columns:1fr;gap:32px}
  .oh-visual{order:-1}
  .oh-copy h1{font-size:clamp(2.2rem,10vw,3.4rem)}
  .hero-orig .sub{max-width:46ch}
}
@media(prefers-reduced-motion:reduce){.oh-io{animation:none;opacity:1;transform:none}}

/* ============================================================
   ROUND D — connective flow + pattern breaks. Normal-flow only,
   no new pinned/scrubbed chapters. Transform/opacity, additive.
   ============================================================ */

/* ---------- unified header choreography: dot pulses -> hairline draws -> heading rises -> sub fades ----------
   Every .head block already shares eyebrow+rule-draw+h1/h2+p — one entrance sequence,
   timed off the SAME .head.in trigger (the existing generic .fade IO), so every section
   announces itself the same way, everywhere, instead of one flat fade. */
@keyframes headDotIn{0%{transform:scale(0)}62%{transform:scale(1.5)}100%{transform:scale(1)}}
.head .eyebrow::before{transform:scale(0)}
.head.in .eyebrow::before{animation:headDotIn .6s var(--spring) forwards}
.head.in .rule-draw{transform:scaleX(1);transition-delay:.15s}
.head h1,.head h2{opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.head.in h1,.head.in h2{opacity:1;transform:none;transition-delay:.3s}
.head p{opacity:0;transition:opacity .7s var(--ease)}
.head.in p{opacity:1;transition-delay:.5s}
@media (prefers-reduced-motion:reduce){
  .head .eyebrow::before{transform:none}
  .head.in .eyebrow::before{animation:none}
  .head h1,.head h2,.head p{opacity:1;transform:none;transition:none}
}

/* Continuity-motif seam thread REMOVED 2026-07-18 — .seam-thread/.seam-line/
   .seam-note appeared in zero HTML files, so this styled nothing. Its JS hook
   went with it. */

/* ---------- boundary feather: eases the seam where a cream section meets a dark one ---------- */
/* Tightened (shots-roundD/ai-offgrid-bleed: read as a grayish haze band). The old bottom stop was
   a semi-transparent rgba over the section's own cream/dark background, so the blend never reached
   the true neighboring color and stayed muddy right at the seam. Fixed by ending each gradient on
   the ACTUAL opaque neighbor color (--canvas / --cream) instead of an alpha mix, and shortening the
   distance so it reads as a deliberate short bloom, not a long smog band. */
.feather{position:absolute;left:0;right:0;height:clamp(64px,8vh,120px);pointer-events:none;opacity:0;transition:opacity 1.3s var(--ease);z-index:2}
.feather.top{top:0}
.feather.bottom{bottom:0}
.feather.in{opacity:1}
/* The `transparent` KEYWORD is rgba(0,0,0,0) — transparent BLACK — so a
   cream->dark gradient interpolated through mid-grey and read as a smog band.
   Each transparent stop must be a zero-alpha version of that gradient's OWN
   target colour so the ramp stays in-hue. (--canvas #191512, --cream #fdf8ef) */
.feather.feather-to-dark{background:linear-gradient(to bottom,rgba(25,21,18,0),var(--canvas))}
.feather.top.feather-to-dark{background:linear-gradient(to top,rgba(25,21,18,0),var(--canvas))}
.feather.feather-to-cream{background:linear-gradient(to bottom,rgba(253,248,239,0),var(--cream))}
.feather.top.feather-to-cream{background:linear-gradient(to top,rgba(253,248,239,0),var(--cream))}
@media(max-width:880px){.feather{display:none}}
@media(prefers-reduced-motion:reduce){.feather{opacity:1;transition:none}}

/* ---------- pattern break: full-width dark statement band (features.html / ai.html) ---------- */
.statement-band{overflow:hidden}
.statement-wrap{max-width:680px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:clamp(26px,4vh,38px)}
.statement-line{font-size:clamp(1.5rem,3.4vw,2.4rem);font-weight:800;letter-spacing:-.02em;line-height:1.28;color:#fff}
.statement-anim{position:relative;width:132px;height:26px;display:flex;align-items:center;justify-content:space-between}
.statement-anim .sa-line{position:absolute;left:5px;right:5px;top:50%;height:1px;background:rgba(255,255,255,.14)}
.sa-note{width:10px;height:10px;border-radius:50%;background:#e9e1d4;position:relative;z-index:1}
.sa-gap{width:10px;height:10px;border-radius:50%;border:1.5px dashed rgba(255,255,255,.32);position:relative;z-index:1;display:flex;align-items:center;justify-content:center}
.sa-fill{width:6px;height:6px;border-radius:50%;background:var(--honey);opacity:0;transform:scale(.3);animation:saFill 2.8s ease-in-out infinite}
@keyframes saFill{0%,38%{opacity:0;transform:scale(.3)}55%,84%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.3)}}
@media(prefers-reduced-motion:reduce){.sa-fill{animation:none;opacity:1;transform:scale(1)}}

/* ---------- pattern break: oversized centered vignette (features.html exports) ---------- */
.feature-wide{margin-top:clamp(90px,14vh,160px);display:flex;flex-direction:column;align-items:center;gap:28px;text-align:center}
.feature-wide-copy{max-width:620px}
.feature-wide-copy .eyebrow{justify-content:center;margin-bottom:10px}
.feature-wide-copy h3{font-size:clamp(1.5rem,2.4vw,1.9rem);margin-bottom:0}
.feature-wide-copy p{margin-left:auto;margin-right:auto;margin-top:12px}
.feature-wide-copy .limit{margin-top:12px}
.feature-wide-visual{width:100%}
.feature-wide-visual .vign{width:100%}
.fmts-wide{max-width:720px;margin:0 auto;grid-template-columns:repeat(4,1fr)}
@media(max-width:600px){.fmts-wide{grid-template-columns:1fr 1fr}}

/* exports card: a small finished score flowing into the format chips (score -> formats),
   so the oversized card reads as one composed idea instead of four chips floating in cream
   (shots-roundD/feat-oversized-exports: card was ~60% dead space). Reuses the same
   .vign-staff-wrap/.stf staff primitive every other feature vignette uses. */
/* min-height:0 overrides the shared .vign min-height:250px — that fixed floor was the direct cause
   of the ~60% dead space (content only needs ~215px; the extra ~35px/side was unfillable by design).
   Letting this card size to its own (now-richer) content keeps top/bottom margin proportionate. */
.exports-vign{min-height:0}
.exports-flow{display:flex;align-items:center;gap:clamp(20px,3vw,36px);width:100%;max-width:720px;margin:0 auto}
.exports-staff{flex:1 1 55%;margin:0;padding-top:10px}
.exports-arrow{flex:0 0 auto;font-size:clamp(1.3rem,2vw,1.8rem);color:var(--honey-deep)}
.exports-fmts{flex:1 1 40%;grid-template-columns:1fr 1fr;gap:14px;max-width:none;margin:0}
.exports-fmts .fmt{padding:14px 18px;font-size:1rem}
@media(max-width:880px){
  /* stacked mode: align-items:center (needed for the row layout's vertical centering) otherwise
     shrinks .exports-staff to its content width instead of stretching it full-width, collapsing
     .stf to ~0px and breaking buildStaff's width-based note math (notes bunched under the clef). */
  .exports-flow{flex-direction:column;align-items:stretch}
  .exports-staff{width:100%}
  .exports-arrow{align-self:center;transform:rotate(90deg)}
}

/* ---------- pattern break: off-grid bleed (ai.html arrange/harmonise/continue; features.html bring-anything, mirrored to the left) ---------- */
@media(min-width:881px){
  .deep-row.bleed-right .deep-visual{margin-right:calc((100vw - min(100vw,var(--maxw)))/-2 - clamp(20px,5vw,56px))}
  .deep-row.bleed-left .deep-visual{margin-left:calc((100vw - min(100vw,var(--maxw)))/-2 - clamp(20px,5vw,56px))}
}

/* ---------- pattern break: pinned "watch a phrase come together" (features.html, F1) ---------- */
.phrase-wrap{width:100%;text-align:center}
.phrase-wrap .head{margin:0 auto 28px}
.phrase-vign{max-width:720px;margin:0 auto;min-height:380px}
.phrase-caption{margin-top:24px;font-size:1.05rem;font-weight:600;color:var(--ink2)}

/* ---------- pattern break: pinned "command box, live" (ai.html, F4) — shares .phrase-caption ---------- */
.cmd-head{margin-left:auto;margin-right:auto;text-align:center}
.cmd-wrap{width:100%;text-align:center}
.cmd-vign{max-width:720px;margin:0 auto;min-height:380px}
.cmd-vign .cmdbar{margin:0}
#cmdRun{opacity:0;transition:opacity .2s}

/* hook-panel + #stats need position context to host a .feather */
.hook-panel{position:relative}
#stats{position:relative;overflow:hidden}
/* I4b: the feather sits absolutely inside the section's own bottom clamp(64px,8vh,120px), but
   #stats's own .tight padding-bottom (clamp(40px,6vh,72px)) is smaller than that in most
   viewports, so the gradient's top edge fell inside the content area over the stat tiles.
   Reserve bottom padding taller than the feather's own max height so it always sits fully
   below the tiles, never over them. */
#stats{padding-bottom:clamp(130px,16vh,170px)}

/* ============================================================
   ROUND G — heavy pass. Brian's verdict on round F: "barely any
   breaks... not enough animations to hold attention." Everything
   below either (a) converts a one-shot IO .fade into a continuous
   per-frame scroll-linked reveal that REVERSES on scroll-back, or
   (b) adds a new structural break (dark interstitial, pinned
   horizontal chapter, oversized parallax numerals). All driven
   from the ONE shared rAF loop at the bottom of app.js.
   ============================================================ */

/* ---------- G1 — generic continuous block reveal (replaces .fade for major blocks) ---------- */
.scrub-reveal{opacity:0;transform:translateY(80px);transition:none;will-change:opacity,transform}
@media(prefers-reduced-motion:reduce){.scrub-reveal{opacity:1;transform:none}}

/* G3/G8 parallax margin numerals REMOVED 2026-07-18. They were display:none in
   the base rule AND again in their own min-width:1100px query, so they never
   rendered for anyone — while still being built and transformed every scroll
   frame. Reviving them is not a bug fix: the -10vw offsets put them 54px past
   the viewport edge at 1100w, creating horizontal overflow across 1100-1292px.
   If the numerals are wanted, that is a new feature with its own gutter math. */
.deep-row,.feature-wide{position:relative}

/* ---------- G4 — pinned interstitial "write. hear. fix. repeat." (features.html, ~300vh) ----------
   Reuses the .chapter/.ch-pin/.scene vocabulary (and its existing mobile/880px unpin rule)
   verbatim; only .scene.words-scene needs its own dark background + column layout. */
.scene.words-scene{background:var(--canvas);flex-direction:column;justify-content:center;color:#fff}
.words-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:clamp(14px,3vw,34px);max-width:1100px;padding:0 26px}
.words-row .ww{font-size:clamp(2.6rem,11vw,9rem);font-weight:900;letter-spacing:-.03em;line-height:1;color:#f3ece0;opacity:0;transform:scale(.82) translateY(18px);white-space:nowrap;will-change:opacity,transform}
.words-row .ww.honey{color:var(--honey)}
@media(max-width:880px),(max-height:560px),(prefers-reduced-motion:reduce){.words-row .ww{opacity:1!important;transform:none!important}}

/* ---------- G6 — statement bands scrub in word-by-word instead of a one-shot fade ---------- */
.statement-line .sw{display:inline-block;will-change:opacity}
@media(prefers-reduced-motion:reduce){.statement-line .sw{opacity:1!important}}

/* ---------- J7 — "things people actually ask" is a pinned CHAT THREAD (ai.html, ~420vh, ch-strip).
   Replaces the round-G/I horizontal card carousel outright (still read as a carousel per Brian's
   last verdict). A fixed-height window (.chat-window, overflow:hidden) holds a vertical log of
   question/answer pairs; #chatStrip's JS scrubs a translateY on .chat-log so each pair gets its
   own turn — question bubble slides up, notei's honey avatar springs in, then the answer types or
   draws in. The log autoscrolls upward across each pair's turn, so earlier exchanges recede off
   the top edge under a fade mask (.chat-window::before) — the depth/recede cue is a literal
   consequence of the mechanic, not a separate scale/blur pass. ---------- */
.scene.chat-scene{flex-direction:column;justify-content:center;gap:clamp(14px,3vh,28px)}
/* 280px floor, not 420: on a 500px-tall window 58vh is 290px, so a 420px floor
   won the clamp and overflowed the 100vh pin it lives inside. */
.chat-window{position:relative;overflow:hidden;height:clamp(280px,58vh,600px);max-width:680px;margin:clamp(20px,4vh,40px) auto 0}
.chat-window::before{content:"";position:absolute;top:0;left:0;right:0;height:56px;background:linear-gradient(var(--cream),rgba(253,248,239,0));z-index:2;pointer-events:none}
.chat-log{position:relative;display:flex;flex-direction:column;gap:clamp(18px,3vh,30px);padding:6px 4px 48px;will-change:transform}
.msg-pair{display:flex;flex-direction:column;gap:10px}
.msg-q-row{display:flex;justify-content:flex-end}
.msg-q-bubble{max-width:78%;background:var(--paper);border:1px solid var(--border);border-radius:16px 16px 4px 16px;padding:12px 18px;font-weight:600;font-size:.96rem;color:var(--ink);box-shadow:0 10px 26px rgba(40,30,10,.07);will-change:opacity,transform}
.msg-a-row{display:flex;align-items:flex-start;gap:10px}
.msg-avatar{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--honey);color:#2a1c04;display:flex;align-items:center;justify-content:center;font-size:.85rem;will-change:opacity,transform}
.msg-a-bubble{max-width:78%;background:rgba(200,134,30,.08);border:1px solid rgba(200,134,30,.28);border-radius:16px 16px 16px 4px;padding:12px 18px;will-change:opacity}
.msg-a-text{font-size:.94rem;font-weight:600;color:var(--honey-deep);line-height:1.5;min-height:1.4em}
.msg-a-staff{position:relative;width:210px;max-width:100%} /* buildStaff sets its own inline height (gap/pad-derived); the explicit width is REQUIRED — notes are positioned by left:X%, so a zero/auto-width staff collapses every note to x≈0 (chords survive since all sit at 50%, melodies stack). Round K widened this so note-placing melodic answers spread across the staff. Script runs before first paint (script tag at end of body) so there's no flash */
.msg-a-fmts{grid-template-columns:repeat(2,1fr);gap:8px;max-width:220px}
.msg-a-fmts .fmt{font-size:.78rem;padding:7px 11px;animation:none}
.msg-a-fmts .fmt.on{border-color:var(--honey-soft);background:rgba(200,134,30,.14);color:var(--honey-deep)}
.msg-closing .msg-a-bubble{background:transparent;border:none;padding:0;max-width:none}
.msg-closing-link{display:inline-block;margin-top:8px;color:var(--honey-deep);font-weight:700;font-size:1.02rem;text-decoration:none;border-bottom:2px solid var(--honey-soft);padding-bottom:2px}
@media(max-width:880px),(max-height:560px),(prefers-reduced-motion:reduce){
  /* static stacked fallback: window un-pins to auto-height, every bubble/avatar/note/chip is
     already fully visible, no scroll transform on the log at all. */
  .chat-window{height:auto;overflow:visible;max-width:none}
  .chat-window::before{display:none}
  .chat-log{transform:none!important}
  .msg-q-bubble,.msg-avatar,.msg-a-bubble{opacity:1!important;transform:none!important}
  .msg-q-bubble,.msg-a-bubble{max-width:88%}
}
@media(max-width:600px){.msg-q-bubble,.msg-a-bubble{max-width:100%}}

/* ---------- G9 — "your data" trust section: one calm staff visual, not a card ---------- */
.data-staff-demo{max-width:360px;margin:36px auto 0}
.data-staff-note{margin-top:14px;font-size:.82rem;color:var(--muted);text-align:center}