/* ═══════════════════════════════════════════════════════════════
   DEMO PUBLIC PAGE  ·  Bureau editorial
   Aesthetic: small-press magazine + agency case study.
   - Cormorant Garamond for display (high-contrast didone serif).
   - Inter Tight for body (refined, slightly condensed).
   - JetBrains Mono for the live-call timer (LCD discipline).
   - Accent used as punctuation, not flood. Generous negative space.
   - Asymmetric hero, marginalia section numerals, rule lines.
   - Per-tenant branding via --aa-* tokens is fully preserved.
   ─────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Inter+Tight:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --aa-cream:    #FBF6EE;
  --aa-cream-2:  #F4EBD8;
  --aa-paper:    #FFFDF7;
  --aa-paper-2:  #FBF4E2;
  --aa-ink:      #1A1410;
  --aa-ink-2:    #3B2F26;
  --aa-mute:     #8B7B6E;
  --aa-c1:       #FF9E7A;
  --aa-c2:       #E84848;
  --aa-c2-deep:  #C72E2E;
  --aa-c2-soft:  rgba(232, 72, 72, .08);
  --aa-c3:       #4A7C4E;
  --aa-line:     rgba(26, 20, 16, .14);
  --aa-line-soft:rgba(26, 20, 16, .07);
  --aa-ok:       #5BAE7E;
  --aa-warn:     #D4A24C;

  /* Editorial typographic scale */
  --ff-display: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --ff-body:    'Inter Tight', 'Inter', system-ui, sans-serif;
  --ff-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Paper depth — soft, layered, never glossy */
  --paper-shadow:
      0 1px 0 rgba(255, 255, 255, .9) inset,
      0 1px 2px rgba(58, 35, 14, .04),
      0 6px 18px rgba(58, 35, 14, .06),
      0 28px 52px -18px rgba(58, 35, 14, .12);
  --paper-shadow-flat:
      0 1px 0 rgba(255, 255, 255, .9) inset,
      0 1px 2px rgba(58, 35, 14, .04),
      0 8px 22px -10px rgba(58, 35, 14, .08);

  --radius:     2px;
  --radius-lg:  3px;
  --gutter:     clamp(20px, 4vw, 44px);
  --measure:    1140px;
}

* { box-sizing: border-box; }
*::selection { background: var(--aa-ink); color: var(--aa-cream); }

html, body { margin: 0; padding: 0; }

.demo-body {
  font-family: var(--ff-body);
  background: var(--aa-cream);
  color: var(--aa-ink);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.005em;
  min-height: 100vh;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Page-wide paper grain — almost imperceptible, adds warmth. */
.demo-body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .35;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.10 0 0 0 0 0.08 0 0 0 0 0.06 0 0 0 0.07 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.demo-body > * { position: relative; z-index: 1; }

a {
  color: var(--aa-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: var(--aa-line);
  transition: text-decoration-color .2s, color .2s;
}
a:hover { color: var(--aa-c2-deep); text-decoration-color: var(--aa-c2-deep); }

/* ── Reusable: hairline rule with optional marginalia tag ────── */
.rule {
  border: 0;
  border-top: 1px solid var(--aa-line);
  margin: 0;
}

/* ─── HEADER ─────────────────────────────────────────────────── */
.demo-top {
  border-bottom: 1px solid var(--aa-line);
  background: linear-gradient(to bottom, var(--aa-paper) 0%, var(--aa-cream) 100%);
}
.demo-top-inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 22px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.demo-brand { display: flex; align-items: center; gap: 14px; }
.demo-brand-logo { max-height: 36px; width: auto; display: block; }
.demo-brand-name {
  font-family: var(--ff-display);
  font-size: 22px;
  font-weight: 600;
  font-style: italic;
  color: var(--aa-ink);
  letter-spacing: -0.01em;
}
.demo-top-note {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--aa-mute);
  font-weight: 500;
  position: relative;
  padding-left: 18px;
}
.demo-top-note::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--aa-c3);
  transform: translateY(-50%);
  box-shadow: 0 0 0 3px rgba(74, 124, 78, .14);
}

/* ─── BANNER ─────────────────────────────────────────────────── */
.demo-banner {
  max-width: 720px;
  margin: 22px auto 0;
  padding: 14px 22px;
  border: 1px solid var(--aa-c2);
  background: var(--aa-c2-soft);
  color: var(--aa-c2-deep);
  font-size: 14px;
  text-align: center;
  border-radius: var(--radius);
  font-weight: 500;
}
.demo-banner.is-info {
  border-color: var(--aa-line);
  background: var(--aa-paper-2);
  color: var(--aa-ink);
}

