/* BoreLine Pay - extracted stylesheet.
   Concatenated from the 7 <style> blocks of index.html IN SOURCE ORDER;
   later rules must keep overriding earlier ones. */


:root {
  --bg:       #080808;
  --bg2:      #0e0e0e;
  --bg3:      #141414;
  --border:   rgba(255,255,255,0.07);
  --border2:  rgba(255,255,255,0.12);
  --gold:     #F0B429;
  --gold2:    #E0A420;
  --gold-dim: rgba(240,180,41,0.12);
  --text:     #E8E0D2;
  --muted:    #C4BBAC;
  --faint:    #3A3530;
  --green:    #10B981;
  --red:      #EF4444;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }

html { scroll-behavior: smooth }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ── NOISE OVERLAY ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.025;
  pointer-events: none;
  z-index: 0;
}

/* ── TYPOGRAPHY ── */
.syne { font-family: 'Syne', sans-serif }
.mono { font-family: 'DM Mono', monospace }

/* ── SCROLL REVEAL ── */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .8s cubic-bezier(.16,.84,.44,1), transform .8s cubic-bezier(.16,.84,.44,1);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none }
/* Stagger children when a container reveals */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .7s cubic-bezier(.16,.84,.44,1), transform .7s cubic-bezier(.16,.84,.44,1);
}
.reveal-stagger.in > * { opacity: 1; transform: none }
.reveal-stagger.in > *:nth-child(2) { transition-delay: .1s }
.reveal-stagger.in > *:nth-child(3) { transition-delay: .2s }
.reveal-stagger.in > *:nth-child(4) { transition-delay: .3s }
.reveal-stagger.in > *:nth-child(5) { transition-delay: .4s }
.reveal-stagger.in > *:nth-child(6) { transition-delay: .5s }
/* Section titles get a slightly bigger, springier entrance */
.section-title.reveal { transform: translateY(48px) scale(.97); transform-origin: left }
.section-title.reveal.in { transform: none }
/* Hero entrance on first paint */
.hero-rise { opacity: 0; transform: translateY(28px); animation: heroRise 1s cubic-bezier(.16,.84,.44,1) forwards }
.hero-rise.d1 { animation-delay: .05s }
.hero-rise.d2 { animation-delay: .15s }
.hero-rise.d3 { animation-delay: .25s }
.hero-rise.d4 { animation-delay: .35s }
@keyframes heroRise { to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > *, .hero-rise { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important }
}

/* ── ANIMATED MONEY FLOW (steps) ──
   A gold light that travels around the full perimeter of each step cell.
   Built with a rotating conic gradient masked to a thin border ring so only
   the edge glows, not the interior. Reusable via .gold-trace on any element. */
.steps { position: relative }
.steps-flow { display: none }  /* old top-only bar retired in favour of per-cell trace */

.gold-trace { position: relative; isolation: isolate; }
.gold-trace::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;                         /* thickness of the glowing ring */
  background: conic-gradient(
      from var(--trace-angle, 0deg),
      transparent 0deg,
      transparent 250deg,
      rgba(240,180,41,.5) 300deg,
      #F0B429 335deg,
      #fff 348deg,
      #F0B429 360deg
  );
  /* mask so the gradient only paints the border ring, hollowing the centre */
  -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;
  opacity: 0;
  transition: opacity .6s ease;
  pointer-events: none;
  z-index: 4;
}
.gold-trace.trace-on::after {
  opacity: 1;
  animation: goldTrace 4.5s linear infinite;
}
/* Stagger multiple cells so their lights are at different points on the loop */
.gold-trace.trace-delay-1::after { animation-delay: -1.1s }
.gold-trace.trace-delay-2::after { animation-delay: -2.2s }
.gold-trace.trace-delay-3::after { animation-delay: -3.3s }

@property --trace-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes goldTrace {
  to { --trace-angle: 360deg; }
}
/* Fallback for browsers without @property: fade a static gold edge in/out so
   there is still a tasteful glow even if the rotation cannot animate. */
@supports not (background: conic-gradient(from 0deg, red, blue)) {
  .gold-trace.trace-on::after {
    background: none;
    box-shadow: inset 0 0 0 1px rgba(240,180,41,.4);
    animation: goldTraceFade 3s ease-in-out infinite;
  }
}
@keyframes goldTraceFade {
  0%,100% { opacity:.35 } 50% { opacity:1 }
}

/* ── COUNT-UP shimmer on prices when revealed ── */
.count-live { transition: color .3s ease }
.count-live.counting { color: var(--gold) }

/* ══ NEW EFFECT 1: LIVE RATE TICKER ══
   A steady "live" heartbeat on the status dot, and a brief green/red flash on
   each rate cell when its number changes, like a real exchange ticker. */
.rate-live-dot {
  display:inline-block; width:7px; height:7px; border-radius:50%;
  background:#10B981; margin-right:8px; vertical-align:middle;
  animation: rateHeartbeat 1.8s ease-in-out infinite;
}
@keyframes rateHeartbeat {
  0%,100% { box-shadow:0 0 0 0 rgba(16,185,129,.6); opacity:1 }
  50%     { box-shadow:0 0 0 5px rgba(16,185,129,0); opacity:.7 }
}
.rate-cell { transition: color .5s ease, text-shadow .5s ease }
.rate-cell.tick-up   { color:#10B981; text-shadow:0 0 10px rgba(16,185,129,.5) }
.rate-cell.tick-down { color:#EF4444; text-shadow:0 0 10px rgba(239,68,68,.5) }

/* ══ NEW EFFECT 2: FEATURE ICON DRAW-IN ══
   Each feature icon draws its stroke like it is being sketched, when the grid
   scrolls into view. A one-time, precise, technical flourish. */
.feature-icon path, .feature-icon rect, .feature-icon circle, .feature-icon line, .feature-icon polyline {
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
}
.features-grid.icons-draw .feature-icon path,
.features-grid.icons-draw .feature-icon rect,
.features-grid.icons-draw .feature-icon circle,
.features-grid.icons-draw .feature-icon line,
.features-grid.icons-draw .feature-icon polyline {
  animation: drawStroke 1.1s ease forwards;
}
.features-grid.icons-draw .feature:nth-child(1) .feature-icon > * { animation-delay:.02s }
.features-grid.icons-draw .feature:nth-child(2) .feature-icon > * { animation-delay:.08s }
.features-grid.icons-draw .feature:nth-child(3) .feature-icon > * { animation-delay:.14s }
.features-grid.icons-draw .feature:nth-child(4) .feature-icon > * { animation-delay:.20s }
.features-grid.icons-draw .feature:nth-child(5) .feature-icon > * { animation-delay:.26s }
.features-grid.icons-draw .feature:nth-child(6) .feature-icon > * { animation-delay:.32s }
.features-grid.icons-draw .feature:nth-child(7) .feature-icon > * { animation-delay:.38s }
.features-grid.icons-draw .feature:nth-child(8) .feature-icon > * { animation-delay:.44s }
.features-grid.icons-draw .feature:nth-child(9) .feature-icon > * { animation-delay:.50s }
.features-grid.icons-draw .feature:nth-child(10) .feature-icon > * { animation-delay:.56s }
.features-grid.icons-draw .feature:nth-child(11) .feature-icon > * { animation-delay:.62s }
.features-grid.icons-draw .feature:nth-child(12) .feature-icon > * { animation-delay:.68s }
@keyframes drawStroke {
  to { stroke-dashoffset: 0 }
}

/* ══ NEW EFFECT 3: TERMINAL CURSOR + LIVE DOT ══
   A blinking block cursor at the end of the terminal, so the code panel reads
   as a real, live shell rather than a static screenshot. */
.term-cursor {
  display:inline-block; width:8px; height:1.05em; margin-left:2px;
  background:var(--gold); vertical-align:text-bottom;
  animation: termBlink 1.15s step-end infinite;
}
@keyframes termBlink { 0%,50%{opacity:1} 50.01%,100%{opacity:0} }
.terminal-dot-live { animation: rateHeartbeat 2.2s ease-in-out infinite }

/* ══ NEW EFFECT 4: HERO HEADLINE SHIMMER ══
   A single light sweep across the hero gold phrase on load. Plays once, then
   the text rests at its gold colour. Elegant, not distracting. */
.hero-shimmer {
  color: var(--gold);
  background-image: linear-gradient(100deg,
     var(--gold) 0%, var(--gold) 42%,
     #fff9e8 48%, #ffffff 50%, #fff9e8 52%,
     var(--gold) 58%, var(--gold) 100%);
  background-size: 250% 100%;
  background-position: 150% 0;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: heroSweep 1.9s ease-out .6s 1 forwards;
}
@keyframes heroSweep {
  from { background-position: 150% 0 }
  to   { background-position: -50% 0 }
}

@media (prefers-reduced-motion: reduce) {
  .rate-live-dot, .terminal-dot-live, .term-cursor { animation: none }
  .features-grid.icons-draw .feature-icon > * { animation: none; stroke-dashoffset: 0 }
  .hero-shimmer { animation: none }
}

/* ── Trial pill: a subtle green breathing glow to gently draw the eye.
   The glow lives on a ::after pseudo-element so it never conflicts with any
   entrance animation on the element itself. Reusable via .trial-pulse. ── */
.trial-pulse { position: relative; animation: trialBorder 3s ease-in-out infinite; }
.trial-pulse::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  animation: trialPulse 3s ease-in-out infinite;
}
@keyframes trialPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
  50%      { box-shadow: 0 0 22px 2px rgba(16,185,129,.45); }
}
/* Subtle border brightening in sync, so the pulse reads even on green banners. */
@keyframes trialBorder {
  0%, 100% { border-color: rgba(16,185,129,.35); }
  50%      { border-color: rgba(16,185,129,.75); }
}
.trial-pulse:hover { animation: none; }
.trial-pulse:hover::after {
  animation: none;
  box-shadow: 0 0 24px 3px rgba(16,185,129,.5);
}
@media (prefers-reduced-motion: reduce) {
  .trial-pulse, .trial-pulse::after { animation: none; }
}

/* ── "Which path is right for me?" comparison cards: gentle lift and a
   sweeping highlight on hover so the two options feel interactive. ── */
.path-card {
  position: relative;
  overflow: hidden;
  transition: transform .28s cubic-bezier(.34,1.56,.64,1), border-color .28s ease, box-shadow .28s ease;
}
.path-card::before {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(240,180,41,.10), transparent);
  transform: skewX(-18deg);
  transition: left .55s ease;
  pointer-events: none;
}
.path-card:hover { transform: translateY(-4px); }
.path-card:hover::before { left: 130%; }
.path-card-link:hover { border-color: rgba(240,180,41,.6); box-shadow: 0 12px 30px -16px rgba(240,180,41,.4); }
.path-card-api:hover  { border-color: rgba(255,255,255,.28); box-shadow: 0 12px 30px -16px rgba(0,0,0,.6); }
/* A tiny corner tick that brightens on hover, echoing the guide icon frames. */
.path-card > div:first-child { position: relative; }
@media (prefers-reduced-motion: reduce) {
  .path-card, .path-card::before { transition: none; }
  .path-card:hover { transform: none; }
}

/* ── Hero trial: a command-line style prompt, native to BoreLine's terminal
   aesthetic rather than the generic SaaS pill. Reads like a developer invoking
   the free trial: $ start_trial --days 7 --cost 0 ── */
.hero-trial-cmd {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 13px;
  letter-spacing: .02em;
  background: linear-gradient(180deg, #0d0d0d, #0a0a0a);
  border: 1px solid rgba(240,180,41,.28);
  border-radius: 6px;
  padding: 10px 16px;
  margin-bottom: 24px;
  position: relative;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
/* Breathing gold glow on a pseudo-element so it never fights the fade-up
   entrance animation on the banner itself. */
.hero-trial-cmd::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  animation: htcGlow 4s ease-in-out infinite;
}
.hero-trial-cmd:hover {
  border-color: rgba(240,180,41,.6);
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 8px 24px -10px rgba(240,180,41,.5);
}
.hero-trial-cmd:hover::before { animation: none; }
@keyframes htcGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(240,180,41,0); }
  50%      { box-shadow: 0 0 16px 0 rgba(240,180,41,.22); }
}
.htc-prompt { color: var(--gold); font-weight: 700; }
.htc-cmd    { color: var(--text); font-weight: 600; }
.htc-dim    { color: var(--muted); }
.htc-flag   { color: var(--muted); }
.htc-val    { color: var(--text); font-weight: 700; }
.htc-zero   { color: #10B981; }                 /* cost 0 in green: it's free */
.htc-caret {
  display: inline-block;
  width: 7px; height: 15px;
  background: var(--gold);
  margin-left: 2px;
  animation: htcBlink 1.1s step-end infinite;
  vertical-align: middle;
}
@keyframes htcBlink { 0%,100%{opacity:1} 50%{opacity:0} }
.htc-hint {
  color: var(--muted);
  margin-left: 6px;
  padding-left: 12px;
  border-left: 1px solid rgba(255,255,255,.12);
  font-size: 12px;
  transition: color .25s ease;
}
.hero-trial-cmd:hover .htc-hint { color: var(--gold); }
@media (prefers-reduced-motion: reduce) {
  .hero-trial-cmd { animation: none; }
  .htc-caret { animation: none; opacity: 1; }
}
@media (max-width: 600px) {
  .hero-trial-cmd { font-size: 11.5px; padding: 9px 13px; gap: 6px; flex-wrap: nowrap; white-space: nowrap; max-width: 100%; overflow: hidden; }
  .htc-hint { display: none; }               /* keep it compact on small screens */
}

/* ── HOVER POLISH ── */
.step { transition: background .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1) }
.step:hover { background: var(--bg2); transform: translateY(-4px) }
.step:hover .step-icon { transform: translateY(-2px) scale(1.06); border-color: var(--gold); transition: transform .25s cubic-bezier(.34,1.56,.64,1), border-color .25s }
.plan { transition: border-color .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease }
.plan:hover { transform: translateY(-6px); box-shadow: 0 18px 50px -20px rgba(240,180,41,.28) }
@media (prefers-reduced-motion: reduce) {
  .gold-trace::after { animation: none !important; opacity: .3 !important; }
  .step:hover, .plan:hover { transform: none }
}


h1, h2, h3 { font-family: 'Syne', sans-serif; line-height: 1.1 }

/* ── LAYOUT ── */
.container { max-width: 1140px; margin: 0 auto; padding: 0 40px; position: relative; z-index: 1 }

section { position: relative }

/* ── NAV ── */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  border-bottom: 1px solid var(--border);
  background: rgba(8,8,8,0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
/* When the operator status banner is visible, everything fixed to the top of
   the viewport is pushed down by its height so nothing overlaps or leaks. */
:root { --banner-h: 0px; }
html.has-banner nav { top: var(--banner-h); }
html.has-banner body { padding-top: var(--banner-h); }
html.has-banner #merchant-dashboard { top: var(--banner-h) !important; }
html.has-banner .md-sidebar { top: var(--banner-h) !important; }
html.has-banner #integration-guide.open,
html.has-banner #security-guide.open,
html.has-banner #contact-page.open,
html.has-banner #legal-page.open,
html.has-banner #whitepaper-page.open {
  top: var(--banner-h) !important; bottom: 0 !important;
}
/* When a full-screen overlay or the dashboard is open, the page behind must
   not scroll. This prevents a second scrollbar and stops the landing page
   from showing or scrolling behind the overlay (especially with the banner's
   body padding-top applied). */
