:root {
  --paper:var(--fife-paper); --paper-deep:var(--fife-paper-deep); --ink:var(--fife-ink);
  --navy:var(--fife-navy); --navy-deep:var(--fife-navy-deep); --blue:var(--fife-blue); --butter:var(--fife-butter);
  --panel:#F8F3E8; --line:rgba(23,21,15,.14); --mute:#6B6557;
  --head:var(--fife-font-headline); --body:var(--fife-font-body); --caps:var(--fife-font-caps);
}
* { box-sizing:border-box; }
html,body { margin:0; background:var(--paper); color:var(--ink); }
body { font:18px/1.5 var(--body); }
.top { background:var(--navy); color:var(--butter); }
.top-in { max-width:1240px; margin:0 auto; padding:0 24px; height:68px; display:flex; align-items:center; gap:16px; }
.brand-lockup { display:flex; align-items:center; gap:10px; color:var(--butter); }
.brand-mark svg { width:23px; height:31px; display:block; }
.brand-name svg { width:57px; height:32px; display:block; }
.divider { width:1px; height:22px; background:rgba(243,222,142,.35); }
.caption { font:500 12px/1 var(--caps); letter-spacing:.16em; text-transform:uppercase; color:var(--paper); opacity:.85; }
.live { margin-left:auto; font:500 11px/1 var(--caps); letter-spacing:.14em; text-transform:uppercase; color:var(--paper); opacity:.7; display:flex; align-items:center; gap:8px; }
.live::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--paper); opacity:.5; }
.live.on { opacity:1; color:var(--butter); } .live.on::before { background:#E4574B; opacity:1; animation:pulse 1.2s infinite; }
@keyframes pulse { 50% { opacity:.3; } }
.wrap { max-width:1240px; margin:0 auto; padding:30px 24px 64px; }
header.hero { display:flex; flex-wrap:wrap; gap:18px 28px; align-items:flex-end; justify-content:space-between; margin-bottom:18px; }
.eyebrow { font:500 12px/1 var(--caps); letter-spacing:.18em; text-transform:uppercase; color:var(--blue); }
h1 { font:500 50px/1.02 var(--head); letter-spacing:-.01em; margin:10px 0 10px; color:var(--navy); }
.sub { color:var(--mute); margin:0; max-width:600px; font-size:19px; }
.tabs { display:inline-flex; border:1px solid var(--line); border-radius:999px; padding:3px; gap:2px; margin-bottom:12px; }
.tabs button { border:0; min-height:36px; padding:9px 16px; }
.tabs button.on { background:var(--navy); color:var(--butter); }
.controls { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
button { font:500 13px/1 var(--caps); letter-spacing:.06em; padding:12px 18px; border-radius:999px; cursor:pointer;
  border:1px solid var(--line); background:transparent; color:var(--ink); min-height:42px; }
button:hover { border-color:var(--navy); }
button:disabled { opacity:.45; cursor:default; }
button.go { background:var(--navy); border-color:var(--navy); color:var(--butter); min-width:122px; }
.seg { display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; }
.seg button { border:0; border-radius:0; padding:12px 13px; }
.seg button.on { background:var(--navy); color:var(--paper); }
input.code, select { font:500 13px/1 var(--caps); letter-spacing:.06em; padding:12px 16px; border-radius:999px; border:1px solid var(--line); background:var(--panel); color:var(--ink); min-height:42px; }
input.code { width:140px; }
.livebar { display:none; } body.mode-live .livebar { display:flex; } body.mode-live .replaybar { display:none; }
.msg { font-size:15px; font-style:italic; color:var(--mute); min-height:22px; margin:0 0 10px; }
.msg.err { color:#A23A2E; font-style:normal; }
.progress { height:3px; background:var(--paper-deep); border-radius:3px; overflow:hidden; margin:0 0 22px; }
.progress i { display:block; height:100%; width:0; background:var(--blue); transition:width .4s; }

.grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:22px; align-items:start; }
@media (max-width: 900px) { .grid { grid-template-columns:1fr; } .side { position:static !important; } }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:18px; }
.call { padding:20px 20px 10px; min-height:560px; }
.who { display:flex; gap:14px; align-items:center; padding-bottom:16px; border-bottom:1px solid var(--line); margin-bottom:16px; }
.avatar { width:44px; height:44px; border-radius:50%; display:grid; place-items:center; font:500 15px/1 var(--caps); letter-spacing:.06em; color:var(--paper); background:var(--blue); flex:none; }
.who b { display:block; font:500 26px/1.05 var(--head); color:var(--navy); }
.who span { color:var(--mute); font-size:16px; font-style:italic; }
#log { max-height:66vh; overflow-y:auto; padding-right:4px; scroll-behavior:smooth; }
.empty { color:var(--mute); font-style:italic; padding:40px 8px; text-align:center; }
.turn { margin:0 0 14px; }
.bubble { padding:11px 16px; border-radius:16px; max-width:90%; font-size:18px; }
.lab { display:block; font:500 10.5px/1.4 var(--caps); letter-spacing:.14em; text-transform:uppercase; margin-bottom:3px; }
.them .bubble { background:rgba(29,79,163,.08); border:1px solid rgba(29,79,163,.16); border-top-left-radius:4px; }
.them .lab { color:var(--blue); }
.us { display:flex; justify-content:flex-end; }
.us .bubble { background:var(--navy); color:var(--paper); border-top-right-radius:4px; }
.us .lab { color:var(--butter); text-align:right; }
.copilot { margin:10px 0 12px auto; max-width:84%; background:var(--butter); border-radius:14px; padding:12px 16px 13px; color:var(--navy); animation:rise .35s ease-out; box-shadow:0 1px 0 rgba(18,28,69,.12), 0 10px 24px rgba(18,28,69,.10); }
.copilot .lab { color:var(--navy); display:flex; justify-content:space-between; gap:12px; opacity:.85; }
.copilot .lab em { font-style:normal; letter-spacing:.04em; text-transform:none; }
.copilot .txt { font:500 21px/1.28 var(--head); color:var(--navy-deep); }
.thinking { margin:10px 0 12px auto; max-width:84%; color:var(--mute); font:500 11px/1 var(--caps); letter-spacing:.12em; text-transform:uppercase; display:flex; gap:10px; align-items:center; justify-content:flex-end; }
.dots i { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--blue); margin:0 2px; animation:blink 1s infinite; }
.dots i:nth-child(2) { animation-delay:.15s; } .dots i:nth-child(3) { animation-delay:.3s; }
@keyframes blink { 50% { opacity:.2; } }
@keyframes rise { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.w { opacity:.2; transition:opacity .15s; } .w.s { opacity:1; }

.side { position:sticky; top:16px; display:flex; flex-direction:column; gap:14px; }
.box { padding:16px 18px 18px; }
.box h2 { margin:0 0 12px; font:500 11px/1.3 var(--caps); letter-spacing:.16em; text-transform:uppercase; color:var(--mute); display:flex; justify-content:space-between; gap:10px; }
.box h2 em { font-style:normal; color:var(--blue); }

/* How this card was made: the stages to scale, filled in real time. */
.pipe-total { font:500 46px/1 var(--head); color:var(--navy); font-variant-numeric:tabular-nums; }
.pipe-total small { font:500 11px/1.3 var(--caps); letter-spacing:.12em; text-transform:uppercase; color:var(--mute); margin-left:10px; }
.track2 { display:flex; height:14px; border-radius:7px; overflow:hidden; background:var(--paper-deep); margin:14px 0 10px; }
.seg2 { height:100%; width:0; transition-property:width; transition-timing-function:linear; }
.s0 { background:rgba(18,28,69,.22); } .s1 { background:var(--blue); } .s2 { background:var(--navy); } .s3 { background:#C9A53A; }
.legend { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:7px 16px; font-size:15px; }
.legend div { display:flex; gap:8px; align-items:baseline; color:var(--mute); transition:color .3s; }
.legend div.lit { color:var(--ink); }
.legend i { width:10px; height:10px; border-radius:3px; flex:none; transform:translateY(1px); }
.legend b { margin-left:auto; font:500 12.5px/1 var(--caps); font-variant-numeric:tabular-nums; color:var(--navy); }
.strip { display:flex; align-items:flex-end; gap:5px; height:58px; margin-top:16px; padding-top:6px; border-top:1px solid var(--line); position:relative; }
.strip i { flex:1; max-width:20px; background:rgba(18,28,69,.2); border-radius:3px 3px 0 0; height:0; transition:height .5s, background .3s; }
.strip i.cur { background:var(--blue); }
.strip .avgline { position:absolute; left:0; right:0; border-top:1.5px dashed var(--navy); opacity:.45; transition:bottom .5s; }
.strip-cap { display:flex; justify-content:space-between; gap:10px; font:500 10.5px/1.3 var(--caps); letter-spacing:.1em; text-transform:uppercase; color:var(--mute); margin-top:7px; }

.aim { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:0 0 14px; font-size:16px; color:var(--mute); }
.aim b { color:var(--navy); font-weight:600; }
.chip { font:500 11px/1 var(--caps); letter-spacing:.1em; text-transform:uppercase; padding:6px 10px; border-radius:99px; background:var(--butter); color:var(--navy); }
.chip.ghost { background:transparent; border:1px solid var(--line); color:var(--mute); }
.moves { display:flex; flex-direction:column; gap:8px; }
.mv { display:grid; grid-template-columns:minmax(0,1fr) 48px; gap:3px 10px; align-items:center; font-size:16px; }
.mv .track { grid-column:1 / -1; height:7px; background:var(--paper-deep); border-radius:4px; overflow:hidden; }
.mv .fill { height:100%; width:0; background:rgba(18,28,69,.25); border-radius:4px; transition:width .7s cubic-bezier(.2,.8,.2,1); }
.mv.pick .fill { background:var(--navy); } .mv.pick .name { font-weight:600; color:var(--navy); }
.mv .pct { text-align:right; font:500 13px/1 var(--caps); font-variant-numeric:tabular-nums; color:var(--mute); }
.phases { display:flex; gap:4px; }
.phases i { flex:1; height:5px; border-radius:3px; background:var(--paper-deep); transition:background .3s; }
.phases i.done { background:rgba(18,28,69,.35); } .phases i.now { background:var(--blue); }
.note { color:var(--mute); font-size:15px; font-style:italic; margin:8px 0 0; }
.blanks { display:grid; grid-template-columns:1fr 1fr; gap:7px 12px; font-size:16px; }
.bl { display:flex; gap:8px; align-items:center; color:var(--mute); transition:color .3s; }
.bl::before { content:""; width:15px; height:15px; border-radius:50%; border:1.5px solid rgba(23,21,15,.25); flex:none; transition:all .3s; }
.bl.got { color:var(--ink); } .bl.got::before { background:var(--blue); border-color:var(--blue); box-shadow:inset 0 0 0 3px var(--panel); }
.bl.new { animation:flash 1.4s; }
@keyframes flash { 0%,60% { color:var(--blue); } }
details.hidden summary { cursor:pointer; font:500 11px/1.3 var(--caps); letter-spacing:.16em; text-transform:uppercase; color:var(--mute); }
details.hidden ul { margin:12px 0 0; padding-left:18px; font-size:16px; }
.outcome { margin-top:22px; padding:24px 26px; display:none; background:var(--navy); color:var(--paper); border:0; }
.outcome.show { display:block; animation:rise .5s ease-out; }
.outcome .big { font:500 36px/1.05 var(--head); color:var(--butter); }
.outcome .row { display:flex; flex-wrap:wrap; gap:12px 34px; margin-top:14px; }
.outcome .row div { max-width:420px; }
.outcome .row div span { display:block; font:500 10.5px/1.3 var(--caps); color:var(--paper); opacity:.7; text-transform:uppercase; letter-spacing:.14em; margin-bottom:3px; }
.outcome blockquote { margin:16px 0 0; padding-left:14px; border-left:2px solid var(--butter); font-style:italic; opacity:.9; }
.outcome blockquote:empty { display:none; }
footer { margin-top:28px; color:var(--mute); font-size:15px; font-style:italic; }
@media (max-width: 560px) { h1 { font-size:36px; } .wrap { padding:22px 16px 44px; } .top-in { padding:0 16px; } .caption, .divider { display:none; } .blanks, .legend { grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce) { * { animation:none !important; transition:none !important; } }

/* custom buyer builder */
.builder { display:none; padding:20px 22px; margin:0 0 16px; gap:24px; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); }
body.mode-live.custom .builder { display:grid; }
.builder-in { display:flex; flex-direction:column; gap:10px; }
.builder textarea { font:17px/1.45 var(--body); color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:12px 14px; resize:vertical; min-height:84px; width:100%; box-sizing:border-box; }
.builder textarea:focus, input.code:focus, select:focus { outline:2px solid var(--blue); outline-offset:1px; }
.bridge { font:500 11px/1.3 var(--caps); letter-spacing:.12em; text-transform:uppercase; color:var(--mute); display:inline-flex; align-items:center; gap:8px; }
.bridge::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--mute); opacity:.5; }
.bridge.on { color:var(--navy); } .bridge.on::before { background:#3E8E5A; opacity:1; }
.bridge.off { color:#A23A2E; } .bridge.off::before { background:#A23A2E; opacity:1; }
.built { border-left:1px solid var(--line); padding-left:24px; }
.built .who { border:0; padding:0; margin:0 0 10px; }
.built p { margin:0 0 8px; font-size:16px; color:var(--ink); }
.built .note { font-size:14px; }
.engine { margin-left:auto; font:500 10.5px/1.3 var(--caps); letter-spacing:.1em; text-transform:uppercase; color:var(--mute); text-align:right; }
@media (max-width:760px) {
  .builder { grid-template-columns:1fr; padding:16px; }
  .built { border-left:0; border-top:1px solid var(--line); padding:16px 0 0; }
}