/* ─── MAIN CONTAINER ─────────────────────────────────────────── */
.demo-main {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 56px var(--gutter) 96px;
}

/* Marginalia: § N (used as section eyebrow). */
.demo-section-tag {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--aa-c2-deep);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.demo-section-tag::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--aa-c2-deep);
}

.demo-h2 {
  font-family: var(--ff-display);
  font-size: clamp(28px, 3.6vw, 38px);
  font-weight: 500;
  margin: 0 0 10px;
  color: var(--aa-ink);
  letter-spacing: -0.018em;
  line-height: 1.12;
}
.demo-h2 em {
  font-style: italic;
  color: var(--aa-c2-deep);
  font-weight: 500;
}
.demo-lede {
  font-size: 16px;
  color: var(--aa-ink-2);
  margin: 0 0 32px;
  max-width: 52ch;
  line-height: 1.55;
}

/* ─── HERO  ──────────────────────────────────────────────────── */
.demo-hero {
  position: relative;
  background: var(--aa-paper);
  border: 1px solid var(--aa-line);
  box-shadow: var(--paper-shadow);
  padding: clamp(40px, 6vw, 72px) clamp(32px, 5vw, 64px);
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
}
/* Hanging numeral — the agency-case-study flourish */
.demo-hero::before {
  content: '01';
  position: absolute;
  top: clamp(-18px, -2.4vw, -28px);
  right: clamp(-8px, -0.5vw, -4px);
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(140px, 22vw, 240px);
  line-height: .85;
  color: var(--aa-ink);
  opacity: .05;
  pointer-events: none;
  letter-spacing: -0.04em;
  z-index: 0;
}
/* Subtle horizontal rule above the eyebrow */
.demo-hero::after {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  width: 56px;
  height: 3px;
  background: var(--aa-c2);
  transform: translateX(-50%);
}
.demo-hero > * { position: relative; z-index: 1; }

.demo-hero-clientlogo {
  display: flex;
  justify-content: center;
  margin: 0 auto 26px;
  position: relative;
  padding-bottom: 22px;
}
.demo-hero-clientlogo::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 32px;
  height: 1px;
  background: var(--aa-line);
  transform: translateX(-50%);
}
.demo-hero-clientlogo img {
  max-height: 72px;
  max-width: 240px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(26, 20, 16, 0.06));
}

.demo-hero-eyebrow {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--aa-mute);
  font-weight: 500;
  margin-bottom: 22px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.demo-hero-eyebrow::before,
.demo-hero-eyebrow::after {
  content: '';
  display: inline-block;
  height: 1px;
  width: 28px;
  background: var(--aa-line);
}

.demo-hero-title {
  font-family: var(--ff-display);
  font-size: clamp(34px, 5.4vw, 58px);
  font-weight: 500;
  margin: 0 0 18px;
  line-height: 1.04;
  color: var(--aa-ink);
  text-align: center;
  letter-spacing: -0.024em;
  max-width: 18ch;
  margin-left: auto;
  margin-right: auto;
}
/* Trailing italic emphasis if the AI drops an em-tag */
.demo-hero-title em {
  font-style: italic;
  color: var(--aa-c2-deep);
  font-weight: 500;
}

.demo-hero-sub {
  font-family: var(--ff-body);
  font-size: 17px;
  color: var(--aa-ink-2);
  max-width: 58ch;
  margin: 0 auto 36px;
  line-height: 1.6;
  text-align: center;
  font-weight: 400;
}

/* Primary CTA — letterpress block on the ink */
.demo-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: var(--aa-ink);
  color: var(--aa-cream);
  border: none;
  padding: 18px 32px 18px 22px;
  font-family: var(--ff-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: var(--radius);
  box-shadow: 5px 5px 0 var(--aa-c2-deep);
  transition: transform .18s cubic-bezier(.2,.7,.2,1.2), box-shadow .18s;
  position: relative;
}
.demo-cta:hover {
  transform: translate(-3px, -3px);
  box-shadow: 8px 8px 0 var(--aa-c2-deep);
}
.demo-cta:active {
  transform: translate(0, 0);
  box-shadow: 2px 2px 0 var(--aa-c2-deep);
}
.demo-cta:disabled { opacity: .55; cursor: progress; transform: none; box-shadow: 5px 5px 0 var(--aa-c2-deep); }

