/* ============================================================
   THE 121 SOMMELIER — STYLES
   Brand: 121 Artisan Bistro, Lake Charles, LA
   Handcrafted Italian · True Southern hospitality
   Type:  Cormorant Garamond (display) · DM Sans (UI/body)
   Ink black from the 121 logo · warm cream · rust-red accent
   Mobile-first, editorial, no SaaS gloss.
   ============================================================ */

:root {
  --cream: #faf6ef;
  --cream-deep: #f1eade;
  --paper: #fffcf6;
  --ink: #1f1a16;              /* logo black, softened a hair */
  --ink-soft: #5d534a;
  /* Quiet text — labels, separators, prices on the dish list. Dark enough to
     clear WCAG AA on ALL THREE backgrounds, including the deeper cream the
     Wine of the Month card uses: 5.3 on cream, 5.6 on paper, 4.8 on
     cream-deep. Anything lighter fails somewhere. */
  --ink-faint: #6f6558;
  --rust: #b6452f;             /* 121 site accent, deepened for contrast */
  --rust-bright: #db594b;      /* the site's #db594b, for small accents */
  --rust-deep: #93381f;
  --hairline: rgba(31, 26, 22, 0.14);
  --shadow-soft: 0 1px 2px rgba(31,26,22,.05), 0 6px 20px rgba(31,26,22,.06);
  --radius: 10px;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --sans: "DM Sans", -apple-system, "Segoe UI", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sans);
  background: var(--cream);
  color: var(--ink);
  line-height: 1.55;
  font-weight: 400;
  min-height: 100dvh;
}

/* Subtle paper grain */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

.app {
  max-width: 560px;
  margin: 0 auto;
  padding: 0 20px calc(48px + env(safe-area-inset-bottom));
}

/* ---------- Top bar ---------- */
.topbar[hidden] { display: none; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 560px;
  margin: 0 auto;
  padding: 14px 16px 12px;
  background: linear-gradient(to bottom, var(--cream) 75%, rgba(250,246,239,0));
}
.topbar-back,
.topbar-home {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  transition: transform .35s var(--ease), background .35s var(--ease);
}
.topbar-back:active, .topbar-home:active { transform: scale(0.94); }
.topbar-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}

/* ---------- Screen transitions (subtle & fast) ---------- */
.screen { animation: rise .45s var(--ease) both; }
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .screen { animation: none; } }

/* ---------- Landing ---------- */
.landing {
  min-height: 92dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 40px 4px;
}
.landing-logo {
  display: block;
  width: 168px;
  max-width: 60%;
  margin: 0 auto 30px;
}
.landing-logo img { width: 100%; height: auto; display: block; }
/* Fallback lockup shown only if the logo image is missing */
.logo-fallback {
  display: none;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink);
}
.landing-logo.missing img { display: none; }
.landing-logo.missing .logo-fallback { display: block; }

.landing-presents {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 14px;
}
/* The Pair & Pour wordmark is artwork (assets/logo-pair-pour.webp).
   The text lockup underneath is a fallback and only shows if that
   image fails to load. */
.wordmark {
  width: 310px;
  max-width: 88%;
  margin: 0 auto;
  font-size: 0;              /* no baseline gap under the image */
}
.wordmark img { width: 100%; height: auto; display: block; }
.wordmark-text {
  display: none;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(46px, 13vw, 64px);
  line-height: 0.98;
  letter-spacing: 0.005em;
  color: var(--ink);
}
.wordmark-text em {
  display: block;
  font-style: italic;
  font-weight: 400;
  font-size: 0.44em;
  line-height: 1.15;
  margin-top: 0.16em;
  color: var(--rust);
}
.wordmark.missing img { display: none; }
.wordmark.missing .wordmark-text { display: block; }
.landing-sub {
  margin: 20px auto 0;
  max-width: 300px;
  font-size: 16px;
  color: var(--ink-soft);
  font-weight: 300;
}
.landing-actions {
  margin-top: 42px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}
.landing-hint {
  margin-top: 30px;
  font-size: 13px;
  letter-spacing: 0.01em;
  color: var(--ink-faint);
}
.landing-hint a { color: var(--rust); text-decoration: none; border-bottom: 1px solid rgba(182,69,47,.35); }
.landing-tagline {
  margin-top: 44px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  color: var(--ink-faint);
}

