/* Snoozim — one system, not one page.
   Tokens: 4 colours, a 4px spacing scale, a modular type scale, 3 radii, 1 line width.
   Flat: no shadows, no gradients. */

/* Poppins, self-hosted, WOFF2 only, latin subset (~8 KB each). swap = system font shows instantly on airport wifi. */
@font-face {
  font-family: 'Poppins';
  src: url('/fonts/poppins-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  src: url('/fonts/poppins-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* colour: exactly four */
  --ink: #111111;
  --ground: #f2f2f3;
  --card: #ffffff;
  --brand: #FDD801;
  /* derived, text only: */
  --mute: #5f5f63;             /* on card/ground, ≥4.5:1 */
  --mute-on-ink: #c4c4c9;      /* on ink, ≥4.5:1 */
  --hair: #e6e6e8;
  --line: 1.5px;

  /* spacing: multiples of 4 */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-14: 56px; --s-16: 64px; --s-20: 80px;

  /* type scale (ratio ~1.25) */
  --t--2: 12px; --t--1: 14px; --t-0: 16px; --t-1: 19px; --t-2: 24px;
  --t-3: clamp(26px, 3.6vw, 40px);
  --t-4: clamp(38px, 6.4vw, 68px);
  --t-num: 48px;                /* big figures: GB, price */

  /* radii: three, plus pills */
  --r-block: 24px; --r-card: 16px; --r-field: 12px; --r-pill: 999px;

  --w: 1120px;
  --font: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font: 17px/1.6 var(--font); letter-spacing: -0.01em; -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
h1, h2, h3 { line-height: 1.06; letter-spacing: -0.035em; margin: 0 0 var(--s-3); font-weight: 700; overflow-wrap: anywhere; }
h1 { font-size: var(--t-4); }
h2 { font-size: var(--t-3); }
h3 { font-size: var(--t-1); }
p { margin: 0 0 var(--s-4); overflow-wrap: anywhere; }
code { font: var(--t--1)/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.muted { color: var(--mute); }
.small { font-size: var(--t--1); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
[hidden] { display: none !important; }

/* Small label above a heading */
.eyebrow { display: block; font-size: var(--t--2); font-weight: 700; letter-spacing: .04em; color: var(--mute); margin: 0 0 var(--s-3); }
.eyebrow::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); margin-right: var(--s-2); vertical-align: 2px; }

/* header / footer */
.site-header { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); max-width: var(--w); margin: 0 auto; padding: var(--s-6); }
.logo { display: inline-flex; align-items: center; text-decoration: none; }
.logo img { display: block; width: 160px; height: auto; }
.site-header nav { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t--1); }
.site-header nav > a { text-decoration: none; padding: var(--s-2) var(--s-4); border-radius: var(--r-pill); background: var(--card); transition: background-color .15s ease, color .15s ease; }
.site-header nav > a:hover { background: var(--ink); color: var(--card); }
.lang { display: inline-flex; gap: 2px; background: var(--card); border-radius: var(--r-pill); padding: 3px; }
.lang a { padding: 6px var(--s-3); font-size: var(--t--2); border-radius: var(--r-pill); text-decoration: none; }
.lang a.on { background: var(--ink); color: var(--card); }
.site-footer { max-width: var(--w); margin: var(--s-6) auto 0; padding: var(--s-8) var(--s-8) var(--s-10); display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; font-size: var(--t--1); color: var(--mute); }
.site-footer a { margin-right: var(--s-4); text-decoration: none; }
.site-footer a:hover { color: var(--ink); }
.footer-logo { vertical-align: -2px; }

main { max-width: var(--w); margin: 0 auto; padding: 0 var(--s-6); }

/* Every section is a white block on the grey ground */
section { background: var(--card); border-radius: var(--r-block); padding: var(--s-14) var(--s-12); margin-bottom: var(--s-5); }
.narrow { max-width: 660px; margin-left: auto; margin-right: auto; }

/* notice: cancelled payment, rate limit… says what to do, not what broke */
.notice { background: var(--ground); border-left: 5px solid var(--brand); border-radius: var(--r-field); padding: var(--s-4) var(--s-5); margin: 0 0 var(--s-5); font-size: var(--t-0); }
.notice strong { display: block; margin-bottom: var(--s-1); }

