/* Inter, self-hosted (SIL Open Font License) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fonts/inter-cyrillic-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fonts/inter-cyrillic-wght-normal.woff2) format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fonts/inter-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* Just the Azerbaijani letters (Əə Ğğ İ Şş; ı is in the basic face) and ₼: 4 KB instead of 85 KB.
   It comes after the full face because, where ranges overlap, the browser tries the last face
   first. The full one is still fetched for any other letter a name uses. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fonts/inter-latin-ext-az-wght-normal.woff2) format('woff2');
  unicode-range: U+011E-011F,U+0130,U+015E-015F,U+018F,U+0259,U+20BC;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fonts/inter-latin-wght-normal.woff2) format('woff2');
  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;
}

/* Design tokens */
:root {
  --bg: #FAF7F2;
  --surface: #FFFFFF;
  --surface-2: #F3EEE6;
  --ink: #17140F;
  --ink-2: #4A443B;
  --muted: #6E675B;
  --line: #E8E1D6;
  --brand: #1F2A44;
  --accent: #E39B36;
  --accent-ink: #3A2306;
  --accent-soft: #FCEFD9;
  --ok: #1E9E6A;
  --ok-soft: #DDF5EA;
  --warn: #C9821B;
  /* The orange and green as text: the same hues, dark enough to read (4.5:1 or more) on their soft backgrounds. */
  --warn-ink: #915E13;
  --ok-ink: #177750;
  --danger: #D2463B;
  --danger-soft: #FCE3E0;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(23, 20, 15, .04), 0 8px 24px rgba(23, 20, 15, .06);
  --shadow-lg: 0 24px 60px rgba(23, 20, 15, .14);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, .06); }
