/* ================================================================
   MBS BOUTIK THERAPEÍA — South Location — appointment request portal
   Direction: high-end salon & spa · warm ivory + espresso + brass gold
   Typefaces: Playfair Display (headlines/brand) · Jost (body/UI)
   One question per screen · Auto-advance. Re-skin via tokens below.

   NOTE ON IMAGES: category tiles (.vcard__media) and the intro banner
   (.hero) use real photography from assets/. The brand mark itself
   (.brand__mark, used in the header, the hero caption and the success
   screen) is coded — a plain circular div + text, no image file — so it's
   always crisp and never shows a stray background box. See script.js's
   brandMarkHTML().
   ================================================================ */

:root {
  /* ---- Accent: warm brass/gold (re-skin here if the real logo's gold differs) ---- */
  --accent:        #a9812f;
  --accent-press:  #8a6a24;
  --accent-soft:   #f5ecd8;
  --accent-ring:   rgba(169, 129, 47, .22);

  /* Surfaces — warm ivory instead of clinical white/grey */
  --bg:        #faf7f1;
  --row:       #f4ede1;
  --row-hover: #efe2c9;
  --field:     #f8f2e6;
  --media:     #241c15;   /* dark espresso well behind category photos */
  --hairline:  #e7dcc5;
  --hairline-2:#d9cba7;

  /* Ink — warm charcoal/espresso instead of cool blue-black */
  --ink:   #251e17;
  --ink-2: #4c4136;
  --ink-3: #7b6c5c;
  --ink-4: #a4967f;

  --danger: #a3402f;
  --ok:     #4d6b4a;
  --ok-bg:  #eef2e9;

  /* Radius — softer, more boutique */
  --r-md: 12px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;

  --gap-q-to-help: 0.85rem;
  --gap-help-to-body: 2.5rem;
  --gap-option: 0.9rem;
  --gap-body-to-nav: 2.5rem;

  --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem; --s6:2rem; --s7:3rem; --s8:4rem;

  --sh-1: 0 1px 2px rgba(37,30,23,.06), 0 1px 3px rgba(37,30,23,.07);
  --sh-2: 0 10px 30px rgba(37,30,23,.14);
  --sh-focus: 0 0 0 4px var(--accent-ring);

  --ease: cubic-bezier(.22,.61,.36,1);
  --t: 200ms var(--ease);
  --t-slow: 400ms var(--ease);

  --w-wide: 960px;
  --w-form: 620px;
  --topbar-h: 68px;

  --font-display: 'Playfair Display', 'Georgia', serif;
  --font-body: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* , *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
/* Warm vignette + a barely-there paper grain instead of a flat fill — reads
   as "boutique" rather than "form" without competing with content. The grain
   is an inline SVG feTurbulence data-uri at ~2% opacity: invisible up close,
   but it keeps large ivory fields from looking like plain app-chrome. */
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-2);
  background:
    radial-gradient(1100px 620px at 12% -8%, rgba(169,129,47,.08), transparent 58%),
    radial-gradient(900px 560px at 105% 8%, rgba(169,129,47,.06), transparent 55%),
    var(--bg);
  position: relative;
  min-height: 100vh; min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body::before {
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.025; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a { color: var(--accent); text-decoration: none; }
img, svg { display: block; max-width: 100%; }
.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; }

/* ---------------- Layout ---------------- */
.portal { position:relative; z-index:1; display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; }

.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250,247,241,.92);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--hairline);
}
.topbar__inner {
  max-width: var(--w-wide); margin: 0 auto; min-height: var(--topbar-h);
  padding: 0 var(--s5); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--s3) 0;
}
.brand { display:flex; align-items:center; gap:var(--s3); }
.brand__mark { flex-shrink:0; height:44px; width:auto; max-width:200px; display:flex; align-items:center; justify-content:center; }
.brand__mark img { height:100%; width:auto; max-width:200px; object-fit:contain; }
.brand__text { display:flex; flex-direction:column; line-height:1.14; }
.brand__name { font-family:var(--font-display); font-weight:700; font-size:1.24rem; color:var(--ink); letter-spacing:-0.01em; }
.brand__sub  { font-size:.66rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-4); margin-top:2px; }
.secure { display:inline-flex; align-items:center; gap:6px; font-size:.74rem; font-weight:600; color:var(--ink-3); }
.secure svg { color:var(--accent); }