body.contact-open, body.guide-open, body.legal-open, body.whitepaper-open,
body.dashboard-open {
  overflow: hidden !important;
  height: 100vh !important;
  padding-top: 0 !important;
}
html:has(#merchant-dashboard.open), html:has(.portal-overlay.open) {
  overflow: hidden;
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 40px;
}
.logo {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  line-height: 1.1;
}
.logo-mark { flex-shrink: 0; display: block; }
.logo-text { display: flex; flex-direction: column; gap: 1px; white-space: nowrap; }
.logo-name {
  font-family: 'Syne', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.02em;
}
.logo-tag {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.logo-tag-hl { color: var(--gold); }
.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
}
.nav-links a {
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--text) }
/* Grouped "Docs" dropdown — collapses Security, Guide and FAQ into one item so
   the header reads cleaner. Desktop only (the whole nav is hidden on mobile,
   where the burger menu lists everything flat). */
.nav-dropdown { position: relative; }
.nav-dropdown > a { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.nav-caret { font-size: 9px; opacity: .7; transition: transform .2s; }
.nav-dropdown:hover .nav-caret { transform: rotate(180deg); }
/* invisible bridge so the cursor can cross to the menu without losing hover */
.nav-dropdown::after { content: ''; position: absolute; left: -8px; right: -8px; top: 100%; height: 12px; }
.nav-dropdown-menu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px);
  min-width: 194px; background: var(--bg2); border: 1px solid var(--border2);
  border-radius: 10px; padding: 8px; list-style: none; margin: 0;
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; transition: opacity .18s ease, transform .18s ease;
  box-shadow: 0 18px 40px -20px rgba(0,0,0,.85); z-index: 120;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(4px); }
.nav-dropdown-menu a { display: block; padding: 9px 12px; border-radius: 6px; font-size: 13px; white-space: nowrap; }
.nav-dropdown-menu a:hover { background: var(--bg3); color: var(--text); }
.nav-cta {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 500;
  color: #000 !important;
  background: var(--gold);
  padding: 8px 20px;
  border-radius: 2px;
  text-decoration: none;
  letter-spacing: 0.04em;
  white-space: nowrap;
  position: relative;
  transition: background .2s, transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .25s;
  animation: navCtaGlow 3.6s ease-in-out infinite;
}
/* A subtle gold halo that gently breathes so the primary access button draws
   the eye without ever being loud. Pauses on hover in favour of the hover glow. */
@keyframes navCtaGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(240,180,41,0); }
  50%      { box-shadow: 0 0 14px 1px rgba(240,180,41,.45); }
}
.nav-cta:hover { background: var(--gold) !important; color: #000 !important; transform: translateY(-2px); box-shadow: 0 8px 20px -8px rgba(240,180,41,.6); animation: none; }
@media (prefers-reduced-motion: reduce) {
  .nav-cta { animation: none; }
}

/* ── MOBILE NAV (hamburger + slide-down menu) ── */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px; height: 40px;
  background: none; border: none; cursor: pointer; padding: 8px;
}
.nav-burger span {
  display: block; height: 2px; width: 100%;
  background: var(--text); border-radius: 2px;
  transition: transform .25s, opacity .25s;
}
.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg) }
.nav-burger.open span:nth-child(2) { opacity: 0 }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) }
.mobile-menu {
  display: none;
  flex-direction: column;
  background: var(--bg2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 8px 0;
}
.mobile-menu.open { display: flex }
.mobile-menu a {
  color: var(--muted);
  text-decoration: none;
  font-size: 15px;
  padding: 14px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: color .15s, background .15s;
}
.mobile-menu a:last-child { border-bottom: none }
.mobile-menu a:hover { color: var(--text); background: rgba(255,255,255,0.02) }
.mobile-menu-cta {
  color: #000 !important;
  background: var(--gold);
  margin: 12px 24px 8px;
  padding: 14px 24px !important;
  border-radius: 3px;
  text-align: center;
  font-weight: 600;
  border-bottom: none !important;
}

/* ── BUTTONS ── */
.btn-primary {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--gold);
  color: #000;
  font-family: 'Syne', sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 14px 32px;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  text-decoration: none;
  letter-spacing: 0.05em;
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .25s, background .2s;
}
.btn-primary:hover {
  background: var(--gold);
  transform: translateY(-3px);
  box-shadow: 0 10px 28px -8px rgba(240,180,41,.55);
}
.btn-primary:active { transform: translateY(-1px) scale(.99) }
/* sheen sweep */
.btn-primary::after {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-18deg);
  transition: left .55s ease;
}
.btn-primary:hover::after { left: 140% }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--text);
  font-family: 'Syne', sans-serif;
  font-size: 14px;
  font-weight: 500;
  padding: 14px 32px;
  border: 1px solid var(--border2);
  border-radius: 2px;
  cursor: pointer;
  text-decoration: none;
  letter-spacing: 0.05em;
  transition: border-color .25s, color .25s, background .25s, transform .22s cubic-bezier(.34,1.56,.64,1);
}
.btn-ghost:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(240,180,41,.06);
  transform: translateY(-3px);
}
.btn-ghost:active { transform: translateY(-1px) scale(.99) }
/* arrow nudge on any button containing an arrow */
.btn-primary, .btn-ghost { --arrow: 0 }
.btn-primary span.arrow, .btn-ghost span.arrow { display: inline-block; transition: transform .25s }
.btn-primary:hover span.arrow, .btn-ghost:hover span.arrow { transform: translateX(4px) }
@media (prefers-reduced-motion: reduce) {
  .btn-primary, .btn-ghost { transition: background .2s, border-color .2s, color .2s }
  .btn-primary:hover, .btn-ghost:hover { transform: none }
  .btn-primary::after { display: none }
}

/* ── HERO ── */
.hero {
  padding: 180px 0 120px;
  overflow: hidden;
}

/* ── PAGE AURA (fixed full-page satoshi particles) ── */
.page-aura {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.aura-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.hero-eyebrow {
  display: block;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 20px;
}


.hero h1 {
  font-size: clamp(40px, 4.6vw, 60px);
  font-weight: 700;
  color: #fff;
  margin-bottom: 24px;
  letter-spacing: -0.02em;
  line-height: 1.08;
}
.hero h1 em {
  font-style: normal;
  color: var(--gold);
  white-space: nowrap;
}
/* Inline highlight for key phrases in body copy. Gold weight, no background,
   so it reads as emphasis without shouting. */
.hl { color: var(--gold); font-weight: 600; }

.hero-sub {
  font-size: 17px;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 40px;
  max-width: 460px;
  font-weight: 400;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.hero-trust {
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 0;
}
.trust-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 28px;
  position: relative;
}
.trust-item:first-child { padding-left: 0 }
.trust-item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0; top: 4px; bottom: 4px;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(240,180,41,.25), transparent);
}
.trust-num {
  font-family: 'Syne', sans-serif;
  font-size: 30px;
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
  letter-spacing: -0.01em;
}
.trust-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  color: var(--muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ── TERMINAL MOCK ── */
.terminal {
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.terminal-bar {
  background: var(--bg3);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--border);
}
.dot { width: 10px; height: 10px; border-radius: 50% }
.dot-r { background: #FF5F57 }
.dot-y { background: #FEBC2E }
.dot-g { background: #28C840 }
.terminal-title {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: var(--muted);
  margin-left: 8px;
  letter-spacing: 0.06em;
}
.terminal-body {
  padding: 24px;
  font-family: 'DM Mono', monospace;
  font-size: 12.5px;
  line-height: 2;
}
.t-comment  { color: var(--faint) }
.t-key      { color: #7EC8E3 }
.t-val      { color: #B5E8A8 }
.t-str      { color: #F4B77A }
.t-gold     { color: var(--gold) }
.t-muted    { color: var(--muted) }
.t-green    { color: var(--green) }

/* ── FLOW ── */
.flow-section { padding: 120px 0 }

.section-label {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin-bottom: 16px;
  position: relative;
  width: fit-content;
  max-width: 100%;
  padding-bottom: 8px;
}
/* A thin gold line that draws itself in beneath the eyebrow when the section
   scrolls into view. A fresh accent, distinct from the other effects. */
.section-label::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, var(--gold), rgba(240,180,41,0));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .8s cubic-bezier(.22,1,.36,1);
}
.reveal.in .section-label::after,
.reveal-stagger.in .section-label::after,
.in .section-label::after,
.section-label.line-in::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .section-label::after { transition: none; transform: scaleX(1); }
}

.section-title {
  font-size: clamp(32px, 3.5vw, 48px);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

.section-sub {
  font-size: 16px;
  color: var(--muted);
  max-width: 540px;
  font-weight: 400;
  line-height: 1.7;
}

/* ── HOW IT WORKS ── */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin-top: 64px;
}
.step {
  background: var(--bg);
  padding: 36px 28px;
  position: relative;
}
.step-num {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  color: var(--faint);
  letter-spacing: 0.2em;
  margin-bottom: 20px;
}
.step-icon {
  width: 40px;
  height: 40px;
  border: 1px solid var(--gold-dim);
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: var(--gold);
  font-size: 18px;
}
.step h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 10px;
  letter-spacing: 0.01em;
}
.step p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.7;
  font-weight: 400;
}

/* ── FEATURES ── */
.features-section { padding: 0 0 120px }

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin-top: 64px;
}

.feature {
  background: var(--bg);
  padding: 36px 32px;
  transition: background .2s, transform .2s;
}
.feature:hover { background: var(--bg2); transform: translateY(-3px) }
.feature-icon { transition: transform .2s }
.feature:hover .feature-icon { transform: scale(1.08) }

.feature-icon {
  font-size: 22px;
  color: var(--gold);
  margin-bottom: 20px;
  display: block;
}
.feature h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 10px;
  letter-spacing: 0.01em;
}
.feature p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.75;
  font-weight: 400;
}

/* ── CODE SNIPPET ── */
.code-section {
  padding: 120px 0;
  background: rgba(14, 14, 14, 0.72);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.code-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 80px;
  align-items: start;
}

.code-block {
  background: var(--bg);
  border: 1px solid var(--border2);
  border-radius: 4px;
  overflow: hidden;
}
.code-header {
  background: var(--bg3);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
}
.code-lang {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.1em;
}
.code-copy {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  color: var(--faint);
  cursor: pointer;
  letter-spacing: 0.1em;
  transition: color 0.2s;
  background: none;
  border: none;
}
.code-copy:hover { color: var(--gold) }
pre.code {
  padding: 24px;
  font-family: 'DM Mono', monospace;
  font-size: 12.5px;
  line-height: 2;
  overflow-x: auto;
}
pre.code .kw   { color: #C792EA }
pre.code .fn   { color: #82AAFF }
pre.code .str  { color: #C3E88D }
pre.code .num  { color: #F78C6C }
pre.code .cmt  { color: var(--faint) }
pre.code .key  { color: #7EC8E3 }
pre.code .gold { color: var(--gold) }

.check-list {
  list-style: none;
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  color: var(--muted);
  font-weight: 400;
}
.check-list li::before {
  content: '✓';
  color: var(--gold);
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  flex-shrink: 0;
  margin-top: 1px;
}
.check-list li strong { color: var(--text); font-weight: 600; white-space: nowrap; }

/* ── PRICING ── */
.pricing-section { padding: 120px 0 }

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin-top: 64px;
}

.plan {
  background: var(--bg);
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
}
.plan.featured {
  background: var(--bg2);
  position: relative;
}
.plan-badge {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #000;
  background: var(--gold);
  padding: 4px 10px;
  border-radius: 1px;
  display: inline-block;
  margin-bottom: 24px;
  width: fit-content;
}
.plan-name {
  font-family: 'Syne', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.plan-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 8px;
}
.price-num {
  font-family: 'Syne', sans-serif;
  font-size: 48px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
}
.price-cur {
  font-size: 20px;
  color: var(--muted);
  font-weight: 400;
  align-self: flex-start;
  margin-top: 12px;
}
.price-period {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 32px;
}
.plan-desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.7;
  font-weight: 400;
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--border);
}
.plan-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  margin-bottom: 36px;
}
.plan-features li {
  font-size: 13px;
  color: var(--muted);
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-weight: 400;
}
.plan-features li::before {
  content: '—';
  color: var(--faint);
  flex-shrink: 0;
}
.plan-features li.on { color: var(--text) }
.plan-features li.on::before { content: '✓'; color: var(--gold) }

/* ── FAQ ── */
.faq-section { padding: 0 0 120px }

.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin-top: 64px;
}

.faq-item {
  background: var(--bg);
  padding: 36px 32px;
}
.faq-item-full {
  grid-column: 1 / -1;
  text-align: center;
}
.faq-item-full h3 { }
.faq-item-full p { max-width: 720px; margin-left: auto; margin-right: auto; }
.faq-item h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 12px;
  letter-spacing: 0.01em;
}
.faq-item p {
  font-size: 13.5px;
  color: #C4BBAC;
  line-height: 1.8;
  font-weight: 400;
}

/* ── CTA ── */
.cta-section {
  padding: 120px 0;
  text-align: center;
  border-top: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

.cta-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 300px;
  background: radial-gradient(ellipse at center, rgba(240,180,41,0.06) 0%, transparent 70%);
  pointer-events: none;
  animation: ctaBreathe 7s ease-in-out infinite;
}
/* A slow, warm breathing so the final call to action feels inviting without
   ever pulling focus. Distinct from the sharp gold trace and green trial pulse. */
@keyframes ctaBreathe {
  0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .cta-glow { animation: none; }
}

.cta-section h2 {
  font-size: clamp(36px, 4vw, 54px);
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}
.cta-section p {
  font-size: 16px;
  color: var(--muted);
  margin-bottom: 44px;
  font-weight: 400;
}
.cta-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* ── FOOTER ── */
footer {
  border-top: 1px solid var(--border);
  padding: 40px 0;
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 40px;
}
.footer-note {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: var(--faint);
  letter-spacing: 0.08em;
}
.footer-links {
  display: flex;
  gap: 24px;
}
.footer-links a {
  font-size: 12px;
  color: var(--faint);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-links a:hover { color: var(--muted) }

/* ── ANIMATIONS ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px) }
  to   { opacity: 1; transform: translateY(0) }
}
@keyframes blink {
  0%, 100% { opacity: 1 }
  50% { opacity: 0 }
}
.cursor {
  display: inline-block;
  width: 7px;
  height: 14px;
  background: var(--gold);
  vertical-align: middle;
  animation: blink 1s step-end infinite;
  margin-left: 2px;
}

.fade-up {
  animation: fadeUp 0.7s ease both;
}
.delay-1 { animation-delay: 0.1s }
.delay-2 { animation-delay: 0.2s }
.delay-3 { animation-delay: 0.3s }
.delay-4 { animation-delay: 0.4s }

/* ── PAGE ENTRANCE ──
   Overlay pages previously hard-swapped display:none -> block, which reads as a
   jarring cut and is what made mobile occasionally paint a blank screen. This
   is deliberately an ANIMATION, not a transition from opacity:0 - so if the
   script never adds the class, content still renders normally instead of being
   stuck invisible. */
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(9px) }
  to   { opacity: 1; transform: none }
}
.page-enter { animation: pageEnter .28s cubic-bezier(.22,.9,.3,1) both }

