:root {
  --bg: #fbfaf8;
  --surface: #ffffff;
  --surface-soft: #f8f8f6;
  --surface-warm: #fffdf8;
  --ink: #0b0d0f;
  --muted: #69707b;
  --muted-2: #8b919a;
  --line: #e8e9e5;
  --line-strong: #dfe2dc;
  --green: #9ee600;
  --green-dark: #65b800;
  --green-soft: #ecffd0;
  --blue: #1877ff;
  --blue-dark: #065acb;
  --cyan: #25c8db;
  --black-panel: #101214;
  --shadow-sm: 0 4px 14px rgba(21, 25, 30, .055);
  --shadow-md: 0 16px 45px rgba(21, 25, 30, .09);
  --shadow-green: 0 10px 25px rgba(130, 215, 0, .22);
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --max: 1580px;
  --header-h: 76px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background:
    radial-gradient(circle at 62% 2%, rgba(157, 230, 0, .05), transparent 27rem),
    radial-gradient(circle at 93% 28%, rgba(30, 119, 255, .035), transparent 28rem),
    linear-gradient(180deg, #fff 0%, #fdfcf9 100%);
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { cursor: pointer; }

/* ── Layout ── */
.container { width: min(var(--max), calc(100% - 64px)); margin-inline: auto; }
.site-header {
  height: var(--header-h);
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255,255,255,.91);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  height: 100%;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto minmax(260px, 1fr);
  align-items: center;
  gap: 28px;
}
.brand { display: inline-flex; align-items: center; gap: 11px; width: max-content; }
.brand-emblem {
  width: 50px; height: 50px; border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(20,30,15,.12), 0 4px 13px rgba(27, 92, 0, .13);
}
.brand-name { font-weight: 760; font-size: 27px; letter-spacing: -.8px; }
.brand-name .swap-word { color: #72c800; }
/* Inside comparison tiles the provider name is single-color like every
   other provider — brand two-tone stays in the site header only. */
.quote-card .brand-name .swap-word { color: inherit; }
/* The ⌄ chevron glyph baseline-sits low — lift it to center on the ticker */
.token-select b { display:inline-block; line-height:1; transform: translateY(-3px); }
/* Chain logos in the network picker */
.net-ico { width:18px; height:18px; border-radius:50%; object-fit:cover; flex:0 0 auto; }
/* Gap flexes with viewport: 44px on wide screens, tightening before the
   nav can collide with the actions column (network pill + wallet). */
.nav { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 2.2vw, 44px); font-weight: 600; font-size: 15px; white-space: nowrap; }
.nav a { position: relative; padding: 27px 0 24px; }
.nav a:hover { color: var(--green-dark); }
.nav a.active::after {
  content: ""; position: absolute; height: 2px; left: 0; right: 0; bottom: 0;
  background: var(--green-dark); border-radius: 99px;
}
.header-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
/* Pills and the network pill keep their shape - no shrink, no wrapping
   ("Connect Wallet" must never break onto two lines). */
.header-actions > * { flex: 0 0 auto; }
.header-actions .primary-pill, .network-picker button { white-space: nowrap; }

/* ── Buttons ── */
.primary-pill, .secondary-pill, .outline-pill {
  border: 0; border-radius: 999px; min-height: 46px; padding: 0 18px 0 24px;
  display: inline-flex; align-items: center; justify-content: center; gap: 16px;
  font-weight: 760; transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.primary-pill {
  color: #0b0d0f;
  background: linear-gradient(110deg, #bfff00 0%, #8be900 68%, #71d800 100%);
  box-shadow: var(--shadow-green);
}
.primary-pill:hover { transform: translateY(-2px); box-shadow: 0 15px 28px rgba(130,215,0,.28); }
.primary-pill.blue { color: #fff; background: linear-gradient(110deg, #27c6f1, #1567ff); box-shadow: 0 12px 25px rgba(28, 117, 255, .18); }
.secondary-pill, .outline-pill { background: #fff; border: 1px solid var(--line-strong); color: #16191d; box-shadow: var(--shadow-sm); }
.secondary-pill:hover, .outline-pill:hover { transform: translateY(-2px); border-color: #b4bac3; }
.round-arrow {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  flex: 0 0 auto; /* flex parents must never squash the circle */
  background: #111; color: var(--green); font-size: 22px; line-height: 1;
}
.blue .round-arrow { background: rgba(0,0,0,.18); color: #fff; }
.header-wallet { min-width: 188px; }
.mobile-menu { display:none; width:42px; height:42px; border-radius: 12px; border:1px solid var(--line); background:#fff; }

/* ── Network Picker ── */
.network-picker { position:relative; }
.network-btn {
  display:inline-flex; align-items:center; gap:8px;
  height:42px; padding:0 14px; border:1px solid var(--line-strong); border-radius:12px;
  background:linear-gradient(135deg, #0d0f11 0%, #171b1f 100%);
  color:#fff; font-size:13px; font-weight:700; cursor:pointer;
  transition: box-shadow .18s ease, border-color .18s ease;
}
.network-btn:hover { border-color:var(--green-dark); box-shadow: 0 0 12px rgba(130,215,0,.15); }
.network-dot {
  width:10px; height:10px; border-radius:50%;
  box-shadow: 0 0 6px currentColor;
}
.dot-eth, [data-chain="ethereum"] .network-dot { background:#627eea; color:#627eea; }
.dot-pulse, [data-chain="pulsechain"] .network-dot { background:#c839e8; color:#c839e8; }
.dot-arb, [data-chain="arbitrum"] .network-dot { background:#28a0f0; color:#28a0f0; }
.dot-base, [data-chain="base"] .network-dot { background:#0052ff; color:#0052ff; }
.network-chevron { transition:transform .2s ease; }
.network-picker.open .network-chevron { transform:rotate(180deg); }
.network-dropdown {
  display:none; position:absolute; top:calc(100% + 6px); right:0; min-width:180px;
  background:linear-gradient(135deg, #111315 0%, #0c0e10 100%);
  border:1px solid #2a2e33; border-radius:14px; padding:6px;
  box-shadow: 0 12px 36px rgba(0,0,0,.4), 0 0 0 1px rgba(130,215,0,.06);
  z-index:50;
}
.network-picker.open .network-dropdown { display:block; }
.network-option {
  display:flex; align-items:center; gap:10px; width:100%;
  padding:10px 14px; border:0; border-radius:10px;
  background:transparent; color:#c8ccd2; font-size:14px; font-weight:650;
  cursor:pointer; transition: background .15s ease, color .15s ease;
}
.network-option:hover { background:rgba(255,255,255,.06); color:#fff; }
.network-option.active { background:rgba(130,215,0,.12); color:var(--green); }
.network-option .dot-eth, .network-option .dot-pulse,
.network-option .dot-arb, .network-option .dot-base {
  width:10px; height:10px; border-radius:50%; flex-shrink:0;
}
.dot-eth { background:#627eea; }
.dot-pulse { background:#c839e8; }
.dot-arb { background:#28a0f0; }
.dot-base { background:#0052ff; }

/* ── Page ── */
.page { padding: 14px 0 36px; }

/* ── Home Hero ── */
.home-hero {
  display: grid;
  grid-template-columns: minmax(470px, .82fr) minmax(760px, 1.58fr);
  gap: 52px;
  align-items: start;
}
.hero-copy { padding: 0 0 0 2px; display:flex; flex-direction:column; gap:0; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid #d9e6c6; background: #fff;
  padding: 7px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 650;
  box-shadow: var(--shadow-sm);
}
.eyebrow .accent { color: var(--green-dark); font-weight: 800; }
.bolt-chip { color: #6ca900; display:inline-flex; align-items:center; }
.bolt-chip svg { display:inline-block; vertical-align:middle; }
.hero-title {
  margin: 14px 0 42px;
  font-size: clamp(59px, 5.25vw, 89px);
  line-height: .99; letter-spacing: -4px; font-weight: 790;
}
.hero-title .best {
  background: linear-gradient(180deg, #c3ff17 0%, #8ee100 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-copy p {
  max-width: 600px; margin: 0; font-size: 17px; line-height: 1.55;
}
.hero-copy p + p { margin-top: 20px; }
.hero-copy p.hero-wins { margin-top: 28px; margin-bottom: 28px; }
.smart { color: var(--green-dark); font-weight: 760; }
.hero-highlight { font-size: 20px; font-weight: 800; letter-spacing: -.3px; }
.hero-copy p strong { font-weight: 780; }
.hero-actions { display:flex; gap: 18px; margin: 22px 0 18px; }
.micro-trust { display:flex; flex-wrap:wrap; gap: 25px; color:#5f6671; font-size:13px; }
.micro-trust span { display:flex; gap:8px; align-items:center; }
.micro-icon { color:#1b1d20; font-weight:900; display:inline-flex; align-items:center; }
.micro-icon svg { display:inline-block; vertical-align:middle; }

/* ── Comparison Panel ── */
.comparison-shell {
  position: relative;
  padding: 6px 20px 0;   /* was 18px top — closed the gap above the head */
  border-radius: var(--radius-lg);
  min-width: 0;
}
.comparison-head {
  min-height: 36px;   /* was 52px — pulls "We compare against…" up */
  display:flex; align-items:center; justify-content:center; gap:14px;
  position:relative; z-index:6; flex-wrap:wrap;
}
/* Home hero: head top-aligns with the left column's eyebrow chip, and the
   grid drops far enough that the winner crown cannot reach the head text
   (measured: crown box y106-238 overlapped head text y117-151). */
.home-hero .comparison-shell { padding-top:0; }
.home-hero .comparison-head { min-height:34px; }
/* Tight gap under the heading; the crown protrudes less on home so the
   tiles can sit higher without touching the heading. */
.home-hero .quote-grid { margin-top:36px; }
/* -26px, not -36: the 12deg rotation expands the crown's painted box ~8px
   above its CSS top (measured), which is what touched the heading. */
.home-hero .crown { top:-26px; }
.win-badge {
  background:#0f1011; color:var(--green); padding:9px 25px; border-radius: 999px;
  font-size:12px; letter-spacing:1.4px; font-weight:850; text-transform:uppercase;
  flex:0 0 auto;
}
.win-badge.benchmark-wins {
  background: var(--blue); color: #fff;
}
.comparison-label {
  font-size:12px; font-weight:850; letter-spacing:2px; text-transform:uppercase; color:#151719;
}
.comparison-label::before, .comparison-label::after {
  display:none;
}
.quote-grid {
  /* Column template is set inline by rebuildQuoteGrid() from the real
     provider count; this is only the no-JS fallback. */
  display:grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px;
  border-radius: 23px 23px 0 0;
  background: transparent;
  overflow: visible;
}
.quote-card {
  min-height: 420px;
  padding: 36px 31px;
  position:relative;
  background:#fff;
  border:1px solid #ecece8;
  border-radius: 16px;
  margin: 0;
  box-shadow: var(--shadow-sm);
  min-width: 0;
  text-align:center;
  /* Column layout so the Select / Best Rate checkmark can pin to the bottom
     and line up across every tile, regardless of win-vs-lose gif height. */
  display:flex; flex-direction:column;
}
.quote-card .tile-select { margin-top:auto; }
.quote-card:last-child { border-radius:16px; }
/* The BBS tile is visually distinct but NOT pre-highlighted: the green
   winner glow appears only on the tile that actually wins the comparison. */
.quote-card.bbs {
  border: 2px solid #d7e3c2;
  border-radius: 20px;
  z-index: 2;
}
.quote-card.winner {
  border: 2.5px solid #96d900;
  border-radius: 20px;
  background:
    radial-gradient(circle at 0% 10%, rgba(155,231,0,.14), transparent 38%),
    radial-gradient(circle at 100% 20%, rgba(155,231,0,.18), transparent 32%),
    radial-gradient(circle at 100% 80%, rgba(155,231,0,.10), transparent 30%),
    #fff;
  z-index: 3;
  box-shadow:
    0 0 0 4px rgba(150,217,0,.10),
    0 0 24px rgba(130,215,0,.18),
    0 0 48px rgba(130,215,0,.08),
    var(--shadow-sm);
}
.quote-card.bbs.winner {
  box-shadow:
    0 0 0 4px rgba(150,217,0,.14),
    0 0 28px rgba(130,215,0,.22),
    0 0 56px rgba(130,215,0,.10),
    16px 0 40px rgba(130,215,0,.18),
    var(--shadow-md);
}
.quote-card.benchmark-winner {
  border: 2px solid var(--blue);
  border-radius: 20px;
  background:
    radial-gradient(circle at 0 10%, rgba(24,119,255,.08), transparent 38%),
    #fff;
  z-index: 2;
  box-shadow: 0 0 0 4px rgba(24,119,255,.08), 0 0 24px rgba(24,119,255,.12);
}
.crown {
  /* Big enough to read as a crown; the panel heading sits above it via the
     comparison-head z-index so the label stays legible. */
  position:absolute; width: 112px; height:auto; right:-22px; top:-46px;
  transform: rotate(12deg);
  filter: drop-shadow(0 6px 10px rgba(100,180,0,.3));
  z-index: 4;
}
/* Tile headers are a FIXED-height column (icon above name/tagline) so the
   "You Receive" row lands at the same offset in every tile, in every state —
   measured label drift was 17px when heights followed content. */
.quote-card .provider {
  display:flex; flex-direction:column; align-items:center; gap:8px;
  height:112px; font-weight:760; min-width:0; overflow-wrap:break-word;
}
.quote-card .provider-name { align-items:center; }
.quote-card .best-mark { justify-content:center; }
.provider { display:flex; align-items:center; gap:11px; font-weight:760; min-width:0; }
.provider img { width:44px; height:44px; object-fit:contain; border-radius:50%; flex:0 0 auto; }
.bbs .provider img { box-shadow: 0 0 18px rgba(114,200,0,.3); }
.provider.compact img { width:34px; height:34px; border-radius:0; }
.provider-name { display:flex; flex-direction:column; min-width:0; }
.quote-card .provider-name .brand-name { font-size:16px; white-space:nowrap; }
.provider-name .brand-name { font-size:18px; white-space:nowrap; }
.provider-title { font-size:16px; font-weight:800; white-space:nowrap; }
.provider-name small { color:var(--green-dark); font-size:12px; margin-top:4px; font-weight:760; }
/* Description block is height-clamped for the same reason. */
.pod-desc {
  margin-top:10px; height:84px; font-size:13px; line-height:1.55; color:#63708a; font-weight:600;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; overflow:hidden;
}
.quote-label { margin-top:24px; font-size:14px; color:#30343a; }
.quote-output {
  margin-top:6px; font-size:27px; line-height:1.12; font-weight:780; letter-spacing:-1.1px;
  /* Amounts must wrap, never clip ("0.5376128 WE") */
  white-space:normal; overflow-wrap:anywhere;
}
/* Green is earned: only the winning tile's amount gets the brand color. */
.quote-card.winner .quote-output { color:#75c700; }
/* Verification badge — an inline shield + label INSIDE the tile, above
   "You Receive". In-flow, so no absolute positioning and no crown clearance
   is needed at all. The winner tile carries 124px of slack (measured in the
   winner state: 465px card, 341px of content), and this costs ~22px of it.
   No fixed height and no nowrap — a clipped proof claim is a false proof
   claim, so long text wraps and the rows below simply move down. */
.pod-badge {
  display:flex; align-items:center; justify-content:center; gap:6px;
  margin:12px auto 0; max-width:100%;
  font-size:12px; font-weight:640; line-height:1.35;
  color:#5b6472;
  white-space:normal; overflow-wrap:anywhere; text-align:left;
  /* The slot reserves TWO lines on every tile, always. The badge wraps, so its
     height tracks its line count, and the row beneath it moved whenever one
     tile's label was longer than another's: measured 2026-08-11, a one-line
     badge boxes at 32px and a two-line badge at 49px, so "You Receive" sat 18px
     lower on BBS than on the three rival tiles. Reserving one line only ever
     looked correct because the alignment test injected the SHORTEST label —
     every `% of this quote proven on-chain` state was already two lines and
     would have failed the same check. Height, not wording, is the fix. */
  min-height:49px;
}
/* Before the first quote the slot is EMPTY, and an empty flex box still
   contributes its 12px top margin — measured: idle tiles grew 384->396px
   against HEAD for a badge that is not there. setPodBadge(null) fills it with
   a spacer at quote start (app.js:803-804 runs it for every tile), so from
   then on the row is reserved and all four tiles align. */
.pod-badge:empty { margin:0; }
.pod-badge-icon { flex:0 0 auto; }
/* Only the SHIELD carries the state colour. The label stays neutral so the
   tile does not gain a second accent competing with the amount. */
.pod-badge-verified .pod-badge-icon { color:#4ca80f; }
.pod-badge-partial  .pod-badge-icon { color:#c08a1e; }
.pod-badge-attested .pod-badge-icon { color:#8b95a5; }

/* PulseX-app simulation tile: competes as a peer (user decision), the
   SIMULATED chip is its mandatory honesty label. */
.sim-chip {
  display:inline-block; padding:2px 8px; border-radius:999px;
  background:#f4efdc; color:#8a7b3a; font-size:10px; font-weight:850;
  letter-spacing:1px; vertical-align:middle;
}
/* Info tooltip (pure CSS, hover + keyboard focus) */
.info-tip {
  position:relative; display:inline-block; cursor:help; color:#8a7b3a;
  font-size:13px; vertical-align:middle; outline:none;
}
.info-tip-body {
  /* Right-anchored: the icon lives in the rightmost tile, so the bubble
     must grow LEFT into the page - a centered bubble extended past the
     viewport and created horizontal scroll. */
  position:absolute; right:-10px; bottom:130%;
  width:230px; padding:10px 12px; border-radius:10px;
  background:#15181b; color:#e8ebe4; font-size:12px; line-height:1.55;
  font-weight:600; text-align:left; letter-spacing:0;
  box-shadow:var(--shadow-md); z-index:30;
  opacity:0; visibility:hidden; transition:opacity .15s ease;
}
.info-tip-body::after {
  content:""; position:absolute; top:100%; right:12px;
  border:6px solid transparent; border-top-color:#15181b;
}
.info-tip:hover .info-tip-body, .info-tip:focus .info-tip-body { opacity:1; visibility:visible; }

/* Kind-2 alarm: the simulation beat BBS — a solver bug, shown loudly */
.quote-card.sim-alarm {
  border:2.5px solid #e04545;
  background:radial-gradient(circle at 50% 0%, rgba(224,69,69,.08), transparent 55%), #fff;
}
.quote-card.sim-alarm .pod-status { color:#c22525; font-weight:800; }
.tile-gif {
  /* Sized by intrinsic pixels (capped), NOT forced to a common height: the
     bear files are only 420x420, so pushing them past ~150px upscales them
     into a blocky/compressed look. The 1024x1024 bull carries internal
     canvas padding, so at the same box it reads a touch smaller — that is a
     source-art difference, corrected in the asset, not by upscaling bears. */
  display:block; margin:14px auto 0; width:auto; height:auto;
  max-width:200px; max-height:150px; border-radius:14px;
}
/* The dancing gif has a black rectangular frame — crop it to a circle, the
   same treatment as the flip-button version, sized to fill the idle gap.
   Width is capped to the tile content box: a fixed 150px was WIDER than
   narrow tiles, which made margin:auto resolve to 0 and pin the gif left. */
.tile-wait {
  width:min(150px, 100%); aspect-ratio:1/1; height:auto; max-width:none; max-height:none;
  border-radius:50%; object-fit:cover; margin:20px auto 8px;
}
.pod-status { overflow-wrap:anywhere; }
.quote-output span { font-size:.62em; letter-spacing:0; }
/* Amount = big number on line 1, unit symbol on its own line 2 — identical
   layout on every tile regardless of how many decimals the number has.
   Explicit px (class beats the .62em element rule) so the number reads big. */
/* nowrap so the NUMBER never breaks mid-digit ("1,905.06 / 9"); the symbol
   already lives on its own line. Sized to fit a typical amount on one line
   in the narrower loser tiles while reading clearly bigger than before. */
.quote-output .amt-num { font-size:22px; font-weight:800; letter-spacing:-.8px; line-height:1.06; display:block; white-space:nowrap; }
.quote-output .amt-sym { font-size:13px; font-weight:700; letter-spacing:.4px; display:block; margin-top:3px; color:inherit; }
.delta-pill {
  margin-top:18px; display:inline-flex; min-width:182px; justify-content:center;
  border-radius:999px; background:linear-gradient(90deg, #a6ec00, #8ed600);
  padding:8px 17px; font-weight:850; color:#090a0b;
}
.delta-pill.benchmark {
  background: linear-gradient(90deg, #4d9fff, #1877ff);
  color: #fff;
}
/* min-height so the delta row occupies the SAME space whether it has text
   (losers "0.03% less") or is empty (the winner) — that keeps the Select /
   Best Rate checkmark below it on the SAME line across every tile. */
.competitor-delta { margin-top:12px; margin-bottom:20px; min-height:19px; color:#63708a; font-weight:650; font-size:14px; }
.best-mark { display:flex; align-items:center; gap:12px; margin-top:12px; font-weight:850; letter-spacing:.4px; }
.check-medallion {
  width:35px; height:35px; border-radius:50%; display:grid; place-items:center;
  flex:0 0 auto; /* long result text must never squash the circle */
  color:#0c0e10; background:linear-gradient(135deg,#d8ff3e,#76c800);
  box-shadow:0 3px 10px rgba(129,205,0,.25); font-size:19px; font-weight:900;
}
.result-bar {
  /* Hidden until a live comparison decides a winner (.show). Original
     layout restored (operator: the old result display is the one to keep):
     [main] [value] [swap] [emblem] across one row; main stacks provider
     over the fee note over "You Get More". */
  min-height:93px; display:none;
  grid-template-columns: minmax(0,1fr) auto auto 56px;
  align-items:center; gap:14px;
  padding: 14px 16px 14px 22px;
  background:linear-gradient(110deg, #0d1012, #13171b);
  color:#fff; border-radius:0 0 20px 20px; border-bottom:2px solid #91d900;
  box-shadow:var(--shadow-md);
}
.result-swap-btn {
  display:inline-flex; align-items:center; justify-content:center;
  height:42px; padding:0 16px; white-space:nowrap;
  border:0; border-radius:12px;
  background:linear-gradient(110deg, #bfff00, #8ee000);
  color:#0b0d0f; font-size:13.5px; font-weight:820; letter-spacing:.2px;
  box-shadow: 0 0 18px rgba(130,215,0,.35), 0 4px 12px rgba(0,0,0,.2);
  transition: transform .18s ease, box-shadow .18s ease;
  text-decoration:none;
}
.result-swap-btn:hover {
  transform:translateY(-2px);
  box-shadow: 0 0 24px rgba(130,215,0,.45), 0 8px 18px rgba(0,0,0,.25);
}
/* "Select" — a checkbox-style selector that reads as a control at rest, not
   only on hover. Independent of "Best Rate" (.best-mark), which is a
   permanent badge and never moves. Exactly one tile is chosen; default =
   the best tile. .sel-box mirrors the Best Rate check-medallion shape at a
   smaller size so the two feel like one family. */
.tile-select {
  display:flex; align-items:center; justify-content:center; gap:7px;
  width:100%; margin-top:12px; padding:8px 6px;
  /* "BEST RATE" is the longest label and .is-best widens it further; at
     gap:10 + a 35px medallion only 71px of a 128px tile was left and it
     wrapped to two lines (measured). Never wrap the verdict. */
  white-space:nowrap;
  border:0; background:transparent;   /* no filled pill — operator: remove background */
  color:#7c8a72; font-size:13px; font-weight:750; letter-spacing:.3px;
  cursor:pointer;
  transition: color .15s ease;
}
.tile-select:hover { color:#3a7a00; }
.tile-select .sel-box {
  width:30px; height:30px; border-radius:50%; flex:0 0 auto;   /* = Best Rate medallion */
  display:grid; place-items:center; font-size:19px; font-weight:900;
  border:2px solid rgba(130,215,0,.55); color:transparent; background:transparent;
}
.tile-select .sel-box.on {
  border-color:#76c800; color:#0c0e10;
  background:linear-gradient(135deg,#d8ff3e,#76c800);
}
/* The selected tile's label darkens; the BEST one goes gold-green + bold. */
.tile-select-on { color:#111; }
.tile-select.is-best { color:#3a7a00; font-weight:850; letter-spacing:.2px; }
/* Chosen tile gets a quiet ring — the user's current pick at a glance. */
.quote-card.chosen { box-shadow: inset 0 0 0 2px rgba(130,215,0,.55); }
.result-bar.show { display:grid; }
.result-bar.benchmark-bar {
  border-bottom-color: var(--blue);
}
.result-main { display:flex; align-items:center; gap:12px; min-width:0; }
.result-main > div { min-width:0; }
.result-main p { margin:2px 0 0; color:#d5d8dc; font-size:12.5px; line-height:1.35; }
.result-main strong { font-size:15px; white-space:nowrap; }   /* "Best route: X" on one line */
.result-value { text-align:center; }
.result-value small { display:block; margin-bottom:3px; color:#d4d8dc; font-size:13px; }
.result-value b { color:var(--green); font-size:23px; white-space:nowrap; }
.result-bar.benchmark-bar .result-value b { color: #6db8ff; }
/* Winner name matches the You Get More value color in both outcomes */
.result-bar .result-winner-name { color:var(--green); }
.result-bar.benchmark-bar .result-winner-name { color:#6db8ff; }
.result-emblem {
  width:72px; height:72px; border-radius:50%; object-fit:cover;
  justify-self:end; box-shadow:0 0 21px rgba(80,255,0,.25);
}

/* ── Feature Strip ── */
.feature-strip {
  margin-top: 19px;
  display:grid; grid-template-columns: 245px repeat(4, 1fr);
  min-height:111px;
  border:1px solid var(--line); background:rgba(255,255,255,.8);
  border-radius:20px; overflow:hidden; box-shadow:var(--shadow-sm);
}
.feature-title { padding:22px 34px; display:flex; flex-direction:column; justify-content:center; font-size:31px; font-weight:790; }
.feature-title::after { content:""; width:65px; height:2px; background:var(--green); margin-top:12px; }
.feature {
  position:relative; display:grid; grid-template-columns:58px 1fr; align-items:center; gap:15px; padding:20px 22px;
}
.feature + .feature::before { content:""; position:absolute; left:0; top:28px; bottom:28px; width:1px; background:var(--line); }
.feature-icon { width:55px; height:55px; border-radius:50%; display:grid; place-items:center; font-size:22px; font-weight:900; color:#1a1d20; }
.feature-icon.icon-cyan { background:#c9f9ff; }
.feature-icon.icon-green { background:#dafa58; color:#1a1d20; }
.feature-icon.icon-dark { background:#1a1d20; color:#fff; }
.feature-icon.icon-yellow { background:#f2e35f; }
.feature-icon.icon-red { background:#ffe0e0; }
.feature-icon svg { width:26px; height:26px; }
.dollar-icon { font-size:28px; font-weight:900; line-height:1; color:#9ee600; }
.feature h3 { margin:0 0 7px; font-size:16px; }
.feature h3.smart { color:var(--green-dark); }
.feature p { margin:0; font-size:13px; line-height:1.42; color:#343a43; }

/* ── How It Works ── */
.how-strip {
  margin-top:14px; padding:23px 32px;
  background:linear-gradient(110deg,#111315,#0c0e10);
  color:#fff; border-radius:20px; display:grid;
  grid-template-columns:190px repeat(4,1fr); gap:22px; align-items:center;
  min-height:132px;
}
.how-title { font-size:35px; line-height:1; font-weight:800; }
.how-title::after { content:""; display:block; width:66px; height:2px; background:var(--green); margin-top:13px; }
.how-item { display:grid; grid-template-columns:66px 1fr; align-items:center; gap:16px; position:relative; min-width:0; overflow:visible; }
.how-item:not(:last-child)::after { content:""; position:absolute; right:-7px; width:32px; border-top:2px dotted #84b900; transform:translateX(50%); z-index:1; }
.step-orb {
  width:65px; height:65px; border:1.5px solid var(--green-dark); border-radius:50%; display:grid; place-items:center;
  font-size:24px; position:relative; background:#121416; color:#d0d3d8;
  box-shadow: 0 0 12px rgba(130,215,0,.25), 0 0 28px rgba(130,215,0,.10);
}
.step-orb svg { width:28px; height:28px; fill:none; stroke:#d0d3d8; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.step-number { position:absolute; width:29px; height:29px; border-radius:50%; background:var(--green); color:#090a0b; font-weight:850; font-size:13px; display:grid; place-items:center; left:-11px; top:-11px; }
.how-item h3 { font-size:14px; margin:0 0 6px; }
.how-item p { margin:0; color:#d8dadd; font-size:12px; line-height:1.45; }
.how-item .smart { color:var(--green); }

/* ── Logo Strip ── */
.logo-strip {
  margin-top:14px; min-height:68px; border:1px solid var(--line); border-radius:18px; padding:13px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:25px; background:#fff; color:#2b3036; font-size:13px; box-shadow:var(--shadow-sm);
}
.aggregator-logos { display:flex; align-items:center; gap:34px; flex-wrap:wrap; }
.agg { display:flex; gap:9px; align-items:center; font-weight:700; }
.agg img { width:29px; height:29px; object-fit:contain; }
.agg svg { flex-shrink:0; }
.footer-brand { display:flex; gap:13px; align-items:center; margin-left:auto; }
.footer-brand img { width:48px; height:48px; border-radius:50%; object-fit:cover; box-shadow: 0 0 0 3px rgba(130,215,0,.3), 0 0 18px rgba(130,215,0,.25), 0 0 36px rgba(130,215,0,.12); }
.footer-brand p { margin:0; color:#5f6570; line-height:1.3; }
.footer-brand strong { color:#17191d; }

/* ── Swap Page ── */
.swap-intro {
  display:grid; grid-template-columns: .84fr 1.16fr; gap:40px; align-items:center;
  margin: 0 8px 18px;
}
.swap-intro p { margin:0; font-size:18px; line-height:1.45; max-width:650px; }
/* Screen-reader-only text (page h1 lives here after the visual heading was
   removed to reclaim vertical space) */
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.soon-tag { font-size:11px; color:var(--muted); font-weight:650; }
/* "(soon)" nav entries are labels, not links */
.nav-soon { cursor:default; opacity:.65; }
.nav-soon:hover { color:inherit; }
.promise { display:flex; gap:18px; align-items:center; padding:0 12px 4px 38px; border-left:1px solid var(--line-strong); font-size:16px; line-height:1.55; }
.promise-icon { width:49px; height:49px; display:grid; place-items:center; color:#53a400; flex:0 0 auto; }

/* No hard pixel floor on the compare column — a 760px floor forced a
   horizontal page scrollbar on every viewport under ~1264px. */
.swap-layout { display:grid; grid-template-columns: minmax(380px, .89fr) minmax(0, 1.11fr); gap:20px; align-items:stretch; }
/* Grid items must not inherit the quote-grid carousel's intrinsic width
   (min-content of N swipe columns), or the page overflows on mobile. */
.swap-layout > article { min-width:0; }
.swap-card, .swap-compare {
  border:1px solid var(--line); border-radius:20px; background:#fff; box-shadow:var(--shadow-sm);
}
.swap-card { padding:18px 20px 14px; }
.card-heading { display:flex; justify-content:space-between; align-items:center; gap:14px; margin:0 10px 15px; }
.card-heading h2 { margin:0; font-size:23px; }
/* The card heading now carries the value-prop (was "Find Best Swap") — two
   short lines, not a big page title. */
/* More specific than ".card-heading h2" (23px) so the small size actually
   wins. Matches the metric labels (Network Fee etc.) at 12px. */
.card-heading h2.card-promise { font-size:12px; font-weight:600; line-height:1.35; color:#65707c; }
/* Payoff words carry the app's OUTCOME colors so the promise doubles as a
   legend: green = BBS wins (same green-dark as the tile taglines), blue =
   a top aggregator wins (same --blue as the benchmark "Wins" badge). */
.promise-win { color:var(--green-dark); font-weight:800; }
.promise-free { color:var(--blue); font-weight:800; }
/* The intro promise slot now shows the comparison label + live win badge
   (relocated from above the tiles so that band could be removed). */
.promise-compare { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.icon-button { width:38px; height:38px; border:0; border-radius:12px; background:transparent; color:#65707c; font-size:21px; }
.icon-button:hover { background:#f1f2ef; }
.token-box {
  border:1px solid #e7e8e4; border-radius:15px; min-height:121px; padding:16px 18px; background:#fff;
  display:grid; grid-template-columns:1fr auto; align-items:center; box-shadow:0 3px 12px rgba(20,24,27,.035);
}
.token-box + .token-box { margin-top:14px; }
.token-copy label { display:block; font-weight:680; font-size:13px; margin-bottom:7px; }
.amount-input {
  display:block; width:100%; border:0; outline:0; padding:0; font-size:33px; font-weight:770; letter-spacing:-1px; background:transparent; color:var(--ink);
}
.amount-input.placeholder-muted { color: #c0c4cc; }
.fiat { color:#6e7480; margin-top:5px; font-size:14px; }
.token-side { min-width:185px; text-align:right; }
.token-select {
  height:52px; min-width:150px; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  border:1px solid #e7e8e4; background:#fff; border-radius:14px; padding:0 16px; font-size:22px; font-weight:760;
}
.token-select img { width:31px; height:31px; }
/* Tokens without a local icon render text-only, not a broken-image glyph */
.token-select img[src=""], .token-select img:not([src]) { display:none; }
.balance { margin-top:10px; color:#657080; font-size:13px; }
.balance .max { color:#65ad00; font-weight:780; margin-left:8px; cursor:pointer; }
.flip-row { height:0; position:relative; z-index:4; display:flex; justify-content:center; }
.flip-button {
  width:54px; height:54px; border:1px solid #e1e6d8; border-radius:50%; background:#fff; color:#66b500;
  /* Centered on the boundary between the You Pay / You Receive boxes */
  font-size:25px; transform:translateY(-50%); box-shadow:var(--shadow-sm); display:grid; place-items:center;
}
.flip-button img { width:46px; height:46px; border-radius:50%; object-fit:cover; }
.flip-button.quoting { cursor:progress; }
/* FIVE tracks since "Minimum received" joined the row. It was four, so the
   fifth metric wrapped to a second line and pushed the page 62px taller. */
.metrics { display:grid; grid-template-columns:1.3fr .8fr .8fr .7fr 1.15fr; margin:14px 0 9px; border-top:1px solid #ecece8; padding-top:13px; }
.metric { padding:0 13px; border-right:1px solid #e7e7e4; }
.metric:first-child { padding-left:10px; }
.metric:last-child { border-right:0; }
.metric small { display:block; color:#2e3338; margin-bottom:4px; font-weight:650; font-size:12px; }
.metric strong { font-size:14px; }
.metric .positive { color:#59ad00; }

/* ── Pair Strip ── */
.pair-strip {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; margin:10px 0 0;
  border:1px solid var(--line); border-radius:12px; background:var(--surface-soft);
}
.pair-strip strong { font-size:15px; font-weight:800; }
.route-mode-pill {
  padding:4px 10px; border-radius:99px; background:#0d0f11; color:var(--green);
  font-size:11px; font-weight:850; letter-spacing:.5px; text-transform:uppercase;
}

/* ── Execution Guard ── */
.execution-guard {
  margin:10px 0 0; padding:10px 14px;
  border:1px solid #e5dfd6; border-radius:12px; background:#fffdf7;
}
.execution-guard small { display:block; font-size:10px; font-weight:850; text-transform:uppercase; color:var(--muted); letter-spacing:.5px; }
.execution-guard strong { display:block; margin:4px 0 2px; font-size:14px; color:#8b5e00; }
.execution-guard p { margin:0; font-size:12px; color:var(--muted); line-height:1.4; }

/* ── Routing Status ── */
.routing-status {
  display:grid; grid-template-columns:45px 1fr 160px; align-items:center; gap:10px;
  border:1px solid #dceac6; border-radius:14px; min-height:61px; padding:8px 12px;
  background:
    radial-gradient(circle at 4% 50%, rgba(154,231,0,.14), transparent 26%),
    #fbfff5;
  overflow:hidden;
}
.routing-status .status-check { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:#dfff86; font-weight:900; }
.routing-status strong { color:#57ad00; }
.routing-status small { display:block; margin-top:3px; }
.sparkline { width:150px; height:48px; }
.swap-submit {
  width:100%; min-height:53px; border:0; border-radius:15px; margin-top:11px;
  background:linear-gradient(90deg,#bfff00,#8ee000);
  font-size:20px; font-weight:830; box-shadow:var(--shadow-green); position:relative;
}
.swap-submit .round-arrow { position:absolute; right:8px; top:7px; }
.swap-submit.loading { filter:saturate(.7); }
.swap-submit.loading::before {
  content:""; width:20px; height:20px; border-radius:50%; border:3px solid rgba(0,0,0,.2); border-top-color:#0d0f10; display:inline-block; margin-right:10px; vertical-align:-4px; animation:spin .8s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

.swap-compare { padding:15px 14px 14px; }
.swap-compare .comparison-shell { padding:0; }
.swap-compare .quote-card { min-height:300px; padding:22px 24px; }
/* The comparison-head band was removed (its text moved to the intro), so the
   tiles rise. Keep just enough top space for the winner crown (top:-46px)
   to sit inside the shell rather than clipping above it. */
.swap-compare .quote-grid { border-radius:18px 18px 0 0; margin-top:20px; }
.swap-compare .quote-card.bbs { border-radius:20px; }
.swap-compare .result-bar { min-height:99px; grid-template-columns: 1.3fr .48fr auto 80px; }
.swap-compare .comparison-head { margin-bottom:4px; }

/* ── Swap Benefits ── */
.swap-benefits {
  margin-top:18px; display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
}
.benefit-card {
  min-height:110px; border:1px solid var(--line); background:#fff; border-radius:18px; padding:17px 22px;
  display:grid; grid-template-columns:56px 1fr; align-items:center; gap:16px; box-shadow:var(--shadow-sm);
}
.benefit-card .feature-icon { width:53px; height:53px; font-size:20px; }
.benefit-card .feature-icon svg { width:24px; height:24px; }
.benefit-card h3 { margin:0 0 6px; font-size:16px; }
.benefit-card p { margin:0; color:#343a42; font-size:13px; line-height:1.45; }

/* ── Settings Modal ── */
.modal-backdrop { position:fixed; inset:0; background:rgba(8,12,14,.35); backdrop-filter:blur(4px); z-index:100; display:none; place-items:center; padding:20px; }
.modal-backdrop.open { display:grid; }
.settings-modal { width:min(620px,100%); background:#fff; border-radius:22px; padding:24px; box-shadow:0 30px 80px rgba(0,0,0,.22); }
.settings-head { display:flex; justify-content:space-between; align-items:center; }
.settings-head h2 { margin:0; }
.settings-group { margin-top:22px; }
.settings-group h3 { margin:0 0 12px; font-size:15px; }
.slippage-row { display:grid; grid-template-columns:repeat(4,1fr) 1.3fr; gap:8px; }
.slippage-option { height:45px; border:1px solid var(--line); border-radius:12px; background:#fff; font-weight:700; }
.slippage-option.active { border-color:#7bd100; background:#f4ffe3; color:#54a400; }
/* Custom entry sits in the same row as the presets and looks like one, so the
   choice reads as five options rather than "presets, plus a stray field". */
.slippage-custom {
  height:45px; border:1px solid var(--line); border-radius:12px; background:#fff;
  display:flex; align-items:center; gap:2px; padding:0 10px; font-weight:700;
}
.slippage-custom:focus-within { border-color:#7bd100; background:#f4ffe3; }
.slippage-custom input {
  width:100%; min-width:0; border:0; outline:0; background:transparent;
  font:inherit; font-weight:700; text-align:right; padding:0;
}
.slippage-custom span { color:var(--muted-2); }
.slippage-note {
  margin:10px 0 0; font-size:12px; line-height:1.45; color:var(--muted-2);
}

/* ── Wallet picker (rows are injected from EIP-6963 announcements) ── */
.wallet-modal { width:min(430px,100%); }
.wallet-list { display:flex; flex-direction:column; gap:8px; margin-top:4px; }
.wallet-row {
  display:flex; align-items:center; gap:11px; width:100%;
  padding:12px 14px; border:1px solid var(--line); border-radius:12px;
  background:#fff; font:inherit; font-weight:700; cursor:pointer; text-align:left;
  transition: background .12s ease, border-color .12s ease;
}
.wallet-row:hover:not(:disabled) { background:var(--green-soft); border-color:#d9e6c6; }
/* A pending request is a VISIBLE state: the dialog stays open and the chosen
   row shows the wait, because a wallet that badges its icon instead of
   popping otherwise reads as "nothing happened". */
.wallet-row:disabled { opacity:.55; cursor:default; }
.wallet-row-waiting { opacity:1 !important; border-color:#7bd100; background:#f4ffe3; }
.wallet-row img { width:26px; height:26px; border-radius:7px; object-fit:contain; flex:0 0 auto; }
.wallet-dot { width:26px; height:26px; border-radius:7px; background:var(--line); flex:0 0 auto; }
.wallet-row small { margin-left:auto; font-weight:600; color:var(--muted-2); }
.wallet-disconnect { justify-content:center; color:#a4462f; font-weight:750; }
.wallet-empty { font-size:13px; line-height:1.5; color:var(--muted-2); padding:6px 2px; }
/* Connected state: the header pill shows the address, so it stops reading as
   a call to action. */
.header-wallet.wallet-connected { background:#eef7e2; color:#3f6b12; }
.wallet-chain-warn {
  margin:10px 0 0; padding:9px 12px; border-radius:10px;
  background:#fdf4e0; border:1px solid #f0dfb4; color:#87671c;
  font-size:12px; font-weight:640; line-height:1.45;
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
}
.chain-switch-btn {
  border:1px solid #d8b872; border-radius:999px; padding:5px 12px;
  background:#fff; color:#7a5c14; font:inherit; font-weight:750; cursor:pointer;
  white-space:nowrap;
}
.chain-switch-btn:hover { background:#fffaf0; border-color:#c9a24d; }

/* Balance sits under the token pill on each side. Blank when no wallet is
   connected -- an unknown balance must never render as 0. */
.token-balance {
  margin-top:6px; font-size:12px; font-weight:640; color:var(--muted-2);
  text-align:right; white-space:nowrap;
}
.swap-submit:disabled, .swap-submit.is-blocked {
  opacity:.5; cursor:not-allowed; filter:grayscale(.35);
}
/* .source-chip* rules deleted with the "Connected Liquidity Sources" group:
   it hardcoded 1inch / Matcha / 0x, none of which BBS quotes against, and
   omitted KyberSwap and Piteas, which it does. */
.modal-actions { margin-top:24px; display:flex; justify-content:flex-end; gap:10px; }

/* ── Token Search ── */
.token-search-input {
  width:100%; height:48px; margin:16px 0 12px; padding:0 16px;
  border:1px solid var(--line-strong); border-radius:14px; background:#fff;
  font-size:15px; font-weight:600; outline:none;
}
.token-search-input:focus { border-color:var(--green-dark); box-shadow: 0 0 0 3px rgba(130,215,0,.12); }
.token-search-results { max-height:340px; overflow-y:auto; display:flex; flex-direction:column; gap:4px; }
.token-search-row {
  display:grid; grid-template-columns:36px 1fr auto auto; align-items:center; gap:12px;
  width:100%; padding:10px 12px; border:1px solid transparent; border-radius:12px;
  background:transparent; cursor:pointer; text-align:left; font:inherit;
  box-sizing:border-box;
  transition: background .12s ease, border-color .12s ease;
}
.token-search-row:focus-visible { outline:2px solid var(--green-dark); outline-offset:1px; }
/* Native has no address, but it still needs the 4th cell or its row's other
   columns land at different x-positions than every addressed row above it. */
/* NOT `.token-copy` — that class is already the swap form's pay/receive box
   (swap.html:66,80; its rule is at .token-copy label above). Taking that name
   sized the whole form to 26x26: "You Pay" wrapped to two lines and
   #payAmount collapsed from 338px to 1px. Renamed, not ancestor-scoped, so
   the name cannot collide again wherever the markup moves. */
.token-addr-copy, .token-addr-copy-spacer { width:26px; height:26px; }
.token-addr-copy {
  display:inline-flex; align-items:center; justify-content:center;
  padding:0; border:1px solid transparent; border-radius:7px;
  background:transparent; color:var(--muted-2); cursor:pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.token-addr-copy:hover { background:#fff; border-color:var(--line); color:var(--green-dark); }
.token-addr-copy:focus-visible { outline:2px solid var(--green-dark); outline-offset:1px; }
.token-search-row:hover { background:var(--green-soft); border-color:#d9e6c6; }
.token-search-row img { width:32px; height:32px; border-radius:50%; object-fit:cover; }
.token-search-row strong { display:block; font-size:15px; font-weight:760; }
.token-search-row small { display:block; color:var(--muted); font-size:12px; margin-top:2px; }
.token-addr { font-size:11px; color:var(--muted-2); font-family:monospace; }
.token-popular-label { font-size:11px; font-weight:850; text-transform:uppercase; color:var(--muted); margin:12px 0 8px; letter-spacing:.5px; }
.token-popular-chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.token-chip {
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border:1px solid var(--line); border-radius:999px;
  background:#fff; font-size:13px; font-weight:750; cursor:pointer;
  transition: border-color .12s, background .12s;
}
.token-chip:hover { border-color:var(--green-dark); background:var(--green-soft); }
.token-chip img { width:20px; height:20px; border-radius:50%; }

/* ── Toast ── */
.toast {
  position:fixed; right:24px; bottom:24px; z-index:150; background:#101214; color:#fff; border-radius:14px; padding:13px 18px;
  opacity:0; transform:translateY(15px); pointer-events:none; transition:.25s ease; box-shadow:0 15px 35px rgba(0,0,0,.23);
}
.toast.show { opacity:1; transform:translateY(0); }

/* ── IQ Cockpit Drawer (preserved from old UI) ── */
.iq-drawer {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow-sm);
}
.iq-drawer summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 24px; list-style: none; cursor: pointer; font-weight: 760;
}
.iq-drawer summary::-webkit-details-marker { display: none; }
.iq-drawer summary small { color: var(--muted); font-weight: 650; }
.iq-drawer-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
  padding: 0 24px 20px;
}
.iq-drawer label { display: block; color: var(--muted); font-size: 12px; font-weight: 800; }
.iq-drawer input, .iq-drawer textarea, .iq-drawer select {
  width: 100%; min-height: 44px; margin-top: 6px; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: 10px; background: #fff;
  font-weight: 700; outline: none;
}
.iq-drawer textarea { min-height: 68px; resize: vertical; line-height: 1.3; }
.iq-drawer-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.iq-ghost-button {
  min-height: 40px; padding: 0 14px; border: 0; border-radius: 10px;
  background: rgba(255,255,255,.78); color: var(--ink); font-weight: 800;
  box-shadow: inset 0 0 0 1px var(--line);
}
.iq-primary-button {
  min-height: 40px; padding: 0 14px; border: 0; border-radius: 10px;
  background: linear-gradient(110deg, #bfff00, #8be900); color: #0b0d0f;
  font-weight: 800; box-shadow: var(--shadow-green);
}
.check-row { display: flex; gap: 8px; align-items: center; min-height: 44px; color: #303942; }
.check-row input { width: auto; min-height: auto; margin: 0; }
.iq-log-output {
  min-height: 120px; max-height: 200px; margin: 0; padding: 10px;
  border: 1px solid var(--line); border-radius: 10px;
  background: #101214; color: #d9eee2;
  font-family: Consolas, "Courier New", monospace; font-size: 12px;
  line-height: 1.35; overflow: auto; white-space: pre-wrap;
}
.iq-metrics {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
}
.iq-metrics > div {
  min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft);
}
.iq-metrics span { display: block; color: var(--muted); font-size: 11px; font-weight: 850; text-transform: uppercase; }
.iq-metrics strong { display: block; margin-top: 6px; font-size: 16px; font-weight: 800; overflow-wrap: anywhere; }
.iq-proof-rail {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px;
}
.iq-proof-card {
  border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 14px; box-shadow: var(--shadow-sm);
}
.iq-proof-card h4 { margin: 0 0 6px; font-size: 13px; color: var(--muted); font-weight: 850; text-transform: uppercase; }
.iq-proof-card strong { font-size: 17px; font-weight: 800; overflow-wrap: anywhere; }
.iq-proof-card p { margin: 6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.42; }
.chip-list, .compact-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.chip {
  max-width: 100%; overflow: hidden; padding: 6px 9px;
  border: 1px solid var(--line); border-radius: 999px; background: #fff;
  color: #303942; font-size: 12px; font-weight: 800;
  text-overflow: ellipsis; white-space: nowrap;
}
/* ── Pool Lens ── */
.iq-pool-lens { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.pool-lens-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.pool-lens-head h4 { margin: 0; font-size: 14px; font-weight: 850; text-transform: uppercase; color: var(--muted); }
.pool-pair-label { color: var(--ink); text-transform: none; margin-left: 8px; font-size: 15px; }
.pool-meta-text { margin: 0 0 12px; font-size: 13px; color: var(--muted); line-height: 1.4; }
.pool-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pool-column-box { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: var(--surface-soft); }
.pool-col-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 12px; font-weight: 850; color: var(--muted); text-transform: uppercase; }
.pool-col-head small { background: var(--line); padding: 2px 8px; border-radius: 99px; font-size: 11px; }
.pool-item-list { display: flex; flex-direction: column; gap: 6px; min-height: 48px; }
.pool-item-entry { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; }
.pool-item-entry:hover { border-color: var(--green-dark); }
.pool-item-entry strong { display: block; font-size: 13px; font-weight: 800; }
.pool-item-entry p { margin: 3px 0 0; font-size: 12px; color: var(--muted); line-height: 1.3; }
.pool-empty { color: var(--muted); font-size: 12px; padding: 8px 0; }

.source-row-iq { display: grid; gap: 4px; min-width: 140px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.source-row-iq strong { font-size: 12px; font-weight: 850; }
.source-row-iq small { color: var(--muted); font-size: 11px; font-weight: 700; overflow-wrap: anywhere; }
.status-pill {
  display: inline-flex; align-items: center; max-width: 100%;
  padding: 4px 8px; border-radius: 999px; background: #eef1f2;
  color: #23292f; font-size: 11px; font-weight: 850;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.status-pill.ready, .status-pill.pass, .status-pill.protected, .status-pill.quote_loaded, .status-pill.quoted { background: #dbfbe8; color: #07522e; }
.status-pill.warn, .status-pill.partial_live_state, .status-pill.missing_api_key, .status-pill.api_key_gap { background: #fff0c6; color: #684600; }
.status-pill.block, .status-pill.blocked, .status-pill.missing, .status-pill.pool_proof_gap, .status-pill.not_loaded, .status-pill.fetch_error { background: #ffe0e0; color: #812222; }

/* ── Responsive ── */
/* ── Why BBS? (homepage section + dedicated page) ── */
.home-why { margin: 76px 0 52px; }
.home-why-head { text-align:center; max-width:740px; margin:0 auto 34px; }
.home-why-head h2 { font-size:44px; letter-spacing:-1.8px; font-weight:800; margin:0 0 14px; }
.home-why-head .swap-word { color:#72c800; }
.home-why-head h2::after { content:""; display:block; width:66px; height:2px; background:var(--green); margin:16px auto 0; }
.home-why-head p { margin:0; font-size:17px; color:#4c5844; line-height:1.6; }
.home-why-cta { display:flex; gap:14px; justify-content:center; margin-top:26px; flex-wrap:wrap; }

.why-page .why-hero { text-align:center; max-width:820px; margin:26px auto 40px; }
.why-page .why-hero h1 { font-size:56px; letter-spacing:-2.4px; line-height:1.05; margin:0 0 18px; }
.why-page .why-hero h1 .best { color:#72c800; }
.why-page .why-hero p { font-size:18px; line-height:1.6; color:#3c443a; margin:0; }
.why-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; margin-bottom:48px; }
.why-card {
  background:#fff; border:1px solid #ecece8; border-radius:20px; padding:28px 26px;
  box-shadow:var(--shadow-sm); text-align:center;
}
.why-card svg { width:120px; height:90px; margin:0 auto 14px; display:block; }
.why-card h3 { margin:0 0 10px; font-size:19px; letter-spacing:-.3px; }
.why-card p { margin:0 0 12px; font-size:14.5px; line-height:1.6; color:#4c5844; }
.why-card small { color:#63a800; font-weight:750; font-size:13px; }
.why-flow { text-align:center; margin-bottom:56px; }
.why-flow h2 { font-size:32px; letter-spacing:-1px; margin-bottom:22px; }
.why-flow-row { display:flex; gap:18px; align-items:stretch; justify-content:center; flex-wrap:wrap; }
.why-flow-box { flex:0 1 360px; border-radius:18px; padding:22px 24px; text-align:left; }
.why-flow-box.win { background:#f2fadf; border:2px solid #9ade00; }
.why-flow-box.lose { background:#fff; border:1.5px solid #d9dcd2; }
.why-flow-box strong { display:block; margin-bottom:8px; font-size:17px; }
.why-flow-box p { margin:0; font-size:14.5px; line-height:1.6; color:#4c5844; }
.why-flow-or { align-self:center; font-weight:850; color:#9aa392; text-transform:uppercase; font-size:13px; }
.why-cta { display:inline-flex; margin-top:28px; }
.why-footnote { max-width:620px; margin:22px auto 0; font-size:13px; color:#77816e; line-height:1.6; }
@media (max-width: 1050px) { .why-grid { grid-template-columns:1fr 1fr; } .why-page .why-hero h1 { font-size:42px; } }
@media (max-width: 700px) { .why-grid { grid-template-columns:1fr; } }

@media (max-width: 1320px) {
  /* Desktop nav survives down to 1050px (hamburger below) - keep it clear
     of the actions column through the whole range. */
  .nav { gap: 12px; font-size: 14px; }
  :root { --max: 1240px; }
  .container { width:min(var(--max),calc(100% - 40px)); }
  .home-hero { grid-template-columns: .76fr 1.24fr; gap:28px; }
  .hero-title { font-size:66px; letter-spacing:-3px; }
  .quote-card { padding:21px 18px; }
  .comparison-label::before,.comparison-label::after { width:35px; margin-inline:10px; }
  .feature-strip { grid-template-columns:200px repeat(4,1fr); }
  .feature-title { font-size:26px; padding:18px 24px; }
  .feature { padding:16px 15px; grid-template-columns:48px 1fr; }
  .feature-icon { width:46px; height:46px; }
  .how-strip { grid-template-columns:150px repeat(4,1fr); padding-inline:22px; }
  .how-title { font-size:29px; }
  .how-item { grid-template-columns:52px 1fr; gap:10px; }
  .step-orb { width:52px; height:52px; }
  .swap-layout { grid-template-columns:minmax(370px,.83fr) minmax(0,1.17fr); }
  .swap-compare .quote-card { padding:21px 18px; }
  .token-side { min-width:150px; }
}
/* Header collapses to the hamburger earlier than the rest of the layout:
   below ~1150px the full nav cannot clear the network pill + wallet. */
@media (max-width: 1150px) {
  .header-inner { grid-template-columns:1fr auto; }
  .nav { display:none; position:absolute; top:var(--header-h); left:20px; right:20px; background:#fff; border:1px solid var(--line); border-radius:16px; padding:12px; box-shadow:var(--shadow-md); flex-direction:column; gap:0; }
  .nav.open { display:flex; }
  .nav a { padding:13px 16px; width:100%; }
  .mobile-menu { display:grid; place-items:center; }
  .header-actions { gap:8px; }
}
@media (max-width: 1050px) {
  .home-hero { grid-template-columns:1fr; }
  .hero-copy { max-width:760px; }
  .comparison-shell { padding-inline:0; }
  .feature-strip { grid-template-columns:1fr 1fr; }
  .feature-title { grid-column:1/-1; padding-bottom:10px; }
  .feature + .feature::before { display:none; }
  .feature { border-top:1px solid var(--line); }
  .how-strip { grid-template-columns:1fr 1fr; }
  .how-title { grid-column:1/-1; }
  .how-item:not(:last-child)::after { display:none; }
  .logo-strip { flex-direction:column; align-items:flex-start; }
  .footer-brand { margin-left:0; }
  .swap-intro { grid-template-columns:1fr; }
  .promise { padding:15px 0 0; border-left:0; border-top:1px solid var(--line); }
  .swap-layout { grid-template-columns:1fr; }
  .swap-benefits { grid-template-columns:1fr 1fr; }
  .iq-drawer-grid { grid-template-columns: 1fr; }
  .iq-proof-rail { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .container { width:calc(100% - 24px); }
  .site-header { height:68px; }
  :root { --header-h:68px; }
  .brand-emblem { width:38px; height:38px; }
  .brand-name { font-size:18px; }
  .brand { gap:8px; }
  .header-inner { gap:8px; }
  .header-actions { gap:6px; }
  /* Icon-only network picker + wallet so the header row fits 360-414px
     without pushing the whole page into horizontal scroll */
  .network-name { display:none; }
  .network-btn { padding:10px 12px; }
  .header-wallet { min-width:auto; padding-left:16px; }
  .header-wallet .wallet-text { display:none; }
  .page { padding-top:20px; }
  .hero-title { font-size:52px; letter-spacing:-2.4px; }
  .hero-copy p { font-size:16px; }
  .hero-actions { flex-direction:column; align-items:stretch; }
  /* !important beats the JS inline column template: on small screens the
     tiles become a swipeable row regardless of provider count. */
  .quote-grid { grid-template-columns:none !important; grid-auto-flow:column; grid-auto-columns:minmax(210px,85%); overflow-x:auto; border-radius:0; }
  .quote-card { min-height:250px; }
  .comparison-shell { overflow:hidden; }
  .comparison-head { justify-content:flex-end; }
  .win-badge { font-size:10px; padding:8px 12px; }
  .comparison-label { font-size:9px; }
  .comparison-label::before,.comparison-label::after { display:none; }
  .result-bar { grid-template-columns:1fr auto auto; padding:14px 16px; }
  .result-emblem { display:none; }
  .result-main p { display:none; }
  .result-value b { font-size:23px; }
  .feature-strip { grid-template-columns:1fr; }
  .feature-title { grid-column:auto; }
  .how-strip { grid-template-columns:1fr; }
  .how-title { grid-column:auto; }
  .aggregator-logos { gap:18px; }
  .swap-intro p { font-size:16px; }
  .token-box { grid-template-columns:1fr; gap:14px; }
  .token-side { min-width:0; text-align:left; }
  .token-select { justify-content:flex-start; }
  .metrics { grid-template-columns:1fr 1fr; row-gap:14px; }
  .metric:nth-child(2) { border-right:0; }
  .routing-status { grid-template-columns:42px 1fr; }
  .sparkline { display:none; }
  .swap-benefits { grid-template-columns:1fr; }
  .iq-metrics { grid-template-columns: 1fr; }
}
/* ── Home-page "alive" accents ──
   The word "Best" and the two CTAs read as static paint without motion.
   All three are pure CSS, run on the compositor (background-position /
   transform / box-shadow only), and the global reduced-motion rule below
   already disables every one of them. */

/* "Best": a light band sweeps through the gradient text every few seconds.
   Layer 1 is the moving highlight, layer 2 the original vertical gradient -
   both clip to the glyphs, so the base look is unchanged between sweeps. */
.hero-title .best {
  background:
    linear-gradient(115deg, rgba(226,255,102,0) 42%, rgba(226,255,102,.85) 50%, rgba(226,255,102,0) 58%),
    linear-gradient(180deg, #c3ff17 0%, #8ee100 100%);
  background-size: 250% 100%, 100% 100%;
  background-position: 130% 0, 0 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: best-shimmer 4.2s ease-in-out infinite;
}
@keyframes best-shimmer {
  0%       { background-position: 130% 0, 0 0; }
  38%,100% { background-position: -60% 0, 0 0; }
}

/* Launch App: the arrow flies out of its circle and re-enters from the
   left - the chip itself stays put, only the glyph travels. The chip's own
   text glyph is hidden (font-size:0) and redrawn in ::before so it can be
   transformed without moving the circle. */
.btn-alive .round-arrow { overflow: hidden; font-size: 0; }
.btn-alive .round-arrow::before {
  content: "\2192"; font-size: 22px; line-height: 1;
  animation: arrow-fly 2.6s ease-in-out infinite;
}
@keyframes arrow-fly {
  0%, 55%   { transform: translateX(0);     opacity: 1; }
  68%       { transform: translateX(160%);  opacity: 0; }
  68.1%     { transform: translateX(-160%); opacity: 0; }
  82%, 100% { transform: translateX(0);     opacity: 1; }
}

/* Result-bar Swap: a thin light travels the border line. The conic
   gradient is masked down to a bare 2px stroke (content-box XOR cut), so
   all that renders is a short comet running laps - no rim, no glow. */
@property --swap-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.btn-alive.ring-run { position: relative; }
.btn-alive.ring-run::before {
  content: ""; position: absolute; inset: -2px; border-radius: inherit; padding: 2px;
  background: conic-gradient(from var(--swap-angle),
    transparent 0turn, transparent .86turn,
    var(--ring-soft, rgba(234,255,138,.85)) .93turn, var(--ring-core, #ffffff) .95turn,
    transparent 1turn);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: swap-border-run 2.8s linear infinite;
  pointer-events: none;
}
@keyframes swap-border-run { to { --swap-angle: 1turn; } }
/* On white sections the pale comet would vanish - run a deep-green one. */
.home-why-cta .ring-run, .why-cta.ring-run {
  --ring-soft: rgba(122,185,0,.9);
  --ring-core: #3d7100;
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
  .tile-gif, .flip-button img { display:none; }
}

/* Wallet chip states the WALLET's own network, always. Previously only the
   UI's network was visible, so a wallet on another chain showed up nowhere
   except a warning strip in the middle of the card. */
.wallet-id { display:inline-flex; flex-direction:column; align-items:flex-start; line-height:1.15; }
.wallet-net {
  font-size:10px; font-weight:750; letter-spacing:.2px; opacity:.75;
  display:flex; align-items:center; gap:4px;
}
.wallet-net::before {
  content:''; width:6px; height:6px; border-radius:50%;
  background:#4ca80f; flex:0 0 auto;
}
.wallet-net.is-mismatch { opacity:1; color:#87671c; }
.wallet-net.is-mismatch::before { background:#e0a52a; }
.header-wallet.wallet-wrong-net { background:#fdf4e0; color:#7a5c14; border-color:#f0dfb4; }

/* The Swap button IS the state. Blocked reads as inert; 'switch network' is
   an ACTION and must not look dead, because it is one click from resolved. */
.swap-submit.is-action {
  background:linear-gradient(135deg,#f6c445,#e0a52a); color:#4a3708;
  opacity:1; filter:none; cursor:pointer;
}
.swap-submit.is-action:hover { filter:brightness(1.05); }

/* Picker row: address and balance stack in the same cell, so a held token
   reads as one line of money rather than two competing columns. */
.token-meta { display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
.token-bal { font-size:12px; font-weight:750; color:#3f6b12; }

/* The metrics tooltips sit in columns 2 and 3 of five, not in the rightmost
   tile the original .info-tip was written for. A right-anchored 230px bubble
   there grows LEFT off the card, so these anchor left instead. */
.info-tip-left .info-tip-body { right:auto; left:-10px; }
.info-tip-left .info-tip-body::after { right:auto; left:12px; }
/* The glyph is inside a <small> label, so it must not inherit its size. */
.metric .info-tip { font-size:12px; margin-left:2px; }