.progress { max-width: var(--w-wide); margin: 0 auto; padding: 0 var(--s5) var(--s3); }
.progress__track { height:6px; background:var(--hairline); border-radius:var(--r-pill); overflow:hidden; }
.progress__fill { height:100%; width:6%; background:linear-gradient(90deg, var(--accent), #c9a355); border-radius:var(--r-pill); transition:width var(--t-slow); }
.progress__meta { display:flex; align-items:baseline; gap:6px; margin-top:8px; }
.progress__step { font-size:.72rem; font-weight:700; color:var(--accent); letter-spacing:.02em; }
.progress__label { font-size:.72rem; font-weight:600; color:var(--ink-4); }
.progress__label:not(:empty)::before { content:"· "; }

/* ---------------- Stage / step ---------------- */
.stage { flex:1; width:100%; display:flex; justify-content:center; padding: var(--s8) var(--s5); }

.step {
  width:100%; max-width:var(--w-form); text-align:center;
  opacity:1; animation: rise var(--t-slow);
  display:flex; flex-direction:column; align-items:center;
}
.step--wide { max-width: var(--w-wide); }
@keyframes rise { from { opacity:0; transform: translateY(12px); } to { opacity:1; transform: translateY(0); } }

/* Typography — editorial serif headline, clean sans body */
.step__q {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.8vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.16;
  color: var(--ink);
  text-wrap: balance;
  max-width: 32ch;
  margin: 0;
}
.step__sub {
  font-size: 1rem;
  font-weight: 400;
  color: var(--ink-3);
  line-height: 1.55;
  text-wrap: balance;
  max-width: 48ch;
  margin: var(--gap-q-to-help) 0 0;
}
.step__sub:empty { display:none; }

.step__body { width:100%; margin-top: var(--gap-help-to-body); display:flex; flex-direction:column; align-items:center; }

/* ---------------- Option rows ---------------- */
.options { display:flex; flex-direction:column; gap:var(--gap-option); width:100%; max-width:520px; }

.opt {
  position:relative; display:flex; align-items:center; justify-content:center;
  min-height:74px; padding: 1rem 62px;
  background:var(--row); border:1.5px solid transparent; border-radius:var(--r-lg);
  cursor:pointer; user-select:none;
  font-size:1.08rem; font-weight:600; color:var(--ink); text-align:center; line-height:1.3;
  transition: background var(--t), border-color var(--t), box-shadow var(--t), transform var(--t), color var(--t);
  -webkit-tap-highlight-color: transparent;
}
.opt:hover { background:var(--row-hover); }
.opt:active { transform: scale(.99); }
.opt:focus-visible { outline:none; box-shadow:var(--sh-focus); }
.opt.is-selected { background:var(--accent-soft); border-color:var(--accent); box-shadow:var(--sh-focus); color:var(--accent-press); }

.opt__check {
  position:absolute; right:18px; top:50%; transform:translateY(-50%) scale(.4);
  width:28px; height:28px; border-radius:var(--r-pill); background:var(--accent);
  display:flex; align-items:center; justify-content:center; opacity:0;
  transition: opacity var(--t), transform var(--t);
}
.opt.is-selected .opt__check { opacity:1; transform:translateY(-50%) scale(1); }
.opt__check svg { stroke:#fff; }

/* ---------------- Category tiles (editorial photo cards) ---------------- */
.vehicles { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5); width:100%; max-width:var(--w-wide); }

.vcard {
  position:relative; display:flex; flex-direction:column; align-items:stretch;
  padding:0; background:var(--row); border:1.5px solid transparent; border-radius:var(--r-xl);
  cursor:pointer; user-select:none; overflow:hidden;
  transition: border-color var(--t), box-shadow var(--t), transform var(--t);
  -webkit-tap-highlight-color: transparent;
}
.vcard:hover { transform:translateY(-3px); box-shadow:var(--sh-2); }
.vcard:focus-visible { outline:none; box-shadow:var(--sh-focus); }
.vcard.is-selected { border-color:var(--accent); box-shadow:var(--sh-focus); }

/* Portrait editorial tile — a real photo (via background-image, set inline per
   card in script.js) sits under a warm scrim with the label overlaid, so the
   card still reads as "designed" even before real photography is dropped in. */
.vcard__media {
  position:relative; width:100%; aspect-ratio: 3 / 4;
  background: linear-gradient(155deg, #3a2c1d 0%, var(--media) 55%, #1a140e 100%);
  background-size: cover; background-position: center;
  overflow:hidden;
}
.vcard__media::after {
  content:''; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(26,20,14,0) 40%, rgba(26,20,14,.82) 100%);
}
.vcard.is-selected .vcard__media::after { background: linear-gradient(180deg, rgba(169,129,47,.05) 40%, rgba(138,106,36,.86) 100%); }
.vcard__media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.vcard__media svg { display:none; }

/* Label + sub live in one flow-layout overlay box anchored to the bottom of the
   photo, so wrapped two-line captions grow upward instead of clipping. */
.vcard__overlay {
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  padding: 1.1rem 1.15rem 1.05rem; display:flex; flex-direction:column; gap:.2rem;
}
.vcard__label {
  font-family:var(--font-display); font-size:1.12rem; font-weight:700; color:#fff;
  letter-spacing:-0.01em; text-align:left; line-height:1.2; text-shadow:0 1px 8px rgba(0,0,0,.3);
}
.vcard__sub {
  display:block;
  font-family:var(--font-body); font-size:.76rem; font-weight:500; color:rgba(255,255,255,.85);
  text-align:left; letter-spacing:.01em; line-height:1.35;
}

.vcard__check {
  position:absolute; top:14px; right:14px; width:30px; height:30px; border-radius:var(--r-pill);
  background:var(--accent); display:flex; align-items:center; justify-content:center;
  opacity:0; transform:scale(.4); transition:opacity var(--t), transform var(--t); z-index:2;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.vcard.is-selected .vcard__check { opacity:1; transform:scale(1); }
.vcard__check svg { stroke:#fff; }

@media (max-width: 840px) { .vehicles { grid-template-columns:repeat(2,1fr); } }
@media (max-width: 520px) {
  .vehicles { grid-template-columns:1fr 1fr; gap:var(--s4); }
  .vcard__media { aspect-ratio: 1 / 1.05; }
}

/* ---------------- Service list rows (specific services within a category) ---------------- */
.svclist { display:flex; flex-direction:column; gap:var(--s3); width:100%; max-width:560px; text-align:left; }
.svc {
  position:relative; display:flex; flex-direction:column; gap:4px; text-align:left;
  padding: 1.05rem 3.3rem 1.05rem 1.2rem;
  background:var(--row); border:1.5px solid transparent; border-radius:var(--r-lg);
  cursor:pointer; user-select:none;
  transition: background var(--t), border-color var(--t), box-shadow var(--t);
  -webkit-tap-highlight-color: transparent;
}
.svc:hover { background:var(--row-hover); }
.svc:focus-visible { outline:none; box-shadow:var(--sh-focus); }
.svc.is-selected { background:var(--accent-soft); border-color:var(--accent); box-shadow:var(--sh-focus); }
.svc__top { display:flex; align-items:baseline; justify-content:space-between; gap:var(--s3); }
.svc__titlewrap { display:flex; align-items:baseline; flex-wrap:wrap; gap:.05rem .5rem; min-width:0; }
.svc__name { font-family:var(--font-display); font-size:1.06rem; font-weight:700; color:var(--ink); }
.svc__price { flex-shrink:0; font-size:.92rem; font-weight:700; color:var(--accent-press); white-space:nowrap; }
.svc__meta { flex-shrink:0; font-size:.78rem; font-weight:500; color:var(--ink-4); white-space:nowrap; }
.svc__desc { font-size:.86rem; color:var(--ink-3); line-height:1.45; margin-top:2px; text-wrap:pretty; }
.svc__check {
  position:absolute; right:16px; top:50%; transform:translateY(-50%) scale(.4);
  width:26px; height:26px; border-radius:var(--r-pill); background:var(--accent);
  display:flex; align-items:center; justify-content:center; opacity:0;
  transition: opacity var(--t), transform var(--t);
}
.svc.is-selected .svc__check { opacity:1; transform:translateY(-50%) scale(1); }
.svc__check svg { stroke:#fff; }
.svcnote { font-size:.78rem; color:var(--ink-4); font-style:italic; margin-top:2px; max-width:560px; }

/* ---------------- Offer banner (15% + welcome ritual) ---------------- */
.offerband {
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin: var(--s4) auto 0; padding: .7rem 1.3rem;
  background: linear-gradient(100deg, var(--accent-soft), #fbf4e4);
  border:1px solid var(--hairline-2); border-radius:var(--r-pill);
  font-size:.86rem; font-weight:600; color:var(--accent-press);
  max-width: 92%;
}
.offerband svg { flex-shrink:0; width:16px; height:16px; }

/* ---------------- Inputs ---------------- */
.fields { display:flex; flex-direction:column; gap:var(--s5); width:100%; max-width:480px; text-align:left; }

.field { display:flex; flex-direction:column; }
.field__label { font-size:.88rem; font-weight:600; color:var(--ink-2); margin-bottom:9px; }
.field__opt { font-weight:500; color:var(--ink-4); }

.input {
  width:100%; height:58px; padding:0 18px;
  font: inherit; font-size:1.02rem; font-weight:500; color:var(--ink);
  background:var(--field); border:1.5px solid var(--hairline-2); border-radius:var(--r-md);
  outline:none; transition:border-color var(--t), box-shadow var(--t), background var(--t);
  -webkit-appearance:none; appearance:none;
}
.input::placeholder { color:var(--ink-4); font-weight:400; }
.input:hover { border-color:#c9b78d; }
.input:focus { border-color:var(--accent); background:#fff; box-shadow:var(--sh-focus); }
.input.is-bad { border-color:var(--danger); box-shadow:0 0 0 4px rgba(163,64,47,.12); }

select.input {
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%237b6c5c' stroke-width='2.2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; padding-right:46px;
}

.row3 { display:grid; grid-template-columns:1.3fr 1fr 1.1fr; gap:var(--s3); }
@media (max-width:420px){ .row3{ grid-template-columns:1fr 1fr; } .row3 .field:last-child{ grid-column:1/-1; } }

.pac-container {
  margin-top:6px; border:1.5px solid var(--hairline-2); border-radius:var(--r-md);
  box-shadow:0 12px 28px rgba(37,30,23,.14); background:#fff;
  font-family:var(--font-body); overflow:hidden;
}
.pac-container:after { display:none; }
.pac-item { padding:11px 16px; font-size:.98rem; color:var(--ink-2); border-top:1px solid var(--hairline); cursor:pointer; line-height:1.4; }
.pac-item:first-child { border-top:0; }
.pac-item:hover, .pac-item-selected { background:var(--field); }
.pac-item-query { font-size:.98rem; font-weight:700; color:var(--ink); }
.pac-matched { font-weight:800; }
.pac-icon { margin-right:10px; }

.err { font-size:.85rem; font-weight:600; color:var(--danger); margin-top:10px; text-align:left; width:100%; max-width:480px; }
.err:empty { display:none; }

.linkline {
  display:inline-block; margin:0 0 var(--s5); font-size:.9rem; font-weight:600; color:var(--accent-press);
  cursor:pointer; text-decoration:underline; text-underline-offset:3px; background:none; border:none; font-family:inherit;
}
.linkline:hover { color:var(--accent); }

/* ---------------- OTP ---------------- */
.otp { display:flex; gap:var(--s2); justify-content:center; width:100%; max-width:300px; }
.otp__box {
  flex:1; max-width:44px; height:52px; text-align:center; font-size:1.25rem; font-weight:700; color:var(--ink);
  background:var(--field); border:1.5px solid var(--hairline-2); border-radius:var(--r-md); outline:none;
  transition:border-color var(--t), box-shadow var(--t), background var(--t); -webkit-appearance:none; appearance:none;
}
.otp__box:focus { border-color:var(--accent); background:#fff; box-shadow:var(--sh-focus); }
.otp__box.is-filled { border-color:var(--accent); }
.otp.is-bad .otp__box { border-color:var(--danger); }
@media (max-width:380px){ .otp__box{ height:46px; font-size:1.1rem; max-width:40px; } }

.resend { background:none; border:none; font-family:inherit; font-size:.9rem; font-weight:600; color:var(--accent-press); cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.resend:disabled { color:var(--ink-4); cursor:default; text-decoration:none; }
.verifying { display:inline-flex; align-items:center; gap:8px; font-size:.9rem; font-weight:600; color:var(--ink-3); }
.spinner { width:16px; height:16px; border-radius:50%; border:2px solid var(--hairline-2); border-top-color:var(--accent); animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ---------------- Summary ---------------- */
.summary { text-align:left; background:var(--field); border:1px solid var(--hairline); border-radius:var(--r-lg); padding:var(--s5); width:100%; max-width:480px; }
.summary__title { font-size:.72rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-4); margin-bottom:var(--s4); }
.summary__grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--s4) var(--s5); }
@media (max-width:440px){ .summary__grid{ grid-template-columns:1fr; } }
.summary__k { font-size:.72rem; color:var(--ink-4); margin-bottom:3px; }
.summary__v { font-size:.95rem; font-weight:600; color:var(--ink); word-break:break-word; }

.consent { display:flex; gap:var(--s3); align-items:flex-start; width:100%; max-width:480px; text-align:left; cursor:pointer; margin-top:var(--s5); }
.consent input { width:20px; height:20px; min-width:20px; margin-top:2px; accent-color:var(--accent); cursor:pointer; }
.consent__text { font-size:.84rem; color:var(--ink-3); line-height:1.55; }
.consent__text a { text-decoration:underline; text-underline-offset:2px; }

/* ---------------- Buttons / nav — pill-shaped, boutique ---------------- */
.nav { display:flex; align-items:center; justify-content:center; gap:var(--s3); margin-top:var(--gap-body-to-nav); width:100%; }
.nav--split { justify-content:space-between; max-width:480px; }

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:56px; padding:0 40px; font:inherit; font-size:.98rem; font-weight:600; letter-spacing:.01em;
  border:none; border-radius:var(--r-pill); cursor:pointer;
  transition:background var(--t), transform var(--t), box-shadow var(--t), color var(--t), border-color var(--t);
  -webkit-tap-highlight-color: transparent;
}
.btn--primary { background:linear-gradient(100deg, var(--accent), #93712a); color:#fff; box-shadow:var(--sh-1); min-width:190px; }
.btn--primary:hover { background:linear-gradient(100deg, var(--accent-press), #7a5d1f); }
.btn--primary:active { transform:translateY(1px); }
.btn--primary:disabled { opacity:.55; cursor:default; transform:none; }
.btn--ghost { background:transparent; color:var(--ink-3); border:1.5px solid var(--hairline-2); height:52px; padding:0 24px; min-width:0; }
.btn--ghost:hover { color:var(--ink); border-color:#c9b78d; background:var(--field); }
.btn.is-loading { color:transparent; pointer-events:none; position:relative; }
.btn.is-loading::after { content:''; position:absolute; inset:0; margin:auto; width:20px; height:20px; border-radius:50%; border:2px solid rgba(255,255,255,.45); border-top-color:#fff; animation:spin .7s linear infinite; }

.backlink { display:inline-flex; align-items:center; gap:7px; margin-top:var(--gap-body-to-nav); background:none; border:none; font-family:inherit; font-size:.96rem; font-weight:600; color:var(--ink-3); cursor:pointer; padding:10px 16px; border-radius:var(--r-md); transition:color var(--t), background var(--t); }
.backlink:hover { color:var(--ink); background:var(--field); }
.backlink svg { width:18px; height:18px; }

.trustnote { display:flex; align-items:center; justify-content:center; gap:6px; font-size:.76rem; color:var(--ink-4); margin-top:var(--s4); }
.trustnote svg { color:var(--ok); }

/* ---------------- Success ---------------- */
.done { flex:1; display:flex; align-items:center; justify-content:center; padding:var(--s8) var(--s5); }
.done__inner { max-width:var(--w-form); width:100%; text-align:center; animation:rise var(--t-slow); }
.done__check { width:78px; height:78px; border-radius:50%; background:var(--ok-bg); color:var(--ok); display:flex; align-items:center; justify-content:center; margin:0 auto var(--s5); }

.done__logo {
  margin:0 auto var(--s5);
  display:flex; align-items:center; justify-content:center;
}
.done__logo .brand__mark { box-shadow:0 8px 24px rgba(169,129,47,.28); }

.done__title {
  font-family:var(--font-display);
  font-size:clamp(2rem,5.5vw,2.75rem); font-weight:700;
  letter-spacing:-0.01em; color:var(--ink);
  margin-bottom:var(--s3); text-wrap:balance;
  line-height:1.12;
}
.done__title-accent {
  display:block; font-size:clamp(1rem,3vw,1.2rem); font-weight:600;
  color:var(--accent-press); letter-spacing:-0.005em; margin-top:6px;
}
.done__body { color:var(--ink-3); max-width:46ch; margin:0 auto var(--s6); text-wrap:balance; font-size:1.04rem; }

.done__team { margin:0 0 var(--s6); }
.done__team img {
  width:100%; max-width:420px; aspect-ratio:3/2; object-fit:cover;
  border-radius:var(--r-lg); box-shadow:var(--sh-2); display:block; margin:0 auto;
}
.done__team figcaption { margin-top:var(--s3); font-size:.82rem; font-weight:600; color:var(--ink-4); letter-spacing:.02em; }

.done__next { text-align:left; background:var(--field); border:1px solid var(--hairline); border-radius:var(--r-lg); padding:var(--s5); }
.done__next-label { font-size:.72rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-4); margin-bottom:var(--s4); }
.done__steps { list-style:none; counter-reset:s; display:flex; flex-direction:column; gap:var(--s3); }
.done__steps li { counter-increment:s; display:flex; align-items:center; gap:var(--s4); font-size:.96rem; color:var(--ink); font-weight:500; }
.done__steps li::before { content:counter(s); flex-shrink:0; width:28px; height:28px; border-radius:50%; background:var(--accent-soft); color:var(--accent-press); display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:700; font-family:var(--font-display); }

.foot { padding:var(--s5); text-align:center; font-size:.74rem; color:var(--ink-4); border-top:1px solid var(--hairline); }
.foot a { color:var(--ink-4); text-decoration:underline; text-underline-offset:2px; }

/* ---------------- Mobile ---------------- */
@media (max-width: 520px) {
  :root { --gap-help-to-body: 2rem; --gap-body-to-nav: 2rem; --s8: 2.75rem; }
  .topbar__inner { padding:.5rem var(--s4) .6rem; align-content:flex-start; }
  .progress { padding:.2rem var(--s4) var(--s3); }
  .stage { padding: var(--s7) var(--s4); }
  .opt { min-height:68px; font-size:1.02rem; padding:1rem 56px; }
  .btn--primary { width:100%; }
  .nav { flex-direction:column-reverse; }
  .nav--split { flex-direction:row; }
  .secure { font-size:.68rem; order:2; margin-left:auto; }
  .secure span { display:inline; }
  .brand { display:contents; }
  .brand .brand__mark { order:1; }
  .brand .brand__text { order:3; flex-basis:100%; width:100%; margin-top:.05rem; }
  .brand__name { font-size:1.08rem; line-height:1.25; }
  .brand__sub  { font-size:.62rem; margin-top:.12rem; display:block; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }

/* ================= Hero — real storefront photo, intro screen only ================= */
.hero {
  position:relative; width:100%; max-width:var(--w-wide); margin:0 auto var(--s6);
  aspect-ratio: 16 / 11; border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-2);
}
.hero img { width:100%; height:100%; object-fit:cover; object-position:center 42%; }
.hero::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,15,10,.05) 45%, rgba(16,12,8,.72) 100%);
}
.hero__caption {
  position:absolute; left:1.25rem; bottom:1rem; right:1.25rem; z-index:1;
  display:flex; align-items:center; gap:9px;
  color:#fff; font-family:var(--font-body); font-size:.86rem; font-weight:600; letter-spacing:.01em;
}
.hero__caption .brand__mark { box-shadow:0 2px 10px rgba(0,0,0,.35); }
@media (max-width:520px) { .hero { aspect-ratio:4/3.1; border-radius:var(--r-lg); margin-bottom:var(--s5); } }

/* ================= Visit-us strip (address · hours · rating) ================= */
.visitcard { width:100%; max-width:760px; margin:var(--s4) auto 0; }
.visitcard__row {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px 10px;
}
.visitcard__item {
  display:inline-flex; align-items:center; gap:7px;
  font: inherit; font-size:.84rem; font-weight:600; color:var(--ink-3);
  background:none; border:none; cursor:pointer; white-space:nowrap;
  padding:6px 4px; border-radius:var(--r-md); transition:color var(--t), background var(--t);
}
a.visitcard__item:hover, .visitcard__hours:hover { color:var(--ink); background:var(--field); }
.visitcard__item svg { width:15px; height:15px; flex-shrink:0; color:var(--accent-press); }
.visitcard__item .chev { width:11px; height:11px; color:var(--ink-4); transition:transform var(--t); margin-left:1px; }
.visitcard__hours.is-open .chev { transform:rotate(180deg); }
.visitcard__rating svg.star { color:#c9962f; }
.visitcard__rating b { color:var(--ink-2); font-weight:700; }
.visitcard__row > :not(:last-child)::after {
  content:''; display:inline-block; width:3px; height:3px; border-radius:50%;
  background:var(--hairline-2); margin-left:10px; vertical-align:middle;
}
@media (max-width:560px) { .visitcard__row > :not(:last-child)::after { display:none; } }

.visitcard__panel { margin-top:6px; display:flex; justify-content:center; }
.hourslist {
  list-style:none; width:100%; max-width:280px; background:var(--field);
  border:1px solid var(--hairline); border-radius:var(--r-lg); padding:.6rem .9rem;
}
.hourslist li { display:flex; justify-content:space-between; gap:var(--s4); padding:.4rem 0; font-size:.85rem; color:var(--ink-3); border-top:1px solid var(--hairline); }
.hourslist li:first-child { border-top:0; }
.hourslist li.is-today { color:var(--ink); font-weight:700; }
.hourslist li.is-today span:first-child::after { content:' •'; color:var(--accent); }

.subline {
  font-size:.98rem; font-weight:400; color:var(--ink-3); margin-top:var(--s3); text-wrap:balance;
}

.reassure {
  display:flex; align-items:center; justify-content:center; gap:7px;
  font-size:.82rem; font-weight:500; color:var(--ink-4); margin-top:var(--s4);
}
.reassure svg { width:14px; height:14px; color:var(--ok); }

/* ================= Footer: address/hours + trust + powered-by ================= */
.foot { display:flex; flex-direction:column; align-items:center; gap:var(--s3); }
.foot__info { display:flex; flex-direction:column; align-items:center; gap:4px; order:1; }
.foot__address { font-weight:600; color:var(--ink-3); }
.foot__hours { max-width:560px; color:var(--ink-4); }
.trustitem, .foot__trust > * {
  display:inline-flex; align-items:center; gap:7px;
  font-size:.82rem; font-weight:600; color:var(--ink-3); white-space:nowrap;
}
.foot__trust { order:2; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px 16px; }
.trustitem svg, .foot__trust svg { width:15px; height:15px; flex-shrink:0; color:var(--ok); }
.foot__legal { order:3; }
.poweredby {
  order:4; display:inline-flex; align-items:center; gap:7px; opacity:.6;
  font-size:.7rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-4);
  transition:opacity var(--t);
}
.poweredby:hover { opacity:1; }
.poweredby img { height:18px; width:auto; }

/* ================= Confetti burst (success screen) ================= */
.confetti-host {
  position:fixed; top:0; left:50%; transform:translateX(-50%);
  width:min(620px,100vw); height:0; pointer-events:none; z-index:9999; overflow:visible;
}
.confetti-piece { position:absolute; top:0; opacity:0; animation: confetti-fall linear forwards; }
@keyframes confetti-fall {
  0%   { opacity:1; transform:translateY(-20px) rotate(0deg); }
  80%  { opacity:1; }
  100% { opacity:0; transform:translateY(520px) rotate(var(--rot)); }
}