/* A new block arriving is real news: pulse the value rather than count it up,
   which would be meaningless for a 900,000+ number. */
@keyframes chainPulse {
  0%   { color: var(--gold); text-shadow: 0 0 12px rgba(240,180,41,.65) }
  100% { color: var(--gold); text-shadow: none }
}
.chain-pulse { animation: chainPulse 1.1s ease-out }

/* Plan cards: a little depth on hover. Cheap, and makes the pricing grid feel
   responsive instead of static. */
.plan-cards > div {
  transition: transform .26s cubic-bezier(.34,1.4,.64,1),
              border-color .26s ease, box-shadow .26s ease;
}
.plan-cards > div:hover {
  transform: translateY(-5px);
  border-color: rgba(240,180,41,.34) !important;
  box-shadow: 0 20px 44px -26px rgba(0,0,0,.85), 0 0 0 1px rgba(240,180,41,.06);
}
@media (prefers-reduced-motion: reduce) {
  .page-enter { animation: none }
  .chain-pulse { animation: none }
  .plan-cards > div, .plan-cards > div:hover { transition: none; transform: none }
}

/* ── STATUS PILL ── */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(16,185,129,0.08);
  border: 1px solid rgba(16,185,129,0.2);
  border-radius: 100px;
  padding: 4px 12px;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: var(--green);
  letter-spacing: 0.08em;
  margin-bottom: 28px;
}
.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  animation: blink 2s ease infinite;
}

/* ── DIVIDER ── */
.divider {
  height: 1px;
  background: var(--border);
  margin: 0;
}

/* ── TICKER ── */
.ticker-bar {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 14px 0;
  overflow: hidden;
  background: var(--bg2);
  margin: 0;
}
.ticker-track {
  display: flex;
  gap: 64px;
  animation: ticker 30s linear infinite;
  width: max-content;
}
.ticker-item {
  font-family: 'DM Mono', monospace;
  font-size: 11.5px;
  color: #C4BBAC;
  letter-spacing: 0.15em;
  white-space: nowrap;
  text-transform: uppercase;
}
.ticker-item span { color: var(--gold); margin-right: 8px }
@keyframes ticker {
  from { transform: translateX(0) }
  to   { transform: translateX(-50%) }
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 24px }
  .steps { grid-template-columns: repeat(2, 1fr) }
  .features-grid { grid-template-columns: repeat(2, 1fr) }
  .code-grid { grid-template-columns: 1fr; gap: 48px }
  .pricing-grid { grid-template-columns: 1fr }
  .faq-grid { grid-template-columns: 1fr }
  .container { padding: 0 24px }
  .nav-inner { padding: 0 24px }
  .nav-links { display: none }
  .nav-burger { display: flex }
}
@media (max-width: 600px) {
  .steps { grid-template-columns: 1fr }
  .features-grid { grid-template-columns: 1fr }
  .flow-head { flex-direction: column; align-items: stretch !important }
  .flow-head > div:last-child { width: 100% !important }
  .hero { padding: 140px 0 80px }
  .hero-trust { flex-wrap: nowrap; gap: 0 }
  .trust-item { padding: 0 16px }
  .trust-num { font-size: 24px }
  .footer-inner { flex-direction: column; gap: 16px; text-align: center; padding: 0 20px }
  .footer-links { flex-wrap: wrap; justify-content: center; gap: 12px 18px; max-width: 100% }
  .footer-links a { font-size: 11px }
  .footer-note { font-size: 10px; line-height: 1.5 }
}

/* ─────────────────────────────────────────────────────────────────
   GLOBAL OVERFLOW GUARD — never let anything push the page sideways.
   Applies on every screen size, not just mobile.
   ───────────────────────────────────────────────────────────────── */
html, body { max-width: 100%; overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }
img, svg, canvas, video { max-width: 100%; height: auto; }
/* Long unbreakable strings (BTC addresses, API keys, URLs) must wrap */
.mono, .addr, .md-mono-cell, .md-verify-addr, .t-str, .t-key, code {
  overflow-wrap: anywhere; word-break: break-word;
}
/* Code / terminal panels scroll inside themselves, never widen the page */
.terminal, .terminal-body, .code-block {
  max-width: 100%;
}
.terminal-body, .code-block {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* Tables scroll within their own wrapper instead of stretching the layout */
.md-table { width: 100%; }
.md-table-wrap, .md-recent-wrap {
  max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
}

@media (max-width: 600px) {
  /* Recent Invoices + full invoices table: on phones a 6-column table is too
     wide. Drop the Customer and Product columns so the essentials (Invoice,
     Amount, Status, Date) fit the screen without sideways scrolling. */
  #md-recent-table .md-table th:nth-child(2),
  #md-recent-table .md-table td:nth-child(2),
  #md-recent-table .md-table th:nth-child(3),
  #md-recent-table .md-table td:nth-child(3) { display:none; }
  #md-recent-table .md-table th, #md-recent-table .md-table td { padding:10px 8px; font-size:12px; }
  #md-recent-table .md-table td:first-child { max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .md-recent-scroll { max-height:none; }
  /* Integration code reads correctly: smaller type, scrolls inside its box */
  .code-section { padding: 72px 0 }
  /* Grid children must be allowed to shrink, or the code forces overflow */
  .code-grid > div { min-width: 0; max-width: 100%; }
  .code-block { max-width: 100%; overflow: hidden; }
  pre.code { padding: 16px; font-size: 11px; line-height: 1.7; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: pre; }
  .terminal { max-width: 100%; }
  .terminal-body { padding: 16px; font-size: 11px; line-height: 1.8; overflow-x: auto; -webkit-overflow-scrolling: touch }
  /* Long section titles must wrap, never run off the edge */
  .section-title, .code-section-title { overflow-wrap: break-word; }
  .code-section-title { font-size: 28px !important; line-height: 1.15 !important; }
  /* Pricing: the live grid uses inline styles, so override with !important */
  .pricing-section { padding: 72px 0 }
  .plan-cards { grid-template-columns: 1fr !important; gap: 16px !important; }
  .plan-cards > div { padding: 28px 22px !important; }
  /* Live rate bar: stack and wrap so 4 currencies never overflow */
  .rate-bar { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }
  .rate-bar-vals { flex-wrap: wrap !important; gap: 14px !important; }
  /* Trust strip (Paid in Bitcoin / No credit cards / ...) wraps + centers */
  .trust-strip { flex-wrap: wrap !important; gap: 10px 16px !important; justify-content: center !important; }
  .trust-strip > span[style*="width:1px"] { display: none !important; }
  /* Path comparison cards stack on phones */
  .path-compare-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 480px) {
  /* Tighter gutters so content uses the full narrow screen cleanly */
  .container { padding: 0 16px }
  .nav-inner { padding: 0 16px }
  .logo-name { font-size: 15px }
  .logo-tag { font-size: 8px; letter-spacing: 0.08em }
  #security-guide, #contact-page, #integration-guide {
    padding-left: 16px; padding-right: 16px; padding-top: 100px;
  }
  /* Hero text scales down so it never clips the edge */
  .hero { padding: 120px 0 60px }
  .hero h1 { font-size: 34px; line-height: 1.15; }
  .section-title { font-size: 26px; line-height: 1.2; }
  /* Guide and Security page headings scale down on small screens */
  .sg-title { font-size: 32px; line-height: 1.12; }
  .sg-section-title { font-size: 21px; line-height: 1.2; }
  .sg-rule { padding: 18px 16px; }
  .sg-rule-body { padding-left: 0; font-size: 13.5px; }
  .sg-rule-head { gap: 10px; }
  /* Code panels: even smaller type on very narrow screens */
  pre.code { padding: 14px; font-size: 10.5px }
  .terminal-body { padding: 14px; font-size: 10.5px; line-height: 1.8 }
  /* Pricing cards a touch tighter on the smallest screens */
  .plan { padding: 24px 18px }
  /* Live rate ticker wraps instead of overflowing */
  .hero-trust { gap: 0 }
  .trust-item { padding: 0 12px }
}

/* ─────────────────────────────────────────────────────────────────
   DASHBOARD (overlay) — keep it inside the viewport on phones
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  /* Sidebar becomes a slide-in drawer instead of disappearing */
  .md-sidebar {
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.16,.84,.44,1);
    width: 256px; max-width: 82vw; z-index: 11;
    box-shadow: 2px 0 24px rgba(0,0,0,.5);
  }
  .md-sidebar.open { transform: translateX(0); }
  .md-sidebar-backdrop { display: block; }
  .md-burger { display: inline-flex; align-items:center; justify-content:center; }
  .md-main { margin-left: 0 !important; width: 100% !important; max-width: 100% !important; }
  .md-grid4 { grid-template-columns: repeat(2, 1fr) !important; }
  .md-grid2 { grid-template-columns: 1fr !important; }
  .md-topbar { padding: 0 16px !important; }
}
@media (max-width: 480px) {
  .md-main { padding: 16px !important; }
  .md-grid4 { grid-template-columns: 1fr !important; }
  .md-page-title { font-size: 22px !important; }
  .md-steps { grid-template-columns: 1fr !important; }
  /* Topbar setup-progress widget is cramped on phones: hide the bar, keep title */
  .md-topbar-right { gap: 10px !important; }
  /* Product editor: the 5-column grid overflows on phones, restack it */
  .md-tier-row {
    grid-template-columns: 1fr 80px 44px !important;
    grid-template-areas: "key key del" "name name name" "price ship ship" !important;
    gap: 6px !important;
    padding: 10px !important; margin-bottom: 12px !important;
    border: 1px solid rgba(255,255,255,0.06); border-radius: 4px;
  }
  .md-tier-row > input:nth-child(1) { grid-area: key }
  .md-tier-row > input:nth-child(2) { grid-area: name }
  .md-tier-row > input:nth-child(3) { grid-area: price }
  .md-tier-row > label { grid-area: ship; justify-self: start }
  .md-tier-row > .md-tier-del { grid-area: del }
  /* Hide the desktop column-header strip above the rows on phones */
  #md-page-products .md-card > div[style*="grid-template-columns:1fr 1.3fr"] { display: none !important; }
  /* Saved-product / paylink rows: let action buttons wrap instead of overflow */
  #md-saved-products-list .md-btn-sm,
  #md-paylinks-list .md-btn-sm { padding: 6px 10px !important; font-size: 10px !important; }
  /* Custom one-off invoice: amount + note stack on phones */
  .md-custom-grid { grid-template-columns: 1fr !important; }
  /* Stack the info above the action buttons so nothing is squeezed off-screen */
  #md-saved-products-list > div > div:first-child { flex-direction: column !important; align-items: flex-start !important; }
  #md-saved-products-list > div > div:first-child > div:last-child { width: 100%; flex-wrap: wrap; }
}



#security-guide { display:none; padding-top:120px; padding-bottom:80px; max-width:860px; margin:0 auto; padding-left:24px; padding-right:24px }
#security-guide.open { display:block }
#integration-guide { display:none; padding-top:120px; padding-bottom:80px; max-width:860px; margin:0 auto; padding-left:24px; padding-right:24px }
#integration-guide.open { display:block }
/* When opened from inside the merchant dashboard, these pages must sit ABOVE
   the dashboard overlay (z-index 999) and scroll on their own. */
body.guide-open #integration-guide.open,
body.guide-open #security-guide.open,
body.contact-open #contact-page.open {
  position: fixed; inset: 0; z-index: 1200; overflow-y: auto;
  background: rgba(7,7,7,0.86); max-width: none; margin: 0;
  padding-left: max(24px, calc(50vw - 430px)); padding-right: max(24px, calc(50vw - 430px));
}
body.guide-open .hero,
body.guide-open .flow-section,
body.guide-open .features-section,
body.guide-open .code-section,
body.guide-open .pricing-section,
body.guide-open .faq-section,
body.guide-open .cta-section,
body.guide-open .ticker-bar { display:none !important }

/* Legal and whitepaper overlays must also hide the homepage sections, or the
   translucent overlay background reveals the homepage text behind them. */
body.legal-open .hero, body.legal-open .flow-section, body.legal-open .features-section,
body.legal-open .code-section, body.legal-open .pricing-section, body.legal-open .faq-section,
body.legal-open .cta-section, body.legal-open .ticker-bar, body.legal-open footer,
body.whitepaper-open .hero, body.whitepaper-open .flow-section, body.whitepaper-open .features-section,
body.whitepaper-open .code-section, body.whitepaper-open .pricing-section, body.whitepaper-open .faq-section,
body.whitepaper-open .cta-section, body.whitepaper-open .ticker-bar, body.whitepaper-open footer { display:none !important }


/* Features and FAQ as standalone overlay pages (like the guide). When open,
   every other homepage section hides and the chosen section becomes a fixed,
   scrollable, centered page with its own Back button. */
body.features-open .hero, body.features-open .flow-section, body.features-open .code-section,
body.features-open .pricing-section, body.features-open .faq-section, body.features-open .cta-section,
body.features-open .ticker-bar, body.features-open footer,
body.faq-open .hero, body.faq-open .flow-section, body.faq-open .features-section,
body.faq-open .code-section, body.faq-open .pricing-section, body.faq-open .cta-section,
body.faq-open .ticker-bar, body.faq-open footer { display:none !important }

/* Features and FAQ are now their own pages, not part of the homepage scroll. */
#features.features-section, #faq.faq-section { display:none }

body.features-open #features.features-section,
body.faq-open #faq.faq-section {
  display:block !important;
  position:fixed; inset:0; z-index:1200; overflow-y:auto;
  background:rgba(7,7,7,0.86); padding-top:104px; padding-bottom:80px;
}
body.features-open #features .container,
body.faq-open #faq .container { max-width:1100px; margin:0 auto }
body.features-open.has-banner #features.features-section,
body.faq-open.has-banner #faq.faq-section { top:var(--banner-h) !important; bottom:0 !important }
.feature-faq-back { margin-bottom:28px }

.sg-hero { margin-bottom:52px; padding-bottom:36px; border-bottom:1px solid var(--border); position:relative }
.sg-hero::after { content:""; position:absolute; left:0; bottom:-1px; width:80px; height:1px; background:var(--gold) }
.sg-eyebrow { font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--gold); letter-spacing:.22em; text-transform:uppercase; margin-bottom:16px }
.sg-title { font-family:'Syne',sans-serif; font-size:44px; font-weight:700; color:var(--text); line-height:1.08; letter-spacing:-.02em; margin-bottom:20px }
/* Responsive page titles. This rule sits AFTER the base .sg-title so it wins on
   mobile regardless of source order. Applies to every page that uses .sg-title
   (whitepaper, security, contact, legal), so the big headings never look
   oversized or cramped on a phone. clamp scales smoothly with screen width. */
