/* ============================================================================
   NoTollPay design system: the single source of truth for every surface
   (landing, checkout, merchant dashboard, operator area, sign-in).
   Dark, Geist-correct: headings never heavier than 600, every color a token,
   spacing between blocks comes from layout gap (no stacked margins).
   ========================================================================== */

/* --- fonts ------------------------------------------------------------------
   Geist and Geist Mono are self-hosted Latin subsets (public/fonts, SIL OFL).
   Geist (29 KB) is preloaded, so on normal connections it is ready before the
   first paint and text never renders in anything else. On a very slow first
   visit it swaps in late, over a local fallback scaled to Geist's widths, one
   face per weight band (Arial has no medium or semibold; 600 matches Arial
   Bold), which keeps that swap small. size-adjust was fitted on this site's own
   rendered text; ascent/descent are Geist's 1005/295 divided by it.
   Not `optional`: Chrome then kept a cold hard reload in Arial even when Geist
   had arrived first. Geist Mono and Courier New have identical advance widths,
   so mono swaps without moving anything and needs no preload.
   Never cap widths in `ch`: it is the width of "0", which differs between
   Geist and the fallback. Use em. */
@font-face {
  font-family: "Geist";
  src: url("/fonts/Geist-Latin.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/fonts/GeistMono-Latin.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist Fallback";
  src: local("Arial"), local("ArialMT");
  font-weight: 100 450;
  size-adjust: 103.3%; ascent-override: 97.29%; descent-override: 28.56%; line-gap-override: 0%;
}
@font-face {
  font-family: "Geist Fallback";
  src: local("Arial"), local("ArialMT");
  font-weight: 451 549;
  size-adjust: 103.73%; ascent-override: 96.89%; descent-override: 28.44%; line-gap-override: 0%;
}
@font-face {
  font-family: "Geist Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT");
  font-weight: 550 900;
  size-adjust: 100.95%; ascent-override: 99.55%; descent-override: 29.22%; line-gap-override: 0%;
}
@font-face {
  font-family: "Geist Mono Fallback";
  src: local("Courier New"), local("CourierNewPSMT");
  size-adjust: 100%; ascent-override: 100.5%; descent-override: 29.5%; line-gap-override: 0%;
}

:root {
  color-scheme: dark;

  /* surfaces */
  --bg: #000000;
  --surface: #0a0a0a;
  --surface-2: #141414;
  --elevated: #171717;
  --code-bg: #0b0d11;
  --border: #232323;
  --border-strong: #2f2f2f;

  /* text */
  --text: #ededed;
  --heading: #fafafa;
  --muted: #8f8f8f;
  --faint: #6b6b6b;

  /* action: Vercel-style white primary */
  --accent: #ffffff;
  --accent-fg: #0a0a0a;
  --accent-hover: #e3e3e3;
  --link: #5ea2ff;

  /* payment status vocabulary (locked): pending, paid, confirmed, expired */
  --success: #4ade80;  --success-bg: #0e2a1a;
  --info:    #5ea2ff;  --info-bg:    #11213f;
  --warning: #fbbf24;  --warning-bg: #2a2006;
  --neutral-bg: #1c1c1c;

  /* errors and destructive actions (not a payment status) */
  --danger: #f87171;   --danger-bg: #2a1414;  --danger-border: #5b2626;

  /* shape and depth */
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(0,0,0,.5);
  --shadow-lg: 0 24px 64px rgba(0,0,0,.6);
  --ring: 0 0 0 2px #000, 0 0 0 4px var(--muted);

  /* type */
  --font: "Geist", "Geist Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "Geist Mono", "Geist Mono Fallback", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --maxw: 1100px;
}

/* --- base ------------------------------------------------------------------ */
* { box-sizing: border-box; }
html, body { margin: 0; }
/* Jump links land below the sticky bars. */
html { scroll-padding-top: 96px; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: flex; flex-direction: column; min-height: 100vh;
}
/* `hidden` must always win over component display rules */
[hidden] { display: none !important; }
img { max-width: 100%; display: block; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 6px; }
h1, h2, h3, h4 { color: var(--heading); font-weight: 600; text-wrap: balance; }

.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.mono { font-family: var(--mono); }
.num { font-variant-numeric: tabular-nums; }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
.h { font-size: 20px; margin: 0 0 8px; letter-spacing: -0.01em; }
.hint { display: block; font-size: 12px; font-weight: 400; color: var(--muted); margin-top: 2px; }

