:root { --bg:#0f1419; --panel:#1a212b; --accent:#3fb950; --text:#e6edf3;
            --muted:#8b98a5; --border:#2d3744; --danger:#f85149; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text);
           font-family:system-ui,'Segoe UI',Roboto,sans-serif; line-height:1.6; }
header { border-bottom:1px solid var(--border); padding:14px 20px; }
header a { color:var(--text); text-decoration:none; font-weight:600; }
main { max-width:620px; margin:0 auto; padding:30px 22px 60px; }
h1 { font-size:24px; margin:0 0 6px; }
.muted { color:var(--muted); font-size:14px; }
.card { background:var(--panel); border:1px solid var(--border); border-radius:12px;
            padding:20px; margin:20px 0; }
.price { font-size:34px; font-weight:700; }
.price s { color:var(--muted); font-size:20px; font-weight:400; margin-right:10px; }
.row { display:flex; gap:10px; }
input[type=text] { flex:1; background:var(--inset,#0d1218); color:var(--text); border:1px solid var(--border);
                       border-radius:9px; padding:10px 12px; font-size:15px; }
button { background:var(--accent); color:#06210c; border:0; border-radius:9px;
             padding:11px 18px; font-size:15px; font-weight:600; cursor:pointer; }
button.ghost { background:transparent; color:var(--text); border:1px solid var(--border); }
.err { color:var(--danger); font-size:14px; }
.ok { color:var(--accent); font-size:14px; }
ul { padding-left:18px; }
a.back { color:var(--muted); font-size:13px; text-decoration:none; }
/* PayPal's button in their colours: gold #FFC439 and the wordmark in their two blues -
       „Pay" #003087 and „Pal" #009CDE. Our green button with someone else's brand on it
       confuses who is taking the money; the familiar look says where the customer is going
       before they press. */
    .paypal-btn { display:inline-flex; align-items:center; justify-content:center; gap:2px;
                  background:#FFC439; color:#003087; border:0; border-radius:24px;
                  padding:12px 26px; font-size:16px; font-weight:700; cursor:pointer;
                  font-family:Helvetica,Arial,sans-serif; letter-spacing:-.2px;
                  box-shadow:none; text-decoration:none; }
.paypal-btn:hover { background:#F2BA36; }
/* Stripe imposes no button colour; we use our accent so it does not pretend to be PayPal. */
    .card-btn { display:inline-flex; align-items:center; justify-content:center;
                background:#635BFF; color:#fff; border:0; border-radius:24px;
                padding:12px 26px; font-size:16px; font-weight:700; cursor:pointer;
                margin-right:8px; }
.card-btn:hover { background:#554DE0; }

/* Revolut's own look: their brand is monochrome, a white wordmark on black. Built from text
   the way the PayPal button above is, rather than shipping a logo file - and deliberately no
   „R" monogram, because approximating a trademark's shape by hand is worse than not showing
   it. */
.revolut-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px;
               background:#000; color:#fff; border:0; border-radius:24px;
               padding:12px 26px; font-size:16px; font-weight:700; cursor:pointer;
               margin-right:8px; text-decoration:none; }
.revolut-btn:hover { background:#1c1c1c; }
.revolut-btn .rw { font-family:Helvetica,Arial,sans-serif; letter-spacing:-.4px;
                   font-weight:800; }
.revolut-btn .lead { font-weight:600; }
.revolut-btn.test { background:#8a6d1f; }
.revolut-btn.test:hover { filter:brightness(1.1); }

.paypal-btn .p1 { color:#003087; font-style:italic; }
.paypal-btn .p2 { color:#009CDE; font-style:italic; }
.paypal-btn .lead { color:#003087; font-weight:600; margin-right:6px; font-style:normal; }

/* The чл. 57, т. 13 consent, beside the pay buttons. Deliberately full-width and legible
   rather than fine print: it is the line that costs the customer their right of withdrawal,
   and a consent nobody can read is one nobody gave. */
.consent { display:flex; gap:10px; align-items:flex-start; margin:14px 0 4px;
           color:var(--text,#d5dde5); font-size:13.5px; line-height:1.5; cursor:pointer; }
.consent input { margin-top:3px; flex:none; width:16px; height:16px; accent-color:var(--accent,#3fb950); }

/* The staff-only test-mode pay button. Deliberately NOT the brand colour of the real one:
   the whole risk of a test button on a live-looking page is somebody taking it for the real
   thing, so it is amber and says so in its label. */
.card-btn.test { background:#8a6d1f; border-color:#8a6d1f; color:#fff; }
.card-btn.test:hover { filter:brightness(1.1); }

/* The Revolut button is black on a near-black page - without an edge it reads as a hole
   rather than as a control. */
.revolut-btn { border:1px solid #4a4a4a; }
.bank-btn { display:inline-flex; align-items:center; justify-content:center;
            background:transparent; color:var(--text); border:1px solid var(--border);
            border-radius:24px; padding:12px 26px; font-size:16px; font-weight:700;
            cursor:pointer; margin-right:8px; text-decoration:none; }
.bank-btn:hover { border-color:var(--accent); }

/* The consent used to be a tick box; it is now the sentence a customer reads immediately
   before pressing, so it must not look like fine print. */
.consent-note { margin:0 0 12px; font-size:13.5px; line-height:1.5; }

/* The tier chooser. Links and not radio buttons: choosing a tier RELOADS the page, because
   the price, the discount a code would give and which providers can sell it are all recomputed
   on the server. A radio that only looked selected would leave the customer reading one price
   and being charged another. */
.tiers { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px;
  margin:0 0 16px; }
.tier { display:flex; flex-direction:column; gap:5px; padding:14px 16px; border-radius:12px;
  border:1px solid var(--border,#2d3744); background:var(--panel,#1a212b);
  text-decoration:none; color:var(--text,#e6edf3); transition:border-color .12s; }
.tier:hover { border-color:var(--accent,#3fb950); }
/* The chosen one carries a ring as well as a border colour: on the light theme a one-pixel
   green edge next to a grey one is not a difference anybody notices at a glance. */
.tier.on { border-color:var(--accent,#3fb950); box-shadow:0 0 0 1px var(--accent,#3fb950); }
.tier-n { font-weight:700; font-size:15px; }
.tier-p { font-size:20px; font-weight:700; }
.tier-p small { font-size:13px; font-weight:400; color:var(--muted,#8b98a5); }
.tier-b { font-size:12.5px; color:var(--muted,#8b98a5); line-height:1.45; }

/* „Why are you leaving?" — a note in the corner, not a modal. No overlay, nothing dimmed,
   nothing behind it disabled: the page keeps working and so does the way out of the page.
   Quiet by design; it is interrupting somebody who has already decided to go. */
.xi { position:fixed; right:16px; bottom:16px; width:min(360px, calc(100vw - 32px));
      background:var(--panel, #14161a); color:var(--ink, #e8eaed);
      border:1px solid var(--border, #2a2e35); border-radius:12px; padding:14px 14px 12px;
      box-shadow:0 8px 30px rgba(0,0,0,.28); z-index:60; font-size:14px; line-height:1.45; }
.xi-x { position:absolute; top:6px; right:8px; background:none; border:0; cursor:pointer;
        color:var(--muted, #9aa0a6); font-size:20px; line-height:1; padding:4px 6px; }
.xi-x:hover { color:var(--ink, #e8eaed); }
.xi-log { max-height:240px; overflow-y:auto; margin:6px 22px 10px 0; }
.xi-log p { margin:0 0 8px; }
.xi-bot { color:var(--muted, #9aa0a6); }
.xi-me  { color:var(--ink, #e8eaed); }
.xi-form { display:flex; gap:8px; }
.xi-in { flex:1; min-width:0; padding:8px 10px; border-radius:8px; font:inherit;
         background:var(--bg, #0e1013); color:var(--ink, #e8eaed);
         border:1px solid var(--border, #2a2e35); }
.xi-in:disabled { opacity:.6; }
.xi-send { padding:8px 12px; border-radius:8px; font:inherit; cursor:pointer;
           background:transparent; color:var(--accent, #4caf50);
           border:1px solid var(--border, #2a2e35); }
.xi-send:hover { border-color:var(--accent, #4caf50); }
@media (prefers-reduced-motion: no-preference) { .xi { animation:xi-in .18s ease-out; } }
@keyframes xi-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

/* The discount code, folded under the action instead of standing over it. `summary` is the
   whole tap target, so it gets a finger's height on a phone. */
.codebox { margin: 14px 0 0; }
.codebox > summary { cursor: pointer; color: var(--muted); font-size: 14px; padding: 12px 2px;
  min-height: 44px; display: flex; align-items: center; gap: 8px; }
.codebox > summary::marker { color: var(--muted); }
.codebox[open] > summary { color: var(--text); }
.codebox .card { margin-top: 0; }
/* Phone: the discount code is a field somebody types in, so it takes the same 16px floor as
   every other one — under it iOS Safari zooms the page in on focus and does not zoom back
   out. Found by measuring this page at 390×844 after the box was moved below the buttons. */
@media (max-width: 600px) {
  .codebox input, .card input[type=text] { font-size: 16px; }
  /* At 390px the code field plus „Провери" came to 392px and the button hung 2px past the
     edge — the field was taking its natural width instead of whatever is left. Measured, not
     guessed: the page itself never scrolled, so only the button was outside. */
  .codebox .row { display: flex; gap: 8px; }
  .codebox .row input { flex: 1 1 auto; min-width: 0; }
  .codebox .row button { flex: 0 0 auto; }
}