@media (max-width: 640px) {
  .sg-title { font-size: clamp(22px, 6.6vw, 32px); line-height: 1.18; letter-spacing: -0.01em; overflow-wrap: break-word; hyphens: none; text-wrap: balance; }
  /* Drop the hard line break on phones so long page titles (e.g. the whitepaper
     "Non-Custodial Bitcoin Payment Infrastructure") flow and wrap naturally
     instead of forcing an over-wide first line that then stacks word by word. */
  .wp-title-br { display: none; }
}

/* ── DOC READER UX (whitepaper, guides, legal) ─────────────────────────
   These pages are ~15 screens of reading. When open they are
   position:fixed + overflow-y:auto, so they scroll INTERNALLY and the
   window never moves — every measurement below tracks the open page
   element's own scrollTop, never window.pageYOffset. */
#doc-progress {
  position: fixed; left: 0; right: 0; top: var(--banner-h, 0px);
  height: 2px; z-index: 1250; pointer-events: none;
  opacity: 0; transition: opacity .25s ease;
}
#doc-progress.on { opacity: 1; }
#doc-progress > i {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--gold2, #E0A420), var(--gold, #F0B429));
  box-shadow: 0 0 10px rgba(240,180,41,.45);
}
#doc-toc {
  /* Geometry: the doc column is max-width 820px centred, so its left edge sits
     at (50vw - 410px). The rail is 195px wide and must clear that edge by a
     comfortable gutter, hence left = 50vw - 410 - 48(gutter) - 195(width).
     No max() fallback: clamping it to a fixed left margin is what pushed the
     rail into the content on mid-width screens. The media query below hides it
     entirely when there is not enough room. */
  position: fixed; z-index: 1250; top: 50%; transform: translateY(-50%);
  left: calc(50vw - 653px);
  width: 195px; max-height: 68vh; overflow-y: auto;
  padding: 4px 0; border-left: 1px solid var(--border);
  opacity: 0; visibility: hidden; transition: opacity .3s ease;
  scrollbar-width: none;
}
#doc-toc::-webkit-scrollbar { display: none; }
#doc-toc.on { opacity: 1; visibility: visible; }
#doc-toc a {
  display: block; font-size: 11.5px; line-height: 1.45; color: #6a6255;
  text-decoration: none; padding: 6px 0 6px 13px; margin-left: -1px;
  border-left: 2px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
#doc-toc a:hover { color: var(--text); }
#doc-toc a.active { color: var(--gold); border-left-color: var(--gold); }
#doc-toc .doc-toc-n {
  display: inline-block; min-width: 15px; margin-right: 7px;
  font-family: 'IBM Plex Mono', monospace; font-size: 10px;
  color: var(--faint); transition: color .18s ease;
}
#doc-toc a.active .doc-toc-n { color: var(--gold); }
#doc-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 1250;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--bg2); border: 1px solid var(--border2); color: var(--muted);
  font-size: 15px; line-height: 1; cursor: pointer; font-family: inherit;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease, color .2s, border-color .2s;
}
#doc-top.on { opacity: 1; visibility: visible; transform: none; }
#doc-top:hover { color: var(--gold); border-color: var(--gold); }
/* Gentle section reveal, matching the homepage feel */
.doc-rv { opacity: 0; transform: translateY(14px);
          transition: opacity .5s ease, transform .5s ease; }
.doc-rv.in { opacity: 1; transform: none; }
/* ── RULE HIERARCHY ──
   The guides present ~26 rules in identical cards, so nothing reads as more
   important than anything else and the page becomes a long flat wall. Titles
   stay visible (scanning still works), but bodies collapse by default. The
   rules already marked .critical / .gold — the ones that actually matter —
   stay open, so importance is visible at a glance instead of uniform. No
   wording changes: this is presentation only. */
.sg-collapsible { transition: padding .3s ease, border-color .2s ease, background-color .2s ease; }
.sg-collapsible > .sg-rule-head {
  cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 12px;
}
.sg-collapsible > .sg-rule-head:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }

/* Affordance 1 — the caret is a real button, not a faint glyph. */
.sg-rule-caret {
  margin-left: auto; flex-shrink: 0;
  width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--border2); background: rgba(255,255,255,.02);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; line-height: 1; color: var(--muted);
  transition: transform .28s ease, color .2s ease,
              border-color .2s ease, background-color .2s ease;
}
.sg-collapsible.sg-collapsed .sg-rule-caret { transform: rotate(-90deg); }
/* Affordance 2 — the whole card responds, so it reads as one clickable row. */
.sg-collapsible:hover { border-color: rgba(240,180,41,.34); background-color: rgba(240,180,41,.025); }
.sg-collapsible:hover .sg-rule-caret {
  color: var(--gold); border-color: var(--gold); background: rgba(240,180,41,.12);
}

.sg-collapsible > .sg-rule-body {
  overflow: hidden; max-height: 900px; opacity: 1;
  -webkit-mask-image: none; mask-image: none;
  transition: max-height .3s ease, opacity .22s ease, margin-top .3s ease;
}
/* Affordance 3 — the strongest one: a collapsed rule still shows its first line,
   faded out at the bottom. "There is more text here" needs no explanation. */