/* --- buttons --------------------------------------------------------------- */
.btn {
  font: inherit; font-weight: 500; font-size: 14px; line-height: 1;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: 11px 16px; cursor: pointer; background: var(--accent); color: var(--accent-fg);
  transition: background .15s, border-color .15s, transform .04s, opacity .15s;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  white-space: nowrap;
}
.btn:hover { background: var(--accent-hover); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--border-strong); }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--muted); }
.btn-danger { background: transparent; color: var(--danger); border: 1px solid var(--danger-border); }
.btn-danger:hover { background: var(--danger-bg); }
.btn-sm { padding: 8px 12px; font-size: 13px; }
.btn-lg { padding: 13px 22px; font-size: 15px; }
.btn:disabled, .btn[aria-disabled="true"], .btn.is-busy { opacity: .55; cursor: not-allowed; }
.btn.is-busy { cursor: progress; pointer-events: none; }
.btn-block { width: 100%; }

/* --- payment status badge (only for pending / paid / confirmed / expired) --- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  background: var(--neutral-bg); color: var(--muted); white-space: nowrap; border: 1px solid transparent;
}
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge[data-status="pending"]   { background: var(--warning-bg); color: var(--warning); }
.badge[data-status="paid"]      { background: var(--info-bg);    color: var(--info); }
.badge[data-status="confirmed"] { background: var(--success-bg); color: var(--success); }
.badge[data-status="expired"]   { background: var(--neutral-bg); color: var(--muted); }

/* --- neutral tag: labels that are not a payment status ---------------------- */
.tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 500; color: var(--muted); background: var(--surface-2);
  border: 1px solid var(--border); white-space: nowrap;
}
.tag-on { color: var(--text); }
.tag-on::before, .tag-wait::before, .tag-err::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--success); }
.tag-wait { color: var(--text); }
.tag-wait::before { background: var(--warning); }
.tag-err { color: var(--danger); border-color: var(--danger-border); }
.tag-err::before { background: var(--danger); }

/* --- forms ----------------------------------------------------------------- */
.form { display: flex; flex-direction: column; gap: 15px; }
.field-l { display: flex; flex-direction: column; gap: 7px; font-size: 13px; font-weight: 600; color: var(--text); }
.field-l .hint { margin-top: -3px; }
.input {
  font: inherit; font-size: 14px; color: var(--text); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; width: 100%;
}
/* Fields show focus by their own border turning light: clear, and no thick halo.
   The global :focus-visible ring stays for buttons and links (keyboard users). */
.input:focus, .input:focus-visible { outline: none; border-color: var(--muted); box-shadow: none; border-radius: var(--radius-sm); }
.input::placeholder { color: var(--faint); }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; align-items: end; }
.actions-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.inline-form { display: inline; }
.form-error { background: var(--danger-bg); color: var(--danger); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 13px; margin-bottom: 16px; }

/* --- feedback -------------------------------------------------------------- */
.flash { border-radius: var(--radius-sm); padding: 11px 14px; font-size: 13.5px; }
.flash.ok { background: var(--success-bg); color: var(--success); }
.flash.err { background: var(--danger-bg); color: var(--danger); }
.flash.warn { background: var(--warning-bg); color: var(--warning); }
.flash a, .form-error a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.warn-line { color: var(--warning); font-size: 12.5px; font-weight: 600; margin: 0 0 14px; }
.secret-once { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; }
.secret-once .warn { color: var(--warning); font-size: 12.5px; margin: 0 0 10px; font-weight: 600; }
.empty { text-align: center; color: var(--muted); padding: 40px 16px; font-size: 14px; }

/* --- card (checkout, sign-in) ---------------------------------------------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; }

/* ============================================================================
   MARKETING SHELL  (landing, checkout, operator area)
   ========================================================================== */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(0,0,0,.65);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.topbar-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--heading); font-weight: 600; }
.brand:hover { text-decoration: none; }
.brand-mark {
  display: inline-grid; place-items: center; width: 26px; height: 26px;
  border-radius: 7px; background: var(--accent); color: var(--accent-fg); font-size: 14px;
}
.brand-name { font-size: 15.5px; letter-spacing: -0.01em; }
.site-links { display: flex; gap: 20px; margin-left: auto; margin-right: 8px; font-size: 13.5px; }
.site-links a { color: var(--muted); }
.site-links a:hover { color: var(--text); text-decoration: none; }
.nav-actions { display: flex; align-items: center; gap: 10px; }

.main { flex: 1; display: flex; justify-content: center; padding: 44px 16px; }
.main-wide { padding-inline: 24px; }
.main-fluid { flex: 1; display: block; padding: 0; }
.shell { width: 100%; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.stack { display: flex; flex-direction: column; gap: 20px; }
.page-head { padding: 4px 0 2px; }
.page-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }

.footer { border-top: 1px solid var(--border); background: var(--surface); color: var(--muted); font-size: 12.5px; padding: 28px 0; }
.footer-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}