/* hero: breathes directly on the ground; optional real photo on the right */
.hero { background: none; padding: var(--s-10) var(--s-2) var(--s-10); display: grid; gap: var(--s-8); align-items: center; }
.hero--photo { grid-template-columns: 1.1fr 1fr; }
.hero h1 { max-width: 16ch; }
.hero h1::after { content: ""; display: block; width: 84px; height: 9px; background: var(--brand); margin-top: var(--s-6); }
.hero p { font-size: clamp(18px, 2.1vw, 21px); max-width: 46ch; color: var(--mute); margin-top: var(--s-6); }
.hero-photo { margin: 0; border-radius: var(--r-block); overflow: hidden; aspect-ratio: 4 / 5; background: var(--card); }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* packs */
.packs, .how, .check { text-align: center; }
.packs h2, .how h2 { margin-bottom: var(--s-10); }
.pack-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); text-align: left; }
.pack { position: relative; background: var(--ground); border-radius: var(--r-card); padding: var(--s-8) var(--s-6) var(--s-6); display: flex; flex-direction: column; transition: background-color .15s ease; }
.pack:hover { background: #eaeaec; }
.pack--popular { background: var(--ink); color: var(--card); }
.pack--popular:hover { background: #000; }
.pack--popular .pack-meta { color: var(--mute-on-ink); }
.pack--popular .btn { background: var(--brand); color: var(--ink); }
.pack-tag { position: absolute; top: var(--s-5); right: var(--s-5); background: var(--brand); color: var(--ink); font-size: 11px; font-weight: 700; padding: var(--s-1) var(--s-3); border-radius: var(--r-pill); text-transform: uppercase; letter-spacing: .05em; }
.pack-data { font-size: var(--t-num); font-weight: 700; letter-spacing: -0.05em; line-height: 1; }
.pack-meta { font-size: var(--t--1); color: var(--mute); margin-top: var(--s-2); }
.pack-price { font-size: var(--t-2); font-weight: 700; margin: var(--s-6) 0 var(--s-5); }
.packs > .muted { margin: var(--s-6) 0 0; font-size: var(--t--1); }

/* buttons & forms */
.btn { display: inline-block; background: var(--ink); color: var(--card); border: 0; border-radius: var(--r-pill); padding: var(--s-4) var(--s-8); font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; transition: transform .12s ease, background-color .12s ease, color .12s ease; }
.btn:hover { background: var(--brand); color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .45; cursor: wait; }
.btn--block { width: 100%; text-align: center; }
input[type="email"], input[type="text"] { width: 100%; padding: var(--s-4) var(--s-5); border: var(--line) solid var(--hair); border-radius: var(--r-field); font: inherit; background: var(--card); color: var(--ink); -webkit-appearance: none; }
input:focus { outline: 3px solid var(--brand); outline-offset: 1px; border-color: var(--ink); }
.inline-form { display: flex; gap: var(--s-3); max-width: 520px; margin: var(--s-6) auto 0; }
.inline-form input { flex: 1; background: var(--ground); border-color: transparent; }
.stack { display: grid; gap: var(--s-2); margin-top: var(--s-6); }
.stack label { font-size: var(--t--1); font-weight: 700; margin-top: var(--s-3); }
.stack input { background: var(--ground); border-color: transparent; }
.stack .btn { margin-top: var(--s-5); }
.form-msg { margin-top: var(--s-3); font-weight: 700; }
.form-msg.err { color: #b00020; }
.optin { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--t--1); color: var(--mute); margin: var(--s-4) 0 0; cursor: pointer; }
.optin input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--ink); flex: none; }

/* how it works */
.steps { list-style: none; padding: 0; margin: 0; text-align: left; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
.steps li { background: var(--ground); border-radius: var(--r-card); padding: var(--s-6); display: grid; gap: var(--s-2); }
.steps strong { font-size: var(--t-1); }
.steps strong::before { content: ""; display: block; width: 30px; height: 30px; border-radius: 50%; background: var(--brand); margin-bottom: var(--s-4); }
.steps span { color: var(--mute); font-size: var(--t-0); }
.coverage { display: flex; align-items: center; gap: var(--s-10); flex-wrap: wrap; }
.coverage-stat { flex-shrink: 0; text-align: center; }
.coverage-n { display: block; font-size: 6rem; font-weight: 700; line-height: 1; letter-spacing: -0.04em; }
.coverage-label { display: block; font-weight: 700; font-size: var(--t-1); margin-top: var(--s-1); }
.coverage-list { flex: 1; list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); }
.coverage-list li { padding-left: var(--s-5); position: relative; color: var(--mute); line-height: 1.5; }
.coverage-list li::before { content: "—"; position: absolute; left: 0; color: var(--brand); font-weight: 700; }
.check p { color: var(--mute); }

/* ---- Redeem: looks like the card the customer is holding -----------------
   yellow ground (the sleeve), a black card with yellow accents (the insert). */