.sg-collapsible.sg-collapsed > .sg-rule-body {
  max-height: 26px; opacity: .5;
  margin-top: 8px !important; margin-bottom: 0 !important;
  -webkit-mask-image: linear-gradient(to bottom, #000 35%, transparent 95%);
  mask-image: linear-gradient(to bottom, #000 35%, transparent 95%);
}
/* Collapsed rules sit tighter so the page reads as a compact index. */
.sg-collapsible.sg-collapsed { padding-top: 16px !important; padding-bottom: 16px !important; }
@media (prefers-reduced-motion: reduce) {
  .sg-collapsible > .sg-rule-body, .sg-rule-caret, .sg-collapsible { transition: none !important; }
}

/* Affordance 4 — say it outright, and offer a way to open everything at once. */
.sg-expand-all-wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin: -12px 0 34px; padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.sg-expand-hint {
  font-size: 12.5px; color: var(--faint); display: inline-flex; align-items: center; gap: 8px;
}
.sg-expand-hint::before {
  content: '›'; display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border: 1px solid var(--border2); border-radius: 50%;
  font-size: 10px; color: var(--muted);
}
.sg-expand-all {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); cursor: pointer;
  background: none; border: 1px solid var(--border2); border-radius: 4px;
  padding: 7px 13px; transition: color .2s ease, border-color .2s ease;
}
.sg-expand-all:hover { color: var(--gold); border-color: var(--gold); }

/* Copy affordance on code samples in the guides */
.doc-code { position: relative; }
.doc-copy {
  position: absolute; top: 8px; right: 8px;
  background: var(--bg2); border: 1px solid var(--border2); color: var(--muted);
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; padding: 5px 9px; border-radius: 4px; cursor: pointer;
  opacity: 0; transition: opacity .18s ease, color .18s ease, border-color .18s ease;
}
.doc-code:hover .doc-copy, .doc-copy:focus-visible { opacity: 1; }
.doc-copy:hover { color: var(--gold); border-color: var(--gold); }
.doc-copy.ok { color: #10B981; border-color: rgba(16,185,129,.5); opacity: 1; }
/* Touch devices have no hover, so keep it discoverable there. */
@media (hover: none) { .doc-copy { opacity: .7; } }
/* The rail needs 653px of half-width to clear the doc column (see above), so it
   only appears from ~1340px up. Below that it would overlap the content, so it
   is hidden and the progress bar + back-to-top carry the experience. */
@media (max-width: 1345px) { #doc-toc { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .doc-rv { opacity: 1 !important; transform: none !important; transition: none !important; }
  #doc-top, #doc-progress, #doc-toc { transition: none !important; }
}
.sg-intro { font-size:16px; color:var(--muted); line-height:1.7; max-width:680px }

.sg-section { margin-bottom:64px; scroll-margin-top:100px }
.sg-section-num {
  font-family:'IBM Plex Mono',monospace;
  font-size:11px; color:var(--gold); letter-spacing:.18em;
  margin-bottom:14px; display:inline-flex; align-items:center; gap:10px;
  text-transform:uppercase;
}
/* A short gold rule leads into each section number, giving a clear entry mark. */
.sg-section-num::before {
  content:""; width:24px; height:1px; background:linear-gradient(90deg, var(--gold), rgba(240,180,41,.2));
}
.sg-section-title {
  font-family:'Syne',sans-serif; font-size:28px; font-weight:600;
  color:var(--text); margin-bottom:10px; letter-spacing:-.015em; line-height:1.15;
}
.sg-section-lead { font-size:15px; color:var(--muted); line-height:1.75; margin-bottom:28px; max-width:660px }

.sg-rule {
  background: linear-gradient(180deg, #0d0d0d, #0b0b0b);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 26px 28px;
  margin-bottom: 12px;
  transition: border-color .25s ease, transform .25s ease, background .25s ease;
}
.sg-rule:hover { border-color: rgba(255,255,255,.14); transform: translateX(2px); }
.sg-rule-head { display:flex; align-items:center; gap:16px; margin-bottom:12px }

/* Icon in a corner-bracketed frame: gold line-art inside a technical bracket
   marker. Replaces the emoji icons with something native to the brand. */
.sg-rule-icon {
  position: relative;
  flex-shrink: 0;
  width: 38px; height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
}
.sg-rule-icon svg { width: 20px; height: 20px; display:block; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* Glyph markers (step numbers, check) that are not SVGs sit centered in gold. */
.sg-rule-icon:not(:has(svg)) { font-family:'DM Mono',monospace; font-size:15px; font-weight:700; }
/* Corner brackets drawn with two layered gradients on ::before/::after */
.sg-rule-icon::before, .sg-rule-icon::after {
  content: "";
  position: absolute;
  width: 9px; height: 9px;
  border: 1.5px solid rgba(240,180,41,.55);
}
.sg-rule-icon::before { top: 0; left: 0; border-right: none; border-bottom: none; }
.sg-rule-icon::after  { bottom: 0; right: 0; border-left: none; border-top: none; }
.sg-rule:hover .sg-rule-icon::before,
.sg-rule:hover .sg-rule-icon::after { border-color: var(--gold); }

.sg-rule-title { font-family:'Syne',sans-serif; font-size:16.5px; font-weight:600; color:var(--text); line-height:1.35 }
.sg-rule-body { font-size:14px; color:var(--muted); line-height:1.75; padding-left:54px }
.sg-rule-body strong { color:#C9A94A; font-weight:600 }

.sg-rule.critical { border-color:rgba(239,68,68,.3); background:linear-gradient(180deg, rgba(239,68,68,.05), rgba(239,68,68,.02)) }
.sg-rule.critical .sg-rule-title { color:#EF4444 }
.sg-rule.critical .sg-rule-icon { color:#EF4444 }
.sg-rule.critical .sg-rule-icon::before,
.sg-rule.critical .sg-rule-icon::after { border-color:rgba(239,68,68,.55) }
.sg-rule.gold { border-color:rgba(240,180,41,.28); background:linear-gradient(180deg, rgba(240,180,41,.05), rgba(240,180,41,.015)) }
.sg-rule.gold .sg-rule-title { color:#F0B429 }

.sg-checklist { background:rgba(16,185,129,.05); border:1px solid rgba(16,185,129,.2); border-radius:6px; padding:28px 30px; margin-top:40px }
.sg-checklist-title { font-family:'Syne',sans-serif; font-size:18px; font-weight:600; color:#10B981; margin-bottom:18px }
.sg-check { display:flex; align-items:flex-start; gap:12px; margin-bottom:12px; font-size:14px; color:var(--text); line-height:1.6 }
.sg-check-box { width:18px; height:18px; border:1.5px solid #10B981; border-radius:4px; flex-shrink:0; margin-top:2px; display:flex; align-items:center; justify-content:center; color:#10B981; font-size:11px }

.sg-back { display:inline-flex; align-items:center; gap:8px; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--muted); cursor:pointer; background:none; border:none; margin-bottom:40px; letter-spacing:.08em; transition:color .15s }
.sg-back:hover { color:var(--gold) }

.sg-cta { text-align:center; margin-top:56px; padding-top:40px; border-top:1px solid var(--border) }
.sg-cta-text { font-size:15px; color:var(--muted); margin-bottom:20px; line-height:1.6 }



#legal-page { display:none; padding-top:120px; padding-bottom:80px; max-width:820px; margin:0 auto; padding-left:24px; padding-right:24px }
#legal-page.open { display:block }
body.legal-open #legal-page.open {
  position:fixed; inset:0; z-index:1200; overflow-y:auto; background:rgba(7,7,7,0.86);
  max-width:none; margin:0;
  padding-left:max(24px, calc(50vw - 410px)); padding-right:max(24px, calc(50vw - 410px));
}
.lg-tabs { display:flex; gap:8px; flex-wrap:wrap; margin:28px 0 36px; border-bottom:1px solid var(--border); padding-bottom:20px }
.lg-tab { background:#111; border:1px solid rgba(255,255,255,.08); color:var(--muted); font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase; padding:8px 14px; border-radius:4px; cursor:pointer; transition:all .15s }
.lg-tab:hover { border-color:rgba(240,180,41,.3); color:var(--text) }
.lg-tab.active { background:rgba(240,180,41,.12); border-color:rgba(240,180,41,.4); color:var(--gold) }
.lg-doc { display:none }
.lg-doc.active { display:block }
.lg-doc h2 { font-family:'Syne',sans-serif; font-size:30px; font-weight:700; color:var(--text); margin-bottom:8px; letter-spacing:-.02em }
.lg-updated { font-family:'IBM Plex Mono',monospace; font-size:11px; color:#8A8073; letter-spacing:.08em; margin-bottom:28px }
.lg-doc h3 { font-family:'Syne',sans-serif; font-size:17px; font-weight:600; color:var(--text); margin:28px 0 10px }
.lg-doc p, .lg-doc li { font-size:14px; color:var(--muted); line-height:1.8 }
.lg-doc p { margin-bottom:12px }
.lg-doc ul { margin:0 0 12px 20px }
.lg-doc li { margin-bottom:6px }
.lg-doc strong { color:var(--text); font-weight:600 }
.lg-note { background:rgba(240,180,41,.06); border:1px solid rgba(240,180,41,.2); border-radius:5px; padding:14px 16px; font-size:13px; color:#C9A94A; line-height:1.7; margin:0 0 24px }
.lg-ph { color:var(--gold); font-family:'IBM Plex Mono',monospace; font-size:13px }



#whitepaper-page { display:none; padding-top:120px; padding-bottom:80px; max-width:820px; margin:0 auto; padding-left:24px; padding-right:24px }
#whitepaper-page.open { display:block }
body.whitepaper-open #whitepaper-page.open {
  position:fixed; inset:0; z-index:1200; overflow-y:auto; background:rgba(7,7,7,0.86);
  max-width:none; margin:0;
  padding-left:max(24px, calc(50vw - 410px)); padding-right:max(24px, calc(50vw - 410px));
}
.wp-doc h2 { font-family:'Syne',sans-serif; font-size:22px; font-weight:700; color:var(--text); margin:36px 0 6px; padding-bottom:8px; border-bottom:2px solid var(--gold); letter-spacing:-.01em }
.wp-doc h2 .n { color:var(--gold); margin-right:10px }
.wp-doc h3 { font-family:'Syne',sans-serif; font-size:15px; font-weight:600; color:var(--text); margin:22px 0 6px }
.wp-doc p { font-size:14px; color:var(--muted); line-height:1.8; margin-bottom:12px }
.wp-doc ul, .wp-doc ol { margin:0 0 14px 22px }
.wp-doc li { font-size:14px; color:var(--muted); line-height:1.8; margin-bottom:6px }
.wp-doc strong { color:var(--text); font-weight:600 }
.wp-lead { font-size:15.5px !important; color:#C4BBAC !important }
.wp-callout { background:rgba(240,180,41,.06); border-left:3px solid var(--gold); border-radius:0 6px 6px 0; padding:14px 18px; margin:16px 0; font-size:13.5px; color:#C9A94A; line-height:1.7 }
.wp-callout.green { background:rgba(16,185,129,.06); border-left-color:#10B981; color:#9fc8b4 }
.wp-callout strong { color:#E2D9C8 }
.wp-table { width:100%; border-collapse:collapse; margin:16px 0; font-size:13px }
.wp-table th { background:#111; color:var(--gold); text-align:left; padding:10px 12px; font-weight:600; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.05em; text-transform:uppercase }
.wp-table td { border-bottom:1px solid rgba(255,255,255,.07); padding:10px 12px; color:var(--muted); line-height:1.6; vertical-align:top }
.wp-hl { color:var(--gold); font-weight:600 }
.wp-meta { font-family:'IBM Plex Mono',monospace; font-size:11px; color:#8A8073; letter-spacing:.08em; margin-bottom:8px }
.wp-download { display:inline-flex; align-items:center; gap:10px; background:var(--gold); color:#0a0a0a; font-family:'Syne',sans-serif; font-weight:600; font-size:14px; padding:12px 22px; border-radius:5px; text-decoration:none; margin:8px 0 8px }
.wp-download:hover { background:#E0A420 }
.wp-cta-trial { display:inline-flex; align-items:center; gap:8px; background:rgba(16,185,129,.12); border:1px solid rgba(16,185,129,.5); color:#10B981; font-family:'Syne',sans-serif; font-weight:600; font-size:14px; padding:11px 20px; border-radius:5px; text-decoration:none }
.wp-cta-trial:hover { background:rgba(16,185,129,.2) }
.wp-cta-plans { display:inline-flex; align-items:center; gap:6px; background:transparent; border:1px solid var(--border); color:var(--text); font-family:'Syne',sans-serif; font-weight:600; font-size:14px; padding:11px 20px; border-radius:5px; text-decoration:none }
.wp-cta-plans:hover { border-color:var(--gold); color:var(--gold) }
/* Flow diagram: landscape on desktop, portrait (stacked) on narrow screens so
   the whole thing fits at once instead of scrolling sideways. */
.wp-flow-wide { display:block }
.wp-flow-tall { display:none }
@media (max-width:600px){
  .wp-flow-wide { display:none !important }
  .wp-flow-tall { display:block !important }
}
@media (max-width:640px){ #whitepaper-page .wp-doc > div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns:1fr !important } }



#contact-page { display:none; padding-top:120px; padding-bottom:80px; max-width:720px; margin:0 auto; padding-left:24px; padding-right:24px }
#contact-page.open { display:block }
body.contact-open .hero,
body.contact-open .flow-section,
body.contact-open .features-section,
body.contact-open .code-section,
body.contact-open .pricing-section,
body.contact-open .faq-section,
body.contact-open .cta-section,
body.contact-open .ticker-bar { display:none !important }

.ct-hero { text-align:center; margin-bottom:48px }
.ct-eyebrow { font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--gold); letter-spacing:.22em; text-transform:uppercase; margin-bottom:16px }
.ct-title { font-family:'Syne',sans-serif; font-size:42px; font-weight:700; color:var(--text); line-height:1.1; letter-spacing:-.02em; margin-bottom:18px }
.ct-intro { font-size:16px; color:var(--muted); line-height:1.7; max-width:560px; margin:0 auto }

.ct-card { background:var(--surface,#0d0d0d); border:1px solid rgba(240,180,41,.25); border-radius:8px; padding:40px; text-align:center; margin-bottom:24px }
.ct-card-icon { font-size:40px; margin-bottom:16px }
.ct-card-label { font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--muted); letter-spacing:.18em; text-transform:uppercase; margin-bottom:12px }
.ct-handle { font-family:'Syne',sans-serif; font-size:clamp(17px,4.6vw,26px); font-weight:700; color:var(--gold); margin-bottom:10px; letter-spacing:-.01em; word-break:break-all; line-height:1.25 }
.ct-card-sub { font-size:14px; color:var(--muted); line-height:1.6; margin-bottom:28px }
.ct-tg-btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:14px 32px; background:var(--gold); color:#000; font-family:'Syne',sans-serif; font-size:15px; font-weight:600; border:0; border-radius:4px; text-decoration:none; transition:background .15s; letter-spacing:.02em; cursor:pointer; -webkit-appearance:none; appearance:none }
.ct-tg-btn.is-copied { background:var(--green,#10B981); color:#04140d }
.ct-tg-btn:hover { background:var(--gold2,#e0a420) }


.ct-back { display:inline-flex; align-items:center; gap:8px; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--muted); cursor:pointer; background:none; border:none; margin-bottom:40px; letter-spacing:.08em; transition:color .15s }
.ct-back:hover { color:var(--gold) }

.ct-note { text-align:center; font-size:13px; color:var(--muted); line-height:1.7; margin-top:8px }
.ct-bug { background:var(--bg); border:1px solid var(--border); border-radius:6px; padding:24px 26px; margin-bottom:24px }
.ct-bug-title { font-family:'Syne',sans-serif; font-size:15px; font-weight:600; color:var(--text); margin-bottom:8px }
.ct-bug-text { font-size:13px; color:var(--muted); line-height:1.7 }
.ct-bug-text a { color:var(--gold); text-decoration:none }
.ct-bug-text a:hover { text-decoration:underline }
@media (max-width:760px){ .pricing-head { gap:28px !important } }

/* ── MOBILE SIMPLIFICATION ──
   On phones the desktop layout stacks into a very long scroll. Hide elements
   that are non-essential on a small screen: raw code samples (nobody integrates
   on a phone), the developer path-comparison, the fee-comparison card, and
   purely decorative pieces. The core message, headline, plans, and primary
   actions stay intact. Desktop is completely unaffected. */
@media (max-width: 600px) {
  .terminal,
  .integrate-visual-col,
  .path-compare-block,
  .hero-trial-cmd,
  .cta-glow {
    display: none !important;
  }
  /* Tighten vertical rhythm so sections are less airy and closer together. */
  section { padding-top: 56px !important; padding-bottom: 56px !important; }
  .check-list li { margin-bottom: 10px !important; }
  /* The hero terminal is hidden on mobile; pull the hero's bottom in so it
     doesn't leave a large empty gap under the buttons. */
  .hero { padding-bottom: 40px !important; min-height: 0 !important; }
}



#portal-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 1400;
  background: #070707;
  overflow: hidden;
}
#portal-overlay.open { display: flex }

/* ── PORTAL AUTH CARD ── */
.portal-auth {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.portal-card {
  width: 100%; max-width: 480px;
  max-height: calc(100vh - 40px);
  display: flex; flex-direction: column;
  background: #0d0d0d;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px; overflow: hidden;
  animation: portalIn 0.3s ease;
}
@keyframes portalIn {
  from { opacity:0; transform: scale(0.97) translateY(8px) }
  to   { opacity:1; transform: scale(1) translateY(0) }
}
.portal-header {
  padding: 28px 32px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex; align-items: flex-start; justify-content: space-between;
  flex-shrink: 0;
}
.portal-logo { display:flex; align-items:center; gap:12px; margin-bottom:16px }
.portal-logo-mark {
  width:36px; height:36px; background:#F0B429; border-radius:6px;
  display:flex; align-items:center; justify-content:center; font-size:18px;
}
.portal-logo-text { font-family:'Syne',sans-serif; font-size:16px; font-weight:700; color:#E2D9C8 }
.portal-close {
  background:none; border:none; color:#444; font-size:22px; cursor:pointer;
  line-height:1; padding:0; transition:color .15s; margin-left:16px; flex-shrink:0;
}
.portal-close:hover { color:#E2D9C8 }
/* Always-reachable close, stays put even when a long form scrolls */
.portal-close-fixed {
  position: fixed; top: 16px; right: 16px; z-index: 1002;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(20,20,20,0.9); border: 1px solid rgba(255,255,255,0.14);
  color: #E2D9C8; font-size: 24px; line-height: 1; cursor: pointer;
  display: none; align-items: center; justify-content: center;
  backdrop-filter: blur(4px); transition: background .15s, border-color .15s;
}
.portal-close-fixed:hover { background: rgba(40,40,40,0.95); border-color: rgba(240,180,41,0.5) }
#portal-overlay.open .portal-close-fixed { display: flex }
.portal-title { font-family:'Syne',sans-serif; font-size:20px; font-weight:600; color:#E2D9C8; margin-bottom:6px }
.portal-sub { font-size:13px; color:#8A8073; line-height:1.6 }
.portal-body { padding: 24px 32px 32px; overflow-y: auto; flex: 1; -webkit-overflow-scrolling: touch }
@media (max-width: 560px) {
  .portal-auth { padding: 10px }
  .portal-card { max-height: calc(100vh - 20px) }
  .portal-header { padding: 20px 20px 16px }
  .portal-body { padding: 18px 20px 24px }
}
.portal-tabs {
  display:flex; border-bottom:1px solid rgba(255,255,255,0.06); margin-bottom:24px;
}
.portal-tab {
  padding:10px 20px; font-size:13px; cursor:pointer; color:#8A8073;
  border:none; border-bottom:2px solid transparent; background:none;
  transition:all .15s; margin-bottom:-1px; font-family:'DM Sans',sans-serif;
}
.portal-tab.active { color:#F0B429; border-bottom-color:#F0B429 }
.portal-err {
  background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.2);
  color:#EF4444; border-radius:3px; padding:10px 14px; font-size:12px;
  margin-bottom:16px; display:none; line-height:1.5;
}
.portal-err.on { display:block }
.portal-ok {
  background:rgba(16,185,129,.1); border:1px solid rgba(16,185,129,.2);
  color:#10B981; border-radius:3px; padding:10px 14px; font-size:12px;
  margin-bottom:16px; display:none; line-height:1.5;
}
.portal-ok.on { display:block }
.portal-lbl {
  display:block; font-family:'IBM Plex Mono',monospace; font-size:10px;
  color:#8A8073; letter-spacing:.15em; text-transform:uppercase; margin-bottom:8px;
}
.p-plan-opt {
  background:#111; border:1px solid rgba(255,255,255,.1); border-radius:5px;
  padding:12px 10px; text-align:center; cursor:pointer; transition:all .15s;
}
.p-plan-opt:hover { border-color:rgba(240,180,41,.4) }
.p-plan-opt.active { border-color:#F0B429; background:rgba(240,180,41,.1) }
.p-plan-name { font-family:'Syne',sans-serif; font-weight:600; font-size:13px; color:#E2D9C8 }
.p-plan-opt.active .p-plan-name { color:#F0B429 }
.p-plan-price { font-size:15px; color:#fff; font-weight:600; margin:3px 0 2px }
.p-plan-price .p-per { font-size:10px; color:#8A8073; font-weight:400 }
.p-plan-lim { font-size:10px; color:#8A8073; line-height:1.3 }

/* ── Request access: three step flow ─────────────────────────── */
.preq-steps {
  display:flex; align-items:center; gap:8px; margin-bottom:20px;
}
.preq-step {
  display:flex; align-items:center; gap:7px;
  font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:#5c564a; white-space:nowrap;
}
.preq-step-n {
  width:20px; height:20px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.14); background:#111;
  font-size:10px; color:#5c564a; transition:all .2s;
}
.preq-step.active { color:#F0B429 }
.preq-step.active .preq-step-n {
  border-color:#F0B429; background:rgba(240,180,41,.12); color:#F0B429;
}
.preq-step.done { color:#8A8073 }
.preq-step.done .preq-step-n {
  border-color:rgba(16,185,129,.5); background:rgba(16,185,129,.1); color:#10B981;
}
.preq-bar { flex:1; height:1px; background:rgba(255,255,255,.1); min-width:10px }
.preq-step-lbl { display:inline }
@media (max-width:420px){ .preq-step-lbl { display:none } }

.preq-nav { display:flex; gap:10px; align-items:center; margin-top:18px }
.preq-back {
  font-family:'DM Sans',sans-serif; font-size:12.5px; font-weight:500;
  background:transparent; border:1px solid rgba(255,255,255,.12);
  color:#8A8073; border-radius:5px; padding:11px 16px; cursor:pointer;
  transition:all .15s; flex-shrink:0;
}
.preq-back:hover { border-color:rgba(255,255,255,.25); color:#C4BBAC }
.preq-nav .portal-btn { margin:0; flex:1 }

/* Condensed safety note with an optional full explanation */
.preq-note {
  background:linear-gradient(135deg, rgba(240,180,41,.1), rgba(240,180,41,.04));
  border:1px solid rgba(240,180,41,.25); border-radius:4px;
  padding:12px 14px; margin-bottom:16px; font-size:12.5px; line-height:1.6;
  color:#C9A94A;
}
.preq-note strong { color:#F0B429 }
.preq-why {
  background:none; border:none; padding:0; margin-top:7px; cursor:pointer;
  font-family:'DM Sans',sans-serif; font-size:11.5px; color:#8A8073;
  text-decoration:underline; text-underline-offset:2px;
}
.preq-why:hover { color:#F0B429 }
.preq-why-body {
  display:none; margin-top:9px; padding-top:9px;
  border-top:1px solid rgba(240,180,41,.18);
  font-size:12px; line-height:1.65; color:#A99C7F;
}
.preq-why-body.on { display:block }

/* Advanced disclosure inside the signup form (address index). Matches .preq-why
   so it reads as the same "extra detail" affordance, but needs no JavaScript. */
.preq-adv { margin-top:14px }
.preq-adv > summary {
  cursor:pointer; list-style:none; display:inline-block;
  font-family:'DM Sans',sans-serif; font-size:11.5px; color:#8A8073;
  text-decoration:underline; text-underline-offset:2px;
}
.preq-adv > summary::-webkit-details-marker { display:none }
.preq-adv > summary:hover { color:#F0B429 }
.preq-adv[open] > summary { margin-bottom:10px; color:#C4BBAC }
.preq-adv > summary::before { content:'+ '; text-decoration:none; }
.preq-adv[open] > summary::before { content:'– '; }
@media (max-width:600px) { .preq-adv > summary { padding:6px 0; font-size:12.5px } }

/* Phones: fingers need bigger targets than a mouse pointer does. 44px is the
   usual accessibility floor, the desktop sizing stays untouched. */
@media (max-width:520px) {
  .preq-nav { gap:8px }
  .preq-nav .portal-btn, .preq-back {
    min-height:46px; padding-top:13px; padding-bottom:13px;
  }
  .preq-back { padding-left:18px; padding-right:18px }
  /* the cycle toggle carries inline padding, so this has to win */
  #preq-cycle-monthly, #preq-cycle-yearly {
    padding:13px 16px !important; font-size:12.5px !important;
  }
  .preq-why { padding:6px 0; font-size:12.5px }
  .p-plan-opt { padding:13px 8px }
  .preq-steps { margin-bottom:16px }
}
.portal-input {
  width:100%; background:#111; border:1px solid rgba(255,255,255,.1);
  color:#E2D9C8; padding:11px 14px; font-size:13px; border-radius:3px;
  outline:none; transition:border-color .15s; margin-bottom:16px;
  font-family:'DM Sans',sans-serif;
}
.portal-input:focus { border-color:#F0B429 }
.portal-input.mono { font-family:'IBM Plex Mono',monospace; font-size:12px }
.portal-hint { font-size:11px; color:#444; margin-top:-12px; margin-bottom:16px; line-height:1.5 }
.md-readonly-field { display:flex; align-items:center; justify-content:space-between; gap:12px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:5px; padding:12px 14px; margin-bottom:16px; font-size:14px; color:#E8E0D2; word-break:break-all }
.md-lock-tag { flex:none; font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:#8A8073; border:1px solid rgba(138,128,115,.35); border-radius:3px; padding:3px 7px }
.md-optional-tag { font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:#8A8073; border:1px solid rgba(138,128,115,.35); border-radius:3px; padding:3px 7px; margin-left:8px; vertical-align:middle }
.md-consent { display:flex; align-items:flex-start; gap:10px; cursor:pointer; font-size:13px; color:#C4BBAC; line-height:1.6; margin-top:14px }
.md-consent input { flex:none; width:16px; height:16px; margin-top:2px; cursor:pointer; accent-color:#F0B429 }
.md-consent-note { font-size:11px; color:#8A8073; line-height:1.6; margin-top:14px }
.portal-lbl-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px }
.portal-mini-btn { background:none; border:1px solid rgba(240,180,41,.35); color:#F0B429; font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase; padding:4px 10px; border-radius:3px; cursor:pointer; transition:background .15s,border-color .15s }
.portal-mini-btn:hover { background:rgba(240,180,41,.12) }
.portal-mini-btn.is-copied { border-color:rgba(16,185,129,.6); color:#10B981 }
.portal-adv-link { display:inline-block; color:#8A8073; font-size:11px; text-decoration:none; border-bottom:1px solid rgba(138,128,115,.3); margin-bottom:18px }
.portal-adv-link:hover { color:#F0B429; border-bottom-color:rgba(240,180,41,.4) }
.portal-safe-note { font-size:11px; color:#6d6559; line-height:1.6; margin-top:14px; text-align:center }
.portal-btn {
  width:100%; padding:12px; background:#F0B429; color:#000;
  border:none; border-radius:3px; font-family:'Syne',sans-serif;
  font-size:13px; font-weight:600; cursor:pointer; transition:background .15s;
  letter-spacing:.04em; margin-bottom:10px;
}
.portal-btn:hover { background:#e0a420 }
.portal-btn-ghost {
  width:100%; padding:11px; background:transparent;
  border:1px solid rgba(255,255,255,.1); color:#8A8073;
  border-radius:3px; font-size:12px; cursor:pointer; transition:all .15s;
  font-family:'DM Sans',sans-serif;
}
.portal-btn-ghost:hover { border-color:rgba(255,255,255,.25); color:#E2D9C8 }
.portal-challenge-box {
  background:rgba(240,180,41,.06); border:1px solid rgba(240,180,41,.15);
  border-radius:3px; padding:12px 14px; font-size:12px; color:#F0B429;
  line-height:1.6; margin-bottom:16px;
}
.portal-warning {
  background:rgba(239,68,68,.06); border:1px solid rgba(239,68,68,.15);
  border-radius:3px; padding:12px 14px; font-size:12px; color:#EF4444;
  line-height:1.6; margin-bottom:16px;
}
.portal-footer {
  padding:14px 32px; border-top:1px solid rgba(255,255,255,.06);
  background:#0a0a0a; font-size:11px; color:#444; text-align:center;
}
.portal-spin {
  display:none; align-items:center; justify-content:center;
  gap:8px; padding:10px; color:#8A8073; font-size:12px;
}
.portal-spin.on { display:flex }
@keyframes pspin { to { transform:rotate(360deg) } }
.portal-spin-dot {
  width:14px; height:14px; border:2px solid #1a1a1a;
  border-top-color:#F0B429; border-radius:50%; animation:pspin .8s linear infinite;
}
.portal-zpub-status { font-size:11px; color:#444; margin-top:-12px; margin-bottom:16px; line-height:1.5 }
.pz-row { display:flex; align-items:flex-start; gap:8px }
.pz-dot { flex:0 0 auto; width:9px; height:9px; border-radius:50%; margin-top:3px; background:#3a362c; transition:background .2s }
.pz-dot.pz-checking { background:#8A8073; animation:pzPulse 1s ease-in-out infinite }
.pz-dot.pz-valid { background:#10B981; box-shadow:0 0 0 3px rgba(16,185,129,.15) }
.pz-dot.pz-warn { background:#F59E0B }
.pz-dot.pz-error { background:#EF4444 }
@keyframes pzPulse { 0%,100%{opacity:.4} 50%{opacity:1} }
.pz-msg { flex:1; min-width:0 }
.pz-preview { margin-top:8px; margin-bottom:16px; border:1px solid rgba(16,185,129,.28); border-radius:4px; background:linear-gradient(135deg, rgba(16,185,129,.07), rgba(16,185,129,.02)); padding:10px 12px; display:none }
.pz-preview.on { display:block }
.pz-preview-lbl { font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:#10B981; font-weight:600; margin-bottom:5px }
.pz-preview-addr { font-family:'DM Mono',monospace; font-size:11px; color:#F0B429; word-break:break-all; line-height:1.5 }
.pz-preview-note { font-size:10.5px; color:#8A8073; margin-top:6px; line-height:1.5 }



#merchant-dashboard {
  display: none;
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 999;
  background: #070707;
  font-family: 'DM Sans', sans-serif;
}
#merchant-dashboard.open { display: flex }

/* Sidebar */
.md-sidebar {
  width: 220px; background: #0d0d0d;
  border-right: 1px solid rgba(255,255,255,0.06);
  display: flex; flex-direction: column;
  position: fixed; top:0; left:0; bottom:0; z-index:10;
  overflow-y: auto;
}
.md-logo {
  padding: 20px 16px; border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex; align-items: center; gap:10px;
}
.md-logo-mark {
  width:28px; height:28px; background:#F0B429; border-radius:4px;
  display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0;
}
.md-logo-text { font-family:'Syne',sans-serif; font-size:13px; font-weight:700; color:#E2D9C8 }
.md-logo-sub { font-family:'IBM Plex Mono',monospace; font-size:9px; color:#444; letter-spacing:.12em; text-transform:uppercase }
.md-nav-section { padding:12px 8px 4px }
.md-nav-label { font-family:'IBM Plex Mono',monospace; font-size:9px; color:#2C2820; letter-spacing:.2em; text-transform:uppercase; padding:0 8px; margin-bottom:4px }
.md-nav-item {
  display:flex; align-items:center; gap:10px; padding:9px 8px;
  border-radius:4px; cursor:pointer; color:#8A8073; font-size:13px;
  margin-bottom:1px; border:1px solid transparent; transition:all .15s;
  background:none; width:100%; text-align:left;
}
.md-nav-item:hover { background:#111; color:#E2D9C8 }
.md-nav-item.active { background:rgba(240,180,41,.15); color:#F0B429; border-color:rgba(240,180,41,.15) }
.md-nav-icon { width:16px; height:16px; flex-shrink:0; opacity:.7 }
.md-nav-item.active .md-nav-icon { opacity:1 }
.md-sidebar-bottom {
  margin-top:auto; padding:12px;
  border-top:1px solid rgba(255,255,255,0.06);
}
.md-merchant-pill {
  display:flex; align-items:center; gap:10px; padding:10px 8px;
  border-radius:4px; background:#111; border:1px solid rgba(255,255,255,0.06);
}
.md-avatar {
  width:28px; height:28px; background:#2C2820; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'Syne',sans-serif; font-size:11px; font-weight:700; color:#F0B429; flex-shrink:0;
}
.md-merchant-name { font-size:12px; font-weight:500; color:#E2D9C8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.md-merchant-plan { font-family:'IBM Plex Mono',monospace; font-size:9px; color:#8A8073; letter-spacing:.08em; text-transform:uppercase }

/* Main content */
.md-main { margin-left:220px; flex:1; display:flex; flex-direction:column; min-height:0; height:100%; overflow-y:auto }
.md-topbar {
  height:56px; border-bottom:1px solid rgba(255,255,255,0.06);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 32px; background:#070707; position:sticky; top:0; z-index:5;
}
.md-topbar-title { font-family:'Syne',sans-serif; font-size:15px; font-weight:600; color:#E2D9C8 }
/* Mobile dashboard nav: burger + slide-in drawer backdrop (hidden on desktop) */
.md-burger {
  display:none; background:none; border:none; cursor:pointer;
  color:#E2D9C8; padding:6px; margin-right:8px; border-radius:4px;
}
.md-burger svg { width:22px; height:22px; display:block }
.md-burger:hover { background:#111 }
.md-sidebar-backdrop {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.6);
  z-index:9; opacity:0; transition:opacity .25s ease;
}
.md-sidebar-backdrop.open { opacity:1 }
.md-topbar-right { display:flex; align-items:center; gap:16px }
.md-progress-bar { width:80px; height:3px; background:#161616; border-radius:2px; overflow:hidden }
.md-progress-fill { height:100%; background:#F0B429; border-radius:2px; transition:width .5s }
.md-progress-label { font-family:'IBM Plex Mono',monospace; font-size:10px; color:#8A8073 }

/* Pages */
.md-page { display:none; padding:32px; animation:mdFadeIn .2s ease }
.md-page.active { display:block }
@keyframes mdFadeIn { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:translateY(0)} }
.md-eyebrow { font-family:'IBM Plex Mono',monospace; font-size:10px; color:#8A8073; letter-spacing:.2em; text-transform:uppercase; margin-bottom:6px }
.md-page-title { font-family:'Syne',sans-serif; font-size:22px; font-weight:600; color:#E2D9C8; letter-spacing:-.01em }
.md-page-sub { font-size:13px; color:#8A8073; margin-top:4px; font-weight:400 }
.md-page-header { margin-bottom:28px }

/* Cards */
.md-card { background:#0d0d0d; border:1px solid rgba(255,255,255,0.06); border-radius:4px; padding:24px }
.md-card-title { font-family:'Syne',sans-serif; font-size:13px; font-weight:600; color:#E2D9C8; margin-bottom:16px }
/* Collapsible / scrollable section */
.md-collapse-head { display:flex; align-items:center; justify-content:space-between; cursor:pointer; user-select:none; gap:10px }
.md-collapse-head .md-collapse-toggle { font-size:11px; color:#C4BBAC; display:flex; align-items:center; gap:6px; white-space:nowrap }
.md-collapse-chevron { transition:transform .25s ease; display:inline-block; font-size:10px }
.md-collapse.collapsed .md-collapse-chevron { transform:rotate(-90deg) }
.md-collapse-body { max-height:2000px; overflow:hidden; transition:max-height .3s ease }
.md-collapse.collapsed .md-collapse-body { max-height:0 }
.md-scroll-area { max-height:340px; overflow-y:auto; padding-right:6px; margin-top:6px }
/* Recent invoices: cap at roughly 10 rows, then scroll inside the box so a
   long list never stretches the page. */
.md-recent-scroll { max-height:440px; overflow-y:auto; }
.md-recent-scroll table { width:100% }
.md-recent-scroll thead th { position:sticky; top:0; background:#0d0d0d; z-index:2 }
.md-recent-scroll::-webkit-scrollbar { width:7px }
.md-recent-scroll::-webkit-scrollbar-thumb { background:rgba(255,255,255,.12); border-radius:4px }
.md-scroll-area::-webkit-scrollbar { width:7px }
.md-scroll-area::-webkit-scrollbar-track { background:rgba(255,255,255,0.03); border-radius:4px }
.md-scroll-area::-webkit-scrollbar-thumb { background:rgba(201,168,76,0.3); border-radius:4px }
.md-scroll-area::-webkit-scrollbar-thumb:hover { background:rgba(201,168,76,0.5) }
.md-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:16px }
.md-grid4 { display:grid; grid-template-columns:repeat(4,1fr); gap:12px }

/* ── OVERVIEW HIERARCHY ────────────────────────────────────────────
   One number carries the page. Everything else is deliberately quieter,
   so the eye lands on revenue first and the rest reads as support. */
.md-hero {
  display:grid; grid-template-columns:minmax(280px,1fr) minmax(320px,1.15fr);
  gap:0; margin-bottom:14px;
  background:linear-gradient(135deg, rgba(240,180,41,.055), rgba(240,180,41,.012)), #0d0d0d;
  border:1px solid rgba(240,180,41,.22); border-radius:8px; overflow:hidden;
}
.md-hero-main { padding:26px 28px }
.md-hero-label {
  font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:#8A8073; margin-bottom:12px;
}
.md-hero-value {
  font-family:'Syne',sans-serif; font-size:42px; font-weight:700; color:#F0B429;
  line-height:1; letter-spacing:-.02em; margin-bottom:8px; word-break:break-word;
}
.md-hero-sub { font-size:12.5px; color:#8A8073; margin-bottom:18px }
.md-hero-meta {
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding-top:16px; border-top:1px solid rgba(255,255,255,.07);
  font-size:12.5px; color:#8A8073;
}
.md-hm b { color:#C4BBAC; font-weight:600; font-size:14px }
.md-hm b.green { color:#10B981 }
.md-hm-sep { width:1px; height:12px; background:rgba(255,255,255,.12) }

.md-hero-chart {
  padding:22px 24px; border-left:1px solid rgba(255,255,255,.07);
  display:flex; flex-direction:column;
}
.md-chart-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px }
.md-chart-title {
  font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:#8A8073;
}
.md-chart-total { font-size:12.5px; color:#C4BBAC; font-weight:600 }
.md-chart-wrap { position:relative; flex:1; min-height:96px }
#md-chart { width:100%; height:96px; display:block; overflow:visible }
.md-chart-empty {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:12px; color:#4a453c;
}
.md-chart-axis {
  display:flex; justify-content:space-between; margin-top:8px;
  font-family:'IBM Plex Mono',monospace; font-size:9.5px; color:#5c564a; letter-spacing:.08em;
}
.md-chart-bar { fill:rgba(240,180,41,.55); transition:fill .15s }
.md-chart-bar:hover { fill:#F0B429 }
.md-chart-bar.empty { fill:rgba(255,255,255,.045) }

/* Secondary figures: a light strip, not four more competing cards. */
.md-strip {
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.06);
  border-radius:6px; overflow:hidden; margin-bottom:20px;
}
.md-strip-item { background:#0b0b0b; padding:15px 18px }
.md-strip-label {
  font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:#6d6759; margin-bottom:7px;
}
.md-strip-value {
  font-family:'Syne',sans-serif; font-size:19px; font-weight:600;
  color:#C4BBAC; line-height:1.1; margin-bottom:4px;
}
.md-strip-sub { font-size:11px; color:#5c564a; line-height:1.45 }

/* Collapsed onboarding summary */
.md-setup-done {
  display:flex; align-items:center; gap:11px; flex-wrap:wrap;
  background:rgba(16,185,129,.05); border:1px solid rgba(16,185,129,.22);
  border-radius:6px; padding:12px 16px; margin-bottom:20px;
  font-size:12.5px; color:#9fc8b4;
}
.md-setup-done-tick {
  width:20px; height:20px; border-radius:50%; flex-shrink:0;
  background:rgba(16,185,129,.12); display:flex; align-items:center; justify-content:center;
}
.md-setup-done-txt { flex:1; min-width:180px }
.md-setup-done-btn {
  background:none; border:1px solid rgba(255,255,255,.14); color:#8A8073;
  border-radius:5px; padding:6px 12px; font-size:11.5px; cursor:pointer;
  font-family:'DM Sans',sans-serif; flex-shrink:0; transition:all .15s;
}
.md-setup-done-btn:hover { border-color:rgba(255,255,255,.3); color:#C4BBAC }

@media (max-width:1000px) {
  .md-hero { grid-template-columns:1fr }
  .md-hero-chart { border-left:none; border-top:1px solid rgba(255,255,255,.07) }
  .md-strip { grid-template-columns:repeat(2,1fr) }
}
@media (max-width:560px) {
  .md-hero-main { padding:20px }
  .md-hero-value { font-size:34px }
  .md-hero-chart { padding:18px 20px }
  .md-strip { grid-template-columns:1fr }
}

/* Stat cards */
.md-stat { background:#0d0d0d; border:1px solid rgba(255,255,255,0.06); border-radius:4px; padding:20px; position:relative; overflow:hidden }
.md-stat::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:rgba(255,255,255,0.06) }
.md-stat.gold::before { background:#F0B429 }
.md-stat.green::before { background:#10B981 }
.md-stat-label { font-family:'IBM Plex Mono',monospace; font-size:9px; color:#8A8073; letter-spacing:.2em; text-transform:uppercase; margin-bottom:10px }
.md-stat-value { font-family:'Syne',sans-serif; font-size:28px; font-weight:600; color:#E2D9C8; letter-spacing:-.02em; line-height:1; margin-bottom:6px }
.md-stat-value.gold { color:#F0B429 }
.md-stat-value.green { color:#10B981 }
.md-stat-sub { font-family:'IBM Plex Mono',monospace; font-size:10px; color:#8A8073 }

/* Setup steps */
.md-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.06); border-radius:4px; overflow:hidden; margin-bottom:28px }
.md-step { background:#0d0d0d; padding:20px; cursor:pointer; transition:background .15s }
.md-step:hover { background:#111 }
.md-step.done { background:#0d0d0d }
.md-step.active { background:rgba(240,180,41,0.06) }
/* Read-only mode: hide every onboarding cell except the ZPUB verify one,
   hide the upgrade prompt, and hide any element explicitly marked write-only.
   Defense in depth on top of the server, which already blocks these for
   read-only tokens. */
body.md-readonly .md-step[onclick*="products"],
body.md-readonly .md-step[onclick*="apikey"],
body.md-readonly .md-step[onclick*="integrate"],
body.md-readonly #md-plan-card,
body.md-readonly [data-write-only] { display:none !important }
.md-step-num { font-family:'IBM Plex Mono',monospace; font-size:10px; color:#2C2820; margin-bottom:12px }
.md-step-check { width:20px; height:20px; border-radius:50%; border:1px solid rgba(255,255,255,0.1); display:flex; align-items:center; justify-content:center; margin-bottom:12px; font-size:10px; color:#8A8073; transition:all .2s }
.md-step.done .md-step-check { background:rgba(16,185,129,.12); border-color:#10B981; color:#10B981 }
.md-step.active .md-step-check { background:rgba(240,180,41,.15); border-color:#F0B429; color:#F0B429 }
.md-step-title { font-family:'Syne',sans-serif; font-size:13px; font-weight:600; color:#E2D9C8; margin-bottom:4px }
.md-step-desc { font-size:11px; color:#8A8073; line-height:1.5 }
.md-step.done .md-step-title { color:#10B981 }
.md-step.active .md-step-title { color:#F0B429 }

/* Inputs */
.md-label { display:block; font-family:'IBM Plex Mono',monospace; font-size:10px; color:#8A8073; letter-spacing:.15em; text-transform:uppercase; margin-bottom:8px }
.md-input { width:100%; background:#111; border:1px solid rgba(255,255,255,.1); color:#E2D9C8; padding:11px 14px; font-size:13px; border-radius:3px; outline:none; transition:border-color .15s; font-family:'DM Sans',sans-serif; margin-bottom:16px }
.md-input:focus { border-color:#F0B429 }
.md-input.mono { font-family:'IBM Plex Mono',monospace; font-size:12px }
.md-hint { font-size:11px; color:#444; margin-top:-12px; margin-bottom:16px; line-height:1.5 }
.md-textarea { resize:none; line-height:1.6 }

/* Buttons */
.md-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 20px; font-family:'Syne',sans-serif; font-size:12px; font-weight:600; letter-spacing:.05em; border-radius:3px; border:none; cursor:pointer; transition:all .15s }
.md-btn-primary { background:#F0B429; color:#000 }
.md-btn-primary:hover { background:#e0a420 }
.md-btn-ghost { background:transparent; color:#8A8073; border:1px solid rgba(255,255,255,0.1) }
.md-btn-ghost:hover { color:#E2D9C8; border-color:rgba(255,255,255,0.25) }
.md-btn-danger { background:rgba(239,68,68,.1); color:#EF4444; border:1px solid rgba(239,68,68,.2) }
.md-btn-danger:hover { background:rgba(239,68,68,.2) }
.md-btn-sm { padding:7px 14px; font-size:11px }

/* Alerts */
.md-alert-warn { background:rgba(239,68,68,.06); border:1px solid rgba(239,68,68,.15); border-radius:3px; padding:14px 16px; font-size:12px; color:#EF4444; line-height:1.6; margin-bottom:16px; display:flex; gap:10px }
.md-alert-info { background:rgba(240,180,41,.06); border:1px solid rgba(240,180,41,.15); border-radius:3px; padding:14px 16px; font-size:12px; color:#F0B429; line-height:1.6; margin-bottom:16px; display:flex; gap:10px }
.md-alert-ok   { background:rgba(16,185,129,.08); border:1px solid rgba(16,185,129,.2); border-radius:3px; padding:14px 16px; font-size:12px; color:#10B981; line-height:1.6; margin-bottom:16px; display:flex; gap:10px }

/* Verify box */
.md-verify-box { background:rgba(16,185,129,.08); border:1px solid rgba(16,185,129,.2); border-radius:3px; padding:14px; margin-top:16px; display:none }
.md-verify-box.on { display:block }
.md-verify-title { font-family:'IBM Plex Mono',monospace; font-size:10px; color:#10B981; letter-spacing:.15em; text-transform:uppercase; margin-bottom:8px }
.md-verify-addr { font-family:'IBM Plex Mono',monospace; font-size:12px; color:#10B981; word-break:break-all; line-height:1.6 }
.md-verify-hint { font-size:11px; color:#8A8073; margin-top:8px; line-height:1.5 }

/* API key box */
.md-apikey-box { background:#111; border:1px solid rgba(255,255,255,.1); border-radius:3px; padding:14px 16px; display:flex; align-items:center; gap:12px }
.md-apikey-val { flex:1; font-family:'IBM Plex Mono',monospace; font-size:12px; color:#F0B429; word-break:break-all }

/* Table */
.md-table-wrap { border:1px solid rgba(255,255,255,0.06); border-radius:4px; overflow-x:auto; -webkit-overflow-scrolling:touch }
.md-table { width:100%; border-collapse:collapse }
.md-table th { text-align:left; font-family:'IBM Plex Mono',monospace; font-size:9px; color:#8A8073; letter-spacing:.2em; text-transform:uppercase; padding:10px 16px; border-bottom:1px solid rgba(255,255,255,0.06); background:#111; font-weight:400 }
.md-table td { padding:12px 16px; border-bottom:1px solid rgba(255,255,255,0.04); font-size:13px; color:#E2D9C8 }
.md-table tbody tr:last-child td { border-bottom:none }
.md-table tbody tr:hover td { background:rgba(255,255,255,.02) }
.md-mono-cell { font-family:'IBM Plex Mono',monospace; font-size:11px; color:#8A8073 }

/* Badges */
.md-badge { display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border-radius:100px; font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:.08em; text-transform:uppercase }
.md-badge-paid    { background:rgba(16,185,129,.1);  color:#10B981 }
.md-inv-tab { background:#111; border:1px solid rgba(255,255,255,.08); color:#C4BBAC; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.04em; text-transform:uppercase; padding:7px 14px; border-radius:4px; cursor:pointer; transition:all .15s }
.md-inv-tab:hover { border-color:rgba(240,180,41,.3); color:#E2D9C8 }
.md-inv-tab.active { background:rgba(240,180,41,.12); border-color:rgba(240,180,41,.4); color:#F0B429 }
.md-inv-row { cursor:pointer; transition:background .12s }
.md-inv-row:hover { background:rgba(240,180,41,.04) }
.md-inv-dl { display:grid; grid-template-columns:auto 1fr; gap:8px 16px; font-size:13px }
.md-inv-dl dt { color:#8A8073; font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.06em; align-self:center }
.md-inv-dl dd { color:#E2D9C8; margin:0; word-break:break-all; font-family:'IBM Plex Mono',monospace; font-size:12px }

/* ── Invoice modal ─────────────────────────────────────────────
   The header stays pinned while the body scrolls, so the close control is
   always reachable no matter how long the invoice is. */
.md-inv-head {
  position:sticky; top:0; z-index:2;
  background:#0d0d0d;
}
.md-inv-x {
  background:none; border:none; color:#8A8073; cursor:pointer;
  font-size:24px; line-height:1; border-radius:8px;
  width:40px; height:40px; margin:-8px -10px -8px 0;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; transition:background .15s, color .15s;
}
.md-inv-x:hover { background:rgba(255,255,255,.06); color:#E2D9C8 }

@media (max-width:560px) {
  /* Use the full screen: a cramped centred card wastes space on a phone and
     squeezes long values like addresses and transaction ids. */
  #md-inv-modal { padding:0 !important; align-items:stretch !important }
  .md-inv-card {
    max-width:none !important; max-height:100% !important;
    height:100%; border-radius:0 !important; border:none !important;
    display:flex; flex-direction:column;
  }
  .md-inv-head { padding:14px 16px !important }
  #md-inv-modal-body { padding:16px !important; flex:1 }
  .md-inv-x { width:44px; height:44px; font-size:26px; margin:-10px -12px -10px 0 }

  /* Stack label above value so addresses and hashes get the full width
     instead of being crushed into a narrow second column. */
  .md-inv-dl { grid-template-columns:1fr !important; gap:2px 0 !important }
  .md-inv-dl dt { margin-top:12px }
  .md-inv-dl dt:first-child { margin-top:0 }
  .md-inv-dl dd { font-size:12.5px; line-height:1.55; padding-bottom:2px }
}

/* Confirmation modals: give the action buttons a real thumb target on phones.
   They carry inline padding, so this needs to override it. */
@media (max-width:560px) {
  #md-revoke-modal button,
  #md-delete-modal button {
    padding-top:15px !important; padding-bottom:15px !important;
    min-height:48px;
  }
}
.md-badge-pending { background:rgba(245,158,11,.1);  color:#F59E0B }
.md-badge-expired { background:rgba(255,255,255,.05); color:#444 }
.md-badge-dot { width:5px; height:5px; border-radius:50%; background:currentColor }

/* Snippet */
.md-snippet { background:#050505; border:1px solid rgba(255,255,255,0.06); border-radius:3px; overflow:hidden; margin-bottom:16px }
.md-snippet-header { background:#111; padding:8px 14px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid rgba(255,255,255,0.06) }
.md-snippet-lang { font-family:'IBM Plex Mono',monospace; font-size:9px; color:#8A8073; letter-spacing:.15em; text-transform:uppercase }
.md-snippet-copy { font-family:'IBM Plex Mono',monospace; font-size:9px; color:#8A8073; cursor:pointer; background:none; border:none; transition:color .15s }
.md-snippet-copy:hover { color:#F0B429 }
.md-snippet pre { padding:16px; font-family:'IBM Plex Mono',monospace; font-size:11px; line-height:1.8; overflow-x:auto; color:#A8B5C8; margin:0 }
.sc-cmt{color:#4A5568}.sc-kw{color:#C792EA}.sc-fn{color:#82AAFF}.sc-str{color:#C3E88D}.sc-gold{color:#F0B429}.sc-num{color:#F78C6C}

/* Tier builder */
.md-tier-row { display:grid; grid-template-columns:1fr 1.3fr 90px 64px 36px; gap:8px; align-items:center; margin-bottom:8px }
.md-tier-del { width:36px; height:36px; background:transparent; border:1px solid rgba(255,255,255,0.1); border-radius:3px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:#8A8073; transition:all .15s; font-size:14px }
.md-tier-del:hover { background:rgba(239,68,68,.1); border-color:rgba(239,68,68,.3); color:#EF4444 }
.md-tier-add { display:flex; align-items:center; justify-content:center; gap:8px; padding:10px; color:#8A8073; font-size:12px; cursor:pointer; border:1px dashed rgba(255,255,255,.1); border-radius:3px; margin-top:4px; transition:all .15s; background:none; width:100% }
.md-tier-add:hover { color:#F0B429; border-color:rgba(240,180,41,.2) }

/* Empty state */
.md-empty { text-align:center; padding:60px 32px; color:#8A8073 }
.md-empty-icon { margin-bottom:16px; opacity:.4; color:var(--gold); display:inline-flex }
.md-empty-icon svg { stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round }
.md-empty-title { font-family:'Syne',sans-serif; font-size:15px; font-weight:600; color:#E2D9C8; margin-bottom:6px }
.md-empty-text { font-size:12px; line-height:1.6; max-width:280px; margin:0 auto 20px }

/* Divider */
.md-divider { height:1px; background:rgba(255,255,255,0.06); margin:24px 0 }

/* Toast */
.md-fresh-banner {
  background:linear-gradient(135deg, rgba(240,180,41,.1), rgba(240,180,41,.04));
  border:1px solid rgba(240,180,41,.25);
  border-radius:4px; padding:16px 18px; margin-bottom:20px;
  display:flex; gap:14px; align-items:flex-start;
}
.md-fresh-banner-icon { font-size:22px; flex-shrink:0; margin-top:1px }
.md-fresh-banner-title { font-family:'Syne',sans-serif; font-size:13px; font-weight:600; color:#F0B429; margin-bottom:5px }
.md-fresh-banner-text { font-size:12px; color:#C9A94A; line-height:1.65 }

#md-toast { position:fixed; bottom:24px; right:24px; z-index:9999; padding:12px 20px; border-radius:3px; font-size:12px; font-family:'IBM Plex Mono',monospace; letter-spacing:.04em; transition:opacity .3s; opacity:0; pointer-events:none }
#md-toast.on { opacity:1 }

/* ══════════════════════════════════════════════════════════════════════
   DESIGN LANGUAGE · "Engineered" (01) + "Blueprint" (04)
   ══════════════════════════════════════════════════════════════════════
   Replaces the 1px-hairline-rectangle pattern that made every block read
   at the same weight. Two ideas:

   ENGINEERED — corners are CUT, not rounded, and a card is defined by a
   solid accent edge rather than a full outline. Cards stop looking like
   identical boxes because the edge carries the state (neutral / gold /
   critical) instead of the whole perimeter.

   BLUEPRINT — technical-drawing accents (corner registration marks, a
   faint measured grid) reserved for a few important surfaces only. Used
   sparingly on purpose: it is the loudest part of the language.

   This block sits at the END of styles.css so it overrides the earlier
   rules. Several selectors need !important because the elements carry
   inline style= attributes from the HTML.
   ────────────────────────────────────────────────────────────────── */
:root {
  --bevel: 11px; --bevel-sm: 7px;

  /* Which corners get chamfered sets the whole page's diagonal. Cutting
     TOP-RIGHT + BOTTOM-LEFT leaves the sharp points at top-left and
     bottom-right, so the mass runs "\" — with the site's rightward lean.
     (Cutting the other pair reads "/" and fights it.) Defined once so the
     direction is a single edit, not a find-and-replace across every rule. */
  --cut:    polygon(0 0, calc(100% - var(--bevel)) 0, 100% var(--bevel),
                    100% 100%, var(--bevel) 100%, 0 calc(100% - var(--bevel)));
  --cut-sm: polygon(0 0, calc(100% - var(--bevel-sm)) 0, 100% var(--bevel-sm),
                    100% 100%, var(--bevel-sm) 100%, 0 calc(100% - var(--bevel-sm)));
  --cut-xs: polygon(0 0, calc(100% - 5px) 0, 100% 5px,
                    100% 100%, 5px 100%, 0 calc(100% - 5px));
}

/* Machined silhouette. clip-path removes the border along the cut edges,
   which is why these elements drop their outline entirely. */
.sg-rule,
.trial-pulse,
.guide-trial-banner {
  border: none !important;
  border-radius: 0 !important;
  clip-path: var(--cut);
}

/* ── Doc cards ────────────────────────────────────────────────────── */
.sg-rule {
  background: linear-gradient(180deg, #101010, #0a0a0a);
  position: relative;
  transition: background .25s ease, transform .25s ease;
}
.sg-rule::before {
  /* The accent edge stops short of the chamfer. With the cut now at the
     BOTTOM-left, the bar runs from the sharp top-left corner down to it. */
  content: ""; position: absolute; left: 0;
  top: 0; bottom: var(--bevel); width: 2px;
  background: rgba(255,255,255,.12);
  transition: background .25s ease, box-shadow .25s ease;
}
.sg-rule:hover { transform: translateX(2px); background: linear-gradient(180deg,#131313,#0c0c0c); }
.sg-rule:hover::before { background: var(--gold); box-shadow: 0 0 10px rgba(240,180,41,.45); }
/* State now lives on the edge instead of the whole outline. */
.sg-rule.gold::before     { background: var(--gold); }
.sg-rule.critical::before { background: #EF4444; }
.sg-rule.critical:hover::before { background: #EF4444; box-shadow: 0 0 10px rgba(239,68,68,.5); }

/* ── Trial banners ────────────────────────────────────────────────── */
/* The old pulse glowed an outer box-shadow, which a clip-path would cut
   off. Move the pulse onto the accent edge instead. */
.trial-pulse, .guide-trial-banner { position: relative; animation: none !important; }
.trial-pulse::after { display: none !important; }
.trial-pulse::before, .guide-trial-banner::before {
  content: ""; position: absolute; left: 0;
  top: 0; bottom: var(--bevel); width: 3px;
  background: #10B981; animation: engEdgePulse 3s ease-in-out infinite;
}
@keyframes engEdgePulse {
  0%, 100% { opacity: .5;  box-shadow: 0 0 0 rgba(16,185,129,0); }
  50%      { opacity: 1;   box-shadow: 0 0 16px 1px rgba(16,185,129,.85); }
}
.trial-pulse:hover::before, .guide-trial-banner:hover::before {
  animation: none; opacity: 1; box-shadow: 0 0 16px 1px rgba(16,185,129,.9);
}
/* Badges get the same machined cut so they belong to the family. */
.trial-pulse > span:first-child,
.guide-trial-banner > span:first-child {
  border-radius: 0 !important;
  clip-path: var(--cut-xs);
}

/* ── Buttons ──────────────────────────────────────────────────────── */
.btn-primary, .portal-btn, .nav-cta, .md-btn-primary {
  border-radius: 0 !important;
  clip-path: var(--cut-sm);
}

/* ── BLUEPRINT accents — used sparingly ───────────────────────────── */
/* Pricing cards: corner registration marks + a faint measured grid. */
.plan-cards > div {
  position: relative;
  border-radius: 0 !important;
  /* !important is required: the cards carry an inline `background:` shorthand,
     which resets background-image to none and would otherwise win. */
  background-image:
    repeating-linear-gradient(0deg,  transparent, transparent 15px, rgba(255,255,255,.016) 15px, rgba(255,255,255,.016) 16px),
    repeating-linear-gradient(90deg, transparent, transparent 15px, rgba(255,255,255,.016) 15px, rgba(255,255,255,.016) 16px) !important;
}
.plan-cards > div::before,
.plan-cards > div::after {
  content: ""; position: absolute; width: 9px; height: 9px;
  border: 1px solid rgba(240,180,41,.5); pointer-events: none;
  transition: border-color .25s ease;
}
.plan-cards > div::before { top: -1px; left: -1px;  border-right: none; border-bottom: none; }
.plan-cards > div::after  { bottom: -1px; right: -1px; border-left: none;  border-top: none; }
.plan-cards > div:hover::before,
.plan-cards > div:hover::after { border-color: var(--gold); }

/* Doc page hero: the measured grid, very faint, as a backdrop. */
.sg-hero {
  background-image:
    repeating-linear-gradient(0deg,  transparent, transparent 15px, rgba(255,255,255,.014) 15px, rgba(255,255,255,.014) 16px),
    repeating-linear-gradient(90deg, transparent, transparent 15px, rgba(255,255,255,.014) 15px, rgba(255,255,255,.014) 16px);
  background-position: left top;
  padding-top: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .trial-pulse::before, .guide-trial-banner::before { animation: none !important; opacity: .85; }
  .sg-rule, .sg-rule::before { transition: none !important; }
  .sg-rule:hover { transform: none; }
}

/* ── Buttons: restore (and sharpen) the depth clip-path removed ──────
   box-shadow is painted on the border box, so clip-path cuts it away —
   the gold glow on .btn-primary:hover silently stopped rendering the
   moment the chamfer was added. filter: drop-shadow() follows the
   CLIPPED silhouette instead, diagonals included, so it is the only way
   to cast a shadow from a chamfered shape.
   The inset shadows still work: they paint inside and simply get cut at
   the bevels, which is exactly what a machined edge should do. */
.btn-primary, .portal-btn, .nav-cta, .md-btn-primary {
  /* Light falling from above onto a metal face, rather than flat colour. */
  background-image: linear-gradient(180deg,
                      rgba(255,255,255,.26),
                      rgba(255,255,255,0) 45%,
                      rgba(0,0,0,.14));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55),
              inset 0 -1px 0 rgba(0,0,0,.24);
  filter: drop-shadow(0 3px 8px rgba(240,180,41,.26));
  transition: transform .2s cubic-bezier(.34,1.5,.64,1),
              filter .22s ease, background-image .2s ease;
}
.btn-primary:hover, .portal-btn:hover, .nav-cta:hover, .md-btn-primary:hover {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65),
              inset 0 -1px 0 rgba(0,0,0,.26);
  filter: drop-shadow(0 8px 20px rgba(240,180,41,.62));
}
/* Mechanical press: the button sits down and its cast shadow shortens. */
.btn-primary:active, .portal-btn:active, .nav-cta:active, .md-btn-primary:active {
  transform: translateY(0) scale(.985);
  filter: drop-shadow(0 1px 4px rgba(240,180,41,.4));
  box-shadow: inset 0 2px 4px rgba(0,0,0,.3);
}
@media (prefers-reduced-motion: reduce) {
  .btn-primary, .portal-btn, .nav-cta, .md-btn-primary { transition: filter .2s ease; }
  .btn-primary:active, .portal-btn:active { transform: none; }
}

/* ── LOGO · presence + motion ────────────────────────────────────────
   The nav CTA gained a chamfer, gradient and cast glow, which left the
   flat line-art mark looking like the weaker element on the bar. These
   rules give the logo comparable weight WITHOUT redrawing the brand:
   the mark is untouched at rest apart from a faint gold bloom, and the
   motion is either one-off on load or only on hover.

   The mark is a bore head seen head-on, so the moves are literal: the
   line draws itself across on load ("BoreLine"), and the cutter ring
   segments and turns when you hover it. */

/* Faint bloom so the mark holds its own against the glowing CTA. */
.logo-mark {
  filter: drop-shadow(0 0 6px rgba(240,180,41,.22));
  transition: filter .3s ease, transform .3s cubic-bezier(.34,1.5,.64,1);
  overflow: visible;
}
.logo:hover .logo-mark {
  filter: drop-shadow(0 0 11px rgba(240,180,41,.55));
  transform: scale(1.04);
}

/* One-off on load: the bore line cuts across, then the mark settles. */
.lm-line {
  stroke-dasharray: 34;
  animation: lmDraw 1.05s cubic-bezier(.6,.05,.2,1) .15s both;
}
@keyframes lmDraw {
  from { stroke-dashoffset: 34; opacity: 0; }
  60%  { opacity: 1; }
  to   { stroke-dashoffset: 0;  opacity: 1; }
}
.lm-ring { transform-origin: 24px 24px; transition: stroke-dasharray .35s ease; }
.lm-core { transform-origin: 24px 24px; animation: lmCore 3.4s ease-in-out infinite; }
@keyframes lmCore { 0%,100% { opacity: 1 } 50% { opacity: .45 } }

/* Hover: the ring breaks into cutter segments and turns. At rest it is a
   clean unbroken circle, so the brand mark itself never changes. */
.logo:hover .lm-ring {
  stroke-dasharray: 7 5;
  animation: lmSpin 4s linear infinite;
}
@keyframes lmSpin { to { transform: rotate(360deg); } }

/* Wordmark: settle in on load, and echo the CTA's chamfer with a cut
   underline that wipes in beneath the name on hover. */
.logo-name, .logo-tag { animation: lmRise .6s cubic-bezier(.2,.7,.3,1) both; }
.logo-name { animation-delay: .30s; position: relative; }
.logo-tag  { animation-delay: .42s; }
@keyframes lmRise { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

/* The sweep sits UNDER the whole wordmark block, not under the name — anchored
   to .logo-name it landed exactly on the tagline and struck through it.
   Absolutely positioned so it does not become a third flex row and change the
   nav height. */
.logo-text { position: relative; }
.logo-text::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 2px;
  background: var(--gold);
  clip-path: polygon(0 0, 100% 0, calc(100% - 4px) 100%, 4px 100%);  /* chamfered, like the CTA */
  transform: scaleX(0); transform-origin: left center;
  transition: transform .34s cubic-bezier(.2,.7,.3,1);
  pointer-events: none;
}
.logo:hover .logo-text::after { transform: scaleX(1); }
.logo-tag-hl { transition: color .25s ease; }
.logo:hover .logo-tag-hl { color: #F7CE69; }

@media (prefers-reduced-motion: reduce) {
  .lm-line { animation: none; stroke-dasharray: none; }
  .lm-core, .logo:hover .lm-ring { animation: none; }
  .logo-name, .logo-tag { animation: none; }
  .logo-mark, .logo:hover .logo-mark { transform: none; }
  .logo-text::after { transition: none; }
}

/* ── LOGO PLATE · the CTA silhouette, inverted ───────────────────────
   The mark now sits on a plate cut with EXACTLY the same chamfer as the
   nav CTA (--cut-sm, 7px, top-right + bottom-left). Same geometry, same
   lighting model — inset top highlight, cast drop-shadow — but the fill
   is inverted: the CTA is gold-on-dark, the plate is dark-with-gold-mark.
   Matching the silhouette is what balances the bar; inverting the fill is
   what stops the two competing for the same attention. */
.logo-plate {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  flex-shrink: 0;
  clip-path: var(--cut-sm);
  background: linear-gradient(180deg, #1a1509, #0c0a06);
  box-shadow: inset 0 1px 0 rgba(240,180,41,.30),
              inset 0 -1px 0 rgba(0,0,0,.55);
  filter: drop-shadow(0 3px 8px rgba(240,180,41,.16));
  transition: filter .3s ease, background .3s ease, transform .3s cubic-bezier(.34,1.5,.64,1);
}
.logo:hover .logo-plate {
  background: linear-gradient(180deg, #241c0c, #14100a);
  filter: drop-shadow(0 6px 16px rgba(240,180,41,.45));
  transform: translateY(-1px);
}
/* The plate now carries the depth, so the mark itself stops casting one
   (two stacked glows read as blur, not light). */
.logo-mark { filter: none; }
.logo:hover .logo-mark { filter: none; transform: none; }

@media (max-width: 600px) {
  .logo-plate { width: 38px; height: 38px; }
  .logo-mark  { width: 27px; height: 27px; }
}
@media (prefers-reduced-motion: reduce) {
  .logo-plate, .logo:hover .logo-plate { transition: none; transform: none; }
}