.demo-cta-icon {
  font-size: 10px;
  display: inline-flex;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--aa-c2);
  align-items: center;
  justify-content: center;
  padding-left: 2px;
  color: var(--aa-cream);
  flex-shrink: 0;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.15);
}

/* CTA wrapper to center + add the meta below it */
.demo-hero .demo-cta { display: inline-flex; }
.demo-hero-meta {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--aa-mute);
  font-weight: 500;
  margin-top: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}
/* If we can split items by a "·" or comma in PHP, fine; otherwise leave alone. */
.demo-hero-meta::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid var(--aa-c3);
  box-shadow: inset 0 0 0 2px var(--aa-paper);
  background: var(--aa-c3);
}

/* Center the hero CTA + meta column */
.demo-hero { text-align: center; }

/* ─── SECTIONS  ──────────────────────────────────────────────── */
.demo-section {
  margin-top: clamp(64px, 8vw, 96px);
  position: relative;
}
/* Inject a section tag automatically via attribute if you want to wire it
   from PHP later. Default: nothing renders if there is no .demo-section-tag. */

/* ─── CAPABILITIES  ──────────────────────────────────────────── */
.demo-caps { position: relative; }
.demo-caps .demo-h2,
.demo-caps .demo-lede { text-align: center; margin-left: auto; margin-right: auto; }
.demo-caps .demo-lede { max-width: 46ch; margin-bottom: 36px; }

.demo-cap-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 8px;
  counter-reset: capcount;
}
@media (min-width: 768px) {
  .demo-cap-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; }
}

.demo-cap {
  position: relative;
  background: var(--aa-paper);
  border: 1px solid var(--aa-line);
  padding: 38px 28px 30px;
  border-radius: var(--radius);
  counter-increment: capcount;
  transition: transform .35s cubic-bezier(.2,.7,.2,1),
              box-shadow .35s cubic-bezier(.2,.7,.2,1),
              border-color .35s ease;
  overflow: hidden;
  isolation: isolate;
}
/* Soft top edge: a 2px accent rule that grows on hover. */
.demo-cap::after {
  content: '';
  position: absolute;
  inset: 0 auto auto 0;
  height: 2px;
  width: 36px;
  background: var(--aa-c2);
  transition: width .45s cubic-bezier(.2,.7,.2,1);
}
.demo-cap:hover {
  transform: translateY(-3px);
  box-shadow: var(--paper-shadow-flat);
  border-color: var(--aa-ink);
}
.demo-cap:hover::after { width: 100%; }

/* Big serif numeral sitting in the top-right corner. Hangs behind content. */
.demo-cap::before {
  content: counter(capcount, decimal-leading-zero);
  position: absolute;
  top: -18px;
  right: 14px;
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 500;
  font-size: 96px;
  line-height: 1;
  color: var(--aa-ink);
  opacity: .055;
  letter-spacing: -0.03em;
  pointer-events: none;
  z-index: 0;
}

.demo-cap-glyph {
  font-size: 26px;
  margin-bottom: 24px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--aa-cream);
  color: var(--aa-c2-deep);
  border: 1px solid var(--aa-line);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 4px 12px -6px rgba(58, 35, 14, .12);
  position: relative;
  z-index: 1;
}
.demo-cap:hover .demo-cap-glyph {
  background: var(--aa-c2-soft);
  border-color: var(--aa-c2);
}

.demo-cap-title {
  font-family: var(--ff-display);
  font-size: 23px;
  margin: 0 0 14px;
  color: var(--aa-ink);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.012em;
  position: relative;
  padding-bottom: 14px;
  z-index: 1;
}
.demo-cap-title::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 28px;
  height: 1px;
  background: var(--aa-ink);
  opacity: .35;
  transition: width .35s ease, background .35s ease, opacity .35s ease;
}
.demo-cap:hover .demo-cap-title::after {
  width: 56px;
  background: var(--aa-c2);
  opacity: 1;
}
.demo-cap-body {
  font-size: 14.5px;
  color: var(--aa-ink-2);
  margin: 0;
  line-height: 1.65;
  font-weight: 400;
  position: relative;
  z-index: 1;
}

/* ─── PROMPTS  ───────────────────────────────────────────────── */
.demo-prompts-wrap { position: relative; }
.demo-prompts-wrap .demo-h2,
.demo-prompts-wrap .demo-lede { text-align: center; margin-left: auto; margin-right: auto; }
.demo-prompts-wrap .demo-lede { max-width: 50ch; margin-bottom: 32px; }

