/* Landing (/) — "Struk kasir". Tokens live in /shared/base.css. */

/* ---------- hero grid ---------- */
.hero{position:relative; display:grid; gap:16px; padding-top:18px; padding-bottom:28px;
  grid-template-areas:"copy" "chat" "live" "roll"; grid-template-columns:minmax(0,1fr)}
.hero::before{content:""; position:absolute; top:-80px; bottom:0; left:50%; width:100vw; margin-left:-50vw; z-index:-1; pointer-events:none;
  background:radial-gradient(520px 360px at 82% 6%, color-mix(in srgb, var(--paid) 7%, transparent), transparent 70%),
             radial-gradient(700px 420px at 0% 0%, color-mix(in srgb, var(--focus) 6%, transparent), transparent 70%)}
.hero__copy{grid-area:copy} .hero__chat{grid-area:chat} .hero__roll{grid-area:roll; min-width:0} .hero__live{grid-area:live; min-width:0}

.eyebrow{display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; margin:0 0 10px; font-size:11.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted)}
.eyebrow__sep{color:var(--faint)}
.eyebrow__dot{display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--paid); flex:none;
  box-shadow:0 0 0 0 color-mix(in srgb, var(--paid) 60%, transparent); animation:live-dot 2.4s ease-out infinite}
@keyframes live-dot{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--paid) 55%, transparent)} 70%,100%{box-shadow:0 0 0 7px transparent}}
.eyebrow.is-down .eyebrow__dot{background:var(--warn); animation:none}
.eyebrow.is-closed .eyebrow__dot{background:var(--faint); animation:none}

h1{font-family:var(--font-display); font-weight:650; font-size:30px; line-height:1.06; letter-spacing:-.03em; margin:0; text-wrap:balance}
.tape{background:linear-gradient(transparent 58%, color-mix(in srgb, var(--paid) 30%, transparent) 58% 94%, transparent 94%) no-repeat 0 0 / 100% 100%;
  animation:tape-in .9s .25s cubic-bezier(.6,0,.2,1) both; padding:0 .04em; -webkit-box-decoration-break:clone; box-decoration-break:clone}
@keyframes tape-in{from{background-size:0 100%}}
.hero__sub{margin:10px 0 0; font-size:17px; line-height:1.35; font-weight:550}
.hero__note{margin:4px 0 0; font-size:14.5px; color:var(--muted)}

@media (min-width:1024px){
  .hero{grid-template-columns:minmax(0,1fr) minmax(380px,452px); column-gap:clamp(48px, 5vw, 80px); row-gap:26px; align-content:start;
    grid-template-areas:"copy roll" "chat roll" "live roll"; grid-template-rows:auto auto 1fr;
    min-height:calc(100svh - var(--bar-h) - 46px); padding-top:52px; padding-bottom:36px}
  h1{font-size:clamp(46px, 4.7vw, 66px); line-height:1.0}
  .hero__sub{font-size:22px; margin-top:20px}
  .hero__note{font-size:16.5px; margin-top:6px}
  .eyebrow{font-size:12px; margin-bottom:18px}
}

/* ---------- chat ---------- */
.chat__field{position:relative; display:flex; align-items:center; gap:8px; height:54px; padding:0 6px 0 14px; border-radius:12px;
  background:var(--bg-2); border:1px solid var(--line-2); transition:border-color .15s, box-shadow .15s;
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 10px 30px -18px rgba(0,0,0,.6)}
.chat__field:focus-within{border-color:var(--focus); box-shadow:0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent)}
.chat__prompt{color:var(--paid-text); font-size:16px; flex:none}
.chat__field input{flex:1; min-width:0; height:100%; border:0; background:transparent; outline:none; font-size:16px}
.chat__field input::placeholder{color:var(--faint)}
.chat__field input:disabled{cursor:not-allowed}
.chat__count{font-size:11px; color:var(--faint)}
.chat__send{height:42px; padding:0 16px}
.chat__send svg{width:16px; height:16px; transition:transform .2s}
.chat__send:not([disabled]):hover svg{transform:translateX(2px)}
.chat.is-busy .chat__send-label{opacity:.6}
.chat.is-busy .chat__send svg{animation:nudge .9s ease-in-out infinite}
@keyframes nudge{50%{transform:translateX(3px)}}
.chat.is-armed .chat__send:not([disabled]){animation:armed 1.6s ease-in-out infinite}
@keyframes armed{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent)} 60%{box-shadow:0 0 0 6px transparent}}
@media (max-width:420px){ .chat__send-label{display:none} .chat__send{width:42px; padding:0} }

/* attack gallery */
.gallery{margin-top:12px}
.gallery__tabs{display:flex; gap:2px; margin:0 0 8px; overflow-x:auto; scrollbar-width:none}
.gallery__tabs::-webkit-scrollbar{display:none}
.gallery__tabs button{flex:none; height:28px; padding:0 10px; border:0; border-radius:6px; background:transparent; color:var(--muted);
  font-size:13px; font-weight:550; cursor:pointer; position:relative; transition:color .15s, background .15s}