/* ---------- Buttons ---------- */
.btn {
  font-family: var(--sans);
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: 8px;
  padding: 16px 34px;
  min-width: 250px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.97); }
.btn-primary {
  background: var(--ink);
  color: var(--cream);
  border: 1px solid #000;
  box-shadow: 0 8px 22px rgba(31,26,22,.22);
}
.btn-primary:active { background: #000; }
.btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid rgba(31,26,22,.3);
}

/* ---------- Section headings ---------- */
.eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rust);
  margin-bottom: 8px;
}
.screen-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 38px;
  line-height: 1.05;
  letter-spacing: 0;
  margin-bottom: 6px;
}
.screen-sub {
  color: var(--ink-soft);
  font-weight: 300;
  font-size: 15px;
  max-width: 420px;
}
.screen-head { padding: 18px 2px 22px; }

/* ---------- Menu (dish picker) ---------- */
.menu-category { margin-bottom: 30px; }
.menu-category-name {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 24px;
  color: var(--rust);
  margin-bottom: 12px;
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.menu-category-name::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hairline);
  transform: translateY(-6px);
}
.dish {
  width: 100%;
  text-align: left;
  font-family: var(--sans);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 15px 18px;
  margin-bottom: 10px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.dish:active { transform: scale(0.985); }
.dish-name { font-weight: 500; font-size: 15.5px; }
.dish-price {
  color: var(--ink-faint);
  font-weight: 400;
  font-size: 12.5px;
  white-space: nowrap;
}
.cat-jump { margin-bottom: 20px; }
.pairs-more {
  padding-top: 10px;
  font-size: 12.5px;
  color: var(--ink-faint);
}
.dish-desc {
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 300;
  margin-top: 3px;
}
.dish-go {
  flex: none;
  color: var(--rust);
  font-size: 17px;
  opacity: .8;
}

/* ---------- Bottle images ----------
   A photo at assets/bottles/<wine-id>.png replaces the silhouette
   automatically. Both share the same box so nothing shifts.

   Every photo is cut out and padded to one shared aspect ratio (0.374:1)
   with the glass touching the top and bottom of its canvas, so setting a
   height here renders EVERY bottle at exactly that height — no more
   some-look-bigger-than-others. Keep this ratio and the images in step. */
.bottle {
  position: relative;
  flex: none;
  aspect-ratio: 187 / 500;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.bottle-svg,
.bottle-photo {
  display: block;
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: bottom center;
}
.bottle-photo {
  position: absolute;
  inset: 0;
  margin: auto;
  opacity: 0;
  transition: opacity .4s var(--ease);
  /* Photos are cut out to transparency, so no blend trick is needed —
     and leaving it off keeps white labels properly white. */
}
.bottle-photo.ok { opacity: 1; }
/* when a real photo loads, hide the silhouette behind it */
.bottle-photo.ok + .bottle-svg,
.bottle:has(.bottle-photo.ok) .bottle-svg { visibility: hidden; }

/* Width follows from .bottle's aspect-ratio — set height only. */
.bottle-sm { height: 132px; }
.bottle-md { height: 240px; }
.bottle-lg { height: 300px; }

@media (max-width: 380px) {
  .bottle-sm { height: 116px; }
  .bottle-md { height: 210px; }
  .bottle-lg { height: 260px; }
}

/* ---------- Wine of the Month ----------
   A banner, not a list row. Sits on the deeper cream so it separates from
   the page, wears the rust accent at full strength, and carries a bottle at
   the same size the Best Match card uses. Reusable: drop featureCard() into
   any screen. */
.feature-card {
  display: block;
  background: var(--cream-deep);
  border: 1px solid rgba(182,69,47,.3);
  border-top: 3px solid var(--rust);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 16px 18px 18px;
  margin-bottom: 22px;
  text-decoration: none;
  color: var(--ink);
  transition: transform .3s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.feature-card:active { transform: scale(0.99); }
.feature-tag {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rust);
  margin-bottom: 10px;
}
.feature-main {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
}
.feature-text { min-width: 0; flex: 1; }
.feature-name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.08;
}
.feature-meta {
  font-size: 12.5px;
  color: var(--ink-soft);
  margin-top: 4px;
}
.feature-note {
  font-size: 13.5px;
  font-weight: 300;
  color: var(--ink-soft);
  margin-top: 9px;
}
.feature-foot {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 12px;
}
.feature-price {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
}
.feature-price small {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 10.5px;
  color: var(--ink-faint);
}
/* Slim variant — a nudge, not the main event. Used on the landing so the
   month's wine reaches guests who never tap through to the wine list. */
.feature-card-compact {
  text-align: left;
  padding: 13px 15px 14px;
  margin: 26px auto 0;
  max-width: 340px;
}
.feature-card-compact .feature-tag { margin-bottom: 7px; }
.feature-card-compact .feature-name { font-size: 20px; }
.feature-card-compact .feature-main { gap: 12px; }
.feature-card-compact .feature-foot { margin-top: 7px; }

.feature-cta {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--rust);
}