/* Decorative rule with the word "TRY" centered — feels editorial. */
.demo-prompts-wrap::before {
  content: '';
  display: block;
  height: 1px;
  background: var(--aa-line);
  max-width: 880px;
  margin: 0 auto 28px;
}

.demo-prompt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  justify-content: center;
  max-width: 920px;
  margin: 0 auto;
}
.demo-prompt {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--aa-line);
  background: var(--aa-paper);
  padding: 13px 22px 13px 18px;
  font-family: var(--ff-body);
  font-size: 14.5px;
  font-weight: 400;
  color: var(--aa-ink-2);
  border-radius: 999px;
  cursor: pointer;
  transition: background .25s ease,
              border-color .25s ease,
              color .25s ease,
              transform .25s ease,
              box-shadow .25s ease;
  letter-spacing: -0.003em;
  line-height: 1.3;
}
/* Small accent dot at the start of each chip, like a bullet in a printed list. */
.demo-prompt::before {
  content: '';
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--aa-c2);
  opacity: .7;
  transition: transform .25s ease, opacity .25s ease;
}
.demo-prompt:hover {
  background: var(--aa-cream);
  border-color: var(--aa-ink);
  color: var(--aa-ink);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -8px rgba(58, 35, 14, .15);
}
.demo-prompt:hover::before {
  transform: scale(1.35);
  opacity: 1;
}
.demo-prompt:active { transform: translateY(0); }

/* ─── LIVE CALL PANEL  ───────────────────────────────────────── */
.demo-live {
  display: none;
  margin-top: clamp(56px, 7vw, 80px);
  background: var(--aa-paper);
  border: 1.5px solid var(--aa-ink);
  box-shadow: 10px 10px 0 var(--aa-c2);
  padding: clamp(28px, 4vw, 40px) clamp(24px, 4vw, 36px);
  border-radius: var(--radius);
  position: relative;
}
.demo-live::before {
  content: 'ON AIR';
  position: absolute;
  top: -10px;
  left: 24px;
  background: var(--aa-c2);
  color: var(--aa-cream);
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.24em;
  padding: 4px 10px;
  border-radius: var(--radius);
}
.demo-body.is-live .demo-live { display: block; animation: demo-fade-in .4s ease-out; }
.demo-body.is-live #demoCaps,
.demo-body.is-live #demoPrompts { display: none; }
.demo-body.is-live #demoHero .demo-cta,
.demo-body.is-live #demoHero .demo-hero-meta { display: none; }

@keyframes demo-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.demo-live-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--aa-line);
}
.demo-live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--aa-ink);
}
.demo-pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--aa-c2);
  box-shadow: 0 0 0 0 rgba(232,72,72,.7);
  animation: demo-pulse 1.6s infinite;
}
@keyframes demo-pulse {
  0%   { box-shadow: 0 0 0 0    rgba(232,72,72,.55); transform: scale(1); }
  70%  { box-shadow: 0 0 0 14px rgba(232,72,72,0);   transform: scale(1.05); }
  100% { box-shadow: 0 0 0 0    rgba(232,72,72,0);   transform: scale(1); }
}
.demo-timer {
  font-family: var(--ff-mono);
  font-size: 22px;
  font-weight: 500;
  color: var(--aa-ink);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.demo-timer small {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--aa-mute);
  letter-spacing: 0.16em;
  margin-left: 4px;
}