.gallery__tabs button:hover{color:var(--ink); background:var(--bg-2)}
.gallery__tabs button[aria-selected="true"]{color:var(--ink)}
.gallery__tabs button[aria-selected="true"]::after{content:''; position:absolute; left:10px; right:10px; bottom:2px; height:2px; border-radius:1px; background:var(--paid)}
.gallery__tabs button:first-child{margin-left:-10px}
.gallery__tabs button:disabled{opacity:.45; cursor:not-allowed}
.chips{display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding:2px 0;
  -webkit-mask:linear-gradient(90deg,#000 calc(100% - 24px),transparent); mask:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}
.chips::-webkit-scrollbar{display:none}
.chips.is-in .chip{animation:chip-in .28s ease-out both}
.chips.is-in .chip:nth-child(2){animation-delay:.05s}
@keyframes chip-in{from{opacity:0; transform:translateY(4px)}}
.chip{flex:none; min-height:34px; padding:6px 13px; border-radius:999px; border:1px solid var(--line-2); background:transparent; color:var(--ink);
  font-size:13.5px; line-height:1.3; cursor:pointer; white-space:nowrap; text-align:left; transition:background .15s, border-color .15s, transform .1s}
.chip:hover{background:var(--bg-2); border-color:var(--muted)}
.chip:active{transform:translateY(1px)}
.chip.is-picked{border-color:var(--paid); background:color-mix(in srgb, var(--paid) 10%, transparent)}
.chip:disabled{opacity:.45; cursor:not-allowed; background:transparent}
@media (min-width:1024px){ .chips{flex-wrap:wrap; overflow:visible; -webkit-mask:none; mask:none} .chip{white-space:normal} }

.chat__keys{display:flex; align-items:center; flex-wrap:wrap; gap:4px; min-height:22px; margin:10px 0 0; font-size:11.5px; color:var(--faint); letter-spacing:.01em}
.chat__keys .k-desk{display:inline-flex; align-items:center; gap:4px}
@media (hover:none){ .chat__keys .k-desk{display:none} }
kbd{font-family:var(--font-mono); font-size:10.5px; padding:1px 5px; border-radius:4px; border:1px solid var(--line-2); border-bottom-width:2px; color:var(--muted); background:var(--bg-2)}
.chat__keys.is-hint{color:var(--muted)}
.gps{display:inline-flex; gap:3px; margin-right:4px}
.gp{display:inline-grid; place-items:center; width:16px; height:16px; border-radius:3px; border:1px solid var(--line-2); font-size:10px; color:var(--faint)}
.gp.is-pass{border-color:color-mix(in srgb, var(--paid) 70%, transparent); color:var(--paid-text)}
.gp.is-stop{background:var(--refused); border-color:var(--refused); color:var(--stamp-ink)}

.chat__status{margin:10px 0 0; font-size:14px; line-height:1.45; padding:10px 12px; border-radius:10px; border:1px solid var(--line); background:var(--bg-2)}
.chat__status.is-error{border-color:color-mix(in srgb, var(--refused) 60%, transparent); color:var(--ink)}
.chat__status.is-budget{border-color:color-mix(in srgb, var(--warn) 70%, transparent)}
.chat__status.is-closed{font-family:var(--font-mono); font-size:15px; border-style:dashed; text-align:center}

/* ---------- live numbers + leash ---------- */
.live{border:1px solid var(--line); border-radius:14px; background:color-mix(in srgb, var(--bg-2) 70%, transparent); padding:0 14px 12px}
.live__stats{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.95fr) minmax(0,1.05fr)}
.stat{display:flex; flex-direction:column; gap:3px; padding:11px 8px 9px 0; min-width:0; text-decoration:none; color:inherit}
.stat + .stat{padding-left:10px; border-left:1px dashed var(--line-2)}
.stat__k{font-size:11px; color:var(--muted); display:flex; align-items:center; gap:6px; white-space:nowrap}
.stat__arrow{color:var(--faint); transition:transform .15s, color .15s}
.stat__v{position:relative; font-size:16px; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-height:20px}
.stat__v .mono{font-size:16px}
.stat__v .stat__u[data-live="cap"]{font-size:12px; color:var(--muted)}
.stat__v [data-live="last-ago"]{display:block; font-size:11px; color:var(--faint); line-height:1.3}
.stat__u{font-size:11px; color:var(--muted)}
.stat--link{border-radius:8px; transition:background .15s}
.stat--link:hover .stat__k{color:var(--ink)}
.stat--link:hover .stat__arrow{color:var(--ink); transform:translate(1px,-1px)}
.stat a{text-decoration:none} .stat a:hover{text-decoration:underline}
.stat a[aria-disabled="true"]{pointer-events:none}
.stat__tag{font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.04em}
.stat__tag.is-refused{color:var(--refused-text)} .stat__tag.is-paid{color:var(--paid-text)}
@media (max-width:420px){
  .eyebrow{letter-spacing:.03em} .eyebrow__opt{display:none}
  .m-hide{display:none}
  .rc-brand{display:none}
  .rc-paper{font-size:12.5px; padding-left:14px; padding-right:14px}
  .rc-rows dd{padding-right:90px}
  .live{padding:0 12px 10px}
  .stat__v,.stat__v .mono{font-size:14.5px} .stat + .stat{padding-left:9px}
  .stat__u{display:none} .stat__v .stat__u[data-live="cap"]{display:inline; font-size:10.5px}
}
@media (min-width:768px){
  .live{padding:0 18px 14px}
  .stat{padding:14px 12px 12px 0} .stat + .stat{padding-left:16px}
  .stat__k{font-size:12.5px} .stat__v,.stat__v .mono{font-size:20px} .stat__v{min-height:26px} .stat__u{font-size:12.5px}
  .stat__v [data-live="last-ago"]{font-size:11.5px}
}
@media (min-width:1280px){ .stat__v,.stat__v .mono{font-size:22px} }

/* odometer */
.odo{display:inline-flex}
.odo__d{display:inline-block; height:1.25em; overflow:hidden; line-height:1.25em; vertical-align:bottom}
.odo__d > span{display:block; transform:translateY(calc(var(--d) * -1.25em)); transition:transform .9s cubic-bezier(.2,.9,.25,1.15)}
.odo__s{display:inline-block}

/* skeleton */
.sk{color:transparent!important}
.sk > *{visibility:hidden}
.sk::after{content:''; position:absolute; left:0; top:50%; height:.8em; width:min(7ch, 90%); transform:translateY(-50%); border-radius:4px;
  background:linear-gradient(90deg, var(--line) 0 40%, var(--line-2) 50%, var(--line) 60% 100%) 0 0/300% 100%; animation:shimmer 1.4s linear infinite}
span.sk{position:relative; display:inline-block; min-width:9ch}
@keyframes shimmer{from{background-position:100% 0} to{background-position:0 0}}

.leash{--pct:0; margin-top:4px}
.leash__track{position:relative; height:12px; border-radius:999px;
  background:repeating-linear-gradient(-45deg, color-mix(in srgb, var(--line-2) 55%, transparent) 0 2px, transparent 2px 6px), var(--bg);
  box-shadow:inset 0 0 0 1px var(--line)}
.leash__track::before{content:''; position:absolute; inset:3px 6px; background:repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px 10%); opacity:.35; pointer-events:none}
.leash__fill{position:absolute; left:0; top:0; bottom:0; width:calc(var(--pct) * 100%); min-width:0; border-radius:999px;
  background:linear-gradient(180deg, color-mix(in srgb, #fff 18%, var(--paid)), var(--paid)); box-shadow:0 0 18px -4px color-mix(in srgb, var(--paid) 70%, transparent);
  transition:width 1.1s cubic-bezier(.3,1.5,.45,1)}
.leash__clasp{position:absolute; top:50%; left:calc(var(--pct) * 100%); width:18px; height:18px; margin:-9px 0 0 -9px; border-radius:50%;
  background:var(--bg); border:3px solid var(--paid); box-shadow:0 2px 8px rgba(0,0,0,.35); transition:left 1.1s cubic-bezier(.3,1.5,.45,1), border-color .3s}
.leash:not(.is-ready) .leash__fill,.leash:not(.is-ready) .leash__clasp{opacity:0}
.leash:not(.is-ready) .leash__track{background:linear-gradient(90deg, var(--line) 0 40%, var(--line-2) 50%, var(--line) 60% 100%) 0 0/300% 100%; animation:shimmer 1.4s linear infinite}
.leash.is-closed .leash__track{animation:none; background:var(--bg)}
.leash.is-empty .leash__clasp{border-color:var(--refused); left:0; margin-left:-2px}
.leash.is-empty .leash__track{box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--refused) 55%, transparent)}
.leash.is-tug .leash__clasp{animation:tug .7s .9s ease-out}
@keyframes tug{0%,100%{transform:none} 20%{transform:translateX(-4px) scale(1.12)} 45%{transform:translateX(3px)} 70%{transform:translateX(-1px)}}
.leash__foot{display:flex; justify-content:space-between; gap:12px; margin-top:8px; font-size:11px; color:var(--muted); letter-spacing:.02em}
.leash__foot [data-live="resets"]{color:var(--ink); font-variant-numeric:tabular-nums}
.leash__scale{display:inline-flex; align-items:center; gap:6px; color:var(--faint)}
.leash__dash{display:inline-block; width:22px; border-top:1px dashed var(--line-2)}

