/* Leeway AI Bids — demo console. Brand-faithful to leeway-im.com:
   Space Grotesk (display) + Manrope (body), white canvas, #222831 ink,
   #3b82f6 / #2563eb blue accents, rounded pills, soft shadows. */

:root {
  --canvas: #ffffff;
  --surface: #ffffff;
  --text: #0f172a;
  --ink: #222831;
  --tone: #393e46;
  --muted: #6b7280;
  --line: rgba(57, 62, 70, 0.16);
  --line-soft: rgba(57, 62, 70, 0.10);
  --blue: #3b82f6;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --blue-400: #60a5fa;
  --ok: #10b981;
  --warn: #f59e0b;
  --bad: #f43f5e;
  --violet: #8b5cf6;
  --cyan: #22d3ee;
  --dark: #222831;
  --dark-2: #1b1f27;
  --bg-soft: #f7f8fa;
  --shadow: 0 10px 30px -24px rgba(34, 40, 49, 0.4);
  --shadow-lg: 0 24px 60px -34px rgba(34, 40, 49, 0.45);
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, sans-serif;
  --radius: 16px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background:
    radial-gradient(circle at 82% 4%, rgba(59, 130, 246, 0.10), transparent 30%),
    radial-gradient(circle at 6% 96%, rgba(96, 165, 250, 0.07), transparent 28%),
    var(--bg-soft);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.02em; color: var(--ink); margin: 0; }
a { color: var(--blue-600); text-decoration: none; }
button { font-family: inherit; }

/* ---------------------------------------------------------------- layout */
.app { display: grid; grid-template-columns: 248px 1fr; min-height: 100dvh; }

