/* ---------------------------------------------------------------------------
   public/assets/css/site.css
   ---------------------------------------------------------------------------
   The marketing pages: index.php (the landing page), how-it-works.php,
   networks.php, pricing.php, support.php, under-the-hood.php. Loaded AFTER
   assets/css/style.css, which still supplies the fonts, the colour variables,
   the bug-report footer, the chat widget and the tip panels. This file only
   adds the landing layout on top and resets the two things style.css sets
   for the centred form pages that a full-width page cannot live with (the
   body padding and the 560px column).

   WHY A SEPARATE FILE AND NO <style> BLOCKS. The CSP in
   includes/security_headers.php allows inline style ATTRIBUTES but not
   inline <style> ELEMENTS (style-src-elem 'self'), so every rule these pages
   need has to live in a stylesheet served from here. Inline style="..." is
   used sparingly in the pages for one-off sizes; anything repeated is a
   class below.

   Mobile first would be the textbook order; these pages were designed at
   1440px and cut down, so the breakpoints below remove columns rather than
   add them. 1024px drops the two-column heroes to one, 800px folds the
   grids, 560px is the phone.
   --------------------------------------------------------------------------- */

body.site-page {
  padding: 0;
  background: var(--bg);
}

.site { width: 100%; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* style.css sizes these for the 460px form card; the marketing pages need
   the plain versions. Scoped to .site so the form pages are untouched.
   :where() keeps the reset at class specificity (0,1,0): written as
   `.site .card` it outranked every component class below (.stat, .diagram,
   .side-card ...) and stripped their padding - bug reports 1918, 1921,
   1923, 1926 were all that one rule. */
:where(.site) .card { width: auto; max-width: none; padding: 0; box-shadow: none; }
.site .muted { font-size: inherit; line-height: inherit; }
.site .mono { font-size: inherit; word-break: normal; }
/* Scoped low on purpose, like .card above: at (0,1,1) the reset outranked
   style.css's .tip-mark (0,1,0) and turned the "?" help marker inline on
   the terms and privacy pages. :where() keeps the scope and drops the
   specificity to (0,0,1), so the component's own rule wins again. */
:where(.site) label { display: inline; margin: 0; }
.site button { width: auto; margin-top: 0; padding: 0 20px; font-size: 15px; }
.site h1 { margin: 0; }

.site a { color: var(--accent); text-decoration: none; }
.site a:hover { color: var(--accent-dim); }
.site h1, .site h2, .site h3, .site p { margin: 0; }
.mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.muted { color: var(--text-muted); }

/* ---- header ---------------------------------------------------------- */
.site-header { border-bottom: 1px solid #161c18; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
.site-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text) !important; font-weight: 700; font-size: 19px; letter-spacing: 0.02em; }
.site-brand .glyph { width: 30px; height: 30px; flex: none; display: inline-flex; }
.site-brand .glyph svg { width: 30px; height: 30px; }
.site-nav { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.site-nav a { color: #b7c7be; font-size: 15px; font-weight: 500; }
.site-nav a:hover, .site-nav a.on { color: var(--text); }
.site-nav .btn-nav { color: var(--accent-text-on); }
.site-nav .btn-nav:hover { color: var(--accent-text-on); }

/* ---- buttons ---------------------------------------------------------- */
.btn-primary, .btn-ghost, .btn-nav {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px; font-weight: 600; font-family: inherit; cursor: pointer; white-space: nowrap;
  text-decoration: none;
}
.btn-primary { height: 52px; padding: 0 28px; background: var(--accent); color: var(--accent-text-on) !important; font-size: 16px; border: 0; }
.btn-primary:hover { background: var(--accent-dim); }
.btn-ghost { height: 52px; padding: 0 28px; background: var(--surface); color: var(--text) !important; font-size: 16px; border: 1px solid var(--border-strong); }
.btn-ghost:hover { border-color: var(--accent); }
.btn-nav { height: 42px; padding: 0 22px; border-radius: 10px; background: var(--accent); color: var(--accent-text-on) !important; font-size: 15px; }
.btn-nav:hover { background: var(--accent-dim); }
.btn-sm { height: 46px; padding: 0 20px; }

/* ---- type ------------------------------------------------------------- */
.eyebrow { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; }
.h-page { font-size: 60px; line-height: 1.04; font-weight: 700; letter-spacing: -0.025em; }
.h-hero { font-size: 66px; line-height: 1.02; font-weight: 700; letter-spacing: -0.025em; }
.h-sec { font-size: 40px; line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; }
.h-sec.sm { font-size: 34px; }
.h-sub { font-size: 22px; font-weight: 600; }
.lead { font-size: 19px; line-height: 1.55; color: #b7c7be; }
.body { font-size: 16px; line-height: 1.6; color: #b7c7be; }

/* ---- layout blocks ---------------------------------------------------- */
.sec { padding: 0 0 80px; }
.sec-head { display: flex; flex-direction: column; gap: 12px; max-width: 860px; margin-bottom: 32px; }
.hero { padding: 80px 0 56px; display: grid; grid-template-columns: minmax(0, 760px) minmax(0, 1fr); gap: 40px; align-items: end; position: relative; }
.hero.single { grid-template-columns: minmax(0, 900px); }
.hero.home { padding: 72px 0 56px; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); align-items: center; }
.hero-text { display: flex; flex-direction: column; gap: 18px; position: relative; }
.hero.home .hero-text { gap: 26px; }
.hero-side { position: relative; display: flex; justify-content: flex-end; }
.glow { position: absolute; pointer-events: none; filter: blur(22px); border-radius: 50%; }
/* The glows and the hero illustration deliberately poke past the content
   column, and on a 1100-1300px laptop that reached past the viewport and
   gave the whole page a horizontal scrollbar. Clip, not hidden: clip does
   not make .site a scroll container, so sticky and anchors are unaffected. */
.site, body.with-chrome { overflow-x: clip; }
.glow.g1 { right: -60px; top: -40px; width: 560px; height: 420px; background: radial-gradient(closest-side, rgba(0,227,154,0.16), rgba(0,227,154,0) 70%); }
.glow.g2 { right: 0; top: 300px; width: 420px; height: 360px; background: radial-gradient(closest-side, rgba(0,140,255,0.14), rgba(0,140,255,0) 70%); }

.g2, .g3, .g4 { display: grid; gap: 20px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g8 { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; }
.gap-16 { gap: 16px; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; }
.fcard { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.fcard h3 { font-size: 20px; font-weight: 600; }
.fcard p { color: var(--text-muted); font-size: 15px; line-height: 1.55; }
.fcard.g18 { gap: 18px; }
.fcard.g12 { gap: 12px; }
.shot { background: var(--bg); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; position: relative; padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.shot.tall { min-height: 240px; padding: 22px; gap: 10px; }
.shot.glow-tr { background: radial-gradient(circle at 80% 0%, rgba(0,227,154,0.12), transparent 55%), var(--bg); }
.shot.center { align-items: center; justify-content: center; }
.row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; gap: 12px; }
.row.boxed { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.row .right { text-align: right; }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: 12px; color: #b7c7be; white-space: nowrap; }
.pill.ok { color: var(--accent); border-color: var(--accent); }
.pill.warn { color: #ffb347; border-color: #ffb347; }
.pill.sm { height: 22px; font-size: 11px; }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-size: 14px; font-weight: 600; }
.chips { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.dot.on { background: var(--accent); }
.mark { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; letter-spacing: 0.02em; flex: none; overflow: hidden; }
.mark img { width: 30px; height: 30px; display: block; }
.mark.accent { background: rgba(0,227,154,0.12); color: var(--accent); }
.mark.soft { background: var(--surface-2); color: var(--text); }
.tile { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.tile b { display: block; }
.tile .sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.stat { padding: 22px 24px; display: flex; flex-direction: column; gap: 6px; }
.stat .n { font-size: 36px; font-weight: 700; line-height: 1.1; }
.stat .l { font-size: 13px; color: var(--text-muted); }
.stat .s { font-size: 12px; color: var(--text-muted); }
.field { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; font-size: 15px; color: var(--text); width: 100%; box-sizing: border-box; font-family: inherit; }
.field::placeholder { color: var(--text-muted); }
.site textarea.field { resize: vertical; min-height: 96px; line-height: 1.5; }
.site select.field { appearance: none; -webkit-appearance: none; }
.label { font-size: 13px; color: var(--text-muted); }
/* The sign-in notice and the partner dashboard (api-login.php,
   api-dashboard.php). .notice is the one thing a person reads when a
   sign-in fails, so it gets a colour and a border rather than being another
   line of muted text they scan past. */
.notice { border-radius: 10px; padding: 12px 14px; font-size: 14px; line-height: 1.5; border: 1px solid var(--border); background: var(--surface-2); color: #b7c7be; }
.notice.bad { border-color: #ff4d52; color: #ffb4b6; background: rgba(255,77,82,0.08); }
.notice.warn { border-color: #ffb347; color: #ffd8a1; background: rgba(255,179,71,0.08); }
.notice.ok { border-color: var(--accent); color: var(--accent); background: rgba(0,227,154,0.07); }
/* The demo banner sits above everything on the dashboard and must not be
   mistakable for chrome: full width, amber, and it says what it is. */
.demo-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border: 1px dashed #ffb347; background: rgba(255,179,71,0.07); color: #ffd8a1; border-radius: 12px; padding: 12px 16px; font-size: 14px; line-height: 1.5; }
.demo-bar b { color: #ffb347; }
.kv { display: flex; flex-direction: column; gap: 10px; }
.kv .row { align-items: baseline; }
.kv .row span:first-child { color: var(--text-muted); font-size: 13px; }
.num { width: 56px; height: 56px; border-radius: 16px; background: rgba(0,227,154,0.12); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 16px; flex: none; }
.step { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 20px; }
.steps { display: flex; flex-direction: column; gap: 36px; max-width: 900px; }
.faq { border-top: 1px solid var(--border); padding: 22px 0; display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 32px; }
.faq h3 { font-size: 19px; font-weight: 600; }
.faq p { font-size: 15px; line-height: 1.6; color: #b7c7be; }
.faqs { border-bottom: 1px solid var(--border); }
.bars { display: flex; flex-direction: column; gap: 10px; }
.bar { display: grid; grid-template-columns: 110px minmax(0, 1fr) 70px; align-items: center; gap: 14px; font-size: 14px; }
.bar .track { height: 12px; background: var(--surface-2); border-radius: 6px; overflow: hidden; }
.bar .fill { height: 100%; border-radius: 6px; background: var(--accent); }
.bar .fill.hot { background: linear-gradient(90deg, var(--accent), #ffb347); }
.progress { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.progress span { height: 6px; border-radius: 4px; background: var(--border); display: block; }
.progress span.on { background: var(--accent); }
.dotted { background: radial-gradient(#1c261f 1.2px, transparent 1.2px); background-size: 22px 22px; border-top: 1px solid #161c18; border-bottom: 1px solid #161c18; padding: 96px 0; }
.dotted .fcard, .dotted .card { background: rgba(16,21,18,0.92); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; }
.two.center { align-items: center; gap: 48px; }
.cta { padding: 24px 0 96px; }
.cta .card { padding: 48px 56px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center; background: radial-gradient(circle at 0% 0%, rgba(0,227,154,0.14), transparent 50%), var(--surface); }
.cta .btn-primary { height: 56px; padding: 0 36px; font-size: 17px; }
.diagram { padding: 28px; }
.diagram svg, .illus svg { width: 100%; height: auto; display: block; }
.sample-note { font-size: 12px; color: var(--text-muted); }
.legal h3 { font-size: 22px; font-weight: 600; }
.legal p, .legal li { font-size: 16px; line-height: 1.65; color: #b7c7be; }
.toc a { color: #b7c7be; font-size: 15px; display: block; padding: 8px 0; border-bottom: 1px solid #161c18; }
.toc a:hover { color: var(--accent); }
.ill-tiles { position: absolute; top: 40px; display: flex; flex-direction: column; gap: 44px; }
.ill-tiles .tile { width: 76px; height: 60px; padding: 0; align-items: center; justify-content: center; gap: 4px; }
.ill-tiles .tile b { font-size: 13px; }
.ill-tiles .tile span { font-size: 11px; color: var(--text-muted); } /* 10px -> 11px: the device sweep of 30 Sept flagged it as the only text under 11px */
.ill-tiles .tile img { width: 22px; height: 22px; }
.hero-illus { position: relative; width: 600px; max-width: 100%; height: 470px; }
.hero-illus > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-illus .tokens { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.hero-note { display: flex; gap: 22px; font-size: 13px; color: var(--text-muted); align-items: center; flex-wrap: wrap; }
.hero-note .sep { width: 1px; height: 14px; background: var(--border); }
.hero-note b { color: var(--text); }
.svg-state { fill: var(--surface); stroke: var(--border-strong); stroke-width: 1.5; }
.svg-state-t { fill: var(--text); font-family: 'JetBrains Mono', monospace; font-size: 12px; text-anchor: middle; }
.svg-edge { fill: none; stroke: var(--border-strong); stroke-width: 1.5; }
.svg-edge-g { fill: none; stroke: var(--accent); stroke-width: 2; }
.svg-box { fill: var(--surface); stroke: var(--border); stroke-width: 1.5; }
.svg-t { fill: var(--text); font-family: 'Space Grotesk', sans-serif; font-size: 15px; font-weight: 600; text-anchor: middle; }
.svg-s { fill: var(--text-muted); font-family: 'Space Grotesk', sans-serif; font-size: 12px; text-anchor: middle; }
.svg-m { fill: var(--text-muted); font-family: 'JetBrains Mono', monospace; font-size: 11px; text-anchor: middle; }
.quote-card { display: flex; flex-direction: column; gap: 12px; }
.quote-card .who { display: flex; gap: 10px; align-items: center; font-size: 13px; font-weight: 600; }
.quote-card .who .avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #1c261f, #35473d); flex: none; }
.quote-card p { color: #b7c7be; font-size: 14px; line-height: 1.55; }
.chat-bubble { max-width: 80%; border-radius: 12px; padding: 10px 12px; font-size: 13px; line-height: 1.5; }
.chat-bubble.them { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.chat-bubble.me { align-self: flex-end; background: rgba(0,227,154,0.12); border: 1px solid rgba(0,227,154,0.3); border-bottom-right-radius: 4px; }
.refuse { display: flex; gap: 10px; align-items: flex-start; background: rgba(255,77,82,0.08); border: 1px solid rgba(255,77,82,0.35); border-radius: 10px; padding: 12px 14px; font-size: 13px; line-height: 1.5; }
.refuse .x { color: #ff8085; }
.side-card { padding: 22px; display: flex; flex-direction: column; gap: 10px; width: 460px; max-width: 100%; }

/* ---- colour: icon tiles and tinted cards ------------------------------ */
.icon-tile { width: 48px; height: 48px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.tint-green  { background: rgba(0,227,154,0.14);  color: #00e39a; }
.tint-blue   { background: rgba(77,162,255,0.16); color: #7fbcff; }
.tint-purple { background: rgba(153,69,255,0.18); color: #c4a3ff; }
.tint-amber  { background: rgba(255,179,71,0.16); color: #ffb347; }
.tint-red    { background: rgba(255,77,82,0.16);  color: #ff8085; }
.tint-teal   { background: rgba(0,200,220,0.16);  color: #5ee0f0; }
.tint-pink   { background: rgba(255,105,180,0.16); color: #ff8fc8; }
.fcard.glow-green  { background: radial-gradient(circle at 100% 0%, rgba(0,227,154,0.14), transparent 55%), var(--surface); }
.fcard.glow-blue   { background: radial-gradient(circle at 100% 0%, rgba(77,162,255,0.16), transparent 55%), var(--surface); }
.fcard.glow-purple { background: radial-gradient(circle at 100% 0%, rgba(153,69,255,0.18), transparent 55%), var(--surface); }
.fcard.glow-amber  { background: radial-gradient(circle at 100% 0%, rgba(255,179,71,0.16), transparent 55%), var(--surface); }
.fcard.glow-red    { background: radial-gradient(circle at 100% 0%, rgba(255,77,82,0.14), transparent 55%), var(--surface); }
.fcard.glow-teal   { background: radial-gradient(circle at 100% 0%, rgba(0,200,220,0.16), transparent 55%), var(--surface); }
.shot.bg-green  { background: linear-gradient(135deg, rgba(0,227,154,0.22), rgba(0,227,154,0.04)), var(--bg); }
.shot.bg-blue   { background: linear-gradient(135deg, rgba(77,162,255,0.24), rgba(77,162,255,0.04)), var(--bg); }
.shot.bg-amber  { background: linear-gradient(135deg, rgba(255,179,71,0.24), rgba(255,179,71,0.04)), var(--bg); }
.shot.bg-purple { background: linear-gradient(135deg, rgba(153,69,255,0.26), rgba(153,69,255,0.04)), var(--bg); }
.shot.bg-teal   { background: linear-gradient(135deg, rgba(0,200,220,0.22), rgba(0,200,220,0.04)), var(--bg); }
.shot.bg-red    { background: linear-gradient(135deg, rgba(255,77,82,0.22), rgba(255,77,82,0.04)), var(--bg); }
.big { font-size: 36px; font-weight: 700; line-height: 1.1; }
.chain-card { position: relative; overflow: hidden; }
.chain-card .watermark { position: absolute; right: -18px; top: -18px; width: 140px; height: 140px; opacity: 0.08; pointer-events: none; }
.chain-card .watermark img { width: 100%; height: 100%; }
.status-strip { height: 6px; border-radius: 4px; background: var(--border); overflow: hidden; }
.status-strip span { display: block; height: 100%; border-radius: 4px; }

/* ---- motion ----------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: var(--d, 0ms); }
.reveal.in { opacity: 1; transform: none; }
.fcard, .tile, .card.stat { transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }
.fcard:hover, .tile:hover, .card.stat:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: 0 18px 40px -24px rgba(0,227,154,0.35); }
.btn-primary, .btn-nav { transition: transform 0.15s ease, background 0.15s ease; }
.btn-primary:hover, .btn-nav:hover { transform: translateY(-1px); }
.wire { stroke-dasharray: 6 10; animation: wire-flow 2.4s linear infinite; }
.wire.back { animation-direction: reverse; }
@keyframes wire-flow { to { stroke-dashoffset: -32; } }
.packet { animation: packet-pulse 1.8s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes packet-pulse { 0%, 100% { opacity: 0.4; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.3); } }
.hub-ring { animation: ring-breathe 4s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes ring-breathe { 0%, 100% { opacity: 0.5; transform: scale(0.97); } 50% { opacity: 1; transform: scale(1.03); } }
.dot.on { animation: dot-blink 2s ease-in-out infinite; }
@keyframes dot-blink { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(0,227,154,0.5); } 50% { opacity: 0.7; box-shadow: 0 0 0 5px rgba(0,227,154,0); } }
.progress span.on { background: linear-gradient(90deg, var(--accent-dim), var(--accent), var(--accent-dim)); background-size: 200% 100%; animation: shimmer 2.2s linear infinite; }
.bar .fill { animation: grow 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) both; transform-origin: left; }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes shimmer { to { background-position: -200% 0; } }
.glow.g1 { animation: glow-drift 9s ease-in-out infinite alternate; }
.glow.g2 { animation: glow-drift 11s ease-in-out infinite alternate-reverse; }
@keyframes glow-drift { from { transform: translate(0, 0); } to { transform: translate(-30px, 24px); } }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .wire, .packet, .hub-ring, .dot.on, .progress span.on, .bar .fill, .glow.g1, .glow.g2 { animation: none; }
  .fcard:hover, .tile:hover, .card.stat:hover, .btn-primary:hover, .btn-nav:hover { transform: none; }
}

/* ---- the chrome on the form pages (swap, referral, terms, privacy) ----
   Those pages keep style.css's centred layout and body padding; only the
   header (and, on the legal pages, the footer) is shared. The header bleeds
   past the body's 16px side padding so it spans the viewport like it does
   on the marketing pages. Nothing else in this file applies there: the
   resets are scoped to .site / body.site-page on purpose. */
body.with-chrome { padding-top: 0; }
body.with-chrome > .site-header { margin: 0 -16px 28px; }
body.with-chrome > .site-footer { margin: 40px -16px -32px; }
/* (The footer's own .wrap gutter applies here too - 24 px, 16 at 800 and
   under - so its text lines up with the header's. It was a flat 16 px until
   30 Sept, 8 px out of line with the header on tablets and desktops.) */
/* Outside .site the browser's default underline applies to every link, and
   the nav and footer are outside .site on these pages. Same reset .site a
   gives the marketing pages, scoped to the chrome only so the form's own
   underlined links stay as they were. */
body.with-chrome .site-header a, body.with-chrome .site-footer a { text-decoration: none; }
.legal-body h3 { font-size: 22px; font-weight: 600; margin: 28px 0 10px; color: var(--text); }
.legal-body h3:first-child { margin-top: 0; }
.legal-body p, .legal-body li { font-size: 16px; line-height: 1.65; color: #b7c7be; margin: 0 0 12px; }
.legal-body ul { margin: 0 0 12px; padding-left: 22px; }
.legal-body code { font-family: 'JetBrains Mono', monospace; font-size: 14px; background: var(--surface-2); padding: 2px 6px; border-radius: 6px; }
.legal-body a { color: var(--accent); }
.legal-body strong { color: var(--text); }
.api-code { margin: 0; padding: 16px; font-size: 12px; line-height: 1.6; color: #b7c7be; white-space: pre; overflow: auto; font-family: 'JetBrains Mono', monospace; }
.api-head { padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.api-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.api-table th, .api-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.api-table th { color: var(--text-muted); font-weight: 600; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.api-table code { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--accent); }
.method { display: inline-block; min-width: 46px; text-align: center; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; padding: 3px 6px; border-radius: 6px; }
.method.get { background: rgba(0,227,154,0.14); color: var(--accent); }
.method.post { background: rgba(77,162,255,0.16); color: #7fbcff; }
.method.hook { background: rgba(255,179,71,0.16); color: #ffb347; }

/* ---- footer ----------------------------------------------------------- */
.site-footer { margin-top: auto; border-top: 1px solid #161c18; padding: 40px 0 32px; }
.site-footer .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.site-footer .col { display: flex; flex-direction: column; gap: 10px; }
.site-footer .col a { color: var(--text-muted); font-size: 14px; }
.site-footer .col a:hover { color: var(--text); }
.site-footer .blurb { font-size: 13px; line-height: 1.5; max-width: 340px; color: var(--text-muted); }
.site-footer .bug-report-footer { grid-column: 1 / -1; margin: 16px 0 0; padding-top: 16px; border-top: 1px solid #161c18; text-align: left; }

/* Mobile nav parts. Hidden on desktop; the breakpoint block below turns
   them on. The checkbox is never shown anywhere - the label is the control. */
.site-nav-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.site-actions { display: none; align-items: center; gap: 10px; }
.site-burger { display: inline-flex; margin: 0; flex-direction: column; justify-content: center; gap: 4px; width: 44px; height: 40px; padding: 0 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); cursor: pointer; box-sizing: border-box; }
.site-burger span { display: block; height: 2px; border-radius: 2px; background: var(--text); transition: transform 0.2s, opacity 0.2s; }
.site-burger em { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.site-nav-toggle:checked ~ .site-actions .site-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-nav-toggle:checked ~ .site-actions .site-burger span:nth-child(2) { opacity: 0; }
.site-nav-toggle:checked ~ .site-actions .site-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.shot-code { font-size: 22px; font-weight: 500; }
.chain-grid { display: grid; grid-template-columns: repeat(4, 96px); gap: 12px; justify-content: end; max-width: 100%; }
/* A long URL or identifier in running text must wrap rather than push the
   page wider than the phone; 320px is the width that found this. */
.site code, .lead code, .body code { overflow-wrap: anywhere; }

/* ---- breakpoints ------------------------------------------------------ */
@media (max-width: 1100px) {
  .h-hero { font-size: 54px; }
  .h-page { font-size: 48px; }
  .hero-illus { width: 100%; }
}
@media (max-width: 1400px) {
  /* Laptops. The hero's text column used to take 760px whatever was left,
     so on a 1280 screen the illustration (600px) and the side cards (480px)
     were squeezed to under 300px and their right-hand tiles fell off the
     page. Give the picture its width and let the text take the rest. */
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 480px); }
  .hero.home { grid-template-columns: minmax(0, 1fr) minmax(0, 600px); }
  .hero.single { grid-template-columns: minmax(0, 900px); }
}
@media (max-width: 1100px) {
  .site-nav { gap: 16px; }
  .site-nav a { font-size: 14px; }
}
@media (min-width: 901px) and (max-width: 1000px) {
  /* Ten items with Compare (12 Oct 2026): between 901 and ~970 px the Swap
     button wrapped to a second row. Measured, not guessed. */
  .site-nav { gap: 10px; }
  .site-nav a { font-size: 13px; }
}
@media (max-width: 900px) {
  /* The folded menu, for phones and tablets held upright (an iPad is 768
     or 834 wide, and eight links plus Swap wrapped to two rows there). The
     header row is brand + actions; the nav drops below as a full-width
     column when the burger is ticked, and stays in the document flow so it
     pushes the page down rather than covering it. */
  .site-actions { display: flex; }
  .site-nav { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 4px 0 10px; }
  .site-nav a { font-size: 16px; padding: 12px 2px; border-top: 1px solid #161c18; }
  .site-nav .btn-nav { display: none; }
  .site-nav-toggle:checked ~ .site-nav { display: flex; }
}
@media (max-width: 1024px) {
  .hero, .hero.home, .two, .two.center { grid-template-columns: minmax(0, 1fr); }
  .hero-side { justify-content: flex-start; }
  .hero-illus { height: auto; min-height: 420px; }
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g8 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .site-footer .wrap { grid-template-columns: 1fr 1fr; }
  .faq { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .glow { display: none; }
}
@media (max-width: 800px) {
  .g2, .g3, .g4 { grid-template-columns: minmax(0, 1fr); }
  .g8 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .h-hero { font-size: 42px; }
  .h-page { font-size: 40px; }
  .h-sec, .h-sec.sm { font-size: 30px; }
  .lead { font-size: 17px; }
  .hero { padding: 48px 0 40px; }
  .sec { padding-bottom: 56px; }
  .dotted { padding: 56px 0; }
  .cta .card { grid-template-columns: minmax(0, 1fr); padding: 32px 28px; }
  .site-header .wrap { min-height: 60px; }
  .api-table, .api-table tbody, .api-table tr, .api-table td { display: block; width: auto; }
  .api-table thead { display: none; }
  .api-table tr { padding: 10px 0; border-bottom: 1px solid var(--border); }
  .api-table td { padding: 2px 12px; border: 0; }
  .api-table td:first-child { display: inline-block; padding-right: 0; }
  .api-table td:nth-child(2) { display: inline-block; }
  .api-table td:nth-child(3) { padding-top: 6px; }
  .bar { grid-template-columns: 80px minmax(0, 1fr) 60px; }
  .step { grid-template-columns: 56px minmax(0, 1fr); gap: 14px; }
  .diagram { padding: 14px; }
  .hero-illus { min-height: 0; height: auto; display: flex; flex-wrap: wrap; gap: 8px; }
  .hero-illus > svg { display: none; }
  .ill-tiles { position: static; display: contents; }
  .ill-tiles .tile { width: calc(25% - 6px); height: 64px; }
  .hero-illus .tokens { position: static; margin-top: 12px; width: 100%; justify-content: flex-start; }
  /* The side gutter only (30 Sept 2026). This was `padding: 0 16px`, and as the
     shorthand it also set top and bottom to 0 - and it comes after .hero and
     .sec above, so on every phone each hero, section and call-to-action lost
     its vertical spacing and ran into the next one. tests/wrap_gutter_test.php. */
  .wrap { padding-left: 16px; padding-right: 16px; }
  /* May wrap on any phone, not only at 360 px and under (27 Sept 2026): with
     the side gutter back (the end of this file) the home page's column is
     32 px narrower, and at 361-379 px its hero pill and the five labels under
     the order card's progress bar ran past the window. Where they fit on one
     line they look the same (the pill's text moves under a pixel). */
  .progress + .row { flex-wrap: wrap; row-gap: 2px; }
  .hero-text .pill { white-space: normal; height: auto; min-height: 26px; padding: 4px 10px; line-height: 1.3; }
}
@media (max-width: 560px) {
  .site-footer .wrap { grid-template-columns: 1fr; }
  .h-hero { font-size: 36px; }
  .h-page { font-size: 34px; }
  .side-card { width: 100%; }
  .chain-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); justify-content: stretch; gap: 8px; }
  .shot-code { font-size: 17px; }
  .api-code { white-space: pre-wrap; word-break: break-all; font-size: 11px; }
}
@media (max-width: 360px) {
  /* The narrowest phones (320-360). The header row must not wrap - brand,
     Swap and Menu together were 306px on a 288px line. (The progress labels
     and the hero pill that may wrap moved to the 800 px block.) */
  .site-brand { font-size: 16px; gap: 8px; }
  .site-brand .glyph, .site-brand .glyph svg { width: 26px; height: 26px; }
  .site-header .wrap { gap: 8px; }
  .site-actions { gap: 8px; }
  .site-actions .btn-nav { padding: 0 14px; height: 36px; }
  .site-burger { width: 40px; height: 36px; }
}

/* ---- THE DEVICE SWEEP (30 Sept 2026) ----------------------------------------
   Every public page at 320-1920 px, looked at by eye. Each rule names what it
   fixes. (Placed before the gutter block below, which must stay last.) */

/* Headings break into even lines instead of leaving one word alone on the
   last line ("Ready when you / are"). A browser without it wraps as before. */
.h-hero, .h-page, .h-sec, .h-sub, .fcard h3, .card h3 { text-wrap: balance; }

/* A label-value row whose value wraps keeps the value on the right, instead
   of its second line jumping to the left ("held for a / human"). */
.site .row > span:last-child:not(:first-child) { text-align: right; }

/* The faint network logo in a network card's corner is a square image, so at
   8 % it showed as a hard-edged tinted square cut off by the card - Base's
   logo IS a blue square, and looked like a broken image. Fade it out round. */
.chain-card .watermark { -webkit-mask-image: radial-gradient(closest-side, #000 50%, transparent); mask-image: radial-gradient(closest-side, #000 50%, transparent); }

/* The home hero picture is drawn for 600 px (its right-hand tiles sit at a
   fixed left: 504px). Between 801 and 1024 px the hero is one column and the
   picture was stretched to the whole column, so those tiles landed on the
   logo in the middle. Keep it 600 px there, centred. */
@media (min-width: 801px) and (max-width: 1024px) {
  .hero-illus { width: 600px; height: 470px; margin-left: auto; margin-right: auto; }
}
/* Its token chips wrap to two rows in 600 px, and the first row sat on the
   bottom corners of the Ethereum and Sui tiles. Hang them just below the
   picture instead (the picture's own height, which its lines are drawn to,
   does not change). Phones lay the picture out as a grid and are unaffected. */
@media (min-width: 801px) {
  .hero-illus { margin-bottom: 40px; }
  .hero-illus .tokens { bottom: -40px; }
}

/* Home, "Send from anywhere": three columns (list, arrow, deposit card) do not
   fit in a card under about 520 px - "not needed" ran out of its box. Stack
   them there, arrow pointing down. */
@media (max-width: 560px), (min-width: 801px) and (max-width: 1100px) {
  .send-anywhere { grid-template-columns: minmax(0, 1fr) !important; }
  .send-anywhere > svg { transform: rotate(90deg); margin: 0 auto; }
}

/* The Refer section puts its card before its heading; stacked, the card read
   as the end of the section above. Heading first once it stacks. */
@media (max-width: 1024px) {
  #refer > .card { order: 2; }
}

/* How-it-works, the clock: "30 minutes" broke onto two lines on tablets,
   making its card taller than "3 hours" beside it. */
.clock-fig { font-size: 36px; font-weight: 700; line-height: 1.1; white-space: nowrap; }
@media (min-width: 801px) and (max-width: 1100px) {
  .clock-fig { font-size: 28px; }
}

@media (max-width: 560px) {
  /* The hero's "8 networks | watched every 15 s | 1 deposit address" wrapped
     with a divider left dangling at the end of a line. */
  .hero-note { gap: 6px 16px; }
  .hero-note .sep { display: none; }
  /* The networks page's tile grid filled 3/4 of the width and stopped. */
  .chain-grid { width: 100%; }
  /* API page code samples: scroll sideways like code, instead of breaking
     words in half ("chai / ns") and losing the indentation. */
  .api-code { white-space: pre; word-break: normal; overflow-wrap: normal; overflow-x: auto; }
}
@media (max-width: 560px), (min-width: 801px) and (max-width: 1100px) {
  /* The refund and order-life drawings (480-500 px wide, 12 px text) shrank
     to about 7 px text in a narrow card; keep them near full size and let
     them scroll inside it. */
  .shot.illus { overflow-x: auto; justify-content: flex-start; }
  .shot.illus > svg { min-width: 440px; }
}
@media (max-width: 800px) {
  /* "What talks to what" is drawn 1144 px wide; squeezed into a phone its
     labels were about 4 px tall. Keep it readable and let it scroll sideways
     inside its card. */
  .card.diagram { overflow-x: auto; }
  .card.diagram > svg { min-width: 900px; }
}

/* THE INSTALLED APP (30 Sept 2026, the owner): opened from the home screen it
   starts on swap.php (manifest start_url) and shows no top menu - just the
   logo. The footer keeps every link. A browser tab is unchanged. */
@media (display-mode: standalone), (display-mode: minimal-ui), (display-mode: fullscreen) {
  .site-nav, .site-burger, .site-actions .btn-nav, .site-nav-toggle { display: none !important; }
}

/* ACCESSIBILITY SCAN (30 Sept 2026, axe-core on the live pages).
   - Links inside running text were told apart by colour alone (.site a sets
     text-decoration: none), which fails WCAG 1.4.1 - the footer's "Report a
     bug" link, and the links in the API and sign-in paragraphs. They are
     underlined now; navigation, buttons, cards and the footer's link columns
     keep their plain look. The footer rule needs body + two classes to win
     over body.with-chrome .site-footer a on the swap and order pages.
   - .sr-only: text for screen readers only (the home page's section heading
     that sits between the page title and its cards). */
.site p a:not([class*="btn"]), .site li a:not([class*="btn"]), .site .muted a:not([class*="btn"]) { text-decoration: underline; text-underline-offset: 2px; }
body .site-footer .bug-report-footer a { text-decoration: underline; text-underline-offset: 2px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* THE SIDE GUTTER ON SECTIONS THAT ARE ALSO .wrap (27 Sept 2026).
   .hero, .hero.home, .sec and .cta set `padding` as a shorthand for their
   vertical spacing, and the shorthand also sets left/right to 0 - wiping the
   gutter .wrap gives the same element. On a phone the home page's hero text
   touched both edges of the screen (.hero.home outranks .wrap), and between
   801 and 1247 px every hero, section and call-to-action did. Above 1247 the
   1200 px column already sits 24 px or more inside the window, so the desktop
   layout is left exactly as it was. Last in the file on purpose: equal
   specificity, so it must come after .hero.home. (The home page's #pricing
   section lost its gutter to a style="padding: 96px 0" - it is now
   "wrap sec" and sets only its top and bottom inline.)
   tests/wrap_gutter_test.php. */
@media (max-width: 1247px) {
  .wrap.hero, .wrap.sec, .wrap.cta { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 800px) {
  .wrap.hero, .wrap.sec, .wrap.cta { padding-left: 16px; padding-right: 16px; }
}