.live__stale{margin:6px 0 0; font-size:11px; color:var(--warn-text)}
.allowed{margin:10px 2px 0; font-size:13px; color:var(--muted); display:flex; flex-wrap:wrap; gap:0 6px}
.allowed a{color:var(--ink); text-decoration-style:dotted}
.allowed__note{display:none}
@media (min-width:768px){ .allowed__note{display:inline} .allowed__note::before{content:'— '} }

/* ---------- printer + roll ---------- */
.printer{position:relative; z-index:2; border-radius:12px 12px 10px 10px; background:linear-gradient(180deg, var(--bg-3), var(--bg-2));
  border:1px solid var(--line-2); box-shadow:0 14px 30px -14px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.05); padding:8px 10px 14px 14px}
.printer__top{display:flex; align-items:center; gap:10px}
.printer__led{width:7px; height:7px; border-radius:50%; background:color-mix(in srgb, var(--paid) 30%, var(--bg)); flex:none; transition:background .2s, box-shadow .2s}
.printer__led.is-on{background:var(--paid); box-shadow:0 0 10px var(--paid); animation:led .18s steps(2) infinite}
@keyframes led{50%{opacity:.55}}
.printer__label{flex:1; font-size:10.5px; letter-spacing:.12em; color:var(--faint)}
.printer__sound{display:grid; place-items:center; width:32px; height:32px; border-radius:8px; border:1px solid transparent; background:transparent; color:var(--faint); cursor:pointer; padding:0}
.printer__sound:hover{color:var(--ink); border-color:var(--line-2)}
.printer__sound svg{width:16px; height:16px}
.printer__sound .on{display:none} .printer__sound[aria-pressed="true"] .on{display:block} .printer__sound[aria-pressed="true"] .off{display:none}
.printer__sound[aria-pressed="true"]{color:var(--paid-text)}
.printer__slot{position:absolute; left:14px; right:14px; bottom:6px; height:5px; border-radius:3px; background:#050B14; box-shadow:inset 0 1px 2px rgba(0,0,0,.8)}
:root[data-theme="light"] .printer__slot{background:#1B2A40}
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]) .printer__slot{background:#1B2A40} }
.roll{position:relative; margin:-9px 18px 0; padding-top:9px; min-height:96px; display:flex; flex-direction:column; gap:10px}
.roll__cap{display:flex; align-items:center; gap:8px; margin:8px 0 -2px; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.roll__ago{text-transform:none; letter-spacing:0; color:var(--faint)}
@media (min-width:1024px){
  .hero__roll{position:sticky; top:calc(var(--bar-h) + 24px); align-self:start}
  .roll{max-height:calc(100svh - var(--bar-h) - 150px); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none;
    -webkit-mask:linear-gradient(#000 calc(100% - 40px), transparent); mask:linear-gradient(#000 calc(100% - 40px), transparent); padding-bottom:36px}
  .roll::-webkit-scrollbar{display:none}
}
.roll__empty{display:flex; align-items:center; gap:14px; padding:16px 4px 6px; color:var(--muted); font-size:14px}
.roll__empty p{margin:0}
.ghost{flex:none; width:44px; height:56px; border:1.5px dashed var(--line-2); border-top:0; border-radius:0 0 4px 4px; display:grid; align-content:start; gap:6px; padding:10px 8px}
.ghost i{display:block; height:3px; border-radius:2px; background:var(--line)} .ghost i:last-child{width:60%}
@media (min-width:1024px){ .roll__empty{flex-direction:column; text-align:center; padding:56px 24px} .ghost{width:120px; height:150px; padding:22px 18px; gap:12px} .ghost i{height:5px} }

/* turns */
.turn{padding:12px 0 14px; display:flex; flex-direction:column; gap:8px; animation:turn-in .25s ease-out}
.turn + .turn{border-top:1px dashed var(--line)}
@keyframes turn-in{from{opacity:0; transform:translateY(-6px)}}
.turn__you{margin:0; display:flex; gap:10px; align-items:baseline; font-size:15px; font-weight:550}
.turn__msg{min-width:0; overflow-wrap:anywhere}
.turn__who{flex:none; font-family:var(--font-mono); font-size:11px; text-transform:uppercase; color:var(--faint); width:44px}
.turn__body{display:flex; flex-direction:column; gap:8px}
.turn__line{margin:0; display:flex; gap:10px; font-size:14px; color:var(--muted); overflow-wrap:anywhere}
.turn__line.is-reply{color:var(--ink)}
.turn__line.is-tool{padding-left:54px; font-size:12px; color:var(--faint)}
.turn__line.is-tool b{font-weight:400; color:var(--muted)}
.turn__line.is-think{padding-left:54px; font-family:var(--font-mono); font-size:12px; color:var(--faint)}
.turn__line.is-error{padding-left:54px; color:var(--refused-text)}
.dots::after{content:''; display:inline-block; width:2ch; text-align:left; animation:dots 1.2s steps(4) infinite}
@keyframes dots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}}

/* ---------- receipt ---------- */
.rc{--z:10px; --pd:0s; position:relative; filter:drop-shadow(0 10px 14px rgba(0,0,0,.35))}
:root[data-theme="light"] .rc{filter:drop-shadow(0 8px 12px rgba(15,27,45,.18))}
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]) .rc{filter:drop-shadow(0 8px 12px rgba(15,27,45,.18))} }
.rc--print{--pd:.9s; animation:rc-feed .9s steps(10, end) both}
@keyframes rc-feed{from{clip-path:inset(0 0 100% 0); transform:translateY(-16px)} to{clip-path:inset(0 0 -60px 0); transform:none}}
.rc-paper{position:relative; background:var(--paper); color:var(--paper-ink); font-family:var(--font-mono); font-size:13px; line-height:1.55;
  padding:calc(var(--z) + 8px) 16px calc(var(--z) + 10px); overflow:hidden;
  background-image:radial-gradient(rgba(20,26,35,.035) 1px, transparent 1px); background-size:3px 3px;
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/var(--z) 51% repeat-x,
               conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/var(--z) 51% repeat-x;
          mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/var(--z) 51% repeat-x,
               conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/var(--z) 51% repeat-x}