body.page-redeem { background: var(--brand); }
body.page-redeem .site-header nav > a { background: rgba(255,255,255,.55); }
body.page-redeem .site-header nav > a:hover { background: var(--ink); color: var(--card); }
body.page-redeem .lang { background: rgba(255,255,255,.55); }
body.page-redeem .site-footer { color: var(--ink); }
.card-black { background: var(--ink); color: var(--card); border-radius: var(--r-block); padding: var(--s-12); max-width: 560px; }
.card-black .eyebrow { color: var(--brand); }
.card-black h1 { color: var(--brand); }
.card-black p { color: var(--mute-on-ink); }
.card-black .stack label { color: var(--card); }
.card-black .stack input { background: var(--card); color: var(--ink); border-color: transparent; }
.card-black .optin { color: var(--mute-on-ink); }
.card-black .optin input { accent-color: var(--brand); }
.card-black .btn { background: var(--brand); color: var(--ink); }
.card-black .btn:hover { background: var(--card); }
.card-black .form-msg.err { color: #ffb4a8; }
.card-black .ready h2 { color: var(--brand); }
.card-black .install { color: var(--mute-on-ink); }
.card-black details { background: rgba(255,255,255,.06); }
.card-black .manual code { background: var(--card); color: var(--ink); }
.card-black .manual dt { color: var(--mute-on-ink); }
.card-black .js-ready-email, .card-black .pulse { color: var(--card); }
.card-black .card-hint { font-size: var(--t--1); color: var(--mute-on-ink); margin-top: var(--s-6); }
.card-black .card-hint b { color: var(--card); }

/* Redeem step 2: base pack + paid upgrades (upsell at redemption) */
.redeem-included { font-weight: 700; margin: var(--s-6) 0 var(--s-4); }
.redeem-divider { text-align: center; color: var(--mute-on-ink); font-size: var(--t--1); text-transform: uppercase;
  letter-spacing: .05em; margin: var(--s-8) 0 var(--s-4); }
.redeem-upgrade { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-4) 0; border-top: 1px solid rgba(255,255,255,.12); }
.redeem-upgrade:last-of-type { border-bottom: 1px solid rgba(255,255,255,.12); margin-bottom: var(--s-6); }
.redeem-upgrade span { font-weight: 700; }
.redeem-upgrade .btn { padding: var(--s-2) var(--s-6); }