/* ---------- Recommendation ---------- */
.for-dish {
  background: var(--cream-deep);
  border-radius: var(--radius);
  padding: 13px 18px;
  font-size: 13.5px;
  color: var(--ink-soft);
  margin-bottom: 22px;
}
.for-dish strong { color: var(--ink); font-weight: 500; }
.for-dish a { color: var(--rust); text-decoration: none; font-weight: 500; }

.match-card {
  background: var(--paper);
  border: 1px solid rgba(31,26,22,.2);
  border-top: 3px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  margin-bottom: 14px;
}
.match-card-inner { padding: 22px 20px 20px; }
.match-main {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}
.match-main-text { min-width: 0; flex: 1; }
.match-main .price-row { margin-bottom: 0; }
.badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 3px;
  padding: 5px 10px;
  margin-bottom: 6px;
}
.badge-best { background: var(--rust); color: #fdf7ef; }
.badge-soft {
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid rgba(31,26,22,.25);
}
/* Wine of the Month — rust like the accent, but outlined rather than
   filled, so it reads as special without competing with Best Match. */
.badge-month {
  background: transparent;
  color: var(--rust);
  border: 1px solid rgba(182,69,47,.5);
}
.badge-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }

.wine-name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.1;
  margin-bottom: 3px;
}
.wine-meta {
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 400;
}
.wine-meta .dot { margin: 0 6px; color: var(--ink-faint); }

.price-row {
  display: flex;
  gap: 26px;
  margin: 16px 0 4px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
}
.price-item {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.price-item b {
  display: block;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}

.why {
  margin-top: 14px;
  padding: 14px 16px;
  background: var(--cream);
  border-left: 2px solid var(--rust);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 14px;
  color: var(--ink);
  font-weight: 300;
}
.why b {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  color: var(--rust);
  font-size: 16px;
  margin-bottom: 4px;
}

.traits { display: flex; gap: 18px; margin-top: 16px; flex-wrap: wrap; }
.trait {
  font-size: 11px;
  color: var(--ink-soft);
  letter-spacing: .05em;
}
.trait-dots { display: flex; gap: 3.5px; margin-top: 4px; }
.trait-dot {
  width: 7px; height: 7px; border-radius: 999px;
  background: rgba(31,26,22,.14);
}
.trait-dot.on { background: var(--rust); }

.card-link {
  display: inline-block;
  margin-top: 14px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--rust);
  text-decoration: none;
  border-bottom: 1px solid rgba(182,69,47,.35);
  padding-bottom: 1px;
}

.alt-heading {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  color: var(--ink-soft);
  margin: 26px 0 12px;
}
.alt-card {
  display: flex;
  gap: 15px;
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 10px;
  text-decoration: none;
  color: var(--ink);
  transition: transform .3s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.alt-card:active { transform: scale(0.985); }
.alt-body { min-width: 0; }
.alt-card .wine-name { font-size: 22px; }
.alt-why {
  font-size: 13.5px;
  font-weight: 300;
  color: var(--ink-soft);
  margin-top: 8px;
}
/* Same treatment as .wine-row-price so a price reads identically whether a
   guest meets the wine in the list or as an alternative pairing. */
.alt-prices {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
  margin-top: 9px;
}
.alt-prices small,
.wine-row-price small {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 10.5px;
  color: var(--ink-faint);
}

.server-note {
  margin-top: 26px;
  text-align: center;
  font-size: 13.5px;
  color: var(--ink-faint);
  font-weight: 300;
  padding: 0 24px;
}
.server-note b { color: var(--ink-soft); font-weight: 500; }

/* ---------- Wine detail ---------- */
.detail-head {
  padding: 10px 2px 20px;
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
}
.detail-head-text { min-width: 0; }
.detail-type {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--rust);
  margin-bottom: 8px;
}
.detail-name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 36px;
  line-height: 1.05;
}
.detail-region { color: var(--ink-soft); font-weight: 300; margin-top: 6px; font-size: 15px; }