.rc-head{display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap; font-size:11px; letter-spacing:.04em; padding-bottom:6px;
  border-bottom:1px dashed var(--paper-line); margin-bottom:6px}
.rc-dim{color:var(--paper-muted)}
.rc-rows{margin:0; display:grid; gap:1px}
.rc-rows div{display:grid; grid-template-columns:9ch minmax(0,1fr); gap:8px}
.rc-rows dt{color:var(--paper-muted); text-transform:uppercase; font-size:11px; padding-top:2px}
.rc-rows dd{margin:0; overflow-wrap:anywhere; padding-right:96px}
.rc-cut{height:1px; margin:8px 0; background:repeating-linear-gradient(90deg,var(--paper-line) 0 6px,transparent 6px 10px)}
/* the three checks, in the contract's order */
.rc-checks{list-style:none; margin:0 0 8px; padding:0; display:grid; gap:0; font-size:12px}
.rc-checks li{display:grid; grid-template-columns:2ch minmax(0,1fr) auto; gap:6px; align-items:baseline}
.rc-checks__n{color:var(--paper-muted)}
.rc-checks b{font-weight:400; letter-spacing:.04em}
.rc-checks .is-ok b{color:#0B6E37}
.rc-checks .is-no{color:#8F1D12}
.rc-checks .is-no b{color:#fff; background:#B3261A; padding:0 5px; border-radius:2px}
.rc-checks .is-skip,.rc-checks .is-na{color:var(--paper-muted)}
.rc-checks .is-skip .rc-checks__q{text-decoration:line-through; text-decoration-color:var(--paper-line)}
.rc-checks .is-wait b{color:var(--paper-muted); animation:wait 1.2s ease-in-out infinite; animation-delay:calc(var(--i) * .2s)}
@keyframes wait{50%{opacity:.25}}
.rc--deciding .rc-checks li{animation:chk-in .32s ease-out both; animation-delay:calc(var(--pd) + var(--i) * 260ms)}
.rc--deciding .rc-checks li b{animation:chk-b .3s cubic-bezier(.3,1.6,.5,1) both; animation-delay:calc(var(--pd) + var(--i) * 260ms + 120ms)}
@keyframes chk-in{from{opacity:.15; transform:translateX(-4px)}}
@keyframes chk-b{from{opacity:0; transform:scale(1.6)}}
.rc-line{margin:0; font-family:var(--font-body); font-size:13.5px; font-weight:650; line-height:1.4; display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.rc--refused .rc-line{color:#B3261A}
.rc--paid .rc-line{color:#0B6E37}
.rc--sent .rc-line,.rc--failed .rc-line{color:var(--paper-muted)}
.rc-tx{display:inline-block; margin-top:2px; color:var(--paper-ink); font-size:12px}
.rc-tx:hover{color:#0B4FC4}
.rc-tx:focus-visible{outline-color:#1F5FD1}
.rc-bars{display:block; width:100%; height:22px; margin-top:8px; fill:var(--paper-ink); opacity:.85}

/* info tooltip (claim 22) */
.rc-info{position:relative; display:inline-flex}
.rc-info__btn{width:18px; height:18px; border-radius:50%; border:1px solid currentColor; background:transparent; color:var(--paper-muted);
  font:600 11px/1 var(--font-body); padding:0; cursor:help; display:grid; place-items:center}
.rc-info__tip{position:absolute; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%); width:220px; padding:8px 10px; border-radius:8px;
  background:var(--paper-ink); color:#fff; font:500 12px/1.4 var(--font-body); opacity:0; pointer-events:none; transition:opacity .15s; z-index:5}
.rc-info:hover .rc-info__tip,.rc-info:focus-within .rc-info__tip{opacity:1}

/* stamp */
.rc-stamp{position:absolute; right:12px; top:calc(var(--z) + 34px); transform:rotate(-11deg); font-family:var(--font-mono); font-size:22px; line-height:1;
  letter-spacing:.06em; padding:7px 10px 6px; border-radius:5px; color:var(--stamp-ink); mix-blend-mode:multiply;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.22), inset 0 0 0 4px rgba(255,255,255,.35); user-select:none;
  -webkit-mask:radial-gradient(circle at 30% 40%, #000 0 60%, rgba(0,0,0,.82) 61%) ; mask:radial-gradient(circle at 30% 40%, #000 0 60%, rgba(0,0,0,.82) 61%)}
.rc-stamp--paid{background:var(--paid)}
.rc-stamp--refused{background:var(--refused)}
.rc-stamp--failed{background:#C3CBD6}
.rc-stamp--sent{background:transparent; color:#6B7585; box-shadow:inset 0 0 0 2px #9AA3B0; font-size:18px; animation:sent-pulse 1.4s ease-in-out infinite}
@keyframes sent-pulse{50%{opacity:.45}}
.rc--stamped .rc-stamp{animation:stamp-in .36s cubic-bezier(.3,1.6,.5,1) both; animation-delay:calc(var(--pd) + 940ms)}
.rc--stamped .rc-paper{animation:jolt .28s ease-out; animation-delay:calc(var(--pd) + 1000ms)}
@keyframes stamp-in{from{transform:rotate(-2deg) scale(2.1); opacity:0} 70%{opacity:1} to{transform:rotate(-11deg) scale(1); opacity:1}}
@keyframes jolt{30%{transform:translateY(2px) rotate(.3deg)} 60%{transform:translateY(-1px)}}

/* other visitors' receipts in the roll */
.rc--other .rc-prompt{font-size:12.5px}

/* share bar */
.rc-share{display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; margin-top:-2px; animation:share-in .3s ease-out both}
@keyframes share-in{from{opacity:0; transform:translateY(-4px)}}
.rc-share button{display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 10px; border-radius:7px; border:1px solid var(--line-2);
  background:var(--bg-2); color:var(--ink); font-size:12.5px; font-weight:550; cursor:pointer; transition:background .15s, border-color .15s}
.rc-share button:hover{background:var(--bg-3); border-color:var(--muted)}
.rc-share svg{width:13px; height:13px}

/* compact (feed) */
.rc--compact .rc-paper{font-size:12px; padding:calc(var(--z) + 6px) 14px calc(var(--z) + 8px); height:100%}
.rc--compact .rc-rows dd{padding-right:0}
.rc--compact .rc-rows div:nth-child(-n+2) dd{padding-right:84px}
.rc--compact .rc-brand{display:none}
.rc--compact .rc-stamp{font-size:15px; top:calc(var(--z) + 32px); right:10px; padding:5px 7px 4px}
.rc--compact .rc-line{font-size:12.5px}
.rc--compact .rc-checks{font-size:11px}
.rc-prompt{font-family:var(--font-body); font-size:12.5px; color:var(--paper-muted)}
.rc-skel{height:230px; border-radius:6px; background:linear-gradient(90deg, var(--bg-2) 0 40%, var(--bg-3) 50%, var(--bg-2) 60% 100%) 0 0/300% 100%; animation:shimmer 1.6s linear infinite; border:1px solid var(--line)}

/* ---------- ticker tape ---------- */
.tape-strip{position:relative; display:flex; align-items:stretch; height:46px; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--bg-2); overflow:hidden}
.tape-strip__label{flex:none; display:flex; align-items:center; gap:8px; padding:0 14px 0 var(--gutter); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); background:var(--bg-2); border-right:1px dashed var(--line-2); z-index:1}
.tape-strip__view{position:relative; flex:1; min-width:0; overflow:hidden;
  -webkit-mask:linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent); mask:linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent)}
.tape-strip__run{display:flex; width:max-content; height:100%}
.tape-strip__run.is-run{animation:marquee var(--dur, 40s) linear infinite}
.tape-strip:hover .tape-strip__run,.tape-strip:focus-within .tape-strip__run{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.tape-strip__seg{display:flex; align-items:center; gap:18px; padding:0 18px 0 24px; white-space:nowrap}
.tk{display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:12.5px; color:var(--ink); text-decoration:none; padding:4px 2px}
.tk:hover span:not(.tk__ago){text-decoration:underline}
.tk b{font-weight:400; font-size:10.5px; letter-spacing:.08em; padding:2px 6px 1px; border-radius:3px; color:var(--stamp-ink)}
.tk--refused b{background:var(--refused)}
.tk--paid b{background:var(--paid)}
.tk i{font-style:normal; color:var(--muted)}
.tk__ago{color:var(--faint)}
.tk__sep{color:var(--faint); font-size:12px}
@media (prefers-reduced-motion: reduce){ .tape-strip__view{overflow-x:auto; -webkit-mask:none; mask:none} }

/* ---------- below the fold ---------- */
section.how,section.cta,section.feed{margin-top:80px}
h2{font-size:24px; letter-spacing:-.02em; margin:0 0 16px; font-weight:650}
.how__head{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:6px 32px; margin-bottom:22px}
.how__head h2{margin:0}
.how__head p{margin:0; max-width:56ch; font-size:16px}
code.mono{font-size:.92em; padding:1px 5px; border-radius:4px; background:var(--bg-2); border:1px solid var(--line)}
.gates{list-style:none; margin:0; padding:0; display:grid; gap:14px; counter-reset:g}
.gate{position:relative; padding:18px 18px 16px; border:1px solid var(--line); border-radius:14px; background:var(--bg-2); transition:border-color .3s, transform .3s}
.gate__n{display:inline-block; font-size:12px; color:var(--faint); letter-spacing:.08em}
.gate h3{margin:8px 0 6px; font-size:20px; letter-spacing:-.015em; font-weight:650}
.gate p{margin:0; color:var(--muted); font-size:15px; line-height:1.45}
.gate__stat{display:flex; align-items:center; gap:10px; margin-top:14px!important; font-size:11.5px!important; color:var(--faint)!important; min-height:16px}
.gate__bar{display:inline-block; width:56px; height:6px; border-radius:3px; background:var(--line); overflow:hidden; flex:none}
.gate__bar i{display:block; height:100%; width:calc(var(--v) * 100%); background:var(--refused); border-radius:3px; transition:width .8s .3s ease}
.gates:not(.is-seen) .gate__bar i{width:0}
.gates.is-seen .gate{animation:gate-scan 1s ease-out both}
.gates.is-seen .gate:nth-child(2){animation-delay:.3s}
.gates.is-seen .gate:nth-child(3){animation-delay:.6s}
@keyframes gate-scan{0%{border-color:var(--line)} 30%{border-color:var(--focus); box-shadow:0 0 0 3px color-mix(in srgb, var(--focus) 18%, transparent)} 100%{border-color:var(--line)}}
@media (min-width:900px){
  .gates{grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px}
  .gate:not(:last-child)::after{content:''; position:absolute; top:50%; right:-22px; width:16px; height:16px; margin-top:-8px;
    background:no-repeat center/16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238396AE' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E")}
  h2{font-size:30px}
}
.verdicts{display:grid; gap:10px; margin-top:18px}
@media (min-width:900px){ .verdicts{grid-template-columns:1fr 1fr; gap:28px} }
.verdict{display:flex; align-items:center; gap:14px; margin:0; padding:12px 14px; border-radius:12px; border:1px dashed var(--line-2); font-size:14.5px; color:var(--muted)}
.verdict__stamp{flex:none; transform:rotate(-8deg); font-size:13px; letter-spacing:.06em; padding:4px 7px 3px; border-radius:4px; color:var(--stamp-ink);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.2)}
.verdict--paid .verdict__stamp{background:var(--paid)}
.verdict--refused .verdict__stamp{background:var(--refused)}

.cta__box{display:grid; gap:24px; padding:26px; border-radius:16px; border:1px solid var(--line); background:var(--bg-2); align-items:center}
.cta__box h2{margin:0 0 8px}
.cta__box p{margin:0 0 18px; color:var(--muted); font-size:16.5px; max-width:52ch}
.cta__code{margin:0; padding:18px 20px; border-radius:12px; background:var(--bg); border:1px solid var(--line); font-size:13px; line-height:1.75; overflow-x:auto; color:var(--ink)}
.c-dim{color:var(--faint)} .c-fn{color:var(--focus)} .c-ok{color:var(--paid-text)} .c-no{color:var(--refused-text)}
@media (min-width:900px){ .cta__box{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); padding:32px 36px; gap:40px} }

.feed__head{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:4px 24px; margin-bottom:20px}
.feed__head h2{margin:0}
.feed__head p{margin:0; font-size:15px}
.feed__head a{color:var(--ink)}
.feed__grid{display:grid; gap:16px; grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){ .feed__grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1024px){ .feed__grid{grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px} }
.feed__msg{grid-column:1/-1; margin:0; padding:20px; border:1px dashed var(--line-2); border-radius:12px; color:var(--muted); text-align:center}
@media (max-width:639px){ .rc-skel:nth-child(n+2){display:none} }

/* ---------- "someone just tried" popups ---------- */
.pops{position:fixed; left:16px; bottom:16px; z-index:55; width:min(310px, calc(100vw - 32px)); pointer-events:none}
.pops[data-side="right"]{left:auto; right:16px}
.pop{position:relative; pointer-events:auto; filter:drop-shadow(0 14px 22px rgba(0,0,0,.45)); animation:pop-in .5s cubic-bezier(.2,.8,.2,1) both}
.pop.is-out{animation:pop-out .26s ease-in both}
@keyframes pop-in{from{opacity:0; transform:translateY(14px); clip-path:inset(100% 0 0 0)} to{clip-path:inset(-20px -20px -20px -20px)}}
@keyframes pop-out{to{opacity:0; transform:translateY(10px)}}
.pop__paper{position:relative; background:var(--paper); color:var(--paper-ink); padding:16px 16px 12px; border-radius:2px 2px 6px 6px;
  -webkit-mask:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/10px 51% repeat-x, linear-gradient(#000,#000) bottom/100% 51% no-repeat;
          mask:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/10px 51% repeat-x, linear-gradient(#000,#000) bottom/100% 51% no-repeat}
.pop__k{display:flex; align-items:center; gap:7px; margin:2px 0 6px; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--paper-muted)}
.pop__ago{text-transform:none; letter-spacing:0}
.pop__v{margin:0; font-size:14px; padding-right:86px}
.pop__r{margin:2px 0 0; font-size:13px; font-weight:650; padding-right:70px}
.pop--refused .pop__r{color:#B3261A} .pop--paid .pop__r{color:#0B6E37}
.pop__p{margin:6px 0 0; font-size:12.5px; color:var(--paper-muted); overflow-wrap:anywhere}
.pop__foot{display:flex; justify-content:space-between; gap:10px; margin:8px 0 0; font-size:11.5px; padding-top:8px; border-top:1px dashed var(--paper-line)}
.pop__foot a{color:var(--paper-ink)}
.pop__foot span{color:var(--paper-muted)}
.pop__stamp{position:absolute; right:12px; top:30px; transform:rotate(-11deg); font-size:14px; letter-spacing:.06em; padding:5px 7px 4px; border-radius:4px;
  color:var(--stamp-ink); box-shadow:inset 0 0 0 2px rgba(0,0,0,.2); mix-blend-mode:multiply; animation:stamp-in .36s .35s cubic-bezier(.3,1.6,.5,1) both}
.pop--refused .pop__stamp{background:var(--refused)} .pop--paid .pop__stamp{background:var(--paid)}
.pop__ctl{display:flex; justify-content:space-between; align-items:center; margin-top:6px}
.pop__mute{border:0; background:transparent; color:var(--muted); font-size:12px; padding:4px 2px; cursor:pointer; text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line-2)}
.pop__mute:hover{color:var(--ink)}
.pop__x{width:28px; height:28px; border-radius:50%; border:1px solid var(--line-2); background:var(--bg-2); color:var(--ink); cursor:pointer; font-size:16px; line-height:1; padding:0}
.pop__x:hover{background:var(--bg-3)}
.pop--bar{position:absolute; inset:0; z-index:3; display:flex; align-items:center; gap:12px; padding:0 8px 0 var(--gutter); background:var(--paper); color:var(--paper-ink);
  filter:none; font-size:13px; animation:bar-in .35s cubic-bezier(.2,.8,.2,1) both}
.pops.is-dock{left:var(--dock-l, 0px); right:0; bottom:0; width:auto}
.pops.is-dock .pop--bar{position:relative; height:46px; border-top:1px solid var(--paper-line); box-shadow:0 -10px 24px -12px rgba(0,0,0,.5)}
.pop--bar.is-out{animation:pop-out .26s ease-in both}
@keyframes bar-in{from{clip-path:inset(0 100% 0 0)} to{clip-path:inset(0 0 0 0)}}
.pop__badge{flex:none; font-size:11px; letter-spacing:.08em; padding:3px 7px 2px; border-radius:3px; color:var(--stamp-ink); transform:rotate(-4deg)}
.pop--bar.pop--refused .pop__badge{background:var(--refused)} .pop--bar.pop--paid .pop__badge{background:var(--paid)}
.pop__line{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pop__who{font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--paper-muted); margin-right:6px}
.pop--bar.pop--refused .pop__why{color:#B3261A} .pop--bar.pop--paid .pop__why{color:#0B6E37}
.pop__txl{flex:none; color:var(--paper-ink); font-size:12px}
.pop--bar .pop__mute{color:var(--paper-muted); text-decoration-color:var(--paper-line); flex:none}
.pop--bar .pop__x{background:transparent; border-color:var(--paper-line); color:var(--paper-ink); flex:none}
@media (max-width:767px){ .pop--bar .pop__who,.pop--bar .pop__why{display:none} }
@media (max-width:767px){
  .pops:not(.is-dock),.pops[data-side]:not(.is-dock){left:12px; right:12px; bottom:12px; width:auto}
  .pop__p{display:none}
  .pop__paper{padding:14px 14px 10px}
}

@media (prefers-reduced-motion: reduce){
  .pop--bar,.rc,.turn,.rc-stamp,.rc-paper,.rc-checks li,.rc-checks b,.pop,.pop__stamp,.chip,.tape,.gate,.leash__clasp{animation:none!important}
  .rc-stamp--sent{animation:none}
  .leash__fill,.leash__clasp,.odo__d > span,.gate__bar i{transition:none}
  .dots::after{content:'...'; animation:none}
  .eyebrow__dot{animation:none}
}