*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#08090b; --bg2:#0e1114; --card:#12161a; --line:#1f262d;
  --fg:#f4f7f9; --mut:#93a0ac; --dim:#66727e;
  --acc:#a78bfa; --acc2:#c9b6ff;
  --r:14px; --max:1000px; --narrow:680px;
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--fg);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.narrow{max-width:var(--narrow);margin:0 auto;padding:0 24px}
a{color:inherit}
h1,h2,h3{line-height:1.15;letter-spacing:-.03em;font-weight:600}

header{position:sticky;top:0;z-index:20;background:rgba(8,9,11,.8);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
nav{display:flex;align-items:center;gap:26px;height:64px}
.logo{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:-.02em;text-decoration:none;font-size:17px}
.logo img{width:26px;height:26px;display:block;border-radius:7px}
nav .sp{flex:1}
nav a.nl{color:var(--mut);text-decoration:none;font-size:14.5px;transition:.15s}
nav a.nl:hover{color:var(--fg)}
@media(max-width:700px){nav a.nl:not(.keep){display:none}}

.strip{border-bottom:1px solid var(--line);background:var(--bg2);padding:8px 0;
  font-size:12.5px;color:var(--dim);text-align:center}
.strip b{color:var(--mut);font-weight:500}

.hero{padding:92px 0 60px;text-align:center}
.pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--bg2);
  color:var(--mut);border-radius:999px;padding:6px 14px;font-size:12.5px;margin-bottom:28px}
.dot{width:6px;height:6px;border-radius:50%;background:var(--acc)}
h1{font-size:clamp(2.4rem,6.4vw,4.2rem);max-width:16ch;margin:0 auto}
h1 em{font-style:normal;color:var(--acc)}
.lead{color:var(--mut);font-size:clamp(1.05rem,2.2vw,1.22rem);max-width:58ch;margin:24px auto 0}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px;justify-content:center}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:10px;padding:13px 24px;
  font-weight:500;font-size:15px;text-decoration:none;border:1px solid transparent;transition:.15s}