/* Landscape iPhones: keep content clear of the notch (the pages use viewport-fit=cover). */
body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
/* No double-tap zoom delay on things people tap. */
a, button, input, select, textarea, label { touch-action: manipulation; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg); line-height: 1.5; font-size: 15px; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 .5em; letter-spacing: -0.015em; text-wrap: balance; }
/* Long Russian/Azerbaijani words break (with a hyphen where the phone knows how) instead of running off small screens. */
h1, h2 { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
p { text-wrap: pretty; }
p { margin: 0 0 1em; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.center { text-align: center; }
.hidden { display: none !important; }
.row { display: flex; gap: 12px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
/* A dialog's buttons: side by side when they fit, otherwise each on its own full-width line, and a long
   label breaks onto two lines instead of running off the dialog. */
.dlg-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.dlg-actions .btn { min-width: 0; white-space: normal; height: auto; min-height: 44px; padding-top: 8px; padding-bottom: 8px; line-height: 1.25; text-align: center; }
/* Up to 500px the dialog is narrower than its widest pair of buttons can need (RU), so on every phone
   the buttons fill the row, and a button that wraps gets a line of its own at full width. */
@media (max-width: 500px) { .dlg-actions .btn { flex: 1 1 auto; } }
.spacer { flex: 1; }
.stack > * + * { margin-top: 12px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 720px) { .grid-2 { grid-template-columns: 1fr; } }
.nowrap { white-space: nowrap; }
.tnum { font-variant-numeric: tabular-nums; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 12px; border: 1px solid transparent;
  background: var(--ink); color: var(--bg); font-weight: 600; cursor: pointer; text-decoration: none; transition: transform .06s ease, background .15s ease, box-shadow .15s; white-space: nowrap; }
.btn:active { transform: translateY(1px) scale(.99); }
.btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.btn.accent { background: var(--accent); color: var(--accent-ink); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.danger { background: var(--danger); color: #fff; }
/* Hover only where there's a mouse: on phones a tapped button would otherwise stay highlighted. */
@media (hover: hover) {
  .btn:hover { box-shadow: 0 6px 16px rgba(0,0,0,.12); }
  .btn.ghost:hover { background: var(--surface-2); box-shadow: none; }
}
.btn.sm { height: 34px; padding: 0 12px; font-size: 13px; border-radius: 9px; }
.btn.lg { height: 54px; padding: 0 26px; font-size: 16px; border-radius: 14px; }
.btn.block { width: 100%; }
/* Password field with a show / hide button */
.pw { position: relative; }
.pw .input { padding-right: 46px; }
.pw button { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; cursor: pointer; color: var(--muted); padding: 6px; display: grid; }
/* Buttons whose label may need two lines on a narrow phone (long AZ/RU words). */
.btn.wrap { white-space: normal; height: auto; min-height: 44px; padding-top: 8px; padding-bottom: 8px; line-height: 1.25; text-align: center; }
.btn.lg.wrap { min-height: 54px; padding-top: 10px; padding-bottom: 10px; }
.btn.sm.wrap { min-height: 34px; padding-top: 6px; padding-bottom: 6px; }
/* An icon keeps its size when a long label wraps (RU "Открыть и распечатать" on the QR page). */
.btn > svg { flex: none; }
.btn .spin { width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Forms */
.field { display: block; }
.field > span { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.field .hint { font-size: 12px; color: var(--muted); margin-top: 5px; }
/* 16px text: iPhones zoom the whole page into any field with smaller text. */
.input, select.input, textarea.input { width: 100%; height: 46px; padding: 0 14px; font-size: 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); outline: none; transition: border .15s, box-shadow .15s; }
textarea.input { height: auto; min-height: 96px; padding: 12px 14px; resize: vertical; }
.input:focus { border-color: var(--ink-2); box-shadow: 0 0 0 4px rgba(227, 155, 54, .18); }
.input.invalid { border-color: var(--danger); }
.field-err { color: var(--danger); font-size: 13px; font-weight: 600; margin-top: 6px; }
.field:has(.field-err) .hint { display: none; } /* the message says the same, in red */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--accent); margin-top: 1px; flex: none; }
.check.invalid input { outline: 2px solid var(--danger); outline-offset: 2px; border-radius: 4px; }
.check.invalid span { color: var(--danger); }
.seg { display: inline-flex; background: var(--surface-2); padding: 4px; border-radius: 12px; gap: 4px; flex-wrap: wrap; }
.seg button { border: 0; background: transparent; height: 36px; padding: 0 14px; border-radius: 9px; font-weight: 600; cursor: pointer; color: var(--ink-2); }
.seg button svg { display: inline-block; vertical-align: -3px; margin-right: 4px; }
.seg button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.color-row { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line); cursor: pointer; padding: 0; }
.swatch.on { box-shadow: 0 0 0 2px var(--ink); }
input[type=color].swatch { -webkit-appearance: none; appearance: none; overflow: hidden; }
input[type=color].swatch::-webkit-color-swatch-wrapper { padding: 0; }
input[type=color].swatch::-webkit-color-swatch { border: 0; border-radius: 50%; }

/* Cards & layout */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
.card h3 { font-size: 17px; }
.badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--surface-2); color: var(--ink-2); }
.badge.ok { background: var(--ok-soft); color: var(--ok-ink); }
.p-per { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 4px; color: var(--ink-2); font-weight: 600; }
.p-per > * { white-space: nowrap; }
.p-per s { color: var(--muted); }
/* The real charge, right under the month's share and never smaller than body text. */
.p-bill { color: var(--ink-2); margin-top: 2px; }
/* "Cancel any time · Secure payment" under the buttons. */
.p-reassure { margin: 12px 0 0; font-size: 13px; color: var(--muted); text-align: center; }
/* The dollar amount Creem charges for the manat price above. */
.p-usd, .p-tax { color: var(--muted); font-size: 13px; margin-top: 4px; }
.p-usd + .p-tax { margin-top: 0; }
.badge.warn { background: var(--accent-soft); color: var(--warn-ink); }
.badge.danger { background: var(--danger-soft); color: var(--danger); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.divider { height: 1px; background: var(--line); margin: 16px 0; }
.empty { text-align: center; padding: 40px 16px; color: var(--muted); }
.empty svg { margin: 0 auto 12px; opacity: .5; }

/* Toasts & modal */
#toasts { position: fixed; z-index: 1000; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: grid; gap: 8px; width: min(92vw, 420px); pointer-events: none; }
.toast { background: var(--ink); color: var(--bg); padding: 12px 16px; border-radius: 12px; box-shadow: var(--shadow-lg); font-weight: 500; animation: toast-in .25s ease; pointer-events: auto; display: flex; gap: 10px; align-items: center; }
.toast.error { background: var(--danger); color: #fff; }
.toast.ok::before { content: ""; flex: none; width: 18px; height: 18px; background: var(--accent); /* the "check" line icon from common.js */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }
/* The page behind an open dialog stays put (iPhone otherwise scrolls it under your finger). */
body:has(.modal-back) { overflow: hidden; }
.modal-back { position: fixed; inset: 0; background: rgba(15, 12, 8, .45); z-index: 900; display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); overscroll-behavior: contain; animation: fade .15s; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.modal { background: var(--surface); border-radius: 20px; width: min(100%, 460px); max-height: 90vh; max-height: 90dvh; overflow: auto; overscroll-behavior: contain; padding: 24px; box-shadow: var(--shadow-lg); animation: pop .2s ease; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: scale(.96); } }

/* Language switcher */
.lang-switch { display: inline-flex; gap: 2px; background: var(--surface-2); border-radius: 10px; padding: 3px; }
.lang-switch button { position: relative; min-height: 30px; min-width: 36px; border: 0; background: transparent; padding: 0 9px; border-radius: 7px; font-size: 12px; font-weight: 700; cursor: pointer; color: var(--muted); letter-spacing: .03em; }
.lang-switch button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
/* Finger-sized tap areas around the small language and logo links, without making them look bigger. */
.lang-switch button::after { content: ""; position: absolute; inset: -7px -1px; }
.logo-mark { position: relative; }
.logo-mark::after { content: ""; position: absolute; inset: -7px -4px; }

/* Brand mark */
.logo-mark { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; letter-spacing: -0.03em; text-decoration: none; }
.logo-mark i { width: 36px; height: 28px; background: var(--mark, url(/brand/mark.svg)) center / contain no-repeat; flex: none; }
/* The default brand's name is drawn (public/brand/wordmark.svg, in the page as --word; the server sets
   data-wordmark only while BRAND_NAME is akartly): in the site's ink, or white where a dark screen sets --word-ink.
   Mark and word are about the same height, as on the brand board. The typed name stays in the link,
   unseen, for screen readers, and shows again in high-contrast mode, which would hide the drawn one,
   and in print, which leaves backgrounds out by default.
   (The mark's size gives way to a page's own, like the app-icon tile on a dark screen.) */
:where([data-wordmark]) .logo-mark:where(:has(> [data-brand])) { gap: 8px; }
:where([data-wordmark]) .logo-mark:where(:has(> [data-brand])) > i { width: 27px; height: 21px; }
[data-wordmark] .logo-mark > [data-brand] { flex: none; width: 89px; height: 33px; margin-block: -2px; overflow: hidden; white-space: nowrap; color: transparent; background: var(--word-ink, var(--ink));
  -webkit-mask: var(--word, url(/brand/wordmark.svg)) left center / contain no-repeat; mask: var(--word, url(/brand/wordmark.svg)) left center / contain no-repeat; }
@media (forced-colors: active), print {
  [data-wordmark] .logo-mark > [data-brand] { width: auto; height: auto; margin-block: 0; color: inherit; background: none; -webkit-mask: none; mask: none; }
}

/* ===== Wallet pass mockup (used on landing, dashboard, join page) ===== */
.pass { --pbg: #1F2A44; --pfg: #fff; --plabel: #F4C27A; width: 100%; max-width: 340px; border-radius: 18px; background: var(--pbg); color: var(--pfg); overflow: hidden;
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 20px 50px rgba(0,0,0,.25); font-family: -apple-system, "SF Pro Text", var(--font); user-select: none; }
.pass .p-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; gap: 10px; }
.pass .p-logo { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 16px; min-width: 0; }
.pass .p-logo img { max-height: 30px; max-width: 120px; object-fit: contain; }
.pass .p-logo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The logo look (src/styles.js) at the size the pass draws it: Apple's 50pt high logo, 160pt wide at most. */
.pass .p-logo .p-look { height: 30px; max-height: 30px; max-width: 96px; width: auto; flex: none; }
.pass .p-logo .lk-logo { display: block; height: 30px; max-width: 96px; flex: none; overflow: visible; }
.pass .p-field { text-align: right; flex: none; }
.pass .p-label { font-size: 10px; font-weight: 600; letter-spacing: .06em; color: var(--plabel); text-transform: uppercase; }
.pass .p-value { font-size: 17px; font-weight: 500; line-height: 1.2; }
.pass .p-strip { display: block; width: 100%; aspect-ratio: 375 / 144; object-fit: cover; background: rgba(255,255,255,.06); }
/* The ring style's count, which Apple draws over the left of the strip. */
.pass .p-band { position: relative; }
.pass .p-primary { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); max-width: 55%; }
.pass .p-big { font-size: 40px; font-weight: 300; line-height: 1.05; white-space: nowrap; }
.pass .p-big.long { font-size: 26px; }
.pass .p-row { display: flex; justify-content: space-between; padding: 10px 16px; gap: 12px; }
.pass .p-row .p-value { font-size: 15px; }
/* Every reward with its stamp (reward_field all): one line cut with "…", as the iPhone shows a field beside the member. */
.pass .p-value.p-prizes { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* In the dashboard's phone frame (300px for an iPhone's 393pt) the words are drawn larger than the phone would, so the
   rows give the rewards line a little more room, as the iPhone has for it. */
