:root{
  --bg:#FBFBFE; --bg-grad:linear-gradient(180deg,#FFFFFF 0%,#F7F8FE 34%,#E9EDFB 100%);
  --card:#FFFFFF; --stroke:#EBEDF5; --stroke-dark:#16192B;
  --ink:#16192B; --muted:#5F667E; --accent:#25D366; --accent-soft:#DCF8C6;
  --primary:#16192B; --primary-ink:#FFFFFF;
  --hot:#1F9D62; --warm:#25D366; --cool:#4A6BC7; --cold:#8A90A5;
  --win:#25D366; --gold-text:#25D366; /* one WhatsApp green (#25D366) everywhere green appears */
  --display:"polymath-display",sans-serif; --body:"polymath-text",sans-serif; --mono:"polymath-text",sans-serif;
  --shadow:0 1px 2px rgba(22,25,43,.04), 0 24px 48px -24px rgba(22,25,43,.14);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg-grad) fixed;color:var(--ink);font-family:var(--body);font-size:15.5px;line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:hidden}

.topbar{display:flex;justify-content:space-between;align-items:center;padding:18px 32px}
.wordmark{font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:-.02em}
.wordmark span{color:var(--accent)}
.tabs{display:flex;gap:6px}
.tab{background:none;border:1px solid transparent;color:var(--muted);font:inherit;font-size:14px;font-weight:600;padding:8px 16px;border-radius:10px;cursor:pointer;transition:all .15s}
.tab:hover{color:var(--ink)}
.tab.active{color:var(--ink);border-color:var(--stroke);background:var(--card);box-shadow:var(--shadow)}