/* ============================================================================
   LANDING
   ========================================================================== */
.hero { position: relative; overflow: hidden; isolation: isolate; border-bottom: 1px solid var(--border); padding-bottom: 24px; }
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: radial-gradient(72% 58% at 50% 0%, #000 25%, transparent 78%);
  mask-image: radial-gradient(72% 58% at 50% 0%, #000 25%, transparent 78%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-inner { position: relative; z-index: 2; padding: 92px 0 4px; text-align: center; }
.hero .eyebrow { display: inline-block; margin-bottom: 20px; padding: 6px 13px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); }
.hero h1 { font-size: clamp(30px, 4.6vw, 52px); line-height: 1.06; letter-spacing: -0.035em; margin: 0 auto 20px; max-width: 11em; }
.hero p { font-size: clamp(16px, 1.8vw, 19px); line-height: 1.6; color: var(--muted); max-width: 34.2em; margin: 20px auto 32px; }
.hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.trust { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.trust .pill { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); background: var(--surface); border: 1px solid var(--border); padding: 7px 13px; border-radius: 999px; }
.trust .pill svg { width: 14px; height: 14px; color: var(--success); }

/* hero product shot: the real dashboard shown large */
.hero-shot { position: relative; margin-top: 52px; }
.browser { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow-lg); }
.browser-lg { max-width: 1000px; margin: 0 auto; box-shadow: var(--shadow-lg), 0 0 0 1px var(--border); }
.browser-bar { display: flex; align-items: center; gap: 7px; padding: 11px 15px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.browser-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--border-strong); }
.browser-url { margin-left: 12px; font-size: 12px; color: var(--muted); font-family: var(--mono); }
.browser-body { display: grid; grid-template-columns: 212px 1fr; min-height: 436px; }
.mini-side { border-right: 1px solid var(--border); padding: 14px 10px; display: flex; flex-direction: column; gap: 3px; background: var(--surface); }
.mini-brand { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: var(--heading); padding: 8px 10px 16px; }
.mini-brand .brand-mark { width: 22px; height: 22px; font-size: 12px; border-radius: 6px; }
.mini-nav { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--muted); padding: 9px 11px; border-radius: 7px; }
.mini-nav svg { width: 17px; height: 17px; flex: none; }
.mini-nav.on { background: var(--surface-2); color: var(--heading); font-weight: 600; }
.mini-main { padding: 22px 24px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.mini-top { display: flex; align-items: center; justify-content: space-between; }
.mini-top h4 { margin: 0; font-size: 17px; }
.mini-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.mini-tile { border: 1px solid var(--border); border-radius: 9px; padding: 14px 15px; display: flex; flex-direction: column; gap: 5px; }
.mini-tile .k { font-size: 10.5px; color: var(--muted); }
.mini-tile .v { font-size: 22px; font-weight: 600; color: var(--heading); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.mini-panel { border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.mini-th, .mini-tr { display: grid; grid-template-columns: 1.1fr 1fr 1fr 118px; gap: 10px; align-items: center; padding: 11px 16px; font-size: 13px; }
.mini-tr .badge, .mini-th .col-status { justify-self: end; }
.mini-th { color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.mini-tr { border-bottom: 1px solid var(--border); }
.mini-tr:last-child { border-bottom: none; }
.mini-tr > span { white-space: nowrap; }
.mini-tr .mono { font-family: var(--mono); }
.mini-panel .badge { padding: 3px 9px; font-size: 11px; }

.section, .demo-section { padding: 84px 0; border-bottom: 1px solid var(--border); }
.section-head { max-width: 41em; margin: 0 0 32px; }
.section-head h2 { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.2; letter-spacing: -0.02em; margin: 10px 0; }
.section-head p { color: var(--muted); font-size: 16px; margin: 0; }

/* live payment demo */
.demo-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 18px; align-items: stretch; }
.demo-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; }
.demo-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.demo-amount { white-space: nowrap; font-size: 26px; font-weight: 600; letter-spacing: -0.02em; color: var(--heading); }
.demo-amount .unit { font-size: 14px; font-weight: 600; color: var(--muted); }
.qrbox { position: relative; align-self: center; margin: 4px 0 16px; width: 118px; height: 118px; }
.demo-qr { width: 118px; height: 118px; border-radius: 12px; background: #fff; padding: 9px; }
.qrbox .scan { position: absolute; left: 9px; right: 9px; top: 9px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: .75; animation: scan 2.4s ease-in-out infinite; }
.demo-addr { display: flex; gap: 8px; align-items: center; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 8px 8px 12px; margin-bottom: 16px; }
.demo-addr code { flex: 1; min-width: 0; font-family: var(--mono); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.conf-row { display: flex; justify-content: space-between; font-size: 13.5px; margin-bottom: 8px; }
.conf-row > span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; }
.conf-bar { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.conf-bar > span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .32s ease; }
.demo-success { margin-top: 16px; display: flex; align-items: center; gap: 10px; background: var(--success-bg); color: var(--success); border-radius: var(--radius-sm); padding: 12px 14px; font-weight: 600; font-size: 14px; }
.demo-success .check { width: 24px; height: 24px; }
.demo-run { margin-top: 18px; align-self: flex-start; }
.feed { background: var(--code-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; min-width: 0; }
.feed-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.feed-title { color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; font-weight: 600; display: flex; align-items: center; gap: 9px; }
.feed-ep { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.feed-lines { flex: 1; min-height: 230px; display: flex; flex-direction: column; gap: 10px; overflow: auto; font-family: var(--mono); font-size: 12.5px; }
.feed-line { display: flex; align-items: center; gap: 10px; color: var(--text); animation: feedin .25s ease; }
.feed-line.muted { color: var(--muted); }
.feed-line .fts { color: var(--muted); margin-right: 2px; }
.feed-line .fdot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex: none; }
.feed-line.info .fdot { background: var(--info); }
.feed-line.ok .fdot { background: var(--success); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); animation: pulse 1.8s infinite; }

/* value props: light, borderless */
.props { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.prop { display: flex; flex-direction: column; gap: 11px; }
.prop h3 { font-size: 17px; margin: 0; letter-spacing: -0.01em; }
.prop p { font-size: 14.5px; color: var(--muted); margin: 0; line-height: 1.65; }
.feature-icon {
  width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; margin-bottom: 6px;
  background: linear-gradient(160deg, var(--elevated), var(--surface-2)); border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07); color: var(--heading);
}
.feature-icon svg { width: 20px; height: 20px; }

.cta-band { padding: 86px 0; text-align: center; }
.cta-band h2 { font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -0.02em; margin: 0 0 14px; }
.cta-band p { color: var(--muted); font-size: 17px; margin: 0 auto 28px; max-width: 32.8em; }
.cta-band p.cta-price { color: var(--text); font-size: 15px; margin-top: -14px; }

.lfooter { border-top: 1px solid var(--border); background: var(--surface); position: relative; z-index: 2; }
.lfooter-cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 28px; padding: 54px 24px 34px; max-width: var(--maxw); margin: 0 auto; }
.lfooter h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 0 0 12px; }
.lfooter a:not(.brand) { display: block; color: var(--muted); font-size: 13.5px; padding: 5px 0; }
.lfooter a:not(.brand):hover { color: var(--text); text-decoration: none; }
.lfooter-brand { max-width: 22em; }
.lfooter-brand .muted { margin: 12px 0 0; font-size: 13px; }
.lfooter-bottom { border-top: 1px solid var(--border); padding: 18px 24px; max-width: var(--maxw); margin: 0 auto; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }

/* scroll reveal: opt-in via body.anim so content is visible without JS */
body.anim .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
body.anim .reveal.in { opacity: 1; transform: none; }

/* ============================================================================
   CHECKOUT
   ========================================================================== */
.checkout-payee { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
.payee-mark { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; flex: none; background: var(--surface-2); border: 1px solid var(--border); color: var(--heading); font-weight: 600; }
.payee-text { min-width: 0; overflow-wrap: anywhere; }
.payee-name { font-weight: 600; color: var(--heading); }
.pay-opt { display: flex; flex-direction: column; }
.net-warning { margin: 0 0 16px; padding: 10px 12px; font-size: 13px; line-height: 1.5; color: var(--warning); background: var(--warning-bg); border-radius: var(--radius-sm); overflow-wrap: anywhere; }
.net-prompt { margin: 0 0 8px; }
.field-label { display: block; margin-bottom: 6px; }
.receipt-over { margin: 12px 0 0; }
.checkout-back { margin: 12px 0 0; }
.panel-link { align-self: flex-start; color: var(--link) !important; }
.checkout-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.amount { white-space: nowrap; font-size: clamp(24px, 7.5vw, 30px); font-weight: 600; letter-spacing: -0.02em; color: var(--heading); }
.amount .unit { font-size: 15px; font-weight: 600; color: var(--muted); }
.qr-wrap { display: flex; justify-content: center; padding: 6px 0 18px; }
.qr { width: 200px; height: 200px; border-radius: 12px; background: #fff; padding: 10px; border: 1px solid var(--border); }
.field { margin-bottom: 16px; }
.field label { display: block; margin-bottom: 6px; }
.addr-row { display: flex; gap: 8px; align-items: center; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 8px 8px 12px; }
.addr { font-family: var(--mono); font-size: 12.5px; word-break: break-all; flex: 1; min-width: 0; color: var(--text); }
.rows { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--border); }
.row { display: flex; justify-content: space-between; align-items: center; font-size: 14px; gap: 12px; }
.row > span:first-child { flex: none; }
.row > span:last-child { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.success-panel { margin-top: 16px; display: flex; align-items: center; gap: 12px; background: var(--success-bg); color: var(--success); border-radius: var(--radius-sm); padding: 14px 16px; font-weight: 600; }
.check { width: 28px; height: 28px; border-radius: 50%; background: var(--success); color: #06230f; display: grid; place-items: center; font-weight: 700; flex: none; }
.addr-row .btn { min-width: 68px; }
.expiry { margin: 14px 0 0; text-align: center; }
.receipt-wait { margin: 0 0 12px; line-height: 1.5; }
.receipt .rows { margin-top: 0; }
.expired-panel { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); font-size: 14px; color: var(--muted); }
.expired-panel strong { color: var(--heading); font-weight: 600; }
.expired-panel a { color: inherit; }
/* network switch: shown only when an invoice can be paid on BSC or TRON */
.net-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 18px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.net-btn { font: inherit; font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 8px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; }
.net-btn:hover { color: var(--text); }
.net-btn[aria-pressed="true"] { background: var(--surface); color: var(--heading); box-shadow: 0 0 0 1px var(--border); }
.pay-note { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
@media (max-width: 560px) { .pay-opt .qr-wrap { order: 5; } .pay-opt .rows { order: 6; } }
@media (max-width: 360px) { .net-btn { white-space: normal; font-size: 13px; padding: 8px 4px; } }

/* ============================================================================
   SIGN-IN PAGES
   ========================================================================== */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 40px 16px; position: relative; overflow: hidden; }
.auth-card { width: 100%; max-width: 384px; position: relative; overflow-wrap: anywhere; }
.auth-card .card { padding: 28px 26px; }
.auth-logo { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 26px; }
a.auth-logo:hover { text-decoration: none; }
.form-gap { margin-bottom: 16px; }
.auth-logo .brand-mark { width: 42px; height: 42px; font-size: 21px; border-radius: 12px; }
.auth-logo .nm { font-weight: 600; font-size: 15px; color: var(--heading); }
.auth-title { text-align: center; font-size: 20px; margin: 0 0 6px; letter-spacing: -0.01em; }
.auth-sub { margin: 0 0 18px; text-align: center; }
.auth-foot { text-align: center; margin-top: 18px; font-size: 13px; color: var(--muted); }
.auth-legal { display: flex; justify-content: center; gap: 16px; margin: 14px 0 0; font-size: 12.5px; }
.auth-legal a, .footer-links a { color: var(--muted); text-decoration: none; }
.auth-legal a:hover, .footer-links a:hover { color: var(--text); }
.auth-note { margin: 12px 0 0; font-size: 12.5px; color: var(--muted); text-align: center; }
.auth-note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.auth-forgot { display: block; margin-top: 14px; text-align: center; font-size: 13px; color: var(--muted); text-decoration: none; }
.auth-forgot:hover { color: var(--text); }
.auth-or { display: flex; align-items: center; gap: 12px; margin: 14px 0; color: var(--muted); font-size: 12px; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.footer-links { display: inline-flex; gap: 16px; }
.price-list { border-top: 1px solid var(--border); }
.price-row { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 16px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--border); font-size: 15px; }
.price-name { font-weight: 500; color: var(--heading); }
.price-amount { font-weight: 500; color: var(--heading); white-space: nowrap; }
.price-amount .muted { font-weight: 400; }
@media (max-width: 640px) { .price-row { grid-template-columns: 1fr auto; } .price-row .muted:not(.price-amount .muted) { grid-column: 1 / -1; grid-row: 2; } }
.legal { padding-block: 8px 32px; }
.legal h1 { margin: 0 0 6px; font-size: 30px; font-weight: 600; color: var(--heading); letter-spacing: -0.02em; }
.legal h2 { margin: 30px 0 8px; font-size: 16px; font-weight: 600; color: var(--heading); }
.legal p { margin: 0 0 12px; font-size: 15px; line-height: 1.65; color: var(--text); }
.legal p.muted { color: var(--muted); }
.legal p.small { font-size: 12.5px; }
.guide h1 { font-size: 32px; line-height: 1.2; }
.guide .guide-lead { margin: 10px 0 8px; font-size: 17px; line-height: 1.6; color: var(--text); }
.guide h2 { margin-top: 32px; font-size: 18px; }
.guide a { overflow-wrap: anywhere; }
.guide-cta { margin-top: 36px; }
.guide-cta h2 { margin: 0 0 6px; }
.guide-list { margin: 0 0 20px; padding-left: 18px; }
.guide-list li { margin: 0 0 8px; font-size: 15px; line-height: 1.5; }
.guide-index { list-style: none; margin: 24px 0 0; padding: 0; }
.guide-index li { padding: 16px 0; border-top: 1px solid var(--border); }
.guide-index li > a { font-size: 16px; font-weight: 500; }
.guide-index p { margin: 6px 0 0; font-size: 14px; }
.flash form { display: inline; }
.flash .link-btn { all: unset; cursor: pointer; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.flash .link-btn:focus-visible { box-shadow: var(--ring); border-radius: 4px; }

/* ============================================================================
   MERCHANT DASHBOARD  (app shell: sidebar + topbar + content pane)
   ========================================================================== */
.app { flex: 1; display: grid; grid-template-columns: 248px 1fr; }
.app-sidebar {
  position: sticky; top: 0; align-self: start; height: 100vh;
  background: var(--surface); border-right: 1px solid var(--border);
  padding: 16px 12px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto;
}
.app-brand { display: inline-flex; align-items: center; gap: 9px; color: var(--heading); font-weight: 600; font-size: 15px; padding: 6px 10px 14px; }
.app-brand:hover { text-decoration: none; }
.app-nav { display: flex; flex-direction: column; gap: 3px; }
.app-nav a { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 8px; color: var(--muted); font-size: 14px; font-weight: 500; }
.app-nav a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.app-nav a.active { background: var(--surface-2); color: var(--heading); font-weight: 600; }
.app-nav svg { width: 17px; height: 17px; flex: none; }
.app-side-foot { margin-top: auto; padding: 12px 8px 4px; }
.app-side-foot form { margin-top: 8px; }
.app-side-foot .btn { width: 100%; }
.merchant-name { min-width: 0; overflow-wrap: anywhere; }
.merchant-chip { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 11px; font-size: 13px; color: var(--text); }
/* The platform plan under the merchant name; amber once it needs action. */
.plan-line { display: block; padding: 9px 2px 0; font-size: 12.5px; color: var(--muted); }
.plan-line:hover { color: var(--text); }
.plan-line.due { color: var(--warning); }
.plan-line.stop { color: var(--danger); }
.billing-note { margin: 16px 0 0; }
/* A number and a button on one line, inside a table row (operator: add days). */
.grant-form { display: inline-flex; gap: 6px; align-items: center; }
.input.input-days { width: 4.6em; padding: 6px 8px; font-size: 13px; }

.app-main { min-width: 0; display: flex; flex-direction: column; }
.app-topbar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(0,0,0,.65); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 15px 28px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.app-title { font-size: 18px; margin: 0; letter-spacing: -0.01em; }
.app-sub { font-size: 12.5px; color: var(--muted); margin: 2px 0 0; }
.app-topbar-actions { display: flex; align-items: center; gap: 10px; }
.app-content { padding: 24px 28px 48px; display: flex; flex-direction: column; gap: 20px; }
.mobile-only { display: none; }

.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.tile .k { font-size: 12.5px; color: var(--muted); }
.tile .v { font-size: 24px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--heading); }
.tile .v .unit { font-size: 13px; font-weight: 500; color: var(--muted); }

.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.panel-head h2 { font-size: 15px; margin: 0; flex: none; }
.panel-head > span, .head-stack > span { min-width: 0; overflow-wrap: anywhere; }
.panel-tools { display: flex; align-items: center; gap: 12px; min-width: 0; }
.input.input-search { width: 240px; max-width: 100%; padding: 7px 10px; font-size: 13px; }
.search-form { display: flex; flex: 1 1 auto; justify-content: flex-end; min-width: 0; }
.panel-tools > .muted { white-space: nowrap; }
.panel-foot { padding: 12px 18px; border-top: 1px solid var(--border); line-height: 1.55; }
.disclosure summary { cursor: pointer; list-style: none; border-bottom: 0; }
.disclosure summary::-webkit-details-marker { display: none; }
.disclosure[open] summary { border-bottom: 1px solid var(--border); }
.pager { display: flex; align-items: center; justify-content: center; gap: 12px; }
.panel-body { padding: 0; }
.panel-body.pad { padding: 18px; }

.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th { text-align: left; color: var(--muted); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; padding: 10px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.tbl td { padding: 12px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.tbl th:first-child, .tbl td:first-child { padding-left: 18px; }
.tbl th:last-child, .tbl td:last-child { padding-right: 18px; }
.tbl td.cell-clip { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.tbl td.wrap { white-space: normal; min-width: 190px; overflow-wrap: anywhere; }
.tbl td.links a + a { margin-left: 12px; }
.row-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: nowrap; }
.head-stack { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tbl tr:last-child td { border-bottom: none; }
.tbl tbody tr:hover td { background: var(--surface-2); }
.tbl .mono { font-size: 12.5px; color: var(--text); }
.tbl-wrap { overflow-x: auto; }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { font-size: 13px; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); }
.chip:hover { border-color: var(--border-strong); color: var(--text); text-decoration: none; }
.chip.on { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }

.kv { display: flex; flex-direction: column; gap: 18px; }
.kv-item { display: flex; flex-direction: column; gap: 7px; }
.kv-item > label { font-size: 13px; color: var(--text); font-weight: 600; }
.secret-row { display: flex; gap: 8px; align-items: center; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 8px 8px 13px; }
.secret-row code { flex: 1; min-width: 0; font-family: var(--mono); font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.list-row:last-child { border-bottom: none; }
.list-text { min-width: 0; overflow-wrap: anywhere; }
.list-title { font-weight: 600; color: var(--heading); }
select.input { appearance: none; cursor: pointer; padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
/* the invoice id opens that invoice */
.row-link { color: var(--heading); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
.row-link:hover { text-decoration-color: currentColor; }
/* rows inside a panel body: no divider of their own */
.rows.flush { margin-top: 0; padding-top: 0; border-top: 0; }
.cell-clip-inline { word-break: break-all; }

/* get-started checklist on the overview */
.steps { list-style: none; margin: 0; padding: 0; }
.step { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.step:last-child { border-bottom: none; }
.step-mark { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 600; border: 1px solid var(--border-strong); color: var(--muted); }
.step.done .step-mark { background: var(--success-bg); border-color: transparent; color: var(--success); }
.step-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.step-title { font-weight: 600; color: var(--heading); font-size: 14px; }
.step.done .step-title { color: var(--muted); }

/* developer quickstart */
.qs { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 14px; font-size: 14px; line-height: 1.55; color: var(--text); }
.qs strong { color: var(--heading); font-weight: 600; }
.code-block { position: relative; margin-top: 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.code-block pre { margin: 0; padding: 14px 16px; padding-right: 80px; overflow-x: auto; }
.code-block code { font-family: var(--mono); font-size: 12.5px; line-height: 1.6; color: var(--text); white-space: pre; }
.code-block [data-copy-pre] { position: absolute; top: 8px; right: 8px; }

/* ============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 860px) {
  .demo-grid { grid-template-columns: 1fr; }
  .props { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 820px) {
  .app { grid-template-columns: 1fr; align-content: start; }
  .app-sidebar { position: static; height: auto; overflow: visible; border-right: none; border-bottom: 1px solid var(--border); padding: 10px 12px 8px; }
  .app-brand { padding: 2px 6px 8px; }
  .app-nav { flex-direction: row; gap: 2px; }
  .app-nav a { flex: 1 1 0; min-width: 0; min-height: 52px; flex-direction: column; justify-content: center; gap: 4px; padding: 6px 2px; font-size: 11px; text-align: center; }
  .app-side-foot { display: none; }
  .app-topbar { position: static; }
  .mobile-only { display: block; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .app-content, .app-topbar { padding-left: 18px; padding-right: 18px; }
}
@media (max-width: 720px) {
  .lfooter-cols { grid-template-columns: 1fr 1fr; gap: 24px; }
}
@media (max-width: 680px) {
  .browser-body { grid-template-columns: 1fr; }
  .mini-side { display: none; }
  .mini-tiles { grid-template-columns: repeat(2, 1fr); }
  .mini-th .col-plan, .mini-tr .col-plan { display: none; }
  .mini-th, .mini-tr { grid-template-columns: 1fr 1fr 118px; }
}
@media (max-width: 760px) { .site-links { display: none; } }
@media (max-width: 359px) { .topbar:has(.nav-actions) .brand-name { display: none; } }
@media (max-width: 640px) {
  .btn-sm, .chip { min-height: 40px; }
  .input.input-days { height: 40px; }
  .footer-links a, .auth-legal a { display: inline-block; padding: 10px 0; }
  .guide-list a, .guide-index li > a { display: inline-block; padding: 8px 0; }
  .row a, #shortTx { display: inline-block; padding: 10px 0; }
  .addr-row .btn { min-height: 44px; }
  .feed-lines { min-height: 300px; }
  .code-block pre { padding: 48px 16px 14px; }
}
@media (max-width: 420px) {
  .mini-th .col-amt, .mini-tr .col-amt { display: none; }
  .mini-th, .mini-tr { grid-template-columns: 1fr 118px; }
}
@media (max-width: 560px) {
  .app-nav { display: grid; grid-template-columns: repeat(4, 1fr); }
  .panel-head { flex-wrap: wrap; }
  .input.input-search { width: 100%; }
  .panel-tools { flex: 1 1 100%; }
  .section, .demo-section { padding: 52px 0; }
  .hero-inner { padding-top: 64px; }
  .hero-shot { margin-top: 36px; }
}
/* .tbl-stack: on phones each row becomes a small card, so long text (a finding,
   an error) wraps in view instead of hiding behind a horizontal scroll */
@media (max-width: 560px) {
  .tbl-stack thead { display: none; }
  .tbl-stack, .tbl-stack tbody, .tbl-stack td { display: block; }
  .tbl-stack tr { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
  .tbl-stack tr:last-child { border-bottom: none; }
  .tbl-stack td, .tbl-stack td:first-child, .tbl-stack td:last-child { padding: 0; border: none; }
  .tbl-stack td.wrap, .tbl-stack td.cell-clip, .tbl-stack td.links { flex-basis: 100%; min-width: 0; max-width: none; white-space: normal; overflow-wrap: anywhere; }
  .tbl-stack .stack-only { display: inline; }
  .tbl-stack .row-actions { justify-content: flex-start; flex-wrap: wrap; }
  .step { flex-wrap: wrap; align-items: flex-start; row-gap: 10px; }
  .step-body { flex: 1 1 calc(100% - 40px); }
  .step > .btn, .step > .tag { margin-left: 40px; }
}
@media (max-width: 1180px) {
  .tbl-stack-wide thead { display: none; }
  .tbl-stack-wide, .tbl-stack-wide tbody, .tbl-stack-wide td { display: block; }
  .tbl-stack-wide tr { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
  .tbl-stack-wide tr:last-child { border-bottom: none; }
  .tbl-stack-wide td, .tbl-stack-wide td:first-child, .tbl-stack-wide td:last-child { padding: 0; border: none; }
  .tbl-stack-wide td.wrap, .tbl-stack-wide td.links { flex-basis: 100%; min-width: 0; max-width: none; white-space: normal; }
  .tbl-stack-wide .stack-only { display: inline; }
  .tbl-stack-wide td.stack-hide { display: none; }
  .tbl-stack-wide .row-actions { justify-content: flex-start; flex-wrap: wrap; }
}
/* words a stacked card needs because its column header is gone */
.stack-only { display: none; }
@media (max-width: 480px) {
  .container { padding-inline: 18px; } /* sides only: a shorthand here zeroed .hero-inner's top padding */
  .topbar-inner { padding: 13px 18px; }
  .nav-actions { gap: 6px; }
  .nav-actions .btn { padding-inline: 10px; }
  .tile .v { font-size: 21px; }
  /* stacked full width, so the row count never depends on text width */
  .hero-cta { flex-direction: column; }
  .hero-cta .btn { width: 100%; justify-content: center; }
}
@media (max-width: 420px) {
  .lfooter-cols { grid-template-columns: 1fr; }
}

/* ============================================================================
   MOTION
   ========================================================================== */
@keyframes feedin { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(74,222,128,.5); } 70% { box-shadow: 0 0 0 7px rgba(74,222,128,0); } 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); } }
@keyframes scan { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(98px); } }

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

/* The analytics question for visitors on a European time zone (public/consent.js). */
.consent { position: fixed; right: 16px; bottom: 16px; z-index: 50; width: min(380px, calc(100vw - 32px)); box-sizing: border-box; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 16px; }
.consent p { margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: var(--text); }
.consent-actions { display: flex; gap: 8px; }
.consent-actions .btn { flex: 1; justify-content: center; }

@media (max-width: 640px) {
  .consent { left: 8px; right: 8px; bottom: 8px; width: auto; padding: 12px; }
  .consent p { margin-bottom: 8px; font-size: 12.5px; }
}
/* On a short screen a floating box would sit over the page's main buttons, so it takes its own place at the top. */
@media (max-height: 700px) and (max-width: 940px) {
  .consent { position: static; width: auto; margin: 8px; box-shadow: none; }
}

/* On a phone the page title keeps to one line and the top buttons stack beside it when there is no room. */
@media (max-width: 640px) {
  .app-title { white-space: nowrap; }
  .app-topbar-actions { flex-wrap: wrap; justify-content: flex-end; }
}

/* The confirm step before anything that cannot be undone (public/forms.js). */
.confirm { width: min(420px, calc(100vw - 32px)); padding: 20px; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.confirm::backdrop { background: rgba(0,0,0,.6); }
.confirm p { margin: 0 0 16px; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }