@import url("https://fonts.googleapis.com/css2?family=Unbounded:wght@500;600;700&family=Instrument+Sans:wght@400;500;600;700&family=Noto+Sans+Georgian:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap");

/* Tokens. The --amber* names are historical (the brand has been blue for a
   long time) — kept so the admin/pay styles below don't all need renaming.
   --signal is the NFC-field cyan from the logo: reserved for "something is
   live/connecting" moments, not general decoration. */
:root {
  --font-display: "Unbounded", "Noto Sans Georgian", system-ui, sans-serif;
  --font-body: "Instrument Sans", "Noto Sans Georgian", system-ui, sans-serif;

  --ink: #eff1f6;
  --ink-2: #ffffff;
  --ink-3: #f5f7fa;
  --line: #e0e4ec;
  --line-soft: #ebeef4;
  --text: #101a30;
  --muted: #616d84;
  --muted-dim: #939dae;
  --amber: #1a4dbd;
  --amber-bright: #1a4dbd;
  --amber-edge: #113a94;
  --blue-dark: #113a94;
  --blue-soft: #e9edf9;
  --signal: #22c7e0;
  --paper: #fcfcfd;
  --green: #16a34a;
  --green-soft: #e8f7ee;
  --red: #dc2626;
  --red-soft: #fdeeed;

  --raise-1: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(16,26,48,.04), 0 12px 28px -18px rgba(16,26,48,.18);
  --raise-2: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 4px rgba(16,26,48,.04), 0 30px 56px -28px rgba(16,26,48,.28);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --ink: #0a1226;
  --ink-2: #111c36;
  --ink-3: #0e1830;
  --line: #22304f;
  --line-soft: #1a2643;
  --text: #eaf0fa;
  --muted: #8d9ab5;
  --muted-dim: #5f6c88;
  --amber: #3f7bf0;
  --amber-bright: #6e9bff;
  --amber-edge: #1f4db8;
  --blue-dark: #9dbaff;
  --blue-soft: rgba(91, 140, 255, 0.15);
  --green: #34d399;
  --green-soft: rgba(52, 211, 153, 0.14);
  --red: #f87171;
  --red-soft: rgba(248, 113, 113, 0.14);

  --raise-1: inset 0 1px 0 rgba(255,255,255,.04), 0 12px 28px -16px rgba(0,0,0,.7);
  --raise-2: inset 0 1px 0 rgba(255,255,255,.05), 0 30px 60px -28px rgba(0,0,0,.8);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background-color: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  width: 100%;
}

/* A faint fibre grain over the page ground, so it reads as paper stock
   rather than flat screen white — the same material the receipt and the
   torn band are made of. Fixed attachment keeps it from swimming as the
   page scrolls. Subtle enough to register as texture, not pattern. */
body {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.035'/%3E%3C/svg%3E");
  background-attachment: fixed;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, select { font-family: inherit; }
ul { list-style: none; margin: 0; padding: 0; }

/* Unbounded is a wide face — at 500 it reads composed and editorial;
   at 600+ the same words start shouting. */
h1, h2, .display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.022em;
}
h3, h4 { font-family: var(--font-body); font-weight: 600; letter-spacing: -0.005em; }
p { text-wrap: pretty; }

:focus-visible { outline: 2px solid var(--amber-bright); outline-offset: 3px; }

.circuit-bg {
  background-color: var(--ink);
  min-height: 100vh;
}

.container { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.container-sm { max-width: 720px; margin: 0 auto; padding: 0 24px; }
.container-md { max-width: 880px; margin: 0 auto; padding: 0 24px; }

.glass-panel {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--raise-1);
}

/* Buttons are physical keycaps: a thick bottom edge the face sits on top
   of. Hovering lifts the cap slightly (the edge deepens, anticipating a
   press); clicking drives it past that rest position down onto the edge,
   almost flattening the shadow, then it springs back on release. */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.005em;
  padding: 13px 26px;
  border: 1px solid transparent;
  transform: translateY(0);
  transition: transform .1s cubic-bezier(.34, 1.56, .64, 1), box-shadow .1s cubic-bezier(.34, 1.56, .64, 1), background .15s, border-color .15s, color .15s;
}
.btn-primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--amber) 90%, #fff) 0%, var(--amber) 55%, color-mix(in srgb, var(--amber) 92%, #000) 100%);
  color: #ffffff;
  border-color: var(--amber-edge);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.3),
    inset 0 -2px 3px rgba(0,0,0,.1),
    0 5px 0 var(--amber-edge),
    0 8px 16px -6px rgba(26,77,189,.3);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -2px 3px rgba(0,0,0,.1), 0 7px 0 var(--amber-edge), 0 14px 22px -8px rgba(26,77,189,.38); }
.btn-primary:active {
  transform: translateY(4px);
  transition-duration: .04s;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.22), 0 1px 0 var(--amber-edge), 0 2px 6px -2px rgba(26,77,189,.3);
}
.btn-outline {
  border-color: var(--line);
  color: var(--text);
  background: linear-gradient(180deg, var(--ink-2) 0%, color-mix(in srgb, var(--ink-2) 95%, var(--text)) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 3px 0 var(--line), 0 8px 14px -12px rgba(16,26,48,.3);
}
.btn-outline:hover { border-color: var(--amber); color: var(--amber-bright); transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 5px 0 var(--line), 0 12px 16px -12px rgba(16,26,48,.34); }
.btn-outline:active {
  transform: translateY(2px);
  transition-duration: .04s;
  box-shadow: inset 0 1px 3px rgba(16,26,48,.12), 0 1px 0 var(--line);
}
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
.btn-lg { font-size: 15px; padding: 16px 30px; }
.btn-block { width: 100%; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--ink-2) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line-soft);
}
.site-header .header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 24px;
}
@media (max-width: 420px) {
  .site-header .header-inner { padding: 12px 24px; gap: 8px; }
  .mobile-quick-bar { margin-right: 0; margin-left: auto; gap: 6px; }
  .menu-toggle { width: 40px; height: 40px; padding: 0; align-items: center; justify-content: center; }
}
.logo { display: flex; align-items: center; gap: 10px; }
.logo-mark {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
}
.logo-mark svg, .logo-mark img { width: 100%; height: 100%; display: block; }
.logo-word { font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: -0.02em; white-space: nowrap; }
@media (max-width: 420px) { .site-header .logo-word { font-size: 13px; } .site-header .logo-mark { width: 28px; height: 28px; } }
.logo-word .accent { font-weight: 500; color: var(--muted); }
.logo-sm .logo-mark { width: 26px; height: 26px; }
.logo-sm .logo-word { font-size: 15px; }
.logo-lg .logo-mark { width: 60px; height: 60px; }
.logo-lg .logo-word { font-size: 30px; }

.nav-links { display: none; align-items: center; gap: 32px; }
.nav-links a { font-size: 14px; font-weight: 500; color: var(--muted); }
.nav-links a:hover { color: var(--text); }
.header-actions { display: none; align-items: center; gap: 12px; }
.mobile-quick-bar { display: flex; align-items: center; gap: 8px; margin-right: 16px; }
.menu-toggle {
  display: flex; border: 1.5px solid var(--line); border-radius: 8px;
  padding: 8px; background: transparent; color: var(--text);
}
.mobile-nav { display: none; border-top: 1px solid var(--line-soft); padding: 12px 24px 16px; }
.mobile-nav a, .mobile-nav .btn { display: block; padding: 12px; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--muted); text-align: center; }
.mobile-nav a:hover { background: var(--ink-3); color: var(--text); }
/* .mobile-nav .btn above wins over .btn-primary's own white text (two
   classes beats one) — put it back, or "Get Started" reads as blue text
   on a blue button. */