/* Waveform — slim, centered, with mirrored gradient mask */
.demo-waveform {
  display: flex;
  gap: 5px;
  justify-content: center;
  align-items: center;
  height: 72px;
  margin: 14px 0 22px;
  padding: 4px 0;
  -webkit-mask-image: linear-gradient(to right, transparent, black 14%, black 86%, transparent);
          mask-image: linear-gradient(to right, transparent, black 14%, black 86%, transparent);
}
.demo-waveform span {
  width: 3px;
  background: var(--aa-ink);
  display: block;
  height: 8px;
  border-radius: 1px;
  animation: demo-wave 1.4s ease-in-out infinite;
  transform-origin: center;
}
.demo-waveform span:nth-child(1)  { animation-delay: 0s; }
.demo-waveform span:nth-child(2)  { animation-delay: .08s; height: 18px; }
.demo-waveform span:nth-child(3)  { animation-delay: .16s; height: 30px; }
.demo-waveform span:nth-child(4)  { animation-delay: .24s; height: 22px; }
.demo-waveform span:nth-child(5)  { animation-delay: .32s; height: 42px; }
.demo-waveform span:nth-child(6)  { animation-delay: .40s; height: 18px; }
.demo-waveform span:nth-child(7)  { animation-delay: .48s; height: 14px; }
.demo-waveform span:nth-child(8)  { animation-delay: .56s; height: 28px; background: var(--aa-c2); }
.demo-waveform span:nth-child(9)  { animation-delay: .64s; height: 50px; background: var(--aa-c2); }
.demo-waveform span:nth-child(10) { animation-delay: .72s; height: 22px; background: var(--aa-c2); }
.demo-waveform span:nth-child(11) { animation-delay: .80s; height: 12px; }
.demo-waveform span:nth-child(12) { animation-delay: .88s; height: 32px; }
.demo-waveform span:nth-child(13) { animation-delay: .96s; height: 44px; }
.demo-waveform span:nth-child(14) { animation-delay: 0s;   height: 20px; }
.demo-waveform span:nth-child(15) { animation-delay: .08s; height: 8px;  }
.demo-waveform span:nth-child(16) { animation-delay: .16s; height: 16px; }
.demo-waveform span:nth-child(17) { animation-delay: .24s; height: 24px; }
.demo-waveform span:nth-child(18) { animation-delay: .32s; height: 14px; }
@keyframes demo-wave {
  0%, 100% { transform: scaleY(0.45); opacity: .7; }
  50%      { transform: scaleY(1.7);  opacity: 1; }
}

/* Transcript stream */
.demo-transcript-stream {
  background: var(--aa-cream);
  border: 1px solid var(--aa-line);
  border-left: 2px solid var(--aa-c2);
  padding: 20px 22px;
  border-radius: var(--radius);
  max-height: 300px;
  overflow-y: auto;
  font-size: 14.5px;
  line-height: 1.65;
  scrollbar-width: thin;
  scrollbar-color: var(--aa-line) transparent;
}
.demo-transcript-stream::-webkit-scrollbar { width: 6px; }
.demo-transcript-stream::-webkit-scrollbar-thumb { background: var(--aa-line); border-radius: 3px; }
.demo-transcript-empty {
  color: var(--aa-mute);
  font-family: var(--ff-display);
  font-style: italic;
  text-align: center;
  padding: 28px 0;
  font-size: 16px;
}
.demo-turn {
  padding: 10px 0;
  border-bottom: 1px dashed var(--aa-line-soft);
  animation: demo-turn-in .35s ease-out;
}
.demo-turn:last-child { border-bottom: none; }
@keyframes demo-turn-in {
  from { opacity: 0; transform: translateX(-4px); }
  to   { opacity: 1; transform: translateX(0); }
}
.demo-turn .demo-who {
  display: inline-block;
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--aa-c2-deep);
  font-weight: 600;
  margin-right: 12px;
  vertical-align: 2px;
}
.demo-turn .demo-who.user { color: var(--aa-ink-2); }
.demo-turn .demo-who::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 1px;
  background: currentColor;
  margin-right: 6px;
  vertical-align: middle;
}

.demo-live-actions {
  text-align: center;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--aa-line);
}
.demo-end-btn {
  background: transparent;
  border: 1.5px solid var(--aa-ink);
  color: var(--aa-ink);
  padding: 12px 26px;
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: background .2s, color .2s;
}
.demo-end-btn:hover { background: var(--aa-ink); color: var(--aa-cream); }
.demo-end-icon { font-size: 10px; }

/* ─── POST-CALL  ─────────────────────────────────────────────── */
.demo-post {
  display: none;
  margin-top: 44px;
  padding: clamp(40px, 5.5vw, 64px) clamp(28px, 4.5vw, 56px);
  background: var(--aa-paper);
  border: 1px solid var(--aa-line);
  box-shadow: var(--paper-shadow);
  text-align: center;
  border-radius: var(--radius);
  position: relative;
}
.demo-post::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 3px;
  background: var(--aa-c3);
}
.demo-body.is-postcall .demo-post { display: block; animation: demo-fade-in .5s ease-out; }
.demo-body.is-postcall #demoLive { display: none; }
.demo-body.is-postcall #demoCaps,
.demo-body.is-postcall #demoPrompts { display: none; }
.demo-body.is-postcall #demoHero .demo-cta,
.demo-body.is-postcall #demoHero .demo-hero-meta { display: none; }