.b1{background:var(--acc);color:#1b1130}
.b1:hover{background:var(--acc2)}
.b2{border-color:var(--line);background:var(--bg2);color:var(--fg)}
.b2:hover{border-color:#2e3944}

.ticker{border-block:1px solid var(--line);background:var(--bg2);overflow:hidden;padding:13px 0;margin-top:76px}
.ticker div{display:flex;gap:34px;white-space:nowrap;animation:slide 34s linear infinite;
  color:var(--dim);font-size:13px;letter-spacing:.04em;text-transform:uppercase}
.ticker span{display:flex;gap:34px}
.ticker b{color:var(--acc);font-weight:400}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

section{padding:88px 0;border-top:1px solid var(--line)}
.eyebrow{color:var(--acc);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
h2{font-size:clamp(1.8rem,3.8vw,2.6rem);margin-top:14px;max-width:20ch}
h2 span{color:var(--dim)}
.sub{color:var(--mut);margin-top:16px;max-width:56ch}

.grid{display:grid;gap:14px;margin-top:44px}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
@media(max-width:820px){.g3,.g2{grid-template-columns:1fr}}
.card{border:1px solid var(--line);background:var(--card);border-radius:var(--r);padding:28px}
.card h3{font-size:1.05rem;margin-bottom:9px;font-weight:500}
.card p{color:var(--mut);font-size:14.6px}
.card p+p{margin-top:9px}
.num{font-size:11.5px;color:var(--dim);margin-bottom:16px;display:block;letter-spacing:.1em}

.ask{border:1px solid var(--line);background:var(--card);border-radius:var(--r);padding:22px 24px}
.ask q{display:block;font-size:1rem;quotes:'\201C' '\201D';color:var(--fg)}
.ask small{display:block;color:var(--dim);margin-top:9px;font-size:13px}

.code{border:1px solid var(--line);background:#0a0d10;border-radius:11px;padding:17px 19px;
  color:var(--acc2);font-size:13.4px;margin-top:20px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  overflow-x:auto;white-space:pre-wrap;word-break:break-all}

.note{border:1px solid var(--line);background:var(--bg2);border-radius:11px;
  padding:20px 22px;margin-top:26px;color:var(--mut);font-size:14.4px}
.note b{color:var(--fg);font-weight:500}

.copy{display:flex;gap:10px;align-items:stretch;margin-top:14px}
.copy input{flex:1;min-width:0;background:#0a0d10;border:1px solid var(--line);border-radius:10px;
  color:var(--acc2);font:13px ui-monospace,SFMono-Regular,Menlo,monospace;padding:12px 14px}
.copy button{border:1px solid var(--line);background:var(--bg2);color:var(--fg);border-radius:10px;
  padding:12px 18px;font-size:14px;cursor:pointer;font-weight:500;transition:.15s;white-space:nowrap}
.copy button:hover{border-color:#2e3944}
.copy button.done{border-color:var(--acc);color:var(--acc)}

/* Bankr chat replica — light, like the app */
.bk{margin-top:26px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:#fff;color:#111;box-shadow:0 24px 60px -32px rgba(0,0,0,.9)}
.bk-top{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid #ececec}
.bk-top img{width:26px;height:26px;border-radius:7px;display:block}
.bk-top b{font-size:15px;font-weight:600;letter-spacing:-.01em;color:#111}
.bk-top .thread{margin:0 auto;font-size:14px;font-weight:600;color:#111}
.bk-top .pill2{font-size:11px;color:#6b4df6;background:#f1ecff;border-radius:999px;padding:4px 10px;font-weight:500}
.bk-body{padding:22px 18px;min-height:430px;display:flex;flex-direction:column;gap:16px}
.bk-u{align-self:flex-end;max-width:78%;background:#f4f4f5;border-radius:14px;padding:11px 15px;
  font-size:14.6px;color:#111;line-height:1.5}
.bk-u .t{display:block;margin-top:5px;font-size:11.5px;color:#9a9aa2}
.bk-a{max-width:90%;font-size:14.8px;line-height:1.62;color:#111}
.bk-a p{margin:0}
.bk-a .l{margin-top:9px}
.bk-a .l b{font-weight:600}
.caret{display:inline-block;width:2px;height:1.05em;background:#6b4df6;vertical-align:-2px;
  margin-left:2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.dots{display:inline-flex;gap:4px;align-items:center;height:20px}
.dots i{width:6px;height:6px;border-radius:50%;background:#c9c9cf;animation:bob 1.1s infinite}
.dots i:nth-child(2){animation-delay:.15s}
.dots i:nth-child(3){animation-delay:.3s}
@keyframes bob{0%,60%,100%{opacity:.35}30%{opacity:1}}
.bk-in{margin:0 18px 18px;border:1px solid #e3e0f5;border-radius:12px;padding:14px 16px;
  color:#9a9aa2;font-size:14.5px;display:flex;align-items:center;gap:10px}
.bk-in .send{margin-left:auto;width:30px;height:30px;border-radius:50%;background:#f0eefb;
  display:grid;place-items:center;color:#6b4df6;font-size:15px}
.bk-cap{color:var(--dim);font-size:12.2px;margin-top:12px;text-align:center}

@media(prefers-reduced-motion:reduce){
  .ticker div,.caret,.dots i{animation:none}
}

.article{padding:64px 0 32px}
.article h1{font-size:clamp(2rem,4.4vw,2.8rem);max-width:20ch;margin:0;text-align:left}
.meta{color:var(--dim);font-size:13.4px;margin-top:16px}
.prose{padding-bottom:88px}
.prose p,.prose ul{color:var(--mut);font-size:16px;margin-top:17px;line-height:1.75}
.prose h2{font-size:1.35rem;margin-top:44px;max-width:none;color:var(--fg)}
.prose ul{padding-left:22px}
.prose li{margin-top:8px}
.prose b,.prose strong{color:var(--fg);font-weight:500}
.prose a{color:var(--acc)}
.prose table{width:100%;border-collapse:collapse;margin-top:22px;font-size:14.4px}
.prose th,.prose td{border:1px solid var(--line);padding:10px 13px;text-align:left;vertical-align:top}
.prose th{background:var(--bg2);color:var(--fg);font-weight:500}
.prose td{color:var(--mut)}

footer{border-top:1px solid var(--line);padding:56px 0 72px;color:var(--dim);font-size:13px}
footer .fl{display:flex;flex-wrap:wrap;align-items:center;gap:24px;margin-bottom:28px}
footer a{color:var(--mut);text-decoration:none;transition:.15s}
footer a:hover{color:var(--fg)}
footer .sp2{flex:1;min-width:0}
footer .soon{color:var(--dim);opacity:.7}
@media(max-width:700px){footer .sp2{display:none}}
footer p{max-width:76ch;margin-top:13px;line-height:1.65}
footer b{color:var(--mut);font-weight:500}

/* ── Small screens ──────────────────────────────────────────────────────────
   The layout already reflows: fluid type, single-column grids under 820px,
   and no fixed widths. What it lacked was proportion. Desktop spacing of
   88px between sections is generous on a monitor and absurd on a phone, where
   it becomes a screenful of nothing between one sentence and the next. These
   rules shrink the gaps, not the content. */

@media(max-width:760px){
  section{padding:56px 0}
  .hero{padding:56px 0 44px}
  .ticker{margin-top:48px}
  .card{padding:22px}
  .grid{margin-top:32px}
  .article{padding:44px 0 24px}
  .prose{padding-bottom:56px}
  .prose h2{margin-top:34px}
  footer{padding:44px 0 56px}

  /* Tap targets: text links sized for a mouse are hard to hit with a thumb. */
  footer .fl{gap:18px 22px}
  footer .fl a{padding:4px 0}

  /* The chat replica is taller than it needs to be once the text wraps. */
  .bk-body{min-height:0;padding:18px 14px}
  .bk-u{max-width:88%}
  .bk-a{max-width:100%}
}

@media(max-width:400px){
  /* At 320–390px, 24px of padding each side eats a tenth of the screen. */
  .wrap,.narrow{padding:0 18px}
  .card{padding:19px}
  .code{padding:14px 15px;font-size:12.6px}
  .copy{flex-direction:column}
  .copy button{padding:12px}
}

/* A table cannot reflow: its columns have a minimum width, so on a narrow
   screen it either overflows the page or squeezes text into single letters.
   Let it scroll horizontally on its own instead of dragging the layout with
   it — the page stays put and the table stays readable. */
@media(max-width:760px){
  .prose table{display:block;overflow-x:auto;white-space:nowrap;font-size:13.6px}
  .prose th,.prose td{padding:9px 11px}
}

/* ── Orange ─────────────────────────────────────────────────────────────────
   The logo has three colours and the site was using one. Purple carried
   everything, so nothing stood out inside it. Orange (#FF613D — the square at
   the centre of the mark, and Bankr's own accent) is now the second voice:
   it marks live state and the current page, and nothing else. A colour used
   for two unrelated jobs stops meaning either. */
:root{ --orange:#FF613D; --orange-soft:rgba(255,97,61,.13); --yellow:#FFE143; }

/* Beta pill — the dot reads as a status light, so it takes the live colour. */
.pill{border-color:rgba(255,97,61,.35);background:var(--orange-soft);color:#f0b9a8}
.dot{background:var(--orange);box-shadow:0 0 0 3px rgba(255,97,61,.18)}

/* Nav — links were 14.5px grey text with no shape, indistinguishable from
   body copy. Now they sit in their own row of pills, and the active page is
   marked in orange so you always know where you are. */
nav{gap:8px}
nav .sp{flex:1}
nav a.nl{
  color:var(--mut);font-size:14px;font-weight:500;letter-spacing:-.01em;
  padding:8px 14px;border-radius:999px;border:1px solid transparent;
  transition:color .15s,background .15s,border-color .15s;
}
nav a.nl:hover{color:var(--fg);background:var(--card);border-color:var(--line)}
nav a.nl.cta-nav{
  color:var(--orange);border-color:rgba(255,97,61,.42);background:var(--orange-soft);
}
nav a.nl.cta-nav:hover{background:rgba(255,97,61,.2);color:#ff8a6b}
nav a.nl[aria-current="page"]{color:var(--fg);background:var(--card);border-color:var(--line)}
.logo{font-size:17.5px;margin-right:6px}

/* Eyebrows alternate: purple for what it is, orange for what it does. */
.eyebrow.warm{color:var(--orange)}

/* Capability chips — one shared class instead of the same inline style
   repeated thirteen times, so a change lands everywhere at once. */
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px;justify-content:center}
.chip{border:1px solid var(--line);background:var(--card);color:var(--mut);
  border-radius:999px;padding:8px 15px;font-size:13.4px;transition:.15s}
.chip:hover{border-color:#2e3944;color:var(--fg)}
.chip.hot{border-color:rgba(255,97,61,.42);background:var(--orange-soft);color:#f0b9a8}
.chip.cool{border-color:var(--acc);background:rgba(167,139,250,.12);color:var(--acc2)}

/* Cards: a hairline of colour on the step number, so the three steps read as
   a sequence rather than three identical boxes. */
.card .num{color:var(--orange);opacity:.85}
.card:hover{border-color:#2e3944}
.card{transition:border-color .15s}

/* Footer social row */
footer .soc{display:inline-flex;align-items:center;gap:7px}
footer .soc svg{width:14px;height:14px;display:block;flex:none;opacity:.75}
footer .soc:hover svg{opacity:1}
footer .chain{color:var(--dim);font-size:12px;border:1px solid var(--line);
  border-radius:999px;padding:2px 9px;margin-left:2px}

@media(max-width:760px){
  nav{gap:5px}
  nav a.nl{padding:7px 11px;font-size:13.4px}
  .logo{font-size:16.5px;margin-right:2px}
}

/* The install prompt, framed as something you say to bankrbot rather than a
   loose line of text: the header names the recipient, so it is obvious the
   line goes into a chat and not into a terminal. */
.prompt{border:1px solid rgba(255,97,61,.3);background:var(--bg2);border-radius:12px;
  overflow:hidden;margin-top:14px}
.prompt-h{display:flex;align-items:center;gap:9px;padding:11px 16px;
  background:var(--orange-soft);border-bottom:1px solid rgba(255,97,61,.22);
  color:#f0b9a8;font-size:12.6px;font-weight:500;letter-spacing:.02em}
.prompt-h img{border-radius:5px;display:block}
.prompt .code{border:0;background:transparent;margin:0;padding:16px 18px;color:var(--acc2)}

/* Monthly lookups — informative, not a price table.
   Deliberately quieter than the feature sections: it answers a question the
   reader has, it is not a reason to be here. Orange marks only the free
   number, because that is the one that applies to everyone reading it. */
.limits{margin-top:34px;border:1px solid var(--line);background:var(--bg2);
  border-radius:var(--r);padding:22px 24px}
.limits-h{display:flex;align-items:center;gap:8px;color:var(--dim);font-size:11.5px;
  letter-spacing:.13em;text-transform:uppercase;margin-bottom:16px}
.limits-h svg{border-radius:5px;display:block;flex:none}
.limits-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.lim{display:flex;flex-direction:column;gap:4px}
.lim-n{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.lim b{font-size:26px;font-weight:600;letter-spacing:-.02em;color:var(--fg);line-height:1}
.lim i{font-style:normal;color:var(--dim);font-size:12px;letter-spacing:.01em}
.lim:first-child b{color:var(--orange)}
.lim span{color:var(--mut);font-size:13.2px;line-height:1.45}
.limits-n{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  color:var(--dim);font-size:12.6px;margin-top:18px;border-top:1px solid var(--line);
  padding-top:14px;line-height:1.55}
.limits-n .reset{flex:none;color:var(--mut);white-space:nowrap}
@media(max-width:620px){
  .limits-row{grid-template-columns:1fr;gap:16px}
  .limits{padding:19px 18px}
  .limits-n{flex-direction:column;gap:9px}
}


/* Contract address box before launch, and the X button.
   A disabled Copy is deliberate: an address field you can copy from, holding
   nothing, invites someone to paste an empty string and believe they have the
   contract. Dead until there is something real in it. */
.copy input::placeholder{color:#3d4750}
.copy button:disabled{opacity:.4;cursor:not-allowed}
.copy button:disabled:hover{border-color:var(--line)}
.xbtn svg{width:15px;height:15px;display:block;flex:none}