.mobile-nav .btn-primary { color: #ffffff; }
.mobile-nav.open { display: block; }

@media (min-width: 768px) {
  .nav-links { display: flex; }
  .header-actions { display: flex; }
  .mobile-quick-bar { display: none; }
  .menu-toggle { display: none; }
}

/* ---------- Hero ---------- */
.hero { padding: 40px 0 32px; }
.hero-grid { max-width: 1160px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
.hero-kicker { display: inline-flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 1.4; font-weight: 500; color: var(--muted); margin: 0 0 18px; }
.hero-kicker i, .hero-kicker svg { color: var(--amber-bright); flex-shrink: 0; margin-top: 2px; }
.hero h1 { font-size: clamp(26px, 7.2vw, 34px); line-height: 1.08; margin: 0 0 18px; max-width: 17ch; text-wrap: balance; }
.hero p.lead { max-width: 50ch; color: var(--muted); font-size: 16px; line-height: 1.6; margin: 0 0 26px; }
@media (min-width: 640px) {
  .hero-kicker { margin-bottom: 22px; }
  .hero h1 { font-size: clamp(34px, 4.3vw, 54px); line-height: 1.06; margin-bottom: 24px; }
  .hero p.lead { font-size: 17px; line-height: 1.72; margin-bottom: 34px; }
}
.hero-auto {
  display: flex; align-items: flex-start; gap: 10px;
  max-width: 50ch;
  margin: -8px 0 28px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--blue-soft);
  border: 1px solid color-mix(in srgb, var(--amber) 22%, var(--line));
  font-size: 14px; line-height: 1.5; color: var(--text);
}
.hero-auto svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--amber-bright); margin-top: 2px; }
.hero-auto strong { font-weight: 700; color: var(--amber-bright); }
@media (min-width: 640px) { .hero-auto { margin: -12px 0 32px; font-size: 15px; } }
.hero-ctas { display: flex; flex-direction: column; gap: 12px; }
.hero-ctas .btn { width: 100%; }

@media (min-width: 640px) {
  .hero-ctas { flex-direction: row; }
  .hero-ctas .btn { width: auto; }
}
@media (min-width: 1024px) {
  .hero { padding: 56px 0 40px; }
  .hero-grid { grid-template-columns: 1fr 1fr; gap: 56px; }
}

/* ---------- Hero stage: a dim restaurant table, lit from above ----------
   Everything here is CSS 3D (no WebGL, no images): the tag and the phone
   are stacks of real layers at different translateZ depths, so they keep
   their thickness at any angle the pointer tilts them to. */