.demo-post-check {
  display: inline-flex;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--aa-paper);
  border: 2px solid var(--aa-c3);
  color: var(--aa-c3);
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 600;
  margin-bottom: 22px;
  position: relative;
}
.demo-post-check::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid var(--aa-c3);
  opacity: .25;
}

/* The post-call thank-you gets a tasteful drop cap on its first letter */
.demo-post-msg {
  font-family: var(--ff-display);
  font-size: 19px;
  color: var(--aa-ink-2);
  max-width: 56ch;
  margin: 0 auto 40px;
  line-height: 1.55;
  font-weight: 400;
  font-style: italic;
}
.demo-post-msg::first-letter {
  font-size: 1.6em;
  font-weight: 500;
  color: var(--aa-c2-deep);
  font-style: normal;
}

/* Override the .demo-h2 inside the post panel — center it */
.demo-post .demo-h2 {
  text-align: center;
  max-width: 22ch;
  margin: 0 auto 18px;
}

/* Call-Complete KPI strip */
.demo-cc {
  max-width: 680px;
  margin: 0 auto 40px;
  background: var(--aa-cream);
  border: 1.5px solid var(--aa-ink);
  box-shadow: 8px 8px 0 var(--aa-c3);
  padding: 26px 30px;
  text-align: left;
  border-radius: var(--radius);
  position: relative;
}
.demo-cc::before {
  content: '— RECEIPT —';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--aa-paper);
  color: var(--aa-mute);
  font-family: var(--ff-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.28em;
  padding: 2px 12px;
}
.demo-cc-eyebrow {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--aa-c3);
  font-weight: 500;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.demo-cc-eyebrow::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--aa-line);
}
.demo-cc-pills {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--aa-line);
  background: var(--aa-paper);
  border-radius: var(--radius);
  overflow: hidden;
}
.demo-cc-pill {
  background: transparent;
  border: 0;
  padding: 18px 18px;
  position: relative;
  transition: background .2s;
}
.demo-cc-pill + .demo-cc-pill { border-left: 1px solid var(--aa-line); }
.demo-cc-pill:hover { background: var(--aa-cream); }

.demo-cc-lbl {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--aa-mute);
  margin-bottom: 6px;
  font-weight: 500;
}
.demo-cc-val {
  font-family: var(--ff-display);
  font-size: 26px;
  color: var(--aa-ink);
  font-weight: 500;
  min-height: 32px;
  line-height: 1.1;
  letter-spacing: -0.018em;
  font-variant-numeric: tabular-nums;
}
.demo-cc-pill[data-pill="duration"] .demo-cc-val { font-family: var(--ff-mono); font-weight: 500; font-size: 22px; letter-spacing: 0.02em; }
.demo-cc-pill[data-sentiment="warm"] .demo-cc-val,
.demo-cc-pill[data-sentiment="positive"] .demo-cc-val { color: var(--aa-c1); font-style: italic; }
.demo-cc-pill[data-sentiment="enthusiastic"] .demo-cc-val { color: var(--aa-c3); font-style: italic; }
.demo-cc-pill[data-sentiment="negative"] .demo-cc-val { color: var(--aa-c2-deep); font-style: italic; }

.demo-spin {
  display: inline-block;
  width: 16px; height: 16px;
  border: 1.5px solid var(--aa-line);
  border-top-color: var(--aa-ink);
  border-radius: 50%;
  animation: demo-spin 0.7s linear infinite;
  vertical-align: middle;
}
@keyframes demo-spin { to { transform: rotate(360deg); } }

/* Collapsible transcript */
.demo-transcript-wrap {
  max-width: 680px;
  margin: 0 auto 40px;
  text-align: left;
  background: var(--aa-paper);
  border: 1px solid var(--aa-line);
  padding: 18px 24px;
  border-radius: var(--radius);
  transition: box-shadow .2s;
}
.demo-transcript-wrap[open] { box-shadow: var(--paper-shadow-flat); }
.demo-transcript-wrap summary {
  cursor: pointer;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--aa-ink);
  padding: 8px 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
}
.demo-transcript-wrap summary::-webkit-details-marker { display: none; }
.demo-transcript-wrap summary::before {
  content: '+';
  display: inline-flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  background: var(--aa-c2-soft);
  color: var(--aa-c2-deep);
  font-family: var(--ff-mono);
  font-size: 14px;
  border-radius: 50%;
  transition: transform .25s;
  flex-shrink: 0;
}
.demo-transcript-wrap[open] summary::before { transform: rotate(45deg); }
.demo-transcript-wrap summary::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--aa-line);
}
.demo-transcript-body {
  padding-top: 16px;
  padding-right: 8px;
  font-size: 14.5px;
  line-height: 1.6;
  max-height: 420px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--aa-line) transparent;
}
.demo-transcript-body::-webkit-scrollbar { width: 6px; }
.demo-transcript-body::-webkit-scrollbar-track { background: transparent; }
.demo-transcript-body::-webkit-scrollbar-thumb { background: var(--aa-line); border-radius: 3px; }
.demo-transcript-body::-webkit-scrollbar-thumb:hover { background: var(--aa-ink); }

