:root {
  --bg: #fafafa;
  --panel: #ffffff;
  --ink: #15181e;
  --ink-2: #4a5160;
  --muted: #8a919e;
  --line: #e4e7ec;
  --accent: #fdc24e;
  --accent-ink: #2a2110;
  --accent-soft: #fdc24e59;
  --live: #9aa1ad;
  --fix: #fde7b4;
  --bad: #d92d20;
  --hs: #ff7a59;
  --hs-ink: #33475b;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 4px 16px rgba(16, 24, 40, .06);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.55 Inter, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
}
h1, h2 { margin: 0; letter-spacing: -.01em; }
h1 { font-size: 22px; font-weight: 700; }
h2 { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
button, input, select { font: inherit; color: inherit; }

.top {
  display: flex; align-items: center; gap: 18px;
  max-width: 1280px; margin: 0 auto; padding: 28px 32px 8px;
}
.logo { height: 56px; width: auto; display: block; mix-blend-mode: multiply; }
.top h1 { flex: 1; }
.budget {
  display: flex; flex-direction: column; align-items: flex-end;
  background: var(--panel); border: 1px solid var(--accent); border-radius: 10px; padding: 6px 12px;
}
.budget-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.budget-value { font-weight: 600; font-variant-numeric: tabular-nums; }

/* Screen states: idle (mic only) → live (recorder + transcript) → deal (+ deal card) */
.layout {
  display: grid; grid-template-columns: minmax(0, 820px); justify-content: center; gap: 24px;
  max-width: 1280px; margin: 0 auto; padding: 16px 32px 40px; align-items: start;
}
.deal .layout { grid-template-columns: minmax(0, 1.45fr) minmax(340px, 1fr); justify-content: stretch; }
.panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 22px;
  transition: background .4s, border-color .4s, box-shadow .4s;
}
.right { position: sticky; top: 16px; display: none; }
.deal .right { display: block; animation: deal-in .55s cubic-bezier(.2, .9, .3, 1.15); }
@keyframes deal-in { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }

.idle .left { background: transparent; border-color: transparent; box-shadow: none; padding-top: 18vh; }
.idle .recorder { justify-content: center; border-bottom-color: transparent; }
.idle .rec-meta, .idle .transcript { display: none; }
.idle .rec-btn { width: 96px; height: 96px; }
.idle .rec-btn svg { width: 40px; height: 40px; }
.live .rec-meta, .live .transcript, .deal .rec-meta, .deal .transcript { animation: fade-in .45s ease-out; }
@keyframes fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Recorder */
.recorder { display: flex; align-items: center; gap: 18px; padding-bottom: 20px; border-bottom: 1px solid var(--line); transition: border-color .4s; }
.rec-btn {
  flex: none; width: 64px; height: 64px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--accent); color: var(--accent-ink); display: grid; place-items: center;
  box-shadow: 0 6px 18px var(--accent-soft); transition: transform .15s, width .35s, height .35s;
}
.rec-btn:hover { transform: scale(1.04); }
.rec-btn:disabled { opacity: .45; cursor: default; transform: none; }
.rec-btn svg { width: 28px; height: 28px; fill: currentColor; transition: width .35s, height .35s; }
.rec-btn .icon-stop { display: none; }
.recording .rec-btn { animation: pulse 1.8s infinite; }
.recording .rec-btn .icon-mic { display: none; }
.recording .rec-btn .icon-stop { display: block; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 #fdc24e8c; }
  70% { box-shadow: 0 0 0 16px #fdc24e00; }
  100% { box-shadow: 0 0 0 0 #fdc24e00; }
}
.rec-meta { flex: 1; min-width: 0; }
.wave { width: 100%; height: 56px; display: block; }
.rec-status { display: flex; justify-content: space-between; color: var(--ink-2); font-size: 13px; margin-top: 4px; min-height: 20px; }
.timer { font-variant-numeric: tabular-nums; color: var(--muted); }
.busy .rec-status #status::after { content: ""; display: inline-block; width: 1.2em; text-align: left; animation: dots 1.2s steps(4) infinite; }
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }

/* Transcript */
.transcript {
  margin-top: 18px; min-height: 300px; max-height: 60vh; overflow-y: auto; font-size: 16.5px; line-height: 1.7;
  padding-right: 6px; scroll-behavior: smooth;
}
.transcript p { margin: 0 0 10px; }
.seg { transition: color .3s; }
.partial { color: var(--live); }
.fix { border-radius: 3px; animation: fix 2.6s ease-out; }
@keyframes fix { 0%, 35% { background: var(--fix); } 100% { background: transparent; } }
.healing { color: var(--ink-2); }

mark {
  background: transparent; color: inherit; border-radius: 4px; padding: 1px 0;
  box-shadow: inset 0 -2px 0 var(--c); transition: background .15s, box-shadow .15s;
  cursor: pointer;
}
mark.hot { background: color-mix(in srgb, var(--c) 22%, transparent); box-shadow: inset 0 -2px 0 var(--c), 0 0 0 2px color-mix(in srgb, var(--c) 35%, transparent); }

/* Deal fields */
.fields-head { margin: 0 0 10px; }
.fields { display: grid; gap: 10px; }
.field {
  --c: var(--muted);
  position: relative; border: 1px solid var(--line); border-radius: 11px; padding: 9px 12px 9px 18px;
  transition: border-color .15s, box-shadow .15s, transform .15s; background: var(--panel);
}
.field::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; background: var(--c); opacity: .9; }
.field-label { display: block; font-size: 12px; color: var(--muted); font-weight: 500; }
.field-control { display: flex; align-items: center; gap: 6px; min-height: 30px; }
.field.hot { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent); transform: translateX(-2px); }
.field.missing { border-style: dashed; background: #fcfcfc; }
.field.missing::before { opacity: .25; }
.field.invalid { border-color: var(--bad); border-style: solid; box-shadow: 0 0 0 3px #d92d2022; animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.field.loading .field-control { visibility: hidden; }
.field.loading::after {
  content: ""; position: absolute; left: 18px; bottom: 13px; height: 18px; width: 55%; border-radius: 6px;
  background: linear-gradient(90deg, #eef0f3 0%, #f8f9fa 50%, #eef0f3 100%); background-size: 200% 100%; animation: shimmer 1.2s infinite;
}
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.field.filled { animation: pop .45s ease-out; }
@keyframes pop { 0% { transform: scale(.97); opacity: .3; } 100% { transform: scale(1); opacity: 1; } }

.inp {
  flex: 1; min-width: 0; border: 1px solid transparent; background: transparent; border-radius: 7px;
  padding: 2px 6px; margin-left: -6px; font-size: 16px; font-weight: 600; outline: none;
  transition: background .15s, border-color .15s;
}
.inp::placeholder { color: var(--muted); font-weight: 500; font-style: italic; }
.inp:hover { background: #f4f5f7; }
.inp:focus { background: #fff; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
select.inp {
  appearance: none; cursor: pointer; padding-right: 26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a919e' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center;
}
select.inp.empty { color: var(--muted); font-weight: 500; font-style: italic; }
select.inp:disabled { cursor: default; opacity: .6; }
.unit { color: var(--muted); font-weight: 500; flex: none; }
.inp.num { flex: 0 1 140px; font-variant-numeric: tabular-nums; }
select.inp.unit-sel { flex: 0 0 auto; }

.submit-row { margin-top: 16px; }
.submit {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
  border: 0; border-radius: 11px; padding: 13px 16px; cursor: pointer; font-weight: 600; font-size: 15.5px;
  background: var(--accent); color: var(--accent-ink); box-shadow: 0 6px 16px var(--accent-soft);
  transition: transform .15s, filter .15s;
}
.submit img { width: 20px; height: 20px; }
.submit:hover { transform: translateY(-1px); filter: brightness(1.03); }
.submit:disabled { opacity: .5; cursor: default; transform: none; }
.submit-msg { margin: 10px 2px 0; color: var(--bad); font-size: 13.5px; }

/* Hover links */
.links { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 5; }
.links path { fill: none; stroke-width: 2.2; stroke-linecap: round; opacity: .9; }
.links circle { opacity: .95; }

/* HubSpot hand-off */
.flying .left { transform: translateX(-160px); opacity: 0; transition: transform .8s cubic-bezier(.5, 0, .2, 1), opacity .7s; }
.flying .top { opacity: .35; transition: opacity .6s; }
.flying .right { visibility: hidden; }
.layout.return { animation: return-in 1.1s ease-out; }
@keyframes return-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.stage { position: fixed; inset: 0; z-index: 15; transition: opacity .9s ease; }
.stage.out { opacity: 0; }
.fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hs {
  position: absolute; top: 50%; left: 72%; width: min(380px, 40vw); transform: translate(-50%, -50%) scale(.9);
  background: #fff; border-radius: 16px; border-top: 4px solid var(--hs); padding: 20px 20px 18px;
  box-shadow: 0 2px 4px rgba(16, 24, 40, .06), 0 18px 48px rgba(51, 71, 91, .16);
  opacity: 0; transition: opacity .5s ease, transform .6s cubic-bezier(.2, .9, .3, 1.2);
}
.hs.in { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.hs.bump { animation: bump .45s ease-out; }
@keyframes bump { 40% { transform: translate(-50%, -50%) scale(1.035); } }
.hs-head { display: flex; align-items: center; gap: 10px; color: var(--hs-ink); font-weight: 700; font-size: 21px; }
.hs-head img { width: 30px; height: 30px; }
.hs-tabs { display: flex; gap: 16px; margin: 14px 0 12px; font-size: 13px; color: #7c98b6; border-bottom: 1px solid #eaf0f6; }
.hs-tabs span { padding-bottom: 8px; }
.hs-tabs .on { color: var(--hs-ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--hs); }
.hs-col-head { font-size: 12px; font-weight: 600; color: #516f90; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
.hs-list { display: grid; gap: 8px; }
.hs-row { border: 1px solid #dfe3eb; border-radius: 8px; padding: 10px 12px; background: #fff; }
.hs-row.ghost { display: grid; gap: 7px; }
.hs-row.ghost i { display: block; height: 9px; border-radius: 5px; background: #eaf0f6; }
.hs-row.ghost i:last-child { width: 55%; }
.hs-row.new { border-color: var(--hs); box-shadow: 0 0 0 3px #ff7a5922; animation: row-in .5s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes row-in { from { opacity: 0; transform: translateY(-10px) scale(.95); } to { opacity: 1; transform: none; } }
.hs-row .name { font-weight: 600; color: var(--hs-ink); }
.hs-row .meta { font-size: 13px; color: #516f90; display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.hs-success {
  display: flex; align-items: center; gap: 10px; margin-top: 14px; font-weight: 600; color: #00a37a;
  animation: fade-in .5s ease-out;
}
.hs-success svg { width: 26px; height: 26px; }
.hs-success circle { fill: #00bda5; }
.hs-success path { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; stroke-dashoffset: 16; animation: draw .5s .15s ease-out forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.overlay { position: fixed; inset: 0; background: rgba(21, 24, 30, .45); display: grid; place-items: center; z-index: 20; padding: 16px; backdrop-filter: blur(3px); }
.overlay-card { background: var(--panel); border-radius: var(--radius); padding: 28px 30px; max-width: 440px; box-shadow: var(--shadow); }
.overlay-card h2 { font-size: 20px; text-transform: none; letter-spacing: -.01em; color: var(--ink); margin-bottom: 10px; }
.overlay-card p { margin: 0 0 8px; color: var(--ink-2); }
.muted { color: var(--muted); }
.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: #2b1b1c; color: #fff; padding: 10px 16px; border-radius: 10px; z-index: 30; max-width: calc(100vw - 32px); }

@media (max-width: 860px) {
  .top { padding: 20px 16px 4px; }
  .top h1 { font-size: 18px; }
  .layout, .deal .layout { grid-template-columns: 1fr; padding: 12px 16px 28px; gap: 16px; }
  .right { position: static; }
  .transcript { max-height: none; }
  .links { display: none; }
  .hs { left: 50%; top: 62%; width: calc(100vw - 32px); }
}