.mtiles{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;max-width:1060px;margin:26px auto 0;padding:0 24px}
@media(min-width:900px){.mtiles{grid-template-columns:1.6fr repeat(5,1fr)}}
.mtile{background:var(--card);border:1px solid var(--stroke);border-radius:18px;padding:20px;display:flex;flex-direction:column;justify-content:center;gap:4px;box-shadow:0 2px 10px rgba(22,25,43,.05)}
.mtile .mt-num{font-family:var(--display);font-weight:700;font-size:26px;line-height:1;color:var(--ink)}
.mtile .mt-label{font-size:12px;color:var(--muted);letter-spacing:.02em}
.mtile-hero{grid-column:span 2;background:linear-gradient(135deg,#FFFFFF,#EAFBF0);border-color:#C6EBD3;padding:26px 24px}
@media(min-width:900px){.mtile-hero{grid-column:span 1}}
.mtile-hero .mt-num{font-size:44px;color:var(--gold-text)}
.mtile-hero .mt-sub{font-size:12.5px;color:var(--muted);margin-top:2px}

#app{max-width:1080px;margin:0 auto;padding:26px 24px 110px}
.pane{display:none}
.pane.active{display:block;animation:rise .35s ease both}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.pane.active{animation:none}}

/* ================= HERO ================= */
.hero{text-align:left;padding:64px 0 8px;max-width:1080px;margin:0 auto}
h1{font-family:var(--display);font-weight:700;font-size:clamp(36px,6vw,60px);line-height:1.02;letter-spacing:-.035em;margin:0 0 18px}
.sub{color:var(--muted);font-size:17px;max-width:56ch;margin:0 0 40px}

.herobox{background:var(--card);border:1.5px solid #D6DAE8;border-radius:24px;box-shadow:var(--shadow);text-align:left;overflow:hidden;transition:box-shadow .2s}
.herobox:focus-within{border-color:var(--ink);box-shadow:0 0 0 4px rgba(22,25,43,.06),var(--shadow)}
.herobox textarea{width:100%;border:0;background:none;font:inherit;font-size:16.5px;color:var(--ink);padding:24px 26px 10px;resize:none;display:block}
.herobox textarea:focus{outline:none}
.herobox textarea::placeholder{color:#A9AFC2}
.herobox-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 14px 14px}
.chip{background:#F7F8FC;border:0;border-radius:999px;color:var(--muted);font:inherit;font-size:13px;font-weight:500;padding:8px 15px;cursor:pointer;transition:all .13s}
.chip:hover{color:var(--ink);background:#EEF0F8}
.send{margin-left:auto;width:44px;height:44px;border-radius:14px;border:0;background:var(--primary);color:var(--primary-ink);cursor:pointer;display:grid;place-items:center;transition:transform .12s,background .15s;flex-shrink:0}
.send:hover{transform:translateY(-1px);background:#23273E}
.send[disabled]{opacity:.5;cursor:wait;transform:none}
@media(prefers-reduced-motion:reduce){.send:hover{transform:none}}

.details-toggle{background:none;border:0;color:var(--muted);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;margin:16px 0 0;padding:6px 10px;border-radius:8px}
.details-toggle:hover{color:var(--ink)}
.details{text-align:left;margin-top:14px}
.center{text-align:center}

/* numbered step markers anchored to the real controls (paste box, closer bench, output).
   Same gold-outlined numbered circle as before, now a reusable left-aligned lockup. */
.stepmark{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.stepmark b{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--accent);background:var(--accent);color:var(--ink);font-family:var(--display);font-weight:700;font-size:15px;flex-shrink:0;box-shadow:0 2px 8px rgba(37,211,102,.28)}
.stepmark span{font-family:var(--display);font-weight:700;font-size:15px;color:var(--ink);letter-spacing:-.01em}
.step3-hint{margin-top:0}


/* ================= CARDS ================= */
.card{background:var(--card);border:1px solid var(--stroke);border-radius:20px;padding:30px 32px;box-shadow:var(--shadow)}
.results-cols{max-width:800px;margin:26px auto 0}
.stack{display:flex;flex-direction:column;gap:20px}

.eyebrow{font-family:var(--display);font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--gold-text);margin:0 0 10px}
h2{font-family:var(--display);font-weight:700;font-size:26px;letter-spacing:-.02em;margin:0 0 18px}
h3{font-family:var(--display);font-weight:700;font-size:19px;margin:0 0 14px}
.hint{color:var(--muted);font-size:13.5px;margin:10px 0 0}

label{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:14px}
input,textarea,select{display:block;width:100%;margin-top:6px;background:#FAFAFD;border:1px solid var(--stroke);border-radius:10px;color:var(--ink);font:inherit;font-size:14.5px;padding:10px 13px;transition:border-color .15s}
/* Author display rules (input/textarea/select display:block, .subjects/.output-actions
   display:flex, etc.) beat the UA [hidden] rule, leaking hidden elements into view, e.g.
   the edit-in-place subject/body and Save/Cancel showing on a generated email. Only applies
   while [hidden] is set, so it can never affect an element's shown state. */
[hidden]{display:none!important}
input:focus-visible,textarea:focus-visible,select:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
textarea{resize:vertical}
.row{display:grid;grid-template-columns:1fr;gap:0 14px}
@media(min-width:640px){.row{grid-template-columns:1fr 1fr}}
.filelab input{padding:8px}

.btn{display:inline-block;border:1px solid var(--stroke);background:var(--card);color:var(--ink);border-radius:12px;padding:11px 20px;font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;text-decoration:none;transition:all .15s}
.btn:hover{border-color:#C4CADE}
.btn-primary{background:var(--primary);border-color:var(--primary);color:var(--primary-ink);transition:background .15s}
.btn-primary:hover{background:#23273E}
.btn-ghost{background:#F4F5FA}
.btn-gold{background:var(--accent);border-color:var(--accent);color:#16192B;box-shadow:0 2px 10px rgba(37,211,102,.28)}
.btn-gold:hover{background:#1EB958;border-color:#1EB958;box-shadow:0 6px 20px rgba(37,211,102,.34)}
.btn-lg{padding:15px 30px}
.btn[disabled]{opacity:.5;cursor:wait;transform:none}
@media(prefers-reduced-motion:reduce){.btn-primary:hover{transform:none}}

/* ---- gauge ---- */
.gauge-wrap{position:relative;max-width:280px;margin:6px auto 2px}
.gauge{width:100%;display:block}
.gauge-track{fill:none;stroke:#EDEFF6;stroke-width:14;stroke-linecap:round}
.gauge-fill{fill:none;stroke:var(--accent);stroke-width:14;stroke-linecap:round;stroke-dasharray:283;stroke-dashoffset:283;transition:stroke-dashoffset 1.1s cubic-bezier(.2,.8,.2,1),stroke .5s}
@media(prefers-reduced-motion:reduce){.gauge-fill{transition:none}}
.gauge-read{position:absolute;inset:auto 0 0 0;text-align:center}
.gauge-score{font-family:var(--display);font-weight:700;font-size:60px;line-height:1;letter-spacing:-.03em}
.gauge-temp{font-family:var(--body);font-size:12.5px;font-weight:600;text-transform:capitalize;letter-spacing:.04em;color:var(--muted);margin-top:4px}
.verdict{font-family:var(--display);font-weight:600;font-size:19px;line-height:1.45;text-align:center;margin:18px auto 20px;max-width:48ch;color:var(--ink)}
.intel{list-style:none;padding:0;margin:0 0 18px}
.intel li{position:relative;padding:7px 0 7px 22px;color:var(--muted);font-size:14px;border-bottom:1px solid #F0F2F8}
.intel li::before{content:"";position:absolute;left:2px;top:15px;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.objections{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.pill{font-family:var(--body);font-size:12px;font-weight:600;letter-spacing:.02em;border:1px solid var(--stroke);border-radius:999px;padding:5px 12px;color:var(--muted);background:#FAFAFD}
.pill.hot{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink);background:#F7F8FC;color:var(--ink)}
.strategy{background:#FAFAFD;border:1px solid var(--stroke);border-radius:14px;padding:16px 18px;font-size:14px}
.strategy b{color:var(--gold-text);font-family:var(--display);font-weight:700;font-size:13px;text-transform:none;letter-spacing:.03em}
.strategy p{margin:6px 0 0;color:var(--muted)}
.strategy p strong{color:var(--ink);font-weight:600}

/* ---- composer ---- */
.personas{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:9px;margin-bottom:20px}
.persona{background:#FAFAFD;border:1px solid var(--stroke);border-radius:12px;padding:11px 12px;cursor:pointer;transition:all .13s;text-align:left;color:var(--ink);font:inherit}
.persona:hover{border-color:#C4CADE}
.persona.sel{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink);background:#F7F8FC}
.persona .pn{font-family:var(--display);font-weight:700;font-size:13.5px;display:block;letter-spacing:-.01em}
.persona .pd{font-size:11.5px;color:var(--muted);line-height:1.45;display:block;margin-top:3px}
.persona.rec::after{content:"Recommended";font-family:var(--mono);font-size:9.5px;text-transform:none;letter-spacing:.03em;color:var(--gold-text);display:block;margin-top:5px}

.dial-wrap{margin-bottom:20px}
input[type=range]{-webkit-appearance:none;appearance:none;height:6px;border-radius:3px;background:linear-gradient(90deg,#B9C6EA,var(--accent) 60%,#C4602F);border:0;padding:0;margin-top:10px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--ink);border:3px solid #fff;cursor:pointer;box-shadow:0 1px 4px rgba(22,25,43,.3)}
.dial-marks{display:flex;justify-content:space-between;font-family:var(--body);font-size:11.5px;font-weight:500;letter-spacing:.02em;color:var(--muted);margin-top:8px}
.composer-actions{display:flex;gap:10px;flex-wrap:wrap}
.composer .spar-link{display:inline-block;margin-top:14px}
/* inline out-of-credits state (two doors: top up / plans) — replaces a blocking alert */
.credit-gate{margin-top:16px;padding:16px 18px;border:1px solid #C6EBD3;background:#EAFBF0;border-radius:14px;text-align:center}
.credit-gate .cg-msg{margin:0 0 12px;color:var(--ink);font-size:14.5px}
.credit-gate .cg-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.credit-gate .cg-status{margin-top:10px;color:#c0392b}

/* ---- output ---- */
.subjects{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.subject{display:flex;align-items:center;gap:10px;background:#FAFAFD;border:1px solid var(--stroke);border-radius:9px;padding:9px 13px;font-size:14px;cursor:pointer;transition:border-color .13s;color:var(--ink);font-family:var(--body);text-align:left;width:100%}
.subject:hover{border-color:#C4CADE}
.subject.sel{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink);background:#F7F8FC}
.subject .tag{font-family:var(--body);font-size:11px;font-weight:700;text-transform:none;letter-spacing:.03em;color:var(--gold-text);flex-shrink:0}
.email{background:#FAFAFD;border:1px solid var(--stroke);border-radius:14px;padding:20px 22px;font-family:var(--body);font-size:15px;line-height:1.8;white-space:pre-wrap;margin:0 0 16px}
/* ---- edit in place (follow-up + autopilot touches) ---- */
.edited-tag{font-size:11.5px;font-weight:700;letter-spacing:.04em;color:var(--gold-text);text-transform:uppercase}
.output-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:2px}
.edit-subj{width:100%;font:inherit;font-size:14px;border:1px solid var(--accent);border-radius:10px;padding:9px 12px;margin-bottom:10px;color:var(--ink)}
.edit-body{width:100%;font:inherit;font-size:14px;line-height:1.55;border:1px solid var(--accent);border-radius:12px;padding:12px 14px;color:var(--ink);resize:vertical;min-height:120px;background:#fff}
.edit-confirm{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13.5px;color:var(--ink);margin:8px 0 14px;padding:12px 14px;background:#EAFBF0;border:1px solid #C6EBD3;border-radius:12px}
.tl-edit,.tlrow-edit{background:none}
.tl-edit{border:0;color:var(--gold-text);font:inherit;font-size:12px;font-weight:600;cursor:pointer;padding:0 0 0 6px;text-decoration:underline}
.tl-subj-input{display:block;width:100%;font:inherit;font-size:13.5px;border:1px solid var(--accent);border-radius:8px;padding:6px 9px;margin:4px 0}
.tl-body-input{display:block;width:100%;font:inherit;font-size:13.5px;line-height:1.5;border:1px solid var(--accent);border-radius:8px;padding:8px 10px;resize:vertical;min-height:80px}
.tl-edit-actions{display:flex;align-items:center;gap:8px;margin-top:6px;flex-wrap:wrap}
.tl-edit-actions .btn{padding:4px 12px;font-size:12.5px}
.tlrow{padding:5px 0;border-bottom:1px solid #F0F2F8}
.tlrow:last-child{border-bottom:0}
.output-meta{display:grid;gap:12px;margin-bottom:18px;font-size:13.5px;color:var(--muted)}
.output-meta b{color:var(--gold-text);font-family:var(--display);font-weight:700;font-size:13px;text-transform:none;letter-spacing:.03em;display:block;margin-bottom:3px}

/* ---- sequence ---- */
.touch{border-left:2px solid var(--stroke);padding:0 0 22px 22px;position:relative}
.touch::before{content:"";position:absolute;left:-7px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--accent);border:3px solid #fff;box-shadow:0 0 0 1px var(--stroke)}
.touch .td{font-family:var(--body);font-size:12px;font-weight:700;text-transform:none;letter-spacing:.04em;color:var(--gold-text)}
.touch .ts{font-family:var(--display);font-weight:700;font-size:15.5px;margin:5px 0 3px}
.touch .tg{font-size:12.5px;color:var(--muted);margin-bottom:9px}
.touch pre{background:#FAFAFD;border:1px solid var(--stroke);border-radius:10px;padding:14px 16px;font-family:var(--body);font-size:13.5px;line-height:1.7;white-space:pre-wrap;margin:0}
.touch .btn{margin-top:9px;padding:7px 14px;font-size:12.5px}

/* ---- pipeline ---- */
.deals{width:100%;border-collapse:collapse;font-size:14px}
.deals th{font-family:var(--body);font-size:12px;font-weight:600;text-transform:none;letter-spacing:.03em;color:var(--muted);text-align:left;font-weight:400;padding:9px 12px;border-bottom:1px solid var(--stroke)}
.deals td{padding:12px;border-bottom:1px solid #F0F2F8}
.score-chip{font-family:var(--display);font-weight:600;border-radius:7px;padding:3px 9px;font-size:13px}
.deals .btn{padding:5px 11px;font-size:12px;margin-right:5px}
.row-x-cell{text-align:right;width:1%;white-space:nowrap}
.row-x{background:none;border:0;color:var(--muted);font-size:16px;cursor:pointer;opacity:0;transition:opacity .15s ease,color .15s ease;padding:6px 10px}
.pipeline-row:hover .row-x{opacity:1}
.row-x:hover{color:#C4602F}
@media(hover:none){.row-x{opacity:.45}}
.row-confirm{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-size:13px;color:var(--muted)}
.rc-btn{background:none;border:1px solid var(--stroke);border-radius:8px;font:inherit;font-size:12.5px;font-weight:600;padding:3px 10px;cursor:pointer}
.rc-yes{color:#C4602F;border-color:#E3B7A3}
.rc-yes:hover{background:#FBEDE7}
.rc-no:hover{background:#F3F5FA}
.cell-edit{cursor:text;border-bottom:1px dashed transparent}
.cell-edit:hover{border-bottom-color:var(--stroke)}
.cell-edit.is-empty{color:var(--muted);font-style:italic}
.cell-input{font:inherit;border:1px solid var(--accent);border-radius:8px;padding:4px 8px;width:130px}

/* ---- closer bench ---- */
.bench{margin-top:44px;text-align:left}
.bench-lead{font-family:var(--body);font-weight:400;font-size:14px;color:var(--muted);margin:0 0 14px}
.bench-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:9px}
.bench-grid:not(.expanded) .bench-extra{display:none}
.bench-toggle{background:none;border:0;color:var(--gold-text);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;padding:12px 0 0;text-decoration:none}
.bench-toggle:hover{text-decoration:underline}
.bench-item{display:flex;align-items:flex-start;gap:10px;background:var(--card);border:1px solid var(--stroke);border-radius:14px;padding:13px 15px;cursor:pointer;transition:all .13s;text-align:left;font:inherit;color:var(--ink)}
.bench-item:hover{border-color:#C4CADE}
.bench-item .bn{font-family:var(--display);font-weight:700;font-size:13.5px;display:block}
.bench-item .bd{font-size:14px;color:#454C63;line-height:1.45;display:block;margin-top:3px}

/* ---- voice switcher on output ---- */
.voice-row{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 16px}
.voice-row .vlabel{font-family:var(--body);font-size:12px;font-weight:600;text-transform:none;letter-spacing:.03em;color:var(--muted);width:100%;margin-bottom:2px}
.voice{background:#F4F5FA;border:1px solid var(--stroke);border-radius:999px;color:var(--muted);font:inherit;font-size:12.5px;font-weight:600;padding:6px 13px;cursor:pointer;transition:all .13s}
.voice:hover{color:var(--ink);border-color:#C4CADE}
.voice.sel{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink);background:#F7F8FC;color:var(--ink)}
.voice[disabled]{opacity:.5;cursor:wait}

/* ---- playbook ---- */
.pb-section{font-family:var(--display);font-weight:700;font-size:17px;margin:26px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--stroke)}
.pb-section:first-child{margin-top:0}
.play{display:grid;grid-template-columns:1fr auto;gap:4px 16px;padding:13px 0;border-bottom:1px solid #F0F2F8;align-items:start}
.play .pname{font-family:var(--display);font-weight:700;font-size:14px}
.play .ptags{font-size:11.5px;color:var(--muted)}
.play .pline{grid-column:1/-1;font-size:14px;color:var(--muted);line-height:1.65;font-style:italic}
.play .btn{padding:6px 13px;font-size:12.5px}
.houserule{margin-top:26px;background:var(--accent-soft);border:1px solid #B7E6C6;border-radius:12px;padding:15px 18px;font-family:var(--display);font-weight:700;font-size:14.5px;color:var(--gold-text)}

.radio{flex-shrink:0;width:17px;height:17px;border-radius:50%;border:2px solid #C9CEDF;margin-top:3px;position:relative;transition:border-color .15s}
.bench-item.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink);background:#F7F8FC}
.bench-item.on .radio{border-color:var(--accent)}
.bench-item.on .radio::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--accent)}
.bench-item.rec .bn::after{content:" · Recommended";font-family:var(--body);font-weight:600;font-size:10.5px;color:var(--gold-text)}

.foot{text-align:center;padding:60px 0 30px;color:#A9AFC2;font-size:13px}
.foot a{color:var(--muted);text-decoration:none}
.foot a:hover{color:var(--ink)}

/* ---- auth ---- */
.authbar{display:flex;gap:9px;align-items:center}
.authbar .btn{padding:8px 16px;font-size:13.5px}
.user-chip{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.user-chip b{font-family:var(--display);color:var(--gold-text);font-size:14px}

/* ---- The Closer's Dojo: belt chip + drill panel ---- */
.belt-wrap{position:relative;display:inline-block}
.belt-chip{display:flex;flex-direction:column;gap:4px;min-width:78px;background:var(--card);border:1px solid var(--stroke);border-radius:10px;padding:6px 10px;cursor:pointer;font:inherit;transition:border-color .15s}
.belt-chip:hover{border-color:#C4CADE}
.belt-lockup{display:flex;align-items:center;gap:6px}
.belt-dot{width:11px;height:11px;border-radius:50%;border:1px solid rgba(22,25,43,.18);flex-shrink:0;display:inline-block}
.belt-dot.belt-black{box-shadow:0 0 0 1.5px var(--accent)}
.belt-name{font-size:12.5px;font-weight:700;color:var(--ink)}
.belt-prog{height:3px;background:var(--stroke);border-radius:999px;overflow:hidden}
.belt-prog-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--ink),var(--accent));border-radius:999px;transition:width .3s ease}
.dojo-panel{position:absolute;top:calc(100% + 8px);right:0;width:344px;max-width:88vw;background:var(--card);border:1px solid var(--stroke);border-radius:16px;box-shadow:0 16px 44px rgba(22,25,43,.18);padding:18px;z-index:60;text-align:left}
.dojo-panel[hidden]{display:none}
.dp-belt{display:flex;align-items:center;gap:8px;font-family:var(--display);font-size:15px;color:var(--ink)}
.dp-meta{font-size:12.5px;color:var(--muted);margin-top:4px}
.dp-drill{margin-top:16px;padding-top:14px;border-top:1px solid var(--stroke)}
.dp-eyebrow{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-text);font-weight:700;margin:0 0 8px}
.dp-q{font-size:14px;font-weight:600;color:var(--ink);margin:0 0 12px;line-height:1.5}
.dp-answers{display:flex;flex-direction:column;gap:8px}
.dp-ans{text-align:left;background:var(--card);border:1px solid var(--stroke);border-radius:10px;padding:10px 12px;font:inherit;font-size:13px;line-height:1.45;color:var(--ink);cursor:pointer;transition:border-color .13s}
.dp-ans:hover:not(:disabled){border-color:var(--accent)}
.dp-ans:disabled{cursor:default}
.dp-ans.correct{border-color:#1F9D62;background:#EAF7F0;color:#166B45}
.dp-ans.wrong{border-color:#C4602F;background:#FBEDE7;color:#9B4520}
.dp-coach{font-size:13px;color:var(--muted);line-height:1.6;margin:12px 0 0;padding-top:12px;border-top:1px solid var(--stroke)}
.dp-done{font-size:12.5px;color:var(--gold-text);font-weight:600;margin:8px 0 0}
.dp-foot{font-size:11.5px;color:var(--muted);margin:14px 0 0;padding-top:12px;border-top:1px solid var(--stroke);line-height:1.6}
.linklike{background:none;border:0;color:var(--ink);font:inherit;font-size:13px;font-weight:600;cursor:pointer;text-decoration:underline;padding:0}
.modal-back{position:fixed;inset:0;background:rgba(22,25,43,.4);backdrop-filter:blur(4px);display:grid;place-items:center;z-index:50;padding:20px}
.modal-back[hidden]{display:none}
.modal{position:relative;width:100%;max-width:420px}
.modal .btn-lg{width:100%;margin-top:4px}
.btn-google{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;background:#fff;color:var(--ink);border:1px solid var(--stroke);font-weight:600;margin-top:6px}
.btn-google:hover{background:#F7F8FC;border-color:#C4CADE}
.btn-google svg{flex-shrink:0}
.or-line{display:flex;align-items:center;color:var(--muted);font-size:13px;margin:14px 0}
.or-line::before,.or-line::after{content:"";flex:1;height:1px;background:var(--stroke)}
.or-line span{padding:0 12px}
.modal-x{position:absolute;top:14px;right:16px;background:none;border:0;font-size:22px;color:var(--muted);cursor:pointer;line-height:1}

/* ── Mobile header (< 720px): wrap the topbar, shrink the nav, drop the email ── */
@media(max-width:720px){
  .topbar{flex-wrap:wrap;row-gap:10px;padding:12px 18px}
  .tabs{gap:4px}
  .tab{padding:6px 10px;font-size:13px}
  .authbar{gap:6px;margin-left:auto;width:100%;justify-content:flex-end}
  .authbar .btn{padding:6px 11px;font-size:12.5px}
  .user-chip{font-size:12px}
  .uc-email{display:none}
}

/* ---- flavor pass ---- */
.btn{transition:transform .15s ease, box-shadow .15s ease, background .15s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(22,25,43,.10)}
.btn:active{transform:translateY(0);box-shadow:0 1px 4px rgba(22,25,43,.10)}
.btn-primary{box-shadow:0 2px 10px rgba(22,25,43,.22)}
.btn-primary:hover{box-shadow:0 6px 20px rgba(22,25,43,.28), 0 0 0 3px rgba(37,211,102,.12)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.chip{transition:border-color .15s ease, background .15s ease, transform .15s ease}
.chip:hover{border-color:var(--accent);background:#F0FBF4;transform:translateY(-1px)}
.card{transition:box-shadow .2s ease}
.card:hover{box-shadow:0 10px 30px rgba(22,25,43,.08)}
.bench-item{transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease}
.bench-item:hover{border-color:var(--accent);box-shadow:0 6px 18px rgba(22,25,43,.08);transform:translateY(-1px)}
.herobox{box-shadow:0 8px 30px rgba(22,25,43,.08), 0 1px 2px rgba(22,25,43,.05)}
.herobox:focus-within{box-shadow:0 8px 30px rgba(22,25,43,.10), 0 0 0 3px rgba(37,211,102,.14)}
.foot{border-top:1px solid var(--stroke);margin-top:60px;padding-top:34px;box-shadow:0 -12px 30px -18px rgba(22,25,43,.06)}
.foot .fmark{font-family:var(--display);font-weight:700;font-size:15px;color:var(--ink);letter-spacing:.2px;display:block;margin-bottom:8px}
.foot .fmark span{color:var(--gold-text)}

/* ---- marketing structure ---- */
.gold{color:var(--accent)}
.trust{text-align:center;margin:44px 0 8px}
.trust .t-eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:14px}
.trust .t-line{font-size:14.5px;color:var(--muted);letter-spacing:.01em}
.trust .t-line .ind{color:var(--gold-text);font-weight:600}
.s-eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text);font-weight:700;text-align:left;margin-bottom:10px}
/* Dark platform band: the revenue workflow as connected product panels. One brand gradient
   moment (green->mint->cyan glow). Planned nodes carry a quiet 'Planned' marker, never a fake
   live status, so we never imply CRM sync / reporting ships today. */
.platform{background:#0E1A2E;width:100vw;max-width:none;margin:130px 0 0;margin-left:calc(50% - 50vw);padding:84px 24px;color:#fff;position:relative;overflow:hidden}
.platform::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 80% at 12% -5%, rgba(37,211,102,.18), rgba(37,211,102,0) 42%), radial-gradient(90% 80% at 100% 108%, rgba(56,224,168,.16), rgba(80,205,255,0) 55%)}
.platform-in{max-width:960px;margin:0 auto;position:relative}
.platform .s-eyebrow{color:#5CE39A}
.platform h2{color:#fff!important;margin-bottom:12px}
.platform-lead{color:rgba(255,255,255,.72);font-size:16px;line-height:1.6;max-width:60ch;margin:0 0 36px}
.pf-flow{display:flex;flex-direction:column;max-width:520px}
.pf-node{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:15px 18px}
.pf-head{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:14.5px;color:#fff;margin-bottom:9px}
.pf-i{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--accent);color:#0E1A2E;font-size:12px;font-weight:700;flex-shrink:0}
.pf-row{display:flex;justify-content:space-between;align-items:center;gap:10px;color:#fff;font-weight:600;font-size:13.5px}
.pf-meta{color:rgba(255,255,255,.6);font-size:12.5px;margin-top:5px;line-height:1.5}
.pf-tag{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:#9fb0c6;background:rgba(255,255,255,.09);border-radius:5px;padding:2px 7px;white-space:nowrap}
.pf-tag.warn{color:#ffd18a;background:rgba(255,180,80,.14)}
.pf-tag.ok{color:#5CE39A;background:rgba(37,211,102,.15)}
.pf-arrow{width:2px;height:20px;margin:0 0 0 28px;background:linear-gradient(#25D366,#38E0A8)}
.pf-planned .pf-head{color:rgba(255,255,255,.82)}
.pf-soon{margin-left:auto;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#8ea3bd;border:1px solid rgba(255,255,255,.2);border-radius:5px;padding:1px 6px}

/* Step 3 illustrative payoff: a drafted email with approve/edit/schedule. Auto-hides once a real deal runs. */
.step3-example{position:relative;border:1px solid var(--stroke)}
.stack:has(#gaugePanel:not([hidden])) .step3-example,.stack:has(#output:not([hidden])) .step3-example{display:none}
.ex-flag{position:absolute;top:14px;right:16px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);background:var(--stroke);border-radius:5px;padding:2px 7px}
.ex-head{font-size:13.5px;color:var(--ink);border-bottom:1px solid var(--stroke);padding-bottom:12px;margin-bottom:12px;line-height:1.95}
.ex-k{display:inline-block;width:56px;color:var(--muted);font-size:12px}
.ex-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.ex-tag{font-size:11px;font-weight:600;color:var(--ink);background:#F1F3F8;border-radius:6px;padding:3px 10px}
.ex-body{font-size:14px;line-height:1.6;color:var(--ink);background:#FAFBFC;border:1px solid var(--stroke);border-radius:10px;padding:14px 16px;margin-bottom:14px}
.ex-body p{margin:0 0 10px}
.ex-body p:last-child{margin:0}
.ex-actions{display:flex;flex-wrap:wrap;gap:10px}
/* Stripe-clean metric row: green as the single accent, hairline dividers, uppercase labels. */
.stats3{max-width:820px;margin:44px auto 0;padding:0 24px;display:grid;grid-template-columns:1fr;text-align:left}
@media(min-width:720px){.stats3{grid-template-columns:repeat(3,1fr)}}
.st{padding:20px 24px}
.st + .st{border-top:1px solid var(--stroke)}
@media(min-width:720px){.st{padding:4px 22px}.st + .st{border-top:0;border-left:1px solid var(--stroke)}}
.st-num{font-family:var(--display);font-weight:700;font-size:46px;color:var(--accent);line-height:1;letter-spacing:-.02em}
.st-num small{font-size:20px;color:var(--muted);font-weight:400;margin-left:2px}
.st-num.st-text{font-size:31px;letter-spacing:-.01em}
.st-label{font-size:11.5px;color:var(--muted);margin-top:12px;line-height:1.4;text-transform:uppercase;letter-spacing:.09em;font-weight:600}
.thesis{max-width:820px;margin:84px auto 0;padding:0 24px;text-align:center}
.th-line{font-family:var(--display);font-weight:700;font-size:clamp(26px,4.2vw,40px);line-height:1.2;color:var(--ink);margin:0 0 16px}
.th-sub{color:var(--muted);font-size:16.5px;line-height:1.7;max-width:56ch;margin:0 auto}

/* ---- feature showcase ---- */
.show{max-width:1100px;margin:84px auto 0;padding:0 24px}
.show h2{text-align:center;margin-bottom:34px}
.show-grid{display:grid;grid-template-columns:1fr;gap:22px}
@media(min-width:900px){.show-grid{grid-template-columns:340px 1fr}}
.show-rail{display:flex;flex-direction:column;gap:12px}
.show-step{text-align:left;background:var(--card);border:1px solid var(--stroke);border-radius:16px;padding:18px 20px;cursor:pointer;transition:border-color .15s,box-shadow .15s;display:block;width:100%}
.show-step b{display:block;font-family:var(--display);font-size:15.5px;margin-bottom:4px}
.show-step span{font-size:13.5px;color:var(--muted);line-height:1.5}
.show-step.active{border-color:var(--accent);box-shadow:0 6px 18px rgba(22,25,43,.08)}
.show-panel{position:relative;background:linear-gradient(180deg,#FFF,#F7F8FC);border:1px solid var(--stroke);border-radius:20px;padding:26px;box-shadow:0 10px 34px rgba(22,25,43,.08);min-height:320px}
.show-pill{position:absolute;top:14px;right:14px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border:1px solid var(--stroke);border-radius:999px;padding:4px 10px;background:#fff}
/* panel 0 — paste mock */
.mock-paste{position:relative;background:#fff;border:1px solid var(--stroke);border-radius:14px;padding:20px;min-height:160px}
.mock-line{display:block;height:12px;border-radius:6px;background:#EDEFF5;margin-bottom:14px}
.mock-line.w80{width:80%}.mock-line.w60{width:60%}
.mock-send{position:absolute;right:16px;bottom:16px;width:42px;height:42px;border-radius:12px;background:var(--accent);border:0;color:#fff;display:grid;place-items:center;cursor:default}
/* panel 2 — email preview mock */
.mock-email .me-row{font-size:14px;color:var(--ink);padding:6px 0;border-bottom:1px solid var(--stroke)}
.mock-email .me-k{display:inline-block;min-width:64px;color:var(--muted);font-size:12.5px;text-transform:uppercase;letter-spacing:.04em}
.mock-email .me-body{padding:14px 0}
.mock-email .me-body p{margin:0 0 8px;font-size:14px;line-height:1.55;color:var(--ink)}
.mock-email .me-foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;border-top:1px solid var(--stroke);padding-top:14px}
.mock-email .me-voice{font-size:13px;color:var(--muted)}
.mock-email .me-btns{display:flex;gap:8px}
.mock-email .btn{cursor:default;padding:7px 16px;font-size:13px}
/* panel 3 — flatten the demo-timeline inside the panel (already inside a card) */
.show-panel .mock-tl{background:none;border:0;box-shadow:none;padding:0;margin:0}
.tl-item.replied .tl-dot{background:#1F9D62}
.tl-item.replied .tl-text{color:#1F9D62}

/* ---- before / after ---- */
.ba{max-width:1060px;margin:84px auto 0;padding:0 24px}
.ba h2{text-align:left;margin-bottom:12px}
.ba-thesis{font-family:var(--display);font-weight:700;font-size:clamp(19px,2.4vw,24px);line-height:1.35;letter-spacing:-.01em;color:var(--ink);max-width:44ch;margin:0 0 30px}
.ba-grid{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:860px){.ba-grid{grid-template-columns:1fr 1fr}}
.ba-card{border:1px solid var(--stroke);border-radius:20px;padding:26px;background:var(--card)}
.ba-card.after{border-color:#C6EBD3;background:linear-gradient(135deg,#FFF,#EAFBF0)}
.ba-card h3{font-size:18px;margin-bottom:4px}
.ba-sub{font-size:13.5px;color:var(--muted);margin:0 0 18px}
.ba-msg{border:1px solid var(--stroke);border-radius:12px;padding:12px 16px;font-size:14px;color:var(--muted);margin-bottom:10px;background:#fff}
.ba-msg.strong{color:var(--ink);font-weight:500}
.ba-insight{background:var(--ink);color:#fff;border-radius:12px;padding:12px 16px;font-size:13.5px;margin-bottom:10px}
.ba-status{font-size:12.5px;color:#C4602F;font-weight:600;margin-top:4px}
.ba-status.good{color:#1F9D62}
.faq{max-width:760px;margin:70px auto 0;padding:0 24px}
.faq h2{text-align:left;margin-bottom:26px}
.faq details{background:var(--card);border:1px solid var(--stroke);border-radius:14px;padding:18px 22px;margin-bottom:10px}
.faq summary{font-weight:700;font-size:15.5px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:20px;color:var(--muted)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:12px 0 0;color:var(--muted);font-size:14.5px;line-height:1.7}
.tt{max-width:760px;margin:56px auto 0;padding:40px 24px;text-align:center;background:var(--card);border:1px solid var(--stroke);border-radius:20px;box-shadow:var(--shadow)}
.tt .tt-line{color:var(--muted);font-size:15.5px;margin:6px 0 20px}
.endcap{background:var(--ink);border-radius:24px;max-width:1020px;margin:96px auto 0;padding:60px 44px;text-align:left;color:#fff}
/* Enforced with !important so page-scoped p/h2 rules (e.g. .res p{color:#3A3F55} on guide
   pages) can't out-specify these and tank contrast against the ink endcap background. */
.endcap h2{color:#fff!important;margin-bottom:10px}
.endcap p{color:rgba(255,255,255,.78)!important;margin-bottom:26px;font-size:15.5px!important}
.endcap .btn-primary{background:#fff;color:var(--ink);border-color:#fff}
.endcap .btn-primary:hover{background:#F4F5FA;color:var(--ink);transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,0,0,.28)}
.endcap .hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.endcap .hero-cta .btn:not(.btn-primary){background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.endcap .hero-cta .btn:not(.btn-primary):hover{border-color:#fff;background:rgba(255,255,255,.08)}
/* operational sub-label under each numbered step */
.step-sub{color:var(--muted);font-size:14.5px;line-height:1.5;margin:0 0 16px 40px;max-width:60ch}
/* Cross-link line under the endcap on guide/comparison pages ("More guides:" / "More comparisons:").
   !important on the label so guide pages' .res p (0,1,1) can't override .othercmp (0,1,0). */
.othercmp{color:var(--muted)!important;font-size:14px!important}
.othercmp a{color:var(--ink);text-decoration:none}
.othercmp a:hover{color:var(--gold-text)}
.foot{max-width:1140px;margin:70px auto 0;padding:40px 24px 50px;text-align:left;border-top:0;box-shadow:none}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px 22px}
/* brand spans the full width until there's room for it as its own column */
.f-grid .f-brand{grid-column:1 / -1}
@media(min-width:620px){.f-grid{grid-template-columns:1fr 1fr 1fr}}
@media(min-width:980px){.f-grid{grid-template-columns:1.5fr repeat(5,1fr)}.f-grid .f-brand{grid-column:auto}}
.f-brand p{color:var(--muted);font-size:13.5px;line-height:1.6;max-width:30ch;margin-top:8px}
.f-col h4{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.f-col a{display:block;color:var(--ink);text-decoration:none;font-size:14.5px;margin-bottom:9px}
.f-col a:hover{color:var(--gold-text)}
.f-bottom{border-top:1px solid var(--stroke);margin-top:36px;padding-top:20px;color:var(--muted);font-size:13px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}

/* ---- depth pass ---- */
.dc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.dc-stat{background:#fff;border:1px solid var(--stroke);border-radius:14px;padding:14px;text-align:center}
.dc-num{font-family:var(--display);font-weight:700;font-size:24px;display:block;color:var(--ink)}
.dc-warm{color:#C4602F}
.dc-lab{font-size:13px;color:var(--muted);display:block;margin-top:4px}
.dc-insight{background:var(--ink);color:#fff;border-radius:14px;padding:18px 22px;margin:14px 0}
.dc-insight .dc-k{color:var(--gold-text)}
.dc-insight p{margin:6px 0 0;font-size:16.5px;font-weight:600;line-height:1.5;font-family:var(--display)}
.dc-k{color:var(--muted);min-width:150px;flex-shrink:0}
@media(max-width:640px){.dc-grid{grid-template-columns:1fr}.dc-k{min-width:110px}}

/* ---- sample deal timeline ---- */
.demo-timeline{max-width:880px;margin:18px auto 0;background:linear-gradient(180deg,#FFFFFF,#F7F8FC);border:1px solid var(--stroke);border-radius:20px;padding:24px 28px;box-shadow:0 12px 40px rgba(22,25,43,.08)}
.tl-item{position:relative;display:grid;grid-template-columns:58px 1fr;column-gap:20px;padding:0 0 20px}
.tl-item:last-child{padding-bottom:0}
.tl-date{font-size:13px;color:var(--muted);text-align:right;line-height:1.55;white-space:nowrap}
.tl-dot{position:absolute;left:66px;top:5px;width:13px;height:13px;border-radius:50%;background:var(--ink);transform:translateX(-50%);z-index:1}
.tl-item:not(:last-child)::before{content:"";position:absolute;left:66px;top:5px;height:100%;width:2px;background:var(--stroke);transform:translateX(-50%)}
.tl-text{font-size:14px;color:var(--ink);line-height:1.5}
.tl-item.now .tl-dot{width:17px;height:17px;top:4px;background:var(--accent);box-shadow:0 0 0 4px rgba(37,211,102,.18)}
.tl-item.next .tl-dot{background:#fff;border:2px solid var(--stroke)}
.tl-item.next::before{background:repeating-linear-gradient(to bottom,var(--stroke) 0 4px,transparent 4px 9px)}
.tl-item.next .tl-text,.tl-item.next .tl-date{color:var(--muted)}

/* ---- staged progress (analyze / sequence) ---- */
.prog{margin:18px auto;max-width:560px;text-align:center}
.prog-bar{height:6px;border-radius:999px;background:var(--stroke);overflow:hidden}
.prog-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--ink),var(--accent));border-radius:999px;transition:width .6s ease}
.prog-stage{margin-top:10px;font-size:13.5px;color:var(--muted)}
@keyframes progPulse{0%,100%{opacity:1}50%{opacity:.5}}
@media(prefers-reduced-motion:no-preference){.prog-stage{animation:progPulse 1.6s ease-in-out infinite}}

/* ---- AutoPilot live confirmation ---- */
.ap-live{margin-top:18px;padding-top:18px;border-top:1px solid var(--stroke)}
.ap-live-h{margin:0 0 14px}
.ap-timeline{margin-top:4px}
.ap-status{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-left:6px}
.ap-live-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}

/* ---- proof scaffold (ships hidden) ---- */
.proof{max-width:880px;margin:26px auto 0;text-align:left}
.proof-card{background:var(--card);border:1px solid var(--stroke);border-radius:20px;padding:28px 30px;box-shadow:var(--shadow)}
.proof-num{font-family:var(--display);font-weight:700;font-size:40px;color:var(--gold-text);display:block;line-height:1}
.proof-lab{font-size:13px;color:var(--muted)}
.proof-meta{display:grid;grid-template-columns:1fr;gap:12px;margin:20px 0}
@media(min-width:640px){.proof-meta{grid-template-columns:1fr 1fr}}
.proof-meta .proof-k{color:var(--muted);font-size:13px;display:block}
.proof-meta .proof-v{color:var(--ink);font-weight:600;font-size:14.5px}
.proof-quote{font-family:var(--display);font-size:17px;line-height:1.6;color:var(--ink);border-left:3px solid var(--accent);padding-left:16px;margin:8px 0 0}

/* keyboard focus visible on links too (buttons/inputs already covered above) */
a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}

/* how-it-works + FAQ: contained rounded band panels (chose contained over full-bleed — body has no overflow-x guard, so 100vw would add a horizontal scrollbar) */
.how,.faq{background:#F3F5FA;border:1px solid var(--stroke);border-radius:24px;padding:64px 24px}

.engine{max-width:1060px;margin:90px auto 0;padding:0 24px;text-align:center}
.pipe{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;margin-top:28px}
.pipe-step{background:var(--card);border:1px solid var(--stroke);border-radius:999px;padding:10px 18px;font-size:13.5px;font-weight:600;box-shadow:0 2px 8px rgba(22,25,43,.05)}
.pipe-end{background:var(--accent);color:var(--ink);border-color:var(--accent);font-weight:700;box-shadow:0 4px 18px rgba(37,211,102,.38)}
.pipe-arrow{color:var(--muted)}
/* Security and control: a clean hairline-divided grid of the capabilities that actually ship. */
.secure-sec{max-width:1020px;margin:90px auto 0;padding:0 24px;text-align:left}
.secure-lead{color:var(--muted);font-size:16px;line-height:1.6;max-width:62ch;margin:0 0 26px}
.secure-grid{display:grid;grid-template-columns:1fr;gap:1px;background:var(--stroke);border:1px solid var(--stroke);border-radius:14px;overflow:hidden}
@media(min-width:720px){.secure-grid{grid-template-columns:repeat(3,1fr)}}
.sec-card{background:var(--card);padding:20px 22px}
.sec-card b{display:block;font-family:var(--display);font-weight:700;font-size:15px;color:var(--ink);margin:0 0 6px}
.sec-card b::before{content:"✓ ";color:var(--accent);font-weight:700}
.sec-card p{margin:0;font-size:13.5px;line-height:1.55;color:var(--muted)}

/* ---- round 2 ---- */
@media(min-width:900px){.dc-grid{grid-template-columns:repeat(3,1fr)}}

/* engine as a full-bleed ink band (body has overflow-x:hidden to contain the 100vw) */
.engine{background:var(--ink);width:100vw;max-width:none;margin-top:90px;margin-left:calc(50% - 50vw);padding:64px 24px;text-align:center}
.engine h2{color:#fff}
.engine .s-eyebrow{color:var(--gold-text)}
.engine .pipe{max-width:1200px;margin-left:auto;margin-right:auto}
/* keep the final arrow and the gold Signed pill together so Signed is never orphaned
   onto its own line and no arrow dangles at a wrap boundary */
.pipe-terminal{display:inline-flex;align-items:center;gap:10px}
.engine .pipe-arrow{color:rgba(255,255,255,.4)}

.integ{max-width:900px;margin:90px auto 0;padding:0 24px;text-align:left}
.integ-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:18px}
.integ-chip{display:flex;align-items:center;gap:9px;border:1px solid var(--stroke);border-radius:12px;padding:12px 18px;font-weight:700;font-size:15px;background:var(--card)}
.integ-chip:not(.live){opacity:.55}
.integ-tag{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#1F9D62;border:1px solid #BFE5D2;border-radius:999px;padding:3px 8px}
.integ-tag.soon{border:0;padding:0;text-transform:none;letter-spacing:.02em;font-weight:600;color:var(--muted)}

/* Motion 5b: a slow subtle pulse that travels across the engine flow arrows and
   terminates at Signed. Steps stay static; the arrows brighten in sequence, then the
   gold Signed pill flares last. Signed sits last in source order, so it stays the natural
   terminal node on one line and the natural last item when the row wraps on mobile. */
@keyframes arrowTravel{0%,55%,100%{color:rgba(255,255,255,.4);text-shadow:none}22%{color:var(--gold-text);text-shadow:0 0 10px rgba(37,211,102,.55)}}
@keyframes signedArrive{0%,55%,100%{box-shadow:0 4px 18px rgba(37,211,102,.38)}20%{box-shadow:0 0 0 2px rgba(37,211,102,.55),0 8px 28px rgba(37,211,102,.6)}}
@media(prefers-reduced-motion:no-preference){
  .engine .pipe-arrow{animation:arrowTravel 4.2s ease-in-out infinite}
  .engine .pipe-arrow:nth-of-type(2){animation-delay:0s}
  .engine .pipe-arrow:nth-of-type(4){animation-delay:.5s}
  .engine .pipe-arrow:nth-of-type(6){animation-delay:1s}
  .engine .pipe-arrow:nth-of-type(8){animation-delay:1.5s}
  .engine .pipe-terminal .pipe-arrow{animation-delay:2s}
  .engine .pipe-end{animation:signedArrive 4.2s ease-in-out infinite;animation-delay:2.4s}
}

/* ============ polish pass ============ */

/* ---- item 2: trust band + hidden metrics scaffold ---- */
.trustband{max-width:820px;margin:34px auto 0;padding:0 24px;text-align:center}
.tb-line{color:var(--muted);font-size:14.5px;line-height:1.6;margin:0}
.metricbar{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:22px}
.metricbar.is-empty{display:none}
.metric{text-align:center}
.metric-num{display:block;font-family:var(--display);font-weight:700;font-size:34px;color:var(--gold-text);line-height:1}
.metric-label{display:block;font-size:13px;color:var(--muted);margin-top:6px}

/* ---- item 3: works-with logo cards ---- */
.integ h2{margin:6px 0 0}
.integ-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;max-width:720px;margin:22px auto 0}
@media(min-width:720px){.integ-grid{grid-template-columns:repeat(4,1fr)}}
.integ-card{display:flex;flex-direction:column;align-items:center;gap:10px;background:var(--card);border:1px solid var(--stroke);border-radius:16px;padding:20px 16px;box-shadow:0 2px 8px rgba(22,25,43,.05);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.integ-card:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(22,25,43,.10);border-color:#C4CADE}
.integ-card:not(.is-live){opacity:.72}
.integ-mark{display:block}
.integ-name{font-family:var(--display);font-weight:700;font-size:15px;color:var(--ink)}
.integ-badge{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);background:#F2F4FA;border:1px solid var(--stroke);border-radius:999px;padding:3px 10px}
.integ-badge.live{color:#1F9D62;background:#EAF7F0;border-color:#BFE5D2}
@media(prefers-reduced-motion:reduce){.integ-card:hover{transform:none}}

/* ---- motion 5c: hover lift + shadow on comparison cards (closer cards already lift) ---- */
.ba-card{transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.ba-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(22,25,43,.10)}
@media(prefers-reduced-motion:reduce){.ba-card:hover,.bench-item:hover{transform:none}}

/* ---- forward intake ---- */
.intake-card{margin-bottom:16px}
.intake-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.intake-addr{font-family:var(--mono);font-size:15px;font-weight:600;color:var(--ink);background:#F4F5FA;border:1px solid var(--stroke);border-radius:10px;padding:9px 13px;word-break:break-all}
#intakeCopy,#dashIntakeCopy{padding:9px 16px;font-size:13.5px}
.fwd-chip{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--gold-text);background:var(--accent-soft);border:1px solid #B7E6C6;border-radius:999px;padding:2px 8px;vertical-align:middle}

/* ---- forward intake marketing section ---- */
.fwd{max-width:1060px;margin:90px auto 0;padding:0 24px;text-align:left}
.fwd h2{margin-bottom:14px}
.fwd-lead{color:var(--muted);font-size:16.5px;line-height:1.7;max-width:60ch;margin:0 auto 34px}
.fwd-demo{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:820px;margin:0 auto}
@media(min-width:820px){.fwd-demo{flex-direction:row;align-items:stretch;justify-content:center}}
.fwd-mail,.fwd-reply{flex:1;background:var(--card);border:1px solid var(--stroke);border-radius:18px;padding:20px 22px;text-align:left;box-shadow:0 2px 10px rgba(22,25,43,.05);width:100%}
.fwd-reply{background:linear-gradient(135deg,#FFF,#EAFBF0);border-color:#C6EBD3}
.fwd-illus{display:block;margin:0 0 12px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.fwd-row{display:flex;gap:10px;font-size:14px;padding:5px 0;border-bottom:1px solid #F0F2F8}
.fwd-row:last-child{border-bottom:0}
.fwd-k{color:var(--muted);min-width:58px}
.fwd-addr{font-family:var(--mono);font-weight:600;color:var(--ink);word-break:break-all}
.fwd-subj{color:var(--ink);font-weight:500}
.fwd-arrow{color:var(--gold-text);font-size:26px;line-height:1;display:grid;place-items:center;flex-shrink:0}
@media(max-width:819px){.fwd-arrow{transform:rotate(90deg)}}
.fwd-reply-h{font-family:var(--display);font-weight:700;font-size:16px;color:var(--ink);margin-bottom:12px}
.fwd-stats{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:16px}
.fwd-stat{font-size:14px;color:var(--muted)}
.fwd-stat b{font-family:var(--display);font-size:22px;color:var(--gold-text);margin-right:4px}
.fwd-tag{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--gold-text);background:var(--accent-soft);border:1px solid #B7E6C6;border-radius:999px;padding:3px 10px}
.fwd-cta{cursor:default;display:inline-block;font-size:13.5px;padding:9px 16px}

/* ---- process step containers: gold-outlined boxes joined by connectors ---- */
/* Gold at ~35% on the light background reads as a soft frame without competing with the
   filled number circles or the white cards inside. Background stays transparent. */
.step-box{border:1px solid rgba(37,211,102,.35);border-radius:20px;padding:26px 28px;background:transparent}
.step-box .stepmark{margin-bottom:16px}
/* Step 1's paste box already has its own card border, so no extra top gap is needed. */
.step-box .herobox{margin-top:0}
/* The bench (step 2) carried its own top margin as a standalone block; the box owns spacing now. */
.bench.step-box{margin-top:0}
/* Step 3 box lives in the centered results column. */
.results-cols .step-box{text-align:left}

/* Faint vertical connector suggesting 1 to 2 to 3 flow. Not animated. */
.step-link{display:flex;flex-direction:column;align-items:center;margin:16px 0}
.step-link i{width:2px;height:20px;background:rgba(37,211,102,.4);display:block;border-radius:2px}
.step-link::after{content:"";width:7px;height:7px;border-right:2px solid rgba(37,211,102,.4);border-bottom:2px solid rgba(37,211,102,.4);transform:rotate(45deg);margin-top:-5px}

/* Forward intake reads as an alternate path off step 1, not a step: no box, tucked close
   under step 1, then clear separation before the connector leads back into step 2. */
.fwd{margin:22px auto 40px}

@media(max-width:600px){
  .step-box{padding:20px 18px;border-radius:16px}
  .step-link{margin:12px 0}
  .step-link i{height:16px}
}

/* ---- the outcome: the closed-deal moment (only place --win green appears) ---- */
.outcome{max-width:760px;margin:90px auto 0;padding:0 24px;text-align:left}
.outcome h2{margin-bottom:12px}
.outcome-lead{color:var(--muted);font-size:16.5px;line-height:1.6;margin:0 auto 30px;max-width:46ch}
.outcome-visual{display:flex;flex-direction:column;align-items:flex-start;gap:14px;max-width:520px;margin:0}
.oc-mail{width:100%;background:var(--card);border:1px solid var(--stroke);border-radius:18px;padding:18px 20px;text-align:left;box-shadow:0 2px 12px rgba(22,25,43,.06)}
.oc-mail-top{display:flex;align-items:center;gap:12px}
.oc-avatar{flex-shrink:0;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:13px;color:var(--ink);background:#EEF0F8}
.oc-mail-meta{display:flex;flex-direction:column;gap:1px;min-width:0}
.oc-from{font-family:var(--display);font-weight:700;font-size:15px;color:var(--ink)}
.oc-subj{font-size:13px;color:var(--muted)}
.oc-preview{margin:12px 0 0;font-size:14.5px;line-height:1.55;color:var(--ink)}
.oc-toast{display:inline-flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--stroke);border-radius:999px;padding:8px 18px 8px 9px;box-shadow:0 4px 14px rgba(22,25,43,.07)}
.oc-check{flex-shrink:0;width:24px;height:24px;border-radius:50%;background:var(--win);display:grid;place-items:center}
.oc-toast-text{font-family:var(--display);font-weight:700;font-size:14.5px;color:var(--accent);letter-spacing:-.01em}
/* tiny uppercase caption, echoes the metric labels below for a cohesive, restrained rhythm */
.outcome .hint.center{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--muted);opacity:.75;margin-top:16px}
.outcome-close{color:var(--muted);font-size:14.5px;line-height:1.6;max-width:48ch;margin:22px auto 0}
@media(max-width:600px){.outcome{margin-top:60px}}

/* ---- hero ---- */
/* Headings stay ink; only the highlighted accent word carries green. The "signed contract"
   underline mark lives in index.html's critical CSS (the hero is index-only). */
.hero{position:relative;z-index:0}