/* Quotation styling within the transcript body */
.demo-transcript-body .demo-turn { padding: 12px 0; }

/* DripStoryboard wrap */
.demo-drip-wrap {
  max-width: 880px;
  margin: 0 auto 40px;
  text-align: left;
}

/* ─── CONTACT CARD ─────────────────────────────────────────────
   Editorial calling card. A real letterpressed business card:
   - Hairline corner brackets (no double-border)
   - Eyebrow flanked by hairline rules
   - Display-serif name as the headline
   - A clean two-column key/value grid for phone + email
   - A real CTA button for booking, not a bare emoji link
   - Stamped folio mark in the upper-right corner
   ─────────────────────────────────────────────────────────────── */
.demo-contact {
  max-width: 540px;
  margin: 0 auto;
  background: var(--aa-paper);
  border: 1px solid var(--aa-line);
  padding: 44px 44px 36px;
  text-align: center;
  border-radius: var(--radius);
  position: relative;
  box-shadow: var(--paper-shadow-flat);
}
/* Hairline corner brackets — old letterpress chrome. */
.demo-contact::before,
.demo-contact::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border: 1px solid var(--aa-ink);
  opacity: .35;
  pointer-events: none;
}
.demo-contact::before {
  top: 12px; left: 12px;
  border-right: 0;
  border-bottom: 0;
}
.demo-contact::after {
  bottom: 12px; right: 12px;
  border-left: 0;
  border-top: 0;
}

/* Eyebrow flanked by hairline rules: ─── BUILT BY ─── */
.demo-contact-eyebrow {
  font-family: var(--ff-mono);
  font-size: 9.5px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--aa-mute);
  font-weight: 500;
  margin-bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.demo-contact-eyebrow::before,
.demo-contact-eyebrow::after {
  content: '';
  width: 22px;
  height: 1px;
  background: var(--aa-line);
}

.demo-contact-name {
  font-family: var(--ff-display);
  font-size: 32px;
  font-style: italic;
  font-weight: 500;
  margin: 0;
  color: var(--aa-ink);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.demo-contact-name::after { content: none; }

.demo-contact-person {
  font-family: var(--ff-body);
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--aa-mute);
  margin-top: 10px;
  font-weight: 500;
}

.demo-contact-rule {
  width: 40px;
  height: 1px;
  background: var(--aa-c2);
  margin: 22px auto 26px;
  position: relative;
}
.demo-contact-rule::before,
.demo-contact-rule::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 3px;
  height: 3px;
  background: var(--aa-c2);
  border-radius: 50%;
  transform: translateY(-50%);
}
.demo-contact-rule::before { left: -8px; }
.demo-contact-rule::after  { right: -8px; }

.demo-contact-lines {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  gap: 14px;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}
.demo-contact-line {
  display: grid;
  grid-template-columns: 28px 64px 1fr;
  align-items: baseline;
  text-align: left;
  gap: 12px;
  padding: 0;
  border-bottom: 1px dotted var(--aa-line);
  padding-bottom: 14px;
  font-size: 15px;
  font-family: var(--ff-body);
  color: var(--aa-ink-2);
}
.demo-contact-line:last-child { border-bottom: 0; padding-bottom: 0; }

.demo-contact-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--aa-line);
  border-radius: 50%;
  background: var(--aa-cream);
  color: var(--aa-c2-deep);
  flex-shrink: 0;
  transform: translateY(2px);
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.demo-contact-ic svg { width: 13px; height: 13px; }

.demo-contact-lbl {
  font-family: var(--ff-mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--aa-mute);
  font-weight: 500;
}