.hero-stage {
  position: relative;
  height: 340px;
  border-radius: 24px;
  overflow: hidden;
  perspective: 1300px;
  perspective-origin: 50% 35%;
  background:
    radial-gradient(60% 45% at 50% 70%, rgba(255,186,110,.16) 0%, transparent 100%),
    radial-gradient(85% 70% at 50% 28%, #23304d 0%, #141f36 48%, #0a0f1d 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 40px 70px -44px rgba(16,26,48,.6);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
:root[data-theme="dark"] .hero-stage {
  background: radial-gradient(85% 70% at 50% 28%, #243a6b 0%, #142a52 48%, #0b1530 100%);
  box-shadow: inset 0 0 0 1px var(--line), 0 40px 70px -40px rgba(0,0,0,.9);
}
@media (min-width: 640px) { .hero-stage { height: 480px; border-radius: 28px; } }

.stage-tilt {
  position: absolute;
  left: 50%; top: 50%;
  width: 460px; height: 460px;
  margin: -230px 0 0 -230px;
  transform-style: preserve-3d;
  --s: .72;
  transform: scale(var(--s)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
@media (min-width: 640px) { .stage-tilt { --s: 1; } }

.tabletop {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform: translate(-34px, 112px) rotateX(64deg) rotateZ(-32deg);
}
/* The pool of light the pendant lamp throws on the table. Warm, because
   dining rooms are lit warm — the only cold light in the scene is the
   NFC field and the phone, which is the point: the tech is the blue
   thing arriving into a warm room. */
.tabletop::before {
  content: ""; position: absolute; inset: -35%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,205,140,.3), rgba(255,180,105,.1) 52%, transparent 100%);
}

.nfc-tag {
  position: absolute; left: 50%; top: 50%;
  width: 170px; height: 170px; margin: -85px 0 0 -85px;
  transform-style: preserve-3d;
}
.tag-layer {
  position: absolute; inset: 0; border-radius: 28px;
  background: #1b3572;
  transform: translateZ(var(--z));
}
.tag-layer:first-child { box-shadow: 0 0 40px 6px rgba(2,6,20,.55); }
.tag-top {
  position: absolute; inset: 0; border-radius: 28px;
  transform: translateZ(18px);
  background: linear-gradient(145deg, rgba(255,255,255,.34), rgba(255,255,255,.05) 55%), #1d3f86;
  border: 1px solid rgba(255,255,255,.3);
  box-shadow: inset 0 0 34px rgba(34,199,224,.16);
}
.coil { position: absolute; inset: 16px; width: calc(100% - 32px); height: calc(100% - 32px); overflow: visible; }
.coil rect { fill: none; stroke: var(--signal); stroke-width: 4; opacity: .45; transition: opacity .4s ease; }
.hero-stage.is-reading .coil rect,
.hero-stage.is-paid .coil rect { opacity: 1; }
.hero-stage.is-reading .coil { filter: drop-shadow(0 0 6px rgba(34,199,224,.9)); }

/* The NFC field: rounded squares, not circles, echoing the coil. */
.wave {
  position: absolute; inset: 10px; border-radius: 30px;
  border: 2px solid var(--signal);
  opacity: 0;
  transform: translateZ(19px) scale(.7);
  pointer-events: none;
}
.hero-stage.is-reading .wave { animation: nfc-wave 1.3s cubic-bezier(.2,.6,.3,1) forwards; }
.hero-stage.is-reading .wave:nth-of-type(2) { animation-delay: .22s; }
.hero-stage.is-reading .wave:nth-of-type(3) { animation-delay: .44s; }
@keyframes nfc-wave {
  0% { opacity: .95; transform: translateZ(19px) scale(.7); }
  100% { opacity: 0; transform: translateZ(19px) scale(2.1); }
}

.phone-shadow {
  position: absolute; left: 50%; top: 50%;
  width: 140px; height: 250px; margin: -210px 0 0 -30px;
  border-radius: 40px;
  background: rgba(2,6,22,.7);
  filter: blur(22px);
  opacity: .35;
  transform: translateZ(1px) rotateZ(10deg);
  transition: opacity .85s ease, filter .85s ease, transform .85s ease;
}
.hero-stage.is-tapping .phone-shadow { opacity: .75; filter: blur(12px); transform: translateZ(1px) rotateZ(10deg) translate(-10px, 40px); }

.phone {
  position: absolute; left: 50%; top: 40px;
  width: 160px; height: 300px; margin-left: 6px;
  transform-style: preserve-3d;
  transform: translate3d(0, -10px, 90px) rotateX(14deg) rotateY(-26deg) rotateZ(9deg);
  transition: transform .85s cubic-bezier(.25, .8, .25, 1);
}
.hero-stage.is-tapping .phone { transform: translate3d(-34px, 44px, 60px) rotateX(34deg) rotateY(-26deg) rotateZ(9deg); }
.hero-stage.is-paid .phone { transform: translate3d(0, 0, 90px) rotateX(14deg) rotateY(-26deg) rotateZ(9deg); }
.phone-layer {
  position: absolute; inset: 0; border-radius: 30px;
  background: #060b1a;
  transform: translateZ(var(--z));
}
.phone-body {
  position: absolute; inset: 0; border-radius: 30px; padding: 7px;
  background: linear-gradient(160deg, #3a4a70 0%, #111a33 38%, #0a1022 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
.phone-screen {
  position: relative;
  height: 100%; border-radius: 24px;
  background: #e8eef8; color: #101a30;
  overflow: hidden;
}

/* Step 1: before the tap, the phone is just waiting for the tag. */
.ps-idle {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 0 18px; text-align: center;
  transition: opacity .3s ease, transform .3s ease;
}
.ps-idle p { margin: 0; font-size: 11.5px; line-height: 1.35; font-weight: 600; color: #3c4a66; }
.ps-idle-icon {
  width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; color: #1a4dbd;
  box-shadow: 0 6px 16px -8px rgba(31,91,216,.45);
  transition: box-shadow .3s ease, color .3s ease;
}
.hero-stage.is-reading .ps-idle-icon { color: #0aa6c0; box-shadow: 0 0 0 6px rgba(34,199,224,.2), 0 0 24px rgba(34,199,224,.6); }
.hero-stage.is-bill .ps-idle { opacity: 0; transform: scale(.92); }

/* Step 2: the tag is read and the bill pops up as a sheet. */
.ps-bill {
  position: absolute; left: 0; right: 0; bottom: 0; top: 12px;
  border-radius: 18px 18px 0 0;
  background: #fff;
  padding: 22px 14px 14px;
  display: flex; flex-direction: column;
  box-shadow: 0 -10px 24px -12px rgba(13,27,62,.3);
  transform: translateY(104%);
  transition: transform .6s cubic-bezier(.18, .9, .32, 1.18);
}
.ps-bill::before {
  content: ""; position: absolute; top: 7px; left: 50%;
  width: 34px; height: 4px; margin-left: -17px; border-radius: 2px;
  background: #d5dcea;
}
.hero-stage.is-bill .ps-bill { transform: translateY(0); }

.ps-table { font-family: var(--font-display); font-weight: 600; font-size: 15px; margin: 0 0 14px; letter-spacing: -0.02em; }
.ps-items li { display: flex; justify-content: space-between; gap: 8px; font-size: 10.5px; line-height: 1.3; padding: 7px 0; border-bottom: 1px solid #e3e9f3; color: #3c4a66; }
.ps-items li span:last-child { font-variant-numeric: tabular-nums; color: #101a30; font-weight: 600; }
.ps-total { display: flex; justify-content: space-between; align-items: baseline; margin: auto 0 10px; font-size: 11px; color: #5b6780; }
.ps-total strong { font-family: var(--font-display); font-size: 17px; color: #101a30; letter-spacing: -0.02em; }
.ps-btn {
  position: relative; height: 36px; border-radius: 10px;
  background: #1a4dbd; color: #fff;
  box-shadow: 0 3px 0 #113a94;
  display: grid; place-items: center;
  font-size: 11.5px; font-weight: 600;
  overflow: hidden;
  transition: transform .12s ease, box-shadow .12s ease;
}

/* Step 3: a fingertip presses Pay. */
.hero-stage.is-pressing .ps-btn { transform: translateY(2px); box-shadow: 0 1px 0 #113a94; }
.ps-tap {
  position: absolute; left: 50%; top: 50%;
  width: 30px; height: 30px; margin: -15px 0 0 -15px;
  border-radius: 50%;
  background: rgba(255,255,255,.45);
  border: 2px solid rgba(255,255,255,.9);
  opacity: 0;
  pointer-events: none;
}
.hero-stage.is-pressing .ps-tap { animation: ps-tap .7s ease-out forwards; }
@keyframes ps-tap {
  0% { opacity: 0; transform: scale(1.5); }
  30% { opacity: 1; transform: scale(.8); }
  100% { opacity: 0; transform: scale(2.3); }
}

/* Step 4: paid. */
.ps-paid {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  background: #16a34a;
  opacity: 0;
  transition: opacity .3s ease;
}
.ps-paid svg { transform: scale(.3); transition: transform .45s cubic-bezier(.2, 1.7, .4, 1); }
.hero-stage.is-paid .ps-paid { opacity: 1; }
.hero-stage.is-paid .ps-paid svg { transform: scale(1); }

/* Replaying jumps back to the start instantly instead of animating backwards. */
.hero-stage.is-resetting,
.hero-stage.is-resetting * { transition: none !important; animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  .stage-tilt, .phone, .phone-shadow, .ps-paid, .ps-paid svg, .coil rect,
  .ps-idle, .ps-idle-icon, .ps-bill, .ps-btn { transition: none; }
  .hero-stage.is-reading .wave, .hero-stage.is-pressing .ps-tap { animation: none; }
}

/* ---------- Section headers ---------- */
.section { padding: 64px 0; }
@media (min-width: 768px) { .section { padding: 88px 0; } }
.section-head { max-width: 640px; margin: 0 0 48px; }
.section-head h2 { font-size: clamp(24px, 3vw, 34px); line-height: 1.16; margin: 0 0 16px; text-wrap: balance; }
.section-head p { color: var(--muted); margin: 0; font-size: 16px; line-height: 1.7; max-width: 52ch; }

/* ---------- Trust strip ----------
   Proof sits between the hero and the ask. Hairline-separated row, no
   cards — it should read as a quiet statement of fact, not a feature
   grid competing with the sections around it. */
.trust-strip {
  background: var(--ink-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.trust-list { display: grid; grid-template-columns: 1fr; }
.trust-list li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 0;
  font-size: 14px; line-height: 1.45; color: var(--muted);
  border-bottom: 1px solid var(--line-soft);
  text-wrap: pretty;
}
.trust-list li:last-child { border-bottom: 0; }
.trust-list svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--amber-bright); stroke-width: 1.75; margin-top: 1px; }
@media (min-width: 760px) {
  .trust-list { grid-template-columns: repeat(4, 1fr); }
  .trust-list li {
    flex-direction: column; gap: 12px;
    padding: 28px 26px;
    border-bottom: 0;
    border-left: 1px solid var(--line-soft);
  }
  .trust-list li:first-child { border-left: 0; padding-left: 0; }
  .trust-list li:last-child { padding-right: 0; }
}

/* A band of real receipt paper torn across the page. The tooth pattern is
   the same one the pricing receipt ends in — repeating it here makes it
   the page's own structural device rather than a one-off flourish. The
   teeth are cut in the page's ground colour, so the paper reads as torn
   rather than drawn. */
.paper-band {
  position: relative;
  background: var(--ink-2);
  margin: 24px 0;
}
.paper-band::before,
.paper-band::after {
  content: ""; position: absolute; left: 0; right: 0; height: 10px;
  pointer-events: none;
}
.paper-band::before {
  top: 0;
  background: conic-gradient(from -45deg at 50% 100%, var(--ink) 90deg, transparent 0) 0 0 / 18px 10px repeat-x;
}
.paper-band::after {
  bottom: 0;
  background: conic-gradient(from 135deg at 50% 0, var(--ink) 90deg, transparent 0) 0 0 / 18px 10px repeat-x;
}

/* ---------- Features: quiet on purpose, the hero carries the page ---------- */
.feature-grid { margin: 0; display: grid; grid-template-columns: 1fr; column-gap: 64px; }
.feature { padding: 26px 0 30px; border-top: 1px solid var(--line-soft); }
.feature dt { font-size: 17px; font-weight: 600; margin: 0 0 9px; }
.feature dd { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.7; max-width: 50ch; }
@media (min-width: 768px) { .feature-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- Pricing: the receipt ---------- */
.pricing-layout { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; }
@media (min-width: 900px) { .pricing-layout { grid-template-columns: 1fr 1fr; gap: 64px; } }
.pricing-copy h2 { font-size: clamp(24px, 3vw, 34px); line-height: 1.16; margin: 0 0 18px; text-wrap: balance; }
.pricing-copy p { color: var(--muted); font-size: 16px; line-height: 1.72; margin: 0; max-width: 46ch; }

/* The receipt you read stays perfectly straight: any rotation or 3D tilt
   makes the browser draw the text as a warped bitmap, which blurs it. The
   depth comes from a blank second sheet tilted behind it instead — there's
   no text on that one to lose sharpness. */
.receipt-wrap { position: relative; display: flex; justify-content: center; padding: 8px 0 24px; }
.receipt-wrap::before {
  content: ""; position: absolute;
  left: 50%; top: 18px; bottom: 90px;
  width: min(100%, 420px);
  transform: translateX(-50%) rotate(4deg);
  border-radius: 8px;
  background: #dde5f1;
  box-shadow: 0 24px 40px -24px rgba(13,27,62,.35);
}
:root[data-theme="dark"] .receipt-wrap::before { background: #3a4a6b; box-shadow: 0 24px 40px -24px rgba(0,0,0,.8); }
.receipt {
  position: relative;
  width: 100%; max-width: 420px;
  background: var(--paper);
  color: #101a30;
  padding: 26px 26px 20px;
  border-radius: 6px 6px 0 0;
  box-shadow: 0 1px 2px rgba(13,27,62,.08), 0 30px 50px -22px rgba(13,27,62,.4);
}
:root[data-theme="dark"] .receipt { box-shadow: 0 30px 50px -20px rgba(0,0,0,.75); }
@media (max-width: 640px) { .receipt { padding: 22px 20px 18px; } }
/* Torn/perforated bottom edge. */
.receipt::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 9px;
  background: conic-gradient(from -45deg at 50% 100%, var(--paper) 90deg, transparent 0) 0 0 / 18px 9px repeat-x;
}
.receipt-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding-bottom: 16px; margin-bottom: 4px;
  border-bottom: 1px dashed #d6dce8;
  font-size: 13px; color: #56617a;
}
.receipt-head .logo-word { font-size: 14px; color: #101a30; }
.receipt-head .logo-word .accent { color: #46526b; }
/* Label and price share the first row, like a real receipt line; the
   description runs full width underneath instead of being squeezed into
   a narrow column beside the price. */
.receipt-lines li {
  display: grid; grid-template-columns: 1fr auto; column-gap: 16px; align-items: baseline;
  padding: 15px 0;
  border-bottom: 1px dashed #e0e5ee;
}
.receipt-lines li > div { display: contents; }
.receipt-lines strong { grid-column: 1; grid-row: 1; font-size: 15.5px; font-weight: 600; }
.receipt-lines .rv { grid-column: 2; grid-row: 1; font-weight: 700; font-size: 14.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.receipt-lines small { grid-column: 1 / -1; grid-row: 2; margin-top: 4px; font-size: 13.5px; line-height: 1.5; color: #46526b; }
.receipt-total {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding-top: 18px;
  font-size: 14px; font-weight: 600;
}
.receipt-total strong { font-family: var(--font-display); font-size: 36px; font-weight: 500; letter-spacing: -0.03em; color: #1a4dbd; }

/* ---------- Contact ---------- */
.contact-layout { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; }
.contact-layout h2 { font-size: clamp(24px, 3vw, 34px); line-height: 1.16; margin: 0 0 18px; text-wrap: balance; }
.contact-layout > div > p { color: var(--muted); font-size: 16px; line-height: 1.72; margin: 0 0 26px; max-width: 46ch; }
.check-list li { display: flex; align-items: flex-start; gap: 10px; color: var(--text); font-size: 15px; padding: 6px 0; }
.check-list li i, .check-list li svg { color: var(--amber-bright); flex-shrink: 0; margin-top: 2px; }
@media (min-width: 1024px) { .contact-layout { grid-template-columns: 1fr 1fr; gap: 64px; } }

.form-card { padding: 22px; border-radius: 20px; box-shadow: var(--raise-2); }
@media (min-width: 640px) { .form-card { padding: 30px; } }
.form-card h3 { margin: 0 0 4px; font-size: 20px; font-weight: 600; }
.form-card > p { margin: 0 0 20px; font-size: 13px; color: var(--muted); }
.form-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .form-grid { grid-template-columns: 1fr 1fr; } }
.field { display: block; }
.field.full { grid-column: 1 / -1; }
.field label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
/* Inputs are the inverse of buttons: recessed into the surface. */
.field-input {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); background: var(--ink-3); border-radius: 11px; padding: 12px 14px;
  box-shadow: inset 0 2px 3px rgba(13,27,62,.06);
}
.field-input:focus-within { border-color: var(--amber); background: var(--ink-2); box-shadow: inset 0 2px 3px rgba(13,27,62,.04), 0 0 0 3px var(--blue-soft); }
.field-checkbox { display: flex; align-items: center; gap: 9px; }
.field-checkbox input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--amber); flex-shrink: 0; }
.field-checkbox span { font-size: 13px; font-weight: 600; color: var(--text); }
.field-input .icon { color: var(--muted); flex-shrink: 0; }
.field-input input, .field-input select { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--text); font-size: 14px; width: 100%; }
.field-input input::placeholder { color: var(--muted-dim); }
.form-error { color: var(--red); font-size: 13px; margin: 12px 0 0; }
.form-success { text-align: center; padding: 40px 20px; }
.form-success .icon-wrap { width: 52px; height: 52px; border-radius: 50%; background: var(--green-soft); color: var(--green); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.form-success h3 { margin: 0 0 8px; font-size: 20px; font-weight: 600; }
.form-success p { color: var(--muted); font-size: 13px; max-width: 320px; margin: 0 auto; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line-soft); background: var(--ink-3); padding: 48px 24px 24px; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 32px; max-width: 1160px; margin: 0 auto; }
.footer-grid p.desc { max-width: 340px; color: var(--muted); font-size: 13px; line-height: 1.6; margin: 16px 0 20px; }
.social-row { display: flex; gap: 10px; }
.social-row a { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--muted); background: var(--ink-2); }
.footer-col h4 { font-family: var(--font-body); font-size: 14px; font-weight: 600; margin: 0 0 16px; }
.footer-col ul li { padding: 6px 0; font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 8px; overflow-wrap: anywhere; }
.footer-col a:hover { color: var(--text); }
.footer-bottom { max-width: 1160px; margin: 40px auto 0; padding-top: 20px; border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 8px; font-size: 12px; color: var(--muted); text-align: center; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } .footer-bottom { flex-direction: row; justify-content: space-between; } }

/* ---------- Privacy ---------- */
.privacy-hero { margin-bottom: 48px; }
.privacy-hero h1 { font-size: 32px; font-weight: 600; margin: 16px 0; letter-spacing: -0.015em; }
.privacy-hero p { color: var(--muted); font-size: 14px; max-width: 60ch; line-height: 1.6; }
.privacy-section { padding: 28px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(16,24,43,0.05); }
.privacy-section-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.privacy-section-head .icon-box { width: 38px; height: 38px; border-radius: 8px; background: var(--blue-soft); color: var(--amber-bright); display: flex; align-items: center; justify-content: center; }
.privacy-section-head h2 { font-size: 17px; font-weight: 600; margin: 0; }
.privacy-section p { font-size: 14px; line-height: 1.7; color: var(--muted); margin: 0 0 12px; }
.privacy-section p:last-child { margin-bottom: 0; }

/* ---------- Pay flow ---------- */
.pay-page { max-width: 480px; margin: 0 auto; min-height: 100vh; background: var(--ink-3); }
.pay-header { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background: color-mix(in srgb, var(--ink-2) 94%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line-soft); }
.tag-pill { border-radius: 999px; background: var(--blue-soft); border: 1px solid var(--line); padding: 4px 10px; font-size: 10px; font-weight: 700; color: var(--amber-bright); }
.pay-body { padding: 20px 16px 150px; }
.pay-card { padding: 20px; margin-bottom: 16px; background: var(--ink-2); box-shadow: 0 1px 3px rgba(16,24,43,0.06); }
.pay-card-head { display: flex; justify-content: space-between; align-items: flex-start; }
.pay-card-head p.name { font-family: var(--font-body); font-size: 19px; font-weight: 600; margin: 0; }
.pay-card-head p.meta { font-size: 12px; color: var(--muted); margin: 4px 0 0; }
.pay-items { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.pay-total { display: flex; justify-content: space-between; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line-soft); font-weight: 700; font-size: 14px; }
.pay-total .amt { font-family: "JetBrains Mono", monospace; }
.tip-section p.title { font-size: 14px; font-weight: 700; margin: 0 0 4px; }
.tip-section p.hint { font-size: 12px; color: var(--muted); margin: 0 0 12px; }
.tip-grid-lg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tip-grid-lg button { border: 1px solid var(--line); border-radius: 8px; padding: 12px 0; font-size: 14px; font-weight: 700; color: var(--muted); background: var(--ink-2); }
.tip-grid-lg button.active { border-color: var(--amber); background: var(--blue-soft); color: var(--amber-bright); }
.method-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.method-btn { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 8px; padding: 13px 16px; background: var(--ink-2); text-align: left; color: var(--text); font-size: 14px; font-weight: 600; }
.method-btn.active { border-color: var(--amber); background: var(--blue-soft); }
.method-btn .check { margin-left: auto; color: var(--amber-bright); display: none; }
.method-btn.active .check { display: block; }
.card-input-wrap { border: 1px solid transparent; border-radius: 8px; padding: 0; max-height: 0; overflow: hidden; }
.card-input-wrap.active { border-color: var(--amber); background: var(--blue-soft); padding: 12px 16px; margin-top: 8px; max-height: 60px; }
.card-input-wrap input { width: 100%; background: transparent; border: none; outline: none; color: var(--text); font-family: "JetBrains Mono", monospace; font-size: 14px; }
.summary-box { border: 1px solid var(--line); background: var(--ink-3); border-radius: 8px; padding: 16px; font-size: 12px; color: var(--muted); }
.summary-box .row { display: flex; justify-content: space-between; padding: 3px 0; }
.summary-box .row.bold { font-weight: 700; color: var(--text); padding-top: 6px; }
.summary-box .row .amt { font-family: "JetBrains Mono", monospace; }
.sticky-pay { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; background: color-mix(in srgb, var(--ink-2) 96%, transparent); backdrop-filter: blur(8px); border-top: 1px solid var(--line-soft); padding: 16px; }

.paying-state { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; padding: 24px; }
.spinner { width: 32px; height: 32px; border: 2.5px solid var(--line); border-top-color: var(--amber-bright); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.success-head { text-align: center; padding: 32px 16px 0; }
.success-ring-wrap { position: relative; width: 72px; height: 72px; margin: 0 auto; }
.success-check { position: relative; width: 72px; height: 72px; border-radius: 50%; background: var(--green-soft); color: var(--green); display: flex; align-items: center; justify-content: center; }
.success-check.pending { background: var(--blue-soft); color: var(--amber-bright); }
.success-head h2 { font-family: var(--font-display); font-size: 22px; font-weight: 600; margin: 20px 0 4px; }
.success-head p { font-size: 12px; color: var(--muted); margin: 0; }
.google-review-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 18px 20px;
  border-radius: 14px;
  border: 1.5px solid var(--line);
  background: var(--ink-2);
  box-shadow: 0 2px 10px rgba(16,24,43,0.06);
  transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease;
}
.google-review-card:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(16,24,43,0.12); border-color: var(--amber); }
.google-review-card:active { transform: translateY(0); }
.google-g { flex-shrink: 0; }
.google-review-text { display: flex; flex-direction: column; gap: 2px; text-align: left; flex: 1; }
.google-review-text strong { font-size: 17px; font-weight: 700; color: var(--text); }
.google-review-text small { font-size: 12px; color: var(--muted); }
.google-review-card i[data-lucide="arrow-up-right"] { color: var(--muted); }

.pay-not-found { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; padding: 24px; }
.pay-not-found .icon-box { width: 60px; height: 60px; border-radius: 8px; background: var(--ink-3); border: 1px solid var(--line); color: var(--muted); display: flex; align-items: center; justify-content: center; }
.pay-not-found h1 { font-size: 20px; font-weight: 600; margin: 0; }
.pay-not-found p { max-width: 320px; color: var(--muted); font-size: 13px; margin: 0; }

/* ---------- 404 page: a receipt stamped void, not a bare error string ---------- */
.error-404-page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; padding: 32px 24px; }
.error-404-page h1 { font-size: 20px; font-weight: 600; margin: 0; }
.error-404-page > p { max-width: 340px; color: var(--muted); font-size: 13px; margin: 0; }
.error-stamp {
  position: absolute; top: 42%; right: 7%; transform: rotate(-14deg);
  border: 3px solid var(--red); border-radius: 8px; padding: 3px 12px;
  font-family: var(--font-display); font-weight: 700; font-size: 19px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--red);
  opacity: .68; mix-blend-mode: multiply; pointer-events: none; user-select: none;
  white-space: nowrap; max-width: 60%;
}
@media (max-width: 480px) { .error-stamp { font-size: 15px; padding: 2px 9px; right: 5%; } }

/* ---------- Admin login ---------- */
.admin-login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--ink-3); }
.admin-login-box { width: 100%; max-width: 380px; padding: 36px 32px; text-align: center; background: var(--ink-2); box-shadow: 0 4px 24px rgba(16,24,43,0.08); }
.admin-login-box .logo { justify-content: center; margin-bottom: 24px; }
.admin-login-box h1 { font-size: 22px; font-weight: 600; margin: 0 0 8px; }
.admin-login-box p.hint { font-size: 13px; color: var(--muted); margin: 0 0 24px; }
.code-input { width: 100%; text-align: center; letter-spacing: 0.15em; font-family: "JetBrains Mono", monospace; font-size: 16px; padding: 14px; border: 1px solid var(--line); background: var(--ink-3); border-radius: 8px; color: var(--text); }
.code-input:focus { outline: none; border-color: var(--amber); background: var(--ink-2); }

/* ---------- Admin ---------- */
.admin-header { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--ink-2) 94%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line-soft); }
.admin-header-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; gap: 12px; flex-wrap: wrap; }
.admin-header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.icon-btn { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: var(--ink-2); }
.icon-btn:hover { color: var(--text); border-color: var(--muted); }
.admin-tabs { display: flex; gap: 4px; overflow-x: auto; padding: 0 24px 10px; }
.admin-tab { display: flex; align-items: center; gap: 6px; white-space: nowrap; border: none; background: transparent; color: var(--muted); font-size: 14px; font-weight: 600; padding: 9px 14px; border-radius: 8px; }
.admin-tab.active { background: var(--blue-soft); color: var(--amber-bright); }
.admin-main { max-width: 1200px; margin: 0 auto; padding: 24px 24px 60px; background: var(--ink-3); }
.admin-panel { display: none; min-width: 0; }
.admin-panel.active { display: block; }

@media (max-width: 640px) {
  .admin-header-inner { padding: 12px 16px; }
  .admin-tabs { padding: 0 16px 10px; }
  .admin-main { padding: 16px 16px 48px; }
}

.stats-grid { display: grid; grid-template-columns: 1fr; gap: 1px; margin-bottom: 24px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.stats-grid > .stat-card, .two-col > *, .pos-grid > * { min-width: 0; }
@media (min-width: 640px) { .stats-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1280px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } }
.stat-card { padding: 22px; background: var(--ink-2); border: none; border-radius: 0; }
.stat-card .icon-box { width: 32px; height: 32px; border-radius: 8px; background: var(--blue-soft); color: var(--amber-bright); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.stat-card .label { font-size: 12px; font-weight: 600; color: var(--muted); margin: 0; text-transform: uppercase; letter-spacing: 0.03em; }
.stat-card .value { font-family: "JetBrains Mono", monospace; font-size: 25px; font-weight: 700; margin: 6px 0; }
.stat-card .sub { font-size: 11px; color: var(--muted); margin: 0; }
.method-breakdown-grid { display: flex; flex-direction: column; gap: 10px; }
.method-breakdown-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; background: var(--ink-3); border: 1px solid var(--line-soft); border-radius: 8px; font-size: 13px; }
.method-breakdown-row .label { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.method-breakdown-row .amt { font-family: "JetBrains Mono", monospace; font-weight: 700; }

.panel-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--line-soft); }
.panel-head h3 { font-family: var(--font-body); margin: 0; font-size: 16px; font-weight: 600; }
.panel-head p { margin: 3px 0 0; font-size: 12px; color: var(--muted); }
.live-pill { display: flex; align-items: center; gap: 6px; background: var(--blue-soft); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; font-size: 10px; font-weight: 700; color: var(--amber-bright); }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--amber-bright); }

