/* Instant reply demo. Left = a made-up bakery site, right = the Happy Labs pipeline. */
:root {
  --bk-ink: #2E211A; --bk-ink-2: #6B5444; --bk-bg: #FBF5EC; --bk-card: #FFFFFF;
  --bk-accent: #9C4221; --bk-accent-hover: #7F3418; --bk-line: #E7DACB;
  --bk-serif: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
}
body { background: #F3ECE1; color: var(--bk-ink); font-family: var(--hl-font); }

.stage { display: grid; gap: 20px; padding: 16px; max-width: 1320px; margin: 0 auto; }
.stage > *, .pipe > li { min-width: 0; }
@media (min-width: 1000px) { .stage { grid-template-columns: 1fr 1.05fr; padding: 24px; gap: 24px; align-items: start; } .site { position: sticky; top: 16px; } }

/* ---------- bakery site ---------- */
.site { background: var(--bk-bg); border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(46, 33, 26, .12); border: 1px solid var(--bk-line); }
.bk-nav { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--bk-line); }
.bk-logo { font-family: var(--bk-serif); font-size: 22px; letter-spacing: .02em; }
.bk-logo em { color: var(--bk-accent); }
.bk-nav nav { display: flex; gap: 4px; font-size: 14px; color: var(--bk-ink-2); }
.bk-nav nav button { background: none; border: 0; font: 600 14px var(--hl-font); color: var(--bk-ink-2); padding: 10px 8px; min-height: 44px; cursor: pointer; border-bottom: 2px solid transparent; }
.bk-nav nav button:hover, .bk-nav nav button[aria-expanded='true'] { color: var(--bk-accent); border-bottom-color: var(--bk-accent); }
.bk-panel { margin: 16px 16px 0; padding: 18px 20px; background: var(--bk-card); border: 1px solid var(--bk-line); border-radius: 14px; }
.bk-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.bk-panel h2 { margin: 0; font-family: var(--bk-serif); font-weight: 400; font-size: 24px; }
.bk-x { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--bk-line); background: #FFFCF7; font-size: 22px; cursor: pointer; color: var(--bk-ink); }
.bk-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.bk-list li { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dashed var(--bk-line); padding-bottom: 6px; font-size: 14px; }
.bk-list li b { font-family: var(--bk-serif); font-weight: 400; font-size: 16px; }
.bk-list li span { color: var(--bk-ink-2); text-align: right; }
.bk-panel p { margin: 10px 0 0; color: var(--bk-ink-2); font-size: 14px; }
.bk-panel .bk-btn { margin-top: 14px; }
.bk-hero { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 24px 20px 8px; align-items: center;
  background: radial-gradient(500px 220px at 85% 40%, rgba(233, 176, 107, .35), transparent 70%); }
.bk-kicker { margin: 0; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--bk-accent); font-weight: 700; }
.bk-hero h1 { font-family: var(--bk-serif); font-weight: 400; font-size: clamp(34px, 5vw, 50px); line-height: 1; margin: 8px 0 10px; letter-spacing: -0.02em; }
.bk-copy { margin: 0; color: var(--bk-ink-2); font-family: var(--bk-serif); font-size: 16px; max-width: 34ch; }
.bk-art { width: 180px; justify-self: center; }
@media (min-width: 560px) { .bk-hero { grid-template-columns: 1.3fr 1fr; } .bk-art { width: 100%; max-width: 220px; } }

