/* Mitilena Pay - shared landing styles.
   One stylesheet for every landing page, linked once per page. */

:root{
  --brand-1:#622ec3; --brand-2:#4d65db; --brand-3:#379aee; --brand-4:#13ccd7; --brand-5:#53e9f6;
  --brand-gradient:linear-gradient(90deg,var(--brand-1),var(--brand-2) 25%,var(--brand-3) 50%,var(--brand-4) 75%,var(--brand-5));
  --gold:#f2ad4b; --gold-ink:#b47416;
  --green:#73bc3d; --green-ink:#4c8c25;
  --blue-ink:#2b7fd4;

  --ink:#17181c; --ink-2:#3a3b40; --ink-3:#55565c; --ink-4:#6b6c72; --ink-5:#8a8b90; --ink-6:#a8a9ae;
  --paper:#fbfaf7; --paper-2:#f2f0ea; --paper-3:#f1f0ec; --white:#fff; --dark:#181818;
  --line:rgba(0,0,0,.07); --line-2:rgba(0,0,0,.1);

  --r-sm:6px; --r-md:8px; --r-lg:14px; --r-xl:15px;
  --shadow-card:0 4px 18px rgba(30,30,40,.06);
  --shadow-lift:0 16px 36px rgba(30,30,40,.11);
  --shadow-float:0 26px 60px rgba(30,30,40,.16);
  --gutter:48px; --maxw:1080px;
  --sans:'Open Sans',sans-serif; --mono:'JetBrains Mono',monospace;
}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--paper);color:#1c1c1e;font-family:var(--sans)}
img{display:block}
a{color:var(--gold-ink)}
a:hover{color:#8f5a0e}
html{scroll-behavior:smooth}

@keyframes gradSlide{from{background-position:0 50%}to{background-position:-200% 50%}}

/* ── Utilities ──────────────────────────────────── */
.wrap{max-width:var(--maxw);margin:0 auto}
.section{padding:64px var(--gutter)}
.section--white{background:var(--white)}
.section--paper{background:var(--paper)}
.section--paper2{background:var(--paper-2)}
.section[id]{scroll-margin-top:70px}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
/* without this a 1fr track stretches to its longest unbreakable content
   (a demo link inside .copy__url) and the page scrolls sideways on phones */
.grid-2 > *,.grid-3 > *{min-width:0}

.kicker{margin:0 0 8px;font:600 11px var(--mono);letter-spacing:.22em;color:var(--gold-ink);text-transform:uppercase}
.h-section{margin:0 0 8px;font:800 32px/1.2 var(--sans);letter-spacing:-.02em;color:var(--ink)}
.h-section + .lede{margin:0 0 32px}
.lede{font:400 16px/1.65 var(--sans);color:var(--ink-4);max-width:720px}
.gradient-text{background:linear-gradient(100deg,#0da8b5,#379aee 55%,#7a4fd8);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand-rule{height:3px;background:var(--brand-gradient);background-size:200% 100%;animation:gradSlide 7s linear infinite}

.btn{display:inline-block;border-radius:var(--r-md);font-family:var(--sans);font-weight:700;text-transform:uppercase;letter-spacing:.12em;text-decoration:none;cursor:pointer}
.btn--dark{background:#1e1e1e;color:var(--white);font-size:12.9px;padding:10px 18px}
.btn--brand{color:var(--white);background:linear-gradient(90deg,var(--brand-1),var(--brand-2),var(--brand-3),var(--brand-4),var(--brand-5),var(--brand-4),var(--brand-3),var(--brand-2),var(--brand-1));background-size:200% 100%;animation:gradSlide 6s linear infinite;box-shadow:0 6px 20px rgba(19,204,215,.3)}
.btn--brand.btn--md{font-size:14px;padding:16px 36px}
.btn--brand.btn--lg{font-size:15px;padding:17px 44px}
.btn__short{display:none}

.tag{display:inline-block;font:600 11px var(--mono);letter-spacing:.14em;border-radius:20px;padding:5px 11px}
.tag--blue{color:var(--blue-ink);background:rgba(55,154,238,.09);border:1px solid rgba(55,154,238,.3)}
.tag--gold{color:var(--gold-ink);background:rgba(242,173,75,.12);border:1px solid rgba(242,173,75,.45)}
.tag--green{color:var(--green-ink);background:rgba(115,188,61,.12);border:1px solid rgba(115,188,61,.45)}
.chip{font:600 11px var(--mono);color:var(--ink-3);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:5px 9px}
.chip--on{color:var(--ink);border:1.5px solid var(--brand-4);background:rgba(19,204,215,.06)}
.note{font:400 11px var(--mono);color:var(--ink-5);letter-spacing:.12em}
.note b{color:var(--green-ink);font-weight:600}

/* ── Header ─────────────────────────────────────── */
.site-header{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:14px var(--gutter);background:rgba(255,255,255,.88);backdrop-filter:blur(10px) saturate(1.3);
  -webkit-backdrop-filter:blur(10px) saturate(1.3);border-bottom:1px solid var(--line)}
.site-header__logo img{height:54px}
.site-nav{display:flex;gap:28px;align-items:center}
.site-nav a{font:600 13.5px var(--sans);color:var(--ink-2);text-decoration:none}
.site-nav a:hover{color:var(--ink)}

/* ── Hero ──────────────────────────────────────────── */
.hero{padding:78px var(--gutter) 72px;text-align:center;background:radial-gradient(900px 420px at 50% -10%,rgba(55,154,238,.07),transparent 65%)}
.hero__title{margin:0 auto 24px;font:800 52px/1.14 var(--sans);letter-spacing:-.02em;color:var(--ink);max-width:920px}
.hero__lede{margin:0 auto 36px;font:400 18px/1.7 var(--sans);color:var(--ink-3);max-width:730px}
.hero__lede strong{color:var(--ink);font-weight:600}
.hero__lede--airy{font-weight:300}

/* ── Mock-up: chat message with a link ──────────── */
.mock{position:relative;max-width:420px;margin:64px auto 34px}
.mock__glow{position:absolute;left:-90px;right:-90px;top:-50px;bottom:-40px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(19,204,215,.2),rgba(98,46,195,.09) 58%,rgba(251,250,247,0) 100%)}
.mock__frame{position:relative;padding:1.5px;border-radius:19px;box-shadow:var(--shadow-float);
  background:linear-gradient(150deg,rgba(98,46,195,.45),rgba(55,154,238,.35) 45%,rgba(19,204,215,.45))}
.mock__card{background:var(--white);border-radius:17.5px;padding:14px;text-align:left}
.chat__head{display:flex;align-items:center;gap:10px;padding:6px 6px 12px;border-bottom:1px solid rgba(0,0,0,.06)}
.chat__body{padding:14px 6px 6px;display:flex;flex-direction:column;gap:10px}
.avatar{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font:700 14px var(--sans);color:var(--white);background:linear-gradient(135deg,var(--brand-2),var(--brand-4))}
.chat__name{font:700 13.5px var(--sans);color:var(--ink)}
.chat__status{font:400 11px var(--sans);color:var(--green-ink)}
.bubble{max-width:78%;align-self:flex-start;background:var(--paper-3);border-radius:14px 14px 14px 4px;
  padding:10px 13px;font:400 13.5px/1.4 var(--sans);color:var(--ink-2)}
.bubble--me{align-self:flex-end;max-width:82%;background:none;padding:0}
.bubble__card{background:rgba(19,204,215,.1);border:1px solid rgba(19,204,215,.35);border-radius:14px 14px 4px 14px;padding:10px 12px}
.link-preview{display:flex;align-items:center;gap:10px;background:var(--white);border:1px solid rgba(0,0,0,.08);
  border-radius:9px;padding:9px 11px;margin-bottom:8px}
.link-preview__icon{width:30px;height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center;
  font:800 12px var(--sans);color:var(--white);background:linear-gradient(135deg,var(--brand-1),var(--brand-4))}
.link-preview__title{font:700 12.5px var(--sans);color:var(--ink)}
.link-preview__url{font:400 11px var(--mono);color:var(--ink-5);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.bubble__text{font:400 13.5px/1.4 var(--sans);color:var(--ink)}
.bubble__meta{text-align:right;font:400 10px var(--sans);color:var(--ink-5);margin-top:4px}
.receipt{position:absolute;right:-30px;bottom:-26px;display:flex;align-items:center;gap:10px;background:var(--white);
  border:1px solid rgba(115,188,61,.45);border-radius:13px;padding:11px 15px;box-shadow:0 14px 32px rgba(30,30,40,.16)}
.receipt__check{width:28px;height:28px;border-radius:50%;background:rgba(115,188,61,.15);display:flex;
  align-items:center;justify-content:center;font:700 14px var(--sans);color:var(--green-ink)}
.receipt__sum{font:600 14px var(--mono);color:var(--ink)}
.receipt__label{font:400 10.5px var(--sans);color:var(--green-ink)}

/* ── Cards ──────────────────────────────────────── */
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-card);
  transition:transform .2s ease,box-shadow .2s ease}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.card--accent{border-radius:3px 3px var(--r-lg) var(--r-lg)}
.card--accent-blue{border-top:3px solid var(--brand-3)}
.card--accent-gold{border-top:3px solid var(--gold)}
.card--accent-green{border-top:3px solid var(--green)}
.card--soft{background:var(--paper);border-color:rgba(0,0,0,.06);box-shadow:none}
.card__body{padding:24px 26px}
.card__title{margin:0 0 8px;font:700 18px var(--sans);color:var(--ink)}
.card__text{font:400 14.5px/1.6 var(--sans);color:var(--ink-3)}
.card__text strong{color:var(--ink);font-weight:600}

/* ── Steps ──────────────────────────────────────── */
.step{padding:22px 22px 24px}
.step__num{display:flex;align-items:center;gap:9px;margin-bottom:16px}
.step__num i{font:800 32px/1 var(--sans);letter-spacing:-.03em;font-style:normal;
  background:linear-gradient(135deg,var(--brand-1),var(--brand-4));-webkit-background-clip:text;background-clip:text;color:transparent}
.step__num--2 i{background:linear-gradient(135deg,var(--brand-2),var(--brand-4));-webkit-background-clip:text;background-clip:text}
.step__num--3 i{background:linear-gradient(135deg,var(--brand-3),var(--brand-5));-webkit-background-clip:text;background-clip:text}
.step__num span{font:600 10px var(--mono);letter-spacing:.2em;color:var(--ink-6)}
.step__title{margin:0 0 8px;font:700 17px var(--sans);color:var(--ink)}
.step__text{font:400 14px/1.6 var(--sans);color:var(--ink-3)}
.step__text strong{color:var(--ink);font-weight:600}
.ui{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:14px;margin-bottom:16px}
.ui__label{font:600 9px var(--mono);letter-spacing:.16em;color:var(--ink-5);margin-bottom:8px}
.ui__field{background:var(--white);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:9px 11px;
  font:400 12.9px var(--sans);color:var(--ink)}
.ui__field--focus{border:1.5px solid var(--brand-4)}
.ui__field--muted{font-size:12px;line-height:1.4;color:var(--ink-5);margin-top:8px}
.ui__hint{font:400 10.5px var(--sans);color:var(--ink-5);margin-top:8px}
.ui__row{display:flex;align-items:center;gap:8px;background:var(--white);border:1px solid var(--line-2);
  border-radius:var(--r-sm);padding:9px 11px}
.ui__net{font:600 10px var(--mono);color:var(--blue-ink);border:1px solid rgba(55,154,238,.5);border-radius:3px;padding:2px 5px}
.ui__addr{font:400 12px var(--mono);color:var(--ink)}
.ui__ok{margin-left:auto;color:var(--green-ink);font:600 12px var(--sans)}
.copy{display:flex;align-items:stretch;gap:8px}
.copy__url{flex:1;background:var(--white);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:9px 11px;
  font:400 11.5px var(--mono);color:var(--ink);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.copy__btn{background:#1e1e1e;color:var(--white);border-radius:var(--r-sm);padding:9px 14px;
  font:600 11px var(--mono);letter-spacing:.12em;display:flex;align-items:center;cursor:pointer}

/* ── Features ───────────────────────────────────── */
.feature{padding:22px 24px}
.feature__title{margin:0 0 8px;font:700 17px var(--sans);color:var(--ink)}
.feature__text{font:400 14px/1.6 var(--sans);color:var(--ink-3)}

/* ── Reviews ────────────────────────────────────── */
.review{padding:26px 28px}
.review__top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:10px}
.review__stars{font:400 12.9px var(--mono);color:var(--gold);letter-spacing:.2em}
.review__quote{font:800 46px/.7 var(--sans);background:linear-gradient(135deg,rgba(98,46,195,.35),rgba(19,204,215,.35));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.review__text{font:300 15.5px/1.65 var(--sans);color:var(--ink-2);margin-bottom:18px}
.review__author{display:flex;align-items:center;gap:12px}
.review__avatar{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font:700 14px var(--sans);color:var(--white);background:linear-gradient(135deg,var(--brand-1),var(--brand-3))}
.review__avatar--alt{background:linear-gradient(135deg,var(--brand-4),var(--brand-5))}
.review__name{font:700 14.5px var(--sans);color:var(--ink)}
.review__meta{font:400 12px var(--sans);color:var(--ink-5)}

/* ── Final CTA ──────────────────────────────────── */
.cta{padding:72px var(--gutter) 78px;text-align:center;
  background:radial-gradient(760px 340px at 50% 0,rgba(19,204,215,.13),rgba(242,240,234,0) 72%),var(--paper-2)}
.cta__title{margin:0 auto 16px;font:800 34px/1.2 var(--sans);letter-spacing:-.02em;color:var(--ink);max-width:760px}
.cta__text{margin:0 auto 30px;font:400 16px/1.65 var(--sans);color:var(--ink-3);max-width:580px}
.cta__text strong{color:var(--ink);font-weight:600}
.cta .note{display:block;margin-top:18px}

/* ── Wallet promo ───────────────────────────────── */
.promo{padding:56px var(--gutter);background:var(--white);border-top:1px solid var(--line)}
.promo__panel{position:relative;overflow:hidden;max-width:var(--maxw);margin:0 auto;background:var(--paper);
  border:1px solid rgba(0,0,0,.08);border-radius:var(--r-xl);padding:36px 40px;display:flex;align-items:center;gap:44px}
.promo__panel::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--brand-gradient)}
.promo__copy{flex:1}
.promo__title{margin:0 0 12px;font:800 26px/1.25 var(--sans);letter-spacing:-.02em;color:var(--ink)}
.promo__text{font:400 15px/1.65 var(--sans);color:var(--ink-3)}
.promo__side{flex:none;text-align:center}
.promo__link{font:600 17px/1.4 var(--sans);text-decoration:underline;text-underline-offset:4px}
.stores{display:flex;gap:8px;justify-content:center;margin-top:16px}
.stores img{width:104px}

/* ── Footer ─────────────────────────────────────── */
.site-footer{background:var(--dark);color:var(--white)}
.site-footer__cols{max-width:var(--maxw);margin:0 auto;padding:52px var(--gutter) 40px;
  display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:44px}
.site-footer__logo{height:48px;margin-bottom:14px}
.site-footer__about{font:300 13.5px/1.65 var(--sans);color:rgba(255,255,255,.55);max-width:300px;margin-bottom:18px}
.site-footer__cols .stores img{width:96px}
/* .stores is shared with the promo block, where the column is centred.
   In the footer the column is left-aligned, otherwise badges drift right of the logo */
.site-footer .stores{justify-content:flex-start}
.col__head{font:600 10px var(--mono);letter-spacing:.2em;color:rgba(255,255,255,.4);margin-bottom:16px}
.col__links{display:flex;flex-direction:column;gap:11px;align-items:flex-start}
.col__links a{font:400 14px var(--sans);color:rgba(255,255,255,.8);text-decoration:none}
.col__links a:hover{color:var(--white)}
.pills{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.pill{font:600 10px var(--mono);letter-spacing:.1em;color:rgba(255,255,255,.75);
  border:1px solid rgba(255,255,255,.18);border-radius:4px;padding:4px 8px}
/* coin colours, matching the wallet app. Dark-background variants:
   the brand hex values are too dim on #181818. */
.pill--usdt{color:#26a17b}
.pill--btc{color:#f2ad4b}
.pill--eth{color:#8ba3f7}
.pill--bnb{color:#f2c94c}
/* no dark-background variants exist for these three: brand colours
   (TRX #eb0029, USDC #2775ca, EURC) lightened until readable on #181818 */
.pill--trx{color:#f2687e}
.pill--usdc{color:#4d9bea}
.pill--eurc{color:#37c5e0}
.col__note{font:300 12.9px/1.6 var(--sans);color:rgba(255,255,255,.55)}
/* cross-links: the default --gold-ink is unreadable on the dark footer */
.col__note--next{margin-top:10px}
.col__note--next a{color:rgba(255,255,255,.8);text-decoration:underline;text-underline-offset:3px}
.col__note--next a:hover{color:var(--white)}
.site-footer__bar{border-top:1px solid rgba(255,255,255,.08)}
.site-footer__bar > div{max-width:var(--maxw);margin:0 auto;padding:18px var(--gutter);display:flex;
  align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.site-footer__bar .note{color:rgba(255,255,255,.4)}
.site-footer__bar .note b{color:#91f349}

/* ── Two-column block: text + illustration ──────── */
.split{max-width:var(--maxw);margin:0 auto;display:flex;gap:52px;align-items:center}
.split__main{flex:1}
.split__aside{flex:none;width:340px}
.split__aside--wide{width:360px}
.prose{display:flex;flex-direction:column;gap:12px;font:300 15.5px/1.7 var(--sans);color:var(--ink-3)}
.prose--plain{font-weight:400}
.prose strong{color:var(--ink);font-weight:600}

/* ── Flow diagram ───────────────────────────────── */
.flow{display:flex;flex-direction:column;gap:6px}
.flow__card{display:flex;align-items:center;gap:16px;background:var(--white);border:1px solid var(--line);
  border-radius:12px;padding:18px 20px;box-shadow:0 2px 10px rgba(30,30,40,.05)}
.flow__card--final{border:1.5px solid rgba(115,188,61,.55)}
.flow__icon{width:46px;height:46px;flex:none;border-radius:10px;background:var(--paper);
  border:1px solid rgba(0,0,0,.06);display:flex;align-items:center;justify-content:center}
.flow__icon img{width:26px;height:26px;object-fit:contain}
.flow__icon img.is-inverted{filter:invert(.72)}
.flow__title{font:700 14.5px var(--sans);color:var(--ink)}
.flow__sub{font:400 12.9px var(--sans);color:var(--ink-5)}
.flow__sub--ok{color:var(--green-ink)}
.flow__arrow{text-align:center;font:300 20px/1 var(--sans);color:#b0b1b6}
.flow__pill{align-self:center;font:600 9.5px var(--mono);letter-spacing:.12em;color:var(--blue-ink);
  border:1px solid rgba(55,154,238,.4);border-radius:20px;padding:5px 12px;margin:3px 0}
.flow--tight{gap:0}
.flow--tight .flow__arrow{padding:3px 0}

/* ── Geo chips ──────────────────────────────────── */
.geo{display:flex;flex-wrap:wrap;gap:6px}
.geo span{font:600 12px var(--mono);color:var(--ink-2);border:1px solid rgba(0,0,0,.12);border-radius:var(--r-sm);padding:7px 11px}
.geo span.is-muted{color:var(--ink-5)}
.arrows{display:flex;justify-content:center;gap:26px;color:#c8c4bb;font:300 16px/1 var(--sans);padding:8px 0 6px}

/* ── Before / after comparison ──────────────────── */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.compare__col{border-radius:12px;padding:26px 28px}
.compare__col--bad{background:var(--paper);border:1px solid rgba(0,0,0,.08)}
.compare__col--good{background:var(--white);border:1.5px solid rgba(19,204,215,.45);box-shadow:0 10px 30px rgba(19,204,215,.08)}
.compare__title{margin:0 0 18px;font:700 19px var(--sans);color:var(--ink-3)}
.compare__title--good{color:var(--ink)}
.compare__list{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none}
.compare__list li{display:flex;gap:12px;font:400 14.5px/1.55 var(--sans);color:var(--ink-3)}
.compare__list li::before{content:"✕";color:#b0453a;font-weight:700}
.compare__list--good li{color:var(--ink-2)}
.compare__list--good li::before{content:"✓";color:var(--green-ink)}
.compare__list strong{color:var(--ink);font-weight:600}
.quote-band{grid-column:1/-1;margin:40px auto 0;max-width:860px;text-align:center;
  font:600 22px/1.55 var(--sans);color:var(--ink);border-top:1px solid var(--line);padding-top:36px}

/* ── Donation page mock-up ──────────────────────── */
.widget{max-width:460px;margin:56px auto 0;background:var(--white);border:1px solid rgba(0,0,0,.08);
  border-radius:var(--r-lg);padding:22px 24px 24px;box-shadow:0 24px 55px rgba(30,30,40,.13);text-align:left}
.widget--narrow{max-width:440px;padding:26px 26px 28px;text-align:center}
.widget__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.widget__label{font:600 10px var(--mono);letter-spacing:.2em;color:var(--ink-5)}
.badge-live{font:600 10px var(--mono);letter-spacing:.12em;color:var(--green-ink);
  border:1px solid rgba(115,188,61,.5);border-radius:4px;padding:3px 8px}
.widget__profile{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.widget__profile--center{justify-content:center;margin-bottom:22px}
.widget__avatar{width:42px;height:42px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font:700 15px var(--sans);color:var(--white);background:linear-gradient(135deg,var(--brand-2),var(--brand-4))}
.widget__name{font:700 15px var(--sans);color:var(--ink)}
.widget__url{font:400 12px var(--sans);color:var(--ink-5)}
.widget__amount{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px}
.widget__amount span:first-child{font:400 12px var(--sans);color:var(--ink-5)}
.widget__amount span:last-child{font:600 17px var(--mono);color:var(--ink)}
.widget__thanks{font:700 20px/1.4 var(--sans);color:var(--ink);margin-bottom:22px}
.widget__thanks small{display:block;font:400 14px var(--sans);color:var(--ink-5)}
.slider{position:relative;height:6px;border-radius:3px;background:#eceae4;margin-bottom:18px}
.slider__fill{position:absolute;left:0;top:0;height:6px;width:46%;border-radius:3px;
  background:linear-gradient(90deg,var(--brand-2),var(--brand-4))}
.slider__knob{position:absolute;left:46%;top:50%;transform:translate(-50%,-50%);width:16px;height:16px;
  border-radius:50%;background:var(--white);border:2px solid var(--brand-4);box-shadow:0 2px 6px rgba(30,30,40,.2)}
.amounts{display:flex;gap:8px;margin-bottom:18px}
.amounts span{flex:1;text-align:center;font:600 12.9px var(--mono);color:var(--ink-3);
  border:1px solid var(--line-2);border-radius:var(--r-sm);padding:8px 0}
.amounts span.is-on{color:var(--ink);border:1.5px solid var(--brand-4);background:rgba(19,204,215,.06)}
.amounts--big span{font:600 14px var(--sans);border-radius:var(--r-md);padding:11px 0}
.currencies{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
.donate-btn{background:#1e1e1e;color:var(--white);border-radius:var(--r-md);padding:13px 0;text-align:center;
  font:700 14px var(--sans);text-transform:uppercase;letter-spacing:.12em;cursor:pointer}
.donate-btn--lg{padding:14px 0;font-size:15px}
.stats{display:flex;border:1px solid rgba(115,188,61,.5);background:rgba(115,188,61,.09);
  border-radius:var(--r-md);overflow:hidden;margin-bottom:16px}
.stat{flex:1;text-align:center;padding:12px 0}
.stat + .stat{border-left:1px solid rgba(115,188,61,.3)}
.stat__num{font:800 20px/1 var(--sans);color:#3f7a1f}
.stat__label{font:600 9px var(--mono);letter-spacing:.14em;color:var(--green-ink);margin-top:4px}

/* ── Small UI mock-up elements ──────────────────── */
.formats{display:flex;gap:5px;margin-bottom:10px;flex-wrap:wrap}
.formats span{font:600 8.5px var(--mono);letter-spacing:.1em;color:var(--ink-5);
  border:1px solid rgba(0,0,0,.12);border-radius:4px;padding:3px 7px}
.formats span.is-on{color:var(--ink);border:1.5px solid var(--brand-4);background:rgba(19,204,215,.06)}
.ui__net--gold{color:var(--gold-ink);border-color:rgba(242,173,75,.5)}
.qr-hint{display:flex;align-items:center;gap:8px;margin-top:8px}
.qr-hint img{width:34px;height:34px;border-radius:4px;border:1px solid rgba(0,0,0,.08)}
.qr-hint p{margin:0;font:400 11px/1.5 var(--sans);color:var(--ink-5)}
.def{background:var(--paper);border:1.5px solid rgba(19,204,215,.4);border-radius:12px;padding:26px 28px}
.def__label{font:600 11px var(--mono);letter-spacing:.16em;color:var(--blue-ink);margin-bottom:12px}
.def__text{font:400 15.5px/1.7 var(--sans);color:var(--ink-2)}
.def__text strong{color:var(--ink);font-weight:700}
.plain-note{margin:28px auto 0;max-width:820px;text-align:center;font:400 16px/1.7 var(--sans);color:var(--ink-3)}

/* ── Mock-up interactivity (behaviour in mitilena-pay.js)  */
.amounts span,.currencies .chip,.formats span,.copy__btn,.donate-btn,.slider{cursor:pointer}
.amounts span,.currencies .chip,.formats span{transition:color .15s ease,border-color .15s ease,background .15s ease}
.slider__knob{cursor:grab}
.slider:active .slider__knob{cursor:grabbing}
/* otherwise dragging the knob scrolls the page on phones */
.slider{touch-action:none}
.copy__btn:active,.donate-btn:active{transform:translateY(1px)}
.ui__field[contenteditable]{cursor:text}
.ui__field[contenteditable]:focus{outline:none;border:1.5px solid var(--brand-4)}
[role="button"]:focus-visible,[role="slider"]:focus-visible{outline:2px solid var(--brand-3);outline-offset:2px}

/* ── Responsive ─────────────────────────────────── */

/* Tablet */
@media (max-width:1024px){
  :root{--gutter:32px}
  .grid-3{grid-template-columns:1fr 1fr}
  .split{gap:36px}
  .split__aside,.split__aside--wide{width:300px}
  .hero__title{font-size:42px}
  .site-nav{gap:18px}
  .site-nav a{font-size:12.9px}
}

/* Phone */
@media (max-width:760px){
  :root{--gutter:20px}

  /* Header: logo + short CTA, nav hidden */
  .site-header{padding:11px var(--gutter)}
  .site-header__logo img{height:40px}
  .site-nav{display:none}
  .btn--dark{font-size:12.9px;padding:12px 14px;line-height:1.1}
  .btn__long{display:none}
  .btn__short{display:inline}

  /* Hero */
  .hero{padding:44px var(--gutter) 48px}
  .hero__title{font-size:31px;line-height:1.18;letter-spacing:-.015em}
  .hero__lede{font-size:16px;line-height:1.65;margin-bottom:28px}
  .btn--brand.btn--md,.btn--brand.btn--lg{display:block;width:100%;font-size:12.9px;padding:16px 10px;letter-spacing:.08em}

  /* Sections and headings */
  .section{padding:44px var(--gutter)}
  .h-section{font-size:24px;line-height:1.25}
  .lede{font-size:15px}
  .kicker{font-size:10.5px;letter-spacing:.18em}

  /* Single column */
  .grid-3,.grid-2,.compare{grid-template-columns:1fr;gap:12px}
  .split{flex-direction:column;gap:26px;align-items:stretch}
  .split__aside,.split__aside--wide{width:auto}
  .card:hover{transform:none;box-shadow:var(--shadow-card)}

  /* Mock-ups */
  .widget,.widget--narrow{max-width:none;margin-top:36px;padding:18px 18px 20px}
  .widget__thanks{font-size:18px}
  .mock{max-width:none;margin:40px 0 30px}
  .mock__glow{left:0;right:0}
  .receipt{position:static;right:auto;bottom:auto;margin:14px auto 0;width:max-content}
  .amounts span{font-size:12.9px}
  .copy__url,.ui__addr{font-size:11px}

  /* Comparison and quote */
  .compare__col{padding:22px}
  .compare__title{font-size:17px}
  .compare__list li{font-size:14px}
  .quote-band{margin-top:26px;padding-top:26px;font-size:17px;line-height:1.5}

  /* Steps, cards, features */
  .step{padding:20px}
  .step__num i{font-size:28px}
  .card__body{padding:20px}
  .feature{padding:20px}

  /* Reviews */
  .review{padding:22px}
  .review__text{font-size:14.5px}
  .review__quote{font-size:38px}

  /* Final CTA */
  .cta{padding:48px var(--gutter) 54px}
  .cta__title{font-size:24px}
  .cta__text{font-size:15px}
  .note{font-size:10.5px;letter-spacing:.1em;line-height:1.7}

  /* Wallet promo */
  .promo{padding:40px var(--gutter)}
  .promo__panel{flex-direction:column;align-items:flex-start;gap:22px;padding:26px 22px}
  .promo__title{font-size:21px}
  .promo__text{font-size:14.5px}
  .promo__side{text-align:left;width:100%}
  .promo__link{font-size:15.5px}
  .stores{justify-content:flex-start}
  .stores img{width:124px}

  /* Footer */
  .site-footer__cols{grid-template-columns:1fr;gap:28px;padding:36px var(--gutter) 28px}
  .site-footer__about{max-width:none}
  .site-footer__cols .stores img{width:124px}
  .site-footer__bar > div{padding:16px var(--gutter);flex-direction:column;align-items:flex-start;gap:8px}
  .col__links a{padding:2px 0}
}

/* Narrow phones */
@media (max-width:380px){
  .hero__title{font-size:27px}
  .h-section{font-size:22px}
  .site-header__logo img{height:34px}
  .btn--dark{padding:11px 12px}
  .amounts{gap:6px}
  .stores img{width:112px}
}