.table-wrap { overflow-x: auto; background: var(--ink-2); }
table.data-table { width: 100%; min-width: 920px; border-collapse: collapse; font-size: 13px; }
table.data-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); font-weight: 600; padding: 10px 16px; border-bottom: 1px solid var(--line-soft); background: var(--ink-3); }
table.data-table td { padding: 11px 16px; border-bottom: 1px solid var(--line-soft); }
table.data-table tr:hover td { background: var(--ink-3); }
.amt-cell { font-family: "JetBrains Mono", monospace; }
.status-pill { border-radius: 999px; border: 1px solid; padding: 2px 8px; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.status-paid { background: var(--green-soft); color: #15803d; border-color: #bbeecb; }
.status-pending { background: var(--blue-soft); color: var(--blue-dark); border-color: #c7d9fb; }
.status-failed { background: var(--red-soft); color: #b91c1c; border-color: #f5c6c2; }
.status-refunded { background: var(--ink-3); color: var(--muted); border-color: var(--line); }
.lead-new { background: var(--blue-soft); color: var(--blue-dark); border-color: #c7d9fb; }
.lead-contacted { background: #fff7ea; color: #a15c07; border-color: #f3ddab; }
.lead-demo_scheduled { background: #f5eefd; color: #7e3fc4; border-color: #e2cdf5; }
.lead-onboarded { background: var(--green-soft); color: #15803d; border-color: #bbeecb; }
.lead-declined { background: var(--ink-3); color: var(--muted); border-color: var(--line); }

.two-col { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 24px; }
@media (min-width: 1024px) { .two-col { grid-template-columns: 1fr 1fr; } }

.pos-grid { display: grid; grid-template-columns: 1fr; gap: 1px; margin-top: 18px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
@media (min-width: 640px) { .pos-grid { grid-template-columns: 1fr 1fr; } }
.pos-card { background: var(--ink-2); padding: 16px; }
.pos-card-head { display: flex; justify-content: space-between; align-items: center; }
.pos-card-head .name { font-size: 14px; font-weight: 700; margin: 0; }
.pos-status { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; }
.pos-status .dot { width: 6px; height: 6px; border-radius: 50%; }
.pos-status.active { color: #15803d; } .pos-status.active .dot { background: #15803d; }
.pos-status.offline { color: #b91c1c; } .pos-status.offline .dot { background: #b91c1c; }
.pos-status.pending { color: var(--blue-dark); } .pos-status.pending .dot { background: var(--amber-bright); }
.pos-provider { font-size: 12px; color: var(--muted); margin: 4px 0 0; }
.pos-provider .store-id { color: var(--muted-dim); }
.api-key-row { display: flex; align-items: center; justify-content: space-between; background: var(--ink-3); border: 1px solid var(--line-soft); border-radius: 6px; padding: 8px 12px; margin-top: 12px; }
.api-key-row span { font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--muted); }
.api-key-row button { background: none; border: none; color: var(--muted); padding: 0; cursor: pointer; }
.rotate-key-box { margin-top: 10px; background: var(--ink-3); border: 1px solid var(--line-soft); border-radius: 6px; padding: 10px 12px; }
.rotate-key-box p.hint { font-size: 11px; color: var(--muted); }
.pos-meta { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 10px; }
.pos-meta span { display: flex; align-items: center; gap: 5px; }
.empty-state { padding: 40px 20px; text-align: center; color: var(--muted); font-size: 13px; }

.restaurant-list { margin-top: 16px; display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.restaurant-item { background: var(--ink-2); padding: 14px; }
.restaurant-item-head { display: flex; justify-content: space-between; align-items: center; }
.restaurant-item-head .name { font-size: 14px; font-weight: 700; margin: 0; }
.restaurant-item-head .pos-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; }
.restaurant-item .url { font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--amber-bright); margin: 6px 0 2px; overflow-wrap: anywhere; }
.restaurant-item .iban { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--muted); margin: 0 0 10px; overflow-wrap: anywhere; }

.btn-sm { padding: 7px 14px; font-size: 12px; border-radius: 9px; }
.btn-sm.btn-primary { box-shadow: inset 0 1.5px 0 rgba(255,255,255,.5), inset 0 -3px 4px rgba(0,0,0,.12), 0 3px 0 var(--amber-edge), 0 4px 8px rgba(31,91,216,.3); }
.btn-sm.btn-primary:hover { box-shadow: inset 0 1.5px 0 rgba(255,255,255,.5), inset 0 -3px 4px rgba(0,0,0,.12), 0 4px 0 var(--amber-edge), 0 6px 10px rgba(31,91,216,.35); }
.btn-sm.btn-primary:active { box-shadow: inset 0 1px 3px rgba(0,0,0,.25), 0 1px 0 var(--amber-edge); }
.btn-sm.btn-outline { box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 3px 0 var(--line); }
.btn-sm.btn-outline:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 4px 0 var(--line); }
.btn-sm.btn-outline:active { box-shadow: inset 0 1px 3px rgba(13,27,62,.15), 0 1px 0 var(--line); }

.plain-textarea {
  width: 100%;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  padding: 10px;
  border-radius: 8px;
  border: 1.5px solid var(--line);
  background: var(--ink-3);
  color: var(--text);
  resize: vertical;
}
.plain-textarea:focus { outline: none; border-color: var(--amber); }

.qr-grid { margin-top: 18px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.qr-card { text-align: center; border: 1px solid var(--line); border-radius: 10px; padding: 12px; background: var(--ink-3); }
.qr-table-name { font-weight: 700; font-size: 13px; margin: 0 0 8px; word-break: break-word; }
.qr-card canvas { max-width: 100%; height: auto; }
.qr-url { display: block; width: 100%; font-size: 10px; margin: 8px 0; text-align: center; border: 1px solid var(--line); border-radius: 6px; padding: 5px; background: var(--ink-2); color: var(--muted); }

@media print {
  body * { visibility: hidden; }
  .printable-tables, .printable-tables * { visibility: visible; }
  .printable-tables { position: absolute; top: 0; left: 0; width: 100%; margin: 0; }
  .qr-card button { display: none; }
}

/* ---------- Modal ---------- */
.modal-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(16,24,43,0.45); display: none; align-items: center; justify-content: center; padding: 16px; }
.modal-overlay.open { display: flex; }
/* The re-auth prompt sits over live revenue/order numbers — a light
   scrim alone still lets those be read straight through it, so this one
   gets a heavy blur too, not just a darker overlay. */
#reauthModal { background: rgba(16,24,43,0.65); backdrop-filter: blur(16px); }
.modal-box { width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; padding: 28px; background: var(--ink-2); box-shadow: 0 12px 40px rgba(16,24,43,0.18); }
.modal-head { display: flex; justify-content: space-between; align-items: center; }
.modal-head h3 { font-family: var(--font-body); margin: 0; font-size: 19px; font-weight: 600; }
.modal-close { background: none; border: none; color: var(--muted); padding: 6px; border-radius: 6px; }
.modal-close:hover { background: var(--ink-3); }
.modal-box > p.hint { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.modal-box form { margin-top: 20px; display: flex; flex-direction: column; gap: 16px; }
.two-field { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 480px) { .two-field { grid-template-columns: 1fr 1fr; } }
.two-field > * { min-width: 0; }
.url-prefix { color: var(--muted); white-space: nowrap; font-size: 13px; }
.pos-toggle { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 520px) { .pos-toggle { grid-template-columns: repeat(4, 1fr); } }
.pos-toggle > * { min-width: 0; }
.pos-toggle button { border: 1px solid var(--line); background: var(--ink-2); color: var(--muted); border-radius: 8px; padding: 12px; font-size: 13px; font-weight: 700; text-align: left; }
.pos-toggle button span { display: block; font-size: 11px; font-weight: 500; color: var(--muted-dim); margin-top: 2px; }
.pos-toggle button.active { border-color: var(--amber); background: var(--blue-soft); color: var(--amber-bright); }
.pos-toggle button.active span { color: var(--blue-dark); opacity: 0.8; }

/* ---------- Language switch ---------- */
.lang-switch { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.lang-switch a { display: flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 10px; font-size: 12px; font-weight: 700; color: var(--muted); }
.lang-switch a.active { background: var(--blue-soft); color: var(--amber-bright); }
.lang-switch a:not(.active):hover { background: var(--ink-3); }

/* ---------- Scroll reveal ----------
   Content settles into place as it comes into view. Done with CSS
   scroll-driven animations rather than a library, and gated behind
   @supports so a browser without them shows everything normally instead
   of leaving content stuck invisible — the usual failure mode of
   JS reveal scripts. Per-item delay gives the receipt lines and feature
   rows a slight cascade instead of arriving as one block. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 760px) {
    .trust-list li,
    .feature,
    .receipt-lines li,
    .pricing-copy,
    .section-head,
    .check-list li,
    .form-card {
      animation: rise-in linear both;
      animation-timeline: view();
      /* Entry-only ranges on purpose: the reveal finishes while the
         element is still entering the viewport, so anything fully in
         view is guaranteed to be at the end state. A cover-based range
         can strand an element mid-fade when it sits at the bottom of
         the page and can never scroll far enough to finish. */
      animation-range: entry 5% entry 60%;
    }
    .trust-list li:nth-child(2), .feature:nth-child(2), .receipt-lines li:nth-child(2) { animation-range: entry 10% entry 65%; }
    .trust-list li:nth-child(3), .feature:nth-child(3), .receipt-lines li:nth-child(3) { animation-range: entry 15% entry 70%; }
    .trust-list li:nth-child(4), .feature:nth-child(4), .receipt-lines li:nth-child(4) { animation-range: entry 20% entry 75%; }
    .feature:nth-child(5), .receipt-lines li:nth-child(5) { animation-range: entry 25% entry 80%; }
  }
}
@keyframes rise-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Welcome flyby (landing page only, decorative) ----------
   A glossy courier drawn entirely in CSS: domed white head, dark visor
   with a glowing face, tapered teardrop body, and two detached paddle
   arms floating beside it. Every animation is finite — nothing loops
   forever — so once the ~4.8s flight ends the whole thing is inert
   instead of leaving transforms ticking on an invisible element. The
   container never takes pointer events, so it can't block a click even
   while flying over the page.

   The flight is one unbroken Superman pass, and deliberately not a
   straight line: it dives in steeply from the top left, pulls out along
   the bottom, banks and climbs back up to the right, crests, then
   levels out to wave before punching away off the top right. Leading
   fist stays extended ahead through every flying phase and the body
   banks into each turn; it only straightens up for the greeting. A
   touch of blur rides the fastest segments to sell the speed.

   Motion is split across separate elements (path on the craft,
   bob/squash on the body, wobble on the head, its own timeline per arm,
   blink, mouth, thruster) — each owns its own transform, so none of
   them fight, and it reads as alive rather than a rigid sprite. */
.robot-flyby {
  position: fixed;
  inset: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 60;
}
.robot-craft {
  position: relative;
  animation: robot-fly 4.8s linear forwards;
}
.robot {
  --rscale: 1;
  --bot-shell: linear-gradient(158deg, #ffffff 0%, #f7f5fd 42%, #e5e0f3 100%);
  position: relative;
  width: 112px;
  height: 160px;
  animation: robot-bob .65s ease-in-out 8;
}

/* Head: a dome — rounder across the top than the bottom. */
.robot-head {
  position: relative;
  z-index: 2;
  width: 84px; height: 75px;
  margin: 0 auto;
  border-radius: 52% 52% 44% 44% / 58% 58% 42% 42%;
  background: var(--bot-shell);
  box-shadow:
    inset 4px 6px 10px #ffffff,
    inset -6px -7px 14px rgba(116, 104, 160, .22),
    0 14px 26px -12px rgba(38, 28, 78, .5);
  animation: robot-wobble .95s ease-in-out 6;
}
.robot-visor {
  position: absolute;
  top: 13px; left: 50%;
  transform: translateX(-50%);
  width: 64px; height: 48px;
  border-radius: 46% 46% 42% 42% / 52% 52% 48% 48%;
  background: linear-gradient(165deg, #2b2352 0%, #1a1436 55%, #120e28 100%);
  box-shadow: inset 0 3px 6px rgba(255,255,255,.14), inset 0 -4px 9px rgba(0,0,0,.5);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
}
.robot-eye {
  width: 12px; height: 15px;
  border-radius: 50%;
  background: #c9b4ff;
  box-shadow: 0 0 13px rgba(167,139,250,.95), 0 0 26px rgba(167,139,250,.55);
  animation: robot-blink 1.8s ease-in-out 3;
}
.robot-mouth {
  position: absolute;
  bottom: 7px; left: 50%;
  margin-left: -7px;
  width: 14px; height: 9px;
  border-radius: 3px 3px 14px 14px;
  background: #c9b4ff;
  box-shadow: 0 0 11px rgba(167,139,250,.9);
  transform-origin: top center;
  animation: robot-talk 4.8s ease-in-out forwards;
}

.robot-neck {
  display: block;
  width: 22px; height: 9px;
  margin: -2px auto 0;
  border-radius: 4px;
  background: linear-gradient(180deg, #b9b1d4 0%, #8f86b2 100%);
}
/* Body: tapered at the shoulders, round and heavy at the base. */
.robot-body {
  position: relative;
  z-index: 2;
  width: 72px; height: 72px;
  margin: -2px auto 0;
  border-radius: 44% 44% 50% 50% / 34% 34% 66% 66%;
  background: var(--bot-shell);
  box-shadow:
    inset 4px 6px 10px #ffffff,
    inset -6px -9px 16px rgba(116, 104, 160, .22),
    0 17px 28px -14px rgba(38, 28, 78, .55);
}

/* Arms float detached beside the body. Each runs the full timeline: the
   right one is the leading Superman fist (and the one that waves), the
   left trails back along the slipstream. */
.robot-arm {
  position: absolute;
  z-index: 1;
  top: 80px;
  width: 17px; height: 37px;
  border-radius: 50%;
  background: var(--bot-shell);
  box-shadow:
    inset 3px 3px 6px #ffffff,
    inset -3px -4px 9px rgba(116, 104, 160, .25),
    0 9px 16px -10px rgba(38, 28, 78, .5);
  transform-origin: 50% 12%;
}
.robot-arm-l {
  left: 4px;
  animation: robot-arm-trail 4.8s ease-in-out forwards;
}
.robot-arm-r {
  right: 4px;
  animation: robot-arm-lead 4.8s ease-in-out forwards;
}
.robot-thruster {
  position: absolute;
  bottom: -3px; left: 50%;
  width: 43px; height: 19px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(167,139,250,.75) 0%, rgba(167,139,250,0) 70%);
  animation: robot-thrust .28s ease-in-out 18;
}

.robot-bubble {
  position: absolute;
  right: calc(100% + 16px);
  top: 20px;
  margin: 0;
  padding: 10px 15px;
  white-space: nowrap;
  border-radius: 13px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  box-shadow: var(--raise-1);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  opacity: 0;
  animation: robot-say 4.8s ease-out forwards;
}
.robot-bubble::after {
  content: ""; position: absolute; top: 15px; right: -6px;
  width: 10px; height: 10px;
  background: var(--ink-2);
  border-right: 1px solid var(--line);
  border-top: 1px solid var(--line);
  transform: rotate(45deg);
}

/* A dive, traced to match the arc: it drops in steeply from the far top
   left, and the descent keeps flattening as it comes — each segment
   loses less height than the one before (15vh, 13, 11, 9, 6, 3, 1), so
   it curves rather than sliding down one straight diagonal. It bottoms
   out shallow across the right, levels off there to wave, then hooks
   back up and exits off the right edge climbing. The nose follows the
   tangent the whole way: pitched hard down at 38deg on the way in,
   easing to level at the bottom, pulling up to -34deg on the way out. */
@keyframes robot-fly {
  0%    { opacity: 0; filter: blur(2.4px); transform: translate(-44vw, -52vh) rotate(38deg) scale(.07); animation-timing-function: ease-in; }
  5.5%  { opacity: 1; }
  12.7% { filter: blur(2px); transform: translate(-33vw, -37vh) rotate(36deg) scale(.22); }
  22.2% { filter: blur(1.5px); transform: translate(-22vw, -24vh) rotate(31deg) scale(.4); }
  31.7% { transform: translate(-9vw, -13vh) rotate(24deg) scale(.6); }
  41.2% { filter: blur(1px); transform: translate(6vw, -4vh) rotate(15deg) scale(.8); animation-timing-function: ease-out; }
  /* Levels off here and creeps across the bottom of the arc for a full
     second and a half — the dive and the climb-out keep their original
     pace, the extra time all goes here so the greeting is readable. */
  49%   { filter: blur(0); transform: translate(18vw, 2vh) rotate(7deg) scale(.95); }
  57%   { transform: translate(24vw, 4vh) rotate(3deg) scale(1); }
  66%   { transform: translate(29vw, 5.5vh) rotate(1deg) scale(1.03); }
  74%   { transform: translate(33vw, 6vh) rotate(-1deg) scale(1.04); }
  82%   { transform: translate(36vw, 5.5vh) rotate(-3deg) scale(1.03); }
  88%   { opacity: 1; filter: blur(0); transform: translate(38vw, 5vh) rotate(-8deg) scale(1.01); animation-timing-function: ease-in; }
  93.5% { transform: translate(45vw, -1vh) rotate(-22deg) scale(.95); }
  100%  { opacity: 0; visibility: hidden; filter: blur(2.5px); transform: translate(82vw, -30vh) rotate(-34deg) scale(.6); }
}
/* Hover bob with a little squash/stretch at the top of each rise. */
@keyframes robot-bob {
  0%, 100% { transform: translateY(0) scale(var(--rscale), var(--rscale)); }
  50% { transform: translateY(-9px) scale(calc(var(--rscale) * .97), calc(var(--rscale) * 1.04)); }
}
@keyframes robot-wobble {
  0%, 100% { transform: rotate(-7deg); }
  50% { transform: rotate(7deg); }
}
@keyframes robot-blink {
  0%, 42%, 50%, 100% { transform: scaleY(1); }
  46% { transform: scaleY(.12); }
}
/* Trailing arm: swept back in the slipstream, drops to a neutral hang
   for the greeting, sweeps back again for the exit. */
@keyframes robot-arm-trail {
  0%   { transform: rotate(126deg); }
  33%  { transform: rotate(132deg); }
  42%  { transform: rotate(108deg); }
  48%  { transform: rotate(40deg); }
  55%  { transform: rotate(-12deg); }
  86%  { transform: rotate(-18deg); }
  93%  { transform: rotate(64deg); }
  100% { transform: rotate(124deg); }
}
/* Leading arm: fist punched forward the whole flight, then it's the arm
   that waves, then it punches forward again on the way out. */
@keyframes robot-arm-lead {
  0%   { transform: rotate(-96deg); }
  25%  { transform: rotate(-102deg); }
  42%  { transform: rotate(-94deg); }
  48%  { transform: rotate(-70deg); }
  53%  { transform: rotate(-38deg); }
  58%  { transform: rotate(-72deg); }
  63%  { transform: rotate(-34deg); }
  68%  { transform: rotate(-70deg); }
  73%  { transform: rotate(-36deg); }
  78%  { transform: rotate(-68deg); }
  83%  { transform: rotate(-38deg); }
  88%  { transform: rotate(-66deg); }
  93%  { transform: rotate(-90deg); }
  100% { transform: rotate(-99deg); }
}
@keyframes robot-talk {
  0%, 52%, 88%, 100% { transform: scaleY(1); }
  56% { transform: scaleY(1.5); }
  60% { transform: scaleY(1); }
  64% { transform: scaleY(1.45); }
  68% { transform: scaleY(1.05); }
  72% { transform: scaleY(1.4); }
  76% { transform: scaleY(1.05); }
  80% { transform: scaleY(1.35); }
  84% { transform: scaleY(1.1); }
}
@keyframes robot-thrust {
  0%, 100% { opacity: .5; transform: translateX(-50%) scaleY(1); }
  50% { opacity: .95; transform: translateX(-50%) scaleY(1.45); }
}
/* Up from 52% to 88% of 4.8s — about 1.7s fully readable, roughly a
   second longer than it used to hold. */
@keyframes robot-say {
  0%, 48% { opacity: 0; transform: translateY(8px) scale(.85); }
  52% { opacity: 1; transform: translateY(0) scale(1.06); }
  55% { transform: translateY(0) scale(1); }
  88% { opacity: 1; transform: translateY(0) scale(1); }
  93%, 100% { opacity: 0; transform: translateY(-6px) scale(.94); }
}
@media (max-width: 640px) {
  /* It's a big character now — scale it back on a phone so it doesn't
     swallow the screen, and let the bubble wrap instead of running off
     the left edge. */
  .robot { --rscale: .5; }
  .robot-bubble { font-size: 12px; padding: 7px 11px; white-space: normal; max-width: 42vw; }
}
@media (prefers-reduced-motion: reduce) {
  .robot-flyby { display: none; }
}

/* utility */
.hidden { display: none !important; }
::-webkit-scrollbar { height: 8px; width: 8px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }

/* ---------- Phones ---------- */
@media (max-width: 640px) {
  /* iOS Safari zooms the whole page in whenever a field under 16px gets
     focus, and doesn't zoom back out. !important because several form
     styles above (admin textareas, IBAN/API-key inputs, the access code)
     set their own smaller sizes. */
  input, select, textarea { font-size: 16px !important; }

  .icon-btn { width: 40px; height: 40px; }
  .lang-switch a { min-height: 40px; }
}