.phone .pass .p-row { padding-left: 10px; padding-right: 10px; gap: 8px; }
.phone .pass .p-value.p-prizes { font-size: 13px; }
.pass .p-qr { margin: 6px auto 16px; background: #fff; padding: 10px; border-radius: 10px; width: 132px; }
.pass .p-qr img, .pass .p-qr svg { width: 112px; height: 112px; }
.pass .p-qr small { display: block; text-align: center; color: #111; font-size: 11px; margin-top: 4px; letter-spacing: .1em; }
/* The one phone frame every preview uses (the card designer, the landing page), measured from the phones themselves
   and drawn in their own points (--pt), so it scales as a whole and its ratios never change.
   iPhone (15/16): a 393×852pt screen with 55pt corners in an even 12pt bezel (outer corners 67pt, concentric), and the
   Dynamic Island, a 126×37pt pill, centred 11pt below the screen's top, with the time and status icons level with it.
   --s scales the whole frame from its 300px size. */
.phone { --s: 1; --pt: calc(300px * var(--s) / 417); --bezel: calc(12 * var(--pt)); width: calc(300px * var(--s)); max-width: 100%; border-radius: calc(67 * var(--pt)); padding: var(--bezel); background: #0E0E10; box-shadow: var(--shadow-lg), 0 0 0 2px #2a2a2e inset; position: relative; }
.phone .screen { border-radius: calc(55 * var(--pt)); background: #F2F2F7; overflow: hidden; padding: 52px 12px 24px; aspect-ratio: 393 / 852; position: relative; }
.phone .notch { position: absolute; top: calc(var(--bezel) + 11 * var(--pt)); left: 50%; transform: translateX(-50%); width: calc(126 * var(--pt)); height: calc(37 * var(--pt)); background: #000; border-radius: 999px; z-index: 3; }
/* The status bar: the time left of the island; signal, Wi-Fi and battery right of it. .dark is for a dark screen. */
.phone::before, .phone::after { position: absolute; z-index: 3; top: calc(var(--bezel) + 11 * var(--pt)); height: calc(37 * var(--pt)); width: calc(50% - 63 * var(--pt) - var(--bezel)); pointer-events: none; }
.phone::before { content: "9:41"; left: var(--bezel); text-align: center; font: 600 calc(17 * var(--pt)) / calc(37 * var(--pt)) var(--font); letter-spacing: -.01em; color: #111; }
.phone::after { content: ""; right: var(--bezel); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 12' fill='%23111'%3E%3Crect y='8' width='3' height='4' rx='.8'/%3E%3Crect x='4.5' y='6' width='3' height='6' rx='.8'/%3E%3Crect x='9' y='3.5' width='3' height='8.5' rx='.8'/%3E%3Crect x='13.5' y='1' width='3' height='11' rx='.8'/%3E%3Cpath d='M20.6 4.4a9.6 9.6 0 0 1 13.8 0l-1.5 1.5a7.5 7.5 0 0 0-10.8 0zM23.6 7.4a5.4 5.4 0 0 1 7.8 0l-1.5 1.5a3.3 3.3 0 0 0-4.8 0zM27.5 11.6l-1.4-1.4a2 2 0 0 1 2.8 0z'/%3E%3Crect x='38.5' y='1.5' width='20' height='9' rx='2.6' fill='none' stroke='%23111' stroke-opacity='.4'/%3E%3Crect x='40.5' y='3.5' width='16' height='5' rx='1.3'/%3E%3Crect x='59.6' y='4.5' width='1.6' height='3' rx='.8' fill-opacity='.45'/%3E%3C/svg%3E") center / calc(84 * var(--pt)) auto no-repeat; }
.phone.dark::before { color: #fff; }
.phone.dark::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 12' fill='%23fff'%3E%3Crect y='8' width='3' height='4' rx='.8'/%3E%3Crect x='4.5' y='6' width='3' height='6' rx='.8'/%3E%3Crect x='9' y='3.5' width='3' height='8.5' rx='.8'/%3E%3Crect x='13.5' y='1' width='3' height='11' rx='.8'/%3E%3Cpath d='M20.6 4.4a9.6 9.6 0 0 1 13.8 0l-1.5 1.5a7.5 7.5 0 0 0-10.8 0zM23.6 7.4a5.4 5.4 0 0 1 7.8 0l-1.5 1.5a3.3 3.3 0 0 0-4.8 0zM27.5 11.6l-1.4-1.4a2 2 0 0 1 2.8 0z'/%3E%3Crect x='38.5' y='1.5' width='20' height='9' rx='2.6' fill='none' stroke='%23fff' stroke-opacity='.4'/%3E%3Crect x='40.5' y='3.5' width='16' height='5' rx='1.3'/%3E%3Crect x='59.6' y='4.5' width='1.6' height='3' rx='.8' fill-opacity='.45'/%3E%3C/svg%3E"); }
/* Android (Pixel class): a 412×915 screen with 28 corners in the same 12 bezel (outer corners 40), and a 24 punch-hole
   camera centred 12 below the screen's top, with the status bar level with it. */
.phone.android { --pt: calc(300px * var(--s) / 436); border-radius: calc(40 * var(--pt)); }
.phone.android .screen { border-radius: calc(28 * var(--pt)); background: #EEF0F4; aspect-ratio: 412 / 915; }
.phone.android .notch { width: calc(24 * var(--pt)); height: calc(24 * var(--pt)); top: calc(var(--bezel) + 12 * var(--pt)); }
.phone.android::before, .phone.android::after { top: calc(var(--bezel) + 12 * var(--pt)); height: calc(24 * var(--pt)); width: calc(50% - 12 * var(--pt) - var(--bezel)); }
.phone.android::before { text-align: left; padding-left: calc(24 * var(--pt)); font-size: calc(16 * var(--pt)); line-height: calc(24 * var(--pt)); font-weight: 500; }
/* Android's own status icons: Wi-Fi, signal and an upright battery. */
.phone.android::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 12' fill='%23111'%3E%3Cpath d='M6.5 11.6L.4 4.6a9.3 9.3 0 0 1 12.2 0z'/%3E%3Cpath d='M16 11.5L26 1.5v10z'/%3E%3Crect x='31' y='1.6' width='6.4' height='10' rx='1.3'/%3E%3Crect x='32.8' y='.4' width='2.8' height='1.6' rx='.5'/%3E%3C/svg%3E"); background-size: calc(52 * var(--pt)) auto; background-position: right calc(24 * var(--pt)) center; }

/* Lock-screen notification */
.lock-notif { background: rgba(255,255,255,.78); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); color: #111; border-radius: 18px; padding: 10px 12px; display: flex; gap: 10px; align-items: flex-start; box-shadow: 0 4px 18px rgba(0,0,0,.12); text-align: left; }
.lock-notif img { width: 34px; height: 34px; border-radius: 8px; flex: none; }
.lock-notif b { font-size: 13px; display: block; }
.lock-notif p { margin: 0; font-size: 13px; line-height: 1.3; color: #222; word-break: break-word; }
.lock-notif time { font-size: 11px; color: #666; margin-left: auto; flex: none; }

/* Shown while the fake checkout is on (no Creem keys). */
@media print { .test-ribbon { display: none !important; } }
.test-ribbon { background: repeating-linear-gradient(-45deg, #FFE08A 0 14px, #FFD45C 14px 28px); color: #4A3500; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-align: center; padding: 5px 12px; text-transform: uppercase; }
/* Toasts stay clear of the phone tab bar. */
@media (max-width: 900px) { body.app #toasts { bottom: calc(84px + env(safe-area-inset-bottom)); } }
/* Above the design page's Save bar while it shows (see renderSave in app.js). */
body.savebar-on #toasts { bottom: calc(100px + env(safe-area-inset-bottom)); }
/* On the login and sign-up pages the form's button is often at the bottom of a phone screen. */
body.auth-page #toasts { top: calc(16px + env(safe-area-inset-top)); bottom: auto; }
@media (max-width: 900px) { body.app.savebar-on #toasts { bottom: calc(160px + env(safe-area-inset-bottom)); } }
/* The welcome after sign-up, at the top wherever the designer is one column (app.css): its first fields
   stay readable. Taps go through it (a toast is only text) to the phone top bar's buttons under it. */
@media (max-width: 1100px) { body.app.toast-top #toasts { top: calc(12px + env(safe-area-inset-top)); bottom: auto; } body.app.toast-top .toast { pointer-events: none; } }
/* A row of options that scrolls sideways instead of wrapping. */
.seg.scroll { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg.scroll::-webkit-scrollbar { display: none; }
.seg.scroll button { flex: none; white-space: nowrap; }
/* The side that has more options fades out, so options hidden past the edge aren't missed. */
.seg.scroll.more-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
.seg.scroll.more-l { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); }
.seg.scroll.more-l.more-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
/* Rewards along the way under a card (stepLegendHtml in common.js): a line per reward with its icon in a ring. */
.step-legend { list-style: none; margin: 12px auto 0; padding: 0; display: grid; gap: 6px; width: 100%; max-width: 340px; text-align: left; }
.step-legend li { display: flex; align-items: center; gap: 10px; font-size: 15px; line-height: 1.3; }
.step-legend .sl-ico { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid currentColor; color: var(--cac, var(--accent)); }