/* Default tokens. The per-shop theme.css loads AFTER this and overrides them. */
:root {
  --brand: #7a4a24;
  --on-brand: #ffffff;
  --ink: #2b211c;
  --muted: #6f6152;
  --bg: #f7f1e7;
  --surface: #fffdf9;
  --font-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --line: rgba(43, 33, 28, 0.12);
  --field-radius: 12px;
  --card-radius: 18px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}
h1 { font-family: var(--font-heading); margin: 0; }

/* ===================== structure ===================== */
.page { min-height: 100vh; }
.visual-inner { width: 100%; }
.logo img { height: auto; width: auto; max-height: 56px; max-width: 240px; display: block; }
.brand { font-family: var(--font-heading); font-weight: 800; font-size: 21px; letter-spacing: -0.01em; }
html[data-layout="classic"] .brand { color: var(--brand); margin-bottom: 9px; }
html[data-layout="hero"] .brand { color: #fff; }
.eyebrow { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; opacity: 0.85; margin: 0 0 12px; }
.lede h1 { font-size: 28px; line-height: 1.08; letter-spacing: -0.01em; }
.lede .sub { font-size: 16px; margin: 7px 0 0; opacity: 0.92; max-width: 44ch; }

/* ===================== the form ===================== */
.field { margin-bottom: 13px; }
label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 5px; }
.req { color: var(--brand); }
.hint { color: var(--muted); font-size: 13px; font-weight: 500; }
input[type="email"], input[type="text"], input[type="tel"] {
  width: 100%;
  font-size: 16px; /* >=16px so iOS never zooms on focus */
  padding: 11px 14px;
  min-height: 47px;
  border: 1.5px solid var(--line);
  border-radius: var(--field-radius);
  background: #fff;
  color: var(--ink);
  font-family: var(--font-body);
  transition: border-color .15s, box-shadow .15s;
}
input::placeholder { color: #b3a794; }
input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent); }
input:focus-visible, button:focus-visible, select:focus-visible, .recall-cta:focus-visible, .chip:focus-within { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 35%, transparent); }
select {
  width: 100%; font-size: 16px; padding: 13px 15px; min-height: 50px;
  border: 1.5px solid var(--line); border-radius: var(--field-radius);
  background-color: #fff; color: var(--ink); font-family: var(--font-body);
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='none' stroke='%236b7075' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent); }
.field-row.bday { grid-template-columns: 1fr 1fr; }

/* Collapsed "add phone" disclosure (F-09): keeps phone off the critical path so the CTA
   stays above the fold. Native <details>, no JS. */
/* the optional phone field is always visible (never a disclosure); its label carries
   the why inline, and short screens absorb the height via the vh-clamped rhythm */

/* The post-signup preferences step on the handoff (drink + birthday). */
.prefs-h { font-family: var(--font-heading); font-weight: 700; font-size: 15px; color: var(--ink); margin-bottom: 8px; }
.prefs-form .field { margin-bottom: 11px; }
.prefs-form button.primary { margin-top: 2px; }
.prefs-done { text-align: center; }
.prefs-thanks { font-size: 14px; color: var(--ink); margin: 0; }
.err { color: #a5341f; font-size: 13px; margin-top: 6px; font-weight: 600; }
.formerror { background: #fbe9e4; border: 1px solid #eabcae; color: #a5341f; border-radius: 12px; padding: 12px 14px; font-size: 14px; margin-bottom: 18px; }

.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
  position: relative;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 10px 16px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  background: #fff;
  font-size: 15px;
  color: var(--ink);
  transition: border-color .12s, background .12s, color .12s;
}
.chip:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip.selected { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }

/* opt-in: framed as an inviting benefit (still unchecked by default). */
.optin { display: flex; gap: 13px; align-items: flex-start; cursor: pointer;
  border: 1.5px solid color-mix(in srgb, var(--brand) 38%, var(--line));
  background: color-mix(in srgb, var(--brand) 7%, #fff);
  border-radius: 14px; padding: 12px 14px;
  transition: border-color .15s, background .15s, box-shadow .15s; }
.optin:hover { border-color: var(--brand); box-shadow: 0 5px 16px color-mix(in srgb, var(--brand) 15%, transparent); }
.optin:has(input:checked) { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, #fff); }
.optin input { width: 22px; height: 22px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--brand); cursor: pointer; }
.optin-body { display: flex; flex-direction: column; gap: 3px; }
.optin-title { font-weight: 700; font-size: 15px; color: var(--ink); font-family: var(--font-heading); }
.optin-sub { font-size: 13px; color: var(--muted); line-height: 1.45; }

button.primary {
  width: 100%;
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--on-brand);
  background: var(--brand);
  border: none;
  border-radius: 14px;
  padding: 14px;
  min-height: 50px;
  cursor: pointer;
  margin-top: 6px;
  transition: transform .08s, box-shadow .15s, filter .15s;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--brand) 26%, transparent);
}
button.primary:hover { filter: brightness(0.95); box-shadow: 0 10px 26px color-mix(in srgb, var(--brand) 32%, transparent); }
button.primary:active { transform: translateY(1px); }
.cf-turnstile { margin: 2px 0 10px; }
.cf-turnstile:empty { margin: 0; } /* invisible-mode widget renders nothing; drop its gap */
.legal { color: var(--muted); font-size: 12px; margin-top: 12px; }