.demo-contact-val {
  font-family: var(--ff-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--aa-ink);
  text-decoration: none;
  letter-spacing: -0.003em;
  position: relative;
  transition: color .25s ease;
  word-break: break-word;
  line-height: 1.4;
}
.demo-contact-val::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--aa-ink);
  opacity: 0;
  transform: scaleX(.4);
  transform-origin: left center;
  transition: opacity .25s ease, transform .3s cubic-bezier(.2,.7,.2,1);
}
.demo-contact-line:hover .demo-contact-val { color: var(--aa-c2-deep); }
.demo-contact-line:hover .demo-contact-val::after {
  opacity: 1;
  transform: scaleX(1);
  background: var(--aa-c2-deep);
}
.demo-contact-line:hover .demo-contact-ic {
  background: var(--aa-c2-soft);
  border-color: var(--aa-c2);
  color: var(--aa-c2-deep);
}

/* Booking CTA — real button, not an emoji line. */
.demo-contact-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
  padding: 13px 22px 13px 20px;
  background: var(--aa-ink);
  color: var(--aa-cream);
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius);
  border: 1.5px solid var(--aa-ink);
  position: relative;
  transition: background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
  box-shadow: 4px 4px 0 var(--aa-c2);
}
.demo-contact-cta svg { flex-shrink: 0; }
.demo-contact-cta-arrow {
  font-family: var(--ff-body);
  font-size: 14px;
  letter-spacing: 0;
  transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.demo-contact-cta:hover {
  background: var(--aa-c2);
  border-color: var(--aa-c2);
  color: var(--aa-cream);
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--aa-c2-deep);
}
.demo-contact-cta:hover .demo-contact-cta-arrow { transform: translateX(4px); }
.demo-contact-cta:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 var(--aa-c2);
}

@media (max-width: 560px) {
  .demo-contact { padding: 36px 24px 28px; }
  .demo-contact-name { font-size: 26px; }
  .demo-contact-line { grid-template-columns: 24px 56px 1fr; gap: 10px; font-size: 14px; }
  .demo-contact-ic { width: 24px; height: 24px; }
  .demo-contact-ic svg { width: 11px; height: 11px; }
}

/* ─── FOOTER  ────────────────────────────────────────────────── */
.demo-foot {
  border-top: 1px solid var(--aa-line);
  background: var(--aa-paper);
  padding: 28px var(--gutter);
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--aa-mute);
  text-align: center;
  font-weight: 500;
}
.demo-foot span { position: relative; padding: 0 18px; }
.demo-foot span::before,
.demo-foot span::after {
  content: '·';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--aa-c2);
}
.demo-foot span::before { left: 0; }
.demo-foot span::after  { right: 0; }

/* ─── HERO load-in choreography (one orchestrated reveal) ───── */
.demo-body[data-state="idle"] .demo-hero > * {
  animation: demo-rise .7s cubic-bezier(.16,.7,.22,1) backwards;
}
.demo-body[data-state="idle"] .demo-hero-clientlogo { animation-delay: .05s; }
.demo-body[data-state="idle"] .demo-hero-eyebrow    { animation-delay: .15s; }
.demo-body[data-state="idle"] .demo-hero-title      { animation-delay: .25s; }
.demo-body[data-state="idle"] .demo-hero-sub        { animation-delay: .35s; }
.demo-body[data-state="idle"] .demo-hero .demo-cta  { animation-delay: .45s; }
.demo-body[data-state="idle"] .demo-hero-meta       { animation-delay: .55s; }
@keyframes demo-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── RESPONSIVE  ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .demo-main { padding: 36px 20px 72px; }
  .demo-hero { padding: 44px 24px; }
  .demo-hero::before { font-size: 120px; top: -10px; }
  .demo-cc-pills { grid-template-columns: 1fr; }
  .demo-cc-pill + .demo-cc-pill { border-left: 0; border-top: 1px solid var(--aa-line); }
  .demo-live { padding: 24px 20px; }
  .demo-live-head { flex-direction: column; align-items: flex-start; gap: 10px; padding-bottom: 14px; }
  .demo-timer { font-size: 18px; }
  .demo-contact { padding: 28px 22px; }
  .demo-contact-name { font-size: 24px; }
}

/* ─── PRINT  ─────────────────────────────────────────────────── */
@media print {
  .demo-body::before, .demo-top, .demo-foot,
  .demo-cta, .demo-end-btn, .demo-banner { display: none !important; }
  .demo-body { background: #fff; }
}

/* ─── REDUCED MOTION  ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .demo-pulse, .demo-waveform span { animation: none !important; }
}