.sidebar {
  position: sticky; top: 0; height: 100dvh;
  background: linear-gradient(180deg, #20252e 0%, #15181f 100%);
  color: #cdd3dd; padding: 22px 16px; display: flex; flex-direction: column; gap: 6px;
}
.brand { display: flex; align-items: center; gap: 11px; padding: 6px 8px 20px; }
.brand .logo {
  width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto;
  background: linear-gradient(160deg, #4a91ff 0%, #3b82f6 48%, #1d4ed8 100%);
  display: grid; place-items: center; color: #fff; font-family: var(--font-display);
  font-weight: 700; box-shadow: 0 10px 22px -10px rgba(59, 130, 246, 0.7);
}
.brand .name { font-family: var(--font-display); font-weight: 600; color: #fff; font-size: 15px; line-height: 1.1; }
.brand .sub { font-size: 11px; color: #8a93a3; letter-spacing: 0.04em; }

.nav-group { font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em; color: #6c7686; padding: 16px 10px 6px; }
.nav-item {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  background: none; border: 0; color: #cdd3dd; padding: 10px 12px; border-radius: 11px;
  font-size: 14px; font-weight: 500; cursor: pointer; transition: background .18s, color .18s;
}
.nav-item svg { width: 18px; height: 18px; flex: 0 0 auto; opacity: .85; }
.nav-item:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.nav-item.active { background: linear-gradient(160deg, rgba(74,145,255,.22), rgba(29,78,216,.22)); color: #fff; }
.nav-item.active svg { opacity: 1; color: var(--blue-400); }
.side-foot { margin-top: auto; padding: 12px 10px; font-size: 11px; color: #6c7686; }
.live-pill {
  display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600;
  color: #cdd3dd; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  padding: 7px 11px; border-radius: 999px; cursor: pointer; width: 100%; justify-content: center;
}
.live-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgba(16,185,129,.18); }
.live-pill.demo .dot { background: var(--warn); box-shadow: 0 0 0 4px rgba(245,158,11,.18); }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; gap: 16px; padding: 18px 30px;
  background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line-soft); position: sticky; top: 0; z-index: 20;
}
.topbar h1 { font-size: 20px; }
.topbar .crumb { font-size: 12.5px; color: var(--muted); }
.topbar .spacer { flex: 1; }
.content { padding: 26px 30px 60px; max-width: 1320px; width: 100%; }
.view { display: none; animation: fadeUp .5s cubic-bezier(.16,1,.3,1) both; }
.view.active { display: block; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px);} to { opacity:1; transform:none; } }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; gap: 9px; border: 0; cursor: pointer;
  padding: 11px 18px; border-radius: 999px; font-size: 14px; font-weight: 600;
  background: linear-gradient(160deg, #4a91ff 0%, #3b82f6 48%, #1d4ed8 100%); color: #fff;
  box-shadow: 0 14px 30px -16px rgba(59,130,246,.7); transition: transform .25s, box-shadow .25s, opacity .2s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -16px rgba(59,130,246,.8); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn.ghost { background: #fff; color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow); }
.btn.ghost:hover { border-color: rgba(59,130,246,.45); }
.btn.dark { background: linear-gradient(180deg, #3c4350 0%, #2f3640 100%); }
.btn.sm { padding: 8px 13px; font-size: 12.5px; }
.btn .arrow { width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.22); display: grid; place-items: center; }

/* ---------------------------------------------------------------- cards */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 20px;
}
.card.pad-lg { padding: 26px; }
.card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.card-head h3 { font-size: 15.5px; }
.card-head .hint { font-size: 12px; color: var(--muted); }
.card-head .spacer { flex: 1; }
.grid { display: grid; gap: 18px; }
.g-4 { grid-template-columns: repeat(4, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-2-1 { grid-template-columns: 1.6fr 1fr; }
.g-1-2 { grid-template-columns: 1fr 1.7fr; }

.kicker {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display);
  font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: var(--tone);
}
.kicker .num { color: var(--blue); }

/* KPI */
.kpi { display: flex; flex-direction: column; gap: 8px; }
.kpi .label { font-size: 12.5px; color: var(--muted); font-weight: 600; display: flex; align-items: center; gap: 8px; }
.kpi .val { font-family: var(--font-display); font-weight: 700; font-size: 34px; line-height: 1; color: var(--ink); }
.kpi .val small { font-size: 16px; color: var(--tone); font-weight: 600; margin-left: 3px; }
.kpi .delta { font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.kpi .delta.up { color: var(--ok); } .kpi .delta.down { color: var(--bad); }
.kpi .spark { height: 36px; margin-top: 2px; }
.kpi .ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(59,130,246,.10); color: var(--blue-600); }

/* pills / badges */
.badge {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600;
  padding: 4px 10px; border-radius: 999px; background: rgba(59,130,246,.10); color: var(--blue-700);
}
.badge.ok { background: rgba(16,185,129,.12); color: #047857; }
.badge.warn { background: rgba(245,158,11,.14); color: #b45309; }
.badge.bad { background: rgba(244,63,94,.12); color: #be123c; }
.badge.muted { background: rgba(57,62,70,.08); color: var(--tone); }
.dot-stage { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* periodic attention nudge for the top "New tender" button (stops once clicked) */
@keyframes lw-nudge { 0%,100% { transform: translateY(0); } 25% { transform: translateY(-4px); } 55% { transform: translateY(-2px); } }
.nudge { animation: lw-nudge .72s cubic-bezier(.34,1.56,.64,1); }

/* ---------------------------------------------------------------- tables (brand) */
.tbl-wrap { overflow-x: auto; border-radius: 12px; box-shadow: 0 0 0 1px var(--line); }
table.lw { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.lw thead { background: var(--dark); color: #fff; }
table.lw thead th { padding: 11px 14px; text-align: left; font-weight: 600; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
table.lw tbody tr { border-bottom: 1px solid var(--line-soft); transition: background .12s; }
table.lw tbody tr:last-child { border-bottom: 0; }
table.lw tbody tr:nth-child(even) { background: rgba(57,62,70,.025); }
table.lw tbody tr:hover { background: rgba(59,130,246,.05); }
table.lw td { padding: 10px 14px; vertical-align: middle; color: var(--tone); }
table.lw td.num, table.lw th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.lw td strong { color: var(--ink); }

/* ---------------------------------------------------------------- charts */
.chart { width: 100%; height: 280px; }
.chart.sm { height: 200px; }
.chart.lg { height: 340px; }

/* fit ring */
.fitring { position: relative; width: 168px; height: 168px; }
.fitring svg { transform: rotate(-90deg); }
.fitring .track { fill: none; stroke: rgba(57,62,70,.10); }
.fitring .prog { fill: none; stroke: url(#fitgrad); stroke-linecap: round; transition: stroke-dashoffset 1.2s cubic-bezier(.16,1,.3,1); }
.fitring .ctr { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.fitring .ctr .n { font-family: var(--font-display); font-weight: 700; font-size: 44px; color: var(--ink); line-height: 1; }
.fitring .ctr .l { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }

/* gauge bar */
.gauge { margin-top: 6px; }
.gauge .row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; }
.gauge .row .k { font-size: 12.5px; color: var(--tone); font-weight: 600; }
.gauge .row .v { font-family: var(--font-display); font-weight: 700; color: var(--ink); }
.gauge .bar { height: 9px; border-radius: 999px; background: rgba(57,62,70,.08); overflow: hidden; }
.gauge .bar > i { display: block; height: 100%; border-radius: 999px; width: 0; transition: width 1s cubic-bezier(.16,1,.3,1); }

/* ---------------------------------------------------------------- stepper / wizard */
.stepper { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.step-chip {
  display: inline-flex; align-items: center; gap: 9px; padding: 9px 14px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--tone);
  box-shadow: var(--shadow); transition: .2s;
}
.step-chip .i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; background: rgba(57,62,70,.08); color: var(--tone); }
.step-chip.done { color: var(--ink); border-color: rgba(16,185,129,.4); }
.step-chip.done .i { background: var(--ok); color: #fff; }
.step-chip.active { color: #fff; background: linear-gradient(160deg,#4a91ff,#1d4ed8); border-color: transparent; box-shadow: 0 16px 30px -16px rgba(59,130,246,.6); }
.step-chip.active .i { background: rgba(255,255,255,.25); color: #fff; }

.wizard-panel { animation: fadeUp .45s cubic-bezier(.16,1,.3,1) both; }
.field-label { font-size: 12.5px; font-weight: 600; color: var(--tone); margin-bottom: 7px; display: block; }
textarea.input, input.input, select.input {
  width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
  font-family: inherit; font-size: 14px; color: var(--text); background: #fff; outline: none; transition: border-color .2s, box-shadow .2s;
}
textarea.input:focus, input.input:focus, select.input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(59,130,246,.15); }
textarea.input { resize: vertical; line-height: 1.6; }

/* AI thinking shimmer */
.thinking { display: inline-flex; align-items: center; gap: 10px; color: var(--tone); font-size: 13.5px; font-weight: 500; }
.thinking .orb { width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle,#fff,#60a5fa 42%,#3b82f6); box-shadow: 0 0 14px 2px rgba(59,130,246,.6); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100%{ transform: scale(.85); opacity:.8; } 50%{ transform: scale(1.12); opacity:1; } }
.skeleton { background: linear-gradient(90deg, rgba(57,62,70,.06) 25%, rgba(57,62,70,.12) 37%, rgba(57,62,70,.06) 63%); background-size: 400% 100%; animation: shimmer 1.3s linear infinite; border-radius: 8px; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.sk-line { height: 13px; margin: 9px 0; }

/* questions */
.q-list { display: grid; gap: 14px; }
.q-card { border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; background: #fff; box-shadow: var(--shadow); animation: fadeUp .5s both; }
.q-card.answered { border-color: rgba(16,185,129,.4); background: linear-gradient(180deg,#fff,rgba(16,185,129,.03)); }
.q-top { display: flex; align-items: flex-start; gap: 10px; }
.q-num { font-family: var(--font-display); font-weight: 700; color: var(--blue); font-size: 13px; margin-top: 2px; }
.q-q { font-weight: 600; color: var(--ink); font-size: 14.5px; line-height: 1.45; }
.q-why { font-size: 12.5px; color: var(--muted); margin-top: 5px; }
.q-input { margin-top: 12px; }
.q-bool { display: flex; gap: 8px; }
.bool-btn { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-weight: 600; font-size: 13px; cursor: pointer; color: var(--tone); }
.bool-btn.sel { background: linear-gradient(160deg,#4a91ff,#1d4ed8); color: #fff; border-color: transparent; }

/* proposal */
.prop-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.prop-section { border: 1px solid var(--line); border-radius: 14px; margin-bottom: 14px; background: #fff; box-shadow: var(--shadow); overflow: hidden; animation: fadeUp .5s both; }
.prop-section .ph { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line-soft); }
.prop-section .ph .o { font-family: var(--font-display); font-weight: 700; color: var(--blue); }
.prop-section .ph h4 { font-size: 15px; flex: 1; }
.prop-body { padding: 16px 20px; color: var(--tone); line-height: 1.7; font-size: 14px; }
.prop-body p { margin: 0 0 12px; }
.prop-body h5 { color: var(--ink); font-size: 13.5px; margin: 14px 0 6px; font-family: var(--font-display); }
.prop-body ul, .prop-body ol { margin: 8px 0 12px; padding-left: 20px; }
.prop-body li { margin: 4px 0; }
.prop-body li::marker { color: var(--blue); }
.rhi { display: inline-block; background: rgba(245,158,11,.14); color: #b45309; padding: 1px 8px; border-radius: 6px; font-size: 12.5px; font-weight: 600; border: 1px dashed rgba(245,158,11,.5); }

/* assistant chat */
.chat { display: flex; flex-direction: column; height: 540px; }
.chat-log { flex: 1; overflow-y: auto; padding: 6px 4px 6px 0; display: flex; flex-direction: column; gap: 14px; }
.msg { max-width: 86%; }
.msg.user { align-self: flex-end; }
.msg .bubble { padding: 12px 16px; border-radius: 16px; font-size: 14px; line-height: 1.6; }
.msg.user .bubble { background: linear-gradient(160deg,#4a91ff,#1d4ed8); color: #fff; border-bottom-right-radius: 5px; }
.msg.ai .bubble { background: #fff; border: 1px solid var(--line); color: var(--tone); box-shadow: var(--shadow); border-bottom-left-radius: 5px; }
.msg.ai .bubble strong { color: var(--ink); }
.msg .who { font-size: 11px; color: var(--muted); margin: 0 4px 5px; font-weight: 600; }
.chat-cites { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cite { font-size: 11px; color: var(--blue-700); background: rgba(59,130,246,.08); border: 1px solid rgba(59,130,246,.2); padding: 3px 9px; border-radius: 999px; }
.suggest { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.suggest button { font-size: 12.5px; font-weight: 600; color: var(--blue-700); background: #fff; border: 1px solid var(--line); padding: 8px 13px; border-radius: 999px; cursor: pointer; box-shadow: var(--shadow); transition: .2s; }
.suggest button:hover { border-color: rgba(59,130,246,.45); transform: translateY(-1px); }
.chat-input { display: flex; gap: 10px; margin-top: 14px; }
.chat-input input { flex: 1; }

/* pivot */
.pivot-controls { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; align-items: center; }
.pivot-controls .seg { display: inline-flex; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 3px; box-shadow: var(--shadow); }
.pivot-controls .seg button { border: 0; background: none; padding: 7px 14px; border-radius: 999px; font-weight: 600; font-size: 12.5px; color: var(--tone); cursor: pointer; }
.pivot-controls .seg button.on { background: linear-gradient(160deg,#4a91ff,#1d4ed8); color: #fff; }
table.pivot td.cell { position: relative; }
table.pivot td .heat { position: absolute; inset: 4px; border-radius: 6px; z-index: 0; }
table.pivot td .v { position: relative; z-index: 1; }
table.pivot tfoot { font-weight: 700; }
table.pivot tfoot td { background: rgba(57,62,70,.04); color: var(--ink); }

/* pricing */
.price-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.price-card { background: linear-gradient(165deg,#222831 0%, #15181f 100%); color: #fff; border-radius: 22px; padding: 32px; position: relative; overflow: hidden; box-shadow: var(--shadow-lg); }
.price-card .glow { position: absolute; width: 320px; height: 320px; right: -120px; top: -120px; border-radius: 50%; background: radial-gradient(circle, rgba(59,130,246,.4), transparent 60%); }
.price-card .amt { font-family: var(--font-display); font-weight: 700; font-size: 56px; line-height: 1; }
.price-card .amt small { font-size: 18px; color: #aab3c0; font-weight: 600; }
.price-feats { list-style: none; padding: 0; margin: 22px 0; display: grid; gap: 11px; }
.price-feats li { display: flex; gap: 10px; font-size: 14px; color: #cdd3dd; }
.price-feats li svg { color: var(--blue-400); flex: 0 0 auto; margin-top: 2px; }
.toggle { display: inline-flex; background: rgba(255,255,255,.08); border-radius: 999px; padding: 4px; margin: 16px 0; }
.toggle button { border: 0; background: none; color: #aab3c0; font-weight: 600; padding: 8px 16px; border-radius: 999px; cursor: pointer; font-size: 13px; }
.toggle button.on { background: var(--blue); color: #fff; }
.calc-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.calc-row:last-child { border-bottom: 0; }
.calc-row .lab { font-size: 13.5px; color: var(--tone); font-weight: 500; }
.calc-row input[type=range] { width: 160px; accent-color: var(--blue); }
.calc-out { margin-top: 16px; padding: 18px; border-radius: 14px; background: rgba(59,130,246,.06); border: 1px solid rgba(59,130,246,.2); }
.calc-out .big { font-family: var(--font-display); font-weight: 700; font-size: 30px; color: var(--ink); }

/* misc */
.muted { color: var(--muted); }
.row { display: flex; align-items: center; gap: 10px; }
.wrap { flex-wrap: wrap; }
.sp { flex: 1; }
.mt { margin-top: 18px; } .mt-s { margin-top: 10px; } .mb { margin-bottom: 16px; }
.center { text-align: center; }
.hidden { display: none !important; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--tone); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }
.tag { font-size: 11px; font-weight: 600; color: var(--tone); background: rgba(57,62,70,.06); padding: 3px 9px; border-radius: 7px; }
.cta-banner {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: linear-gradient(135deg,#1d4ed8,#3b82f6 60%,#22d3ee); color: #fff;
  border-radius: 20px; padding: 24px 28px; box-shadow: var(--shadow-lg); margin-top: 24px;
}
.cta-banner h3 { color: #fff; font-size: 22px; }
.cta-banner p { margin: 4px 0 0; color: rgba(255,255,255,.85); font-size: 14px; }

/* responsive */
@media (max-width: 1100px) {
  .g-4 { grid-template-columns: repeat(2,1fr); }
  .g-3 { grid-template-columns: 1fr; }
  .g-2, .g-2-1, .g-1-2, .price-wrap { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: -260px; width: 248px; z-index: 60; transition: left .25s; box-shadow: var(--shadow-lg); }
  .sidebar.open { left: 0; }
  .menu-btn { display: grid !important; }
  .g-4 { grid-template-columns: 1fr 1fr; }
}
.menu-btn { display: none; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: #fff; place-items: center; cursor: pointer; }
.scrim { display: none; position: fixed; inset: 0; background: rgba(15,23,42,.4); z-index: 50; }
.scrim.show { display: block; }

/* ---------------------------------------------------------------- fit ring (centered) */
.fitring .ctr { display: block; }
.fitring .ctr .n { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -54%); }
.fitring .ctr .l { position: absolute; top: 50%; left: 50%; transform: translate(-50%, 30px); margin: 0; }

/* ---------------------------------------------------------------- brand (Leeway × Company) */
.brand .xmark { font-family: var(--font-display); font-weight: 600; color: #8a93a3; font-size: 16px; margin: 0 2px; }
.brand .cust { width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto; object-fit: contain; background: #fff; padding: 3px; box-shadow: 0 8px 20px -12px rgba(0,0,0,.5); }
.brand .cust-badge { width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto; display: grid; place-items: center; color: #fff; font-family: var(--font-display); font-weight: 700; background: linear-gradient(160deg,#10b981,#0ea5a4); }

/* ---------------------------------------------------------------- CRM strip */
.crm-strip { display: flex; flex-wrap: wrap; gap: 10px; }
.crm-chip { display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px 9px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: var(--shadow); font-weight: 600; font-size: 13px; color: var(--ink); }
.crm-chip img { width: 18px; height: 18px; object-fit: contain; }
.crm-chip .seed { width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 700; }

/* ---------------------------------------------------------------- pricing cost grid */
.price-setup { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 12px 16px; margin: 16px 0; font-size: 13.5px; color: #cdd3dd; }
.price-setup b { color: #fff; }
.cost-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0 4px; }
.cost-cell { border: 1px solid var(--line); border-radius: 13px; padding: 14px; background: #fff; }
.cost-cell.hl { background: linear-gradient(160deg, rgba(59,130,246,.08), rgba(34,211,238,.06)); border-color: rgba(59,130,246,.3); }
.cost-cell .lab { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.cost-cell .amt { font-family: var(--font-display); font-weight: 700; font-size: 24px; color: var(--ink); margin: 4px 0 2px; }
.cost-cell .amt span { font-size: 14px; color: var(--tone); }
.cost-cell .sub { font-size: 11px; color: var(--muted); }
@media (max-width: 1100px) { .cost-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- onboarding */
.onboard {
  position: fixed; inset: 0; z-index: 100; display: none;
  background:
    radial-gradient(circle at 82% 8%, rgba(59,130,246,.12), transparent 34%),
    radial-gradient(circle at 10% 92%, rgba(96,165,250,.08), transparent 30%),
    #f7f8fa;
  overflow-y: auto;
}
.onboard.show { display: grid; place-items: center; padding: 30px 20px; }
.ob-card { width: 100%; max-width: 560px; background: #fff; border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow-lg); padding: 34px 36px 30px; animation: fadeUp .5s cubic-bezier(.16,1,.3,1) both; }
.ob-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 22px; }
.ob-brand .logo { width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(160deg,#4a91ff,#1d4ed8); display: grid; place-items: center; color: #fff; font-family: var(--font-display); font-weight: 700; box-shadow: 0 10px 22px -10px rgba(59,130,246,.7); }
.ob-brand .t { font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.ob-brand .s { font-size: 11.5px; color: var(--muted); }
.ob-dots { display: flex; gap: 7px; margin-left: auto; }
.ob-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(57,62,70,.16); transition: .25s; }
.ob-dots i.on { background: var(--blue); width: 22px; border-radius: 999px; }
.ob-kicker { font-family: var(--font-display); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .16em; color: var(--blue); }
.ob-h { font-family: var(--font-display); font-weight: 600; font-size: 27px; letter-spacing: -.02em; color: var(--ink); margin: 8px 0 6px; line-height: 1.1; }
.ob-p { color: var(--tone); font-size: 14.5px; line-height: 1.55; margin: 0 0 20px; }
.ob-field { margin-bottom: 16px; }
.ob-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ob-foot { display: flex; align-items: center; gap: 12px; margin-top: 24px; }
.ob-skip { background: none; border: 0; color: var(--muted); font-weight: 600; font-size: 13px; cursor: pointer; font-family: inherit; }
.ob-skip:hover { color: var(--tone); }
.ob-err { color: var(--bad); font-size: 12.5px; margin-top: 6px; min-height: 16px; }
.ob-progress { display: grid; gap: 12px; margin: 22px 0 6px; }
.ob-stage { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--muted); transition: .3s; }
.ob-stage .ic { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(57,62,70,.08); flex: 0 0 auto; }
.ob-stage.run { color: var(--ink); font-weight: 600; }
.ob-stage.run .ic { background: rgba(59,130,246,.14); color: var(--blue); }
.ob-stage.done { color: var(--ink); }
.ob-stage.done .ic { background: var(--ok); color: #fff; }
.ob-trust { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--muted); margin-top: 16px; }
@media (max-width: 560px) { .ob-grid2 { grid-template-columns: 1fr; } .ob-card { padding: 26px 22px; } }

/* ---------------------------------------------------------------- Leeway logo mark */
.brand .lw-mark { width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto; overflow: hidden; display: block; box-shadow: 0 8px 20px -12px rgba(0,0,0,.5); }
.brand .lw-mark svg { width: 100%; height: 100%; display: block; }

/* ---------------------------------------------------------------- opportunity scroll + hint */
.opp-scroll { max-height: 360px; overflow-y: auto; border-radius: 12px; }
.opp-scroll::-webkit-scrollbar { width: 8px; }
.opp-scroll::-webkit-scrollbar-thumb { background: rgba(57,62,70,.18); border-radius: 999px; }
.scroll-hint {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 18px 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .02em;
  color: var(--blue-700); background: linear-gradient(to top, #fff 42%, rgba(255,255,255,0));
  pointer-events: none; transition: opacity .3s; border-radius: 0 0 var(--radius) var(--radius);
}
.scroll-hint svg { animation: hintBob 1.6s ease-in-out infinite; }
@keyframes hintBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
.scroll-hint.hide { opacity: 0; }

/* ---------------------------------------------------------------- pivot controls (single border) */
.pivot-ctl { display: inline-flex; align-items: center; gap: 9px; }
.pivot-sel {
  appearance: auto; border: 1px solid var(--line); border-radius: 999px;
  padding: 9px 16px; font-family: inherit; font-weight: 600; font-size: 13px;
  color: var(--ink); background: #fff; box-shadow: var(--shadow); cursor: pointer; outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.pivot-sel:hover { border-color: rgba(59,130,246,.45); }
.pivot-sel:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(59,130,246,.15); }

/* ---------------------------------------------------------------- calculator (Claude design) */
.calc { border-radius: 24px; padding: clamp(22px, 3vw, 30px); background: #f7f8fa; border: 1px solid var(--line); box-shadow: var(--shadow); display: flex; flex-direction: column; }
.calc-head { display: flex; flex-direction: column; gap: 4px; }
.calc-title { font-family: var(--font-display); font-size: 19px; font-weight: 600; color: var(--ink); }
.calc-sub { font-size: 13.5px; color: var(--tone); }
.calc-fields { margin-top: 22px; display: grid; gap: 20px; }
.calc-field label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13.5px; font-weight: 600; color: var(--ink); margin-bottom: 10px; }
.calc-field output { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--blue-700); }
.calc-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: rgba(57,62,70,.16); outline: none; }
.calc-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(180deg,#4a91ff,#2563eb); border: 3px solid #fff; box-shadow: 0 3px 10px -2px rgba(37,99,235,.5); cursor: pointer; }
.calc-range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(180deg,#4a91ff,#2563eb); border: 3px solid #fff; box-shadow: 0 3px 10px -2px rgba(37,99,235,.5); cursor: pointer; }
.calc-range:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.calc-summary { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 11px; }
.cs-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; font-size: 14.5px; color: var(--tone); }
.cs-row b { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--ink); }
.cs-row .incl { color: #16a34a; font-size: 13.5px; }
.cs-save { margin-top: 10px; padding: 24px; border-radius: 18px; background: linear-gradient(165deg,#ecfdf3 0%, #d4f4e0 100%); border: 1px solid rgba(22,163,74,.3); box-shadow: 0 20px 44px -28px rgba(22,163,74,.55); }
.cs-save-lab { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #15803d; }
.cs-save-num { display: block; margin-top: 8px; font-family: var(--font-display); font-size: clamp(40px,5.4vw,54px); font-weight: 700; line-height: 1; letter-spacing: -.03em; color: #14532d; }
.cs-save-num small { font-size: 20px; font-weight: 600; color: #16a34a; }
.cs-save-foot { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 12px; align-items: baseline; }
.cs-save-yr { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: #15803d; }
.cs-save-hrs { font-size: 13.5px; color: var(--tone); }
.calc-cta { margin-top: 18px; width: 100%; justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}