.bk-form { margin: 16px; padding: 20px; background: var(--bk-card); border-radius: 14px; border: 1px solid var(--bk-line); display: grid; gap: 12px; }
.bk-form h2 { margin: 0; font-family: var(--bk-serif); font-weight: 400; font-size: 24px; }
.bk-help { margin: -6px 0 2px; color: var(--bk-ink-2); font-size: 14px; }
.row2 { display: grid; gap: 12px; }
@media (min-width: 560px) { .row2 { grid-template-columns: 1fr 1fr; } }
.bk-form label { display: grid; gap: 6px; font-size: 13px; font-weight: 700; color: var(--bk-ink); }
.bk-form input, .bk-form select, .bk-form textarea {
  width: 100%; font: 400 16px/1.3 var(--hl-font); color: var(--bk-ink); background: #FFFCF7;
  border: 1.5px solid #D9C8B4; border-radius: 10px; padding: 10px 12px; min-height: 44px;
}
.bk-form textarea { resize: vertical; }
.bk-form input:focus, .bk-form select:focus, .bk-form textarea:focus { outline: 3px solid rgba(156, 66, 33, .35); border-color: var(--bk-accent); }
.bk-error { margin: 0; color: #9B1C1C; font-size: 14px; font-weight: 600; }
.bk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.bk-btn { background: var(--bk-accent); color: #fff; border: 0; border-radius: 999px; padding: 13px 24px; font: 700 16px var(--hl-font); cursor: pointer; min-height: 48px; }
.bk-btn:hover { background: var(--bk-accent-hover); }
.bk-btn:disabled { opacity: .6; cursor: default; }
.bk-link { background: none; border: 0; color: var(--bk-accent); font: 700 14px var(--hl-font); text-decoration: underline; cursor: pointer; padding: 8px 0; }

/* ---------- engine ---------- */
.engine { background: var(--hl-night); color: #F4EBDD; border-radius: 16px; padding: 20px; position: relative; overflow: hidden;
  background-image: linear-gradient(160deg, #3E1739 0%, var(--hl-night) 60%); }
.engine::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(118deg, transparent 58%, rgba(255, 200, 69, .16) 58.3%, transparent 66%); }
.engine > * { position: relative; }
.engine-kicker { margin: 0; color: #97D700; font-weight: 800; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
.engine h2 { margin: 6px 0 6px; font-weight: 900; font-size: clamp(24px, 3vw, 30px); color: var(--hl-cream); letter-spacing: -0.02em; line-height: 1.1; }
.engine-lede { margin: 0; color: #CDB9C9; font-size: 15px; }
.clock { margin: 10px 0 0; font-size: 13px; color: var(--hl-gold); font-weight: 700; font-variant-numeric: tabular-nums; }

.pipe { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.stage-card { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 200, 69, .2); border-radius: 14px; padding: 14px;
  opacity: .55; transition: opacity .35s, border-color .35s, transform .35s, background .35s; }
.stage-card.active { opacity: 1; border-color: var(--hl-gold); background: rgba(255, 255, 255, .08); }
.stage-card.done { opacity: 1; border-color: rgba(151, 215, 0, .55); }
.stage-top { display: flex; gap: 12px; align-items: center; }
.stage-top h3 { margin: 0; font-size: 16px; font-weight: 800; color: #FFF7E6; }
.st { margin: 2px 0 0; font-size: 13px; color: #CDB9C9; }
.ic { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--hl-darkest); color: #fff; border: 1px solid rgba(255, 255, 255, .15); }
.ic.lime { background: var(--hl-lime); color: var(--hl-night); }
.ic svg { width: 20px; height: 20px; }
.stage-card.done .st::before { content: 'Done \2713  '; color: #97D700; font-weight: 800; }
.stage-card.active .st::before { content: 'Working\2026  '; color: var(--hl-gold); font-weight: 800; }
.stage-body:empty { display: none; }
.stage-body > *:not([hidden]) { margin-top: 12px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips span { background: rgba(255, 200, 69, .14); color: #FFE7A8; border: 1px solid rgba(255, 200, 69, .35); padding: 4px 10px; border-radius: 999px; font-size: 13px; }

.email { background: #FFFDF9; color: var(--hl-ink); border-radius: 12px; overflow: hidden; }
.email-meta { margin: 0; padding: 10px 14px; background: #F4EEE5; display: grid; gap: 2px; font-size: 13px; }
.email-meta div { display: flex; gap: 8px; }
.email-meta dt { width: 58px; color: var(--hl-ink-2); flex: none; }
.email-meta dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.email-body { padding: 12px 14px 14px; font-size: 14px; line-height: 1.55; white-space: pre-wrap; min-height: 2em; }
.email-body .caret { display: inline-block; width: 2px; height: 1em; background: var(--hl-purple); vertical-align: -2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.ai-note { display: inline-block; margin: 0 14px 12px; font-size: 12px; font-weight: 700; color: var(--hl-green-ink); background: #EEF6DA; padding: 3px 9px; border-radius: 999px; }

.slot { display: flex; gap: 14px; align-items: center; background: #FFFDF9; color: var(--hl-ink); border-radius: 12px; padding: 12px; }
.slot-date { flex: none; width: 58px; text-align: center; border-radius: 10px; overflow: hidden; border: 1px solid var(--hl-line); }
.slot-date span { display: block; background: var(--hl-purple); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .1em; padding: 3px 0; text-transform: uppercase; }
.slot-date b { display: block; font-size: 24px; padding: 4px 0; }
.slot-title { margin: 0; font-weight: 800; font-size: 15px; }
.slot-meta { margin: 2px 0 0; font-size: 13px; color: var(--hl-ink-2); }

.crm-wrap { overflow-x: auto; background: #FFFDF9; border-radius: 12px; }
.crm { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--hl-ink); }
.crm th { text-align: left; padding: 8px 10px; background: #F4EEE5; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--hl-ink-2); }
.crm td { padding: 8px 10px; border-top: 1px solid var(--hl-line); }
@media (max-width: 480px) { .crm th, .crm td { padding: 7px 6px; } .crm { font-size: 12px; } .crm th { font-size: 10px; letter-spacing: .04em; } }
.crm tr.new td { background: #FFF4D1; animation: flash 1.6s ease-out; font-weight: 700; }
@keyframes flash { from { background: #FFE08A; } to { background: #FFF4D1; } }
.chip { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; background: #EEF6DA; color: var(--hl-green-ink); }
.chip.warm { background: #FFF1CC; color: #7A4A00; }
.chip.hot { background: #F6E6F3; color: var(--hl-purple); }

.engine-foot { margin-top: 12px; }
.reset { background: var(--hl-gold); color: var(--hl-night); border: 0; border-radius: 999px; padding: 11px 18px; font: 800 14px var(--hl-font); cursor: pointer; min-height: 44px; }

.explain { margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(255, 200, 69, .25); }
.explain h2 { font-size: 22px; }
.explain p { margin: 8px 0 0; color: #E3D6E0; font-size: 15px; line-height: 1.6; }
.explain .proofline { color: #97D700; font-weight: 700; }
.explain .cta { display: inline-block; margin-top: 14px; color: var(--hl-gold); font-weight: 800; text-decoration: none; }
.explain .cta:hover { text-decoration: underline; }

.is-preview .explain, .is-preview .engine-foot, .is-preview .bk-actions .bk-link { display: none; }