.panel {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 12px;
}
.panel-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 10px;
}
.notes-row { display: flex; gap: 8px; flex-wrap: wrap; }
.note-chip {
  font-size: 13px;
  font-weight: 400;
  padding: 6px 12px;
  border-radius: 4px;
  background: var(--cream-deep);
  color: var(--ink);
}
.panel .profile-text { font-weight: 300; font-size: 14.5px; }

.pairs-dish {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline);
  text-decoration: none;
  color: var(--ink);
  font-size: 14.5px;
}
.pairs-dish:last-child { border-bottom: none; }
.pairs-dish span { color: var(--rust); }

/* ---------- Browse list ---------- */
/* Sticks just high enough that its cream background starts while the
   topbar above is still opaque — otherwise list rows scroll through the
   topbar's fade and show as a sliver between the two. */
.filters {
  position: sticky;
  top: 48px;
  z-index: 20;
  background: var(--cream);
  padding: 18px 0 10px;
  margin-bottom: 8px;
}
/* Wine-list filters wrap so every option is visible at a glance —
   nothing important should hide off the right edge of a phone. */
.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 3px 2px;
}
/* The dish-category jump row is long (9 categories), so it scrolls
   instead — the fade on the right edge signals there's more. */
.cat-jump {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent);
  padding-right: 34px;
}
.cat-jump::-webkit-scrollbar { display: none; }
.chip {
  flex: none;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  /* ~41px tall — comfortable to hit on a phone at a dim table */
  padding: 11px 15px;
  border-radius: 6px;
  border: 1px solid rgba(31,26,22,.22);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.chip.on {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}
.list-count {
  font-size: 12.5px;
  color: var(--ink-faint);
  margin: 6px 2px 12px;
}
.wine-row {
  display: flex;
  gap: 15px;
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 10px;
  text-decoration: none;
  color: var(--ink);
  transition: transform .3s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.wine-row:active { transform: scale(0.985); }
.wine-row-body { min-width: 0; flex: 1; }
.wine-row-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}
.wine-row .wine-name { font-size: 21px; }

/* The Wine of the Month card. Lifted off the page with the paper
   background and a rust hairline — the same language as the Best Match
   card, one notch quieter, so it reads as featured without shouting. */
.wine-row-feature {
  border-color: rgba(182,69,47,.4);
  box-shadow: var(--shadow-soft);
  position: relative;
  overflow: hidden;
}
.wine-row-feature::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--rust);
}
.wine-row-price {
  flex: none;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
}

.empty {
  text-align: center;
  color: var(--ink-faint);
  padding: 40px 20px;
  font-weight: 300;
}

/* ---------- Preference finder ---------- */
.q-step { font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--rust); margin-bottom: 10px; }
.q-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.08;
  margin-bottom: 20px;
}
.option {
  width: 100%;
  text-align: left;
  font-family: var(--sans);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 17px 19px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: transform .3s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.option:active { transform: scale(0.985); }
.option-name { font-weight: 500; font-size: 15.5px; }
.option-desc { color: var(--ink-soft); font-size: 13px; font-weight: 300; margin-top: 2px; }

.finder-skip {
  display: block;
  text-align: center;
  margin-top: 18px;
  font-size: 13.5px;
  color: var(--ink-faint);
  text-decoration: none;
  border: none;
  background: none;
  width: 100%;
  cursor: pointer;
  font-family: var(--sans);
}
.finder-skip u { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Utility ---------- */
.stack-gap { height: 10px; }
.mt-24 { margin-top: 24px; }
.center { text-align: center; }