/* success / ready */
.pulse { animation: pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.qr { margin: var(--s-6) 0; }
.qr img { display: block; border-radius: var(--r-card); padding: var(--s-4); background: #fff; border: var(--line) solid var(--hair); width: 300px; height: 300px; max-width: 100%; }
.install { padding-left: var(--s-5); color: var(--mute); }
.install li { margin-bottom: var(--s-2); }
details { background: var(--ground); border-radius: var(--r-card); padding: var(--s-5) var(--s-6); margin: var(--s-6) 0; }
summary { cursor: pointer; font-weight: 700; }
.lpa { display: block; margin-top: var(--s-3); }

/* manual eSIM entry: the two fields the phone actually asks for */
.manual { margin: var(--s-4) 0 0; }
.manual dt { font-size: var(--t--2); text-transform: uppercase; letter-spacing: .06em; color: var(--mute); margin-top: var(--s-4); }
.manual dd { margin: var(--s-2) 0 0; }
.manual code { display: block; background: var(--card); border-radius: var(--r-field); padding: var(--s-3) var(--s-4); }

/* usage */
.usage { background: var(--ground); border-radius: var(--r-card); padding: var(--s-6); margin: var(--s-6) 0 var(--s-8); }
.usage-bar { height: 12px; border-radius: var(--r-pill); background: #e0e0e2; overflow: hidden; }
.usage-bar span { display: block; height: 100%; width: 0; background: var(--brand); transition: width .6s ease; }
.usage-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); margin: var(--s-6) 0 var(--s-2); }
.usage-grid dt { font-size: var(--t--2); text-transform: uppercase; letter-spacing: .06em; color: var(--mute); }
.usage-grid dd { margin: var(--s-2) 0 0; font-size: var(--t-2); font-weight: 700; letter-spacing: -0.035em; }
.recharge { border-top: var(--line) solid var(--hair); padding-top: var(--s-8); margin-top: var(--s-2); }

/* error pages */
.errpage .code { display: block; font-size: var(--t--1); color: var(--mute); margin-bottom: var(--s-3); }

/* compatibility checker */
.compat-brands { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-6) 0; }
.compat-btn { border: 1.5px solid var(--ink); border-radius: var(--r-pill); padding: var(--s-2) var(--s-5); font-weight: 700; font-size: var(--t--1); cursor: pointer; background: transparent; color: var(--ink); transition: background .15s, color .15s; }
.compat-btn:hover, .compat-btn.active { background: var(--ink); color: var(--card); }
.compat-panel { margin-bottom: var(--s-4); }
.compat-ok { font-weight: 700; margin-bottom: var(--s-2); }
.compat-ok::before { content: "✓ "; color: #22c55e; }
.compat-models { line-height: 1.7; margin: 0; }
.compat-tip { margin-top: var(--s-4); }

/* top-up note */
.topup-note { background: var(--ink); color: var(--card); border-radius: var(--r-block); padding: var(--s-14) var(--s-12); margin-bottom: var(--s-5); }
.topup-note .eyebrow { color: var(--brand); }
.topup-note h2 { color: var(--card); }
.topup-note p { color: rgba(255,255,255,.7); }
.topup-note .btn { background: var(--brand); color: var(--ink); border-color: var(--brand); }
.topup-note .btn:hover { background: #e6c200; border-color: #e6c200; }

/* packs comparison + guarantee */
.packs-vs { margin-top: calc(var(--s-2) * -1); margin-bottom: var(--s-6); }
.pack-guarantee { margin-top: var(--s-4); font-weight: 700; font-size: var(--t--1); }
.pack-guarantee::before { content: "✓ "; color: #22c55e; }

/* animated payment ticker */
.pay-ticker-wrap { margin-top: var(--s-8); }
.pay-ticker-label { display: block; text-align: center; font-size: var(--t--2); color: var(--mute); text-transform: uppercase; letter-spacing: .1em; margin-bottom: var(--s-5); }
.pay-ticker { overflow: hidden; mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent); }
@keyframes snz-ticker { from { transform: translateX(0) } to { transform: translateX(-50%) } }
.pay-ticker-track { display: flex; align-items: center; width: max-content; animation: snz-ticker 18s linear infinite; will-change: transform; }
.pay-ticker:hover .pay-ticker-track { animation-play-state: paused; }
.pay-ticker-item { flex: none; display: flex; align-items: center; gap: var(--s-2); padding: 0 var(--s-6); opacity: .45; }
.pay-ticker-svg { height: 28px; width: 28px; flex: none; display: block; color: var(--ink); }
.pay-ticker-name { font-size: var(--t-0); font-weight: 700; white-space: nowrap; }

/* topup inline form on dark bg */
.topup-note .topup-resend input { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); color: #fff; }
.topup-note .topup-resend input::placeholder { color: rgba(255,255,255,.45); }
.topup-note .topup-msg { color: var(--brand); font-size: var(--t--1); margin-top: var(--s-3); }

/* legal */
.legal h2 { font-size: var(--t-1); margin-top: var(--s-8); }
.legal { color: #3a3a3d; }

@media (max-width: 820px) {
  body { font-size: 16px; }
  section { padding: var(--s-8) var(--s-6); }
  .hero { padding: var(--s-6) var(--s-1) var(--s-8); }
  .hero--photo { grid-template-columns: 1fr; }
  .hero-photo { aspect-ratio: 16 / 10; }
  .pack-grid, .steps { grid-template-columns: 1fr; }
  .usage-grid { grid-template-columns: 1fr 1fr; }
  .site-header { padding: var(--s-4); gap: var(--s-2); }
  .site-header nav { gap: 6px; font-size: 13px; }
  .site-header nav > a { padding: var(--s-2) var(--s-3); white-space: nowrap; }
  .lang a { padding: 5px var(--s-2); font-size: var(--t--2); }
  .logo img { width: 128px; }
  .inline-form { flex-direction: column; }
  main { padding: 0 var(--s-4); }
  .site-footer { padding: var(--s-6) var(--s-5) var(--s-8); }
  .card-black { padding: var(--s-8) var(--s-6); }
}
/* Small phones: logo+lang top row, nav links second row */
@media (max-width: 430px) {
  .site-header { flex-wrap: wrap; justify-content: space-between; row-gap: var(--s-3); padding: var(--s-4) var(--s-5); }
  .logo img { width: 150px; }
  .site-header nav { order: 3; width: 100%; justify-content: center; gap: var(--s-2); }
  .lang { order: 2; margin-left: auto; }
  .hero { padding: var(--s-4) var(--s-1) var(--s-6); }
  .hero h1 { font-size: 33px; }
  .hero h1::after { width: 64px; height: 7px; margin-top: var(--s-4); }
  .hero p { font-size: var(--t-0); margin-top: var(--s-4); }
  section { padding: var(--s-6) var(--s-5); }
  .packs h2, .how h2 { margin-bottom: var(--s-6); }
}
@media (prefers-reduced-motion: reduce) {
  .pulse, .btn, .usage-bar span, .pack { animation: none; transition: none; }
}

/* destination tabs (home) — pill language, same as .btn/.pack-tag */
.dest-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-6) 0 var(--s-8); }
.dest-tab { background: transparent; color: var(--mute); border: var(--line) solid var(--hair); border-radius: var(--r-pill); padding: var(--s-2) var(--s-5); font: inherit; font-weight: 700; font-size: var(--t--1); cursor: pointer; transition: background-color .12s ease, color .12s ease, border-color .12s ease; }
.dest-tab:hover { color: var(--ink); border-color: var(--ink); }
.dest-tab.active { background: var(--ink); color: var(--card); border-color: var(--ink); }