/* Unslop pass, 2026-11-01. Polish mode: layout, type, copy order and the hero card stay.
   Brand colors stay too (decision pending): the blue to violet gradient now lives ONLY on the
   primary button fill, solid brand blue (--gn-link) carries the accent words and the one key figure.
   Part of unslop by Damir Sokolovsky (@heydamir), CC BY 4.0. */

/* Color: no gradient text, no colored glows, no washes behind content */
.grad, .lit, .facts b {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--gn-link);
}
.closing h2 .grad { color: var(--gn-stage-ink); }
.btn-primary, .btn-primary:hover { box-shadow: none; transform: none; }
.stage::after, .panel::before { content: none; }
.track em, .pay.paid .track em, .wire em, .vault-top i { box-shadow: none; }
.scene.on .end-card.wallet { box-shadow: none; }
.plan.rec { border: 1.5px solid var(--gn-link); background: var(--gn-surface); box-shadow: none; }
.plan .tag { top: -12px; padding: 6px 10px; border-radius: 6px; background: var(--gn-ink); color: var(--gn-page); font: 500 12px/1 var(--gn-font); }

/* Hero card: a plain raised surface with a hairline, no glass, no colored glow */
.pay, .pay.paid {
  background: color-mix(in srgb, var(--gn-stage-ink) 3%, var(--gn-stage));
  box-shadow: 0 1px 2px rgba(11, 13, 20, .04), 0 16px 40px -16px rgba(11, 13, 20, .14);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.toast {
  background: var(--gn-stage);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 8px 24px -12px rgba(11, 13, 20, .18);
}
html.dark-mode .pay, html.dark-mode .toast,
[data-theme="dark"] .pay, [data-theme="dark"] .toast { box-shadow: none; }
.live-dot { animation: none; }

/* Type: sentence case section labels, no tracked mono; no negative tracking on small text */
.kicker { font: 500 14px/1 var(--gn-font); letter-spacing: 0; text-transform: none; color: var(--gn-muted); }
.define h2, .guides h3 { letter-spacing: 0; }

/* Details: tighter corners everywhere. Controls 8, cards 12, big panels 16 to 20. Round things
   (dots, toggles, coin icons) never used these tokens, so they stay round. */
:root { --gn-r-pill: 8px; --gn-r-ctl: 8px; --gn-r-card: 12px; --gn-r-stage: clamp(12px, 1.5vw, 20px); }
.pay { border-radius: 16px; }
.settled { border-radius: 8px; }
.langs li, .cycle em { border-radius: 6px; }
.cycle { border-radius: 10px; }
.cycle button { border-radius: 6px; }
html #cg-consent button { border-radius: 8px; }

/* Header: four click menus + Pricing, then the alert link, Sign in and Contact sales (Cloudflare pattern) */
.links { gap: 2px; padding: 0; border: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.links > a, .nav-drop > summary {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 8px;
  font-size: 14.5px; color: var(--gn-muted); text-decoration: none; list-style: none; cursor: pointer;
  transition: color .2s, background-color .2s;
}
.nav-drop > summary::-webkit-details-marker { display: none; }
.nav-drop > summary::after {
  content: ""; width: 6px; height: 6px; margin-top: -3px;
  border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform .2s, margin .2s;
}
.nav-drop[open] > summary::after { transform: rotate(-135deg); margin-top: 3px; }
.links > a:hover, .nav-drop > summary:hover, .nav-drop[open] > summary { color: var(--gn-ink); background: var(--gn-hairline); }
.nav-drop { position: relative; border: 0; }
.m-group { border: 0; }
.nav-drop > summary, .m-group > summary { justify-content: flex-start; font-weight: 400; }
.nav-drop > summary { padding-block: 8px; }
.nav-panel {
  position: absolute; top: calc(100% + 12px); left: 50%; z-index: 70; transform: translateX(-50%);
  display: grid; grid-template-columns: 260px; gap: 2px; padding: 8px;
  border-radius: 12px; border: 1px solid var(--gn-hairline); background: var(--gn-surface); box-shadow: var(--gn-shadow-float);
}
.nav-panel.two { grid-template-columns: repeat(2, 260px); grid-auto-flow: column; grid-template-rows: repeat(4, auto); }
.nav-panel a { display: grid; gap: 2px; padding: 10px 12px; border-radius: 8px; text-decoration: none; }
.nav-panel a:hover, .nav-panel a:focus-visible { background: var(--gn-surface-2); }
.nav-panel b { font: 500 14px/1.3 var(--gn-font); color: var(--gn-ink); }
.nav-panel span { font-size: 13px; line-height: 1.35; color: var(--gn-muted); }
.nav-right { gap: 8px; }
.nav-alert { display: inline-flex; align-items: center; gap: 8px; padding: 0 8px; font-size: 14.5px; color: #c2410c; text-decoration: none; }
.nav-alert:hover { text-decoration: underline; text-underline-offset: 3px; }
.nav-btn {
  display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 8px;
  border: 1px solid var(--gn-hairline-strong); font: 500 14px var(--gn-font); color: var(--gn-ink); text-decoration: none;
  transition: background-color .2s;
}
.nav-btn:hover { background: var(--gn-hairline); }
.icon-btn { border-radius: 8px; }
html.dark-mode .nav-alert, [data-theme="dark"] .nav-alert { color: #fb923c; }

/* Orange button opens a short answer: signup is the main action, the guide is second */
.nav-help > summary.nav-alert, .nav-help > summary.nav-alert:hover, .nav-help[open] > summary.nav-alert { color: #c2410c; }
html.dark-mode .nav-help > summary.nav-alert, html.dark-mode .nav-help > summary.nav-alert:hover, html.dark-mode .nav-help[open] > summary.nav-alert,
[data-theme="dark"] .nav-help > summary.nav-alert, [data-theme="dark"] .nav-help > summary.nav-alert:hover, [data-theme="dark"] .nav-help[open] > summary.nav-alert { color: #fb923c; }
.nav-help .help {
  position: absolute; top: calc(100% + 12px); left: 0; z-index: 70; display: grid; gap: 12px; width: 340px; padding: 20px;
  border-radius: 12px; border: 1px solid var(--gn-hairline); background: var(--gn-surface); box-shadow: var(--gn-shadow-float);
}
.help-line { margin: 0; padding: 0; font-size: 15px; line-height: 1.5; color: var(--gn-ink); }
.help .help-cta { width: 100%; min-height: 44px; padding: 12px 16px; line-height: 1.2; text-align: center; color: #fff; }
.help-note { font-size: 13px; text-align: center; color: var(--gn-muted); }
.help .help-guide { padding: 0; font-size: 14px; text-align: center; color: var(--gn-muted); text-decoration: underline; text-underline-offset: 3px; }
.help .help-guide:hover { color: var(--gn-ink); background: none; }
@media (max-width: 1240px) { .nav-right .lang-switch { display: none; } }
@media (max-width: 1120px) { .nav-right .nav-alert span { display: none; } }
@media (max-width: 860px) { .nav-right .nav-alert, .nav-right .nav-btn { display: none; } }

/* Mobile sheet: one group per menu */
.m-group > summary { display: block; padding: 12px 14px; border-radius: 8px; font-size: 16px; color: var(--gn-ink); list-style: none; cursor: pointer; }
.m-group > summary::-webkit-details-marker { display: none; }
.m-group[open] > summary { color: var(--gn-muted); }
.m-group > div { display: grid; padding: 0 0 8px 12px; }
.mobile-menu .nav-alert { display: flex; padding: 12px 14px; font-size: 16px; color: #c2410c; }
.mobile-menu .m-group[open] > summary.nav-alert { color: #c2410c; }
.mobile-menu .nav-help .help { position: static; width: auto; padding: 4px 14px 12px; border: 0; background: none; box-shadow: none; }
html.dark-mode .mobile-menu .nav-alert, [data-theme="dark"] .mobile-menu .nav-alert, html.dark-mode .mobile-menu .m-group[open] > summary.nav-alert, [data-theme="dark"] .mobile-menu .m-group[open] > summary.nav-alert { color: #fb923c; }

/* Hero card: block confirmations count up before the money is settled */
.confs { display: flex; align-items: center; gap: 12px; margin-top: 16px; font: 13px var(--gn-mono); color: var(--gn-stage-muted); font-variant-numeric: tabular-nums; }
.confs-bar { display: flex; gap: 4px; }
.confs-bar i { width: 20px; height: 6px; border-radius: 2px; background: var(--gn-stage-line); transition: background-color .3s; }
.confs-bar i.on { background: #22c55e; }

/* Motion: hovers change surface, nothing lifts */
.tile:hover { border-color: var(--gn-hairline-strong); transform: none; }

/* "Untouchable by design" panel: one ledger language for all three tabs, sized to fill the panel.
   Tab 1 compares the two paths (the processor lane waits in the middle), tabs 2 and 3 are records. */
.seq .panel { aspect-ratio: auto; align-self: stretch; min-height: 520px; padding: clamp(24px, 4vw, 48px); }
.paths, .ledger { width: min(520px, 100%); }
.paths { display: grid; gap: 40px; }
.paths-h { margin: 0; font: 13px var(--gn-mono); color: var(--gn-stage-muted); }
.lane { display: grid; gap: 12px; }
.lane-name { font: 500 15px var(--gn-font); }
.lane-row { display: flex; align-items: center; }
.stop {
  flex: none; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--gn-stage-line);
  background: color-mix(in srgb, var(--gn-stage-ink) 3%, var(--gn-stage)); font-size: 15px; white-space: nowrap;
}
.lseg { position: relative; flex: 1; min-width: 20px; height: 2px; margin-inline: 8px; overflow: hidden; background: var(--gn-stage-line); }
.lseg i { position: absolute; inset: 0; background: var(--gn-link); transform: scaleX(0); transform-origin: left; }
.lane-note { font-size: 14px; color: var(--gn-stage-muted); }
.scene.on .slow .s1 i { animation: gn-s1 7s infinite; }
.scene.on .slow .hold { animation: gn-hold 7s infinite; }
.scene.on .slow .s2 i { animation: gn-s2 7s infinite; }
.scene.on .slow .end { animation: gn-land-late 7s infinite; }
.scene.on .fast .s1 i { animation: gn-fast 7s infinite; }
.scene.on .fast .end { animation: gn-land 7s infinite; }
@keyframes gn-s1 { 0%, 6% { transform: scaleX(0); } 18%, 92% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes gn-s2 { 0%, 58% { transform: scaleX(0); } 72%, 92% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes gn-fast { 0%, 6% { transform: scaleX(0); } 20%, 92% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes gn-hold {
  0%, 18%, 60%, 100% { border-color: var(--gn-stage-line); background: color-mix(in srgb, var(--gn-stage-ink) 3%, var(--gn-stage)); }
  21%, 57% { border-color: rgba(217, 119, 6, .55); background: rgba(217, 119, 6, .12); }
}
@keyframes gn-land {
  0%, 20%, 100% { border-color: var(--gn-stage-line); background: color-mix(in srgb, var(--gn-stage-ink) 3%, var(--gn-stage)); }
  23%, 92% { border-color: rgba(34, 197, 94, .5); background: rgba(34, 197, 94, .12); }
}
@keyframes gn-land-late {
  0%, 72%, 100% { border-color: var(--gn-stage-line); background: color-mix(in srgb, var(--gn-stage-ink) 3%, var(--gn-stage)); }
  75%, 92% { border-color: rgba(34, 197, 94, .5); background: rgba(34, 197, 94, .12); }
}

.ledger { overflow: hidden; border-radius: 12px; border: 1px solid var(--gn-stage-line); background: color-mix(in srgb, var(--gn-stage-ink) 3%, var(--gn-stage)); }
.ledger code { font: 13px var(--gn-mono); color: var(--gn-stage-muted); }
.ledger-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--gn-stage-line); font: 500 15px var(--gn-font); }
.ledger-sub { margin: 0; padding: 14px 20px 0; font-size: 13px; color: var(--gn-stage-muted); }
.ledger ul { display: grid; margin: 0; padding: 4px 20px 8px; list-style: none; }
.ledger li {
  display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--gn-stage-line);
  font-size: 14px; opacity: 0; transform: translateY(4px); transition: opacity .4s, transform .4s;
}
.ledger li:last-child { border-bottom: 0; }
.ledger li b { font: 500 13px var(--gn-mono); text-align: right; }
.scene.on .ledger li { opacity: 1; transform: none; }
.scene.on .ledger li:nth-child(2) { transition-delay: .15s; }
.scene.on .ledger li:nth-child(3) { transition-delay: .3s; }
.scene.on .ledger li:nth-child(4) { transition-delay: .45s; }
.ledger-f { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 20px; border-top: 1px solid var(--gn-stage-line); font-size: 14px; color: var(--gn-stage-muted); opacity: 0; transition: opacity .5s .8s; }
.ledger-f b { font-weight: 500; color: var(--gn-stage-ink); text-align: right; }
.ledger-f.ok b::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: #22c55e; }
.scene.on .ledger-f { opacity: 1; }
@media (max-width: 480px) {
  .stop { padding: 6px 8px; font-size: 13px; }
  .lseg { margin-inline: 4px; }
  .seq .panel { min-height: 0; }
}

/* Supported wallets, names only: logos would read as partnerships we don't have */
.wallets { max-width: 760px; margin: 48px auto 0; text-align: center; }
.wallets h3 { margin: 0 0 16px; font-size: 20px; font-weight: 500; letter-spacing: -.01em; }
.wallets ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.wallets li { padding: 8px 12px; border: 1px solid var(--gn-hairline-strong); border-radius: 8px; font-size: 14px; }
.wallets p { margin: 0; font-size: 14px; color: var(--gn-muted); text-wrap: pretty; }