/* promo band */
.promo { border: 1px solid color-mix(in srgb, var(--promo-fg, var(--brand)) 26%, #fff); background: var(--promo-bg, color-mix(in srgb, var(--brand) 9%, #fff)); border-radius: 14px; padding: 13px 16px; margin: 0 0 18px; }
.promo .ph { font-family: var(--font-heading); font-weight: 700; font-size: 15px; color: var(--promo-fg, var(--brand)); }
.promo .pb { font-size: 14px; color: var(--promo-fg, var(--ink)); margin-top: 2px; }

/* ===================== CLASSIC layout ===================== */
html[data-layout="classic"] .page { max-width: 520px; margin: 0 auto; padding: 26px 22px 40px; }
html[data-layout="classic"] .visual { margin-bottom: 15px; }
html[data-layout="classic"] .logo { margin-bottom: 16px; }
html[data-layout="classic"] .eyebrow { color: var(--brand); }
html[data-layout="classic"] .lede h1 { color: var(--ink); }
html[data-layout="classic"] .lede .sub { color: var(--muted); }
html[data-layout="classic"] .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--card-radius); padding: 18px 18px; box-shadow: 0 1px 3px rgba(43,33,28,.05); }

/* ===================== HERO layout: full-bleed photo, form overlaid ===================== */
/* The shop's photo fills the whole viewport (fixed, blurred, scrimmed); the logo,
   headline, and form sit centered on top and are sized to fit one screen. */
.bg { position: fixed; inset: 0; z-index: -2; background: #17110d; }
html[data-layout="hero"][data-bg="image"] .bg::before,
html[data-layout="hero"][data-bg="image_blur"] .bg::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--bg-image); background-size: cover; background-position: center;
}
html[data-layout="hero"][data-bg="image_blur"] .bg::before { filter: blur(6px); transform: scale(1.1); }
.bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,10,8,.58) 0%, rgba(15,10,8,.40) 42%, rgba(15,10,8,.74) 100%);
}
html[data-layout="hero"] .overlay {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(8px, 1.6vh, 16px);
  padding: clamp(10px, 2.4vh, 28px) 20px;
}
html[data-layout="hero"] .hero-head { text-align: center; color: #fff; width: 100%; max-width: 440px; }
html[data-layout="hero"] .hero-head .logo { display: flex; justify-content: center; }
html[data-layout="hero"] .hero-head .logo img { max-height: clamp(62px, 9vh, 100px); max-width: 74%; filter: drop-shadow(0 3px 14px rgba(0,0,0,.55)); }
html[data-layout="hero"] .hero-head .brand { color: #fff; }
html[data-layout="hero"] .hero-head .eyebrow { color: rgba(255,255,255,.82); margin: 10px 0 0; font-size: 11px; }
html[data-layout="hero"] .hero-head h1 { color: #fff; font-size: clamp(24px, 3.4vh, 38px); line-height: 1.08; margin: 6px 0 0; }
html[data-layout="hero"] .hero-head .sub { color: rgba(255,255,255,.92); font-size: clamp(13px, 1.7vh, 16px); margin: 6px auto 0; max-width: 40ch; }
html[data-layout="hero"] .cardwrap { width: 100%; max-width: 440px; }
html[data-layout="hero"] .card { background: var(--surface); border-radius: 20px; padding: clamp(14px, 2vh, 22px) clamp(16px, 3vw, 22px); box-shadow: 0 24px 70px rgba(0,0,0,.45); }
/* compact everything so the whole page fits one screen (vh-clamped, so it
   auto-tightens on shorter viewports). */
html[data-layout="hero"] .card .field { margin-bottom: clamp(7px, 1.2vh, 13px); }
.field-row { display: grid; grid-template-columns: 1fr; gap: 12px; }
.field-row .field { margin-bottom: 0; }
@media (min-width: 540px) { .field-row { grid-template-columns: 1fr 1fr; } }
html[data-layout="hero"] .field-row { margin-bottom: clamp(7px, 1.2vh, 13px); }
html[data-layout="hero"] .card label { margin-bottom: 5px; font-size: 13px; }
html[data-layout="hero"] input[type="email"], html[data-layout="hero"] input[type="text"], html[data-layout="hero"] input[type="tel"] { min-height: 44px; padding: 10px 13px; }
html[data-layout="hero"] select { min-height: 44px; padding: 10px 34px 10px 13px; }
html[data-layout="hero"] .chips { gap: 7px; }
html[data-layout="hero"] .chip { padding: 7px 13px; min-height: 38px; font-size: 14px; }
html[data-layout="hero"] .optin { padding: 10px 13px; gap: 11px; }
html[data-layout="hero"] .optin input { width: 20px; height: 20px; }
html[data-layout="hero"] .optin-title { font-size: 14px; }
html[data-layout="hero"] .optin-sub { font-size: 12px; line-height: 1.4; }
html[data-layout="hero"] .cf-turnstile { margin: 2px 0 10px; }
html[data-layout="hero"] button.primary { min-height: 50px; padding: 14px; margin-top: 4px; box-shadow: 0 8px 22px rgba(0,0,0,.28); }
html[data-layout="hero"] .legal { margin-top: 10px; margin-bottom: 0; font-size: 11px; text-align: center; }

/* ===================== welcome / WiFi handoff ===================== */
/* The handoff used to stack four different surfaces: a near-black WiFi slab, a cream
   punch card, two solid black wallet buttons, and a cream prefs card. Each was fine alone
   and together they read as noise, with the least urgent action (the wallet buttons) as
   the heaviest thing on the page.
   Now there is ONE material. The WiFi rows and the punch card share a single card, split
   by a hairline, because they are the same thought: here is what you just got. Hierarchy
   comes from size and order (the password is the biggest thing on the page, and it is
   first) rather than from giving each block its own colour. */
.wifi { background: transparent; color: inherit; padding: 0; margin: 0; }
.hsep { height: 1px; background: var(--line); margin: 13px 0; }
html[data-page="welcome"] .hsep { margin: clamp(6px, 0.9vh, 9px) 0; }

/* handoff compaction (html[data-page=welcome]): the whole page fits one phone screen.
   Smaller brand head, no eyebrow, tighter cards + chips; the signup page is untouched. */
html[data-page="welcome"] .eyebrow { display: none; }
/* The brand head is the SAME SIZE on both steps. It used to be shrunk here (logo 60 vs
   100, headline 27 vs 38, sub 14 vs 16) to buy vertical room, and the result was that the
   interface visibly changed size the moment someone signed up, which reads like landing on
   a different site. The room comes out of SPACING below instead, which is the rule: fit is
   met by compacting space, never by shrinking or dropping what is on offer. */
html[data-page="welcome"][data-layout="hero"] .hero-head h1 { margin-top: 4px; }
/* The handoff's sub line read "Here's the WiFi. Your rewards card is started." directly
   above a card showing the WiFi and the card. That is a caption for something already on
   screen, so it goes, and its 26px pays for the full-size brand head. This is omitting a
   repeated sentence, not shrinking or dropping anything on offer. */
html[data-page="welcome"][data-layout="hero"] .hero-head .sub { display: none; }
html[data-page="welcome"][data-layout="hero"] .overlay { gap: clamp(5px, 0.9vh, 10px); padding: clamp(7px, 1.1vh, 14px) 18px; }
html[data-page="welcome"][data-layout="hero"] .card { padding: clamp(9px, 1.2vh, 14px) 16px; }
html[data-page="welcome"] .card.handoff { padding-left: 14px; padding-right: 14px; margin-bottom: clamp(10px, 1.8vh, 16px); }
html[data-page="welcome"] .wifi { padding: clamp(9px, 1.4vh, 13px) 16px; margin-bottom: clamp(6px, 1vh, 10px); }
html[data-page="welcome"] .wifi .pw:not(.pw-long):not(.pw-xlong) { font-size: clamp(16px, 2.2vh, 19px); }
html[data-page="welcome"] .card.progress { margin-bottom: clamp(6px, 1vh, 10px); }
html[data-page="welcome"] .dots { margin: 2px 0 0; }
html[data-page="welcome"] .count { font-size: clamp(15px, 2vh, 18px); }
html[data-page="welcome"] .pnote { font-size: clamp(12px, 1.5vh, 13px); }
html[data-page="welcome"] .pnote.mt8 { margin-top: 4px; }
html[data-page="welcome"] .prefs-h { margin-bottom: 4px; font-size: 14px; }
html[data-page="welcome"] .prefs-form .field { margin-bottom: clamp(5px, 0.8vh, 8px); }
html[data-page="welcome"] .chips { gap: 5px; }
html[data-page="welcome"] .chip { padding: 6px 12px; min-height: 40px; font-size: 13.5px; }
html[data-page="welcome"] .prefs-form button.primary { min-height: 44px; padding: 10px; margin-top: 0; font-size: 15px; }
html[data-page="welcome"] .prefs-form input, html[data-page="welcome"] .prefs-form select { padding: 9px 12px; min-height: 42px; }
html[data-page="welcome"] .wallet { margin: 0 0 clamp(6px, 1vh, 10px); }
html[data-page="welcome"] .wallet-label { font-size: 12px; margin-bottom: 5px; }
html[data-page="welcome"] .wallet-btns { flex-direction: row; max-width: none; gap: 8px; }
html[data-page="welcome"] .wbtn { flex: 1 1 0; min-height: 44px; padding: 8px 8px; font-size: 13px; gap: 6px; }
.wbtn-pending { opacity: .55; pointer-events: none; }
html[data-page="welcome"] .wbtn svg { width: 17px; height: 17px; flex: none; }
html[data-page="welcome"] .dots .cup { width: clamp(22px, 3vh, 26px); height: auto; }
html[data-page="welcome"] .wifi-row + .wifi-row { margin-top: 3px; padding-top: 3px; }
html[data-page="welcome"] .chip { min-height: 36px; padding: 6px 12px; font-size: 13.5px; }
html[data-page="welcome"][data-layout="hero"] .overlay { gap: clamp(5px, 1vh, 10px); }

/* short phones (iPhone SE class): squeeze both capture pages a step further */
@media (max-height: 700px) {
  html[data-layout="hero"] .hero-head .eyebrow { display: none; }
  html[data-layout="hero"] .hero-head .logo img { max-height: 44px; }
  html[data-layout="hero"] .hero-head h1 { font-size: 21px; }
  html[data-layout="hero"] .hero-head .sub { font-size: 12px; }
  html[data-layout="hero"] .optin { padding: 8px 11px; }
  .optin-sub { font-size: 12px; line-height: 1.35; }
  /* On a short phone BOTH steps drop the sub line and use the same 44px logo, so they
     still match each other. Consistency between steps is the point, not a fixed size. */
  html[data-layout="hero"] .hero-head .sub { display: none; }
  html[data-page="welcome"][data-layout="hero"] .overlay { gap: 5px; padding: 7px 14px; }
  html[data-page="welcome"][data-layout="hero"] .card { padding: 8px 13px; }
  html[data-page="welcome"] .wifi { padding: 8px 13px; margin-bottom: 5px; }
  html[data-page="welcome"] .wifi .pw:not(.pw-long):not(.pw-xlong) { font-size: 15px; }
  html[data-page="welcome"] .wifi .k { font-size: 10px; }
  html[data-page="welcome"] .pcard-label { font-size: 11px; }
  html[data-page="welcome"] .dots { margin: 2px 0 0; }
  html[data-page="welcome"] .pnote { font-size: 11px; }
  html[data-page="welcome"] .chip { padding: 5px 10px; min-height: 34px; font-size: 13px; }
  html[data-page="welcome"] .chips { gap: 5px; }
  html[data-page="welcome"] .prefs-h { font-size: 13px; margin-bottom: 3px; }
  html[data-page="welcome"] .prefs-form .field { margin-bottom: 5px; }
  html[data-page="welcome"] .prefs-form .field > label { font-size: 12px; }
  html[data-page="welcome"] .prefs-form input, html[data-page="welcome"] .prefs-form select { padding: 6px 10px; min-height: 36px; font-size: 14px; }
  html[data-page="welcome"] .prefs-form button.primary { min-height: 38px; padding: 7px; font-size: 14px; }
  html[data-page="welcome"] .wallet-label { display: none; }
  html[data-page="welcome"] .wbtn { min-height: 40px; font-size: 11.5px; padding: 5px 6px; }
  html[data-page="welcome"] .dots .cup { width: 20px; }
  html[data-page="welcome"] .wifi-row { min-height: 38px; }
}
.wifi-row { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.wifi-row + .wifi-row { margin-top: 5px; padding-top: 5px; border-top: 1px solid var(--line); }
/* Sized to the longest label ("PASSWORD") and no wider. The rows now sit inside a card,
   so every pixel spent on the label column is a pixel taken from the value, and a wrapped
   WiFi password is the one thing on this page that must never wrap. */
.wifi .k { flex: 0 0 64px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.wifi-row { gap: 10px; }
/* TYPE SYSTEM on the customer pages, so this stops drifting:
   - heading font  = our voice: the page headline, section labels, and buttons WE own
   - monospace     = strings the customer has to transcribe: the network and the password
   - body font     = everything else: field labels, supporting copy, inputs, and the
                     wallet buttons (they carry Apple's and Google's names, which would
                     look wrong set in a serif)
   The network name used to be in the heading font while the password beneath it was in
   mono, so two adjacent rows of the same kind of data were set in two different families.
   They are a matched pair now: both are things you read off a screen and type somewhere
   else, and mono is what tells a zero from an O. */
.wifi .ssid { flex: 1 1 auto; min-width: 0; font-size: 17px; font-weight: 700; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.wifi .pw { flex: 1 1 auto; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.wifi .pw.pw-long { font-size: 15px; }
.wifi .pw.pw-xlong { font-size: 13px; letter-spacing: 0; }
#copy-wifi { flex: 0 0 auto; font-family: var(--font-heading); font-size: 13px; font-weight: 700; background: var(--brand); color: var(--on-brand); border: none; border-radius: 10px; padding: 10px 14px; min-height: 42px; cursor: pointer; }
.card.handoff { text-align: left; }
.progress { text-align: center; }
.progress .pcard-label { font-family: var(--font-heading); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
/* SIX PER ROW, and it has to wrap at all. A 6-stamp row fits one line on any phone; a
   12-stamp row does not, and before this it ran straight off the edge of the card and onto
   the background at 390px. A plain flex wrap fixed the overflow but broke 12 into 9 and 3,
   which reads like a reflow accident. A fixed six-column grid gives 6 and 6, which is how a
   punch card is actually printed, and it holds whatever the cup size clamps to. Cards
   shorter than six collapse the unused tracks and stay centred. */
.dots { display: grid; grid-template-columns: repeat(6, auto); justify-content: center; gap: 8px; margin: 8px auto 4px; align-items: flex-end; max-width: 100%; }
.dots .cup { display: block; width: 26px; height: 30px; }
.count { font-weight: 700; font-size: 20px; font-family: var(--font-heading); }
/* The stated reason for the signup bonus. Small and quiet, but it is the thing the
   endowed-progress research says the whole head start depends on, so it never hides. */
.pbonus { margin-top: 4px; font-size: 12.5px; font-weight: 650; color: var(--brand); letter-spacing: .01em; }
.pnote { color: var(--muted); font-size: 14px; }
/* Shown instead of a stamp card when we cannot identify the device. */
.startcard { display: inline-block; margin-top: 10px; font-family: var(--font-heading); font-weight: 700; font-size: 15px; text-decoration: none; color: var(--on-brand); background: var(--brand); border-radius: 12px; padding: 11px 20px; min-height: 44px; line-height: 22px; }
.mt8 { margin-top: 8px; }

/* Add-to-Wallet section on the handoff */
.wallet { margin: 0; text-align: center; }
.wallet-label { font-size: 13px; color: var(--muted); font-weight: 600; margin-bottom: 7px; }
.wallet-btns { display: flex; flex-direction: column; gap: 8px; max-width: 320px; margin: 0 auto; }
@media (min-width: 480px) { .wallet-btns { flex-direction: row; max-width: 440px; } .wbtn { flex: 1 1 0; font-size: 14px; } }
/* Body font deliberately: these carry Apple's and Google's names, which should not be
   set in a coffee shop's display serif. Do not "fix" this to match the other buttons. */
.wbtn { font-family: var(--font-body); display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: transparent; color: var(--ink); border: 1.5px solid color-mix(in srgb, var(--ink) 34%, transparent); border-radius: 12px; padding: 10px 12px; min-height: 46px; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.wbtn:hover { border-color: var(--ink); background: color-mix(in srgb, var(--ink) 4%, transparent); }
.wbtn b { font-weight: 800; }
/* These are nowrap by design (a wrapped "Apple Wallet" looks broken), so when the row is
   too narrow to hold both at full length the "Add to" drops rather than the brand name
   getting clipped. Clipping was what happened at 390px: "Add to Google Walle". */
@media (max-width: 420px) { .wbtn-pre { display: none; } }
.wbtn { min-width: 0; }

/* ===================== barista kiosk ===================== */
.kiosk { min-height: 100vh; min-height: 100dvh; background: var(--bg); }
.k-header { position: sticky; top: 0; z-index: 5; background: var(--brand); color: var(--on-brand); padding: 14px 18px; display: flex; align-items: center; gap: 12px; box-shadow: 0 1px 10px rgba(0,0,0,.15); }
.k-header .k-logo img { height: 32px; width: auto; display: block; filter: drop-shadow(0 1px 4px rgba(0,0,0,.35)); }
.k-header .k-title { font-family: var(--font-heading); font-weight: 800; font-size: 17px; }
.k-header .k-badge { margin-left: auto; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.75; }
.k-wrap { max-width: 560px; margin: 0 auto; padding: 20px 18px 64px; }
.k-search { margin: 0; }
.k-search input { width: 100%; font-size: 18px; padding: 16px 18px; min-height: 58px; border: 2px solid var(--line); border-radius: 14px; background: #fff; color: var(--ink); font-family: var(--font-body); }
.k-search input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent); }
.k-hint { color: var(--muted); font-size: 14px; margin: 12px 2px 16px; }
/* post-search bar: the query that ran + a one-tap way back to the pad */
.k-summary { display: flex; align-items: center; gap: 14px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.08); border-radius: 16px; padding: 12px 16px; }
.k-sq { font-family: var(--font-heading); font-size: 24px; font-weight: 700; letter-spacing: 1px; color: #fff; flex: 1 1 auto; word-break: break-all; }
.k-newsearch { flex: 0 0 auto; display: inline-flex; align-items: center; font-size: 15px; font-weight: 700; color: #17110d; background: #fff; border-radius: 12px; padding: 12px 16px; min-height: 46px; text-decoration: none; }
.k-newsearch:hover { background: rgba(255,255,255,.88); }
.k-result { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 15px 18px; margin-bottom: 10px; text-decoration: none; color: var(--ink); min-height: 66px; transition: border-color .12s, transform .06s; }
.k-result:hover { border-color: var(--brand); }
.k-result:active { transform: scale(0.995); }
.k-result .k-name { font-family: var(--font-heading); font-weight: 700; font-size: 17px; }
.k-result .k-phone { color: var(--muted); font-size: 13px; }
.k-result .k-prog { margin-left: auto; font-family: var(--font-heading); font-weight: 800; font-size: 16px; color: var(--brand); }
.k-result .k-chev { color: var(--muted); font-size: 24px; line-height: 1; }
.k-back { display: inline-block; color: var(--muted); text-decoration: none; font-size: 14px; margin-bottom: 14px; }
.k-detail { text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 28px 22px 26px; box-shadow: 0 1px 3px rgba(43,33,28,.05); }
.k-detail .k-cname { font-family: var(--font-heading); font-size: 27px; font-weight: 800; }
.k-detail .k-ready { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #1f7a44; background: #e6f4ea; border: 1px solid #b7e0c4; border-radius: 999px; padding: 4px 12px; }
/* Six per row, matching the handoff card. A flex wrap already stopped this overflowing,
   but at twelve stamps it wrapped wherever the tablet happened to be wide, and a barista
   glancing at a row of twelve cannot count them at speed. Two rows of six can be read
   without counting, which is the whole job of this screen during a rush. */
.k-cups { display: grid; grid-template-columns: repeat(6, auto); justify-content: center; gap: 8px; margin: 22px auto 10px; }
.k-cups img { width: 38px; height: 44px; }
.k-count { font-family: var(--font-heading); font-weight: 800; font-size: 20px; }
.k-btn { display: block; width: 100%; font-family: var(--font-heading); font-weight: 800; font-size: 19px; padding: 18px; min-height: 62px; border: none; border-radius: 14px; cursor: pointer; margin-top: 18px; }
.k-btn.primary { background: var(--brand); color: var(--on-brand); }
.k-btn.primary:hover { filter: brightness(0.94); }
.k-btn.redeem { background: #1f7a44; color: #fff; }
.k-btn.redeem:hover { background: #1a6a3a; }
.k-flash { border-radius: 12px; padding: 13px 16px; font-weight: 700; margin-bottom: 16px; text-align: center; font-size: 15px; }
.k-flash.ok { background: #e6f4ea; color: #1f7a44; border: 1px solid #b7e0c4; }
.k-flash.warn { background: #fbf1e0; color: #9a6a1c; border: 1px solid #eed6ab; }
.k-empty { text-align: center; color: var(--muted); padding: 44px 16px; }
.k-empty h1 { font-size: 20px; color: var(--ink); margin: 0 0 8px; }

/* minimal error pages (unavailable shop / rate limited) */
.msg { max-width: 32rem; margin: 15vh auto; padding: 0 1.25rem; }
.msg h1 { font-size: 1.4rem; }
.msg p { color: var(--muted); font-size: 1rem; }

/* legal / doc pages (privacy) */
.doc { max-width: 640px; margin: 0 auto; padding: 44px 22px 64px; }
.doc h1 { font-size: 28px; margin: 0 0 6px; }
.doc .updated { color: var(--muted); font-size: 13px; margin: 0 0 22px; }
.doc h2 { font-size: 17px; margin: 26px 0 6px; }
.doc p, .doc li { font-size: 15px; line-height: 1.6; color: var(--ink); }
.doc ul { padding-left: 18px; margin: 6px 0; }
.doc li { margin: 4px 0; }
.doc a { color: var(--brand); }
.doc .draftnote { margin-top: 28px; padding: 12px 14px; background: color-mix(in srgb, var(--brand) 6%, #fff); border: 1px solid var(--line); border-radius: 10px; font-size: 13px; color: var(--muted); }

/* ===================== barista kiosk (v3: photo bg + real phone dial) ===================== */
/* The shop's own photo fills the kiosk. The dial is a dark glass panel with round
   keys, like a phone's dialer; the setup screen is an email-style card with a
   photo hero and the shop's logo. */
.kiosk { background: transparent; }
.k-header { background: linear-gradient(180deg, rgba(16,11,8,.82) 0%, rgba(16,11,8,.46) 100%); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 -1px 0 rgba(255,255,255,.08); }
.k-bg { position: fixed; inset: 0; z-index: -1; background: #241a12; }
.k-bg::before { content: ""; position: absolute; inset: -2%; background-image: var(--bg-image); background-size: cover; background-position: center; filter: blur(2px); transform: scale(1.04); }
.k-bg::after { content: ""; position: absolute; inset: 0; background:
  radial-gradient(130% 100% at 50% 20%, rgba(18,12,9,.10) 0%, rgba(18,12,9,.38) 58%, rgba(18,12,9,.70) 100%),
  linear-gradient(180deg, rgba(18,12,9,.32) 0%, rgba(18,12,9,0) 20%, rgba(18,12,9,0) 56%, rgba(18,12,9,.56) 100%); }
/* text that sits directly on the photo goes light, with a shadow for legibility */
.k-hint { color: rgba(255,255,255,.9); text-shadow: 0 1px 6px rgba(0,0,0,.55); text-align: center; }
.k-back { color: rgba(255,255,255,.92); text-shadow: 0 1px 6px rgba(0,0,0,.55); }
.k-empty { color: rgba(255,255,255,.92); text-shadow: 0 1px 6px rgba(0,0,0,.55); }
.k-empty h1 { color: #fff; }

/* phone dial + search panels (both rendered; one shown per data-mode) */
.k-search { max-width: 360px; margin: 1vh auto 0; }
.k-panel { background: rgba(22,16,12,.52); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); border: 1px solid rgba(255,255,255,.12); border-radius: 28px; padding: 22px 20px 24px; box-shadow: 0 26px 74px rgba(0,0,0,.52); }
.k-search[data-mode="number"] .k-nom { display: none; }
.k-search[data-mode="name"] .k-num { display: none; }
.k-display { width: 100%; box-sizing: border-box; font-family: var(--font-heading); font-size: 34px; font-weight: 700; letter-spacing: 2px; text-align: center; padding: 8px 8px 16px; min-height: 54px; border: none; border-bottom: 1px solid rgba(255,255,255,.18); border-radius: 0; background: transparent; color: #fff; margin-bottom: 20px; }
.k-display::placeholder { color: rgba(255,255,255,.42); letter-spacing: 1px; font-weight: 500; }
.k-textinput { width: 100%; box-sizing: border-box; font-size: 19px; padding: 16px 18px; min-height: 58px; border: 1px solid rgba(255,255,255,.2); border-radius: 16px; background: rgba(255,255,255,.96); color: #17110d; font-family: var(--font-body); margin-bottom: 4px; }
.k-textinput:focus { outline: none; border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.28); }
.k-textinput::placeholder { color: #8a7d6d; }
.k-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; justify-items: center; }
.k-key { width: 100%; max-width: 84px; aspect-ratio: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: 31px; font-weight: 500; line-height: 1; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; background: rgba(255,255,255,.10); color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .12s, transform .05s ease; }
.k-key:hover { background: rgba(255,255,255,.18); }
.k-key:active { background: rgba(255,255,255,.3); transform: scale(0.93); }
.k-key .k-sub { font-size: 9px; font-weight: 700; letter-spacing: 2px; color: rgba(255,255,255,.55); margin-top: 3px; height: 9px; }
.k-key.k-fn { font-size: 13px; font-weight: 700; color: rgba(255,255,255,.72); }
.k-key.k-del { font-size: 24px; color: rgba(255,255,255,.78); }
.k-searchbar { display: block; width: 100%; margin-top: 22px; font-family: var(--font-heading); font-weight: 800; font-size: 18px; padding: 17px; min-height: 58px; border: none; border-radius: 999px; background: #fff; color: #17110d; cursor: pointer; }
.k-searchbar:hover { opacity: .92; }
.k-searchbar:active { transform: scale(0.99); }
.k-toggle { display: block; width: 100%; margin-top: 16px; padding: 6px; background: none; border: none; color: rgba(255,255,255,.94); text-shadow: 0 1px 6px rgba(0,0,0,.55); font-size: 14px; font-weight: 600; text-decoration: underline; cursor: pointer; }

/* reward ready but within the cooldown (free drink is next visit) */
.k-wait { margin-top: 18px; font-size: 15px; font-weight: 600; color: #1f7a44; background: #e6f4ea; border: 1px solid #b7e0c4; border-radius: 12px; padding: 14px; }

/* post-stamp status (offline queue): success + server-rejected note */
.k-done { margin-top: 18px; font-size: 16px; font-weight: 700; color: #1f7a44; background: #e6f4ea; border: 1px solid #b7e0c4; border-radius: 12px; padding: 14px; }
.k-note { margin-top: 18px; font-size: 15px; font-weight: 600; color: #9a6a1c; background: #fbf1e0; border: 1px solid #eed6ab; border-radius: 12px; padding: 14px; }

/* offline-queue status bar (fixed, only shown when offline or syncing) */
.k-sync { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 30; max-width: 92vw; padding: 11px 20px; border-radius: 999px; font-size: 13px; font-weight: 700; text-align: center; color: #fff; background: rgba(20,15,12,.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 10px 34px rgba(0,0,0,.42); }
.k-sync.warn { background: #8a4f14; }
.k-sync[hidden] { display: none; }

/* device setup screen: email-style card (photo hero + logo) */
.k-setup { max-width: 404px; margin: 4vh auto 0; background: #fff; border-radius: 26px; overflow: hidden; box-shadow: 0 30px 84px rgba(0,0,0,.52); }
.k-setup-hero { position: relative; min-height: 178px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #241a12; }
.k-setup-hero::before { content: ""; position: absolute; inset: -4%; background-image: var(--bg-image); background-size: cover; background-position: center; filter: blur(3px); transform: scale(1.06); }
.k-setup-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,12,9,.30) 0%, rgba(18,12,9,.6) 100%); }
.k-setup-hero-logo { position: relative; z-index: 1; max-width: 64%; max-height: 96px; width: auto; filter: drop-shadow(0 4px 14px rgba(0,0,0,.55)); }
.k-setup-hero-name { position: relative; z-index: 1; color: #fff; font-family: var(--font-heading); font-size: 26px; font-weight: 800; text-shadow: 0 3px 12px rgba(0,0,0,.5); }
.k-setup-body { padding: 24px 28px 30px; text-align: center; }
.k-setup-tag { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--brand); background: color-mix(in srgb, var(--brand) 9%, #fff); border-radius: 999px; padding: 6px 14px; }
.k-setup h1 { font-family: var(--font-heading); font-size: 24px; margin: 14px 0 10px; color: var(--ink); }
.k-setup-sub { color: var(--muted); font-size: 15px; line-height: 1.55; margin: 0 auto 22px; max-width: 32ch; }
.recall-cta { display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 44px; margin: 0 0 16px; padding: 10px 14px; background: color-mix(in srgb, var(--brand) 6%, #fff); border: 1px solid color-mix(in srgb, var(--brand) 16%, #fff); border-radius: 12px; color: var(--muted); font-size: 14.5px; font-weight: 600; text-decoration: none; text-align: center; }
.recall-cta b { color: var(--brand); font-weight: 800; }
button.recall-cta { width: 100%; cursor: pointer; font-family: inherit; }
.start-cta { margin: 10px 0 0; }
.tap-id .recall-cta:last-of-type { margin-bottom: 0; }
.tap-id-note { color: var(--muted); font-size: 13px; line-height: 1.45; text-align: center; margin: 12px 0 0; }

.recall-cta:hover { background: color-mix(in srgb, var(--brand) 11%, #fff); color: var(--ink); }
.recall-h { margin: 0 0 6px; font-family: var(--font-heading); font-size: 22px; color: var(--ink); }
.recall-sub { margin: 0 0 16px; font-size: 15px; line-height: 1.5; color: var(--muted); }
.typo { margin: 10px 0 0; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--brand) 8%, #fff); border: 1px solid color-mix(in srgb, var(--brand) 22%, #fff); }
.typo-q { margin: 0 0 10px; font-size: 15px; line-height: 1.45; color: var(--ink); }
.typo-acts { display: flex; gap: 10px; flex-wrap: wrap; }
.typo-yes, .typo-no { flex: 1 1 auto; min-height: 44px; padding: 11px 14px; border-radius: 10px; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.typo-yes { background: var(--brand); color: var(--on-brand); border: 0; }
.typo-no { background: #fff; color: var(--ink); border: 1px solid color-mix(in srgb, var(--ink) 22%, #fff); font-weight: 600; }
.typo-yes:hover, .typo-no:hover { opacity: .9; }
.notyou { text-align: center; margin: 14px 0 0; }
.notyou button { background: none; border: 0; padding: 8px 12px; min-height: 44px; font: inherit; font-size: 13px; color: var(--muted); text-decoration: underline; cursor: pointer; }
.notyou button:hover { color: var(--ink); }
.k-setup-btn { display: block; width: 100%; border: 0; cursor: pointer; background: var(--brand); color: var(--on-brand); text-decoration: none; font-family: var(--font-heading); font-weight: 800; font-size: 18px; padding: 17px 28px; border-radius: 16px; }
.k-setup-btn:hover { opacity: .9; }
.k-setup-note { color: var(--muted); font-size: 12px; margin: 16px 0 0; line-height: 1.5; }