/* ============================================================
   Belinkd, warm editorial dark theme
   Structure & spacing discipline borrowed from Mission Control DS;
   palette & type are a warm-earthy editorial departure.
   ============================================================ */

:root {
  /* ── Surfaces (deep warm forest-black) ─────────────── */
  --ink-900: #FAFAF8;   /* page base (warm white) */
  --ink-850: #F4F1EC;   /* cream alt band */
  --ink-800: #FDFCF9;   /* card / modal surface — warm stone, not pure white */
  --ink-750: #F4F1EC;   /* cream raised */
  --ink-700: #EDEAE3;   /* tertiary / hover */
  --glass:   #FFFFFF;
  --glass-strong: rgba(250, 250, 248, 0.85);
  --ov: 26,24,20;
  --cover-base: rgba(255,255,255,0);

  /* ── Lines (warm bone at low alpha) ─────────────────── */
  --line:        rgba(26, 24, 20, 0.08);
  --line-strong: rgba(26, 24, 20, 0.16);
  --line-faint:  rgba(26, 24, 20, 0.05);
  --line-soft:   rgba(26, 24, 20, 0.05);

  /* ── Text (bone family) ─────────────────────────────── */
  --bone:    #1A1814;   /* primary text (warm near-black) */
  --bone-2:  #3A352E;   /* strong secondary */
  --taupe:   #5C5751;   /* muted secondary */
  --taupe-3: #787163;   /* tertiary / placeholder — darkened from #857D75 (3.87:1, failed AA text contrast) to 4.63:1 */

  /* ── Brand & accents, belinkd sky-blue + orange ─────── */
  /* Primary accent is SKY BLUE. --sky* are the source of truth;
     --amber* remain as back-compat shims (legacy name held blue). */
  --sky:         #1A8FE3;   /* PRIMARY ACCENT, belinkd sky blue */
  --sky-bright:  #36A4F0;
  --sky-deep:    #1474BE;
  --sky-dim:     rgba(26, 143, 227, 0.10);
  --grad-card-band: linear-gradient(115deg, var(--sky-dim) 0%, oklch(0.9 0.05 250) 45%, oklch(0.92 0.06 60) 100%);   /* shared blue→orange band, service cards + checkout covers */

  --amber:        var(--sky);        /* shim → sky (legacy name) */
  --amber-bright: var(--sky-bright); /* shim → sky */
  --amber-deep:   var(--sky-deep);   /* shim → sky */
  --amber-dim:    var(--sky-dim);    /* shim → sky */

  --orange:      #F6821F;   /* secondary accent, warm CTA / events */
  --orange-deep: #E06A00;
  --orange-dim:  rgba(246, 130, 31, 0.12);

  --green:     #0B8A55;   /* open to all / success */
  --green-dim: #D8F2E6;
  --danger:      #A8402F;  /* warm brick red, semantic negative (AA on white) */
  --danger-dim:  #F7E3DF;
  --clay:      #C44C86;   /* culture-only, rose, distinct from orange */
  --clay-dim:  #FBE7F1;
  --forest:    var(--sky-deep);   /* alias → deep sky */
  --star:      #F5A623;   /* rating stars (warm gold) */
  --verify:    var(--green);   /* alias → green trust */
  --led:       #B26B00;  /* culture-led amber */
  --led-bg:    #FDEFD6;
  --led-bd:    rgba(178, 107, 0, 0.28);

  /* ── Type ──────────────────────────────────────────── */
  --serif: 'Bricolage Grotesque', 'Outfit', system-ui, -apple-system, sans-serif;
  --sans:  'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --mono:  'DM Mono', 'Space Mono', ui-monospace, monospace;

  /* ── Spacing (4px base, Mission Control scale) ──────── */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s7: 28px; --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px;
  --s20: 80px; --s24: 96px;

  /* ── Extra surfaces, homepage editorial pass ─────────── */
  --stone-tint:    #F1ECE3;   /* muted warm stone wash, replaces bright color-block bands */
  --surface-peach: #FFF1E6;   /* sparse orange-adjacent tint, used thinly */
  --brand-deep:    #0969C7;
  --footer-line:   var(--line);
  --footer-text:   var(--taupe);
  --footer-text-strong: var(--bone);

  /* ── Editorial floating shadow, reserved for genuinely floating
     elements (the hero provider cards) — never used on inline surfaces. ── */
  --shadow-float: 0 30px 60px -24px rgba(23,23,23,0.22), 0 4px 14px rgba(23,23,23,0.06);

  /* ── Radius (warmer, slightly larger than MC) ───────── */
  --r-sm: 10px;
  --r:    12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* ── Motion ────────────────────────────────────────── */
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
  --t-fast: 140ms var(--ease);
  --t: 220ms var(--ease);

  /* ── Elevation ─────────────────────────────────────── */
  --shadow-card: 0 4px 16px rgba(var(--ov),0.08), 0 2px 6px rgba(var(--ov),0.05);
  --shadow-pop:  0 12px 40px rgba(var(--ov),0.13), 0 4px 12px rgba(var(--ov),0.07);
  --shadow-sm:   0 1px 3px rgba(var(--ov),0.06), 0 1px 2px rgba(var(--ov),0.04);
  --shadow-lg:   0 12px 40px rgba(var(--ov),0.10), 0 4px 12px rgba(var(--ov),0.06);
  --shadow-hover:0 16px 48px rgba(var(--ov),0.13), 0 6px 16px rgba(var(--ov),0.08);
}

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

html, body { height: 100%; }

body {
  font-family: var(--sans);
  background-color: var(--ink-900);
  color: var(--bone);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: hidden;
}

/* warm vignette glow, very subtle */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(1100px 560px at 80% -10%, rgba(26,143,227,0.05), transparent 60%),
    radial-gradient(900px 520px at 5% 0%, rgba(246,130,31,0.04), transparent 62%);
}

#root { position: relative; z-index: 1; overflow-x: clip; }

::selection { background-color: var(--amber-dim); color: var(--bone); }

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; }
a { color: inherit; text-decoration: none; }

html { scrollbar-color: var(--taupe) var(--ink-700); scrollbar-width: auto; }
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track { background: var(--ink-700); }
::-webkit-scrollbar-thumb { background-color: var(--taupe); border-radius: 999px; border: 3px solid var(--ink-700); }
::-webkit-scrollbar-thumb:hover { background-color: var(--bone-2); }

:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* ── Scroll reveal — subtle fade + rise for homepage marketing sections.
   Base state is the visible resting state (so print/PDF/no-JS see full
   content); .reveal-pending (added by JS, pre-animation only) hides it,
   and intersection removes that class to play the reveal in. Gated on
   prefers-reduced-motion so it never fights accessibility prefs. ── */
@media (prefers-reduced-motion: no-preference) {
  .reveal-pending { opacity: 0; transform: translateY(16px); }
  .reveal-in { opacity: 1; transform: none; transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
}

/* ── Typographic helpers ──────────────────────────────── */
.serif { font-family: var(--serif); }
.eyebrow {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--taupe);
}
.muted { color: var(--taupe); }

/* ── Interior page label, clear "you are here" wayfinding tag that mirrors
   the nav (icon + page name). Distinct from the amber section eyebrows so the
   top of every secondary page announces which page you've landed on. ── */
.page-tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 11px; margin-bottom: 16px;
  border-radius: var(--r-pill);
  background: var(--amber-dim); border: 1px solid var(--line-faint);
  font-family: var(--mono); font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber);
  white-space: nowrap;
}
.page-tag svg { color: var(--amber); }

/* Events page (formerly Community): primary accent is orange, not blue, so the
   page tag, pills and accents match the event type colour used on cards. */
.page-events {
  --amber: var(--orange); --amber-bright: var(--orange); --amber-deep: var(--orange-deep);
  --amber-dim: var(--orange-dim); --sky: var(--orange); --sky-deep: var(--orange-deep);
}
.page-events .pill.on { border-color: color-mix(in srgb, var(--orange) 50%, transparent); }

/* ── Unified page header (used by PageHead across every top-level page) ── */
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s6); margin-bottom: var(--s8); flex-wrap: wrap;
}
.page-head-text { min-width: 0; }
.page-title {
  font-family: var(--serif); font-size: 2.5rem; font-weight: 500;
  letter-spacing: -0.02em; line-height: 1.05; color: var(--bone);
}
.page-desc { margin-top: var(--s2); font-size: 1rem; max-width: 62ch; }
.empty-action { margin-top: var(--s4); display: flex; gap: var(--s3); flex-wrap: wrap; justify-content: center; }
@media (max-width: 640px) {
  .page-title { font-size: 1.75rem !important; }
}

/* ============================================================
   TOP BAR
   ============================================================ */
/* Accessibility: skip-to-content link, hidden until keyboard-focused */
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 2000;
  transform: translateY(-160%);
  padding: 10px 16px; border-radius: 10px;
  background: var(--sky-deep); color: #fff;
  font-weight: 600; font-size: 0.875rem; text-decoration: none;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  transition: transform .18s ease;
}
.skip-link:focus { transform: translateY(0); outline: 2px solid #fff; outline-offset: 2px; }
#main-content:focus { outline: none; }

body.checkout-open .topbar { display: none; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 58px;
  display: flex;
  align-items: center;
  gap: var(--s6);
  padding: 0 max(var(--s8), calc(50vw - 660px + var(--s8)));
  background-color: var(--glass-strong);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand-mark { width: 30px; height: 30px; }

/* logo hover flourish: rings glide past each other and settle swapped */
.bm-ring { transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1); transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .brand:hover .bm-ring-sky, a:hover .bm-ring-sky { transform: translateX(7px); }
  .brand:hover .bm-ring-orange, a:hover .bm-ring-orange { transform: translateX(-7px); }
}
.brand-word { font-family: var(--serif); font-size: 1.375rem; font-weight: 600; letter-spacing: -0.01em; color: var(--bone); }
.brand-word em { color: var(--orange); font-style: normal; }

.topnav { display: flex; align-items: center; gap: 2px; margin-left: var(--s2); }
.topnav a {
  position: relative;
  cursor: pointer;
  padding: 8px 14px;
  border-radius: var(--r-sm);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--taupe);
  transition: var(--t-fast);
  white-space: nowrap;
}
.topnav a:hover { color: var(--bone); background-color: rgba(var(--ov),0.05); }
.topnav a.active { color: var(--bone); }
.topnav a.active::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 1px;
  height: 2px;
  background-color: var(--amber);
  border-radius: 2px;
}
/* Events nav item: orange underline to match the orange Events page accent */
.topnav a[data-nav="community"].active::after { background-color: var(--orange); }
.topbar-spacer { flex: 1; }

/* ── Global command palette: quiet pill trigger fills the empty
   left-of-centre space, opens a centred \u2318K search overlay ── */
.cmdk-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 12px 0 14px; margin-left: var(--s2);
  min-width: 240px;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: rgba(var(--ov),0.03); color: var(--taupe);
  font-family: var(--sans); font-size: 0.8438rem; cursor: pointer;
  transition: var(--t-fast); max-width: 200px;
}
.cmdk-trigger:hover { border-color: var(--line-strong); background: rgba(var(--ov),0.06); color: var(--bone); }
.cmdk-trigger span:first-of-type { flex: 1; text-align: left; white-space: nowrap; }
.cmdk-kbd { font-family: var(--mono); font-size: 0.8125rem; font-weight: 600; color: var(--taupe-3); background: rgba(var(--ov),0.05); border-radius: 5px; padding: 2px 5px; }
@media (max-width: 1080px) { .cmdk-trigger { display: none; } }
.cmdk-scrim { position: fixed; inset: 0; z-index: 300; background: rgba(26,24,20,0.4); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: flex-start; justify-content: center; padding-top: min(14vh, 140px); animation: fadein 140ms var(--ease); }
.cmdk { width: min(640px, calc(100vw - 40px)); max-height: min(70vh, 560px); display: flex; flex-direction: column; background: var(--ink-800); border: 1px solid var(--line-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); overflow: hidden; animation: pop 160ms var(--ease); }
.cmdk-input { display: flex; align-items: center; gap: 14px; padding: 22px 24px; border-bottom: 1px solid var(--line); color: var(--taupe); flex: none; }
.cmdk-input svg { flex: none; width: 20px; height: 20px; }
.cmdk-input input { flex: 1; border: none; background: none; font-size: 1.0625rem; color: var(--bone); }
.cmdk-esc { font-family: var(--mono); font-size: 0.8125rem; font-weight: 600; color: var(--taupe-3); background: rgba(var(--ov),0.05); border-radius: 5px; padding: 3px 7px; }
.cmdk-list { overflow-y: auto; padding: var(--s2); }
.cmdk-group { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--taupe-3); padding: 12px 12px 6px; }
.cmdk-group:first-child { padding-top: 6px; }
.cmdk-item-quiet .cmdk-label { font-weight: 500; }
.cmdk-item-quiet .cmdk-ic { background: transparent; color: var(--taupe); }
.cmdk-empty { padding: 24px 12px; text-align: center; color: var(--taupe); font-size: 0.875rem; }
.cmdk-item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px 12px; border-radius: var(--r-sm); transition: var(--t-fast); }
.cmdk-item:hover { background: rgba(var(--ov),0.06); }
.cmdk-ic { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: rgba(var(--ov),0.05); color: var(--sky-deep); }
.cmdk-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.cmdk-label { font-size: 0.875rem; font-weight: 600; color: var(--bone); }
.cmdk-hint { font-size: 0.8125rem; color: var(--taupe); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-go { color: var(--taupe-3); flex: none; }

/* "Offer a service", the discreet creator entry point (Airbnb-style
   quiet text button with a soft pill on hover). Sits at the left of the
   action cluster so it reads as a peer to the account chrome, never a
   sales CTA. Consumer hero keeps all the visual weight. */
/* The single filled CTA ("Help & earn"), the one solid action in the bar,
   top-right. Orange fill so it reads as the primary invite to become a helper. */
.btn-offer {
  display: inline-flex; align-items: center;
  height: 38px; padding: 0 16px;
  border: 1.5px solid var(--orange); cursor: pointer;
  border-radius: var(--r-pill);
  font-family: var(--sans); font-size: 0.8438rem; font-weight: 600;
  background: transparent; color: var(--orange-deep); white-space: nowrap;
  box-shadow: none;
  transition: var(--t-fast);
}
.btn-offer:hover { background: var(--orange); color: #fff; border-color: var(--orange); }
.btn-offer.active { background: var(--orange); color: #fff; }
@media (max-width: 640px) { .btn-offer { display: none; } }

/* Primary guest CTA: \"Register\" — inverted primary (dark fill), matches .btn-primary elsewhere in the app */
.btn-findhelp {
  display: inline-flex; align-items: center;
  height: 40px; padding: 0 20px;
  border-radius: var(--r-pill); border: 1.5px solid var(--orange); background: none;
  color: var(--orange); font-family: var(--sans); font-size: 0.875rem; font-weight: 700;
  cursor: pointer; transition: var(--t-fast); white-space: nowrap;
}
.btn-findhelp:hover { background: rgba(246,130,31,0.08); }
@media (max-width: 640px) { .btn-findhelp { display: none; } }

/* Secondary guest link: "Apply to help" — visible, deliberately quieter than Find help */
.link-applyhelp {
  display: inline-flex; align-items: center; height: 40px; padding: 0 4px;
  font-family: var(--sans); font-size: 0.875rem; font-weight: 600;
  color: var(--bone-2); cursor: pointer; white-space: nowrap; transition: var(--t-fast);
}
.link-applyhelp:hover { color: var(--bone); text-decoration: underline; }
@media (max-width: 760px) { .link-applyhelp { display: none; } }

/* (legacy .btn-getstarted retained for reference elsewhere, no longer used in guest header) */
.btn-getstarted {
  display: inline-flex; align-items: center;
  height: 40px; padding: 0 18px;
  border-radius: var(--r-pill); border: 1px solid var(--line-strong);
  background: transparent; color: var(--bone-2);
  font-family: var(--sans); font-size: 0.875rem; font-weight: 600;
  cursor: pointer; transition: var(--t-fast);
}
.btn-getstarted:hover { background: rgba(var(--ov),0.04); border-color: var(--taupe-3); }
@media (max-width: 640px) { .btn-getstarted { display: none; } }

/* "Log in" text link (logged-out header only) */
.tb-login {
  display: inline-flex; align-items: center; height: 40px; padding: 0 12px;
  border-radius: var(--r-pill); background: none; cursor: pointer;
  font-family: var(--sans); font-size: 0.875rem; font-weight: 600;
  color: var(--bone-2); white-space: nowrap; transition: var(--t-fast);
}
.tb-login:hover { color: var(--bone); background-color: rgba(var(--ov),0.06); }

/* Language dropdown (logged-out header), scales to many languages */
.hlang { position: relative; flex-shrink: 0; }
.hlang-trigger { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px; border: 1px solid var(--line); background: rgba(var(--ov),0.03); cursor: pointer; border-radius: var(--r-pill); color: var(--bone-2); transition: var(--t-fast); }
.hlang-trigger:hover.hlang-trigger.open { border-color: var(--sky); background: var(--sky-dim); color: var(--bone); }
.hlang-trigger > svg:first-child { color: var(--sky); }
.hlang-code { font-family: var(--mono); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; }
.hlang-chev { color: var(--taupe); transition: transform var(--t-fast); }
.hlang-trigger.open .hlang-chev { transform: rotate(180deg); }
.hlang .hlang-menu { position: absolute; top: calc(100% + 8px); right: 0; left: auto; max-height: 60vh; overflow-y: auto; background-color: var(--ink-800); background-image: none; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 20px 48px -12px rgba(26,24,20,0.32), 0 2px 8px rgba(26,24,20,0.12); border: 1px solid var(--line-strong); }
.hlang .hlang-menu .lang-list { max-height: none; }
@media (max-width: 760px) { .hlang { display: none; } }

/* ── One shared notification-count badge, anchored to any
   position:relative icon container (icon-btn, bn-ic, ...) ── */
.notif-badge {
  position: absolute; top: -2px; right: -2px; z-index: 1;
  min-width: 15px; height: 15px; padding: 0 3px;
  display: grid; place-items: center;
  border-radius: var(--r-pill); background: var(--sky); color: #fff;
  font-family: var(--mono); font-size: 0.8125rem; font-weight: 700; line-height: 1;
  border: 2px solid var(--ink-800, #FAFAF8);
  box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .notif-badge { border-color: rgba(24,22,18,1); }

.topbar-actions { display: flex; align-items: center; gap: var(--s3); flex-shrink: 0; }
.icon-btn {
  position: relative;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  color: var(--taupe);
  transition: var(--t-fast);
}
.icon-btn:hover { background-color: rgba(var(--ov),0.06); color: var(--bone); transform: translateY(-1px); }
.icon-btn .dot { position: absolute; }

/* identity switcher */
.identity {
  display: flex; align-items: center; gap: 10px;
  height: 40px; padding: 0 6px 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background-color: rgba(var(--ov),0.04);
  transition: var(--t-fast);
}
.identity:hover { border-color: var(--amber-deep); background-color: var(--amber-dim); }
.identity .id-label { font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--taupe); }
.identity .id-flag { font-size: 1.125rem; line-height: 1; }
.identity .id-name { font-size: 0.875rem; font-weight: 600; color: var(--bone); }
.identity .id-av {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font-size: 0.9375rem;
  background-color: var(--forest);
}

/* dropdown */
.menu {
  position: absolute;
  top: calc(100% + 10px); right: 0;
  min-width: 260px;
  background-color: var(--glass-strong);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  box-shadow: var(--shadow-pop);
  padding: var(--s2);
  z-index: 80;
  animation: pop 160ms var(--ease);
}
@keyframes pop { from { opacity: 0; transform: translateY(-6px) scale(0.98);} to { opacity:1; transform: none; } }
.menu-head { padding: 8px 12px 6px; font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--taupe-3); }
.menu-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  padding: 9px 12px; border-radius: var(--r-sm);
  font-size: 0.875rem; color: var(--bone-2);
  transition: var(--t-fast);
}
.menu-item:hover, .menu-item.active { background-color: rgba(var(--ov),0.06); color: var(--bone); }
.menu-item.sel { background-color: var(--amber-dim); color: var(--bone); }
.menu-item.sel.active { background-color: var(--amber-dim); }
.menu-item .chk { margin-left: auto; color: var(--amber); }
.menu-flag { font-size: 1.125rem; }

/* ── Site-language / translation switcher ────────────────── */
.lang-switch .identity .id-name { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lang-menu { width: 328px; max-width: calc(100vw - 28px); padding-bottom: var(--s2); }
.lang-menu .menu-head.sub { margin-top: 2px; }
.lang-search { margin: 2px 4px 10px; height: 42px; }
.lang-list { max-height: 344px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.lang-item .li-text { display: flex; flex-direction: column; line-height: 1.22; min-width: 0; }
.lang-item .li-native { font-size: 0.9063rem; font-weight: 600; color: var(--bone); }
.lang-item .li-name { font-size: 0.8125rem; color: var(--taupe); }
.lang-item.disabled { opacity: 0.45; cursor: not-allowed; }
.lang-item.disabled:hover { background: none; }
.li-soon { font-size: 0.8125rem; font-weight: 600; color: var(--taupe-3); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; flex-shrink: 0; }
/* one shared inline "no match" empty for dropdowns, pickers & rails */
.list-empty { padding: var(--s6) var(--s4); text-align: center; font-size: 0.875rem; color: var(--taupe); line-height: 1.5; }

/* ── Loading skeletons, the one shared loading pattern ──
   Use <Skeleton>, <SkeletonCard>, <SkeletonGrid> (components.jsx). Shimmer is
   a progressive enhancement: it pauses under prefers-reduced-motion. */
.skeleton { position: relative; overflow: hidden; background: var(--ink-700); border-radius: var(--r-sm); display: block; }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent); }
[data-theme="dark"] .skeleton::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.07), transparent); }
@media (prefers-reduced-motion: no-preference) { .skeleton::after { animation: skel-shimmer 1.3s infinite; } }
@keyframes skel-shimmer { 100% { transform: translateX(100%); } }
.skel-line { height: 12px; border-radius: 6px; }
.skel-card { border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4); background: var(--ink-800); display: flex; flex-direction: column; gap: 10px; }
.skel-thumb { width: 100%; height: 120px; border-radius: var(--r); }

/* ── Account / overflow menu, single grouped control on the right ── */
.acct { position: relative; flex-shrink: 0; }
.acct-trigger {
  display: flex; align-items: center; gap: 5px;
  height: 40px; padding: 0 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background-color: rgba(var(--ov),0.04);
  color: var(--taupe);
  transition: var(--t-fast);
}
.acct-trigger:hover.acct-trigger.open { border-color: var(--amber-deep); background-color: var(--amber-dim); color: var(--bone); }
.acct-av-wrap { position: relative; display: inline-flex; flex-shrink: 0; transition: transform var(--t-fast); }
.acct-trigger:hover .acct-av-wrap { transform: scale(1.05); }
.acct-av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 1rem; background: var(--forest); }
.acct-verified-dot { position: absolute; bottom: -2px; right: -2px; width: 14px; height: 14px; border-radius: 50%; background: var(--sky-deep); color: #fff; display: grid; place-items: center; border: 2px solid var(--ink-800, #FAFAF8); }
.acct-verified-dot svg { width: 8px; height: 8px; }
.acct-chev { color: var(--taupe); transition: transform var(--t-fast); }
.acct-trigger.open .acct-chev { transform: rotate(180deg); }

.acct-menu { min-width: 250px; }
.acct-card { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 9px 12px; border-radius: var(--r-sm); transition: var(--t-fast); }
.acct-card:hover { background-color: rgba(var(--ov),0.06); }
.acct-card-av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 1.25rem; background: var(--amber-dim); border: 1px solid var(--line-faint); flex-shrink: 0; }
.acct-card-text { display: flex; flex-direction: column; min-width: 0; }
.acct-card-name { font-size: 0.9063rem; font-weight: 600; color: var(--bone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-card-loc { font-size: 0.8125rem; color: var(--taupe); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-card-trust { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; font-size: 0.8125rem; font-weight: 600; color: var(--sky-deep); }
.acct-card-trust svg { color: var(--sky-deep); }
.acct-auth { display: flex; flex-direction: column; gap: 8px; padding: 4px 4px 2px; }
.acct-auth .btn { width: 100%; }

.menu-sep { height: 1px; background: var(--line); margin: var(--s2) 8px; }
.menu-item .mi-value { margin-left: auto; font-size: 0.8125rem; color: var(--taupe); display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.menu-item > svg:first-child { color: var(--taupe); flex-shrink: 0; }
.menu-item-static { cursor: default; }
.menu-item-static:hover { background: none; color: var(--bone-2); }

/* language is reached through the account menu / drawer, never a bare top-bar trigger */
.lang-trigger { display: none; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 22px;
  border-radius: var(--r-pill);
  font-size: 0.9063rem; font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform var(--t-fast), box-shadow var(--t-fast), background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  white-space: nowrap;
}
.btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ink-900), 0 0 0 4.5px var(--amber); }
.btn-primary { background-color: var(--bone); color: #FAFAF8; box-shadow: var(--shadow-card); }
.btn-primary:hover { background: #0d0b08; transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.btn-primary:active { transform: translateY(0) scale(0.98); }
.btn-ghost { background: transparent; color: var(--bone); border: 1px solid var(--line-strong); }
.btn-ghost:hover { border-color: var(--bone-2); background-color: rgba(var(--ov),0.05); transform: translateY(-1px); }
.btn-ghost:active { transform: translateY(0); }
.btn-soft { background-color: rgba(var(--ov),0.07); color: var(--bone); }
.btn-soft:hover { background-color: rgba(var(--ov),0.12); }
/* Canonical accent variants, use these instead of hand-rolling colored
   buttons. --accent (sky) = primary brand action; --warm (orange) = create /
   events. The neutral near-black .btn-primary remains the default primary. */
.btn-accent { background-color: var(--sky); color: #FAFAF8; box-shadow: var(--shadow-card); }
.btn-accent:hover { background-color: var(--sky-deep); transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.btn-accent:active { transform: translateY(0); }
.btn-warm { background-color: var(--orange); color: #fff; box-shadow: var(--shadow-card); }
.btn-warm:hover { background-color: var(--orange-deep); transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.btn-warm:active { transform: translateY(0); }
.btn-danger { background-color: var(--clay); color: #fff; box-shadow: var(--shadow-card); }
.btn-danger:hover { background-color: #a83a6f; transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.btn-danger:active { transform: translateY(0); }
.btn-sm { height: 38px; padding: 0 16px; font-size: 0.8438rem; }

/* ── Confirm dialog (destructive actions) ──────────────── */
.confirm-modal { max-width: 440px; width: 100%; }
.confirm-modal .modal-body { text-align: center; align-items: center; gap: var(--s3); padding-top: var(--s6); }
.confirm-ic { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--clay-dim); color: var(--clay); margin-bottom: var(--s2); }
.confirm-ic-sky { background: var(--sky-dim); color: var(--sky); }
.confirm-modal .modal-foot { justify-content: center; }

/* ── Global footer ─────────────────────────────────────── */
.site-footer { border-top: 1px solid var(--line); max-width: 1320px; margin: 0 auto 0; padding: var(--s8) var(--s8) var(--s10); }
.site-footer-row { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.site-footer-brand { font-size: 1.125rem; }
.site-footer-tag { font-size: 0.8125rem; margin-left: var(--s2); }
.site-footer-meta { font-size: 0.8125rem; margin-left: auto; display: flex; align-items: center; gap: var(--s4); }
.site-footer-signout { color: var(--taupe); font-size: 0.8125rem; text-decoration: underline; text-underline-offset: 2px; }
.site-footer-signin { color: var(--sky); font-size: 0.8125rem; font-weight: 600; }

/* top-bar auth controls, desktop sign-in / signed-in avatar */
.tb-auth { display: flex; align-items: center; gap: 8px; }
.tb-account { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--amber-dim); border: 1px solid var(--line-faint); transition: var(--t-fast); }
.tb-account:hover { border-color: var(--amber-deep); transform: translateY(-1px); }
.tb-account-av { font-size: 1.25rem; line-height: 1; }
.drawer-account-guest { border-style: dashed; }
.drawer-account-guest:hover { border-style: solid; }

/* ============================================================
   ACCESS BADGES, the visual rhythm of the product
   ============================================================ */
.access {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 11px 0 9px;
  border-radius: var(--r-pill);
  font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  white-space: nowrap;
}
.access .glyph { font-size: 0.8125rem; line-height: 1; }
.access.open  { color: var(--green); background-color: var(--green-dim); border-color: rgba(26,143,227,0.30); }
.access.only  { color: var(--clay);  background-color: var(--clay-dim);  border-color: rgba(196,76,134,0.32); }
.access.led   { color: var(--led); background-color: var(--led-bg); border-color: var(--led-bd); }
.access.lg { height: 30px; font-size: 0.8125rem; padding: 0 13px 0 11px; }

/* locked overlay state on culture-only cards */
.locked-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(250,250,248,0.80), rgba(244,241,236,0.93));
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border-radius: inherit;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; padding: var(--s6);
  z-index: 4;
}
.locked-veil .lk-icon { width: 30px; height: 30px; color: var(--clay); }
.locked-veil .lk-title { font-family: var(--serif); font-size: 1.125rem; color: var(--bone); }
.locked-veil .lk-sub { font-size: 0.875rem; color: var(--taupe); max-width: 230px; }

/* ============================================================
   FLAG PILL / CHIP
   ============================================================ */
.flag-pill {
  display: inline-flex; align-items: center; gap: 8px;
  height: 30px; padding: 0 12px 0 8px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background-color: rgba(var(--ov),0.03);
  font-size: 0.8125rem; font-weight: 500; color: var(--bone-2);
}
.flag-pill .fp-flag { font-size: 1rem; line-height: 1; }

.verified {
  display: inline-flex; align-items: center; gap: 0.375rem; height: 1.625rem; padding: 0 0.625rem 0 0.5rem;
  background: var(--green-dim); color: var(--green); font-size: 0.8125rem; font-weight: 700; border-radius: var(--r-pill);
}
.verified svg { width: 14px; height: 14px; }

/* ── Unified chip system ───────────────────────────────────
   One base .chip (1.875rem tall, full pill, 0.875rem medium text,
   0.75rem horizontal padding) + four variants. Only the two
   interactive variants (filter, category) get hover/pressed/pointer;
   meta and status chips are informational, not clickable. ── */
.tag-chip { display: inline-flex; align-items: center; gap: 0.375rem; height: 1.875rem; padding: 0 0.75rem; border-radius: var(--r-pill); font-size: 0.875rem; font-weight: 600; line-height: 1; white-space: nowrap; }
.tag-chip svg { flex: none; }
.tag-chip-filter { background: var(--ink-700); color: var(--bone-2); border: 1px solid transparent; cursor: pointer; transition: var(--t-fast); }
.tag-chip-filter:hover { background: var(--line-strong); color: var(--bone); }
.tag-chip-filter:active { transform: scale(0.97); }
.tag-chip-filter.is-selected { background: var(--sky-dim); color: var(--sky-deep); border-color: color-mix(in srgb, var(--sky-deep) 30%, transparent); }
.tag-chip-filter.is-selected:hover { background: color-mix(in srgb, var(--sky-dim) 70%, var(--sky-deep) 12%); }
.tag-chip-filter.static { background: var(--sky-dim); color: var(--sky-deep); border-color: color-mix(in srgb, var(--sky-deep) 22%, transparent); cursor: default; padding-right: 0.5rem; }
.tag-chip-filter.static:hover { background: var(--sky-dim); color: var(--sky-deep); }
.tag-chip-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.1875rem; height: 1.1875rem; padding: 0 0.3125rem; margin-left: 0.4375rem; border-radius: 50%; background: var(--sky-deep); color: #fff; font-size: 0.8125rem; font-weight: 700; }
.tag-chip-meta { background: rgba(var(--ov),0.04); color: var(--taupe); border: 1.5px solid var(--line); font-weight: 500; }
.tag-chip-category { background: #fff; color: var(--cat, var(--sky-deep)); border: 1px solid var(--line); cursor: pointer; transition: var(--t-fast); }
.tag-chip-category:hover { border-color: var(--line-strong); }
.tag-chip-category svg { color: var(--cat, var(--sky-deep)); }
.tag-chip-status { font-weight: 700; border: 1px solid transparent; }
.tag-chip-status.success { background: var(--green-dim); color: var(--green); }
.tag-chip-status.danger { background: var(--danger-dim); color: var(--danger); }
.tag-chip-status.highlight { background: var(--sky-dim); color: var(--sky-deep); border-color: color-mix(in srgb, var(--sky-deep) 25%, transparent); text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.8125rem; height: 1.625rem; }

/* ── Filter / category chips ──────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 15px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background-color: rgba(var(--ov),0.025);
  font-size: 0.8438rem; font-weight: 500; color: var(--bone-2);
  transition: var(--t-fast);
}
.chip:hover { border-color: var(--line-strong); color: var(--bone); background-color: rgba(var(--ov),0.06); transform: translateY(-1px); }
.chip:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ink-900), 0 0 0 4px var(--amber); }
.chip.on { background-color: var(--bone); color: #FAFAF8; border-color: var(--bone); font-weight: 600; }
.chip .chip-flag { font-size: 0.9375rem; }
.chip .chip-ct { font-size: 0.8125rem; color: var(--taupe-3); }
.chip.on .chip-ct { color: rgba(250,250,248,0.5); }

/* ============================================================
   INPUTS
   ============================================================ */
.field {
  display: flex; align-items: center; gap: 10px;
  height: 52px; padding: 0 18px;
  border-radius: var(--r-pill);
  background-color: rgba(var(--ov),0.04);
  border: 1px solid var(--line);
  transition: var(--t-fast);
}
.field:focus-within { border-color: var(--amber-deep); background: rgba(26,143,227,0.06); }
.field svg { color: var(--taupe); flex-shrink: 0; }
.field input {
  flex: 1; min-width: 0;
  background: none; border: none; outline: none;
  color: var(--bone); font-size: 0.9375rem;
}
.field input::placeholder { color: var(--taupe-3); }
.field-label { font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--taupe); }

/* segmented control */
.seg { display: inline-flex; padding: 4px; gap: 2px; background-color: rgba(var(--ov),0.05); border: 1px solid var(--line); border-radius: var(--r-pill); }
.seg button {
  height: 40px; padding: 0 20px;
  border-radius: var(--r-pill);
  font-size: 0.875rem; font-weight: 600; color: var(--taupe);
  display: inline-flex; align-items: center; gap: 8px;
  transition: var(--t-fast);
}
.seg button:hover { color: var(--bone); }
.seg button.on { background-color: var(--amber); color: #FAFAF8; }
.seg-explain { display: flex; align-items: flex-start; gap: 9px; margin-top: 13px; font-size: 0.875rem; line-height: 1.5; color: var(--taupe); max-width: 560px; }
.seg-explain svg { flex: none; margin-top: 2px; color: var(--amber); }

/* ============================================================
   CARDS
   ============================================================ */
.card {
  position: relative;
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: var(--t);
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }

/* service card */
.svc { display: flex; flex-direction: column; }
.svc-cover {
  position: relative;
  height: 150px;
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: var(--s4);
}
.svc-cover .cat-tag {
  font-family: var(--mono); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--cat, var(--bone)); background: rgba(255,255,255,0.9);
  backdrop-filter: blur(6px);
  padding: 6px 11px; border-radius: var(--r-pill);
  border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.svc-body { padding: var(--s5); display: flex; flex-direction: column; gap: var(--s4); flex: 1; }
.svc-title { font-family: var(--serif); font-size: 1.3125rem; line-height: 1.2; color: var(--bone); font-weight: 600; letter-spacing: -0.01em; }
.svc-desc { font-size: 0.875rem; color: var(--taupe); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.provider { display: flex; align-items: center; gap: 10px; }
.provider .av {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; font-size: 0.875rem; flex-shrink: 0;
  background-color: var(--ink-700); border: 1px solid var(--line);
  position: relative; color: #FAFAF8;
}
.provider .av .av-flag { position: absolute; bottom: -3px; right: -4px; font-size: 0.875rem;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6)); }
.provider .pv-name { font-size: 0.8125rem; font-weight: 600; color: var(--bone-2); display: flex; align-items: center; gap: 5px; }
.provider .pv-meta { font-size: 0.8125rem; color: var(--taupe); }

.langs { display: flex; flex-wrap: wrap; gap: 6px; }
.lang {
  font-size: 0.8125rem; color: var(--bone-2); font-weight: 500;
  padding: 0 0.75rem; height: 1.875rem; display: inline-flex; align-items: center; border-radius: var(--r-pill);
  background-color: rgba(var(--ov),0.025); border: 1px solid var(--line);
}

.svc-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s4) var(--s5);
  border-top: 1px solid var(--line);
  margin-top: auto;
}
.price { font-family: var(--serif); font-size: 1.1875rem; color: var(--bone); font-weight: 600; }
.price small { font-size: 0.8125rem; color: var(--taupe); font-weight: 400; font-family: var(--sans); }
.rating { display: inline-flex; align-items: center; gap: 5px; font-size: 0.8125rem; color: var(--bone); font-weight: 600; }
.rating svg { width: 14px; height: 14px; color: var(--star); }
.rating .rt-ct { color: var(--taupe); font-weight: 400; }

/* event card (horizontal) */
.evt { display: grid; grid-template-columns: 96px 1fr; gap: 0; }
.evt-date {
  background-color: var(--ink-750);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: var(--s4) var(--s2);
}
.evt-date .mo { font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber); font-weight: 600; }
.evt-date .dy { font-family: var(--serif); font-size: 2rem; line-height: 1; color: var(--bone); font-weight: 600; }
.evt-date .tm { font-size: 0.8125rem; color: var(--taupe); }
.evt-body { padding: var(--s5); display: flex; flex-direction: column; gap: 10px; }
.evt-title { font-family: var(--serif); font-size: 1.125rem; line-height: 1.25; color: var(--bone); font-weight: 600; }
.evt-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; font-size: 0.8125rem; color: var(--taupe); }
.evt-meta span { display: inline-flex; align-items: center; gap: 5px; }
.evt-meta svg { width: 14px; height: 14px; }
.evt-stock { font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.02em; padding: 2px 8px; border-radius: var(--r-pill); }
.evt-stock.low { color: var(--amber); background: var(--amber-dim); }
.evt-stock.soldout { color: var(--taupe); background: var(--ink-700); }
.attendees { display: flex; align-items: center; }
.attendees .a-av {
  width: 24px; height: 24px; border-radius: 50%; margin-left: -7px;
  border: 2px solid var(--ink-800); display: grid; place-items: center; font-size: 0.8125rem;
  background-color: var(--forest);
}
.attendees .a-av:first-child { margin-left: 0; }

/* ============================================================
   LAYOUT
   ============================================================ */
.page { max-width: 1320px; margin: 0 auto; padding: 0 var(--s8) var(--s24); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s6); margin-bottom: var(--s6); }
.section-head h2 { font-family: var(--serif); font-size: 1.875rem; font-weight: 600; letter-spacing: -0.01em; color: var(--bone); }
.section-head p { font-size: 0.875rem; color: var(--taupe); margin-top: 4px; }
.see-all { font-size: 0.8438rem; font-weight: 600; color: var(--amber); display: inline-flex; align-items: center; gap: 5px; }
.see-all:hover { color: var(--amber-bright); }

.grid-svc { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s6) var(--s8); }
.grid-evt { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: var(--s6) var(--s8); }

/* empty state (unused legacy alias, kept scoped so it can't collide with
   other ".empty" class usages like calendar leading-day cells) */
.empty-state-legacy {
  grid-column: 1 / -1;
  text-align: center; padding: var(--s20) var(--s6);
  border: 1px dashed var(--line-strong); border-radius: var(--r-lg);
  color: var(--taupe);
}
.empty-state-legacy .serif { font-size: 1.375rem; color: var(--bone-2); margin-bottom: 8px; }

/* ── HERO ─────────────────────────────────────────────── */
.hero { padding: var(--s16) var(--s8) var(--s12); max-width: 1320px; margin: 0 auto; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: var(--s5); }
.hero h1 {
  font-family: var(--serif);
  font-size: clamp(40px, 5.6vw, 74px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--bone);
  max-width: 16ch;
  text-wrap: balance;
}
.hero h1 em { font-style: italic; color: var(--amber); }
.hero-sub { margin-top: var(--s6); font-size: 1.125rem; line-height: 1.6; color: var(--taupe); max-width: 46ch; }
.hs-line { display: block; text-wrap: balance; }

/* hero culture wall */
.culture-wall { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--s8); }
.culture-tile {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px 12px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background-color: rgba(var(--ov),0.03);
  transition: var(--t);
  position: relative;
}
.culture-tile:hover { border-color: var(--line-strong); background-color: rgba(var(--ov),0.06); transform: translateY(-2px); }
.culture-tile.on { background-color: var(--bone); border-color: var(--bone); }
.culture-tile .ct-flag { font-size: 1.625rem; line-height: 1; }
.culture-tile .ct-text { display: flex; flex-direction: column; line-height: 1.2; }
.culture-tile .ct-name { font-size: 0.9375rem; font-weight: 600; color: var(--bone); }
.culture-tile .ct-count { font-size: 0.8125rem; color: var(--taupe); }
.culture-tile.on .ct-name { color: #FAFAF8; }
.culture-tile.on .ct-count { color: rgba(250,250,248,0.55); }
.culture-tile.all { border-style: dashed; }
.culture-tile.all .ct-glyph {
  width: 26px; height: 26px; display: grid; place-items: center; color: var(--amber);
}

/* ── Mode switch, prominent Services / Events fork above the search bar ── */
.mode-switch { display: flex; gap: 12px; margin-top: var(--s8); margin-bottom: var(--s5); max-width: 660px; }
.mode-card {
  flex: 1; display: flex; align-items: center; gap: 14px; text-align: left;
  padding: 15px 20px; border-radius: var(--r-lg);
  border: 1px solid var(--line); background: rgba(var(--ov),0.03);
  cursor: pointer; transition: var(--t); position: relative;
}
.mode-card:hover { border-color: var(--line-strong); background: rgba(var(--ov),0.06); transform: translateY(-1px); }
.mode-ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: rgba(var(--ov),0.07); color: var(--taupe); flex-shrink: 0; transition: var(--t-fast); }
.mode-meta { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.mode-title { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; color: var(--bone); }
.mode-sub { font-size: 0.875rem; color: var(--taupe); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mode-count { font-family: var(--mono); font-size: 0.8125rem; font-weight: 500; color: var(--taupe); flex-shrink: 0; }
.mode-card.on {
  border-color: var(--amber); background: var(--amber-dim);
  box-shadow: 0 0 0 1px var(--amber), 0 12px 30px -12px rgba(26,143,227,0.55);
}
.mode-card.on .mode-ic { background: var(--amber); color: #FAFAF8; }
.mode-card.on .mode-count { color: var(--amber); }

.searchbar {
  display: flex; align-items: stretch;
  background: #FFFFFF; border: 1px solid var(--line);
  border-radius: var(--r-pill); box-shadow: var(--shadow-card);
  padding: 6px; gap: 0; position: relative; max-width: 940px; z-index: 40;
  transition: background var(--t-fast);
}
.searchbar.sb-open { background: rgba(var(--ov),0.045); }
.sb-segwrap { position: relative; display: flex; flex: 1; }
.sb-segwrap-last { flex: 1; align-items: stretch; }
/* last field's value hugs the right so it sits a consistent distance from the
   Search button, keeps equal-width columns without a dead gap before the button */
.sb-segwrap-last .sb-seg { align-items: flex-end; text-align: right; }
.sb-segwrap-last .sb-seg .sb-label.sb-segwrap-last .sb-seg .sb-value { text-align: right; width: 100%; }
.sb-seg {
  flex: 1; text-align: left; background: none; border: none; cursor: pointer;
  display: flex; flex-direction: column; gap: 3px; justify-content: center;
  padding: 12px 22px; border-radius: var(--r-pill); transition: var(--t-fast);
  min-width: 0;
}
.searchbar.sb-open .sb-seg:hover { background: rgba(var(--ov),0.06); }
.searchbar:not(.sb-open) .sb-seg:hover { background: rgba(var(--ov),0.05); }
.sb-seg.active { background: #FFFFFF !important; box-shadow: var(--shadow-card); }
.sb-label { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--taupe); }
.sb-value { font-size: 0.9375rem; font-weight: 600; color: var(--bone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-value.ph { font-weight: 500; color: var(--taupe-3); }
.sb-div { width: 1px; align-self: center; height: 30px; background: var(--line); flex-shrink: 0; }
.searchbar.sb-open .sb-seg.active + .sb-div.searchbar .sb-seg.active ~ .sb-div { }

.sb-go {
  flex-shrink: 0; align-self: center; margin-left: 6px;
  display: inline-flex; align-items: center; gap: 9px;
  height: 52px; padding: 0 22px; border: none; border-radius: var(--r-pill);
  background: var(--amber); color: #FAFAF8; cursor: pointer;
  font-size: 0.9375rem; font-weight: 600; transition: var(--t-fast);
}
.sb-go:hover { background: var(--amber-deep); transform: translateY(-1px); }
.sb-go svg { color: #FAFAF8; }
.sb-compact .sb-seg { padding: 9px 18px; }
.sb-compact .sb-go { height: 46px; padding: 0 18px; }
.sb-compact { box-shadow: var(--shadow-sm); }

/* popovers */
.sb-pop {
  position: absolute; top: calc(100% + 14px); left: 0; z-index: 60;
  background: #FFFFFF; border: 1px solid var(--line); border-radius: var(--r-lg, 18px);
  box-shadow: var(--shadow-pop, 0 18px 50px -12px rgba(20,16,10,0.30)); padding: 18px;
  min-width: 320px; animation: sbpop 150ms var(--ease);
}
.sb-segwrap-last .sb-pop.sb-pop-guests { left: auto; right: 0; }
@keyframes sbpop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.sb-pop-title { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--taupe); margin-bottom: 12px; }

.sb-input {
  display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: var(--r-pill); background: rgba(var(--ov),0.03); margin-bottom: 14px;
}
.sb-input:focus-within { border-color: var(--amber-deep); background: rgba(26,143,227,0.05); }
.sb-input svg { color: var(--taupe); flex-shrink: 0; }
.sb-input input { flex: 1; min-width: 0; background: none; border: none; outline: none; color: var(--bone); font-size: 0.9375rem; }
.sb-input input::placeholder { color: var(--taupe-3); }
.sb-clear { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: none; background: rgba(var(--ov),0.08); color: var(--taupe); cursor: pointer; flex-shrink: 0; }
.sb-clear:hover { background: rgba(var(--ov),0.14); color: var(--bone); }

.sb-cities { display: flex; flex-wrap: wrap; gap: 8px; }
.sb-city { padding: 9px 16px; border: 1px solid var(--line); border-radius: var(--r-pill); background: none; cursor: pointer; font-size: 0.875rem; font-weight: 500; color: var(--bone); transition: var(--t-fast); }
.sb-city:hover, .sb-city.active { border-color: var(--line-strong); background: rgba(var(--ov),0.05); }
.sb-city.on { background: var(--amber); border-color: var(--amber); color: #FAFAF8; }

.sb-when { display: flex; flex-wrap: wrap; gap: 8px; }
.sb-chip { padding: 10px 18px; border: 1px solid var(--line); border-radius: var(--r-pill); background: none; cursor: pointer; font-size: 0.875rem; font-weight: 500; color: var(--bone); transition: var(--t-fast); }
.sb-chip:hover { border-color: var(--line-strong); }
.sb-chip.on { background: var(--amber); border-color: var(--amber); color: #FAFAF8; }
.sb-note { font-size: 0.875rem; color: var(--taupe-3); line-height: 1.5; margin-top: 14px; }

/* When popover, two panes: quick-pick presets + month calendar */
.sb-pop-when { min-width: 560px; }
.sb-when-layout { display: flex; gap: 22px; }
.sb-when-presets { display: flex; flex-direction: column; gap: 8px; width: 176px; flex-shrink: 0; }
.sb-preset { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: rgba(var(--ov),0.03); cursor: pointer; transition: var(--t-fast); }
.sb-preset:hover { border-color: var(--line-strong); background: rgba(var(--ov),0.06); }
.sb-preset.on { border-color: var(--amber); background: var(--amber-dim); box-shadow: inset 0 0 0 1px var(--amber); }
.sb-preset-label { font-size: 0.9375rem; font-weight: 600; color: var(--bone); }
.sb-preset-sub { font-size: 0.875rem; color: var(--taupe); }
.sb-when-cal { flex: 1; min-width: 0; }

.sb-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.sb-cal-month { font-family: var(--serif); font-size: 1rem; font-weight: 500; color: var(--bone); }
.sb-cal-nav { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: none; color: var(--bone); cursor: pointer; transition: var(--t-fast); }
.sb-cal-nav:hover { border-color: var(--bone); background: rgba(var(--ov),0.06); }
.sb-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.sb-cal-wd { margin-bottom: 4px; }
.sb-cal-wd-cell { text-align: center; font-family: var(--mono); font-size: 0.8125rem; color: var(--taupe); padding: 2px 0; }
.sb-cal-cell { aspect-ratio: 1; display: grid; place-items: center; border: none; background: none; border-radius: 50%; font-size: 0.8438rem; color: var(--bone); cursor: pointer; transition: var(--t-fast); }
.sb-cal-cell.empty { cursor: default; }
.sb-cal-cell:not(.empty):hover { background: rgba(var(--ov),0.08); }
.sb-cal-cell.today { box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.sb-cal-cell.sel { background: var(--amber); color: #FAFAF8; box-shadow: none; }

.sb-cultures { display: flex; flex-direction: column; gap: 2px; max-height: 340px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--taupe-3) transparent; }
.sb-cultures::-webkit-scrollbar { width: 8px; }
.sb-cultures::-webkit-scrollbar-track { background: transparent; }
.sb-cultures::-webkit-scrollbar-thumb { background: var(--taupe-3); border-radius: 999px; border: 2px solid #FFFFFF; }
.sb-cultures::-webkit-scrollbar-thumb:hover { background: var(--taupe); }
.sb-cult-group { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--taupe); padding: 12px 12px 5px; position: sticky; top: 0; background: #FFFFFF; }
.sb-cult-group:first-child { padding-top: 4px; }
.sb-cult { display: flex; align-items: center; gap: 13px; padding: 10px 12px; border: none; border-radius: 12px; background: none; cursor: pointer; text-align: left; transition: var(--t-fast); }
.sb-cult:hover, .sb-cult.active { background: rgba(var(--ov),0.06); }
.sb-cult.on { background: rgba(26,143,227,0.10); }
.sb-cult-flag { font-size: 1.5rem; line-height: 1; flex-shrink: 0; }
.sb-cult-glyph { display: grid; place-items: center; width: 30px; height: 30px; color: var(--amber); flex-shrink: 0; }
.sb-cult-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.sb-cult-name { font-size: 0.9375rem; font-weight: 600; color: var(--bone); }
.sb-cult-sub { font-size: 0.875rem; color: var(--taupe); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-cult-chk { color: var(--amber-deep); margin-left: auto; flex-shrink: 0; }

/* ── Where: country → city location picker ──────────────── */
.sb-pop-where { min-width: 372px; }
.sb-loc-list { display: flex; flex-direction: column; gap: 2px; max-height: 348px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--taupe-3) transparent; }
.sb-loc-list::-webkit-scrollbar { width: 8px; }
.sb-loc-list::-webkit-scrollbar-track { background: transparent; }
.sb-loc-list::-webkit-scrollbar-thumb { background: var(--taupe-3); border-radius: 999px; border: 2px solid #FFFFFF; }
.sb-loc-list::-webkit-scrollbar-thumb:hover { background: var(--taupe); }
.sb-loc-group { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--taupe); padding: 12px 12px 5px; position: sticky; top: 0; background: #FFFFFF; z-index: 1; }
.sb-loc-group:first-child { padding-top: 4px; }
.sb-loc-row { display: flex; align-items: center; gap: 13px; width: 100%; padding: 11px 12px; border: none; border-radius: 12px; background: none; cursor: pointer; text-align: left; transition: var(--t-fast); }
.sb-loc-row:hover, .sb-loc-row.active { background: rgba(var(--ov),0.06); }
.sb-loc-row.on { background: rgba(26,143,227,0.10); }
.sb-loc-row.feature { background: rgba(var(--ov),0.035); border: 1px solid var(--line); margin-bottom: 6px; }
.sb-loc-row.feature:hover { border-color: var(--line-strong); background: rgba(var(--ov),0.06); }
.sb-loc-flag { font-size: 1.4375rem; line-height: 1; flex-shrink: 0; width: 28px; text-align: center; }
.sb-loc-glyph { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--amber-dim); color: var(--amber); flex-shrink: 0; }
.sb-loc-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; flex: 1; }
.sb-loc-name { font-size: 0.9375rem; font-weight: 600; color: var(--bone); }
.sb-loc-sub { font-size: 0.875rem; color: var(--taupe); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-loc-chev { color: var(--taupe-3); flex-shrink: 0; }
.sb-loc-row.on .sb-loc-chev { color: var(--amber-deep); }
.sb-loc-back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 9px 14px 9px 10px; border-radius: var(--r-pill); font-size: 0.9063rem; font-weight: 600; color: var(--bone); background: rgba(var(--ov),0.05); border: 1px solid var(--line); transition: var(--t-fast); }
.sb-loc-back:hover { border-color: var(--line-strong); background: rgba(var(--ov),0.08); }
.sb-loc-back .sb-loc-flag { font-size: 1.0625rem; width: auto; }

.sb-pop-guests { min-width: 360px; }
.sb-grow { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px 2px; }
.sb-grow.bordered { border-top: 1px solid var(--line); }
.sb-stepper { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.sb-step-text { display: flex; flex-direction: column; }
.sb-step-name { font-size: 1rem; font-weight: 600; color: var(--bone); }
.sb-step-sub { font-size: 0.875rem; color: var(--taupe); }
.sb-step-ctrl { display: flex; align-items: center; gap: 14px; }
.sb-step-btn { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-strong); background: none; color: var(--bone); cursor: pointer; transition: var(--t-fast); }
.sb-step-btn:hover:not(:disabled) { border-color: var(--bone); }
.sb-step-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.sb-step-num { min-width: 24px; text-align: center; font-size: 1.0625rem; font-weight: 600; color: var(--bone); }

@media (max-width: 920px) {
  .topnav { display: none; }
  .searchbar { flex-wrap: wrap; border-radius: var(--r-xl); }
  .sb-segwrap { flex: 1 1 45%; }
  .sb-div { display: none; }
  .sb-go { width: 100%; margin: 6px 0 0; justify-content: center; }
  .sb-pop { left: 0; right: 0; min-width: 0; }
  .sb-pop-when { min-width: 0; }
  .sb-when-layout { flex-direction: column; gap: 16px; }
  .sb-when-presets { width: auto; flex-direction: row; flex-wrap: wrap; }
  .sb-preset { flex: 1 1 44%; }
}

/* result count bar */
.resultbar { display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: var(--s4) 0; margin-bottom: var(--s5); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.resultbar .rc { font-size: 0.875rem; color: var(--taupe); }
.resultbar .rc b { color: var(--bone); font-weight: 600; }

/* sort select */
.sort {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 12px 0 15px;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  font-size: 0.8438rem; color: var(--bone-2); transition: var(--t-fast);
}
.sort:hover { border-color: var(--line-strong); background: rgba(var(--ov),0.04); }
.sort:focus-within { border-color: var(--amber-deep); }
.sort select { background: none; border: none; color: var(--bone-2); font-weight: 600; font-size: 0.8438rem; outline: none; cursor: pointer; }
.sort:hover select, .sort:focus-within select { color: var(--bone); }
.sort select option { background-color: var(--ink-800); }

/* filter rail (services) */
.svc-layout { display: grid; grid-template-columns: 264px 1fr; gap: var(--s7); align-items: start; }
.svc-main { min-height: calc(100vh - 64px - var(--s6) - var(--s6)); }
.rail {
  position: sticky; top: calc(64px + var(--s6)); display: flex; flex-direction: column; gap: 0;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--ink-800);
  box-shadow: var(--shadow-card); overflow: visible;
}
.rail-group:first-child { border-radius: var(--r-lg) var(--r-lg) 0 0; }
.rail-group:last-child { border-radius: 0 0 var(--r-lg) var(--r-lg); }
.rail-group { padding: var(--s3); }
.rail-group + .rail-group { border-top: 1px solid var(--line); }
.rail-group .rail-title { font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--taupe); margin-bottom: var(--s2); font-weight: 600; }
.rail-list { display: flex; flex-direction: column; gap: 2px; }
.rail-item {
  display: flex; align-items: center; gap: 11px;
  width: 100%; text-align: left;
  padding: 9px 8px; border-radius: var(--r-sm);
  font-size: 0.875rem; color: var(--bone-2);
  transition: var(--t-fast);
}
.rail-item:hover { background-color: rgba(var(--ov),0.05); color: var(--bone); }
.rail-item.on { background-color: var(--amber-dim); color: var(--bone); font-weight: 600; }
.rail-item svg { width: 17px; height: 17px; color: var(--taupe); flex-shrink: 0; }
.rail-item.on svg { color: var(--amber); }
.rail-item .ri-ct { margin-left: auto; font-size: 0.8125rem; color: var(--taupe-3); }
.rail-item.on .ri-ct { color: var(--amber); }

.rail-access { display: flex; flex-direction: column; gap: 8px; }
.access-toggle {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--r-sm);
  font-size: 0.8438rem; color: var(--bone-2);
  border: 1px solid transparent;
  transition: var(--t-fast); text-align: left; width: 100%;
}
.access-toggle:hover { background-color: rgba(var(--ov),0.04); }
.access-toggle .ck {
  width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--line-strong);
  display: grid; place-items: center; flex-shrink: 0; transition: var(--t-fast);
}
.access-toggle.on .ck { background-color: var(--amber); border-color: var(--amber); color: #FAFAF8; }
.access-toggle .ck svg { width: 12px; height: 12px; opacity: 0; }
.access-toggle.on .ck svg { opacity: 1; }

/* rail, location / community pickers (button + popover, reuses .sb-pop) */
.rail-pickwrap { position: relative; }
.rail-trigger {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 9px 12px; border-radius: var(--r-sm); border: 1px solid var(--line);
  background: rgba(var(--ov),0.02); font-size: 0.8438rem; color: var(--bone-2);
  transition: var(--t-fast); text-align: left;
}
.rail-trigger svg:first-child { color: var(--taupe); flex-shrink: 0; }
.rail-trigger span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-trigger .rt-chev { flex-shrink: 0; color: var(--taupe); transition: transform var(--t-fast); }
.rail-trigger:hover { border-color: var(--line-strong); color: var(--bone); }
.rail-trigger.on { border-color: var(--amber-deep); color: var(--bone); }
.rail-trigger.on .rt-chev { transform: rotate(180deg); }
.rail-pickwrap .sb-pop { top: calc(100% + 8px); min-width: 300px; }
.rail-select-wrap {
  position: relative; display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 9px 12px; border-radius: var(--r-sm); border: 1px solid var(--line);
  background: rgba(var(--ov),0.02); color: var(--taupe); font-size: 0.8438rem;
  transition: var(--t-fast); cursor: pointer;
}
.rail-select-wrap:hover { border-color: var(--line-strong); color: var(--bone); background: rgba(var(--ov),0.04); }
.rail-select-wrap:has(select:focus-visible) { border-color: var(--amber-deep); }
.rail-select-wrap > svg:first-child { color: var(--taupe); flex-shrink: 0; }
.rail-select-wrap .rt-chev { flex-shrink: 0; color: var(--taupe); pointer-events: none; }
.rail-select-wrap select {
  flex: 1; min-width: 0; appearance: none; -webkit-appearance: none; border: none;
  background: transparent; color: inherit; font: inherit; padding: 0; margin: 0;
  cursor: pointer; outline: none;
}
.rail-select-wrap select option { color: #1a1a1a; }
.rail > .btn { margin: var(--s2) var(--s5) var(--s5); }

/* breadcrumb */
.breadcrumb { display: flex; align-items: center; gap: 6px; margin-bottom: var(--s5); font-size: 0.8125rem; color: var(--taupe); flex-wrap: wrap; }
.breadcrumb svg { color: var(--taupe-3); flex-shrink: 0; }
.breadcrumb button { color: var(--taupe); transition: var(--t-fast); }
.breadcrumb button:hover { color: var(--bone); text-decoration: underline; }
.breadcrumb span[aria-current] { color: var(--bone); font-weight: 600; }

/* main-column free-text search, sits above the results toolbar */
.svc-search-row { display: flex; align-items: center; gap: 10px; margin-bottom: var(--s5); }
.svc-search-row .svc-search-input { flex: 1; margin-bottom: 0; }
.svc-search-input {
  display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px;
  border-radius: var(--r); border: 1px solid var(--line); background: rgba(var(--ov),0.02);
  margin-bottom: var(--s5); transition: var(--t-fast);
}
.svc-search-input:focus-within { border-color: var(--amber-deep); background: var(--ink-800); }
.svc-search-input svg:first-child { color: var(--taupe); flex-shrink: 0; }
.svc-search-input input { flex: 1; min-width: 0; border: none; background: none; outline: none; font-family: var(--sans); font-size: 0.9375rem; color: var(--bone); }
.svc-search-input input::placeholder { color: var(--taupe-3); }

/* secondary discovery content, pushed below the fold */
.svc-secondary { margin-top: var(--s12); padding-top: var(--s10); border-top: 1px solid var(--line); }

@media (max-width: 880px) {
  .svc-layout { grid-template-columns: 1fr; }
  .rail { position: static; flex-direction: row; flex-wrap: wrap; }
  .rail > .rail-group { flex: 1 1 220px; border-top: none !important; border-left: 1px solid var(--line); }
  .rail > .rail-group:first-child { border-left: none; }
}

/* mobile, category/location/community collapse into the Filters button,
   which sits inline with the search bar; opens a bottom sheet to edit. */
.mob-filter-btn {
  display: inline-flex; align-items: center; gap: 7px; height: 48px; padding: 0 16px;
  border-radius: var(--r); border: 1px solid var(--line-strong); background: var(--ink-800);
  font-size: 0.8438rem; font-weight: 600; color: var(--bone); flex-shrink: 0;
}
.mob-filter-btn.has-val { border-color: var(--amber-deep); }
.mob-filter-btn .mfb-count {
  display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--amber); color: #FAFAF8; font-size: 0.8125rem; font-weight: 700;
}

.mob-filter-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 2;
  max-height: 84dvh; display: flex; flex-direction: column;
  background: var(--ink-900); border-radius: 20px 20px 0 0; border: 1px solid var(--line-strong); border-bottom: none;
  box-shadow: 0 -12px 40px rgba(0,0,0,0.35);
}
.mfs-head { display: flex; align-items: center; justify-content: space-between; padding: var(--s4) var(--s4) var(--s3); font-size: 0.9375rem; font-weight: 700; color: var(--bone); }
.mfs-close { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; color: var(--taupe); }
.mfs-close:hover { background: rgba(var(--ov),0.06); color: var(--bone); }
.mfs-body { flex: 1; overflow-y: auto; padding: 0 var(--s4) var(--s4); display: flex; flex-direction: column; gap: var(--s2); }
.mfs-body .rail-pickwrap .sb-pop { position: static; margin-top: 8px; box-shadow: none; border-radius: var(--r-sm); }
.mfs-foot { display: flex; gap: 10px; padding: var(--s4) var(--s4); border-top: 1px solid var(--line); }
.mfs-foot .btn { flex: 1; }

/* toast */
.toast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
  background-color: var(--glass-strong); backdrop-filter: blur(16px);
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  padding: 12px 22px; font-size: 0.875rem; color: var(--bone);
  box-shadow: var(--shadow-pop); z-index: 200;
  display: flex; align-items: center; gap: 10px;
  animation: toastin 240ms var(--ease);
}
.toast svg { color: var(--amber); width: 18px; height: 18px; }
.ob-confirmed-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 0.8125rem; font-weight: 600; color: var(--green, #0B8A55); background: var(--green-dim, #D8F2E6); border-radius: 99px; padding: 6px 14px; margin-bottom: var(--s4); }
.ob-confirmed-badge svg { width: 15px; height: 15px; color: var(--green, #0B8A55); }
@keyframes toastin { from { opacity: 0; transform: translate(-50%, 12px);} to { opacity:1; transform: translateX(-50%);} }

/* ── Bottom tab bar, the 5 IA destinations (phone only) ── */
.bottomnav {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  height: calc(60px + env(safe-area-inset-bottom));
  padding: 0 6px env(safe-area-inset-bottom);
  background: var(--ink-800, #FFFFFF);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 24px -12px rgba(26,24,20,0.22);
}
[data-theme="dark"] .bottomnav { background: rgba(24,22,18,0.96); }
.bn-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 9px 4px 7px; color: var(--taupe); transition: var(--t-fast); min-width: 0;
}
.bn-item:hover { color: var(--bone-2); }
.bn-item.on { color: var(--amber); }
.bn-ic { position: relative; display: grid; place-items: center; height: 24px; }
.bn-label { font-family: var(--mono); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.01em; }
.bn-item.on .bn-label { font-weight: 600; }

/* ============================================================
   "YOU" HUB, sub-nav + settings
   ============================================================ */
.you-subnav-wrap {
  position: sticky; top: 58px; z-index: 30;
  background: color-mix(in srgb, var(--ink-900) 88%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.you-subnav {
  max-width: 1320px; margin: 0 auto; padding: 10px var(--s8);
  display: flex; gap: var(--s2);
}
.you-tab {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 18px; border-radius: var(--r-pill);
  font-size: 0.875rem; font-weight: 600; color: var(--taupe);
  transition: var(--t-fast); white-space: nowrap;
}
.you-tab:hover { color: var(--bone); background: rgba(var(--ov),0.05); }
.you-tab.on { background: var(--amber); color: #FAFAF8; }
.you-tab.on svg { color: #FAFAF8; }

/* settings */
.you-settings { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--s8); padding-bottom: var(--s10); }
.set-group { }
.set-group-title { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--taupe-3); margin: 0 0 12px 4px; }
.set-group-title svg { flex-shrink: 0; color: var(--amber); }
.set-card { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--ink-800); overflow: hidden; box-shadow: var(--shadow-card); transition: var(--t-fast); }
.set-card.tone-danger { border-color: rgba(196,76,134,0.35); background: var(--clay-dim); }
.set-row { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 16px 18px; border-bottom: 1px solid var(--line-soft); background: none; transition: var(--t-fast); }
.set-row:last-child { border-bottom: none; }
.set-row.tappable { cursor: pointer; }
.set-row.tappable:hover { background: rgba(var(--ov),0.045); }
.set-row.tappable:active { background: rgba(var(--ov),0.07); }
.set-row-ic { width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; background: var(--ink-750); color: var(--bone-2); box-shadow: inset 0 0 0 1px var(--line-soft); }
.set-row.danger .set-row-ic { background: rgba(196,76,134,0.16); color: var(--clay); }
.set-row.danger .set-row-title { color: var(--clay); }
.set-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.set-row-title { font-size: 0.9375rem; font-weight: 600; color: var(--bone); }
.set-row-sub { font-size: 0.875rem; color: var(--taupe); }
.set-row-go { color: var(--taupe-3); flex-shrink: 0; transition: var(--t-fast); }
.set-row.tappable:hover .set-row-go { color: var(--amber); transform: translateX(2px); }

.set-toggle { width: 46px; height: 28px; border-radius: 999px; background: var(--ink-700); flex-shrink: 0; padding: 3px; transition: var(--t-fast); box-shadow: inset 0 0 0 1px var(--line-soft); }
.set-toggle.on { background: var(--verify); }
.set-knob { display: block; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: transform var(--t-fast); }
.set-toggle.on .set-knob { transform: translateX(18px); }

.set-seg { display: inline-flex; gap: 3px; padding: 3px; border-radius: var(--r-pill); background: var(--ink-750); border: 1px solid var(--line); flex-shrink: 0; }
.set-seg button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: var(--r-pill); font-size: 0.8125rem; font-weight: 600; color: var(--taupe); transition: var(--t-fast); }
.set-seg button.on { background: var(--ink-800); color: var(--bone); box-shadow: var(--shadow-sm); }

.set-signout { display: inline-flex; align-items: center; justify-content: center; gap: 9px; align-self: center; height: 48px; padding: 0 28px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); color: var(--bone-2); font-size: 0.9063rem; font-weight: 600; transition: var(--t-fast); }
.set-signout:hover { border-color: var(--clay); color: var(--clay); background: var(--clay-dim); }
.set-foot { text-align: center; font-family: var(--mono); font-size: 0.8125rem; color: var(--taupe-3); letter-spacing: 0.06em; }

@media (max-width: 640px) {
  .you-subnav-wrap { top: 58px; }
  .you-subnav { padding: 8px var(--s4); overflow-x: auto; scrollbar-width: none; }
  .you-subnav::-webkit-scrollbar { display: none; }
  .you-tab { padding: 0 14px; flex-shrink: 0; }
}

/* fade-in for feed, resting state is always visible so cards never get
   stranded at opacity:0 if the entrance animation is skipped (reduced motion,
   throttled/background tabs). Animation is a progressive enhancement. */
.fadein { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .fadein { animation: fadein 320ms var(--ease) both; }
}
/* Transform-only entrance: opacity is never animated, so a card can never be
   stranded transparent if the clock is throttled (a "running-but-frozen"
   animation would otherwise show the from-frame). Worst case = +10px offset,
   always fully visible. */
@keyframes fadein { from { transform: translateY(10px); } to { transform: none; } }

/* ============================================================
   GROUP CARD
   ============================================================ */
.grid-grp { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--s5); }
.grp { display: flex; flex-direction: column; }
.grp-top {
  position: relative; padding: var(--s5);
  display: flex; align-items: flex-start; gap: 14px;
  border-bottom: 1px solid var(--line);
}
.grp-emblem {
  width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 1.625rem;
  border: 1px solid var(--line-strong);
}
.grp-head { flex: 1; min-width: 0; }
.grp-name { font-family: var(--serif); font-size: 1.1875rem; font-weight: 600; color: var(--bone); line-height: 1.2; }
.grp-sub { font-size: 0.875rem; color: var(--taupe); margin-top: 3px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.grp-body { padding: var(--s5); display: flex; flex-direction: column; gap: 14px; flex: 1; }
.grp-desc { font-size: 0.875rem; color: var(--bone-2); line-height: 1.55; }
.grp-stats { display: flex; align-items: center; gap: 18px; font-size: 0.8125rem; color: var(--taupe); }
.grp-stats span { display: inline-flex; align-items: center; gap: 6px; }
.grp-stats svg { width: 14px; height: 14px; }
.grp-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: var(--s4) var(--s5); border-top: 1px solid var(--line); margin-top: auto; }
.member-stack { display: flex; align-items: center; }
.member-stack .m-av {
  width: 26px; height: 26px; border-radius: 50%; margin-left: -8px;
  border: 2px solid var(--ink-800); display: grid; place-items: center; font-size: 0.8125rem; color: #FAFAF8;
}
.member-stack .m-av:first-child { margin-left: 0; }

/* sub-nav segmented (events/groups) */
.subnav { display: inline-flex; gap: 4px; padding: 4px; background-color: rgba(var(--ov),0.05); border: 1px solid var(--line); border-radius: var(--r-pill); }
.subnav button {
  height: 40px; padding: 0 20px; border-radius: var(--r-pill);
  font-size: 0.875rem; font-weight: 600; color: var(--taupe);
  display: inline-flex; align-items: center; gap: 8px; transition: var(--t-fast);
}
.subnav button:hover { color: var(--bone); }
.subnav button.on { background-color: var(--bone); color: #FAFAF8; }

/* filter bar pills (access + date) */
.filterbar { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: var(--s6); }
.filtergroup { display: flex; align-items: center; gap: 8px; }
.filtergroup .fg-label { font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--taupe-3); margin-right: 2px; }
.pill {
  height: 34px; padding: 0 14px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background-color: rgba(var(--ov),0.03);
  font-size: 0.8125rem; font-weight: 500; color: var(--bone-2);
  display: inline-flex; align-items: center; gap: 6px; transition: var(--t-fast);
}
.pill:hover { border-color: var(--line-strong); color: var(--bone); }
.pill.on { background-color: var(--amber-dim); border-color: rgba(26,143,227,0.5); color: var(--amber); font-weight: 600; }
.pill.on.g-open { background-color: var(--green-dim); border-color: rgba(26,143,227,0.5); color: var(--green); }
.pill.on.g-only { background-color: var(--clay-dim); border-color: rgba(196,76,134,0.5); color: var(--clay); }

/* ============================================================
   DETAIL MODAL
   ============================================================ */
.scrim {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(26, 24, 20, 0.42);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: var(--s12) var(--s5); overflow-y: auto;
  animation: fadein 200ms var(--ease);
}
.modal {
  width: 100%; max-width: 720px;
  max-height: calc(100dvh - 96px);
  display: flex; flex-direction: column;
  background-color: var(--ink-800);
  border: 1px solid var(--line-strong); border-radius: var(--r-xl);
  box-shadow: var(--shadow-pop); overflow: hidden;
  animation: modalin 240ms var(--ease);
}
@keyframes modalin { from { opacity: 0; transform: translateY(18px) scale(0.985);} to { opacity: 1; transform: none; } }
.modal-cover { position: relative; flex: none; height: auto; display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; background: var(--grad-card-band); border-bottom: 1px solid var(--line-faint); }
/* the checkout flow's cover is unified navigation chrome, not a themed hero, 
   match the listing page's top bar so Back reads as one continuous flow */
.modal-cover.modal-back-cover {
  background: color-mix(in srgb, var(--ink-900) 86%, transparent);
  backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px);
}
.modal-cover .cat-badge { position: static; }
.modal-cover .mc-flag { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 2.5rem; line-height: 1; opacity: 0.16; pointer-events: none; }
.modal-close {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  position: relative; z-index: 1;
  background: rgba(255,255,255,0.85); border: 1px solid var(--line); color: var(--bone); transition: var(--t-fast); box-shadow: var(--shadow-sm);
}
.modal-close:hover { background: #FFFFFF; color: var(--bone); }
.confirm-modal .modal-close { position: absolute; top: 14px; right: 14px; z-index: 5; }
.btn-link { background: none; border: none; color: var(--bone-2); font-size: 0.875rem; text-decoration: underline; cursor: pointer; padding: var(--s2); }
.btn-link:hover { color: var(--bone); }
.modal-cover .modal-back { position: relative; z-index: 1; }
.modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--s5) var(--s6); display: flex; flex-direction: column; gap: var(--s4); }
.modal-title { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; line-height: 1.16; color: var(--bone); }
.modal-prose { font-size: 0.9063rem; line-height: 1.55; color: var(--bone-2); }
.co-item-title { font-weight: 600; color: var(--bone); margin-top: -8px; }
.modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.mfact { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); background-color: rgba(var(--ov),0.02); }
.mfact .mf-label { font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--taupe-3); margin-bottom: 6px; }
.mfact .mf-value { font-size: 0.9375rem; color: var(--bone); font-weight: 600; display: flex; align-items: center; gap: 8px; }
.modal-foot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: 14px var(--s6); border-top: 1px solid var(--line); background-color: var(--ink-850); }

/* ── Filmstrip: switch between listings without closing ── */
.scrim.has-strip { padding-bottom: 152px; align-items: flex-start; }
.modal-navcount { position: absolute; top: 14px; left: 18px; z-index: 3; font-family: var(--mono); font-size: 0.8125rem; font-weight: 600; color: var(--sky-deep); background: rgba(255,255,255,0.7); padding: 3px 10px; border-radius: 999px; backdrop-filter: blur(4px); }
.modal-navcount span { color: var(--taupe); }
.film-arrow { position: fixed; top: calc(50% - 76px); transform: translateY(-50%); z-index: 160; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--ink-800); color: var(--bone); border: 1px solid var(--line-strong); box-shadow: var(--shadow-pop); cursor: pointer; transition: var(--t-fast); }
.film-arrow:hover:not(:disabled) { background: var(--sky); color: #fff; border-color: var(--sky); transform: translateY(-50%) scale(1.06); }
.film-arrow:disabled { opacity: 0.3; cursor: default; }
.film-arrow.left { left: max(16px, calc(50% - 660px)); }
.film-arrow.right { right: max(16px, calc(50% - 660px)); }
.film-strip { position: fixed; left: 0; right: 0; bottom: 0; z-index: 160; display: flex; gap: 12px; padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px)); overflow-x: auto; background: linear-gradient(180deg, transparent, rgba(26,24,20,0.14) 40%); scrollbar-width: none; }
.film-strip::-webkit-scrollbar { display: none; }
.fs-card { flex: none; width: 268px; display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: var(--r-lg); background: var(--ink-800); border: 1px solid var(--line); box-shadow: var(--shadow-card); cursor: pointer; transition: var(--t-fast); text-align: left; scroll-snap-align: center; }
.fs-card:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.fs-card.on { border-color: var(--sky); box-shadow: 0 0 0 2px var(--sky), var(--shadow-card); }
.fs-av { position: relative; width: 42px; height: 42px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 0.875rem; background-size: cover; background-position: center; }
.fs-flag { position: absolute; bottom: -2px; right: -3px; font-size: 0.8125rem; line-height: 1; border-radius: 3px; box-shadow: 0 0 0 2px var(--ink-800); }
.fs-text { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fstrip-title { font-size: 0.8125rem; font-weight: 600; color: var(--bone); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-meta { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; font-weight: 700; color: var(--bone); }
.fs-meta small { font-weight: 500; color: var(--taupe); }
.fs-rate { display: inline-flex; align-items: center; gap: 3px; font-size: 0.8125rem; font-weight: 600; color: var(--taupe); }
.fs-rate svg { color: var(--amber); }
@media (max-width: 760px) {
  .film-arrow { display: none; }
  .scrim.has-strip { padding-bottom: 128px; }
  .fs-card { width: 220px; }
}
.modal-locknote { display: flex; align-items: center; gap: 11px; padding: 14px 16px; border: 1.5px solid rgba(196,76,134,0.42); background-color: var(--clay-dim); border-radius: var(--r); color: var(--clay); font-size: 0.9375rem; font-weight: 600; line-height: 1.45; }
.modal-locknote svg { flex-shrink: 0; }
.modal-booked { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r); background-color: var(--green-dim); color: var(--bone); font-size: 0.875rem; font-weight: 600; line-height: 1.45; margin-bottom: var(--s4); }
.modal-booked svg { flex-shrink: 0; color: var(--green); }

@media (max-width: 560px) { .modal-grid { grid-template-columns: 1fr; } }

/* supporter / pay step */
.pay-badge { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--amber); background: var(--amber-dim); border: 1px solid var(--line);
  padding: 5px 11px; border-radius: var(--r-pill); }
.pay-fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.pay-note { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r);
  background-color: rgba(var(--ov),0.02); }
.pay-msg { font-family: var(--serif); font-size: 1rem; line-height: 1.5; color: var(--bone); margin-top: 7px; }
.paylink { align-self: flex-start; font-size: 0.8125rem; font-weight: 600; color: var(--taupe);
  text-decoration: underline; text-underline-offset: 3px; transition: var(--t-fast); }
.paylink:hover { color: var(--bone); }
@media (max-width: 560px) { .pay-fields { grid-template-columns: 1fr; } }

/* ============================================================
   CREATE PAGE
   ============================================================ */
.create-layout { display: grid; grid-template-columns: 1fr 416px; gap: var(--s10); align-items: start; }
.form-panel { display: flex; flex-direction: column; gap: var(--s8); }
.form-section { display: flex; flex-direction: column; gap: var(--s4); }
.fs-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.fs-num { font-family: var(--serif); font-size: 0.9375rem; color: var(--amber); font-weight: 600; white-space: nowrap; }
.fs-title { font-family: var(--serif); font-size: 1.25rem; color: var(--bone); font-weight: 600; white-space: nowrap; }
.fs-hint { font-size: 0.8125rem; color: var(--taupe); }

.form-label { font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--taupe); margin-bottom: 8px; display: block; }
.form-label .req { color: var(--clay); margin-left: 3px; }

.input, .textarea, .select {
  width: 100%; background-color: rgba(var(--ov),0.04);
  border: 1.5px solid var(--line); border-radius: var(--r-lg);
  color: var(--bone); font-size: 0.9375rem; font-family: var(--sans);
  transition: var(--t-fast); outline: none;
}
.input:hover, .textarea:hover, .select:hover { border-color: var(--line-strong); }
.input { height: 50px; padding: 0 16px; }
/* Native date/time popups: rebrand the selection from generic OS-blue to the
   platform's warm ink, and make the picker icon/scheme follow the theme so the
   calendar/clock blends with the rest of the UI. */
input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] {
  accent-color: #26241f; color-scheme: light;
}
:root[data-theme="dark"] input[type="date"],
:root[data-theme="dark"] input[type="time"],
:root[data-theme="dark"] input[type="datetime-local"],
:root[data-theme="dark"] input[type="month"] {
  accent-color: var(--sky); color-scheme: dark;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  opacity: 0.55; cursor: pointer; transition: opacity var(--t-fast);
}
input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="time"]:hover::-webkit-calendar-picker-indicator { opacity: 0.9; }
.textarea { padding: 14px 16px; min-height: 104px; resize: vertical; line-height: 1.55; }
.select { height: 50px; padding: 0 44px 0 16px; cursor: pointer; appearance: none;
  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='%235C5751' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; }
.input::placeholder.textarea::placeholder { color: var(--taupe-3); }
.input:focus.textarea:focus.select:focus { border-color: var(--amber-deep); background: rgba(26,143,227,0.06); }
/* inline validation, paired with the enabled-button "flag the gap" pattern */
.input-bad.input-bad:focus { border-color: var(--clay); background: var(--clay-dim); }
.field-error { display: block; margin-top: 6px; font-size: 0.8125rem; color: var(--clay); font-weight: 500; }
.field-error.ob-gap { margin: var(--s3) 0 0; }
.rc-reset { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 0.8125rem; font-weight: 600; color: var(--taupe); border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: 6px 12px; transition: var(--t-fast); }
.rc-reset:hover { color: var(--clay); border-color: var(--clay); background: var(--clay-dim); }
.btn[aria-disabled="true"] { opacity: 0.6; }
.select option { background-color: var(--ink-800); color: var(--bone); }
:root[data-theme="dark"] .select { 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='%239C9486' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.char-count { font-size: 0.8125rem; color: var(--taupe-3); text-align: right; margin-top: 6px; }

/* culture select as flag pills */
.culture-select { display: flex; flex-wrap: wrap; gap: 9px; }
.culture-select .cs-opt {
  display: inline-flex; align-items: center; gap: 9px;
  height: 44px; padding: 0 16px 0 12px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background-color: rgba(var(--ov),0.03);
  font-size: 0.875rem; font-weight: 500; color: var(--bone-2); transition: var(--t-fast);
}
.culture-select .cs-opt:hover { border-color: var(--line-strong); color: var(--bone); }
.culture-select .cs-opt.on { background-color: var(--bone); color: #FAFAF8; border-color: var(--bone); font-weight: 600; }
.culture-select .cs-flag { font-size: 1.1875rem; }

/* access-level picker, the signature control */
.access-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.access-opt {
  position: relative; text-align: left;
  padding: 18px 16px 16px; border-radius: var(--r-lg);
  border: 1.5px solid var(--line); background-color: rgba(var(--ov),0.02);
  transition: var(--t); cursor: pointer;
  display: flex; flex-direction: column; gap: 8px;
}
.access-opt:hover { border-color: var(--line-strong); background-color: rgba(var(--ov),0.05); }
.access-opt .ao-glyph {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  font-size: 1.125rem; border: 1px solid var(--line); transition: var(--t-fast);
}
.access-opt .ao-title { font-size: 0.9375rem; font-weight: 600; color: var(--bone); }
.access-opt .ao-desc { font-size: 0.875rem; color: var(--taupe); line-height: 1.45; }
.access-opt .ao-radio {
  position: absolute; top: 16px; right: 16px;
  width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line-strong);
  display: grid; place-items: center; transition: var(--t-fast);
}
.access-opt .ao-radio::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: transparent; transition: var(--t-fast); }
.access-opt.on.v-open  { border-color: var(--green); background-color: var(--green-dim); }
.access-opt.on.v-led   { border-color: var(--led); background-color: var(--led-bg); }
.access-opt.on.v-only  { border-color: var(--clay);  background-color: var(--clay-dim); }
.access-opt.on.v-open  .ao-radio { border-color: var(--green); } .access-opt.on.v-open  .ao-radio::after { background-color: var(--green); }
.access-opt.on.v-led   .ao-radio { border-color: var(--led); } .access-opt.on.v-led   .ao-radio::after { background-color: var(--led); }
.access-opt.on.v-only  .ao-radio { border-color: var(--clay);  } .access-opt.on.v-only  .ao-radio::after { background-color: var(--clay); }
.access-opt.on.v-open  .ao-glyph { border-color: var(--green); background-color: var(--green-dim); }
.access-opt.on.v-led   .ao-glyph { border-color: var(--led); background-color: var(--led-bg); }
.access-opt.on.v-only  .ao-glyph { border-color: var(--clay);  background-color: var(--clay-dim); }

/* preview rail */
.preview-rail { position: sticky; top: 84px; display: flex; flex-direction: column; gap: var(--s4); }
.preview-rail .pr-label { font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--taupe); display: flex; align-items: center; gap: 8px; }
.preview-rail .pr-label .live { width: 7px; height: 7px; border-radius: 50%; background-color: var(--green); box-shadow: 0 0 0 4px var(--green-dim); }
.publish-bar { display: flex; align-items: center; gap: 14px; margin-top: var(--s4); }
.publish-bar .pb-note { font-size: 0.875rem; color: var(--taupe); }

.btn[disabled] { opacity: 0.4; pointer-events: none; }

@media (max-width: 980px) {
  .create-layout { grid-template-columns: 1fr; }
  .preview-rail { position: static; }
  .access-picker { grid-template-columns: 1fr; }
}

/* ============================================================
   PROFILE PAGE v2, cover-band hero + warm tinted bands.
   ============================================================ */
.pf3-page { max-width: 1200px; }
.pf3-preview-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); background: var(--sky-dim); border: 1px solid rgba(26,143,227,0.3); border-radius: var(--r); padding: 10px 16px; margin-bottom: var(--s5); font-size: 0.875rem; font-weight: 600; color: var(--sky-deep); }
.pf3-preview-bar span { display: inline-flex; align-items: center; gap: 8px; }

.pf4-page { max-width: 1180px; }

.pf4-hero { position: relative; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--ink-800); box-shadow: var(--shadow-card); overflow: hidden; margin-bottom: var(--s6); }
.pf4-cover { height: 132px; background: var(--grad-card-band); }
.pf4-cover image-slot { --slot-empty-bg: transparent; }
.pf4-actions-flow { position: absolute; top: var(--s5); right: var(--s6); left: auto; margin: 0 !important; padding: 0 !important; border: none !important; justify-content: flex-end; z-index: 2; }
.pf4-hero-body { position: relative; padding: 0 var(--s8) var(--s7); display: flex; align-items: flex-start; gap: var(--s6); }
.pf4-avatar-wrap { position: relative; width: 116px; height: 116px; flex: none; margin-top: -58px; border-radius: 50%; border: 5px solid var(--ink-800); box-shadow: var(--shadow-lg); background: var(--ink-700); }
.pf4-avatar-check { position: absolute; bottom: -2px; right: -2px; width: 28px; height: 28px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; border: 3px solid var(--ink-800); z-index: 1; }
.pf4-hero-info { flex: 1; min-width: 0; padding-top: var(--s4); }
.pf4-role-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; font-weight: 700; color: var(--sky-deep); background: var(--sky-dim); padding: 4px 11px; border-radius: var(--r-pill); margin-bottom: 10px; }
.pf4-name { font-family: var(--serif); font-size: clamp(26px, 3vw, 32px); font-weight: 600; letter-spacing: -0.015em; color: var(--bone); line-height: 1.1; margin-top: var(--s2); }
.pf4-trust-zone { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: var(--s4); }
.pf4-rating { display: inline-flex; align-items: center; gap: 5px; font-size: 1rem; font-weight: 700; color: var(--bone-2); }
.pf4-rating svg { color: var(--star); }
.pf4-rating small { color: var(--taupe); font-weight: 500; }
.pf4-headline { font-size: 1.0625rem; color: var(--taupe); margin-top: 4px; }
.pf4-hero-bio { font-size: 0.9375rem; line-height: 1.55; color: var(--bone-2); margin: var(--s3) 0 0; max-width: 640px; }
.pf4-meta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: var(--s5); font-size: 0.875rem; color: var(--taupe); }
.pf4-meta span { display: inline-flex; align-items: center; gap: 6px; }
.pf4-badges { display: flex; gap: 10px; flex-wrap: wrap; }
.pf4-hero-stats { display: flex; gap: var(--s5); flex-wrap: wrap; margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line); }
.pf4-hstat { display: flex; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--taupe); }
.pf4-hstat svg { color: var(--tone); flex: none; }
.pf4-hstat b { color: var(--bone); font-weight: 700; font-size: 0.9375rem; }
.pf4-badge { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: var(--r-pill); font-size: 0.8125rem; font-weight: 700; background: rgba(var(--ov),0.04); border: 1px solid var(--line); color: var(--taupe-3); }
.pf4-badge.on { background: var(--green-dim); color: var(--green); border-color: rgba(11,138,85,0.28); }
.pf4-badge:not(.on) svg { opacity: 0.4; }
.pf4-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--line); }
.pf4-act { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: var(--r-pill); background: rgba(255,255,255,0.92); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,0.5); color: #262220; font-size: 0.8438rem; font-weight: 600; transition: var(--t-fast); box-shadow: 0 2px 10px -4px rgba(0,0,0,0.35); }
.pf4-act:hover { background: #fff; color: #0d0b08; }
.pf4-act.primary { background: var(--bone); color: #FAFAF8; border-color: var(--bone); }
.pf4-act.primary:hover { background: #0d0b08; }
.pf4-avail-pill { box-shadow: 0 2px 10px -4px rgba(0,0,0,0.35); display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: var(--r-pill); background: var(--green-dim); color: var(--green); font-size: 0.8125rem; font-weight: 700; }
.pf4-avail-pill .pf4-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }

.pf4-row { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--s5); margin-bottom: var(--s6); align-items: stretch; }
.pf4-card { border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--ink-800); padding: var(--s6); box-shadow: var(--shadow-sm); }
.pf4-card-title { font-family: var(--serif); font-size: 1.1875rem; font-weight: 600; color: var(--bone); letter-spacing: -0.01em; }


.pf4-complete-card { display: flex; flex-direction: column; align-items: flex-start; }
.pf4-comp-head { display: flex; align-items: flex-start; justify-content: space-between; width: 100%; gap: var(--s4); }
.pf4-comp-head .pf4-comp-sub { margin: 4px 0 0; }
.pf4-comp-ring { position: relative; width: 62px; height: 62px; flex: none; }
.pf4-comp-ring svg circle:last-child { transition: stroke-dashoffset 0.5s var(--ease, ease); }
.pf4-comp-ring span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; line-height: 1; font-size: 1.0625rem; font-weight: 700; color: var(--bone); }
.pf4-comp-sub { font-size: 0.8125rem; color: var(--taupe); margin: 4px 0 var(--s4); }
.pf4-comp-list { display: flex; flex-direction: column; gap: 10px; width: 100%; padding-top: var(--s3); border-top: 1px solid var(--line); }
.pf4-hero-complete { display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--line); }
.pf4-comp-ring-sm { width: 44px; height: 44px; }
.pf4-comp-ring-sm span { font-size: 0.8125rem; }
.pf4-hero-complete-text { display: flex; flex-direction: column; line-height: 1.35; }
.pf4-hero-complete-text b { font-size: 0.875rem; color: var(--bone); }
.pf4-hero-complete-text span { font-size: 0.8125rem; color: var(--taupe); }
.pf4-hero-complete .pf4-comp-list { flex-direction: row; width: auto; flex: 1; padding-top: 0; border-top: none; flex-wrap: wrap; gap: 14px; }
.pf4-hero-complete .pf4-comp-btn { margin-left: auto; }
.pf4-tc { display: flex; flex-direction: column; gap: var(--s5); }
.tc-head { display: flex; align-items: center; gap: var(--s4); }
.tc-ring-wrap { position: relative; flex: none; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }
.tc-ring { transition: stroke-dashoffset 0.6s var(--ease, ease); }
.tc-ring-num { position: absolute; font-family: var(--serif); font-size: 1.125rem; font-weight: 700; color: var(--bone); }
.tc-head-text { flex: 1; min-width: 0; }
.tc-sub { font-size: 0.8125rem; color: var(--taupe); margin: 2px 0 0; }
.tc-level-chip { display: inline-flex; margin-top: 8px; font-size: 0.8125rem; font-weight: 700; color: var(--sky-deep); background: var(--sky-dim); border-radius: 999px; padding: 3px 10px; text-transform: uppercase; letter-spacing: 0.04em; }
.tc-signals { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; color: var(--taupe); margin: -8px 0 0; }
.tc-signals span { opacity: 0.6; }
.tc-benefits { display: flex; flex-wrap: wrap; gap: 8px; }
.tc-factors { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--line); }
.tc-factor { display: flex; flex-direction: column; gap: 6px; }
.tc-factor-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; font-size: 0.8438rem; font-weight: 600; color: var(--bone); }
.tc-factor-name { display: inline-flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.tc-factor-top svg { color: var(--sky-deep); flex: none; }
.tc-factor-top b { font-size: 0.8125rem; font-weight: 700; color: var(--taupe); flex: none; }
.tc-bar { height: 5px; border-radius: 3px; background: var(--ink-700); overflow: hidden; }
.tc-bar span { display: block; height: 100%; background: var(--sky); border-radius: 3px; transition: width 0.4s var(--ease, ease); }
.tc-factor-sub { font-size: 0.8125rem; color: var(--taupe); line-height: 1.4; min-height: 2.8em; }
.tc-owner { display: flex; align-items: center; justify-content: space-between; gap: var(--s5); flex-wrap: wrap; padding-top: var(--s5); border-top: 1px solid var(--line); }
.tc-endorse { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }
.tc-endorse-text { display: flex; flex-direction: column; line-height: 1.35; }
.tc-endorse-text b { font-size: 0.8438rem; color: var(--bone); }
.tc-endorse-text span { font-size: 0.8125rem; color: var(--taupe); }
.tc-factors-toggle { display: flex; }
.tc-toggle-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; padding: 0; font-size: 0.8125rem; font-weight: 600; color: var(--sky-deep); cursor: pointer; }
.tc-next { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; background: var(--sky-dim); border: 1px solid color-mix(in srgb, var(--sky) 25%, transparent); border-radius: var(--radius-lg, 14px); padding: var(--s4) var(--s5); }
.tc-next.done { background: var(--green-dim); border-color: color-mix(in srgb, var(--green) 25%, transparent); }
.tc-next.review { background: var(--orange-dim); border-color: color-mix(in srgb, var(--orange) 25%, transparent); }
.tc-next-ic { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ink-800); color: var(--sky-deep); flex: none; }
.tc-next.done .tc-next-ic { color: var(--green); }
.tc-next.review .tc-next-ic { color: var(--orange-deep); }
.tc-next-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 200px; }
.tc-next-label { font-size: 0.8125rem; font-weight: 700; color: var(--sky-deep); text-transform: uppercase; letter-spacing: 0.05em; }
.tc-next-text b { font-size: 0.9375rem; color: var(--bone); }
.tc-next-sub { font-size: 0.8125rem; color: var(--taupe); }
.tc-next-pts { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; color: var(--green); line-height: 1; flex: none; }
.tc-next-pts span { font-size: 0.8125rem; font-weight: 500; color: var(--taupe); margin-left: 2px; }
.vm-trust-row { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: -4px 0 var(--s4); }
.vm-trust-row span { display: inline-flex; align-items: center; gap: 5px; font-size: 0.8125rem; color: var(--taupe); }
.vm-heritage-pick { display: flex; flex-direction: column; gap: 6px; margin: var(--s4) 0 0; animation: vm-fadein 0.3s var(--ease, ease); }
@keyframes vm-fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.vm-heritage-pick .sb-cultures { max-height: 160px; }
.vm-heritage-pick .cf { max-width: none; position: relative; z-index: 5; }
.vm-heritage-pick .sb-pop { position: fixed; left: 50%; right: auto; top: auto; bottom: 16px; transform: translateX(-50%); width: min(482px, calc(100vw - 32px)); min-width: 0; max-height: min(60vh, 420px); overflow-y: auto; margin: 0; z-index: 500; }
.tc-cel-scrim { display: flex; align-items: center; justify-content: center; }
.tc-cel-modal { max-width: 380px; padding: var(--s7) var(--s6); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s3); }
.tc-cel-badge { width: 56px; height: 56px; border-radius: 50%; background: var(--green-dim); color: var(--green); display: grid; place-items: center; }
.tc-cel-title { font-family: var(--serif); font-size: 1.375rem; font-weight: 600; color: var(--bone); }
.tc-cel-sub { font-size: 0.875rem; color: var(--taupe); line-height: 1.5; }
.tc-cel-list { display: flex; flex-direction: column; gap: 8px; align-self: stretch; text-align: left; margin: var(--s2) 0; }
.tc-cel-list li { display: flex; align-items: center; gap: 8px; font-size: 0.8438rem; color: var(--bone-2); }
.tc-cel-list svg { color: var(--green); flex: none; }
.pf4-comp-item { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8438rem; color: var(--taupe); }
.pf4-comp-item.done { color: var(--bone-2); }
.pf4-comp-item svg { color: var(--green); }
.pf4-comp-dot { width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--line-strong); flex: none; }
.pf4-comp-btn { margin-top: var(--s5); width: 100%; }

.pf4-row-stats { grid-template-columns: 1.6fr 1fr; }
.pf4-row-stats-solo { grid-template-columns: 1fr; }
.pf4-row-trust { grid-template-columns: 1fr 1.9fr; align-items: stretch; }
.pf4-row-trust.pf4-row-stats-solo { grid-template-columns: 1fr; }
.pf4-row-trust .pf4-complete-card { height: 100%; }

.pf4-featured-card { display: flex; flex-direction: column; }
.pf4-feat-body { display: flex; flex-direction: column; flex: 1; }
.pf4-feat-img { position: relative; height: 108px; border-radius: var(--r-lg); margin: var(--s3) 0 var(--s4); display: flex; align-items: flex-start; justify-content: space-between; padding: var(--s3); }
.pf4-feat-title { font-size: 0.9375rem; font-weight: 700; color: var(--bone); line-height: 1.35; margin-bottom: var(--s4); flex: 1; }
.pf4-feat-foot { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s4); }
.pf4-feat-btn { width: 100%; }

.pf4-trust-card { margin-bottom: var(--s6); }
.pf4-tl { display: flex; align-items: flex-start; margin-top: var(--s6); }
.pf4-tl-item { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; min-width: 0; padding: 0 var(--s2); }
.pf4-tl-dot { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--tone-dim, rgba(var(--ov),0.05)); color: var(--tone, var(--taupe)); flex: none; border: 1.5px solid transparent; }
.pf4-tl-dot.done { border-color: var(--tone); }
.pf4-tl-dot.review { background: rgba(178,107,0,0.14); color: var(--led); }
.pf4-tl-name { font-size: 0.875rem; font-weight: 700; color: var(--bone); }
.pf4-tl-status { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8125rem; font-weight: 600; color: var(--taupe-3); }
.pf4-tl-status.done { color: var(--tone); }
.pf4-tl-status.review { color: var(--led); }
.pf4-tl-sub { font-size: 0.8125rem; color: var(--taupe); line-height: 1.4; max-width: 150px; }
.pf4-tl-line { flex: 0 0 auto; width: 60px; height: 2px; background: var(--line); margin-top: 23px; }
.pf4-tl-line.done { background: var(--tone); opacity: 0.5; }
.pf4-tl-link { display: inline-flex; align-items: center; gap: 6px; font-size: 0.875rem; font-weight: 700; color: var(--sky-deep); margin-top: var(--s5); }
.pf4-tl-link:hover { text-decoration: underline; }

.pf4-tabs-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); margin: var(--s4) 0 var(--s6); flex-wrap: wrap; }


.pf4-reviews-row { display: grid; grid-template-columns: 300px 1fr; gap: var(--s5); align-items: start; }
.pf4-rs-card { text-align: left; }
.pf4-rs-num { font-family: var(--serif); font-size: 2.5rem; font-weight: 600; color: var(--bone); line-height: 1; margin-top: var(--s3); }
.pf4-rs-stars { display: flex; gap: 3px; color: var(--star); margin-top: 6px; }
.pf4-rs-ct { font-size: 0.8125rem; color: var(--taupe); margin: 4px 0 var(--s5); }
.pf4-rs-bars { display: flex; flex-direction: column; gap: 7px; margin-bottom: var(--s5); }
.pf4-rs-bar-row { display: grid; grid-template-columns: 28px 1fr 24px; align-items: center; gap: 8px; font-size: 0.8125rem; color: var(--taupe); }
.pf4-rs-bar-track { height: 6px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
.pf4-rs-bar-fill { height: 100%; background: var(--star); border-radius: var(--r-pill); }
.pf4-rs-bar-ct { text-align: right; }
.pf4-review-list { display: flex; flex-direction: column; gap: var(--s4); }
.pf4-helpful { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--taupe); margin-top: var(--s3); }
.pf4-helpful:hover { color: var(--bone-2); }

.pf3-chip-row, .pf4-chip-row { display: flex; flex-wrap: wrap; gap: 7px; }
.pf3-chip, .pf4-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--r-pill); background: rgba(var(--ov),0.04); border: 1px solid var(--line); font-size: 0.8438rem; font-weight: 600; color: var(--bone-2); }
.pf3-chip.ph, .pf4-chip.ph { color: var(--taupe-3); font-weight: 500; }
.pf3-chip.avail, .pf4-chip.avail { background: var(--green-dim); border-color: rgba(11,138,85,0.3); color: var(--green); }
.pf3-dot, .pf4-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.pf3-fr-verified { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8125rem; font-weight: 700; color: var(--sky-deep); background: var(--sky-dim); padding: 2px 8px; border-radius: var(--r-pill); }

.pf-edit-modal { max-width: 1400px; width: 92vw; height: 90vh; max-height: 90vh; position: relative; }
.pf-edit-modal > .modal-close { position: absolute; top: 14px; right: 14px; z-index: 5; }
.pf-edit-modal .modal-foot { justify-content: space-between; padding: 16px 24px; }
.pfe-foot { align-items: center; }
.pf-em-autosave { display: flex; flex-direction: column; gap: 0px; font-size: 0.8125rem; color: var(--taupe); }
.pf-em-autosave > *:first-child { display: inline-flex; align-items: center; gap: 6px; }
.pf-em-autosave svg { color: var(--green); }
.pf-em-autosave.saving { color: var(--taupe-3); }
.pfe-foot-sub { font-size: 0.8125rem; color: var(--taupe-3); }
.pfe-save-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); animation: pfe-pulse 0.8s ease-in-out infinite; }
@keyframes pfe-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
.pfe-foot-remaining { color: var(--taupe-3); }
.pfe-shell { display: grid; grid-template-columns: 260px 1fr; flex: 1 1 auto; min-height: 0; overflow-y: auto; align-items: start; }
.pfe-preview { position: sticky; top: 0; align-self: start; border-right: 1px solid var(--line); background: rgba(var(--ov),0.02); padding: var(--s6) var(--s5); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; max-height: 100%; overflow-y: auto; min-height: 0; }
.pfe-ring { --pct: 0; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--sky-deep) calc(var(--pct) * 1%), rgba(var(--ov),0.1) 0); margin-bottom: 2px; transition: background 0.5s var(--ease);n-bottom: 8px; position: relative; }
.pfe-ring::before { content: ""; position: absolute; width: 60px; height: 60px; border-radius: 50%; background: var(--ink-800); }
.pfe-ring span { position: relative; font-family: var(--serif); font-size: 1.25rem; font-weight: 700; color: var(--bone); }
.pfe-ring span small { font-size: 0.8125rem; font-weight: 500; color: var(--taupe); }
.pfe-steps-left { font-size: 0.8125rem; color: var(--taupe); margin: 0 0 4px; }
.pfe-pv-name { font-family: var(--serif); font-size: 1.0625rem; font-weight: 600; color: var(--bone); line-height: 1.25; margin-top: 6px; }
.pfe-pv-headline { font-size: 0.8125rem; color: var(--taupe); line-height: 1.4; }
.pfe-pv-meta { font-size: 0.8125rem; color: var(--taupe-3); }
.pfe-pv-langs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 8px; }
.pfe-pv-lang { font-size: 0.8125rem; font-weight: 600; color: var(--bone-2); background: rgba(var(--ov),0.05); border-radius: var(--r-pill); padding: 3px 9px; }
.pfe-pv-trust { margin-top: 10px; }
.pfe-pv-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; font-weight: 700; padding: 5px 11px; border-radius: var(--r-pill); }
.pfe-pv-badge.on { background: var(--green-dim); color: var(--green); }
.pfe-pv-badge.review { background: rgba(178,107,0,0.1); color: var(--led); }
.pfe-pv-badge.cta { background: var(--sky-dim); color: var(--sky-deep); border: 1px solid transparent; transition: var(--t-fast); }
.pfe-pv-badge.cta:hover { border-color: var(--sky-deep); }
.pfe-checklist { width: 100%; margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--line); text-align: left; display: flex; flex-direction: column; gap: 2px; }
.pfe-checklist-title { font-family: var(--mono); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--taupe-3); margin-bottom: 6px; }
.pfe-check-item { display: flex; align-items: center; gap: 8px; padding: 7px 6px; border-radius: 7px; font-size: 0.8125rem; color: var(--bone-2); transition: var(--t-fast); }
.pfe-check-item:hover { background: rgba(var(--ov),0.05); color: var(--bone); }
.pfe-check-item span:nth-child(2) { flex: 1; }
.pfe-check-item svg { color: var(--taupe-3); flex: none; }
.pfe-check-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); flex: none; }
.pfe-nav { width: 100%; margin-top: var(--s5); display: flex; flex-direction: column; gap: 2px; text-align: left; }
.pfe-nav-item { display: flex; align-items: center; gap: 9px; height: 44px; padding: 0 10px; border-radius: 9px; font-size: 0.8438rem; font-weight: 600; color: var(--taupe); transition: var(--t-fast); }
.pfe-nav-item svg:first-child { color: var(--taupe-3); flex: none; }
.pfe-nav-item span { flex: 1; text-align: left; display: flex; flex-direction: column; }
.pfe-nav-item span em { font-style: normal; font-size: 0.8125rem; color: var(--taupe-3); font-weight: 500; }
.pfe-nav-item.on span em { color: var(--sky-deep); opacity: 0.8; }
.pfe-nav-item:hover { background: rgba(var(--ov),0.05); color: var(--bone); }
.pfe-nav-item.on { background: var(--sky-dim); color: var(--sky-deep); }
.pfe-nav-item.on svg:first-child { color: var(--sky-deep); }
.pfe-nav-check { color: var(--green) !important; }
.pfe-nav-ct { font-size: 0.8125rem; color: var(--taupe-3); font-weight: 500; }
.pfe-next { width: 100%; margin-top: var(--s4); padding: 14px; border-radius: 10px; background: rgba(var(--ov),0.03); border: 1px solid var(--line); text-align: left; display: flex; flex-direction: column; gap: 3px; }
.pfe-next-label { font-family: var(--mono); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--taupe-3); }
.pfe-next-title { font-size: 0.875rem; font-weight: 700; color: var(--bone); }
.pfe-next-eta { font-size: 0.8125rem; color: var(--taupe); }
.pfe-next-gain { font-size: 0.8125rem; color: var(--sky-deep); font-weight: 600; margin-bottom: 6px; }
.pfe-next .btn { width: 100%; justify-content: center; }
.pfe-editor { padding: 48px 48px 40px; display: flex; flex-direction: column; gap: 24px; }
.pf-edit-modal .input, .pf-edit-modal .select { height: 48px; }
.pf-edit-modal .textarea { min-height: 96px; }
.pfe-intro { display: flex; flex-direction: column; gap: 6px; }
.pfe-intro h2 { font-family: var(--serif); font-size: 2rem; font-weight: 600; color: var(--bone); margin: 0; }
.pfe-intro p { font-family: var(--sans); font-size: 0.875rem; font-weight: 400; color: var(--taupe); margin: 0; }
.pfe-acc { border: 1px solid var(--line); border-radius: 12px; background: transparent; overflow: hidden; transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease); }
.pfe-acc:not(.open):hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.pfe-acc.open { background: var(--ink-800); border-color: var(--sky-deep); box-shadow: 0 0 0 3px var(--sky-dim); }
.pfe-acc-head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 16px 20px; text-align: left; transition: var(--t-fast); }
.pfe-acc-check { color: var(--green); flex: none; }
.pfe-acc-ic { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; }
.pfe-acc-about .pfe-acc-ic { background: var(--sky-dim); color: var(--sky-deep); }
.pfe-acc-community .pfe-acc-ic { background: var(--green-dim); color: var(--green); }
.pfe-acc-trust .pfe-acc-ic { background: rgba(230,174,94,0.16); color: var(--led); }
.pfe-acc-headtext { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pfe-acc-title { font-size: 1.25rem; font-weight: 600; color: var(--bone); font-family: var(--serif); }
.pfe-acc-sub { font-size: 0.875rem; color: var(--taupe); margin-top: 2px; }
.pfe-acc-status { flex: none; font-size: 0.8125rem; font-weight: 600; color: var(--taupe-3); }
.pfe-acc-status.done { color: var(--green); display: flex; }
.pfe-acc-chev { color: var(--taupe-3); flex: none; transition: transform var(--t-fast); }
.pfe-acc.open .pfe-acc-chev { transform: rotate(180deg); }
.pfe-acc-body { padding: 4px 20px 24px; display: flex; flex-direction: column; gap: 24px; animation: pfe-expand 0.22s var(--ease); }
@keyframes pfe-expand { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.pf-em-hint { font-size: 0.8125rem; color: var(--taupe-3); }
.pf-em-count { align-self: flex-end; font-size: 0.8125rem; color: var(--taupe-3); display: flex; align-items: center; gap: 10px; }
.pf-em-count-ok { display: inline-flex; align-items: center; gap: 4px; color: var(--green); font-weight: 600; }
.pf-em-microfeedback { display: flex; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--green); background: var(--green-dim); border-radius: 7px; padding: 7px 10px; }
.pf-em-benefits { display: flex; flex-direction: column; gap: 8px; }
.pf-em-benefit { display: flex; align-items: center; gap: 8px; font-size: 0.8438rem; color: var(--bone-2); }
.pf-em-benefit svg { color: var(--sky-deep); flex: none; }
.pfe-trust-hero { border: 1px solid rgba(230,174,94,0.3); background: rgba(230,174,94,0.06); border-radius: var(--r-lg); padding: var(--s5); display: flex; flex-direction: column; gap: 10px; }
.pfe-trust-hero-title { font-family: var(--serif); font-size: 1.0625rem; font-weight: 600; color: var(--bone); }
.pfe-trust-hero .pf-em-benefit svg { color: var(--led); }
.pfe-trust-hero-eta { font-size: 0.8125rem; color: var(--taupe); }
.pf-em-heritage-set { display: flex; align-items: center; gap: 9px; padding: 10px 13px; border: 1px solid var(--line); border-radius: var(--r); background: rgba(var(--ov),0.02); }
.pf-em-heritage-flag { font-size: 1.25rem; }
.pf-em-heritage-name { font-weight: 600; color: var(--bone); flex: 1; }
.pf-em-trust-card { display: flex; flex-direction: column; gap: var(--s4); padding: var(--s5); border: 1px solid var(--line); border-radius: var(--r-lg); background: rgba(var(--ov),0.02); }
.pf-em-trust-row-top { display: flex; }
.pf-em-trust-card > .btn { align-self: flex-start; }
.pf-em-trust-row { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--bone); font-size: 0.875rem; }
.pf-em-trust-row svg { color: var(--green); }
.pf-em-trust-row.muted svg { color: var(--taupe-3); }
.pf-em-trust-row.muted { color: var(--taupe); }
.pf-em-field { display: flex; flex-direction: column; gap: 4px; }
.pf-em-field .input, .pf-em-field .textarea, .pf-em-field .cf-row, .pf-em-heritage-set { margin-top: 6px; }
.pf-em-label { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--taupe); }
.pf-em-hint { font-size: 0.875rem; color: var(--taupe-3); margin-top: -2px; }
@media (max-width: 900px) {
  .pf-edit-modal { max-width: 96vw; height: 92vh; max-height: 92vh; }
  .pfe-shell { grid-template-columns: 1fr; overflow-y: visible; }
  .pfe-preview { position: static; flex-direction: row; flex-wrap: wrap; justify-content: center; border-right: none; border-bottom: 1px solid var(--line); padding: var(--s5); max-height: none; }
  .pfe-ring { width: 56px; height: 56px; margin-bottom: 0; }
  .pfe-ring::before { width: 44px; height: 44px; }
  .pfe-ring span { font-size: 0.875rem; }
  .pfe-nav, .pfe-next, .pfe-checklist { display: none; }
}

@media (max-width: 980px) {
  .pf4-row, .pf4-row-stats, .pf4-row-trust { grid-template-columns: 1fr; }
  .pf4-reviews-row { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .pf4-hero { padding: var(--s5); }
  .pf4-hero-top { flex-direction: column; align-items: center; text-align: center; }
  .pf4-meta, .pf4-badges, .pf4-hero-stats { justify-content: center; }
  .pf4-hero-bio { max-width: 100%; }
  .pf4-tl { flex-direction: column; align-items: stretch; }
  .pf4-tl-item { flex-direction: row; text-align: left; }
  .pf4-tl-line { display: none; }
}
.profile-hero {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-xl);
  background: #FFFFFF; box-shadow: var(--shadow-card);
  padding: var(--s10) var(--s10) var(--s8);
  margin-bottom: var(--s8);
}
.profile-hero .ph-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
.profile-hero .ph-flag { position: absolute; right: -10px; top: -40px; font-size: 15rem; line-height: 1; opacity: 0.10; }
.ph-inner { position: relative; z-index: 1; display: flex; align-items: center; gap: var(--s8); flex-wrap: wrap; }
.pf-avatar {
  width: 108px; height: 108px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; font-family: var(--serif); font-size: 2.625rem; font-weight: 600; color: #FAFAF8;
  border: 1px solid var(--line-strong); position: relative;
}
.pf-avatar .pf-av-flag { position: absolute; bottom: 2px; right: -2px; font-size: 1.875rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6)); }
.ph-id { flex: 1; min-width: 280px; }
.ph-eyebrow { font-size: 0.8125rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--taupe); margin-bottom: 10px; }
.ph-statement { font-family: var(--serif); font-size: clamp(30px, 4vw, 46px); font-weight: 500; line-height: 1.08; letter-spacing: -0.02em; color: var(--bone); }
.ph-statement em { font-style: italic; color: var(--amber); }
.ph-verified {
  display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; margin-left: 16px;
  height: 30px; padding: 0 13px 0 11px;
  border-radius: var(--r-pill); font-size: 0.8125rem; font-weight: 600;
  color: var(--verify); background: rgba(26,143,227,0.12); border: 1px solid rgba(26,143,227,0.4); white-space: nowrap;
}
.ph-meta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 16px; font-size: 0.875rem; color: var(--taupe); }
.ph-meta span { display: inline-flex; align-items: center; gap: 7px; }
.ph-meta svg { width: 15px; height: 15px; }
.role-chip { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 13px; border-radius: var(--r-pill); background-color: var(--amber-dim); border: 1px solid rgba(26,143,227,0.34); color: var(--amber); font-size: 0.8125rem; font-weight: 600; white-space: nowrap; }

/* declaration cards, asymmetric case-file collage: alternating tints
   instead of one flat surface, still a clean grid underneath */
.declare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); margin-bottom: var(--s8); }
.declare-card { border: 1px solid var(--line); border-radius: var(--r-lg); background-color: var(--glass); padding: var(--s6); display: flex; flex-direction: column; gap: var(--s4); }
.declare-card.full { grid-column: 1 / -1; }
.declare-card.tone-sky { background: linear-gradient(155deg, rgba(26,143,227,0.06), transparent 60%), var(--glass); border-color: rgba(26,143,227,0.22); }
.declare-card.tone-sky .dc-icon { background-color: var(--sky-dim); color: var(--sky-deep); }
.declare-card.tone-orange { background: linear-gradient(155deg, rgba(246,130,31,0.06), transparent 60%), var(--glass); border-color: rgba(246,130,31,0.22); }
.declare-card.tone-orange .dc-icon { background-color: var(--orange-dim); color: var(--orange-deep); }
.dc-head { display: flex; align-items: center; gap: 10px; }
.dc-head .dc-icon { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background-color: var(--amber-dim); color: var(--amber); flex-shrink: 0; }
.dc-head .dc-title { font-family: var(--serif); font-size: 1.125rem; font-weight: 600; color: var(--bone); }
.dc-head .dc-sub { font-size: 0.875rem; color: var(--taupe); }
.verify-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px; border: 1px dashed var(--line-strong); border-radius: var(--r); }
.verify-row.done { border-style: solid; border-color: rgba(26,143,227,0.4); background: rgba(26,143,227,0.07); }
.verify-row.review { border-style: solid; border-color: rgba(178,107,0,0.4); background: rgba(178,107,0,0.07); }
.verify-row .vr-text { font-size: 0.8438rem; color: var(--bone-2); flex: 1; min-width: 180px; }
.vr-spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(178,107,0,0.3); border-top-color: var(--led); animation: vr-spin 0.8s linear infinite; flex: none; }
@keyframes vr-spin { to { transform: rotate(360deg); } }
.ph-verified.pending { color: var(--led); background: rgba(178,107,0,0.12); border-color: rgba(178,107,0,0.4); }

/* ── Trust ladder ──────────────────────────────────────── */
.trust-ladder { display: flex; align-items: stretch; gap: 0; margin: 4px 0 16px; }
.tl-rung { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: var(--r); border: 1px solid var(--line); flex: 1; min-width: 0; transition: var(--t-fast); }
.tl-rung.current { border-color: rgba(26,143,227,0.45); background: rgba(26,143,227,0.07); }
.tl-rung.done { border-color: var(--line-strong); }
.tl-dot { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 0.8125rem; font-weight: 700; background: rgba(var(--ov),0.06); color: var(--taupe); }
.tl-rung.current .tl-dot { background: var(--verify); color: #FAFAF8; }
.tl-rung.done .tl-dot { background: rgba(26,143,227,0.18); color: var(--verify); }
.tl-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.tl-text b { font-size: 0.8125rem; color: var(--bone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-text small { font-size: 0.8125rem; color: var(--taupe); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-bar { flex: none; align-self: center; width: 16px; height: 2px; background: var(--line); }
.tl-bar.on { background: var(--verify); }

/* access-opt gated (culture-only requires verification) */
.access-opt.gated { opacity: 0.6; cursor: not-allowed; }
.access-opt.gated .ao-title { display: flex; align-items: center; gap: 6px; }
.access-opt.gated .ao-radio { display: none; }

/* ── services: single clear "culture-only" toggle (replaces the 3-way
   Open/Culture-led/Culture-only picker, which was confusing for services \u2014
   that framing fits Events better) ── */
.only-toggle { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: var(--r-lg); cursor: pointer; transition: var(--t-fast); }
.only-toggle:hover { border-color: var(--line-strong); }
.only-toggle.on { border-color: var(--clay); background-color: var(--clay-dim); }
.only-toggle.gated { opacity: 0.65; cursor: not-allowed; }
.only-toggle-box { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--line-strong); display: grid; place-items: center; flex: none; margin-top: 1px; color: transparent; transition: var(--t-fast); }
.only-toggle.on .only-toggle-box { background: var(--clay); border-color: var(--clay); color: #fff; }
.only-toggle-text { display: flex; flex-direction: column; gap: 3px; }
.only-toggle-title { font-size: 0.9063rem; font-weight: 600; color: var(--bone); display: flex; align-items: center; gap: 6px; }
.only-toggle-desc { font-size: 0.875rem; color: var(--taupe); line-height: 1.4; }

/* ── Verify modal ──────────────────────────────────────── */
.vm-scrim { align-items: center; justify-content: center; padding: var(--s5); }
.vm-modal { max-width: 1120px; width: 100%; height: 94vh; max-height: 820px; border-radius: var(--r-xl); padding: 0; display: grid; grid-template-columns: 300px 1fr; position: relative; overflow: hidden; }
.vm-close { position: absolute; top: 18px; right: 18px; z-index: 2; }

/* aside: orientation, not a form field — art, steps, trust, no borders */
.vm-aside { position: relative; background: linear-gradient(165deg, var(--sky-dim) 0%, var(--ink-800) 62%); padding: 40px 32px; display: flex; flex-direction: column; gap: var(--s6); overflow-y: auto; min-height: 0; }
.vm-aside-steps { position: relative; display: flex; flex-direction: column; gap: 22px; padding-left: 14px; }
.vm-aside-track { position: absolute; left: -1px; top: 11px; bottom: 11px; width: 2px; border-radius: 2px; background: var(--line-strong); }
.vm-aside-track span { display: block; width: 100%; border-radius: 2px; background: var(--sky-deep); transition: height 0.5s var(--ease, ease); }
.vm-aside-step { display: flex; align-items: center; gap: 12px; font-size: 0.875rem; font-weight: 600; color: var(--taupe); transition: var(--t-fast); }
.vm-aside-step-text { display: flex; flex-direction: column; gap: 1px; }
.vm-aside-step-text i { font-style: normal; font-size: 0.8125rem; font-weight: 500; color: var(--taupe); opacity: 0.75; }
.vm-aside-step.on .vm-aside-step-text i { color: var(--bone-2); opacity: 1; }
.vm-aside-step.done .vm-aside-step-text i { opacity: 0.85; }
.vm-aside-step.on { color: var(--bone); }
.vm-aside-step.done { color: var(--green, #1c8a52); }
.vm-aside-dot { position: relative; z-index: 1; flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 0.8125rem; font-weight: 700; background: var(--ink-800); color: var(--taupe); margin-left: -27px; border: 3px solid var(--ink-800); box-shadow: inset 0 0 0 2px var(--line-strong); transition: var(--t-fast); }
.vm-aside-step.on .vm-aside-dot { background: var(--sky-deep); color: #fff; box-shadow: 0 0 0 4px var(--sky-dim); }
.vm-aside-step.done .vm-aside-dot { background: var(--green, #1c8a52); color: #fff; box-shadow: none; }
.vm-aside-trust { display: flex; flex-direction: column; gap: 9px; }
.vm-aside-trust span { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8125rem; color: var(--taupe); }
.vm-aside-trust svg { flex: none; color: var(--sky-deep); }
.vm-score-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding-bottom: 4px; }
.vm-hero-steps { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding-bottom: 4px; }
.vm-hero-steps-n { font-family: var(--serif); font-size: 1.875rem; font-weight: 700; color: var(--bone); }
.vm-hero-steps-sub { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--taupe); }
.vm-score-ring { position: relative; width: 132px; height: 132px; }
.vm-ring-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.vm-ring-track { fill: none; stroke: rgba(var(--ov),0.1); stroke-width: 8; }
.vm-ring-fill { fill: none; stroke: var(--sky-deep); stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset 0.15s linear; }
.vm-score-ring.pulse .vm-ring-fill { filter: drop-shadow(0 0 6px rgba(20,116,190,0.55)); }
.vm-score-ring.pulse { animation: vm-ring-pulse 0.7s var(--ease, ease); }
@keyframes vm-ring-pulse { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }
.vm-ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.vm-ring-center b { font-family: var(--serif); font-size: 2.125rem; font-weight: 700; color: var(--bone); line-height: 1; }
.vm-ring-center span { font-size: 0.8125rem; color: var(--taupe); margin-top: 3px; }
.vm-score-label { font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--taupe); }
.vm-score-msg { font-size: 0.8125rem; color: var(--bone-2); line-height: 1.4; margin: 0; display: inline-flex; align-items: center; gap: 6px; }
.vm-score-msg svg { color: var(--green, var(--sky-deep)); }
.vm-aside-quote { font-family: var(--serif); font-style: italic; font-size: 0.9375rem; line-height: 1.5; color: var(--bone-2); margin: 0; padding-top: var(--s6); border-top: 1px solid var(--line); }
.vm-aside-social { margin-top: auto; display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; color: var(--sky-deep); font-weight: 600; }
.vm-aside-social svg { flex: none; color: var(--sky-deep); }

/* content pane: whitespace-led, sticky primary action */
.vm-content { display: flex; flex-direction: column; min-height: 0; }
.vm-scroll { flex: 1 1 auto; overflow-y: auto; padding: 56px 56px 8px; }
.vm-pane { display: flex; flex-direction: column; text-align: left; max-width: 680px; }
.vm-pane-text { max-width: 600px; }
.vm-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--sky-deep); }
.vm-h1 { font-family: var(--serif); font-size: 2rem; font-weight: 600; color: var(--bone); line-height: 1.18; margin-top: 14px; }
.vm-lede { font-size: 0.9375rem; line-height: 1.65; color: var(--taupe); margin-top: 14px; }
.vm-title { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; color: var(--bone); line-height: 1.15; }
.vm-sub { font-size: 0.875rem; line-height: 1.55; color: var(--taupe); margin-top: 9px; }

/* feature rows: hierarchy via type + icon, no filled containers */
.vm-features { display: flex; flex-direction: column; gap: 20px; margin: 30px 0 4px; }
.vm-feature { display: flex; gap: 14px; align-items: flex-start; }
.vm-feature svg { flex: none; margin-top: 2px; color: var(--sky-deep); }
.vm-feature b { display: block; font-size: 0.9375rem; color: var(--bone); }
.vm-feature span { display: block; font-size: 0.8125rem; color: var(--taupe); line-height: 1.5; margin-top: 2px; }
.vm-reassure-row { display: flex; align-items: center; gap: 12px; margin: 22px 0 4px; flex-wrap: wrap; }
.vm-reassure-row span { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; font-weight: 600; color: var(--taupe); }
.vm-reassure-row svg { color: var(--sky-deep); }
.vm-reassure-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--line-strong); }
.vm-why-list { display: flex; flex-direction: column; gap: 18px; margin: 28px 0 20px; }
.vm-why-item { display: flex; gap: 14px; align-items: flex-start; }
.vm-why-item svg { flex: none; margin-top: 2px; color: var(--sky-deep); }
.vm-why-item b { display: block; font-size: 0.9375rem; color: var(--bone); }
.vm-why-item span { display: block; font-size: 0.8125rem; color: var(--bone-2); line-height: 1.5; margin-top: 2px; }

.vm-label { display: block; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--taupe); margin: 8px 0 8px; }
.vm-heritage-card { border-radius: var(--r-lg); background: rgba(var(--ov),0.025); padding: 28px 26px 24px; margin-top: 30px; }
.vm-heritage-card .vm-label { margin-top: 0; }
.vm-heritage-pick { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; animation: vm-fadein 0.3s var(--ease, ease); }
@keyframes vm-fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* chips: premium pill, richer selected feel via shadow not fill */
.vm-chiprow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 9px; margin-top: 14px; }
.vm-chiprow-lead { font-size: 0.8125rem; font-weight: 700; color: var(--taupe); text-transform: uppercase; letter-spacing: 0.04em; margin-right: 2px; align-self: center; }
.vm-chip { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; font-size: 0.8125rem; font-weight: 600; padding: 10px 18px; border-radius: var(--r-lg); background: var(--ink-800); border: 1px solid var(--line); color: var(--bone-2); transition: var(--t-fast); }
.vm-chip:hover { border-color: var(--sky); color: var(--sky-deep); box-shadow: 0 4px 14px -6px rgba(20,116,190,0.35); transform: translateY(-1px); }
.vm-chip.on { border-color: var(--sky-deep); background: var(--sky-dim); color: var(--sky-deep); }
.vm-chip-flag { font-weight: 600; font-size: 0.875rem; }
.vm-chip-meta { font-size: 0.8125rem; font-weight: 600; color: var(--taupe); }
.vm-selected-banner { display: flex; align-items: flex-start; gap: 12px; margin-top: 22px; padding: 16px 18px; border-radius: var(--r-lg); background: var(--green-dim); color: var(--green); animation: vm-fadein 0.3s var(--ease, ease); }
.vm-selected-banner b { display: block; font-size: 0.875rem; color: var(--bone); }
.vm-selected-banner span { display: block; font-size: 0.8125rem; color: var(--bone-2); margin-top: 1px; }

.vm-fine { display: flex; align-items: flex-start; gap: 7px; font-size: 0.8125rem; color: var(--taupe); line-height: 1.5; margin-top: 22px; }
.vm-fine svg { flex: none; margin-top: 2px; color: var(--taupe); }
.vm-phone-card { margin-top: 30px; padding: 24px 26px 26px; border-radius: var(--r-lg); background: var(--ink-800); border: 1.5px solid color-mix(in srgb, var(--sky) 30%, transparent); box-shadow: 0 18px 40px -20px rgba(20,116,190,0.35); }
.vm-phone-card .vm-label { margin-top: 0; }
.vm-label-code { margin-top: 20px !important; }
.vm-phone-card-head { display: flex; align-items: center; gap: 10px; font-size: 0.8438rem; font-weight: 700; color: var(--bone); margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.vm-phone-card-ic { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--sky-deep); color: #fff; flex: none; }
.vm-comm-lead { display: block; margin-top: 30px; }
.vm-label-top { margin-top: 26px !important; }
.vm-comm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; }
.vm-heritage-search-toggle { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-size: 0.8125rem; font-weight: 600; color: var(--sky-deep); background: none; border: none; cursor: pointer; padding: 0; }
.vm-heritage-main .cf { position: relative; z-index: 1; }
.vm-heritage-search-wrap { margin-top: 12px; }
.vm-comm-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 20px 22px; border-radius: var(--r-lg); background: var(--ink-800); border: 1px solid var(--line); color: var(--bone-2); text-align: left; transition: transform 0.25s var(--ease, ease), box-shadow 0.25s var(--ease, ease), border-color 0.2s, background 0.2s; cursor: pointer; }
.vm-comm-card:hover { border-color: var(--sky); transform: translateY(-1px); box-shadow: 0 10px 22px -12px rgba(20,116,190,0.35); }
.vm-comm-card.on { border-color: var(--sky-deep); background: var(--sky-dim); transform: scale(1.03); box-shadow: 0 14px 30px -14px rgba(20,116,190,0.45); }
.vm-comm-flag { font-size: 1.625rem; line-height: 1; }
.vm-comm-name { font-size: 0.9375rem; font-weight: 700; color: var(--bone); }
.vm-comm-meta { font-size: 0.8125rem; color: var(--taupe); }
.vm-comm-card.on .vm-comm-meta { color: var(--sky-deep); }
.vm-comm-check { position: absolute; top: 16px; right: 16px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--sky-deep); color: #fff; opacity: 0; transform: scale(0.6); transition: var(--t-fast); }
.vm-comm-card.on .vm-comm-check { opacity: 1; transform: scale(1); animation: vm-pop 0.3s var(--ease, ease); }
.vm-phone { display: flex; gap: 8px; margin-top: 12px; }

.vm-otp-row { position: relative; display: flex; gap: 10px; margin-top: 14px; }
.vm-otp-cell { width: 52px; height: 60px; text-align: center; font-size: 1.5rem; font-weight: 700; font-family: var(--mono); border-radius: var(--r); border: 1.5px solid var(--line-strong); background: var(--ink-900); color: var(--bone); transition: var(--t-fast); }
.vm-otp-cell:focus { outline: none; border-color: var(--sky-deep); box-shadow: 0 0 0 3px var(--sky-dim); }
.vm-otp-row.invalid .vm-otp-cell { border-color: var(--red, #d64545); animation: vm-otp-shake 0.4s; }
.vm-otp-row.verifying .vm-otp-cell { opacity: 0.55; }
.vm-otp-spinner { position: absolute; right: -30px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; border: 2px solid var(--line-strong); border-top-color: var(--sky-deep); animation: vm-spin 0.7s linear infinite; }
@keyframes vm-spin { to { transform: rotate(360deg); } }
@keyframes vm-otp-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.vm-otp-error { display: flex; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--red, #d64545); margin-top: 10px; }
.vm-otp-success { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 14px; animation: vm-fadein 0.35s var(--ease, ease); }
.vm-otp-success-check { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--green, #1c8a52); color: #fff; margin-bottom: 4px; animation: vm-pop 0.4s var(--ease, ease); }
@keyframes vm-pop { 0% { transform: scale(0.5); opacity: 0; } 60% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
.vm-otp-success b { font-size: 0.9375rem; color: var(--bone); }
.vm-otp-success span { font-size: 0.8125rem; color: var(--taupe); }
.vm-otp-success-score { margin-top: 6px; padding: 6px 14px; border-radius: 99px; background: var(--sky-dim); color: var(--sky-deep); font-size: 0.8125rem; font-weight: 700; }
.vm-phone .input { flex: 1; }
.vm-phone .btn { flex: none; }
.vm-code { letter-spacing: 0.4em; font-size: 1.25rem; text-align: center; font-family: var(--mono); }
.vm-link { color: var(--sky-deep); font-weight: 600; }
.vm-link:hover { text-decoration: underline; text-underline-offset: 2px; }

/* method cards: elevation over borders, checkmark badge over radio */
.vm-methods { display: flex; flex-direction: column; gap: 14px; margin: 34px 0 4px; }
.vm-method { display: flex; gap: 16px; align-items: flex-start; text-align: left; padding: 20px 22px; border: 1.5px solid var(--line); border-radius: var(--r-lg); transition: var(--t-fast); cursor: pointer; background: var(--ink-800); box-shadow: 0 1px 2px rgba(20,20,20,0.03); }
.vm-method:hover { border-color: var(--line-strong); transform: translateY(-1px); box-shadow: 0 10px 22px -14px rgba(20,20,20,0.14); }
.vm-method.on { border-color: var(--sky-deep); background: var(--sky-dim); box-shadow: 0 14px 30px -16px rgba(20,116,190,0.4); }
.vm-method-ic { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--sky-dim); color: var(--sky-deep); }
.vm-method.on .vm-method-ic { background: linear-gradient(145deg, var(--sky), var(--sky-deep)); color: #fff; box-shadow: 0 6px 16px -6px rgba(20,116,190,0.5); }
.vm-method-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.vm-method-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.vm-method-top b { font-size: 0.9688rem; color: var(--bone); }
.vm-method-tag { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.02em; color: var(--sky-deep); background: var(--sky-dim); padding: 3px 10px; border-radius: 99px; }
.vm-method-blurb { font-size: 0.8125rem; color: var(--taupe); line-height: 1.5; }
.vm-method-rung { display: inline-flex; align-items: center; gap: 5px; font-size: 0.8125rem; font-weight: 600; color: var(--taupe); margin-top: 4px; padding: 3px 10px; border: none; border-radius: 99px; background: rgba(var(--ov),0.045); align-self: flex-start; }
.vm-method-rung svg { color: var(--sky-deep); }
.vm-check-badge { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: grid; place-items: center; align-self: center; transition: var(--t-fast); color: transparent; }
.vm-check-badge.on { border-color: var(--sky-deep); background: var(--sky-deep); color: #fff; transform: scale(1.05); }

.vm-vouch { display: flex; flex-direction: column; gap: 12px; margin-top: 30px; }
.vm-vouch-grid { display: grid; grid-template-columns: 1fr 240px; gap: 20px; align-items: start; margin-top: 30px; }
.vm-vouch-grid .vm-vouch { margin-top: 0; }
.vm-vouch-aside { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 20px; border-radius: var(--r-lg); background: rgba(var(--ov),0.025); }
.vm-vouch-aside svg { color: var(--sky-deep); margin-bottom: 2px; }
.vm-vouch-aside b { font-size: 0.8438rem; color: var(--bone); }
.vm-vouch-aside span { font-size: 0.8125rem; color: var(--taupe); line-height: 1.4; margin-bottom: 10px; }
.vm-vouch-aside-btn { width: 100%; justify-content: center; font-size: 0.8125rem; padding: 9px 14px; }
.vm-vouch-aside-btn + .vm-vouch-aside-btn { margin-top: 2px; }
.vm-vouch-row { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: var(--r-lg); background: var(--ink-800); border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: var(--t-fast); }
.vm-vouch-row:focus-within { border-color: var(--sky-deep); box-shadow: 0 0 0 3px var(--sky-dim); }
.vm-vouch-n { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 0.8125rem; font-weight: 700; background: var(--sky-deep); color: #fff; box-shadow: 0 3px 8px -2px rgba(20,116,190,0.5); }
.vm-vouch-row .input { flex: 1; border: none; background: none; box-shadow: none; padding: 4px 0; font-size: 0.9375rem; }
.vm-upload { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 20px; border: 1.5px dashed var(--line-strong); border-radius: var(--r-lg); margin-top: 28px; color: var(--taupe); cursor: pointer; transition: var(--t-fast); }
.vm-upload:hover { border-color: var(--sky-deep); background: var(--sky-dim); }
.vm-upload svg { color: var(--sky-deep); }
.vm-upload b { font-size: 0.875rem; color: var(--bone); }
.vm-upload span { font-size: 0.8125rem; }
.vm-lang-card { margin-top: 30px; padding: 22px 24px 24px; border-radius: var(--r-lg); background: var(--ink-800); border: 1.5px solid color-mix(in srgb, var(--sky) 30%, transparent); box-shadow: 0 18px 40px -20px rgba(20,116,190,0.35); }
.vm-prompt { display: flex; align-items: flex-start; gap: 9px; padding: 16px 18px; border-radius: var(--r); background: rgba(var(--ov),0.04); margin: 0 0 16px; font-size: 0.875rem; font-style: italic; color: var(--bone-2); line-height: 1.5; }
.vm-prompt svg { flex: none; margin-top: 3px; color: var(--sky-deep); }
.vm-textarea { width: 100%; resize: vertical; font-family: var(--sans); margin-top: 0; min-height: 120px; padding: 14px 16px; border-radius: var(--r); border: 1.5px solid var(--line-strong); background: var(--ink-800); font-size: 0.875rem; line-height: 1.6; }
.vm-textarea:focus { outline: none; border-color: var(--sky-deep); box-shadow: 0 0 0 3px var(--sky-dim); }
.vm-lang-note { display: flex; align-items: flex-start; gap: 6px; font-size: 0.8125rem; color: var(--taupe); line-height: 1.45; margin: 10px 0 0; }
.vm-lang-note svg { flex: none; margin-top: 2px; color: var(--sky-deep); }

.cf-fixed-anchor { position: fixed; z-index: 1600; }
.cf-fixed-anchor .sb-pop { position: static; margin: 0; max-height: var(--cf-max-h, 420px); }
.vm-sticky-foot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 24px 56px; border-top: 1px solid var(--line); background: var(--ink-800); }
.vm-primary { margin-left: auto; padding: 13px 24px; font-size: 0.9375rem; font-weight: 700; box-shadow: 0 10px 24px -10px rgba(20,116,190,0.5); }

@media (max-width: 780px) {
  .vm-modal { grid-template-columns: 1fr; max-height: 94vh; }
  .vm-aside { flex-direction: row; align-items: center; padding: 20px 24px; gap: var(--s6); flex-wrap: wrap; }
  .vm-aside-quote, .vm-aside-social, .vm-score-msg { display: none; }
  .vm-score-ring { width: 84px; height: 84px; }
  .vm-ring-center b { font-size: 1.375rem; }
  .vm-aside-steps { flex-direction: row; padding-left: 0; gap: 18px; flex: 1; }
  .vm-aside-track { display: none; }
  .vm-aside-dot { margin-left: 0; border: none; }
  .vm-aside-step span:last-child { display: none; }
  .vm-aside-pct { flex: none; }
  .vm-aside-trust { display: none; }
  .vm-feature-cards { grid-template-columns: 1fr; }
  .vm-vouch-grid { grid-template-columns: 1fr; }
  .vm-scroll { padding: 30px 24px 8px; }
  .vm-sticky-foot { padding: 16px 24px; }
}

/* stats */
.pf-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); margin-bottom: var(--s8); }
.pf-stat { border: 1px solid var(--line); border-radius: var(--r-lg); background-color: var(--glass); padding: var(--s5) var(--s6); }
.pf-stat .ps-num { font-family: var(--serif); font-size: 2.125rem; font-weight: 600; color: var(--bone); line-height: 1; }
.pf-stat .ps-num .ps-of { font-size: 1.125rem; color: var(--taupe-3); font-weight: 500; }
.pf-stat .ps-label { font-size: 0.8125rem; color: var(--taupe); margin-top: 8px; }

/* ── Verification stamps: literal ink-stamp badges, earned not toggled ── */
.vstamp-row { position: relative; z-index: 1; display: flex; align-items: center; gap: var(--s6); flex-wrap: wrap; margin-top: var(--s7); padding-top: var(--s6); border-top: 1px dashed var(--line-strong); }
.vstamp { display: flex; align-items: center; gap: 12px; transform: rotate(var(--tilt, 0deg)); transition: transform var(--t-fast); }
.vstamp:hover { transform: rotate(0deg) scale(1.03); }
.vstamp-ring {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; flex: none;
  border: 2.5px dashed var(--line-strong); color: var(--taupe-3); background: var(--ink-850);
}
.vstamp.current .vstamp-ring { border-style: solid; border-color: var(--sky); color: var(--sky); background: var(--sky-dim); box-shadow: 0 0 0 5px rgba(26,143,227,0.1); }
.vstamp.review .vstamp-ring { border-style: solid; border-color: var(--led); color: var(--led); background: rgba(178,107,0,0.1); animation: vr-spin 3s linear infinite; }
.vstamp.done .vstamp-ring { border-style: solid; border-color: var(--sky-deep); color: #fff; background: linear-gradient(145deg, var(--sky), var(--sky-deep)); box-shadow: 0 6px 16px -6px rgba(26,143,227,0.55); }
.vstamp-text { display: flex; flex-direction: column; line-height: 1.3; }
.vstamp-text b { font-size: 0.875rem; color: var(--bone); }
.vstamp-text small { font-size: 0.8125rem; color: var(--taupe); }
.vstamp.done .vstamp-text small { color: var(--sky-deep); font-weight: 600; }
.vstamp-cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-left: auto; max-width: 380px; }
.vstamp-note { font-size: 0.8438rem; color: var(--taupe); line-height: 1.5; display: flex; align-items: center; gap: 8px; }
@media (max-width: 900px) {
  .vstamp-row { gap: var(--s5); }
  .vstamp-cta { margin-left: 0; max-width: none; }
}
@media (max-width: 640px) {
  .vstamp-row { flex-direction: column; align-items: flex-start; }
  .vstamp { transform: none; }
}

/* tabs */
.pf-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: var(--s6); }
.pf-tab { position: relative; padding: 14px 4px; margin-right: 22px; font-size: 0.9063rem; font-weight: 600; color: var(--taupe); transition: var(--t-fast); }
.pf-tab:hover { color: var(--bone); }
.pf-tab.on { color: var(--bone); }
.pf-tab.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background-color: var(--amber); }
.pf-tab .tab-ct { color: var(--taupe-3); font-weight: 500; margin-left: 6px; }

/* reviews */
.review-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }
.review-card { border: 1px solid var(--line); border-radius: var(--r-lg); background-color: var(--glass); padding: var(--s6); display: flex; flex-direction: column; gap: 14px; }
.review-card .rv-top { display: flex; align-items: center; gap: 12px; }
.review-card .rv-av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 0.9375rem; color: #FAFAF8; position: relative; flex-shrink: 0; }
.review-card .rv-av .rv-flag { position: absolute; bottom: -3px; right: -4px; font-size: 0.875rem; }
.review-card .rv-name { font-size: 0.875rem; font-weight: 600; color: var(--bone); }
.review-card .rv-date { font-size: 0.8125rem; color: var(--taupe); }
.review-card .rv-text { font-size: 0.9063rem; line-height: 1.6; color: var(--bone-2); }
.review-card .rv-text::before { content: "\201C"; }
.review-card .rv-text::after { content: "\201D"; }

@media (max-width: 860px) {
  .declare-grid.review-list { grid-template-columns: 1fr; }
  .pf-stats { grid-template-columns: 1fr 1fr; }
}


/* ============================================================
   WARM PAPER, mono labels, selected-state polish
   ============================================================ */
.eyebrow.field-label.form-label.rail-title.filtergroup .fg-label.ph-eyebrow.menu-head.label.pr-label { font-family: var(--mono); }
.declare-card.pf-stat.review-card { box-shadow: var(--shadow-sm); }
.pill.on.g-led { background-color: var(--led-bg); border-color: var(--led-bd); color: var(--led); }
.access { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.8125rem; }


/* theme toggle (top bar) */
.theme-toggle { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background-color: rgba(var(--ov),0.04); }
.theme-toggle button { width: 34px; height: 32px; border-radius: var(--r-pill); display: grid; place-items: center; color: var(--taupe); transition: var(--t-fast); }
.theme-toggle button:hover { color: var(--bone); }
.theme-toggle button.on { background-color: var(--bone); color: #FAFAF8; }

/* ============================================================
   EDITORIAL DARK THEME, toggled via [data-theme="dark"]
   (typography stays Playfair / Inter / DM Mono; only colour & surface flip)
   ============================================================ */
:root[data-theme="dark"] {
  --ink-900:#0E1210; --ink-850:#11160F; --ink-800:#161B17; --ink-750:#1B211C; --ink-700:#222926;
  --glass:rgba(24,30,26,0.56); --glass-strong:rgba(16,20,17,0.82);
  --line:rgba(236,229,214,0.10); --line-strong:rgba(236,229,214,0.18); --line-faint:rgba(236,229,214,0.06); --line-soft:rgba(236,229,214,0.06);
  --bone:#EFE8D7; --bone-2:#CFC8B6; --taupe:#9C9486; --taupe-3:#8A8577; /* lightened from #6E6A5F (3.50:1) to 5.12:1 */
  --amber:#4FB0F5; --amber-bright:#74C2F8; --amber-deep:#2E92DA; --amber-dim:rgba(79,176,245,0.16);
  --sky:#4FB0F5; --sky-deep:#2E92DA; --orange:#FF9A3D; --orange-deep:#F0810F; --orange-dim:rgba(255,154,61,0.16);
  --green:#33D690; --green-dim:rgba(51,214,144,0.18); --clay:#E07AAE; --clay-dim:rgba(224,122,174,0.16);
  --danger:#E5837A; --danger-dim:rgba(229,131,122,0.16);
  --forest:#2E92DA; --star:#F5B14E; --verify:#46C892;
  --led:#E6AE5E; --led-bg:rgba(230,174,94,0.14); --led-bd:rgba(230,174,94,0.34);
  --ov:236,229,214;
  --cover-base:rgba(14,18,16,0.15);
  --shadow-sm:none;
  --shadow-card:0 1px 0 rgba(255,255,255,0.02), 0 18px 40px -24px rgba(0,0,0,0.7);
  --shadow-lg:0 24px 60px -20px rgba(0,0,0,0.75);
  --shadow-hover:0 22px 52px -22px rgba(0,0,0,0.8);
  --shadow-pop:0 24px 60px -20px rgba(0,0,0,0.75);
}
:root[data-theme="dark"] body::before {
  background:
    radial-gradient(1200px 620px at 78% -8%, rgba(230,174,94,0.10), transparent 60%),
    radial-gradient(900px 520px at 8% 4%, rgba(53,94,71,0.16), transparent 62%);
}
[data-theme="dark"] .card { background-color: var(--glass); box-shadow: none; backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1); }
[data-theme="dark"] .card:hover { box-shadow: var(--shadow-card); }
[data-theme="dark"] .searchbar { background-color: var(--glass); border-color: var(--line-strong); backdrop-filter: blur(18px) saturate(1.15); -webkit-backdrop-filter: blur(18px) saturate(1.15); }
[data-theme="dark"] .searchbar.sb-open { background-color: rgba(20,24,21,0.6); }
[data-theme="dark"] .sb-seg.active { background-color: rgba(40,46,40,0.92) !important; }
[data-theme="dark"] .sb-pop { background-color: #1b201c; border-color: var(--line-strong); }
[data-theme="dark"] .sb-cultures::-webkit-scrollbar-thumb, [data-theme="dark"] .sb-loc-list::-webkit-scrollbar-thumb { border-color: #1b201c; }
[data-theme="dark"] .sb-sheet-foot { background-color: #1b201c; border-color: var(--line); }
[data-theme="dark"] .sb-foot-next { color: #221805; }
[data-theme="dark"] .sb-cult-group { background-color: #1b201c; }
[data-theme="dark"] .sb-loc-group { background-color: #1b201c; }
[data-theme="dark"] .sb-input { background-color: rgba(255,255,255,0.04); }
[data-theme="dark"] .sb-go, [data-theme="dark"] .sb-chip.on, [data-theme="dark"] .sb-city.on, [data-theme="dark"] .sb-cal-cell.sel { color: #221805; }
[data-theme="dark"] .sb-go svg { color: #221805; }
[data-theme="dark"] .mode-card.on .mode-ic { color: #221805; }
[data-theme="dark"] .profile-hero { background-color: var(--glass); box-shadow: none; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
[data-theme="dark"] .svc-cover .cat-tag { background: rgba(14,18,16,0.5); box-shadow: none; }
[data-theme="dark"] .locked-veil { background: linear-gradient(180deg, rgba(14,18,16,0.55), rgba(14,18,16,0.86)); }
[data-theme="dark"] .scrim { background: rgba(8,11,9,0.72); }
[data-theme="dark"] .modal-close { background: rgba(14,18,16,0.6); box-shadow: none; }
[data-theme="dark"] .modal-close:hover { background: rgba(14,18,16,0.85); }
[data-theme="dark"] .btn-primary { background-color: var(--amber); color: #221805; box-shadow: 0 8px 22px -10px rgba(230,174,94,0.55); }
[data-theme="dark"] .btn-primary:hover { background-color: var(--amber-bright); box-shadow: none; }
[data-theme="dark"] .chip.on,
[data-theme="dark"] .culture-tile.on .ct-name,
[data-theme="dark"] .culture-select .cs-opt.on,
[data-theme="dark"] .subnav button.on,
[data-theme="dark"] .theme-toggle button.on { color: #1a1710; }
[data-theme="dark"] .chip.on .chip-ct,
[data-theme="dark"] .culture-tile.on .ct-count { color: rgba(26,23,16,0.55); }
[data-theme="dark"] .seg button.on,
[data-theme="dark"] .access-toggle.on .ck { color: #221805; }


/* ============================================================
   MOBILE MENU, hamburger + slide-in drawer (phones)
   ============================================================ */
.tb-burger { display: none; }
.drawer-scrim { display: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px var(--s3); margin-bottom: var(--s2); border-bottom: 1px solid var(--line); }
.drawer-head .brand { gap: 9px; }
.drawer-nav { display: flex; flex-direction: column; gap: 2px; }
.drawer-item {
  display: flex; align-items: center; gap: 14px;
  width: 100%; text-align: left; min-height: 50px;
  padding: 13px 14px; border-radius: var(--r);
  font-size: 1rem; font-weight: 600; color: var(--bone-2);
  transition: var(--t-fast);
}
.drawer-item:hover { background-color: rgba(var(--ov),0.05); color: var(--bone); }
.drawer-item.on { background-color: var(--amber-dim); color: var(--bone); }
.drawer-item svg { color: var(--taupe); flex-shrink: 0; }
.drawer-item.on svg { color: var(--amber); }
.drawer-foot { margin-top: auto; padding-top: var(--s4); border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.drawer-foot .df-label { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--taupe); }

/* account card at the top of the drawer */
.drawer-account { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px; border-radius: var(--r-lg); border: 1px solid var(--line); background: rgba(var(--ov),0.03); transition: var(--t-fast); margin-bottom: var(--s4); }
.drawer-account:hover { border-color: var(--amber-deep); background: var(--amber-dim); }
.da-av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 1.375rem; background: var(--amber-dim); border: 1px solid var(--line-faint); flex-shrink: 0; }
.da-text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.da-name { font-size: 0.9375rem; font-weight: 600; color: var(--bone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.da-loc { font-size: 0.8125rem; color: var(--taupe); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.da-go { display: inline-flex; align-items: center; gap: 2px; font-size: 0.8125rem; font-weight: 600; color: var(--amber); flex-shrink: 0; }

/* drawer: section grouping */
.drawer-divider { height: 1px; background: var(--line); margin: var(--s3) 4px; flex-shrink: 0; }
.drawer-prefs { display: flex; flex-direction: column; gap: 2px; }
.drawer-prefs .df-label { display: block; font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--taupe); padding: 4px 4px 7px; }

/* nav badges */
.di-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill); background: var(--amber); color: #FAFAF8; font-family: var(--mono); font-size: 0.8125rem; font-weight: 700; display: grid; place-items: center; }
.di-chk { margin-left: auto; color: var(--amber); }
[data-theme="dark"] .di-badge { color: #221805; }

/* browsing-as cultural lens, compact pills */
.drawer-ids { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 2px 6px; }
.did { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); color: var(--bone-2); font-size: 0.8125rem; font-weight: 500; transition: var(--t-fast); }
.did:hover { color: var(--bone); border-color: var(--taupe); }
.did.on { background: var(--amber-dim); border-color: var(--amber-deep); color: var(--bone); }
.did svg { color: var(--taupe); flex-shrink: 0; }
.did.on svg { color: var(--amber); }
.did-flag { font-size: 0.9375rem; line-height: 1; }

/* settings row (language, appearance) */
.drawer-row { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; padding: 12px; border-radius: var(--r-lg); color: var(--bone-2); transition: var(--t-fast); }
.drawer-row:hover { background: rgba(var(--ov),0.05); color: var(--bone); }
.drawer-row > svg { color: var(--taupe); flex-shrink: 0; }
.drawer-row > svg:last-child { color: var(--taupe-3); }
.dr-label { font-size: 0.9063rem; font-weight: 500; }
.dr-value { margin-left: auto; font-size: 0.8438rem; color: var(--taupe); }
.drawer-row-static { cursor: default; }
.drawer-row-static:hover { background: none; color: var(--bone-2); }
.drawer-row-static .dr-label { margin-right: auto; }

/* language switcher, scrim only used as a phone bottom-sheet backdrop */
.lang-scrim { display: none; }
@keyframes drawerin { from { transform: translateX(100%); } to { transform: none; } }
@keyframes drawer-sheet-up { from { transform: translateY(100%); } to { transform: none; } }
.sb-scrim { display: none; }
.sb-sheet-foot { display: none; }
@keyframes sb-sheet-up { from { transform: translateY(100%); } to { transform: none; } }

/* ============================================================
   RESPONSIVE, TABLET (≤860px)
   ============================================================ */
@media (max-width: 860px) {
  .page { padding-left: var(--s6); padding-right: var(--s6); }
  .hero { padding-left: var(--s6); padding-right: var(--s6); padding-top: var(--s12); }
  .topbar { padding-left: var(--s5); padding-right: var(--s5); gap: var(--s4); }
  .svp-bar { padding-left: var(--s6); padding-right: var(--s6); }
}

/* ============================================================
   RESPONSIVE, NAV COLLAPSE (≤920px)
   At tablet width and below the inline nav + grouped account menu fold into
   the hamburger drawer, the standard pattern for extensive navigation.
   ============================================================ */
@media (max-width: 920px) {
  .tb-burger { display: grid; }
  .drawer-scrim {
    display: block; position: fixed; inset: 0; z-index: 120;
    background: rgba(26, 24, 20, 0.42);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    animation: fadein 180ms var(--ease);
  }
  .drawer {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: min(86vw, 340px);
    background-color: var(--ink-800);
    border-left: 1px solid var(--line-strong);
    box-shadow: var(--shadow-pop);
    display: flex; flex-direction: column;
    padding: var(--s4) var(--s4) calc(var(--s5) + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    animation: drawerin 240ms var(--ease);
  }
  /* the account menu + standalone sign-up live inside the drawer at this width */
  .acct.tb-signup { display: none; }
}

/* ============================================================
   RESPONSIVE, PHONE (≤640px)
   ============================================================ */
@media (max-width: 640px) {
  /* same containing-block trap as the topbar: backdrop-filter on the fixed
     scrim, combined with iOS Safari's dynamic viewport-height changes when
     the drawer opens, made the whole panel appear to jump/slide toward the
     top instead of a clean slide-in from the right. Solid scrim avoids it. */
  .drawer-scrim { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(26, 24, 20, 0.55); }
  /* match the rest of the app's mobile sheets (Filters, Dropdown): slide up
     from the bottom instead of in from the side, full width, rounded top */
  .drawer-scrim { align-items: flex-end; display: flex; }
  .drawer {
    position: relative; top: auto; right: auto; bottom: auto;
    width: 100%; max-height: 84dvh;
    border-left: none; border-top: 1px solid var(--line-strong);
    border-radius: 20px 20px 0 0;
    padding: var(--s4) var(--s4) calc(var(--s5) + env(safe-area-inset-bottom, 0px));
    animation: drawer-sheet-up 260ms var(--ease);
  }
  /*, slim top bar: brand + quick icons + hamburger, */
  /* drop the backdrop-filter on phones: it creates a containing block that
     traps position:fixed bottom-sheets (notifications) inside the bar. Solid
     surface keeps the bar legible without it. */
  .topbar {
    height: 58px; padding: 0 var(--s4); gap: var(--s3);
    background-color: var(--ink-800);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    z-index: 100;   /* above the bottom tab bar (90) so the notif sheet + scrim cover it */
  }
  .topbar-actions { gap: var(--s2); }
  /* the hamburger drawer owns mobile navigation; the bottom tab bar is retired */
  .bottomnav { display: none; }
  body { padding-bottom: calc(var(--s6) + env(safe-area-inset-bottom)); }
  .fab-top { bottom: calc(20px + env(safe-area-inset-bottom)); }
  .toast { bottom: calc(20px + env(safe-area-inset-bottom)); }
  .brand-word { font-size: 1.1875rem; }
  .identity { height: 36px; padding: 0 6px 0 10px; gap: 8px; }
  .identity .id-label { display: none; }
  .identity .id-name { font-size: 0.8125rem; }
  .theme-toggle { padding: 4px; gap: 6px; }
  .theme-toggle button { width: 44px; height: 44px; }
  .sb-clear { width: 44px; height: 44px; }
  .svc-search-input .cs-clear { width: 32px; height: 32px; }

  /*, page & hero rhythm, */
  .page { padding-left: var(--s4); padding-right: var(--s4); padding-bottom: var(--s12); }
  .hero { padding: var(--s10) var(--s4) var(--s6); }
  .hero-sub { font-size: 1rem; margin-top: var(--s4); }
  .hero h1 { line-height: 1.06; }

  /* big inline section titles → calmer on phone */
  .page h2 { font-size: 1.625rem !important; line-height: 1.14; }
  .section-head { flex-wrap: nowrap; gap: var(--s3); align-items: center; justify-content: space-between; }
  .section-head h2 { font-size: 1.5rem !important; }
  /* see-all: a proper 44px pill tap target, higher contrast, not faint text */
  .section-head .see-all { flex: none; height: 40px; padding: 0 14px; border-radius: var(--r-pill); background: var(--amber-dim); color: var(--amber-deep); font-size: 0.8125rem; font-weight: 700; }

  /*, Services / Events fork: side-by-side on mobile, */
  .mode-switch { flex-direction: row; max-width: none; gap: 10px; margin-top: var(--s6); }
  .mode-card { padding: 13px 14px; gap: 11px; min-width: 0; }
  .mode-ic { width: 40px; height: 40px; border-radius: 11px; }
  .mode-title { font-size: 1rem; }
  .mode-sub { display: none; }

  /*, all card grids → single column, */
  .grid-svc.grid-evt.grid-grp { grid-template-columns: 1fr; gap: var(--s4); }

  /*, search: full-width stacked fields, one clear tap target per row, */
  .searchbar {
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 6px; border-radius: var(--r-xl);
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  }
  .searchbar.sb-open { z-index: 200; }            /* lift above the top bar while a sheet is open */
  .sb-segwrap.sb-segwrap-last.svc-search-main { flex: 1 1 auto; width: 100%; }
  .sb-seg.sb-compact .sb-seg { width: 100%; padding: 14px 16px; border-radius: var(--r-lg); }
  /* stacked rows: last field returns to left alignment like the others */
  .sb-segwrap-last .sb-seg { align-items: flex-start; text-align: left; }
  .sb-segwrap-last .sb-seg .sb-label.sb-segwrap-last .sb-seg .sb-value { text-align: left; }
  /* vertical dividers become horizontal hairlines between the stacked rows */
  .sb-div { display: block !important; width: auto; height: 1px; align-self: stretch; margin: 0 14px; }
  /* full-width, thumb-friendly search button */
  .sb-go.sb-compact .sb-go { width: 100%; margin: 8px 0 0; height: 54px; border-radius: var(--r-pill); font-size: 1rem; }

  /* dimming scrim behind the bottom sheets */
  .sb-scrim {
    display: block; position: fixed; inset: 0; z-index: 150;
    background: rgba(26, 24, 20, 0.45);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    animation: fadein 160ms var(--ease);
  }

  /* CRITICAL: the search bottom-sheets are position:fixed and must anchor to
     the viewport. An ancestor with backdrop-filter / filter / transform becomes
     their containing block instead, which pins the sheet to the (narrower,
     centred) search bar and throws off the left/right spacing. The dark-theme
     searchbar carries a backdrop-filter, so neutralise it while a sheet is open. */
  .searchbar.sb-open,
  [data-theme="dark"] .searchbar.sb-open {
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    filter: none !important; transform: none !important;
  }

  /* every search popover becomes a full-width bottom sheet */
  .sb-pop {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    width: auto; min-width: 0; max-width: none;
    max-height: 84vh; overflow-y: auto;
    margin: 0;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    border-left: none; border-right: none; border-bottom: none;
    padding: var(--s5) var(--s5) 0;
    z-index: 160;
    box-shadow: 0 -18px 50px -12px rgba(20, 16, 10, 0.4);
    animation: sb-sheet-up 280ms var(--ease);
  }
  .sb-pop-guests.sb-segwrap-last .sb-pop.sb-pop-when { left: 0; right: 0; min-width: 0; }
  /* grab handle affordance */
  .sb-pop::before {
    content: ""; display: block; width: 42px; height: 4px; border-radius: 999px;
    background: var(--line-strong); margin: 0 auto 16px;
  }
  /* roomier, thumb-friendly controls inside the sheets */
  .sb-pop-title { font-size: 0.8125rem; margin-bottom: 14px; }
  .sb-input { height: 52px; margin-bottom: 16px; }
  .sb-input input { font-size: 16px; }
  .sb-cities.sb-when { gap: 10px; }
  .sb-city { padding: 13px 18px; font-size: 0.9375rem; }
  .sb-chip { padding: 13px 20px; font-size: 0.9375rem; }
  .sb-preset { flex: 1 1 44%; padding: 14px 16px; }
  .sb-cultures { max-height: 52vh; }
  .sb-loc-list { max-height: 52vh; }
  .sb-cult { padding: 13px 12px; }
  .sb-cal-cell { font-size: 0.9375rem; }
  .sb-grow { padding: 18px 2px; }
  .sb-step-btn { width: 42px; height: 42px; }

  /* sticky guided-flow footer pinned to the bottom of every sheet */
  .sb-sheet-foot {
    display: flex; align-items: center; gap: 12px;
    position: sticky; bottom: 0;
    margin: var(--s4) calc(-1 * var(--s5)) 0;
    padding: 12px var(--s5) calc(14px + env(safe-area-inset-bottom, 0px));
    background-color: #FFFFFF;
    border-top: 1px solid var(--line);
  }
  .sb-foot-skip {
    flex-shrink: 0; padding: 13px 8px;
    font-size: 0.875rem; font-weight: 600; color: var(--taupe);
  }
  .sb-foot-skip:hover { color: var(--bone); }
  .sb-foot-next {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 52px; border-radius: var(--r-pill);
    background-color: var(--amber); color: #FAFAF8;
    font-size: 0.9688rem; font-weight: 600;
  }
  .sb-foot-next:active { transform: translateY(1px); }

  /*, services result bar / search & sort stack full width, */
  .resultbar { flex-direction: column; align-items: stretch; gap: var(--s3); }
  .resultbar > div { flex-wrap: wrap; gap: 10px; }
  .resultbar .field { width: 100% !important; }
  .resultbar .sort { flex: 1; justify-content: space-between; }

  /*, community filter bar wraps cleanly, */
  .filterbar { gap: 12px; }
  .filtergroup { flex-wrap: wrap; }

  /*, forms collapse to one column, */
  .form-2col { grid-template-columns: 1fr; }

  /*, detail modal goes true full-screen, no gray gutter, */
  .scrim { padding: 0; align-items: stretch; }
  /* the checkout card is a different, always-rounded component (.svp-checkout-page,
     not .modal) — it shouldn't go edge-to-edge like the generic detail modal.
     Give it even padding on all sides and center it instead of pinning to the top. */
  .scrim:has(.svp-checkout-page) { padding: var(--s4); align-items: center; justify-content: center; }
  .svp-checkout-page { height: calc(100dvh - var(--s4) * 2); max-height: calc(100dvh - var(--s4) * 2); }
  .modal { max-width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; border: none; }
  .modal-body { padding: var(--s5); }
  .modal-title { font-size: 1.4375rem; }
  .modal-foot { padding: var(--s4) var(--s5); padding-bottom: calc(var(--s4) + env(safe-area-inset-bottom)); flex-wrap: wrap; }
  .modal-foot .btn-primary { flex: 1 1 100%; order: -1; white-space: nowrap; }
  .modal-foot .btn-ghost { flex: none; }
  .modal-foot .co-foot-total { flex: 1; text-align: right; }

  /*, profile, */
  .profile-hero { padding: var(--s6) var(--s5) var(--s5); }
  .ph-inner { gap: var(--s5); }
  .pf-avatar { width: 80px; height: 80px; font-size: 2rem; }
  .pf-avatar .pf-av-flag { font-size: 1.5rem; }
  .ph-id { min-width: 0; }
  .ph-verified { margin-left: 0; margin-top: 10px; display: inline-flex; }
  .pf-stats { gap: var(--s3); }
  .pf-stat { padding: var(--s4) var(--s5); }
  .pf-stat .ps-num { font-size: 1.75rem; }
  .pf-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .pf-tabs::-webkit-scrollbar { display: none; }
  .pf-tab { white-space: nowrap; flex-shrink: 0; }

  /*, toast spans width on phone, clear of the browser's bottom chrome, */
  .toast { left: var(--s4); right: var(--s4); transform: none; justify-content: center; animation: none;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
}

/* ============================================================
   RESPONSIVE, SMALL PHONE (≤400px)
   ============================================================ */
@media (max-width: 400px) {
  .identity .id-av { display: none; }
}

/* ============================================================
   SERVICES, Airbnb-style type browser, toolbar & add-on options
   ============================================================ */

/* card hints */
.addons-hint { display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.01em; color: var(--amber); }
.addons-hint svg { color: var(--amber); }
.price-from { font-family: var(--mono); font-size: 0.8125rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--taupe); margin-right: 5px; }

/* category browse bar */
.catbar { margin-bottom: var(--s5); border-bottom: 1px solid var(--line);
  position: relative; }
.catbar-track { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; }
.catbar-track::-webkit-scrollbar { display: none; }
.cat-tab { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 8px 16px 13px; color: var(--taupe); border-bottom: 2px solid transparent;
  margin-bottom: -1px; transition: var(--t-fast); }
.cat-tab .ct-ic { color: var(--taupe); transition: var(--t-fast); }
.cat-tab .ct-lbl { font-size: 0.8125rem; font-weight: 600; white-space: nowrap; }
.cat-tab .ct-n { font-family: var(--mono); font-size: 0.8125rem; color: var(--taupe-3); }
.cat-tab:hover { color: var(--bone); }
.cat-tab:hover .ct-ic { color: var(--bone); }
.cat-tab.on { color: var(--bone); border-bottom-color: var(--bone); }
.cat-tab.on .ct-ic { color: var(--amber); }
.cat-tab.on .ct-n { color: var(--amber); }

/* slim toolbar, access · search · sort */
.svc-toolbar { display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s6); padding-bottom: var(--s4); border-bottom: 1px solid var(--line); }
.stb-access { display: flex; gap: 8px; flex-wrap: wrap; }
.acc-pill { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px;
  border-radius: var(--r-pill); border: 1px solid var(--line); background: rgba(var(--ov),0.025);
  font-size: 0.8438rem; font-weight: 500; color: var(--bone-2); transition: var(--t-fast); }
.acc-pill .acc-g { font-size: 0.875rem; line-height: 1; }
.acc-pill:hover { border-color: var(--line-strong); color: var(--bone); }
.acc-pill.acc-open.on { background: var(--green-dim); border-color: rgba(26,143,227,0.5); color: var(--green); font-weight: 600; }
.acc-pill.acc-led.on  { background: var(--led-bg); border-color: var(--led-bd); color: var(--led); font-weight: 600; }
.acc-pill.acc-only.on { background: var(--clay-dim); border-color: rgba(196,76,134,0.5); color: var(--clay); font-weight: 600; }
.stb-right { display: flex; align-items: center; gap: 12px; }
.stb-search { display: flex; align-items: center; gap: 9px; height: 38px; width: 286px; max-width: 100%;
  padding: 0 12px 0 14px; border-radius: var(--r-pill); background: rgba(var(--ov),0.04);
  border: 1px solid var(--line); transition: var(--t-fast); }
.stb-search:focus-within { border-color: var(--amber-deep); background: rgba(26,143,227,0.06); }
.stb-search > svg { color: var(--taupe); flex-shrink: 0; }
.stb-search input { flex: 1; min-width: 0; background: none; border: none; outline: none; color: var(--bone); font-size: 0.875rem; }
.stb-search input::placeholder { color: var(--taupe-3); }
.stb-clear { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  color: var(--taupe); background: rgba(var(--ov),0.07); flex-shrink: 0; transition: var(--t-fast); }
.stb-clear:hover { color: var(--bone); background: rgba(var(--ov),0.12); }

/* identity unlock banner */
.svc-idbanner { display: flex; align-items: center; gap: 11px; padding: 12px 16px;
  border: 1px solid rgba(196,76,134,0.26); background: var(--clay-dim); border-radius: var(--r);
  color: var(--clay); font-size: 0.8438rem; line-height: 1.45; margin-bottom: var(--s6); }
.svc-idbanner svg { flex-shrink: 0; }
.svc-idbanner b { font-weight: 700; }

/* grouped type sections */
.svc-sections { display: flex; flex-direction: column; gap: var(--s12); }
.svc-sec-eyebrow { display: inline-flex; align-items: center; gap: 7px; color: var(--amber); margin-bottom: 8px; }
.svc-sec-eyebrow svg { color: var(--amber); }

/* modal, additional options */
.opts { display: flex; flex-direction: column; gap: var(--s4); }
.opts-head { display: flex; flex-direction: column; gap: 3px; }
.opts-title { font-family: var(--serif); font-size: 1.1875rem; font-weight: 600; color: var(--bone); }
.opts-sub { font-size: 0.875rem; color: var(--taupe); }
.opt-list { display: flex; flex-direction: column; gap: 8px; }
.opt { display: flex; align-items: center; gap: 13px; text-align: left; padding: 13px 15px;
  border: 1px solid var(--line); border-radius: var(--r); background: rgba(var(--ov),0.02); transition: var(--t-fast); }
.opt:hover { border-color: var(--line-strong); background: rgba(var(--ov),0.05); }
.opt.on { border-color: var(--amber); background: var(--amber-dim); box-shadow: inset 0 0 0 1px var(--amber); }
.opt-check { width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--line-strong);
  display: grid; place-items: center; flex-shrink: 0; color: #FAFAF8; transition: var(--t-fast); }
.opt-check svg { opacity: 0; transition: var(--t-fast); }
.opt.on .opt-check { background: var(--amber); border-color: var(--amber); }
.opt.on .opt-check svg { opacity: 1; }
.opt-text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.opt-name { font-size: 0.9063rem; font-weight: 600; color: var(--bone); }
.opt-desc { font-size: 0.875rem; color: var(--taupe); line-height: 1.4; }
.opt-price { font-family: var(--serif); font-size: 1rem; font-weight: 700; color: var(--bone); white-space: nowrap; flex-shrink: 0; }
.opt-price small { font-family: var(--sans); font-size: 0.8125rem; color: var(--taupe); font-weight: 400; }

/* modal, booking total readout */
.book-total { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.bt-rows { padding: 14px 16px; display: flex; flex-direction: column; gap: 9px; }
.bt-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 0.875rem; }
.bt-row > span { display: inline-flex; align-items: center; gap: 7px; color: var(--bone-2); }
.bt-row b { font-weight: 600; white-space: nowrap; color: var(--bone); }
.bt-row b small { font-size: 0.8125rem; color: var(--taupe); font-weight: 400; margin-left: 1px; }
.bt-row.sub > span { color: var(--amber); }
.bt-row.sub svg { color: var(--amber); }
.bt-foot { display: flex; align-items: center; justify-content: space-between;
  padding: 11px 16px; border-top: 1px solid var(--line); background: rgba(var(--ov),0.03); }
.bt-label { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.04em; color: var(--taupe); }
.bt-sum { font-family: var(--serif); font-size: 1.1875rem; font-weight: 700; color: var(--bone); }

/* services, small screens */
@media (max-width: 760px) {
  .svc-toolbar { flex-direction: column; align-items: stretch; }
  .stb-right { flex-direction: column; align-items: stretch; }
  .stb-search { width: 100%; }
  .stb-right .sort { justify-content: space-between; }
  .cat-tab { padding: 6px 13px 11px; }
  .cat-tab .ct-lbl { font-size: 0.8125rem; }
  .svc-sections { gap: var(--s10); }

  /* compact mobile filter button, inline with the search bar */
  .mob-filter-btn { height: 40px; padding: 0 12px; font-size: 0.8125rem; }
  .mob-filter-btn .mfb-count { min-width: 16px; height: 16px; font-size: 0.8125rem; }
  .svc-search-row { gap: 8px; margin-bottom: var(--s3); }

  /* compact search bar */
  .svc-search-input { height: 40px; padding: 0 12px; gap: 8px; margin-bottom: var(--s4); }
  .svc-search-input input { font-size: 0.875rem; }

  /* sort now lives in the Filters sheet on mobile — this row is just the
     result count and the saved-heart, tight and left/right aligned */
  .svc-toolbar { flex-direction: row; align-items: center; margin-bottom: var(--s4); }
}

/* ============================================================
   GUIDED SERVICES, goals · journeys · packages · trust
   ============================================================ */

/* ── Services search bar, text + location + culture ───────
   Segments stay icon-free to match the shared Where·When·Culture pill: the
   single magnifying-glass lives on the submit pill in both bars. The first
   segment is a free-text field but aligns to the same label+value rhythm. */
.svc-search .sb-seg.sb-seg-input {
  flex-direction: row; align-items: center; gap: 12px; cursor: text;
}
.svc-search-main { flex: 2.2; }
.sb-seg-inwrap { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.sb-textinput {
  background: none; border: none; outline: none; width: 100%; min-width: 0;
  font-family: var(--sans); font-size: 0.9375rem; font-weight: 600; color: var(--bone);
}
.sb-textinput::placeholder { color: var(--taupe-3); font-weight: 500; }
.svc-search .sb-seg-input .sb-clear { margin-left: 4px; }
.sb-pop-svc { min-width: 320px; }
[data-theme="dark"] .sb-textinput { color: var(--bone); }

/* ============================================================
   Dropdown, one reusable custom-select (see dropdown.jsx)
   ============================================================ */
.dd-wrap { position: relative; display: inline-flex; min-width: 0; }
.dd-wrap.block { display: flex; width: 100%; }
.dd-trigger { display: inline-flex; align-items: center; gap: 10px; width: 100%; font-family: inherit; text-align: left; transition: var(--t-fast); }
.dd-trigger-icon { display: flex; flex-shrink: 0; }
.dd-trigger-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-chev { flex-shrink: 0; color: var(--taupe); transition: transform var(--t-fast); pointer-events: none; }
.dd-trigger.open .dd-chev { transform: rotate(180deg); }

.dd-trigger-field { height: 50px; padding: 0 44px 0 16px; border-radius: var(--r-lg); border: 1.5px solid var(--line); background: rgba(var(--ov),0.04); color: var(--bone); font-size: 0.9375rem; cursor: pointer; }
.dd-trigger-field .dd-chev { position: absolute; right: 16px; }
.dd-trigger-field:hover { border-color: var(--line-strong); }
.dd-trigger-field.open, .dd-trigger-field:focus-visible { border-color: var(--sky); outline: none; box-shadow: 0 0 0 3px var(--sky-dim); }
.dd-trigger-field .dd-trigger-label.ph { color: var(--taupe-3); }

.dd-trigger-rail { position: relative; gap: 9px; padding: 9px 12px; border-radius: var(--r-sm); border: 1px solid var(--line); background: rgba(var(--ov),0.02); color: var(--taupe); font-size: 0.8125rem; cursor: pointer; }
.dd-trigger-rail:hover { border-color: var(--line-strong); color: var(--bone); background: rgba(var(--ov),0.04); }
.dd-trigger-rail.open, .dd-trigger-rail:focus-visible { border-color: var(--amber-deep); color: var(--bone); outline: none; }
.dd-trigger-rail .dd-trigger-icon { color: var(--taupe); }
.dd-trigger-rail .dd-trigger-label.ph { color: var(--taupe); }

.dd-trigger-pill { height: 40px; padding: 0 14px 0 15px; border-radius: var(--r-pill); border: 1px solid var(--line); background: rgba(var(--ov),0.02); color: var(--bone-2); font-size: 0.8125rem; font-weight: 600; cursor: pointer; }
.dd-trigger-pill:hover, .dd-trigger-pill.open { border-color: var(--line-strong); background: rgba(var(--ov),0.04); color: var(--bone); }
.dd-trigger-pill:focus-visible { border-color: var(--amber-deep); outline: none; }
.dd-trigger-pill .dd-trigger-icon { color: var(--taupe); }

@keyframes dd-in-down { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes dd-in-up { from { opacity: 0; transform: translateY(6px) scale(0.98); } to { opacity: 1; transform: none; } }
.dd-menu {
  position: fixed; z-index: 1500; overflow-y: auto;
  border-radius: var(--r-lg); border: 1px solid var(--line);
  background: var(--ink-800); box-shadow: var(--shadow-pop);
  padding: 6px; transform-origin: top center;
  animation: dd-in-down 160ms var(--ease);
  scrollbar-width: thin;
}
.dd-menu[data-flip="up"] { transform-origin: bottom center; animation-name: dd-in-up; }
.dd-menu::-webkit-scrollbar { width: 8px; }
.dd-menu::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--r-pill); }
.dd-list { list-style: none; display: flex; flex-direction: column; gap: 1px; }
.dd-option { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: var(--r-sm); font-size: 0.9375rem; color: var(--bone-2); cursor: pointer; transition: var(--t-fast); white-space: nowrap; overflow: visible; }
.dd-option .dd-optcheck { width: 17px; flex: none; display: flex; align-items: center; justify-content: center; color: var(--sky); }
.dd-option .dd-optlabel { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dd-option.hi { background: rgba(var(--ov),0.06); }
.dd-option.sel { color: var(--bone); font-weight: 600; }
.dd-option.sel.hi { background: var(--sky-dim); }
.dd-option.disabled { color: var(--taupe-3); cursor: not-allowed; }

/* opt-in filter box for a long options list (Dropdown's searchable prop) —
   sticky so it stays put while the list scrolls underneath it. */
.dd-search { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 8px 9px; margin-bottom: 4px; background: var(--ink-800); border-bottom: 1px solid var(--line); border-radius: var(--r-sm); }
.dd-search svg { color: var(--taupe); flex-shrink: 0; }
.dd-search input { flex: 1; min-width: 0; background: none; border: none; outline: none; font-family: var(--sans); font-size: 0.875rem; color: var(--bone); }
.dd-search input::placeholder { color: var(--taupe-3); }
.dd-search-clear { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; color: var(--taupe); flex-shrink: 0; }
.dd-search-clear:hover { color: var(--bone); }
.dd-empty { padding: 14px 12px; font-size: 0.8438rem; color: var(--taupe); text-align: center; }

.dd-sheet-scrim { position: fixed; inset: 0; z-index: 1500; background: rgba(20,18,14,0.4); display: flex; align-items: flex-end; animation: dd-scrim-in 160ms var(--ease); }
@keyframes dd-scrim-in { from { opacity: 0; } to { opacity: 1; } }
.dd-sheet { width: 100%; max-height: 74vh; display: flex; flex-direction: column; background: var(--ink-800); border-radius: 20px 20px 0 0; box-shadow: var(--shadow-pop); animation: dd-sheet-up 220ms var(--ease); padding-bottom: env(safe-area-inset-bottom, 0px); }
@keyframes dd-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
.dd-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 12px; border-bottom: 1px solid var(--line); font-size: 0.9375rem; font-weight: 700; color: var(--bone); }
.dd-sheet-close { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(var(--ov),0.06); color: var(--taupe); flex-shrink: 0; }
.dd-sheet .dd-search-clear { width: 44px; height: 44px; }
.dd-sheet-body { flex: 1; overflow-y: auto; padding: 8px; }
.dd-sheet .dd-option { padding: 14px 14px; font-size: 1rem; }

/* ── Trust indicators on cards ───────────────────────────── */.trust-row { display: flex; flex-wrap: wrap; gap: 6px; }
.trust-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.01em;
  color: var(--bone-2); background: rgba(var(--ov),0.05);
  border: 1px solid var(--line-faint); border-radius: var(--r-pill);
  padding: 4px 9px 4px 8px; white-space: nowrap;
}
.trust-chip svg { color: var(--amber); flex-shrink: 0; }

/* provider response-time chip (card + modal) */
.pv-resp {
  display: inline-flex; align-items: center; gap: 4px; margin-left: auto; align-self: flex-start;
  font-family: var(--mono); font-size: 0.8125rem; font-weight: 500; color: var(--green);
  background: var(--green-dim); border-radius: var(--r-pill); padding: 4px 9px; white-space: nowrap; flex-shrink: 0;
}
.pv-resp svg { color: var(--green); }
.provider .pv-meta {
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}

/* ── Service preview ("what you'll get" peek) ────────────── */
.svc-preview { background: rgba(var(--ov),0.04); border: 1px solid var(--line-faint); border-radius: var(--r-sm); padding: 12px 13px; margin-top: 4px; }
.svp-label { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green); margin-bottom: 7px; }
.svp-list { list-style: none; display: flex; flex-direction: column; gap: 5px; }
.svp-list li { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; color: var(--bone-2); line-height: 1.35; }
.svp-list li svg { color: var(--green); flex-shrink: 0; }
.svp-more { font-family: var(--mono); font-size: 0.8125rem; color: var(--amber) !important; padding-left: 21px; }

/* ── Journey promo strip ─────────────────────────────────── */
.journey-strip {
  display: flex; align-items: center; gap: var(--s5);
  padding: var(--s5) var(--s6); border-radius: var(--r-xl);
  border: 1px solid var(--line); background: #FFFFFF;
  box-shadow: var(--shadow-card); position: relative; overflow: hidden;
}
.journey-strip::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(420px 200px at 0% 0%, color-mix(in srgb, var(--j-tone) 16%, transparent), transparent 70%);
}
.js-emblem {
  width: 64px; height: 64px; border-radius: 18px; flex-shrink: 0; position: relative; z-index: 1;
  display: grid; place-items: center; font-size: 2.125rem;
  background: color-mix(in srgb, var(--j-tone) 16%, #fff); border: 1px solid var(--line);
}
.js-body { flex: 1; min-width: 0; position: relative; z-index: 1; }
.js-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber); margin-bottom: 6px; }
.js-eyebrow svg { color: var(--amber); }
.js-title { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; color: var(--bone); line-height: 1.15; }
.js-tagline { font-size: 0.875rem; color: var(--taupe); margin-top: 3px; }
.js-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 12px; }
.js-step {
  font-size: 0.8125rem; color: var(--bone-2); background: rgba(var(--ov),0.05);
  border: 1px solid var(--line-faint); border-radius: var(--r-pill); padding: 5px 11px; white-space: nowrap;
}
.js-arrow { color: var(--taupe-3); display: inline-flex; }
.journey-strip .js-go { flex-shrink: 0; position: relative; z-index: 1; }

/* ── Journey mini-cards (browse view) ────────────────────── */
.journey-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.journey-mini {
  display: flex; align-items: center; gap: 14px; text-align: left;
  padding: 18px 18px; border-radius: var(--r-lg);
  border: 1px solid var(--line); background: #FFFFFF; box-shadow: var(--shadow-sm);
  transition: var(--t); position: relative; overflow: hidden;
}
.journey-mini::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(300px 160px at 0% 0%, color-mix(in srgb, var(--j-tone) 14%, transparent), transparent 70%);
}
.journey-mini:hover { transform: translateY(-2px); border-color: var(--line-strong); box-shadow: var(--shadow-card); }
.jm-flag { font-size: 2.125rem; line-height: 1; flex-shrink: 0; position: relative; z-index: 1; }
.jm-body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; position: relative; z-index: 1; }
.jm-title { font-family: var(--serif); font-size: 1.125rem; font-weight: 600; color: var(--bone); line-height: 1.2; }
.jm-tagline { font-size: 0.8125rem; color: var(--taupe); line-height: 1.4; }
.jm-meta { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.04em; color: var(--amber); margin-top: 5px; }
.jm-meta svg { color: var(--amber); }
.jm-go { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; color: var(--taupe); background: rgba(var(--ov),0.05); transition: var(--t-fast); position: relative; z-index: 1; }
.journey-mini:hover .jm-go { background: var(--amber); color: #FAFAF8; }

/* ── Package cards ───────────────────────────────────────── */
.pack-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
.pack-card {
  display: flex; flex-direction: column; gap: var(--s4);
  padding: var(--s5) var(--s5) var(--s4); border-radius: var(--r-lg);
  border: 1px solid var(--line); background: #FFFFFF; box-shadow: var(--shadow-card);
  position: relative; overflow: hidden;
}
.pack-head { display: flex; align-items: flex-start; gap: 13px; }
.pack-ic {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  display: grid; place-items: center; color: #FAFAF8;
  background: var(--p-tone);
}
.pack-titles { min-width: 0; }
.pack-name { font-family: var(--serif); font-size: 1.1875rem; font-weight: 600; color: var(--bone); line-height: 1.18; }
.pack-tagline { font-size: 0.8125rem; color: var(--taupe); margin-top: 3px; line-height: 1.4; }
.pack-includes { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.pack-includes li { display: flex; align-items: center; gap: 9px; font-size: 0.8438rem; color: var(--bone-2); line-height: 1.35; }
.pack-includes li svg { color: var(--green); flex-shrink: 0; }
.pack-svcs { display: flex; flex-wrap: wrap; gap: 7px; padding-top: 2px; }
.pack-svc { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 4px; border-radius: var(--r-pill); border: 1px solid var(--line); background: rgba(var(--ov),0.03); transition: var(--t-fast); }
.pack-svc:hover { border-color: var(--line-strong); background: rgba(var(--ov),0.06); }
.pack-svc-av { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 0.8125rem; font-weight: 600; color: #FAFAF8; flex-shrink: 0; }
.pack-svc-name { font-size: 0.8125rem; font-weight: 500; color: var(--bone-2); }
.pack-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: var(--s4); border-top: 1px solid var(--line); }
.pack-price { font-family: var(--serif); font-size: 1.375rem; font-weight: 700; color: var(--bone); display: flex; align-items: baseline; gap: 8px; }
.pack-was { font-family: var(--sans); font-size: 0.875rem; font-weight: 400; color: var(--taupe-3); text-decoration: line-through; }
.pack-save { font-family: var(--mono); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--green); background: var(--green-dim); border-radius: var(--r-pill); padding: 3px 8px; align-self: center; }

/* ============================================================
   TRIPS, food-from-home & cross-border rides (two card directions)
   ============================================================ */
.trips-sec { margin-bottom: var(--s10); }
.trips-sec .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s5); flex-wrap: wrap; }

/* layout toggle (compare the two card directions live) */
.trip-layout-toggle { display: inline-flex; gap: 3px; padding: 3px; border-radius: var(--r-pill); background: rgba(var(--ov),0.05); border: 1px solid var(--line); }
.trip-layout-toggle button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 15px; border: none; border-radius: var(--r-pill); background: none; cursor: pointer; font-size: 0.8125rem; font-weight: 600; color: var(--taupe); transition: var(--t-fast); }
.trip-layout-toggle button:hover { color: var(--bone); }
.trip-layout-toggle button.on { background: #FFFFFF; color: var(--bone); box-shadow: var(--shadow-sm); }
[data-theme="dark"] .trip-layout-toggle button.on { background: rgba(40,46,40,0.92); }

.trip-grid { display: grid; gap: var(--s5); margin-top: var(--s5); }
.trip-grid.lay-A { grid-template-columns: repeat(3, 1fr); }
.trip-grid.lay-B { grid-template-columns: repeat(2, 1fr); }

/* per-kind accent */
.tone-carry     { --trip-tone: #C2682E; --trip-tint: rgba(194,104,46,0.10); }
.tone-ride      { --trip-tone: #2E7DA0; --trip-tint: rgba(46,125,160,0.10); }

.trip-card {
  display: flex; flex-direction: column; gap: var(--s4);
  padding: var(--s5); border-radius: var(--r-lg);
  border: 1px solid var(--line); background: #FFFFFF; box-shadow: var(--shadow-card);
  position: relative;
}
[data-theme="dark"] .trip-card { background: var(--glass); backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1); }

.tc-name { font-size: 0.9063rem; font-weight: 600; color: var(--bone); display: inline-flex; align-items: center; gap: 6px; }
.tc-cta { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; padding: 0 16px; height: 40px; border: none; border-radius: var(--r-pill); background: var(--trip-tone); color: #FFFFFF; font-size: 0.8438rem; font-weight: 600; cursor: pointer; transition: var(--t-fast); }
.tc-cta:hover { filter: brightness(1.07); transform: translateY(-1px); }
.tc-av { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-size: 0.8125rem; font-weight: 600; color: #FAFAF8; position: relative; }
.tc-av.lg { width: 46px; height: 46px; font-size: 0.9375rem; }
.tc-av-flag { position: absolute; bottom: -2px; right: -3px; font-size: 0.875rem; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); }

/* trust line */
.trip-trust { display: inline-flex; align-items: center; gap: 5px; font-size: 0.8125rem; font-weight: 600; }
.trip-trust .tt-dot { color: var(--taupe-3); margin: 0 1px; }
.trip-trust .tt-star { color: var(--star); }
.trip-trust .tt-rev { color: var(--taupe); font-weight: 500; }
.trip-trust.ok { color: var(--green); }
.trip-trust.new { color: var(--orange-deep); }

/* ── Layout A: boarding pass ── */
.tripA .tc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tc-kind { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--trip-tone); }
.tc-price { font-family: var(--serif); font-size: 1.0625rem; font-weight: 700; color: var(--bone); }
.tc-price.favour { font-family: var(--mono); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--green); background: var(--green-dim); border-radius: var(--r-pill); padding: 4px 10px; }

.tc-route { display: flex; align-items: center; gap: 10px; padding: var(--s2) 0; }
.tc-end { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.tc-end-to { align-items: flex-end; text-align: right; }
.tc-flag { font-size: 1.625rem; line-height: 1; }
.tc-city { font-size: 0.9375rem; font-weight: 700; color: var(--bone); white-space: nowrap; }
.tc-line { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 64px; }
.tc-line::before { content: ""; position: absolute; top: 17px; left: 2px; right: 2px; height: 2px; background: repeating-linear-gradient(90deg, var(--line-strong) 0 5px, transparent 5px 11px); }
.tc-mode { position: relative; z-index: 1; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--trip-tint); color: var(--trip-tone); border: 1.5px solid var(--trip-tone); }
.tc-dir { font-family: var(--mono); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--taupe); }

.tc-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.tc-meta span { display: inline-flex; align-items: center; gap: 7px; font-size: 0.8125rem; font-weight: 500; color: var(--bone-2); }
.tc-meta svg { color: var(--taupe); }

.tc-goods { display: flex; flex-wrap: wrap; gap: 6px; }
.tc-good { font-size: 0.8125rem; font-weight: 500; color: var(--bone-2); background: rgba(var(--ov),0.04); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 3px 10px; }

.tripA .tc-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: var(--s4); border-top: 1px solid var(--line); }
.tc-traveler { display: flex; align-items: center; gap: 11px; min-width: 0; }
.tc-tv { min-width: 0; display: flex; flex-direction: column; gap: 3px; }

/* ── Layout B: traveler-forward ── */
.tcb-head { display: flex; align-items: center; gap: 12px; }
.tcb-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tcb-sub { font-size: 0.875rem; color: var(--taupe); }
.tcb-kind { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--trip-tone); background: var(--trip-tint); border-radius: var(--r-pill); padding: 5px 11px; flex-shrink: 0; }

.tcb-route { display: flex; align-items: center; gap: 12px; padding: var(--s3) var(--s4); border-radius: var(--r); background: var(--trip-tint); }
.tcb-city { font-size: 0.9375rem; font-weight: 700; color: var(--bone); white-space: nowrap; }
.tcb-arrow { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; color: var(--trip-tone); }
.tcb-arrow i { position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: repeating-linear-gradient(90deg, var(--trip-tone) 0 5px, transparent 5px 11px); opacity: 0.45; }
.tcb-arrow svg { position: relative; z-index: 1; background: var(--trip-tint); padding: 0 6px; box-sizing: content-box; }

.tcb-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.tc-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; font-weight: 600; color: var(--bone-2); background: rgba(var(--ov),0.04); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 5px 11px; }
.tc-chip svg { color: var(--taupe); }
.tc-chip.price { color: var(--bone); }
.tc-chip.price.favour { color: var(--green); border-color: transparent; background: var(--green-dim); }

.tripB .tc-note { font-size: 0.875rem; line-height: 1.5; color: var(--bone-2); }
.tripA .tc-note { font-size: 0.875rem; line-height: 1.45; color: var(--taupe); }
.tcb-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: var(--s4); border-top: 1px solid var(--line); }

@media (max-width: 1040px) {
  .trip-grid.lay-A { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .trip-grid.lay-A.trip-grid.lay-B { grid-template-columns: 1fr; }
  .trips-sec .section-head { align-items: stretch; }
}

/* ============================================================
   JOURNEY VIEW, the click-through guided flow
   ============================================================ */
/* ── Journey switcher: all 4 journeys, real progress, always visible so
   being inside one never hides that the others exist. ── */
.journey-switcher { display: flex; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s6); }
.journey-switch-item {
  display: flex; align-items: center; gap: 10px; text-align: left;
  padding: 10px 14px; border-radius: var(--r); border: 1px solid var(--line); background: var(--ink-800);
  transition: var(--t-fast); flex: 1 1 200px; min-width: 0;
}
.journey-switch-item:hover { border-color: var(--line-strong); }
.journey-switch-item.on { border-color: var(--sky); background: color-mix(in srgb, var(--sky) 6%, var(--ink-800)); cursor: default; }
.jsw-flag { font-size: 1.375rem; flex: none; }
.jsw-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.jsw-title { font-size: 0.8438rem; font-weight: 700; color: var(--bone); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jsw-progress { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 0.8125rem; font-weight: 600; color: var(--taupe); }
.journey-switch-item.on .jsw-progress { color: var(--sky-deep); }
.jsw-progress svg { color: var(--green); flex: none; }

.journey-hero {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s6);
  padding: var(--s6) var(--s8); margin-bottom: var(--s8);
  border-radius: var(--r-xl); border: 1px solid var(--line); background: #FFFFFF;
  box-shadow: var(--shadow-card); position: relative; overflow: hidden;
}
.journey-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(560px 280px at 100% -20%, color-mix(in srgb, var(--j-tone) 16%, transparent), transparent 65%);
}
.jh-emblem { width: 84px; height: 84px; border-radius: 22px; display: grid; place-items: center; font-size: 2.875rem; background: color-mix(in srgb, var(--j-tone) 15%, #fff); border: 1px solid var(--line); position: relative; z-index: 1; }
.jh-text { min-width: 0; position: relative; z-index: 1; }
.jh-title { font-family: var(--serif); font-size: 2.375rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.04; color: var(--bone); }
.jh-desc { font-size: 0.9375rem; line-height: 1.55; color: var(--bone-2); margin-top: 10px; max-width: 60ch; }
.jh-progress { display: flex; flex-direction: column; align-items: center; gap: 10px; flex-shrink: 0; position: relative; z-index: 1; }
.jhp-ring {
  width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--amber) calc(var(--pct) * 1%), rgba(var(--ov),0.10) 0);
}
.jhp-ring::before { content: ""; position: absolute; width: 68px; height: 68px; border-radius: 50%; background: #FFFFFF; border: 1px solid var(--line); }
.jhp-ring span { position: relative; font-family: var(--serif); font-size: 1.625rem; font-weight: 600; color: var(--bone); }
.jhp-ring span small { font-size: 0.8125rem; color: var(--taupe); }
.jhp-label { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.04em; color: var(--taupe); }

.journey-layout { display: grid; grid-template-columns: 300px 1fr; gap: var(--s8); align-items: start; }

/* step rail */
.journey-rail { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 84px; }
.jr-step { display: flex; align-items: flex-start; gap: 14px; text-align: left; padding: 12px 14px; border-radius: var(--r); transition: var(--t-fast); position: relative; }
.jr-step::before {
  content: ""; position: absolute; left: calc(14px + 15px); top: 44px; bottom: -2px; width: 1.5px;
  background: var(--line-strong);
}
.jr-step:last-child::before { display: none; }
.jr-node {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; z-index: 1;
  display: grid; place-items: center; font-family: var(--mono); font-size: 0.8125rem; font-weight: 600;
  color: var(--taupe); background: #FFFFFF; border: 1.5px solid var(--line-strong); transition: var(--t-fast);
}
.jr-text { display: flex; flex-direction: column; gap: 2px; padding-top: 3px; min-width: 0; }
.jr-week { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--taupe-3); }
.jr-title { font-size: 0.875rem; font-weight: 600; color: var(--bone-2); line-height: 1.3; }
.jr-step:hover { background: rgba(var(--ov),0.04); }
.jr-step:hover .jr-node { border-color: var(--bone-2); color: var(--bone); }
.jr-step.cur { background: var(--amber-dim); }
.jr-step.cur .jr-node { border-color: var(--amber); color: var(--amber); box-shadow: 0 0 0 3px var(--amber-dim); }
.jr-step.cur .jr-title { color: var(--bone); }
.jr-step.done .jr-node { background: var(--green); border-color: var(--green); color: #FAFAF8; }
.jr-step.done .jr-title { color: var(--taupe); }

/* active step panel */
.journey-main { border: 1px solid var(--line); border-radius: var(--r-xl); background: #FFFFFF; box-shadow: var(--shadow-card); padding: var(--s8); min-width: 0; }
.js-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.js-stepno { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--amber); }
.js-donetag { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--green); background: var(--green-dim); border-radius: var(--r-pill); padding: 4px 10px; }
.js-donetag svg { color: var(--green); }
.js-h { font-family: var(--serif); font-size: 1.75rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.12; color: var(--bone); }
.js-p { font-size: 0.9375rem; line-height: 1.6; color: var(--bone-2); margin-top: 10px; max-width: 64ch; }
.js-recs { margin-top: var(--s6); }
.js-recs-label { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--taupe); margin-bottom: var(--s4); }
.js-foot { display: flex; align-items: center; gap: 12px; margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--line); }

/* completion state */
.journey-complete { text-align: center; padding: var(--s12) var(--s6); display: flex; flex-direction: column; align-items: center; gap: var(--s3); }
.jc-glyph { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; color: var(--amber); background: var(--amber-dim); border: 1px solid var(--line); margin-bottom: var(--s2); }
.jc-title { font-family: var(--serif); font-size: 2.125rem; font-weight: 600; letter-spacing: -0.02em; color: var(--bone); }
.jc-sub { font-size: 0.9688rem; line-height: 1.6; color: var(--bone-2); max-width: 46ch; }
.jc-sub em { font-style: italic; color: var(--amber); }
.jc-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: var(--s4); }

/* ============================================================
   MODAL, human provider profile · what you'll get · cross-link
   ============================================================ */
.provider-profile { border: 1px solid var(--line); border-radius: var(--r-lg); background: rgba(var(--ov),0.025); padding: var(--s5); display: flex; flex-direction: column; gap: 12px; }
.pp-top { display: flex; align-items: center; gap: 13px; }
.pp-av { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 1.1875rem; font-weight: 600; color: #FAFAF8; position: relative; flex-shrink: 0; }
.pp-av-flag { position: absolute; bottom: -3px; right: -4px; font-size: 1.0625rem; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); }
.pp-id { min-width: 0; flex: 1; }
.pp-name { font-size: 1rem; font-weight: 700; color: var(--bone); display: flex; align-items: center; gap: 6px; }
.pp-bg { font-size: 0.8125rem; color: var(--taupe); margin-top: 2px; }
.pp-mission { font-family: var(--serif); font-size: 1.0313rem; font-style: italic; line-height: 1.45; color: var(--bone); }
.pp-bgline { font-size: 0.8438rem; line-height: 1.5; color: var(--bone-2); margin-top: -4px; }
.pp-langs { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding-top: 10px; border-top: 1px solid var(--line-faint); }
.pp-langs-label { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--taupe-3); margin-right: 2px; }

.modal-includes { display: flex; flex-direction: column; gap: 12px; }
.mi-title { font-family: var(--serif); font-size: 1.1875rem; font-weight: 600; color: var(--bone); }
.mi-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 11px 18px; }
.mi-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.875rem; color: var(--bone-2); line-height: 1.4; }
.mi-list li svg { color: var(--green); flex-shrink: 0; margin-top: 1px; }

.xlink { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 14px 16px; border-radius: var(--r-lg); border: 1px solid var(--line); background: rgba(var(--ov),0.03); transition: var(--t-fast); }
.xlink:hover { border-color: var(--amber-deep); background: var(--amber-dim); }
.xlink-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: var(--amber); background: var(--amber-dim); border: 1px solid var(--line-faint); flex-shrink: 0; }
.xlink-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.xlink-eyebrow { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber); }
.xlink-title { font-family: var(--serif); font-size: 1rem; font-weight: 600; color: var(--bone); line-height: 1.2; }
.xlink-meta { font-size: 0.8125rem; color: var(--taupe); }
.xlink-chev { color: var(--taupe-3); flex-shrink: 0; }
.xlink:hover .xlink-chev { color: var(--amber); }

/* ── dark theme touch-ups ────────────────────────────────── */
[data-theme="dark"] .journey-strip, [data-theme="dark"] .journey-mini,
[data-theme="dark"] .pack-card, [data-theme="dark"] .journey-hero, [data-theme="dark"] .journey-main {
  background: var(--glass); backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1);
}
[data-theme="dark"] .js-emblem, [data-theme="dark"] .jm-flag, [data-theme="dark"] .jh-emblem { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .jhp-ring::before { background: #161B17; }
[data-theme="dark"] .jr-node { background: #161B17; }
[data-theme="dark"] .journey-mini:hover .jm-go { color: #221805; }
[data-theme="dark"] .pack-ic, [data-theme="dark"] .jr-step.done .jr-node { color: #221805; }

/* ============================================================
   GUIDED SERVICES, responsive
   ============================================================ */
@media (max-width: 1040px) {
  .goal-grid.journey-cards.pack-grid { grid-template-columns: repeat(2, 1fr); }
  .journey-layout { grid-template-columns: 1fr; gap: var(--s5); }
  .journey-rail {
    position: static; flex-direction: row; overflow-x: auto; gap: 0;
    padding-bottom: var(--s3); scrollbar-width: none;
    border-bottom: 1px solid var(--line);
  }
  .journey-rail::-webkit-scrollbar { display: none; }
  .jr-step { flex-direction: column; align-items: center; text-align: center; gap: 8px; flex: 0 0 auto; width: 132px; padding: 12px 8px; }
  .jr-step::before { left: calc(50% + 15px); right: auto; top: 26px; bottom: auto; width: calc(100% - 30px); height: 1.5px; }
  .jr-text { align-items: center; padding-top: 0; }
  .jr-title { font-size: 0.8125rem; }
}

@media (max-width: 860px) {
  .journey-hero { grid-template-columns: auto 1fr; padding: var(--s5) var(--s5); gap: var(--s4); }
  .jh-emblem { width: 64px; height: 64px; font-size: 2.125rem; border-radius: 18px; }
  .jh-title { font-size: 1.75rem; }
  .jh-progress { grid-column: 1 / -1; flex-direction: row; gap: 14px; justify-content: flex-start; padding-top: var(--s2); border-top: 1px solid var(--line); }
  .jhp-ring { width: 60px; height: 60px; }
  .jhp-ring::before { width: 46px; height: 46px; }
  .jhp-ring span { font-size: 1.125rem; }
  .journey-main { padding: var(--s5); }
  .journey-strip { flex-wrap: wrap; gap: var(--s4); }
  .journey-strip .js-go { width: 100%; }
  .mi-list { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .goal-grid.journey-cards.pack-grid { grid-template-columns: 1fr; }
  .goal-tile { padding: 15px; }
  .journey-hero { grid-template-columns: 1fr; text-align: left; }
  .jh-desc { font-size: 0.875rem; }
  .js-h { font-size: 1.5rem; }
  .js-foot { flex-wrap: wrap; }
  .js-foot .btn-primary { width: 100%; }
}

/* ============================================================
   CREATE, denser layout, culture dropdown, fewer chips
   ============================================================ */
.create-layout { gap: var(--s8); }
.form-panel { gap: var(--s6); }

.cf { position: relative; max-width: 400px; }
.cf-trigger {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 50px;
  padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r);
  background: rgba(var(--ov),0.04); color: var(--bone); font-size: 0.9375rem;
  text-align: left; transition: var(--t-fast);
}
.cf-trigger:hover { border-color: var(--line-strong); }
.cf-trigger.on { border-color: var(--amber-deep); background: rgba(26,143,227,0.06); }
.cf-flag { font-size: 1.25rem; line-height: 1; }
.cf-name { font-weight: 600; }
.cf-ph { color: var(--taupe-3); }
.cf .sb-pop { min-width: 320px; }

.chips-compact { gap: 7px; }
.chip-more { border-style: dashed; color: var(--amber); font-weight: 600; }
.chip-more:hover { color: var(--amber-bright); border-color: var(--amber-deep); }

/* ── Create: single-click calendar ─────────────────────── */
.cal { position: relative; }
.cal-trigger { display: flex; align-items: center; gap: 10px; cursor: pointer; text-align: left; }
.cal-trigger > svg:first-child { color: var(--amber); flex: none; }
.cal-trigger-label { flex: 1; color: var(--taupe-3); }
.cal-trigger.has-val .cal-trigger-label { color: var(--bone); font-weight: 600; }
.cal-chev { color: var(--taupe); flex: none; }
.cal-pop { position: absolute; z-index: 80; top: calc(100% + 8px); left: 0; width: 304px; max-width: calc(100vw - 28px);
  background-color: var(--glass-strong); backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid var(--line-strong); border-radius: var(--r); box-shadow: var(--shadow-pop); padding: 14px; animation: pop 160ms var(--ease); }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-title { font-weight: 700; font-size: 0.9375rem; color: var(--bone); }
.cal-nav { width: 32px; height: 32px; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--bone-2); transition: var(--t-fast); }
.cal-nav:hover { background-color: rgba(var(--ov),0.07); color: var(--bone); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-dow { margin-bottom: 4px; }
.cal-dowcell { text-align: center; font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.04em; color: var(--taupe-3); padding: 3px 0; }
.cal-cell { height: 36px; border-radius: var(--r-sm); display: grid; place-items: center; font-size: 0.875rem; color: var(--bone-2); cursor: pointer; transition: var(--t-fast); }
.cal-cell:hover:not(.empty) { background-color: rgba(var(--ov),0.08); color: var(--bone); }
.cal-cell.empty { cursor: default; }
.cal-cell.today { color: var(--amber); font-weight: 700; box-shadow: inset 0 0 0 1px var(--line-strong); }
.cal-cell.sel.cal-cell.sel:hover { background: var(--amber); color: #FAFAF8; font-weight: 700; }

/* ── Create: location type-ahead with address recognition ── */
.loc-field { position: relative; }
.loc-ic { position: absolute; left: 14px; top: 25px; transform: translateY(-50%); color: var(--amber); display: grid; pointer-events: none; }
.loc-input { padding-left: 42px; width: 100%; }
.loc-pop { position: absolute; z-index: 80; top: calc(100% + 6px); left: 0; right: 0;
  background-color: var(--glass-strong); backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid var(--line-strong); border-radius: var(--r); box-shadow: var(--shadow-pop); padding: 6px; display: flex; flex-direction: column; gap: 1px; max-height: 290px; overflow-y: auto; animation: pop 160ms var(--ease); }
.loc-opt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-sm); text-align: left; color: var(--bone-2); cursor: pointer; transition: var(--t-fast); }
.loc-opt.active.loc-opt:hover { background-color: rgba(var(--ov),0.08); color: var(--bone); }
.loc-opt-ic { color: var(--taupe); flex: none; }
.loc-opt-label { flex: 1; font-size: 0.875rem; }
.loc-opt-tag { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--taupe-3); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 2px 7px; }

/* ── Create: ticket price (€ adornment + Free quick-set) ── */
.price-field { display: flex; align-items: center; height: 50px; border: 1px solid var(--line); border-radius: var(--r); background: rgba(var(--ov),0.04); overflow: hidden; transition: var(--t-fast); }
.price-field:focus-within { border-color: var(--amber-deep); }
.pf-euro { padding: 0 2px 0 16px; color: var(--taupe); font-size: 1rem; font-weight: 700; }
.pf-input { flex: 1; min-width: 0; height: 100%; border: none; background: none; color: var(--bone); font-size: 0.9375rem; padding: 0 8px; outline: none; font-family: var(--sans); }
.pf-free { flex: none; margin: 6px; padding: 0 14px; height: 36px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: none; color: var(--bone-2); font-size: 0.8125rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; transition: var(--t-fast); }
.pf-free:hover { border-color: var(--amber-deep); color: var(--bone); }
.pf-free.on { background: var(--green-dim); border-color: transparent; color: var(--green); }

/* ── Create: language field (reuses the home-page language dropdown) ── */
.lang-switch-field { display: block; }
.lang-field-trigger { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 50px; height: auto; cursor: pointer; text-align: left; padding-top: 7px; padding-bottom: 7px; }
.lang-field-trigger > svg:first-child { color: var(--amber); flex: none; }
.lf-placeholder { color: var(--taupe-3); flex: 1; }
.lf-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.lf-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px 4px 10px; border-radius: var(--r-pill); background: var(--amber-dim); color: var(--amber); font-size: 0.8125rem; font-weight: 600; }
.lf-chip-x { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; color: var(--amber); opacity: 0.7; transition: var(--t-fast); }
.lf-chip-x:hover { opacity: 1; background: var(--amber); color: #FAFAF8; }
.lang-menu-field { left: 0; right: auto; width: 100%; min-width: 300px; }
.lang-done { width: calc(100% - 8px); margin: 8px 4px 2px; height: 42px; border-radius: var(--r); background: var(--amber); color: #FAFAF8; font-weight: 700; font-size: 0.875rem; cursor: pointer; border: none; transition: var(--t-fast); }
.lang-done:hover { background: var(--amber-bright); }

/* ============================================================
   PROFILE, identity field row + interest token field
   (replaces the 50-culture chip walls with searchable controls)
   ============================================================ */
.declare-card .dc-head > div:last-child { flex: 1; min-width: 0; }
.declare-card .dc-title { white-space: nowrap; }
.cf-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cf-row .cf { flex: 1 1 280px; max-width: 380px; }

/* token / combobox field for multi-select interests */
.if { position: relative; }
.if-field {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  min-height: 52px; padding: 9px 10px;
  border: 1px solid var(--line); border-radius: var(--r); background: rgba(var(--ov),0.02);
  transition: var(--t-fast);
}
.if-field:hover { border-color: var(--line-strong); }
.if-ph { color: var(--taupe-3); font-size: 0.875rem; padding-left: 4px; }
.if-token {
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 5px 0 11px; border-radius: var(--r-pill);
  background-color: var(--bone); color: #FAFAF8; font-size: 0.8438rem; font-weight: 600;
}
.if-token-flag { font-size: 0.9375rem; }
.if-token-x {
  display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  border: none; background: rgba(250,250,248,0.18); color: #FAFAF8; cursor: pointer; transition: var(--t-fast);
}
.if-token-x:hover { background: rgba(250,250,248,0.34); }
.if-add {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 13px; border-radius: var(--r-pill);
  border: 1px dashed var(--line-strong); background: none; cursor: pointer;
  font-size: 0.8438rem; font-weight: 600; color: var(--amber); transition: var(--t-fast);
}
.if-add:hover.if-add.on { color: var(--amber-bright); border-color: var(--amber-deep); background: rgba(26,143,227,0.06); }
.if .sb-pop { min-width: 300px; max-width: 380px; }

[data-theme="dark"] .if-token { color: #1a1710; }
[data-theme="dark"] .if-token-x { background: rgba(26,23,16,0.18); color: #1a1710; }
[data-theme="dark"] .if-token-x:hover { background: rgba(26,23,16,0.32); }

/* ============================================================
   MESSAGES, inbox + conversation flow
   ============================================================ */
.msg-page { padding-top: var(--s6); padding-bottom: var(--s6); }
.msg-shell {
  display: grid; grid-template-columns: 360px 1fr;
  height: calc(100dvh - 64px - 48px); min-height: 540px;
  background: var(--ink-800); border: 1px solid var(--line);
  border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-card);
}

/*, inbox list, */
.msg-list { display: flex; flex-direction: column; border-right: 1px solid var(--line); min-width: 0; }
.msg-list-head { padding: var(--s5) var(--s5) var(--s4); border-bottom: 1px solid var(--line); flex-shrink: 0; }
.msg-list-title { display: flex; align-items: baseline; gap: 10px; margin-bottom: var(--s4); }
.msg-list-title h1 { font-family: var(--serif); font-size: 1.625rem; font-weight: 600; color: var(--bone); letter-spacing: -0.01em; }
.msg-unread-pill { white-space: nowrap; font-family: var(--mono); font-size: 0.8125rem; font-weight: 500; color: var(--amber); background: var(--amber-dim); padding: 3px 9px; border-radius: var(--r-pill); }
.msg-search { display: flex; align-items: center; gap: 9px; height: 42px; padding: 0 13px; border: 1px solid var(--line); border-radius: var(--r-pill); background: rgba(var(--ov),0.03); }
.msg-search svg { color: var(--taupe); flex-shrink: 0; }
.msg-search input { flex: 1; min-width: 0; background: none; border: none; outline: none; font-family: var(--sans); font-size: 0.875rem; color: var(--bone); }
.msg-search input::placeholder { color: var(--taupe-3); }

.msg-threads { flex: 1; overflow-y: auto; padding: var(--s2); display: flex; flex-direction: column; gap: 2px; }
.msg-thread { display: flex; gap: 12px; align-items: flex-start; text-align: left; padding: 12px; border: none; background: none; border-radius: var(--r-lg); cursor: pointer; transition: var(--t-fast); width: 100%; }
.msg-thread:hover { background: rgba(var(--ov),0.05); }
.msg-thread.on { background: var(--amber-dim); }
.msg-thread-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.msg-thread-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.msg-thread-name { display: inline-flex; align-items: center; gap: 5px; font-size: 0.9063rem; font-weight: 600; color: var(--bone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-vf { color: var(--verify); flex-shrink: 0; }
.msg-thread-time { font-family: var(--mono); font-size: 0.8125rem; color: var(--taupe-3); flex-shrink: 0; }
.msg-thread-role { font-size: 0.8125rem; color: var(--amber); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-thread-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 1px; }
.msg-thread-prev { font-size: 0.8125rem; color: var(--taupe); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.msg-thread.has-unread .msg-thread-prev { color: var(--bone); font-weight: 500; }
.msg-thread-badge { flex-shrink: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill); background: var(--amber); color: #FAFAF8; font-size: 0.8125rem; font-weight: 700; display: grid; place-items: center; }

/*, avatar, */
.msg-av { position: relative; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #FAFAF8; background: var(--av-tone); letter-spacing: 0.02em; }
.msg-av.official { background: var(--amber-dim); color: var(--amber); }
.msg-av-flag { position: absolute; right: -3px; bottom: -3px; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25)); }
.msg-av-dot { position: absolute; right: 0; top: 1px; width: 11px; height: 11px; border-radius: 50%; background: #3FB97E; border: 2px solid var(--ink-800); }

/*, conversation, */
.msg-conv { display: flex; flex-direction: column; min-width: 0; background: var(--ink-850); }
.msg-conv-head { display: flex; align-items: center; gap: 12px; padding: 12px var(--s5); border-bottom: 1px solid var(--line); background: var(--ink-800); flex-shrink: 0; }
.msg-back { display: none; }
.msg-conv-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.msg-conv-name { display: inline-flex; align-items: center; gap: 6px; font-size: 1rem; font-weight: 600; color: var(--bone); }
.msg-conv-status { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--taupe); }
.msg-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #3FB97E; }
.msg-conv-actions { display: flex; gap: 4px; flex-shrink: 0; }

.msg-context { display: flex; align-items: center; gap: 11px; padding: 11px var(--s5); background: rgba(var(--ov),0.025); border-bottom: 1px solid var(--line); flex-shrink: 0; }
.msg-context-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--amber-dim); color: var(--amber); flex-shrink: 0; }
.msg-context-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; gap: 1px; }
.msg-context-text strong { font-size: 0.8438rem; font-weight: 600; color: var(--bone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-context-text span { font-family: var(--mono); font-size: 0.8125rem; color: var(--taupe); }
.msg-context-link { display: inline-flex; align-items: center; gap: 5px; font-size: 0.8125rem; font-weight: 600; color: var(--amber); flex-shrink: 0; white-space: nowrap; }
.msg-context-link:hover { color: var(--amber-deep); }

.msg-scroll { flex: 1; overflow-y: auto; padding: var(--s5) var(--s5) var(--s4); display: flex; flex-direction: column; gap: 4px; }
.msg-day { text-align: center; margin: var(--s3) 0; }
.msg-day span { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--taupe-3); background: rgba(var(--ov),0.05); padding: 4px 12px; border-radius: var(--r-pill); }
.msg-row { display: flex; flex-direction: column; max-width: 76%; gap: 3px; }
.msg-row.them { align-self: flex-start; align-items: flex-start; }
.msg-row.me { align-self: flex-end; align-items: flex-end; }
.msg-bubble { padding: 10px 14px; border-radius: 18px; font-size: 0.9063rem; line-height: 1.45; color: var(--bone); word-break: break-word; }
.msg-row.them .msg-bubble { background: var(--ink-800); border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.msg-row.me .msg-bubble { background: var(--amber); color: #FAFAF8; border-bottom-right-radius: 5px; }
.msg-time { font-family: var(--mono); font-size: 0.8125rem; color: var(--taupe-3); padding: 0 6px; display: inline-flex; align-items: center; gap: 4px; }
.msg-read { color: var(--verify); }
.msg-row + .msg-row { margin-top: 2px; }

.msg-typing { display: inline-flex; gap: 4px; align-items: center; padding: 13px 15px; }
.msg-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--taupe); animation: msg-bounce 1.2s infinite ease-in-out; }
.msg-typing span:nth-child(2) { animation-delay: 0.18s; }
.msg-typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes msg-bounce { 0%,60%,100%{ transform: translateY(0); opacity:.5 } 30%{ transform: translateY(-4px); opacity:1 } }

.msg-composer { display: flex; align-items: center; gap: 10px; padding: 12px var(--s5) calc(12px + env(safe-area-inset-bottom,0px)); border-top: 1px solid var(--line); background: var(--ink-800); flex-shrink: 0; }
.msg-attach { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--taupe); background: rgba(var(--ov),0.05); flex-shrink: 0; transition: var(--t-fast); }
.msg-attach:hover { color: var(--bone); background: rgba(var(--ov),0.09); }
.msg-input { flex: 1; min-width: 0; height: 44px; padding: 0 18px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--ink-850); font-family: var(--sans); font-size: 0.9063rem; color: var(--bone); outline: none; }
.msg-input::placeholder { color: var(--taupe-3); }
.msg-input:focus { border-color: var(--amber-deep); background: rgba(26,143,227,0.05); }
.msg-send { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--amber); color: #FAFAF8; flex-shrink: 0; transition: var(--t-fast); }
.msg-send:hover { background: var(--amber-deep); }
.msg-send[disabled] { opacity: 0.4; pointer-events: none; }
.msg-send svg { transform: rotate(-45deg); }

/* empty state (desktop, no thread selected) */
.msg-conv-empty { align-items: center; justify-content: center; text-align: center; }
.msg-empty-inner { max-width: 320px; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: var(--s8); }
.msg-empty-mark { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: var(--amber-dim); color: var(--amber); margin-bottom: 4px; }
.msg-empty-inner h2 { font-family: var(--serif); font-size: 1.375rem; font-weight: 600; color: var(--bone); }
.msg-empty-inner p { font-size: 0.875rem; color: var(--taupe); line-height: 1.5; }

/* topbar message-icon unread badge, see .notif-badge (shared component) below */
.icon-btn.on { color: var(--amber); background: var(--amber-dim); }

[data-theme="dark"] .msg-row.me .msg-bubble,
[data-theme="dark"] .msg-send,
[data-theme="dark"] .msg-thread-badge { color: #221805; }
[data-theme="dark"] .msg-av-dot, [data-theme="dark"] .msg-status-dot { background: #5fce97; }

/* ============================================================
   NOTIFICATIONS, bell panel
   ============================================================ */
.notif-wrap { position: relative; }
.notif-scrim { display: none; }
.notif-wrap-menu { position: relative; }
.notif-wrap-menu .notif-panel { right: auto; left: 0; }
.notif-panel {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 80;
  width: 390px; max-width: calc(100vw - 28px);
  max-height: min(640px, calc(100dvh - 90px));
  background: var(--ink-800); border: 1px solid var(--line-strong);
  border-radius: var(--r-xl); box-shadow: var(--shadow-pop);
  display: flex; flex-direction: column; overflow: hidden;
  animation: pop 160ms var(--ease);
}
.notif-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px var(--s5) 12px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.notif-head-title { display: inline-flex; align-items: center; gap: 9px; font-size: 1rem; font-weight: 600; color: var(--bone); }
.notif-count { font-family: var(--mono); font-size: 0.8125rem; font-weight: 500; color: #FAFAF8; background: var(--amber); min-width: 19px; height: 19px; padding: 0 5px; border-radius: var(--r-pill); display: grid; place-items: center; }
.notif-markall { display: inline-flex; align-items: center; gap: 5px; font-size: 0.8125rem; font-weight: 600; color: var(--amber); transition: var(--t-fast); }
.notif-markall:hover { color: var(--amber-deep); }
.notif-markall[disabled] { opacity: 0.4; pointer-events: none; }

.notif-tabs { display: flex; gap: 4px; padding: 10px var(--s5) 6px; flex-shrink: 0; }
.notif-tab { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--r-pill); font-size: 0.8125rem; font-weight: 600; color: var(--taupe); border: 1px solid transparent; transition: var(--t-fast); }
.notif-tab:hover { color: var(--bone); }
.notif-tab.on { color: var(--amber); background: var(--amber-dim); }
.notif-tab-n { font-family: var(--mono); font-size: 0.8125rem; background: var(--amber); color: #FAFAF8; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--r-pill); display: grid; place-items: center; }

.notif-list { flex: 1; overflow-y: auto; padding: 4px 8px 8px; }
.notif-group { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--taupe-3); padding: 12px 8px 5px; }
.notif-item { display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left; padding: 11px 10px; border: none; background: none; border-radius: var(--r-lg); cursor: default; transition: var(--t-fast); position: relative; }
.notif-item.link { cursor: pointer; }
.notif-item:hover { background: rgba(var(--ov),0.05); }
.notif-item:focus-visible { outline: 2px solid var(--sky); outline-offset: -2px; }
.notif-item.unread { background: rgba(26,143,227,0.05); }
.notif-item.unread:hover { background: rgba(26,143,227,0.08); }
.notif-ic { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; flex-shrink: 0; }
.notif-green { background: var(--green-dim); color: var(--green); }
.notif-clay { background: var(--clay-dim); color: var(--clay); }
.notif-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.notif-line { font-size: 0.875rem; color: var(--bone); line-height: 1.4; padding-right: 14px; }
.notif-line strong { font-weight: 600; }
.notif-verb { color: var(--taupe); font-weight: 400; }
.notif-text { font-size: 0.8125rem; color: var(--taupe); line-height: 1.45; }
.notif-time { font-family: var(--mono); font-size: 0.8125rem; color: var(--taupe-3); margin-top: 3px; }
.notif-dot { position: absolute; top: 16px; right: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--amber); flex-shrink: 0; }

.notif-actions { display: flex; gap: 8px; margin-top: 9px; }
.notif-accept.notif-decline { padding: 7px 16px; border-radius: var(--r-pill); font-size: 0.8125rem; font-weight: 600; transition: var(--t-fast); }
.notif-accept { background: var(--amber); color: #FAFAF8; }
.notif-accept:hover { background: var(--amber-deep); }
.notif-decline { border: 1px solid var(--line-strong); color: var(--taupe); }
.notif-decline:hover { color: var(--bone); border-color: var(--taupe); }

.notif-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: var(--s10) var(--s5); text-align: center; color: var(--taupe); font-size: 0.875rem; }
.notif-empty-ic { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--green-dim); color: var(--green); }

.notif-foot { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 13px; border-top: 1px solid var(--line); font-size: 0.8125rem; font-weight: 600; color: var(--taupe); transition: var(--t-fast); flex-shrink: 0; }
.notif-foot:hover { color: var(--bone); background: rgba(var(--ov),0.04); }

[data-theme="dark"] .notif-count, [data-theme="dark"] .notif-tab-n, [data-theme="dark"] .notif-accept { color: #221805; }

/* phone: bell stays visible; panel becomes a bottom sheet */
@media (max-width: 640px) {
  .topbar-actions .icon-btn.tb-bell,
  .topbar-actions .icon-btn.tb-msg { display: grid; }

  /* language lives in the drawer on phones, hide the top-bar trigger */
  .lang-switch .lang-trigger { display: none; }

  .notif-scrim.lang-scrim {
    display: block; position: fixed; inset: 0; z-index: 150;
    background: rgba(26, 24, 20, 0.45);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    animation: fadein 160ms var(--ease);
  }
  .notif-panel {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    width: auto; max-width: none; max-height: 86dvh;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    border-left: none; border-right: none; border-bottom: none;
    z-index: 160; animation: sb-sheet-up 280ms var(--ease);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .notif-panel::before {
    content: ""; display: block; width: 42px; height: 4px; border-radius: 999px;
    background: var(--line-strong); margin: 10px auto 0;
  }

  /* language menu → bottom sheet, matching notifications */
  .lang-menu {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    width: auto; max-width: none; max-height: 80dvh;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    border-left: none; border-right: none; border-bottom: none;
    z-index: 160; animation: sb-sheet-up 280ms var(--ease);
    backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3);
    padding: 0 var(--s2) calc(var(--s2) + env(safe-area-inset-bottom, 0px));
    display: flex; flex-direction: column;
  }
  .lang-menu::before {
    content: ""; display: block; width: 42px; height: 4px; border-radius: 999px;
    background: var(--line-strong); margin: 10px auto 6px; flex-shrink: 0;
  }
  .lang-menu .menu-head:first-of-type { font-size: 0.9375rem; letter-spacing: 0; text-transform: none; color: var(--bone); font-weight: 600; padding: 4px 12px 8px; }
  .lang-search { margin: 2px 8px 10px; height: 48px; flex-shrink: 0; }
  .lang-list { max-height: none; flex: 1; }
  .lang-item { padding: 13px 12px; }
}

/* ── Messages, phone: list, then conversation as a full overlay ── */
@media (max-width: 640px) {
  .msg-page { padding-left: 0; padding-right: 0; padding-top: 0; }
  .msg-shell {
    grid-template-columns: 1fr; height: calc(100dvh - 58px); min-height: 0;
    border-radius: 0; border-left: none; border-right: none; box-shadow: none;
  }
  .msg-list { border-right: none; }
  .msg-conv { display: none; }
  .msg-shell.has-active .msg-conv {
    display: flex; position: fixed; inset: 58px 0 0 0; z-index: 95;
    background: var(--ink-850); height: auto;
  }
  .msg-back { display: grid; place-items: center; width: 36px; height: 36px; margin-left: -6px; color: var(--bone); flex-shrink: 0; }
  .msg-conv-actions { display: none; }
  .msg-row { max-width: 84%; }
}

/* ============================================================
   ONBOARDING, first-run sign-up & profile setup
   Reuses the site's tokens, chips, inputs, buttons, culture pickers.
   ============================================================ */
.ob-root { position: fixed; inset: 0; z-index: 300; background: var(--ink-900); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.ob-split { display: grid; grid-template-columns: 0.82fr 1fr; min-height: 100dvh; }

/* ── Left editorial brand panel ─────────────────────────── */
.ob-aside {
  position: relative; overflow: hidden; color: #F4EFE6;
  padding: var(--s12) clamp(32px, 4vw, 64px);
  display: flex; flex-direction: column;
  background: linear-gradient(168deg, #1A8FE3 0%, #1474BE 55%, #0E5A96 100%);
}
.ob-aside::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(720px 400px at 92% -8%, rgba(244,239,230,0.16), transparent 60%),
    radial-gradient(560px 460px at -12% 112%, rgba(246,130,31,0.20), transparent 60%);
}
.ob-aside-brand { display: flex; align-items: center; gap: 11px; position: relative; }
.ob-aside-brand .brand-word { font-family: var(--serif); font-size: 1.375rem; font-weight: 600; letter-spacing: -0.01em; color: #F4EFE6; }
.ob-aside-brand .brand-word em { font-style: italic; color: #F6821F; }
.ob-aside-mid { margin-top: auto; position: relative; }
.ob-aside-headline { font-family: var(--serif); font-weight: 500; font-size: clamp(30px, 3vw, 43px); line-height: 1.1; letter-spacing: -0.02em; max-width: 15ch; }
.ob-aside-headline em { font-style: italic; color: #F6821F; }
.ob-aside-sub { margin-top: var(--s4); font-size: 1.0313rem; line-height: 1.62; color: rgba(244,239,230,0.82); max-width: 36ch; }
.ob-aside-foot { margin-top: var(--s10); display: flex; align-items: center; gap: 13px; position: relative; }
.ob-aside-flags { display: flex; }
.ob-aside-flags span {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 1.125rem;
  background: rgba(244,239,230,0.12); border: 1.5px solid #1A8FE3; margin-left: -10px;
}
.ob-aside-flags span:first-child { margin-left: 0; }
.ob-aside-proof { font-size: 0.8438rem; line-height: 1.45; color: rgba(244,239,230,0.82); }
.ob-aside-proof b { color: #F4EFE6; font-weight: 600; }

/* ── Right form panel ───────────────────────────────────── */
.ob-main { display: flex; flex-direction: column; padding: var(--s7, 28px) clamp(20px, 5vw, 72px) var(--s8); }
.ob-mhead { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; padding-top: var(--s4); }
.ob-mhead-right { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.ob-close { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--taupe); background: var(--ink-800); border: 1px solid var(--line); transition: var(--t-fast); }
.ob-close:hover { color: var(--bone); border-color: var(--bone-2); background: rgba(var(--ov),0.05); }
.ob-mbrand { display: none; align-items: center; gap: 9px; }
.ob-mbrand .brand-word { font-family: var(--serif); font-size: 1.125rem; font-weight: 600; }
.ob-mbrand .brand-word em { font-style: italic; color: var(--amber); }
.ob-stepof { font-size: 0.8125rem; color: var(--taupe); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.ob-progress { display: flex; gap: 6px; margin-top: 16px; }
.ob-progress > span { height: 4px; flex: 1; border-radius: 999px; background: var(--ink-700); overflow: hidden; }
.ob-progress > span i { display: block; height: 100%; width: 0; background: var(--amber); border-radius: 999px; transition: width 0.45s var(--ease); }
.ob-progress > span.done i { width: 100%; }
.ob-progress > span.cur i { width: 55%; }

.ob-scroll { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: var(--s8) 0; }
.ob-body { width: 100%; max-width: 600px; margin: 0 auto; }
@media (prefers-reduced-motion: no-preference) {
  .ob-body { animation: obIn 0.42s var(--ease); }
}
@keyframes obIn { from { transform: translateY(12px); } to { transform: none; } }
.ob-eyebrow { font-family: var(--mono); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--amber); margin-bottom: 14px; }
.ob-q { font-family: var(--serif); font-weight: 500; font-size: clamp(27px, 3.3vw, 38px); line-height: 1.1; letter-spacing: -0.02em; color: var(--bone); }
.ob-q em { font-style: italic; color: var(--amber); }
.ob-help { margin-top: 13px; font-size: 1rem; color: var(--taupe); line-height: 1.6; max-width: 50ch; }
.ob-field { margin-top: var(--s6); }
.ob-label { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--bone-2); margin-bottom: 8px; }
.ob-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ── Goal grid ──────────────────────────────────────────── */
.ob-goals { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: var(--s6); }
.ob-goal {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 9px;
  text-align: left; padding: 17px 18px; border: 1.5px solid var(--line-strong);
  border-radius: var(--r-lg); background: var(--ink-800); transition: var(--t-fast);
}
.ob-goal:hover { border-color: var(--bone-2); transform: translateY(-1px); box-shadow: var(--shadow-card); }
.ob-goal.on { border-color: var(--amber); background: var(--amber-dim); }
.ob-goal-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--ink-700); color: var(--bone); transition: var(--t-fast); }
.ob-goal.on .ob-goal-ic { background: var(--amber); color: #FAFAF8; }
.ob-goal-label { font-weight: 600; font-size: 0.9688rem; color: var(--bone); }
.ob-goal-blurb { font-size: 0.8125rem; color: var(--taupe); line-height: 1.45; }
.ob-goal-chk { position: absolute; top: 14px; right: 14px; opacity: 0; transform: scale(0.7); transition: var(--t-fast); color: var(--amber); }
.ob-goal.on .ob-goal-chk { opacity: 1; transform: none; }

/* ── Role cards (single-select) ─────────────────────────── */
.ob-roles { display: flex; flex-direction: column; gap: 11px; margin-top: var(--s6); }
.ob-role {
  position: relative; display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 15px;
  text-align: left; padding: 16px 18px; border: 1.5px solid var(--line-strong);
  border-radius: var(--r-lg); background: var(--ink-800); transition: var(--t-fast);
}
.ob-role:hover { border-color: var(--bone-2); }
.ob-role.on { border-color: var(--amber); background: var(--amber-dim); }
.ob-role-ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--ink-700); color: var(--bone); }
.ob-role.on .ob-role-ic { background: var(--amber); color: #FAFAF8; }
.ob-role-t { font-weight: 600; font-size: 1rem; color: var(--bone); }
.ob-role-d { font-size: 0.8438rem; color: var(--taupe); line-height: 1.45; margin-top: 2px; }
.ob-role-radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-strong); transition: var(--t-fast); }
.ob-role.on .ob-role-radio { border-color: var(--amber); background: radial-gradient(circle at center, var(--amber) 0 5px, transparent 6px); }

/* ── Auth screen ────────────────────────────────────────── */
.ob-auth { margin-top: var(--s6); max-width: 392px; }
.ob-social { display: flex; flex-direction: column; gap: 10px; }
.ob-social-btn {
  display: flex; align-items: center; justify-content: center; gap: 11px; height: 50px;
  border-radius: var(--r); border: 1.5px solid var(--line-strong); background: var(--ink-800);
  font-weight: 600; font-size: 0.9063rem; color: var(--bone); transition: var(--t-fast);
}
.ob-social-btn:hover { border-color: var(--bone-2); background: rgba(var(--ov),0.04); }
.ob-divider { display: flex; align-items: center; gap: 14px; margin: var(--s5) 0; color: var(--taupe-3); font-size: 0.8125rem; letter-spacing: 0.04em; text-transform: uppercase; }
.ob-divider::before.ob-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.ob-terms { margin-top: var(--s4); font-size: 0.8125rem; color: var(--taupe); line-height: 1.55; }
.ob-terms a { color: var(--bone-2); text-decoration: underline; text-underline-offset: 2px; }
.ob-alt { margin-top: var(--s5); font-size: 0.875rem; color: var(--taupe); }
.ob-alt button { color: var(--amber); font-weight: 600; }
.ob-error { margin-top: var(--s3); font-size: 0.8438rem; color: var(--danger, #E5837A); }
.ob-pw-field { position: relative; display: flex; }
.ob-pw-field .input { padding-right: 42px; width: 100%; }
.ob-pw-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 8px; color: var(--taupe); background: none; }
.ob-pw-toggle:hover { color: var(--ink); background: var(--sand-2, rgba(0,0,0,0.04)); }
.app-loading { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--bg, #FBF8F3); }
.app-loading svg { opacity: 0.5; animation: app-loading-pulse 1.1s ease-in-out infinite; }
@keyframes app-loading-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.75; } }

/* ── Heritage / languages extras ────────────────────────── */
.ob-quiet { margin-top: 8px; font-size: 0.8125rem; color: var(--taupe); }
.ob-quiet button { color: var(--bone-2); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.ob-note {
  margin-top: var(--s5); display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--ink-850);
}
.ob-note .obn-ic { flex: none; color: var(--verify); margin-top: 1px; }
.ob-note .obn-tx { font-size: 0.875rem; color: var(--taupe); line-height: 1.5; }
.ob-note .obn-tx b { color: var(--bone-2); font-weight: 600; }

/* ── Summary ────────────────────────────────────────────── */
.ob-summary { margin-top: var(--s6); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--ink-800); box-shadow: var(--shadow-card); overflow: hidden; }
.ob-sum-hero { position: relative; overflow: hidden; padding: var(--s6); display: flex; align-items: center; gap: 16px; }
.ob-sum-flag { position: absolute; right: -10px; top: -22px; font-size: 6rem; opacity: 0.14; pointer-events: none; }
.ob-sum-av { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 1.375rem; color: #FAFAF8; position: relative; flex: none; }
.ob-sum-stmt { font-family: var(--serif); font-size: 1.5rem; font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; color: var(--bone); }
.ob-sum-stmt em { font-style: italic; color: var(--amber); }
.ob-sum-sub { margin-top: 4px; font-size: 0.875rem; color: var(--taupe); }
.ob-sum-rows { padding: 2px var(--s6) var(--s5); }
.ob-sum-row { display: flex; gap: 14px; align-items: flex-start; padding: 13px 0; border-top: 1px solid var(--line); }
.ob-sum-row .k { width: 116px; flex: none; font-size: 0.8125rem; color: var(--taupe); padding-top: 3px; }
.ob-sum-row .v { font-size: 0.9375rem; color: var(--bone); font-weight: 500; display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.ob-sum-tag { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px; border-radius: var(--r-pill); background: var(--ink-700); font-size: 0.8125rem; font-weight: 500; }

/* ── Footer nav ─────────────────────────────────────────── */
.ob-foot { display: flex; align-items: center; gap: 14px; padding-top: var(--s6); margin-top: var(--s4); }
.ob-foot .ob-spacer { flex: 1; }
.ob-skip { font-size: 0.875rem; color: var(--taupe); font-weight: 500; }
.ob-skip:hover { color: var(--bone); }
.ob-back { display: inline-flex; align-items: center; gap: 6px; }

@media (max-width: 860px) {
  .ob-split { grid-template-columns: 1fr; }
  .ob-aside { display: none; }
  .ob-main { min-height: 100dvh; }
  .ob-mbrand { display: flex; }
  .ob-goals { grid-template-columns: 1fr; }
  .ob-2col { grid-template-columns: 1fr; }
  .ob-sum-row { flex-direction: column; gap: 5px; }
  .ob-sum-row .k { width: auto; }
}

/* ============================================================
   EVENT COVER, uploaded photo variant of the event card
   ============================================================ */
.evt.has-cover { grid-template-columns: 1fr; }
.evt-cover { height: 134px; background-size: cover; background-position: center; position: relative; }
.evt-cover-date {
  position: absolute; left: 14px; top: 14px; display: inline-flex; align-items: baseline; gap: 6px;
  background: rgba(255,255,255,0.94); color: #1A1814; border-radius: 11px; padding: 6px 11px;
  font-size: 0.8125rem; font-weight: 600; box-shadow: var(--shadow-sm);
}
.evt-cover-date b { font-family: var(--serif); font-size: 1.1875rem; line-height: 1; }

/* ============================================================
   CHECKOUT  (booking · ticketing · join)
   ============================================================ */
.co-steps { display: flex; align-items: center; gap: 7px; }
.co-steps .dot { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 0.8125rem; font-weight: 600; background: var(--ink-700); color: var(--taupe); flex: none; }
.co-steps .dot.on { background: var(--amber); color: #FAFAF8; }
.co-steps .dot.done { background: var(--green-dim); color: var(--green); }
.co-steps .bar { flex: 0 0 22px; height: 2px; background: var(--line); border-radius: 2px; }
.co-steps .bar.done { background: var(--amber); }
.co-fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.co-tickets { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); }
.co-step-text { display: flex; flex-direction: column; gap: 2px; }
.co-step-name { font-weight: 600; font-size: 0.9375rem; color: var(--bone); }
.co-step-sub { font-size: 0.875rem; color: var(--taupe); }
.co-spots { margin-left: 6px; font-weight: 600; color: var(--green); }
.co-spots.low { color: var(--amber); }
.co-tickets.soldout { opacity: 0.85; border-color: var(--line-faint); background: var(--ink-800); }
.co-soldout-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 0.8125rem; font-weight: 600; color: var(--taupe); padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--r-pill); }
.co-step-ctrl { display: flex; align-items: center; gap: 14px; }
.co-step-num { min-width: 22px; text-align: center; font-weight: 600; font-size: 1rem; color: var(--bone); font-variant-numeric: tabular-nums; }
.co-mini-total { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-radius: var(--r); background: var(--amber-dim); border: 1px solid var(--line); font-size: 0.875rem; color: var(--bone-2); }
.co-mini-total b { font-size: 1.125rem; color: var(--bone); }
.co-trust { display: flex; gap: 9px; align-items: flex-start; margin-top: var(--s4); padding: 11px 13px; border-radius: var(--r); background: var(--green-dim); font-size: 0.8125rem; line-height: 1.45; color: var(--bone-2); }
.co-trust svg { flex: none; color: var(--green); margin-top: 2px; width: 18px; height: 18px; }
.co-escrow { display: flex; gap: 9px; align-items: flex-start; margin: var(--s4) 0; padding: 12px 14px; border-radius: var(--r-lg); background: var(--green-dim); font-size: 0.8125rem; line-height: 1.45; color: var(--bone-2); }
.co-escrow svg { flex: none; color: var(--green); margin-top: 1px; }
.co-order { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.co-order-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; font-size: 0.9063rem; color: var(--bone); }
.co-order-row-main { padding: 12px; }
.co-order-row-main .cor-line { gap: 12px; }
.cor-thumb { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 0.8125rem; background-size: cover; background-position: center; }
.cor-thumb.has-photo { color: transparent; }
.cor-line-text { display: flex; flex-direction: column; gap: 1px; text-align: left; }
.cor-line-title { font-weight: 600; font-size: 0.9063rem; color: var(--bone); }
.cor-line-sub { font-size: 0.8125rem; font-weight: 400; color: var(--taupe); }
.co-order-row.sub { color: var(--taupe); font-size: 0.8125rem; padding: 10px 16px; }
.co-order-row.sub span { display: inline-flex; align-items: center; gap: 6px; }
.co-order-total { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-top: 1px solid var(--line); background: var(--ink-850); font-weight: 700; font-size: 1rem; color: var(--bone); }
.co-paynote { display: flex; gap: 8px; align-items: center; padding: 9px 12px; border-radius: var(--r); background: rgba(var(--ov),0.03); font-size: 0.8125rem; line-height: 1.4; color: var(--taupe); }
.co-paynote svg { flex: none; color: var(--green); }
.co-review-note { padding: 13px 15px; border-radius: var(--r); background: rgba(var(--ov),0.04); border: 1px solid var(--line); }
.co-review-note-k { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--taupe-3); }
.co-review-note p { margin: 6px 0 0; font-size: 0.875rem; line-height: 1.5; color: var(--bone-2); }
.co-paynote.demo { background: rgba(var(--ov),0.03); } .co-paynote.demo svg { color: var(--amber); }
.co-pay-methods { display: flex; flex-wrap: wrap; gap: 8px; }
.co-pay-method { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; border-radius: var(--r-pill); border: 1.5px solid var(--line); background: var(--ink-800); color: var(--bone-2); font-size: 0.8438rem; font-weight: 600; transition: var(--t-fast); }
.co-pay-method:hover { border-color: var(--bone-2); }
.co-pay-method.on { border-color: var(--amber-deep); background: var(--amber-dim); color: var(--amber-deep); }
.co-pay-method svg { color: inherit; }

.co-pay-express-wrap { display: flex; flex-direction: column; gap: 8px; }
.co-pay-express-label { font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--taupe); }
.co-pay-express { display: flex; flex-direction: row; gap: 8px; }
.co-pay-xbtn { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 10px; border-radius: var(--r); border: 1px solid var(--line-strong); background: var(--ink-800); color: var(--bone); font-size: 0.8438rem; font-weight: 600; transition: var(--t-fast); }
.cpx-label { font-size: 0.8438rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-pay-xbtn:hover { border-color: var(--bone-2); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.co-pay-xbtn:active { transform: translateY(0) scale(0.97); }
.co-pay-xbtn:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
.co-pay-xbtn.on { box-shadow: 0 0 0 2px var(--ink-900) inset; }
.co-pay-xbtn svg { color: inherit; }
.co-pay-xbtn.cpx-applepay { background: #000; border-color: #000; color: #fff; }
.co-pay-xbtn.cpx-applepay:hover { background: #1a1a1a; }
.co-pay-xbtn.cpx-applepay.on { box-shadow: 0 0 0 2px var(--sky) inset; }
.co-pay-xbtn.cpx-googlepay { background: #fff; border-color: var(--line-strong); }
.co-pay-xbtn.cpx-googlepay.on { box-shadow: 0 0 0 2px var(--sky) inset; }
.co-pay-xbtn.cpx-paypal { background: #fff; border-color: var(--line-strong); }
.co-pay-xbtn.cpx-paypal.on { box-shadow: 0 0 0 2px var(--sky) inset; }

.co-pay-divider { position: relative; display: flex; justify-content: center; margin: 12px 0 12px; }
.co-pay-divider::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line); }
.co-pay-divider span { position: relative; background: #FFFFFF; padding: 0 12px; font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--bone-2); }

.co-pay-list { display: flex; flex-direction: column; gap: 8px; }
.co-pay-group { display: flex; flex-direction: column; }
.co-pay-group.expanded .co-pay-row { border-radius: var(--r-lg) var(--r-lg) 0 0; border-bottom: none; }
.co-pay-group.expanded .co-card-form { border-radius: 0 0 var(--r-lg) var(--r-lg); border-top: 1px dashed var(--line); margin-top: 0; animation: cardformin 0.22s var(--ease); }
@keyframes cardformin { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.co-pay-row { position: relative; display: flex; align-items: center; gap: 12px; padding: 15px 16px; border-radius: var(--r-lg); border: 1px solid var(--line-faint); background: var(--ink-800); cursor: pointer; transition: var(--t-fast); }
.co-pay-row:hover { border-color: var(--bone-2); box-shadow: 0 2px 8px -4px rgba(20,16,10,0.12); }
.co-pay-row:active { transform: scale(0.995); }
.co-pay-row.on { border-color: var(--pay-accent, var(--sky)); background: var(--pay-accent-dim, var(--sky-dim)); box-shadow: 0 0 0 1px var(--pay-accent, var(--sky)) inset, 0 2px 10px -4px rgba(26,143,227,0.25); }
.co-pay-row input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.co-pay-row input[type="radio"]:focus-visible ~ .cpr-radio { outline: 2px solid var(--pay-accent, var(--sky)); outline-offset: 2px; }
.cpr-radio { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: grid; place-items: center; transition: var(--t-fast); background: var(--ink-900); }
.co-pay-row.on .cpr-radio { border-color: var(--pay-accent, var(--sky)); }
.cpr-radio-dot { display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--pay-accent, var(--sky)); transform: scale(0); transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1); }
.co-pay-row.on .cpr-radio-dot { transform: scale(1); }
.cpr-ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: rgba(var(--ov),0.05); color: var(--bone-2); transition: var(--t-fast); }
.co-pay-row.on .cpr-ic { color: var(--pay-accent, var(--sky)); background: var(--pay-accent-dim, rgba(26,143,227,0.12)); }
.cpr-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cpr-label { font-size: 0.875rem; font-weight: 600; color: var(--bone); }
.cpr-sub { font-size: 0.8125rem; color: var(--taupe); }
.cpr-badge-slot { flex: none; margin-left: auto; display: flex; justify-content: flex-end; }
.cpr-badge { font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--sky-deep); border: 1px solid var(--sky-deep); background: var(--sky-dim); padding: 3px 8px; border-radius: var(--r-pill); white-space: nowrap; }

.co-card-form { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: var(--r-lg); border: 1px solid var(--line); background: rgba(var(--ov),0.02); }
.co-card-form .co-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.co-card-form .form-label { font-size: 0.8125rem; margin-bottom: 4px; }
.co-cc-number { position: relative; }
.co-cc-number .input { padding-right: 66px; }
.co-cc-brand { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 5px; color: var(--taupe); pointer-events: none; }
.co-cc-brand small { font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.co-cc-save { display: flex; align-items: center; gap: 9px; font-size: 0.8438rem; color: var(--bone-2); cursor: pointer; margin-top: -2px; }
.co-cc-save input { width: 17px; height: 17px; accent-color: var(--amber-deep); cursor: pointer; }
@media (max-width: 560px) { .co-card-form .co-fields { grid-template-columns: 1fr 1fr; } }
.co-paybtn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 54px; border-radius: var(--r); background: var(--co-primary, var(--sky-deep)); color: #fff; font-size: 0.9688rem; font-weight: 600; transition: var(--t-fast); }
.co-paybtn:hover { background: var(--co-primary-h, #0d5e9c); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.co-paybtn:active { background: var(--co-primary-h, #0d5e9c); transform: translateY(0) scale(0.97); box-shadow: inset 0 2px 6px rgba(0,0,0,0.18); }
.co-paybtn.loading, .co-paybtn:disabled { cursor: default; opacity: 0.92; transform: none; }
.co-paybtn.loading:hover, .co-paybtn:disabled:hover { transform: none; box-shadow: none; }
.co-pay-spinner { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,0.35); border-top-color: #FAFAF8; animation: co-pay-spin 700ms linear infinite; flex: none; }
@keyframes co-pay-spin { to { transform: rotate(360deg); } }
.co-confirm { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-size: 0.8438rem; font-weight: 600; color: var(--green); }
.co-return { display: flex; flex-direction: column; gap: 10px; }
.co-return-alt { display: flex; gap: 9px; align-items: flex-start; font-size: 0.8125rem; line-height: 1.5; color: var(--taupe); }
.co-return-alt svg { flex: none; color: var(--taupe-3); margin-top: 2px; }
.co-return-alt a { color: var(--amber); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.co-foot-total { margin-left: auto; font-size: 0.875rem; color: var(--taupe); }
.co-foot-total b { color: var(--bone); margin-left: 4px; }
.co-done { align-items: stretch; gap: var(--s5); }
.co-done > * { flex-shrink: 0; }
.co-done-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s3); padding-bottom: var(--s2); }
.co-done-sub { max-width: none; width: 100%; text-align: center; }
.co-tick {
  width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center;
  background: var(--green-dim); color: var(--green); margin: 0 auto; animation: pop 220ms var(--ease);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--green-dim) 55%, transparent);
}
.co-ref { display: inline-flex; align-self: center; align-items: center; gap: 10px; padding: 8px 16px; border-radius: var(--r-pill); background: var(--ink-700); }
.co-ref-k { font-size: 0.8125rem; color: var(--taupe); text-transform: uppercase; letter-spacing: 0.08em; }
.co-ref-v { font-family: var(--mono); font-weight: 600; letter-spacing: 0.08em; color: var(--bone); }
.co-ref-note { font-size: 0.8125rem; color: var(--taupe); line-height: 1.5; text-align: left; }
.co-summary { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 0; text-align: left; display: flex; flex-direction: column; width: 100%; overflow: hidden; }
.co-sum-head { display: flex; align-items: center; gap: 12px; padding: var(--s4) var(--s4) var(--s3); }
.co-sum-head-text { min-width: 0; }
.co-sum-title { font-weight: 700; font-size: 0.9688rem; color: var(--bone); }
.co-sum-host { font-size: 0.8125rem; color: var(--taupe); margin-top: 1px; }
.co-sum-details { display: flex; flex-direction: column; gap: 8px; padding: var(--s3) var(--s4); border-top: 1px solid var(--line-faint); }
.co-sum-ref { display: flex; align-items: center; gap: 7px; padding: 10px var(--s4); background: rgba(var(--ov),0.03); border-top: 1px solid var(--line-faint); font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.04em; color: var(--taupe); }
.co-sum-ref svg { flex: none; color: var(--taupe-3); }
.co-sum-row { display: flex; align-items: flex-start; gap: 8px; font-size: 0.9375rem; color: var(--bone); text-align: left; }
.co-sum-row svg { flex-shrink: 0; margin-top: 2px; }
.co-sum-row span { flex: 1; min-width: 0; }
.co-sum-row.sub { color: var(--taupe); font-size: 0.8438rem; }
.co-sum-row.sub svg { flex: none; }
.co-sum-row.total { justify-content: space-between; border-top: 1px solid var(--line); padding-top: 11px; margin-top: 3px; font-weight: 700; }
.co-foot-done { justify-content: flex-end; }
.co-cal { width: 100%; display: flex; align-items: center; gap: 12px; padding: 13px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--ink-850); color: var(--bone); text-align: left; cursor: pointer; transition: var(--t-fast); }
.co-cal:hover { border-color: var(--amber); }
.co-cal > svg:first-child { flex: none; color: var(--amber); }
.co-cal-text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.co-cal-text b { font-weight: 700; font-size: 0.9063rem; }
.co-cal-text small { font-size: 0.8125rem; color: var(--taupe); }
.co-cal-chev { flex: none; color: var(--taupe); transition: var(--t-fast); }
.co-cal:hover .co-cal-chev { color: var(--amber); transform: translateX(2px); }
.co-acct { text-align: left; border: 1px solid var(--line); border-radius: var(--r); padding: 15px 16px; display: flex; flex-direction: column; gap: 12px; background: var(--ink-850); }
.co-acct-quiet:not(:has(.co-acct-head)) { border: none; background: none; padding: 0; }
.co-acct-prompt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 13px 16px; border: 1px solid var(--line); border-radius: var(--r); background: none; color: var(--bone-2); font-size: 0.8438rem; font-weight: 500; transition: var(--t-fast); }
.co-acct-prompt:hover { border-color: var(--line-strong); background: rgba(var(--ov),0.03); }
.co-acct-prompt > svg:first-child { flex: none; color: var(--taupe); }
.co-acct-prompt-text { flex: 1; text-align: left; }
.co-acct-prompt > svg:last-child { flex: none; color: var(--taupe); }
.co-acct-head { display: flex; gap: 11px; align-items: flex-start; }
.co-acct-head > svg { flex: none; color: var(--amber); margin-top: 2px; }
.co-acct-row { display: flex; gap: 10px; flex-wrap: wrap; }
.co-pw-field {
  flex: 1 1 220px; display: flex; align-items: center; gap: 9px; height: 46px; padding: 0 14px;
  border-radius: var(--r-pill); border: 1.5px solid var(--line-strong); background: var(--ink-800);
  transition: var(--t-fast);
}
.co-pw-field:focus-within { border-color: var(--sky, #1A8FE3); box-shadow: 0 0 0 3px var(--sky-dim); }
.co-pw-field svg:first-child { color: var(--taupe); flex-shrink: 0; }
.co-pw-field input { flex: 1; min-width: 0; border: none; background: none; outline: none; font-family: var(--sans); font-size: 0.9375rem; color: var(--bone); letter-spacing: 0.02em; }
.co-pw-field input::placeholder { color: var(--taupe-3); letter-spacing: normal; }
.co-pw-toggle { flex-shrink: 0; font-size: 0.8125rem; font-weight: 700; color: var(--sky, #1A8FE3); padding: 4px 2px; }
.co-pw-toggle:hover { text-decoration: underline; }
.co-acct-title { font-weight: 700; font-size: 0.9375rem; color: var(--bone); }
.co-acct-sub { font-size: 0.875rem; line-height: 1.5; color: var(--taupe); margin-top: 3px; }
.co-acct-row { display: flex; gap: 8px; }
.co-acct-row .input { flex: 1; min-width: 0; }
.co-acct-row .btn { flex: none; white-space: nowrap; }
.co-acct-magic { align-self: flex-start; background: none; border: none; color: var(--amber); font-size: 0.8125rem; font-weight: 600; cursor: pointer; padding: 0; }
.co-acct-magic:hover { text-decoration: underline; text-underline-offset: 2px; }
.co-acct.done { flex-direction: row; align-items: center; gap: 10px; background: var(--green-dim); border-color: transparent; }
.co-acct.done svg { flex: none; color: var(--green); }
.co-acct.done span { font-size: 0.8438rem; line-height: 1.5; color: var(--bone); }
@media (max-width: 560px) { .co-fields { grid-template-columns: 1fr; } .co-acct-row { flex-direction: column; } .co-acct-row .btn { width: 100%; } }

/* ============================================================
   POSTING WIZARD
   ============================================================ */
.wiz-draft { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--amber-dim); margin-bottom: var(--s6); font-size: 0.875rem; color: var(--bone-2); }
.wiz-draft svg { color: var(--amber); flex: none; }
.wd-resume { margin-left: auto; font-weight: 600; color: var(--amber); }
.wd-dismiss { font-weight: 600; color: var(--taupe); }
.wiz-steps { display: flex; align-items: center; gap: 5px; margin-bottom: var(--s8); flex-wrap: wrap; }
.wiz-step { display: flex; align-items: center; gap: 8px; padding: 6px 13px 6px 6px; border-radius: var(--r-pill); border: 1px solid transparent; color: var(--taupe); font-size: 0.8438rem; font-weight: 600; transition: var(--t-fast); }
.wiz-step:hover { color: var(--bone); }
.wiz-step.on { background: var(--ink-800); border-color: var(--line-strong); color: var(--bone); }
.wiz-step.done { color: var(--bone-2); }
.wiz-step-dot { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--ink-700); color: var(--taupe); font-size: 0.8125rem; font-weight: 600; transition: var(--t-fast); }
.wiz-step.on .wiz-step-dot { background: var(--amber); color: #FAFAF8; }
.wiz-step.done .wiz-step-dot { background: var(--green-dim); color: var(--green); }
.wiz-layout { display: grid; grid-template-columns: 1fr 400px; gap: var(--s10); align-items: start; }
.wiz-body { display: flex; flex-direction: column; gap: var(--s4); min-height: 320px; }
.wiz-q { font-family: var(--serif); font-size: 1.5625rem; font-weight: 600; line-height: 1.15; color: var(--bone); }
.wiz-help { font-size: 0.9375rem; color: var(--taupe); margin-top: -6px; margin-bottom: 6px; line-height: 1.5; max-width: 56ch; }
.wiz-field { display: flex; flex-direction: column; }
.wiz-repeat-row { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s2); }
.wiz-repeat-row .input { flex: 1; }
.wiz-repeat-remove { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r); border: 1px solid var(--line); background: transparent; color: var(--taupe); cursor: pointer; transition: var(--t-fast); }
.wiz-repeat-remove:hover { border-color: var(--danger); color: var(--danger); }
.wiz-option-row { display: grid; grid-template-columns: 1.2fr 1.4fr 110px auto; gap: var(--s2); align-items: center; margin-top: var(--s2); }
.wiz-option-price { position: relative; display: flex; align-items: center; height: 46px; border: 1px solid var(--line); border-radius: var(--r); background: rgba(var(--ov),0.04); overflow: hidden; }
.wiz-option-price .pf-euro { padding-left: 12px; }
.wiz-option-price .input { border: none; background: none; height: 100%; padding-left: 4px; }
.wiz-field > .btn { margin-top: var(--s3); align-self: flex-start; }
.wiz-typecards { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--s4); }
.wiz-typecard { position: relative; text-align: left; border: 1.5px solid var(--line); border-radius: var(--r-lg); padding: 22px 20px; display: flex; flex-direction: column; gap: 10px; background: var(--ink-800); transition: var(--t); }
.wiz-typecard:hover { border-color: var(--bone-2); transform: translateY(-1px); box-shadow: var(--shadow-card); }
.budget-row { display: flex; gap: var(--s2); align-items: stretch; }
.budget-input { position: relative; flex: 1; display: flex; align-items: center; }
.budget-input .bi-pre { position: absolute; left: 12px; font-size: 0.8125rem; color: var(--taupe); pointer-events: none; }
.budget-input .input { padding-left: 62px; width: 100%; }
.budget-unit { flex: 0 0 130px; }
.wiz-typecard.on { border-color: var(--amber); background: var(--amber-dim); }
.wtc-ic { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; background: var(--ink-700); color: var(--bone); transition: var(--t-fast); }
.wiz-typecard.on .wtc-ic { background: var(--amber); color: #FAFAF8; }
.wtc-t { font-weight: 600; font-size: 1.0625rem; color: var(--bone); }
.wtc-d { font-size: 0.8438rem; color: var(--taupe); line-height: 1.45; }
.wtc-radio { position: absolute; top: 18px; right: 18px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line-strong); transition: var(--t-fast); }
.wiz-typecard.on .wtc-radio { border-color: var(--amber); background: radial-gradient(circle at center, var(--amber) 0 5px, transparent 6px); }

/* ── category picker on Basics (mirrors the hero's "What you need" field) ── */
.wiz-cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wiz-cat-opt {
  position: relative; display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 13px 14px; border: 1.5px solid var(--line); border-radius: var(--r-lg);
  background: var(--ink-800); transition: var(--t-fast); cursor: pointer;
}
.wiz-cat-opt:hover { border-color: var(--line-strong); background-color: rgba(var(--ov),0.04); }
.wiz-cat-opt.on { border-color: var(--sky, #1A8FE3); background: var(--sky-dim, rgba(26,143,227,0.08)); }
.wco-ic { width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center; background: var(--ink-700); color: var(--bone-2); transition: var(--t-fast); }
.wiz-cat-opt.on .wco-ic { background: var(--sky, #1A8FE3); color: #fff; }
.wco-text { display: flex; flex-direction: column; min-width: 0; }
.wco-label { font-size: 0.875rem; font-weight: 600; color: var(--bone); line-height: 1.3; }
.wco-blurb { font-size: 0.8125rem; color: var(--taupe); line-height: 1.3; }
.wco-chk { position: absolute; top: 12px; right: 12px; color: var(--sky, #1A8FE3); flex: none; }
@media (max-width: 700px) { .wiz-cat-grid { grid-template-columns: 1fr; } }

/* ── template suggestions ── */
.wiz-tmpl-wrap { margin-top: 4px; }
.wiz-tmpl-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wiz-tmpl-card {
  display: flex; flex-direction: column; gap: 6px; text-align: left;
  padding: 16px 18px; border: 1.5px dashed var(--line-strong); border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(246,130,31,0.05), transparent); transition: var(--t-fast); cursor: pointer;
}
.wiz-tmpl-card:hover { border-style: solid; border-color: var(--orange, #F6821F); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.wiz-tmpl-card .wtc-title { font-size: 0.9063rem; font-weight: 700; color: var(--bone); line-height: 1.35; }
.wiz-tmpl-card .wtc-desc { font-size: 0.875rem; color: var(--taupe); line-height: 1.5; }
.wiz-tmpl-card .wtc-use { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--orange-deep, #C85A10); font-weight: 600; margin-top: 4px; }
@media (max-width: 700px) { .wiz-tmpl-row { grid-template-columns: 1fr; } }
.wiz-cover { position: relative; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); }
.wiz-cover img { width: 100%; height: 280px; object-fit: cover; display: block; }
.wiz-cover-actions { position: absolute; bottom: 12px; right: 12px; display: flex; gap: 8px; }
.wiz-drop { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 44px 20px; border: 1.5px dashed var(--line-strong); border-radius: var(--r-lg); background: var(--ink-800); text-align: center; transition: var(--t-fast); cursor: pointer; }
.wiz-drop:hover.wiz-drop.drag { border-color: var(--amber); background: var(--amber-dim); }
.wd-ic { width: 56px; height: 56px; border-radius: 15px; display: grid; place-items: center; background: var(--ink-700); color: var(--taupe); }
.wd-t { font-weight: 600; font-size: 0.9688rem; color: var(--bone); }
.wd-d { font-size: 0.8125rem; color: var(--taupe); }
.wiz-review { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.wiz-rev-row { display: flex; gap: 16px; padding: 13px 18px; border-top: 1px solid var(--line); }
.wiz-rev-row:first-child { border-top: none; }
.wrr-k { width: 108px; flex: none; color: var(--taupe); font-size: 0.8438rem; }
.wrr-v { color: var(--bone); font-weight: 500; font-size: 0.9063rem; }
.wiz-warn.wiz-note { display: flex; gap: 10px; align-items: center; padding: 12px 15px; border-radius: var(--r); font-size: 0.875rem; line-height: 1.45; }
.wiz-warn svg.wiz-note svg { flex: none; }
.wiz-warn { background: var(--clay-dim); border: 1px solid rgba(196,76,134,0.3); color: var(--clay); }
.wiz-note { background: var(--green-dim); border: 1px solid rgba(53,123,79,0.32); color: var(--green); }
.wiz-nav { display: flex; align-items: center; gap: 12px; margin-top: var(--s7); padding-top: var(--s6); border-top: 1px solid var(--line); }
.wiz-nav-spacer { flex: 1; }
.wiz-rail { position: sticky; top: 84px; display: flex; flex-direction: column; gap: var(--s4); }
.wiz-rail-note { font-size: 0.875rem; color: var(--taupe); line-height: 1.5; }
.wiz-rail .pr-label .live { width: 7px; height: 7px; border-radius: 50%; background-color: var(--green); box-shadow: 0 0 0 4px var(--green-dim); }
.pr-sub { font-size: 0.875rem; color: var(--taupe); line-height: 1.5; margin-top: -6px; }
.pr-frame { position: relative; pointer-events: none; }
.pr-frame::after { content: "Preview"; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 2; font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; color: #FAFAF8; background: rgba(26,24,20,0.72); padding: 4px 10px; border-radius: var(--r-pill); }

/* success */
.wiz-success { display: flex; justify-content: center; }
.ws-card { max-width: 560px; width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 13px; padding-top: var(--s6); }
.ws-burst { width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center; background: var(--green-dim); color: var(--green); animation: pop 260ms var(--ease); }
.ws-eyebrow { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber); }
.ws-title { font-family: var(--serif); font-size: 2rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; color: var(--bone); }
.ws-sub { font-size: 0.9688rem; color: var(--taupe); line-height: 1.6; max-width: 46ch; }
.ws-preview { width: 100%; max-width: 380px; margin: var(--s3) auto; text-align: left; }
.ws-share { width: 100%; }
.ws-share-label { display: block; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--taupe); margin-bottom: 10px; }
.ws-share-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.ws-chip { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--ink-800); font-size: 0.8438rem; font-weight: 600; color: var(--bone); transition: var(--t-fast); }
.ws-chip:hover { border-color: var(--bone-2); transform: translateY(-1px); }
.ws-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: var(--s4); }

/* ============================================================
   MANAGE DASHBOARD
   ============================================================ */
.mng-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); margin-bottom: var(--s5); }
.mng-search { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px; margin-bottom: var(--s5); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--ink-800); color: var(--taupe); transition: var(--t-fast); }
.saved-search { margin-bottom: var(--s4); }
.saved-cat-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--s6); }
.mng-search:focus-within { border-color: var(--sky); box-shadow: 0 0 0 3px var(--sky-dim); }
.mng-search input { flex: 1; border: none; background: none; font-size: 0.9375rem; color: var(--bone); font-family: var(--sans); }
.mng-search input:focus { outline: none; }
.mng-search input::placeholder { color: var(--taupe-3); }
.mng-search button { display: grid; place-items: center; color: var(--taupe); flex: none; }
.mng-search button:hover { color: var(--bone); }
.mng-stat { display: flex; align-items: flex-start; gap: 12px; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 20px; background: var(--ink-800); }
.ms-ic { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--sky-dim); color: var(--sky-deep); }
.ms-body { min-width: 0; }
.ms-num { font-family: var(--serif); font-size: 1.875rem; font-weight: 600; color: var(--bone); line-height: 1; }
.ms-label { font-size: 0.8125rem; color: var(--taupe); margin-top: 6px; }
.ms-sub { font-size: 0.8125rem; color: var(--amber); font-weight: 600; margin-top: 4px; }
.mng-quick { display: flex; gap: 10px; margin-bottom: var(--s7); flex-wrap: wrap; }
.mng-quick-btn { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 15px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--ink-800); font-size: 0.8438rem; font-weight: 600; color: var(--bone); transition: var(--t-fast); }
.mng-quick-btn:hover { border-color: var(--line-strong); background: rgba(var(--ov),0.04); transform: translateY(-1px); }
.mng-list { display: flex; flex-direction: column; gap: 12px; }
.mng-row { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--ink-800); transition: var(--t-fast); }
.mng-row:hover { border-color: var(--line-strong); }
.mng-row.paused { opacity: 0.6; }
.mng-thumb { width: 64px; height: 64px; border-radius: 12px; flex: none; background-size: cover; background-position: center; display: grid; place-items: center; }
.mng-thumb-flag { font-size: 1.625rem; }
.mng-main { flex: 1; min-width: 0; }
.mng-row-top { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; }
.mng-kind { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--taupe); }
.mng-status { font-size: 0.8125rem; font-weight: 600; padding: 2px 9px; border-radius: var(--r-pill); }
.mng-status.on { background: var(--green-dim); color: var(--green); }
.mng-status.off { background: var(--ink-700); color: var(--taupe); }
.mng-title { font-weight: 600; font-size: 0.9688rem; color: var(--bone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mng-meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 0.8125rem; color: var(--taupe); margin-top: 6px; }
.mng-meta span { display: inline-flex; align-items: center; gap: 5px; }
.mng-actions { display: flex; gap: 8px; flex: none; }
.mng-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 13px; border-radius: var(--r); border: 1px solid var(--line); background: var(--ink-800); font-size: 0.8125rem; font-weight: 600; color: var(--bone-2); transition: var(--t-fast); }
.mng-btn:hover { border-color: var(--bone-2); color: var(--bone); }
.mng-btn.danger:hover { color: var(--clay); border-color: rgba(196,76,134,0.4); background: var(--clay-dim); }
.mng-btn.icon-only { width: 36px; padding: 0; justify-content: center; }
.mng-btn.primary-outline { border-color: var(--sky-deep); color: var(--sky-deep); }
.mng-btn.primary-outline:hover { background: var(--sky-dim); border-color: var(--sky-deep); color: var(--sky-deep); }
.mng-overflow { position: relative; }
.mng-overflow-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; min-width: 180px; padding: 6px; background: var(--glass); backdrop-filter: blur(16px); border: 1px solid var(--line-strong); border-radius: var(--r); box-shadow: var(--shadow-pop); display: flex; flex-direction: column; animation: pop 140ms var(--ease); }
.mng-overflow-menu button { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 7px; font-size: 0.8438rem; color: var(--bone); text-align: left; }
.mng-overflow-menu button:hover { background: rgba(var(--ov),0.06); }
.mng-overflow-menu button.danger { color: var(--clay); }
.mng-overflow-menu button.danger:hover { background: var(--clay-dim); }
.mng-reqs { display: flex; flex-direction: column; gap: 12px; }
.mng-req { display: flex; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--ink-800); }
.mng-req.done { opacity: 0.78; }
.mreq-av { width: 48px; height: 48px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #FAFAF8; font-weight: 700; font-size: 1rem; position: relative; }
.mreq-flag { position: absolute; bottom: -2px; right: -3px; font-size: 0.875rem; }
.mreq-body { flex: 1; min-width: 0; }
.mreq-top { display: flex; align-items: center; gap: 10px; }
.mreq-name { font-weight: 600; color: var(--bone); }
.mreq-badge { font-size: 0.8125rem; font-weight: 600; padding: 2px 9px; border-radius: var(--r-pill); }
.mreq-badge.requested { background: var(--amber-dim); color: var(--amber); }
.mreq-badge.confirmed { background: var(--green-dim); color: var(--green); }
.mreq-badge.declined { background: var(--ink-700); color: var(--taupe); }
.mreq-ago { margin-left: auto; font-size: 0.8125rem; color: var(--taupe-3); }
.mreq-for { font-size: 0.875rem; color: var(--bone-2); margin-top: 7px; }
.mreq-for b { color: var(--bone); font-weight: 600; }
.mreq-meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 0.8125rem; color: var(--taupe); margin-top: 7px; }
.mreq-meta span { display: inline-flex; align-items: center; gap: 5px; }
.mreq-note { font-family: var(--serif); font-style: italic; font-size: 0.9375rem; color: var(--bone-2); margin-top: 9px; line-height: 1.5; }
.mreq-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.mreq-badge.proposed { background: var(--led-bg); color: var(--led); }
.mreq-badge.in_progress { background: var(--led-bg); color: var(--led); }
.mreq-badge.completed { background: var(--ink-700); color: var(--taupe); }
.mreq-badge.in_progress { background: var(--led-bg); color: var(--led); }
.mreq-badge.completed { background: var(--ink-700); color: var(--taupe); }
.mng-req.awaiting { border-color: var(--led-bd); background: linear-gradient(0deg, var(--led-bg), var(--led-bg)), var(--ink-800); }
.mreq-line { display: flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 0.8438rem; color: var(--bone-2); }
.mreq-line svg { color: var(--led); }
.mreq-line.led b { color: var(--bone); }
.mreq-line.muted { color: var(--taupe); font-style: italic; }

/* ── Request response modal (provider side) ───────────── */
.req-modal { max-width: 500px; }
.req-modal .modal-body { gap: var(--s6); }
.rq-head { display: flex; align-items: flex-start; gap: 14px; padding: var(--s6) var(--s6) 0; }
.rq-av { width: 52px; height: 52px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #FAFAF8; font-weight: 700; font-size: 1.0625rem; position: relative; }
.rq-flag { position: absolute; bottom: -2px; right: -3px; font-size: 0.9375rem; }
.rq-eyebrow { font-family: var(--mono); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--taupe-3); margin-bottom: 4px; }
.rq-name { font-family: var(--serif); font-size: 1.1875rem; font-weight: 600; color: var(--bone); line-height: 1.2; }
.rq-sub { font-size: 0.875rem; color: var(--taupe); margin-top: 3px; }
.rq-listing { display: flex; align-items: center; gap: 10px; padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--r); background: var(--glass); font-size: 0.9063rem; font-weight: 600; color: var(--bone); }
.rq-listing svg { color: var(--taupe-3); flex: none; }
.rq-summary { border: 1px solid var(--line); border-radius: var(--r-lg); background: rgba(var(--ov),0.025); padding: var(--s5); }
.rq-summary-title { font-family: var(--mono); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--taupe-3); margin-bottom: var(--s3); }
.rq-facts { display: flex; gap: 10px; flex-wrap: wrap; }
.rq-fact { flex: 1; min-width: 130px; display: flex; align-items: flex-start; gap: 9px; }
.rq-fact svg { color: var(--taupe-3); flex: none; margin-top: 2px; }
.rq-fl { font-family: var(--mono); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--taupe-3); margin-bottom: 5px; }
.rq-fv { font-size: 0.9063rem; font-weight: 600; color: var(--bone); }
.rq-note { display: flex; flex-direction: column; gap: 6px; }
.rq-nl { font-family: var(--mono); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--taupe-3); }
.rq-bubble { position: relative; background: rgba(var(--ov),0.04); border-radius: 14px; border-bottom-left-radius: 4px; padding: 12px 16px; font-family: var(--serif); font-style: italic; font-size: 0.9375rem; line-height: 1.5; color: var(--bone-2); }
.rq-panel { border: 1px solid var(--line); background: var(--ink-800); border-radius: var(--r-lg); padding: var(--s5); display: flex; flex-direction: column; gap: var(--s4); }
.rq-panel-title { display: flex; align-items: center; gap: 8px; font-size: 0.9375rem; font-weight: 600; color: var(--bone); }
.rq-panel-title svg { color: var(--sky-deep); }
.rq-opt { font-family: var(--mono); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--taupe-3); font-weight: 400; }
.rq-time-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; }
.rq-time-row .form-label { margin-bottom: 6px; }
.rq-preview { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; color: var(--bone-2); background: var(--green-dim); border: 1px solid rgba(70,200,146,0.3); border-radius: var(--r); padding: 10px 13px; }
.rq-preview svg { color: var(--green); flex: none; }
.rq-preview b { color: var(--bone); }
.rq-info { display: flex; align-items: flex-start; gap: 8px; font-size: 0.8125rem; color: var(--taupe); line-height: 1.5; background: rgba(var(--ov),0.03); border-radius: var(--r); padding: 10px 13px; }
.rq-info svg { flex: none; margin-top: 1px; color: var(--taupe-3); }
.rq-foot { flex-wrap: wrap; }
.rq-foot-main { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-wrap: wrap; }

/* ── Proposed-time banner (seeker side, My Bookings) ──── */
.bk-propose { margin-top: 13px; border: 1px solid var(--led-bd); background: var(--led-bg); border-radius: var(--r); padding: 13px 15px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.bk-propose-txt { display: flex; align-items: center; gap: 9px; font-size: 0.8438rem; color: var(--bone-2); line-height: 1.45; }
.bk-propose-txt svg { color: var(--led); flex: none; }
.bk-propose-txt b { color: var(--bone); }
.bk-propose-actions { display: flex; gap: 8px; flex: none; }
.bk-status.propose { background: var(--led-bg); color: var(--led); }

@media (max-width: 760px) {
  .rq-time-row { grid-template-columns: 1fr 1fr; }
  .rq-foot-main { width: 100%; }
  .rq-foot-main .btn { flex: 1; justify-content: center; }
  .bk-propose { flex-direction: column; align-items: stretch; }
  .bk-propose-actions .btn { flex: 1; justify-content: center; }
}

/* ============================================================
   AVAILABILITY, authoring (Create) + slot pickers (Checkout)
   ============================================================ */
.wiz-subhelp { font-size: 0.8125rem; color: var(--taupe); line-height: 1.5; margin: -2px 0 12px; }

/* weekday toggles */
.flex-toggle-row { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: var(--r); background: rgba(var(--ov),0.02); cursor: pointer; font-size: 0.875rem; color: var(--bone-2); line-height: 1.4; }
.flex-toggle-row input { margin-top: 2px; flex: none; accent-color: var(--amber); width: 16px; height: 16px; cursor: pointer; }
.avail-days { display: flex; flex-wrap: wrap; gap: 8px; }
.avail-day {
  min-width: 52px; padding: 9px 4px; text-align: center; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--ink-800); color: var(--taupe); font-size: 0.8125rem; font-weight: 600; cursor: pointer; transition: var(--t-fast);
}
.avail-day:hover { border-color: var(--line-strong); color: var(--bone); }
.avail-day.on { background: var(--amber); border-color: var(--amber); color: #FAFAF8; }
.avail-slots-label { font-family: var(--mono); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--taupe-3); margin: 16px 0 9px; }

/* checkout slot picker */
.co-avail { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; background: var(--glass); }
.co-avail-head { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; font-weight: 600; color: var(--bone); margin-bottom: 14px; }
.co-avail-head svg { color: var(--amber); }
.co-flex-note { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-radius: var(--r-lg); background: var(--amber-dim); border: 1px solid var(--line); font-size: 0.875rem; color: var(--bone-2); line-height: 1.5; }
.co-flex-note svg { flex: none; margin-top: 2px; color: var(--amber-deep); }
.co-noavail-note { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border-radius: var(--r-lg); background: rgba(var(--ov),0.03); border: 1px solid var(--line); }
.co-noavail-note svg { flex: none; margin-top: 2px; color: var(--taupe); }
.co-noavail-note b { display: block; font-size: 0.9375rem; color: var(--bone); margin-bottom: 4px; }
.co-noavail-note p { font-size: 0.8438rem; color: var(--taupe); line-height: 1.5; margin: 0; }
.co-date-row { display: flex; flex-wrap: wrap; gap: 9px; }
.co-date {
  display: flex; flex-direction: column; align-items: center; gap: 1px; width: 62px; padding: 9px 4px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--ink-800); cursor: pointer; transition: var(--t-fast);
}
.co-date:hover { border-color: var(--line-strong); }
.cod-wd { font-family: var(--mono); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--taupe-3); }
.cod-day { font-family: var(--serif); font-size: 1.3125rem; font-weight: 600; color: var(--bone); line-height: 1.05; }
.cod-mo { font-size: 0.8125rem; color: var(--taupe); }
.co-date.on { background: var(--amber); border-color: var(--amber); }
.co-date.on .cod-wd, .co-date.on .cod-day, .co-date.on .cod-mo { color: #FAFAF8; }
.co-date.full { cursor: not-allowed; position: relative; background: var(--ink-850); border-color: var(--line); }
.co-date.full .cod-day, .co-date.full .cod-wd, .co-date.full .cod-mo { color: var(--taupe); text-decoration: line-through; }
.cod-full { position: absolute; top: -7px; right: -6px; display: inline-flex; align-items: center; gap: 3px; font-family: var(--mono); font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--bone-2); background: var(--ink-700); border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: 1px 6px; }

/* capacity-aware time slots */
.slot-grid { display: flex; flex-wrap: wrap; gap: 9px; }
.slot-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--line); border-radius: var(--r-pill); min-height: 44px;
  background: var(--ink-800); color: var(--bone); font-size: 0.875rem; cursor: pointer; transition: var(--t-fast);
}
.slot-chip:hover { border-color: var(--line-strong); }
.slot-chip .slot-t { font-weight: 600; font-variant-numeric: tabular-nums; }
.slot-chip .slot-tag { font-family: var(--mono); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--taupe); border-left: 1px solid var(--line); padding-left: 8px; }
.slot-chip.on { background: var(--amber); border-color: var(--amber); color: #FAFAF8; }
.slot-chip.on .slot-tag { color: rgba(255,255,255,0.85); border-color: rgba(255,255,255,0.3); }
.slot-chip.low .slot-tag { color: var(--clay); }
.slot-chip.full { cursor: not-allowed; text-decoration: none; background: var(--ink-850); border-color: var(--line); }
.slot-chip.full .slot-t { text-decoration: line-through; color: var(--taupe); }
.slot-chip .tag-chip-status { height: 1.375rem; font-size: 0.8125rem; padding: 0 0.5rem; margin-left: 0.375rem; }

/* seats-per-slot control (Create) */
.cap-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.cap-opt {
  min-width: 46px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--ink-800);
  color: var(--taupe); font-size: 0.8125rem; font-weight: 600; cursor: pointer; transition: var(--t-fast); font-variant-numeric: tabular-nums;
}
.cap-opt:hover { border-color: var(--line-strong); color: var(--bone); }
.cap-opt.on { background: var(--amber); border-color: var(--amber); color: #FAFAF8; }

/* propose-time quick slots (provider request modal) */
.rq-quick { display: flex; flex-direction: column; gap: 10px; }
.rq-quick-label { font-family: var(--mono); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--taupe-3); }
.rq-quick-or { font-size: 0.8125rem; color: var(--taupe-3); text-align: center; position: relative; }
.rq-slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.rq-slot-card { position: relative; display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--line); border-radius: var(--r); background: var(--ink-800); padding: 10px 12px; text-align: left; transition: var(--t-fast); }
.rq-slot-card:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.rq-slot-card.on { border-color: var(--sky-deep); background: var(--sky-dim); box-shadow: 0 0 0 1px var(--sky-deep) inset; }
.rq-slot-date { font-size: 0.8125rem; font-weight: 600; color: var(--bone); }
.rq-slot-time { font-size: 0.8125rem; color: var(--taupe); }
.rq-slot-card.on .rq-slot-date, .rq-slot-card.on .rq-slot-time { color: var(--sky-deep); }
.rq-slot-check { position: absolute; top: 8px; right: 8px; color: var(--sky-deep); }

/* availability line on the listing detail */
.mf-value .avail-ico { color: var(--amber); }

/* profile tabs row + manage button */
.pf-tabs-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: var(--s6); }
.pf-tabs-row .pf-tabs { margin-bottom: 0; }
.pf-manage-btn { flex: none; }

@media (max-width: 980px) {
  .wiz-layout { grid-template-columns: 1fr; }
  .wiz-rail { position: static; order: -1; }
  .wiz-rail .pr-label { margin-bottom: 4px; }
}
@media (max-width: 760px) {
  .mng-stats { grid-template-columns: repeat(2, 1fr); }
  .mng-row { flex-wrap: wrap; }
  .mng-actions { width: 100%; }
  .mng-btn { flex: 1; justify-content: center; }
  .wiz-typecards { grid-template-columns: 1fr; }
  .wiz-option-row { grid-template-columns: 1fr; }
  .wiz-option-price { width: 100%; }
  .wiz-rev-row { flex-direction: column; gap: 4px; }
  .wrr-k { width: auto; }
  .ws-actions .btn { flex: 1; }
}

/* ============================================================
   MY BOOKINGS + REVIEW  (the seeker-side loop)
   ============================================================ */
.bk-list { display: flex; flex-direction: column; gap: 14px; }
.bk-row { display: flex; gap: 16px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--ink-800); box-shadow: var(--shadow-sm); }
.bk-row.cancelled { opacity: 0.6; }
.bk-thumb { width: 64px; height: 64px; flex: none; border-radius: var(--r); display: grid; place-items: center; position: relative; overflow: hidden; }
.bk-thumb-flag { font-size: 1.875rem; line-height: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25)); }
.bk-main { flex: 1; min-width: 0; }
.bk-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bk-kind { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--taupe); padding: 3px 9px; border: 1px solid var(--line); border-radius: var(--r-pill); }
.bk-kind svg { color: var(--taupe-3); }
.bk-status { font-size: 0.8125rem; font-weight: 600; padding: 3px 10px; border-radius: var(--r-pill); }
.bk-status.ok { background: var(--green-dim); color: var(--green); }
.bk-status.pending { background: var(--amber-dim); color: var(--amber); }
.bk-status.muted { background: var(--ink-700); color: var(--taupe); }
.bk-status.off { background: var(--clay-dim); color: var(--clay); }
.bk-reviewed { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8125rem; font-weight: 600; color: var(--green); }
.bk-reviewed svg { color: var(--star); }
.bk-title { font-family: var(--serif); font-size: 1.125rem; font-weight: 600; color: var(--bone); margin: 8px 0 7px; line-height: 1.25; }
.bk-meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 0.8125rem; color: var(--taupe); }
.bk-meta span { display: inline-flex; align-items: center; gap: 5px; }
.bk-meta svg { color: var(--taupe-3); }
.bk-ref { font-family: var(--mono); font-size: 0.8125rem; color: var(--taupe-3); letter-spacing: 0.04em; }
/* one primary button + an overflow kebab menu, same compact pattern as the
   dashboard's listing rows (.mng-actions/.mng-overflow, manage.jsx) instead
   of stacking every action as its own full-width button. */
.bk-actions { display: flex; flex-direction: row; align-items: center; gap: 8px; flex: none; }

/* interactive star input + review modal */
.rv-modal { max-width: 520px; }
.rv-modal-head { display: flex; align-items: flex-start; gap: 14px; padding: var(--s6) var(--s6) 0; }
.rv-mh-av { width: 52px; height: 52px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #FAFAF8; font-weight: 700; font-size: 1.0625rem; position: relative; }
.rv-mh-flag { position: absolute; bottom: -2px; right: -3px; font-size: 0.9375rem; }
.rv-mh-eyebrow { font-family: var(--mono); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--taupe-3); margin-bottom: 4px; }
.rv-mh-title { font-family: var(--serif); font-size: 1.125rem; font-weight: 600; color: var(--bone); line-height: 1.25; }
.rv-mh-sub { font-size: 0.875rem; color: var(--taupe); margin-top: 3px; }
.rv-rate { display: flex; align-items: center; gap: 14px; }
.rv-rate.err .star-input { animation: rv-shake 0.4s var(--ease); }
.rv-rate.err .star-btn { color: var(--clay); }
@keyframes rv-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.star-input { display: inline-flex; gap: 4px; }
.star-btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--line-strong); transition: var(--t-fast); }
.star-btn:hover { transform: scale(1.08); }
.star-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ink-900), 0 0 0 4px var(--sky); border-radius: 8px; }
.star-btn.on { color: var(--star); }
.rv-rate-word { font-family: var(--serif); font-style: italic; font-size: 1rem; color: var(--bone-2); }
.rv-tags { display: flex; flex-wrap: wrap; gap: 8px; }

/* listing review wall (inside detail modal) */
.modal-reviews { display: flex; flex-direction: column; gap: 13px; }
.mr-head { display: flex; align-items: center; justify-content: space-between; }
.mr-title { font-family: var(--mono); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--taupe-3); }
.mr-list { display: flex; flex-direction: column; gap: 12px; }
.mrev { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--glass); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.mrev.mine { border-color: var(--amber); background: var(--amber-dim); }
.mrev-top { display: flex; align-items: center; gap: 11px; }
.mrev-av { width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #FAFAF8; font-weight: 700; font-size: 0.8125rem; position: relative; }
.mrev-flag { position: absolute; bottom: -3px; right: -4px; font-size: 0.8125rem; }
.mrev-id { display: flex; flex-direction: column; gap: 2px; }
.mrev-name { font-size: 0.875rem; font-weight: 600; color: var(--bone); display: flex; align-items: center; gap: 7px; }
.mrev-you { font-family: var(--mono); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--amber); border: 1px solid var(--amber); border-radius: var(--r-pill); padding: 1px 6px; }
.mrev-date { font-size: 0.8125rem; color: var(--taupe); }
.mrev-stars { margin-left: auto; display: inline-flex; gap: 2px; align-self: flex-start; }
.mrev-stars svg.on { color: var(--star); }
.mrev-stars svg.off { color: var(--line-strong); }
.mrev-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.mrev-tag { font-size: 0.8125rem; color: var(--taupe); background: rgba(var(--ov),0.05); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 3px 9px; }
.mrev-text { font-size: 0.875rem; line-height: 1.55; color: var(--bone-2); }

/* profile head actions cluster */
.pf-head-actions { display: flex; gap: 8px; flex: none; flex-wrap: wrap; }

@media (max-width: 760px) {
  .bk-row { flex-wrap: wrap; }
  .bk-thumb { width: 52px; height: 52px; }
  .bk-actions { flex-direction: row; width: 100%; min-width: 0; flex-wrap: wrap; }
  .bk-actions .btn.bk-actions .mng-btn { flex: 1; }
  .mng-btn.icon-only { flex: none; width: 44px; height: 44px; }
  .rv-modal-head { padding: var(--s5) var(--s5) 0; }
}


/* ============================================================
   belinkd, Discover hero pills + feed toolbar
   ============================================================ */
.hero-pills { display: flex; gap: 14px; margin-top: var(--s8); flex-wrap: wrap; max-width: 780px; }
.hero-pill-wrap { position: relative; flex: 1 1 330px; min-width: 0; }
.hero-pill {
  width: 100%; display: flex; align-items: center; gap: 14px; text-align: left;
  padding: 13px 18px; border-radius: var(--r-pill);
  background: var(--ink-800); border: 1.5px solid var(--line-strong);
  box-shadow: var(--shadow-sm); transition: var(--t); cursor: pointer;
}
.hero-pill:hover { border-color: var(--amber); transform: translateY(-1px); box-shadow: var(--shadow-card); }
.hero-pill.orange:hover { border-color: var(--orange); }
.hero-pill.active { border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-dim); }
.hero-pill.orange.active { border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-dim); }
.hp-ic { width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--amber-dim); color: var(--amber); }
.hero-pill.orange .hp-ic { background: var(--orange-dim); color: var(--orange); }
.hp-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.hp-label { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--taupe); }
.hp-value { font-size: 1rem; font-weight: 600; color: var(--bone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-value.ph { color: var(--taupe-3); font-weight: 500; }
.hp-chev { margin-left: auto; color: var(--taupe); flex: none; transition: transform var(--t-fast); }
.hero-pill.active .hp-chev { transform: rotate(180deg); }
.hero-cta-row { display: flex; align-items: center; gap: 18px; margin-top: var(--s6); flex-wrap: wrap; }
.hero-cta-note { font-size: 0.875rem; color: var(--taupe); }

/* feed toolbar: segmented tabs + search + sort + create */
.feed-toolbar { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; margin-top: var(--s10); padding-bottom: var(--s5); border-bottom: 1px solid var(--line); }
.seg-tabs { display: inline-flex; background: var(--ink-750); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 4px; gap: 2px; }
.seg-tab { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 13px; border-radius: var(--r-pill); font-size: 0.875rem; font-weight: 600; color: var(--taupe); white-space: nowrap; transition: var(--t-fast); }
.seg-tab:hover { color: var(--bone); }
.seg-tab.on { background: var(--ink-800); color: var(--bone); box-shadow: var(--shadow-sm); }
.seg-tab.t-svc.on { color: var(--amber); }
.seg-tab.t-evt.on { color: var(--orange); }
.seg-tab.t-req.on { color: var(--verify); }
.seg-tab .st-dot { width: 8px; height: 8px; border-radius: 50%; }
.seg-tab.t-svc .st-dot { background: var(--amber); }
.seg-tab.t-evt .st-dot { background: var(--orange); }
.seg-tab.t-req .st-dot { background: var(--verify); }
.seg-tab.all .st-dot { background: linear-gradient(135deg, var(--amber) 50%, var(--orange) 50%); }
.st-n { font-family: var(--mono); font-size: 0.8125rem; opacity: 0.75; }

.feed-tools-right { margin-left: auto; display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.feed-search { display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 15px; background: var(--ink-800); border: 1.5px solid var(--line-strong); border-radius: var(--r-pill); min-width: 210px; }
.feed-search:focus-within { border-color: var(--amber); }
.feed-search input { border: none; outline: none; background: transparent; font-size: 0.875rem; color: var(--bone); width: 100%; }
.feed-search svg { color: var(--taupe); flex: none; }
.feed-search .sb-clear { color: var(--taupe); display: grid; place-items: center; }
.sort-field { position: relative; display: inline-flex; align-items: center; }
.sort-field select { appearance: none; -webkit-appearance: none; height: 40px; padding: 0 30px 0 15px; max-width: 176px; text-overflow: ellipsis; border: 1px solid var(--line); border-radius: var(--r-pill); background: rgba(var(--ov),0.02); font-size: 0.8438rem; font-weight: 600; color: var(--bone-2); cursor: pointer; transition: var(--t-fast); }
.sort-field select:hover { border-color: var(--line-strong); background: rgba(var(--ov),0.04); color: var(--bone); }
.sort-field select:focus-visible { border-color: var(--amber-deep); }
.sort-field > svg { position: absolute; right: 14px; pointer-events: none; color: var(--taupe); }
/* .btn-create inherits color/size/hover from .btn.btn-warm; this only carries
   the feed-toolbar icon gap + the responsive circular collapse (mobile). */
.btn-create { gap: 8px; }

/* type-labelled section eyebrow (services vs events) */
.type-eyebrow { display: inline-flex; align-items: center; gap: 9px; }
.type-eyebrow .te-dot { width: 9px; height: 9px; border-radius: 50%; }
.type-eyebrow.t-svc .te-dot { background: var(--amber); }
.type-eyebrow.t-evt .te-dot { background: var(--orange); }
.type-eyebrow.all .te-dot { background: linear-gradient(135deg, var(--amber) 50%, var(--orange) 50%); }

/* create-your-own CTA card mixed into the grid */
.create-cta-card { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 11px; padding: var(--s6); border-radius: var(--r-lg); border: 2px dashed var(--line-strong); background: var(--orange-dim); min-height: 230px; cursor: pointer; transition: var(--t); }
.create-cta-card:hover { border-color: var(--orange); transform: translateY(-2px); }
.ccc-ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--ink-800); color: var(--orange); box-shadow: var(--shadow-sm); }
.ccc-title { font-family: var(--serif); font-size: 1.3125rem; font-weight: 600; color: var(--bone); line-height: 1.15; }
.ccc-sub { font-size: 0.875rem; color: var(--taupe); line-height: 1.5; max-width: 32ch; }
.ccc-link { display: inline-flex; align-items: center; gap: 6px; font-size: 0.875rem; font-weight: 700; color: var(--orange); margin-top: 2px; }

@media (max-width: 720px) {
  .feed-tools-right { width: 100%; }
  .feed-search { flex: 1; min-width: 0; }
  .hero-pill-wrap { flex: 1 1 100%; }
}


/* ============================================================
   belinkd, hero atmosphere, ring motif + orchestrated entrance
   ============================================================ */
.hero { position: relative; overflow: visible; }
.hero > *:not(.hero-rings):not(.scrim) { position: relative; z-index: 1; }
.hero-rings { position: absolute; z-index: 0; top: -86px; right: -56px; width: 372px; max-width: 40vw; height: auto; pointer-events: none; opacity: 0.16; }
.hero-rings .r-sky { stroke: var(--amber); }
.hero-rings .r-org { stroke: var(--orange); }
[data-theme="dark"] .hero-rings { opacity: 0.34; }
@media (max-width: 900px) { .hero-rings { width: 320px; top: -26px; right: -40px; opacity: 0.3; } }
@media (max-width: 560px) { .hero-rings { width: 240px; right: -70px; opacity: 0.22; } }

/* hero h1 tightened for the Bricolage display face */
.hero h1 { font-weight: 600; letter-spacing: -0.025em; }
.hero h1 em { font-style: normal; font-weight: 600; }

@media (prefers-reduced-motion: no-preference) {
  .hero.is-entering .hero-eyebrow.hero.is-entering h1.hero.is-entering .hero-sub.hero.is-entering .hero-pills.hero.is-entering .hero-cta-row { opacity: 0; animation: heroRise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .hero.is-entering .hero-eyebrow { animation-delay: 0.04s; }
  .hero.is-entering h1 { animation-delay: 0.13s; }
  .hero.is-entering .hero-sub { animation-delay: 0.27s; }
  .hero.is-entering .hero-pills { animation-delay: 0.40s; }
  .hero.is-entering .hero-cta-row { animation-delay: 0.52s; }
  .hero-rings { animation: ringFloat 16s ease-in-out infinite alternate; transform-origin: 60% 50%; }
  .hero-rings .r-org { animation: ringDrift 16s ease-in-out infinite alternate; }
}
@keyframes heroRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes ringFloat { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(20px) rotate(5deg); } }
@keyframes ringDrift { from { transform: translateX(0); } to { transform: translateX(7px); } }


/* ============================================================
   belinkd, page atmosphere (grain + mesh) & crafted card motion
   ============================================================ */
/* tactile grain on the bare canvas (sits behind #root content) */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0.04; 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");
}
[data-theme="dark"] body::after { mix-blend-mode: screen; opacity: 0.05; }

/* soft sky/orange mesh giving the hero band depth */
.hero::before {
  content: ""; position: absolute; top: -34px; bottom: -24px; left: 50%; width: 100vw; transform: translateX(-50%); z-index: 0; pointer-events: none;
  background:
    radial-gradient(58% 86% at 78% 4%, var(--orange-dim), transparent 62%),
    radial-gradient(52% 78% at 12% -6%, var(--amber-dim), transparent 60%);
}

/* crafted, type-keyed card interaction, sky for services, orange for events */
.card:hover { transform: translateY(-4px); }
.card.svc:hover { box-shadow: 0 22px 46px -18px rgba(26,143,227,0.42), var(--shadow-card); }
.card.evt:hover { box-shadow: 0 22px 46px -18px rgba(246,130,31,0.42), var(--shadow-card); }

/* section headline gets a small linked-ring tick before it */
.section-head h2 { position: relative; }


/* ============================================================
   belinkd, soft, brand-tinted elevation pass (echoes .btn-create)
   ============================================================ */
.hero-pill { box-shadow: 0 12px 28px -16px rgba(26,143,227,0.50), 0 2px 6px rgba(26,24,20,0.05); }
.hero-pill:hover { box-shadow: 0 18px 38px -15px rgba(26,143,227,0.58), 0 4px 10px rgba(26,24,20,0.07); }
.hero-pill.orange { box-shadow: 0 12px 28px -16px rgba(246,130,31,0.46), 0 2px 6px rgba(26,24,20,0.05); }
.hero-pill.orange:hover { box-shadow: 0 18px 38px -15px rgba(246,130,31,0.55), 0 4px 10px rgba(26,24,20,0.07); }

.feed-search { box-shadow: 0 10px 24px -18px rgba(26,143,227,0.55); }
.feed-search:focus-within { box-shadow: 0 12px 28px -15px rgba(26,143,227,0.55); }
.sort-field select { box-shadow: 0 10px 24px -18px rgba(26,143,227,0.45); }
.seg-tabs { box-shadow: 0 10px 26px -20px rgba(26,24,20,0.55); }

.card { box-shadow: 0 12px 28px -20px rgba(26,24,20,0.42), 0 2px 6px rgba(26,24,20,0.045); }
.create-cta-card { box-shadow: 0 12px 30px -18px rgba(246,130,31,0.52); }
.create-cta-card:hover { box-shadow: 0 18px 40px -16px rgba(246,130,31,0.58); }

.btn-primary { box-shadow: 0 12px 26px -13px rgba(26,24,20,0.55); }
.btn-primary:hover { box-shadow: 0 16px 32px -12px rgba(26,24,20,0.62); transform: translateY(-1px); }

[data-theme="dark"] .hero-pill,
[data-theme="dark"] .card,
[data-theme="dark"] .seg-tabs,
[data-theme="dark"] .feed-search { box-shadow: 0 14px 30px -18px rgba(0,0,0,0.7); }


/* ============================================================
   belinkd, UX review pass: hero hierarchy, sticky tabs, atmosphere
   ============================================================ */
/* eyebrow → soft chip so the hero opens with a defined object, not loose text */
.hero-eyebrow {
  padding: 7px 13px 7px 11px; border-radius: var(--r-pill); white-space: nowrap;
  background: rgba(var(--ov),0.04); border: 1px solid var(--line);
  box-shadow: 0 8px 20px -16px rgba(26,143,227,0.5);
}
.hero-eyebrow .eyebrow { color: var(--bone-2); }

/* numbered hint making the pills read as step 1 / the primary action */
.hero-hint {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: var(--s8); margin-bottom: var(--s3);
  font-size: 0.8438rem; font-weight: 600; color: var(--bone-2);
}
.hero-hint .hh-num {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 0.8125rem; font-weight: 700;
  color: #fff; background: var(--orange);
  box-shadow: 0 6px 14px -6px var(--orange);
}
.hero-cta-note { display: inline-flex; align-items: center; gap: 7px; }

/* sticky, frosted feed toolbar so type filter + search follow the scroll */
.feed-toolbar {
  position: sticky; top: 0; z-index: 30;
  margin-left: calc(-1 * var(--s8)); margin-right: calc(-1 * var(--s8));
  padding: var(--s4) var(--s8) var(--s4);
  background: transparent;
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}
/* frost only once pinned, while the hero dropdown is open the page is at the
   top, the bar isn't stuck, so it stays transparent and can't paint over the
   popover (backdrop-filter overpaints higher z-index siblings in Chromium) */
.feed-toolbar.is-stuck {
  background: color-mix(in srgb, var(--ink-900) 84%, transparent);
  backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px);
  box-shadow: 0 14px 30px -22px rgba(26,24,20,0.6); border-color: var(--line-strong);
}
@media (max-width: 720px) {
  .feed-toolbar { margin-left: calc(-1 * var(--s4)); margin-right: calc(-1 * var(--s4)); padding-left: var(--s4); padding-right: var(--s4); }
}

/* empty state gets the brand mesh + a soft framed surface, not a void */
.grid-svc > .empty-state { grid-column: 1 / -1; }
.empty-state {
  position: relative; border-radius: var(--r-lg);
  text-align: center; padding: var(--s12) var(--s6);
  display: flex; flex-direction: column; align-items: center;
  background:
    radial-gradient(60% 80% at 22% 0%, var(--amber-dim), transparent 60%),
    radial-gradient(60% 80% at 80% 110%, var(--orange-dim), transparent 60%),
    var(--ink-850);
  border: 1px dashed var(--line-strong);
  box-shadow: 0 12px 30px -24px rgba(26,143,227,0.5);
}
.empty-state .serif { font-size: 1.25rem; color: var(--bone); margin-bottom: 6px; }
.empty-state > p, .empty-state > div:not(.serif):not(.es-icon):not(.empty-action) { max-width: 42ch; color: var(--taupe); font-size: 0.9375rem; line-height: 1.55; }
.es-icon {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  margin-bottom: var(--s4); color: var(--sky);
  background: rgba(26,143,227,0.10); border: 1px solid rgba(26,143,227,0.28);
}

/* ── Helpful feed empty state, icon + reason + removable filters + actions ── */
.feed-empty { display: flex; flex-direction: column; align-items: center; gap: 0; padding: var(--s16) var(--s8); }
.fe-icon {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  margin-bottom: var(--s5); color: var(--sky);
  background: rgba(26,143,227,0.10); border: 1px solid rgba(26,143,227,0.28);
}
.feed-empty .serif { margin-bottom: var(--s2); }
.fe-sub { max-width: 46ch; margin: 0 auto; color: var(--taupe); font-size: 0.9375rem; line-height: 1.55; text-wrap: pretty; }
.fe-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: var(--s5); }
.fe-fpill {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 8px 0 14px;
  border-radius: var(--r-pill); border: 1px solid var(--line-strong);
  background: var(--ink-800); color: var(--bone-2); font-size: 0.8438rem; font-weight: 600;
  cursor: pointer; transition: var(--t-fast);
}
.fe-fpill:hover { color: var(--bone); border-color: var(--bone-2); background: var(--ink-750); }
.fe-fpill svg { color: var(--taupe); }
.fe-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: var(--s6); }

/* section headline: small linked-ring tick keyed to the section type */
.section-head h2::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 30px; height: 16px; margin-right: 11px;
  background:
    radial-gradient(circle at 7px 8px, transparent 5px, var(--amber) 5px 6.6px, transparent 6.6px),
    radial-gradient(circle at 15px 8px, transparent 5px, var(--orange) 5px 6.6px, transparent 6.6px);
}
.type-eyebrow.svc ~ * .section-head h2::before { }


/* ============================================================
   belinkd, fixes: seg-tab count wrap + dropdown/toolbar overlap
   ============================================================ */
/* keep the segmented control & each tab at natural width; never shrink */
.seg-tabs { flex-shrink: 0; flex-wrap: nowrap; }
.seg-tab { flex: 0 0 auto; }
/* count was computing display:block (rogue global) → dropped to its own line */
.seg-tab .st-n { display: inline-block; white-space: nowrap; line-height: 1; }

/* hero pill area must stack ABOVE the sticky feed toolbar so the location /
   culture popovers aren't painted over (hero children are z-index:1, toolbar 30) */
.hero-engage.hero > .hero-engage { position: relative; z-index: 50; }

/* ============================================================
   belinkd, Discover hierarchy redesign
   hero contrast, role-coded filters, category scan pattern
   ============================================================ */

/* smaller, corner-tucked rings that no longer bleed into the copy */
.hero-rings { width: 230px; max-width: 24vw; top: -58px; right: -28px; opacity: 0.1; }
[data-theme="dark"] .hero-rings { opacity: 0.22; }

/* the two filters read as distinct roles: blue = WHERE, orange = WHO */
.hero-pill { background: color-mix(in srgb, var(--amber) 5%, var(--ink-800)); border-color: color-mix(in srgb, var(--amber) 20%, var(--line-strong)); }
.hero-pill.orange { background: color-mix(in srgb, var(--orange) 6%, var(--ink-800)); border-color: color-mix(in srgb, var(--orange) 24%, var(--line-strong)); }

/* CTA dominates; the count note drops to a quiet tertiary caption */
.hero-cta-row { gap: 22px; margin-top: var(--s8); }
.hero-cta-row .btn-primary { height: 54px; padding: 0 30px; font-size: 1rem; border-radius: var(--r-pill); }
.hero-cta-note { font-size: 0.875rem; color: var(--taupe-3); font-weight: 500; }

/* persistent category color strip across the top of every service cover */
.svc-cover::before { content: none; }
.svc-cover .cat-tag { position: relative; z-index: 6; }

/* access tags become bold, filled pills, the loudest signal on the cover,
   clearly above the quieter frosted category label */
.svc-cover .access {
  border: none; height: 28px; font-weight: 700; font-size: 0.8125rem;
  color: #fff; box-shadow: 0 6px 16px -6px rgba(26,24,20,0.45);
}
.svc-cover .access.open { background: var(--green); }
.svc-cover .access.led  { background: var(--led); }
.svc-cover .access.only { background: var(--clay); }
.svc-cover .access .glyph.svc-cover .access svg { color: #fff; }

/* ============================================================
   belinkd, PREMIUM EDITORIAL REDESIGN  (hero + results)
   Three surfaces: page (warm white) · section panels · white cards
   ============================================================ */

/* ── HERO: two-column editorial ─────────────────────────── */
.hero { padding: var(--s16) var(--s8) var(--s12); overflow: visible; }
.hero-inner {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(40px, 5vw, 88px); align-items: center;
  max-width: 1320px; margin: 0 auto;
}
.hero-text { min-width: 0; }
.hero h1 { font-size: clamp(44px, 5.2vw, 70px); line-height: 1.12; letter-spacing: -0.03em; }
.hero h1 em { color: var(--amber); font-style: normal; }
.hero-sub { margin-top: var(--s5); font-size: 1.1563rem; line-height: 1.55; color: var(--taupe); max-width: 44ch; }
.hero-sub strong { color: var(--bone); font-weight: 600; }

/* elevated search module, the hero's dominant visual object */
.hero-search {
  margin: var(--s5) auto 0; display: flex; flex-direction: column; gap: 8px;
  background: var(--ink-800); border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: 12px; max-width: 960px;
  box-shadow: 0 20px 46px -26px rgba(26,143,227,0.4), 0 5px 14px -4px rgba(26,24,20,0.08);
  transition: box-shadow var(--t-fast);
}
.hero-search:hover { box-shadow: 0 24px 54px -26px rgba(26,143,227,0.46), 0 6px 16px -4px rgba(26,24,20,0.1); }
.hs-row { display: flex; align-items: center; gap: 10px; width: 100%; }
.hs-fields { display: flex; align-items: center; flex: 1; min-width: 0; }
.hs-field-wrap { position: relative; flex: 1; min-width: 0; }
/* first field draws the eye first, subtly, without competing with the CTA */
.hs-field-wrap:first-child .hs-field { background: none; }
.hs-field-wrap:first-child .hs-field:hover { background: rgba(26,143,227,0.06); }
.hs-field { width: 100%; display: flex; align-items: center; gap: 14px; text-align: left; padding: 14px 12px; border-radius: var(--r-lg); transition: var(--t-fast); }
.hs-field:hover { background: rgba(26,143,227,0.06); }
.hs-field:active { transform: scale(0.99); }
.hs-field:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.hs-field.active { background: var(--amber-dim); box-shadow: inset 0 0 0 1.5px var(--amber); }
.hs-ic { width: 40px; height: 40px; border-radius: 12px; flex: none; display: grid; place-items: center; background: var(--orange-dim); color: var(--orange-deep); transition: color var(--t-fast); font-weight: 700; font-size: 1rem; }
.hs-ic.orange { background: var(--orange-dim); color: var(--orange-deep); }
.hs-field:hover .hs-ic, .hs-field.active .hs-ic { color: var(--orange-deep); }
.hs-field:hover .hs-ic.orange, .hs-field.active .hs-ic.orange { color: var(--orange-deep); }
.hs-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; gap: 1px; }
.hs-label { font-size: clamp(0.625rem, 0.2vw + 0.55rem, 0.75rem); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--taupe); white-space: normal; line-height: 1.3; }
.hs-value-row { display: flex; align-items: center; gap: 4px; min-width: 0; flex-wrap: wrap; }
.hs-value { font-size: clamp(0.9375rem, 0.5vw + 0.75rem, 1.0625rem); font-weight: 600; color: var(--bone); white-space: normal; line-height: 1.25; min-width: 0; }
.hs-step-n { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: var(--sky-dim); font-family: var(--mono); font-size: 0.8125rem; font-weight: 700; color: var(--sky-deep); margin-right: 6px; flex: none; vertical-align: middle; }
.hs-eg { display: block; font-size: 0.8125rem; letter-spacing: 0; color: var(--taupe-3); margin-top: 3px; white-space: normal; line-height: 1.3; }
.hs-value.ph { color: var(--taupe-3); font-weight: 500; }
.hs-chev { flex: none; color: var(--taupe-3); transition: transform var(--t-fast); }
.hs-field:hover .hs-chev { transform: translateY(1px); }
.hs-field.active .hs-chev { transform: rotate(180deg); color: var(--amber); }
.hs-div { width: 1px; height: 46px; background: var(--line); flex: none; margin: 0 4px; }
.hs-go:active { transform: translateY(0) scale(0.98); }
.hs-go:focus-visible { outline: 3px solid var(--orange-deep); outline-offset: 2px; }
.hs-go { flex: none; display: inline-flex; align-items: center; gap: 9px; height: 60px; padding: 0 24px; border-radius: var(--r-lg); background: var(--orange); color: #fff; font-size: 1rem; font-weight: 700; box-shadow: 0 16px 32px -16px rgba(246,130,31,0.75); transition: var(--t-fast); }
.hs-go:hover { background: var(--orange-deep); transform: translateY(-1px); }
.hs-go svg { color: #fff; }
.hs-field-wrap .sb-pop { top: calc(100% + 16px); }

/* MatchHero sits inside the hero's half-width text column (beside the
   floating provider cards), not full page width like the search module was
   originally built for, so it always uses the same stacked, full-width-field
   treatment the base .hero-search only switches to at mobile widths. */

/* trust signals strip */
.trust-signals { display: flex; flex-wrap: wrap; gap: 12px 22px; margin-top: var(--s7, 28px); }
.ts-item { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8438rem; font-weight: 600; color: var(--bone-2); }
.ts-label-short { display: none; }
.ts-item svg { flex: none; }
.ts-item:nth-child(1) svg { color: var(--green); }
.ts-item:nth-child(2) svg { color: var(--amber); }
.ts-item:nth-child(3) svg { color: var(--orange); }
.ts-item:nth-child(4) svg { color: var(--clay); }

/* ── ALT homepage: hero mode toggle + single proof line ── */
.hero-mode-toggle { display: inline-flex; gap: 6px; padding: 5px; border-radius: var(--r-pill); background: var(--ink-800); border: 1px solid var(--line); margin: var(--s6) auto 0; }
.hmt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 18px; border-radius: var(--r-pill); font-size: 0.8438rem; font-weight: 700; color: var(--taupe); white-space: nowrap; line-height: 1; }
.hmt-btn.on { background: var(--bone); color: var(--ink-900); box-shadow: var(--shadow-sm); }
.hmt-btn:not(.on):hover { color: var(--bone-2); }
.proof-line { display: inline-flex; align-items: center; gap: 8px; margin: var(--s6) auto 0; font-size: 0.8438rem; font-weight: 600; color: var(--bone-2); }
.proof-line svg { flex: none; color: var(--sky); }
.proof-line strong { color: var(--bone); font-weight: 700; }
.mkt-cta-trust.single { gap: 0; }
.mkt-cta-trust.single span { font-size: 0.875rem; }

/* ── HERO ART: community collage + floating stats ───────── */
.hero-art { position: relative; min-width: 0; }
.collage { position: relative; }
.collage-grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(142px, auto); gap: 14px; }
.collage-tile {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow-card); padding: 15px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 10px;
}
.collage-tile.wide { grid-column: span 2; min-height: 120px; }
.ct-person { position: relative; z-index: 1; flex: none; align-self: flex-start; width: fit-content; }
.ct-photo { display: block; width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2.5px solid var(--ink-800); box-shadow: var(--shadow-sm); }
.ct-flag-badge { position: absolute; bottom: -3px; right: -5px; font-size: 1.0625rem; line-height: 1; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.2)); }
.ct-cap {
  display: flex; flex-direction: column; gap: 2px; color: var(--bone);
  background: var(--glass-strong); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid var(--line-faint); border-radius: var(--r); padding: 10px 13px; margin: -1px;
}
.ct-kind { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--taupe); }
.ct-moment { font-family: var(--serif); font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; color: var(--bone); }

.stat-card {
  position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px;
  background: var(--glass-strong); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid var(--line); border-radius: var(--r); padding: 9px 14px 9px 10px;
  box-shadow: 0 18px 44px -18px rgba(26,24,20,0.35), 0 3px 10px rgba(26,24,20,0.08);
}
.stat-card .sc-dot { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--amber-dim); color: var(--amber); flex: none; }
.stat-card .sc-dot.blue { background: var(--amber-dim); color: var(--amber); }
.stat-card .sc-dot.orange { background: var(--orange-dim); color: var(--orange); }
.sc-num { font-family: var(--serif); font-size: 1.375rem; font-weight: 700; color: var(--bone); line-height: 1; }
.sc-label { font-size: 0.8125rem; color: var(--taupe); line-height: 1.2; max-width: 10ch; }
.stat-card.sc-1 { top: -58px; right: -6px; }
.stat-card.sc-2 { bottom: -18px; right: -24px; }
.stat-card.sc-3 { bottom: 60px; left: 40px; }
@media (max-width: 640px) {
  .collage-grid { gap: 10px; }
  .collage-tile { gap: 16px; padding: 13px; }
  .ct-photo { width: 40px; height: 40px; }
  .ct-moment { font-size: 0.9375rem; }
  .stat-card { padding: 8px 12px; gap: 8px; }
  .stat-card.sc-1 { display: none; }
  .stat-card.sc-2 { bottom: -14px; right: 0; }
}

/* ── STICKY FILTER TOOLBAR (translucent, elevated) ──────── */
.feed-toolbar {
  position: sticky; top: 64px; z-index: 30;
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  margin: var(--s12) calc(50% - 50vw) 0;
  padding: 14px max(var(--s8), calc(50vw - 660px + var(--s8)));
  background: var(--glass-strong);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid var(--line); border-top: 1px solid var(--line-faint);
  transition: box-shadow var(--t), transform 0.34s var(--ease);
  will-change: transform;
}
.feed-toolbar.is-stuck { box-shadow: 0 14px 34px -22px rgba(26,24,20,0.45); }
/* match the top bar's horizontal gutter at every breakpoint */
@media (min-width: 761px) and (max-width: 860px) { .feed-toolbar { padding-left: var(--s5); padding-right: var(--s5); } }
/* auto-hide on scroll-down, reveal on scroll-up (only once stuck) */
.feed-toolbar.is-stuck.is-hidden { transform: translateY(-130%); box-shadow: none; }
.feed-tools-right { display: flex; align-items: center; gap: 8px; flex: 0 1 auto; margin-left: auto; justify-content: flex-end; flex-wrap: nowrap; }

/* Location + Culture context pickers in the toolbar (so users don't scroll
   back to the hero to change them) */
.feed-context { display: flex; align-items: center; gap: 8px; }
.ctx-wrap { position: relative; }
.ctx-scrim { display: none; }
.ctx-wrap:has(.sb-pop) { z-index: 60; }
.ctx-field { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: rgba(var(--ov),0.03); color: var(--bone-2); font-size: 0.8438rem; font-weight: 600; max-width: 200px; transition: var(--t-fast); }
.ctx-field:hover { border-color: var(--amber-deep); color: var(--bone); background: var(--amber-dim); }
.ctx-field.on { border-color: var(--amber); background: var(--amber-dim); color: var(--amber-deep); }
.ctx-field > svg:first-child { flex: none; color: var(--amber); }
.ctx-field.on > svg:first-child { color: var(--amber-deep); }
.ctx-val { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctx-val.ph { color: var(--taupe); font-weight: 500; }
.ctx-chev { flex: none; color: var(--taupe); margin-left: -2px; }

/* base: inline secondary controls visible, mobile-only Filters button hidden.
   Declared BEFORE the responsive blocks so their overrides win. */
.tb-mobile { display: none !important; }
.bc-label { display: inline; }
@media (min-width: 761px) {
  .feed-search { flex: 1 1 170px; min-width: 148px; }
  .ctx-field { max-width: 168px; }
}
/* TABLET / SMALL-LAPTOP (761–1140px): the full inline toolbar wraps chaotically
   here, so use a deliberate 2-row layout and collapse secondary filters
   (category/map/saved) into the Filters sheet, the Airbnb compact-bar pattern. */
/* From small-laptop UP (all desktop widths): keep the toolbar calm. Type tabs,
   location and culture stay inline, they're the product's primary lens, while
   category, Map and Saved fold into the Filters sheet. The bar reads:
   type · location · culture … Filters · Create, at every width. */
@media (min-width: 761px) {
  .tb-secondary { display: none !important; }
  .tb-mobile { display: inline-flex !important; }
  .feed-tools-right { margin-left: auto; flex: 0 0 auto; gap: 10px; flex-wrap: nowrap; }
  .filters-btn { height: 44px; }
  .feed-context { flex: 0 1 auto; }
  .ctx-field { max-width: 200px; }
}

/* ── Active-filter summary row (clear visual state + one-tap clear) ── */
.active-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: var(--s5); }
.af-lead { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--taupe); margin-right: 2px; }
.af-tag { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px 0 13px; border-radius: var(--r-pill); background: var(--amber-dim); border: 1px solid var(--amber); color: var(--amber-deep); font-size: 0.8125rem; font-weight: 600; transition: var(--t-fast); }
.af-tag:hover { background: var(--amber); color: #fff; }
.af-tag svg { opacity: 0.8; }
.af-clear { margin-left: 4px; font-size: 0.8125rem; font-weight: 600; color: var(--taupe); text-decoration: underline; text-underline-offset: 3px; }
.af-clear:hover { color: var(--bone); }

/* ── Mobile “Filters” button + badge ── */
.filters-btn { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--ink-800); color: var(--bone); font-size: 0.9063rem; font-weight: 600; transition: var(--t-fast); }
.filters-btn.has-active { border-color: var(--amber); background: var(--amber-dim); color: var(--amber-deep); }
.fb-badge { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--orange); color: #fff; font-size: 0.8125rem; font-weight: 700; }

/* ── Back-to-top FAB ── */
.fab-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ink-800); border: 1px solid var(--line-strong); color: var(--bone);
  box-shadow: 0 12px 30px -8px rgba(26,24,20,0.42), 0 2px 8px rgba(26,24,20,0.12);
  opacity: 0; transform: translateY(14px) scale(0.85); pointer-events: none;
  transition: opacity 0.26s var(--ease), transform 0.26s var(--ease), background 0.18s, color 0.18s;
}
.fab-top.show { opacity: 1; transform: none; pointer-events: auto; }
.fab-top:hover { background: var(--amber); border-color: var(--amber); color: #fff; transform: translateY(-2px); }

/* ── Bottom-sheet (filters) ── */
.sheet-overlay { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; background: rgba(26,24,20,0.42); opacity: 0; transition: opacity 0.24s var(--ease); }
.sheet-overlay.open { opacity: 1; }
.filters-sheet {
  width: 100%; max-height: 86vh; display: flex; flex-direction: column;
  background: var(--ink-850); border-radius: 24px 24px 0 0;
  border-top: 1px solid var(--line); box-shadow: 0 -20px 50px -10px rgba(26,24,20,0.4);
  transform: translateY(100%); transition: transform 0.28s var(--ease);
  padding-bottom: max(10px, env(safe-area-inset-bottom));
}
.filters-sheet.open { transform: none; }
.fs-grab { width: 40px; height: 4px; border-radius: 2px; background: var(--line-strong); margin: 10px auto 4px; }
.fs-head { display: flex; align-items: center; justify-content: space-between; padding: 8px var(--s6) 12px; border-bottom: 1px solid var(--line); }
.fs-head h3 { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; color: var(--bone); }
.fs-x { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--ink-750); color: var(--bone-2); }
.fs-x:hover { background: var(--ink-700); color: var(--bone); }
.fs-body { overflow-y: auto; padding: var(--s5) var(--s6); display: flex; flex-direction: column; gap: var(--s6); }
.fs-group { display: flex; flex-direction: column; gap: 12px; }
.fs-label { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--taupe); }
.fs-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.fs-chip { height: 42px; padding: 0 16px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--ink-800); color: var(--bone-2); font-size: 0.875rem; font-weight: 600; transition: var(--t-fast); }
.fs-chip:hover { border-color: var(--bone-2); }
.fs-chip.on { background: var(--bone); border-color: var(--bone); color: #FAFAF8; }
.fs-toggle-row { display: flex; align-items: center; gap: 12px; width: 100%; height: 56px; padding: 0 18px; border-radius: var(--r-lg); border: 1px solid var(--line-strong); background: var(--ink-800); color: var(--bone); font-size: 0.9375rem; font-weight: 600; transition: var(--t-fast); }
.fs-toggle-row .fs-tr-text { flex: 1; text-align: left; }
.fs-switch { width: 46px; height: 28px; border-radius: 14px; background: var(--ink-700); border: 1px solid var(--line-strong); position: relative; flex: none; transition: var(--t-fast); }
.fs-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--taupe); transition: var(--t-fast); }
.fs-toggle-row.on { border-color: var(--amber); background: var(--amber-dim); color: var(--amber-deep); }
.fs-toggle-row.on .fs-switch { background: var(--amber); border-color: var(--amber); }
.fs-toggle-row.on .fs-switch::after { transform: translateX(18px); background: #fff; }
.fs-foot { display: flex; align-items: center; gap: 12px; padding: var(--s4) var(--s6) var(--s5); border-top: 1px solid var(--line); }
.fs-clear { flex: none; height: 52px; padding: 0 20px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--ink-800); color: var(--bone-2); font-size: 0.9375rem; font-weight: 600; }
.fs-clear:disabled { opacity: 0.4; }
.fs-apply { flex: 1; height: 52px; border-radius: var(--r-pill); background: var(--amber); color: #fff; font-size: 0.9688rem; font-weight: 700; box-shadow: 0 12px 26px -12px rgba(217,119,87,0.7); }
.fs-apply:hover { background: var(--amber-deep); }
.tool-btn { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 15px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: rgba(var(--ov),0.03); color: var(--bone-2); font-size: 0.8438rem; font-weight: 600; transition: var(--t-fast); }
.tool-btn:hover { border-color: var(--amber-deep); color: var(--bone); background: var(--amber-dim); }
.tool-btn.on { border-color: var(--amber); background: var(--amber-dim); color: var(--amber); }
.tool-btn.on svg { fill: currentColor; }
.tool-count {
  display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 10px; background: var(--amber); color: #fff;
  font-family: var(--mono); font-size: 0.8125rem; font-weight: 700; line-height: 1;
}

/* ── FEED SECTIONS, five distinct identities ───────────── */
.feed-section { margin-top: var(--s16); }
.feed-section:first-of-type { margin-top: var(--s10); }
.feed-section .section-head { margin-bottom: var(--s6); }
.sec-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tone-color, var(--amber)); margin-bottom: 12px; }
.sec-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--tone-dim, var(--amber-dim)); color: var(--tone-color, var(--amber)); }
.tone-rec   { --tone-color: var(--amber);  --tone-dim: var(--amber-dim); }
.tone-pop   { --tone-color: var(--orange); --tone-dim: var(--orange-dim); }
.tone-trust { --tone-color: var(--forest); --tone-dim: rgba(20,116,190,0.12); }
.tone-comm  { --tone-color: var(--clay);   --tone-dim: var(--clay-dim); }
.tone-evt   { --tone-color: var(--orange); --tone-dim: var(--orange-dim); }
/* Accessibility, honor reduced-motion: drop non-essential animation/lift site-wide */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important; scroll-behavior: auto !important;
  }
  .card:hover { transform: none !important; }
}

.grid-feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s8); align-items: stretch; }
.grid-svc.grid-evt { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s8); }

/* surface layer 2: section panels for select sections */
.feed-section.surface-cream.feed-section.surface-tint {
  border-radius: var(--r-xl); padding: var(--s10) var(--s7, 28px) var(--s10);
  margin-left: calc(-1 * var(--s6)); margin-right: calc(-1 * var(--s6));
  border: 1px solid var(--line);
}
.surface-cream { background: var(--ink-850); }
.surface-tint  { background: linear-gradient(180deg, rgba(196,76,134,0.055), rgba(26,143,227,0.045)); }

/* ── CARD REDESIGN (shared svc + evt) ───────────────────── */
.card { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); display: flex; flex-direction: column; }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: var(--line-strong); }
.svc.evt { display: flex; flex-direction: column; }

.svc-cover.evt-cover {
  position: relative; height: 158px; overflow: hidden;
  display: flex; align-items: flex-start; justify-content: space-between; padding: 14px;
}
.cat-badge {
  position: relative; z-index: 6; display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 14px 0 11px; border-radius: var(--r-pill);
  background: #fff; color: var(--cat, var(--bone)); border: 1px solid var(--line);
  font-size: 0.8125rem; font-weight: 700; box-shadow: 0 5px 14px -4px rgba(20,16,10,0.28);
}
.cat-badge svg { color: var(--cat, var(--bone)); }
.cat-badge.evt-badge { --cat: var(--orange); }
/* Service category chips always read in the services blue (--sky), never the
   per-category warm tones, so a service is never mistaken for an event at a
   glance. (Events use orange, requests use the blue "Looking for" pill.) */
.card.svc .cat-badge { --cat: var(--sky); }
.cover-flag { position: absolute; right: 10px; bottom: -6px; font-size: 5.5rem; line-height: 1; opacity: 0.22; pointer-events: none; z-index: 0; }
.evt-cover::before { content: none; }
.evt-cover .access { border: none; height: 28px; font-weight: 700; font-size: 0.8125rem; color: #fff; box-shadow: 0 6px 16px -6px rgba(26,24,20,0.45); }
.evt-cover .access.open { background: var(--green); }
.evt-cover .access.led  { background: var(--led); }
.evt-cover .access.only { background: var(--clay); }
.evt-cover .access .glyph.evt-cover .access svg { color: #fff; }

/* access chip (Culture-led / Open to all / Culture-only) anchors bottom-left
   on every card cover, leaving the top-right for the heart and the bottom-right
   flag unobstructed */
.svc-cover .access.evt-cover .access {
  position: absolute; left: 14px; bottom: 14px; top: auto; right: auto; z-index: 6;
}
.evt-datechip {
  position: absolute; left: 14px; top: 14px; bottom: auto; z-index: 6;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 54px; height: 58px; border-radius: 13px; background: #fff;
  box-shadow: 0 8px 18px -6px rgba(20,16,10,0.3);
}
.evt-datechip b { font-family: var(--serif); font-size: 1.5625rem; line-height: 1; color: var(--bone); font-weight: 600; }
.evt-datechip span { font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange); font-weight: 700; margin-top: 2px; }

/* save / favourite heart, bottom-right of every card cover */
.save-btn {
  position: absolute; right: 12px; top: 12px; z-index: 8;
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; padding: 0;
  background: rgba(255,255,255,0.92); color: #423d33; border: none;
  box-shadow: 0 6px 16px -6px rgba(26,24,20,0.42);
  transition: transform var(--t-fast), background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.save-btn svg { fill: none; transition: transform var(--t-fast); }
.save-btn:hover { transform: translateY(-1px) scale(1.06); box-shadow: 0 9px 20px -7px rgba(26,24,20,0.5); }
.save-btn:active svg { transform: scale(0.84); }
.save-btn.on { background: #fff; color: var(--clay); }
.save-btn.on svg { fill: currentColor; }
[data-theme="dark"] .save-btn { background: rgba(20,18,14,0.7); color: var(--bone); }
[data-theme="dark"] .save-btn.on { background: rgba(20,18,14,0.85); color: var(--clay); }

.svc-body.evt-body { padding: var(--s5); display: flex; flex-direction: column; gap: 14px; flex: 1; }
.svc-title { font-size: 1.3125rem; line-height: 1.18; }
.svc-desc { font-size: 0.875rem; -webkit-line-clamp: 2; }
.evt-toprow { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.evt-time { display: inline-flex; align-items: center; gap: 5px; font-size: 0.8125rem; font-weight: 600; color: var(--taupe); }
.evt-time svg { color: var(--taupe); }
.evt-title { font-size: 1.2188rem; line-height: 1.2; }

.impact-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; }
.impact { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: var(--r-pill); background: rgba(var(--ov),0.045); border: 1px solid var(--line); font-size: 0.8125rem; font-weight: 600; color: var(--bone-2); }
.impact svg { color: var(--cult, var(--amber)); flex: none; }

.attendees .a-av { width: 26px; height: 26px; margin-left: -8px; border: 2px solid var(--ink-800); }
.attendees .a-av.more { background: var(--ink-700); color: var(--taupe); font-size: 0.8125rem; font-weight: 700; }

/* card footer: meta row + explicit CTA pair */
.svc-foot { display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 14px var(--s5) var(--s5); border-top: 1px solid var(--line); margin-top: auto; }
.svc-meta-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rating-link { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; padding: 4px 8px; margin: -4px -8px; border-radius: 8px; cursor: pointer; font-size: 0.8438rem; font-weight: 700; color: var(--bone); transition: var(--t-fast); }
.rating-link svg { color: var(--amber); flex: none; }
.rating-link .rl-ct { font-weight: 500; color: var(--sky); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.rating-link:hover { background: var(--sky-dim); }
.rating-link:hover .rl-ct { color: var(--sky-deep); }
.rating-new { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; font-weight: 600; color: var(--green); }
.rating-new svg { color: var(--green); }
.rc-cat-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 6px 0 10px;
  border-radius: var(--r-pill); background: var(--sky-dim); color: var(--sky-deep);
  font-size: 0.8125rem; font-weight: 600; white-space: nowrap;
}
.rc-cat-chip svg { color: var(--sky); flex: none; }
.rc-cat-chip button {
  display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  background: none; border: none; color: var(--sky-deep); cursor: pointer; padding: 0; flex: none;
}
.rc-cat-chip button:hover { background: rgba(26,143,227,0.16); }
.svc-foot-cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.foot-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.price-from { font-family: var(--sans); font-size: 0.8125rem; font-weight: 600; color: var(--taupe); margin-right: 4px; text-transform: uppercase; letter-spacing: 0.04em; }
.card-cta { display: flex; gap: 8px; }
.btn-book { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 44px; padding: 0 22px; border-radius: var(--r-pill); background: var(--amber); color: #fff; font-size: 0.875rem; font-weight: 600; border: none; cursor: pointer; transition: var(--t-fast); }
.btn-book:hover { background: var(--amber-deep); transform: translateY(-1px); }
.btn-book svg { color: #fff; }
.evt .btn-book { background: var(--orange); }
.evt .btn-book:hover { background: var(--orange-deep); }
.req-cta { width: 100%; }
.req-budget { display: inline-flex; align-items: baseline; font-family: var(--serif); font-size: 1.125rem; font-weight: 700; color: var(--bone); }

/* ── Request card ("Looking for…") ─────────────────────────
   Demand-side listing. A tinted culture-coloured banner (no cover photo)
   instead of a media image, distinguished by a "Looking for" pill. */
.card.req { --req-accent: var(--verify, #4a8ab5); }
.req-banner {
  position: relative; height: 76px; display: flex; align-items: center; gap: 10px;
  padding: 0 58px 0 var(--s5); overflow: hidden;
  background:
    repeating-linear-gradient(135deg, rgba(var(--ov),0.04) 0 14px, transparent 14px 28px),
    radial-gradient(120% 160% at 92% 0%, color-mix(in srgb, var(--cult) 38%, transparent), transparent 60%),
    linear-gradient(155deg, color-mix(in srgb, var(--cult) 22%, transparent), color-mix(in srgb, var(--cult) 5%, transparent));
  border-bottom: 1px dashed var(--line-strong);
}
.req-kind {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--ink-900); color: var(--bone);
  font-family: var(--mono); font-size: 0.8125rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  box-shadow: 0 2px 8px -2px rgba(0,0,0,0.3);
}
.req-kind svg { color: var(--bone); }
/* access chip flows inline beside the “Looking for” pill on the left */
.req-banner .access { position: static; transform: none; flex: none; }
/* flag is a faint decorative glyph behind everything, never colliding */
.req-banner .cover-flag { position: absolute; right: 52px; bottom: -6px; font-size: 3.5rem; opacity: 0.2; z-index: 0; }
/* heart sits alone in the top-right corner */
.req-banner .save-btn { top: 50%; right: 12px; transform: translateY(-50%); z-index: 8; }
.req-banner .save-btn:hover { transform: translateY(-50%) scale(1.06); }
.req-body { padding: var(--s5); display: flex; flex-direction: column; gap: 12px; flex: 1; }
.req-title { font-family: var(--serif); font-size: 1.1875rem; line-height: 1.25; color: var(--bone); font-weight: 600; }
.req-desc { font-size: 0.875rem; line-height: 1.5; color: var(--taupe); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.req-facts { display: flex; flex-wrap: wrap; gap: 14px; margin-top: auto; }
.req-fact { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--taupe); }
.req-budget-label { font-family: var(--sans); font-size: 0.8125rem; font-weight: 600; color: var(--taupe); margin-right: 6px; text-transform: uppercase; letter-spacing: 0.04em; }
.req-offers { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; font-weight: 600; color: var(--taupe); }
.req .btn-book { background: var(--req-accent); }
.req .btn-book:hover { background: color-mix(in srgb, var(--req-accent) 82%, #000); }

/* ── Request detail modal ─────────────────────────────────── */
.req-cover .req-kind { box-shadow: 0 2px 10px -2px rgba(0,0,0,0.35); }
.req-back { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8125rem; font-weight: 600; color: var(--taupe); margin-bottom: var(--s2); }
.req-back:hover { color: var(--bone); }
.field-err { font-size: 0.8125rem; color: var(--clay); margin-top: 6px; }
.req-submit { flex: 1; }
.req-sent { text-align: center; padding-top: var(--s7); }
.req-sent-actions { display: flex; flex-direction: column; gap: 10px; margin-top: var(--s6); }
.req-offers-block { margin-top: var(--s5); border-top: 1px solid var(--line); padding-top: var(--s5); }
.rob-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: var(--s3); }
.rob-title { font-family: var(--serif); font-size: 1.0625rem; font-weight: 600; color: var(--bone); }
.rob-sub { font-size: 0.875rem; color: var(--taupe); }
.rob-list { display: flex; flex-direction: column; gap: 10px; }
.rob-offer { display: flex; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--ink-800); }
.rob-offer.mine { border-color: var(--req-accent, var(--verify)); background: color-mix(in srgb, var(--verify) 8%, var(--ink-800)); }
.rob-av { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #FAFAF8; font-weight: 700; font-size: 0.875rem; }
.rob-main { flex: 1; min-width: 0; }
.rob-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rob-name { display: inline-flex; align-items: center; gap: 5px; font-size: 0.9063rem; font-weight: 600; color: var(--bone); }
.rob-price { font-family: var(--mono); font-size: 0.875rem; font-weight: 700; color: var(--verify); white-space: nowrap; }
.rob-msg { font-size: 0.8438rem; line-height: 1.5; color: var(--taupe); margin-top: 4px; }

/* ── Manage › My asks (offers received on my requests) ────── */
.mng-asks { display: flex; flex-direction: column; gap: var(--s5); }
.mng-ask { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--ink-800); overflow: hidden; }
.mask-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--line); background: var(--ink-850, var(--ink-800)); }
.mask-title { font-family: var(--serif); font-size: 1.0625rem; font-weight: 600; color: var(--bone); flex: 1 1 100%; }
.mask-meta { font-size: 0.8125rem; color: var(--taupe); }
.mask-head-actions { margin-left: auto; }
.mask-offers { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.mask-offers-head { font-family: var(--mono); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--taupe-3); }
.mask-offer { display: flex; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--ink-750); transition: var(--t-fast); }
.mask-offer.accepted { border-color: var(--green); background: var(--green-dim); }
.mask-offer.declined { opacity: 0.55; }
.mask-offer-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mask-tag { font-family: var(--mono); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 2px 7px; border-radius: 6px; }
.mask-tag.on { background: var(--green-dim); color: var(--green); }
.mask-tag.off { background: var(--clay-dim); color: var(--clay); }

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 1040px) {
  .hero-inner { grid-template-columns: 1fr; gap: var(--s10); }
  .hero-inner .hero-art { display: none; }
  .hero h1 { font-size: clamp(36px, 8vw, 56px); }
}
@media (max-width: 760px) {
  /* sticky again so it pins under the header, but auto-hides on scroll-down */
  .feed-toolbar {
    position: sticky; top: 58px; z-index: 30; gap: 9px; padding: 12px var(--s5);
    margin: var(--s2) calc(-1 * var(--s5)) 0;
    background: color-mix(in srgb, var(--ink-900) 90%, transparent);
    backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px);
    border-top: none; border-bottom: 1px solid var(--line);
  }
  .feed-toolbar.is-stuck.is-hidden { transform: translateY(-110%); }
  /* location + culture stay visible at all times, they're the primary
     "where / which culture" context, and they fill the action row so it
     never collapses to an empty Filters button */
  .feed-context {
    flex: 1 1 0; min-width: 0; gap: 8px; order: 2;
  }
  /* primary chips: full-width segmented, equal thirds; row height matched to
     the other toolbar rows (48px) for an even vertical rhythm */
  .seg-tabs { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 3px; }
  .seg-tab { flex: none; justify-content: center; padding: 0 8px; height: 42px; }
  /* Location + Culture two equal tap targets */
  .ctx-wrap { flex: 1; min-width: 0; }
  .ctx-field { width: 100%; max-width: none; height: 48px; justify-content: flex-start; }
  .ctx-field .ctx-chev { margin-left: auto; }
  /* compact actions sit on the same row as the context pills, Filters as an
     icon (label hidden), Create as a circle, so the row stays information-rich */
  .feed-tools-right { flex: 0 0 auto; width: auto; gap: 8px; justify-content: flex-end; flex-wrap: nowrap; order: 3; }
  .filters-btn { display: inline-flex; flex: none; width: 48px; padding: 0; justify-content: center; height: 48px; }
  .filters-btn .fb-label { display: none; }
  .filters-btn .fb-badge { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; border: 2px solid var(--ink-900); }
  .btn-create { flex: none; width: 48px; height: 48px; padding: 0; justify-content: center; border-radius: 50%; }
  .btn-create .bc-label { display: none; }
  /* secondary controls collapse into the Filters sheet */
  .tb-secondary { display: none !important; }
  .tb-mobile { display: inline-flex !important; }
  /* roomier feed cards single-column */
  .grid-feed.grid-svc.grid-evt { grid-template-columns: 1fr; gap: var(--s6); }
  .feed-section { margin-top: var(--s10); }
  /* FAB sits above the bottom edge, clear of thumb zone */
  .fab-top { right: 16px; bottom: 18px; }
}
@media (max-width: 600px) {
  .hero-search { flex-direction: column; align-items: stretch; padding: 7px; gap: 5px; border-radius: 20px; }
  .hs-row { flex-direction: column; align-items: stretch; gap: 5px; }
  .hs-fields { flex-direction: column; align-items: stretch; gap: 4px; }
  .hs-field-wrap:first-child .hs-field { background: rgba(26,143,227,0.05); }
  .hs-field { padding: 12px 14px; border-radius: 14px; }
  .hs-ic { width: 36px; height: 36px; border-radius: 11px; }
  .hs-eg { display: none; }
  .hs-div { display: none; }
  .hs-go { width: 100%; justify-content: center; height: 52px; margin-top: 2px; }
  .hs-step-n { display: none; }
  .hs-context { display: none !important; }
  .feed-section.surface-cream.feed-section.surface-tint { margin-left: 0; margin-right: 0; padding: var(--s8) var(--s5); }
}

/* ============================================================
   belinkd, CENTERED HERO  (location + culture as the focal point)
   ============================================================ */
/* Hero is a strong centered statement but capped so it never eats the whole
   screen, on laptop/desktop the top of the results peeks above the fold
   (content-forward discovery, like leading marketplaces). */
.hero-center { padding: clamp(28px, 4vh, 56px) var(--s8) clamp(32px, 4vh, 52px); min-height: calc(100vh - 64px); min-height: calc(100svh - 64px); min-height: calc(100dvh - 64px); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.hero-center h1 em { color: var(--sky); font-style: normal; }

/* orange terminal letter, reads like the wordmark inside the headline */
.brand-e { color: var(--orange); }

/* ============================================================
   SERVICE CARD v3, no photo required, subheading + identity
   ============================================================ */
.card.svc3 { display: flex; flex-direction: column; overflow: hidden; }
.svc3-top { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background: var(--grad-card-band); border-bottom: 1px solid var(--line-faint); }
.svc3-top .cat-badge { position: static; }
.grid-svc .svc3-top .cat-badge { background: none; border: none; box-shadow: none; height: auto; padding: 0; color: var(--taupe); font-size: 0.8125rem; font-weight: 600; }
.grid-svc .svc3-top .cat-badge svg { display: none; }
.svc3-top .save-btn { position: static; }
.svc3-body { position: relative; z-index: 1; padding: 16px 20px 18px; display: flex; flex-direction: column; gap: 12px; flex: 1; background: var(--ink-800); }
.svc3-title { font-family: var(--serif); font-size: 1.3125rem; line-height: 1.2; font-weight: 600; letter-spacing: -0.015em; color: var(--bone); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.svc3-desc { font-size: 0.875rem; line-height: 1.5; color: var(--taupe); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; }
.svc3-id { display: flex; align-items: center; gap: 11px; margin-top: 2px; }
.svc3-av { position: relative; width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 0.9375rem; background-size: cover; background-position: center; box-shadow: 0 0 0 3px rgba(var(--ov),0.04); }
.svc3-av.has-photo { box-shadow: 0 0 0 3px rgba(var(--ov),0.06); }
.svc3-flag { position: absolute; bottom: -2px; right: -3px; font-size: 0.9375rem; line-height: 1; border-radius: 3px; box-shadow: 0 0 0 2px var(--ink-800); }
.svc3-idtext { min-width: 0; }
.svc3-name { display: flex; align-items: center; gap: 7px; font-size: 0.9375rem; font-weight: 700; color: var(--bone); line-height: 1.2; }
.svc3-shield { color: var(--green); flex: none; }
.svc3-loc { font-size: 0.8125rem; font-weight: 500; color: var(--taupe); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svc3-avail { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; font-size: 0.8125rem; color: var(--taupe); }
.svc3-avail svg { color: var(--taupe); flex: none; }
.svc3-reco { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.02em; color: var(--sky-deep, var(--amber)); margin-bottom: 2px; }
/* Pulled out of the plain checkmark bullet list so a verified listing
   visibly differs from one that isn't, scanning down a grid of cards. */
.verified-chip {
  display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
  height: 26px; padding: 0 10px; border-radius: var(--r-pill);
  background: var(--green-dim); color: var(--green);
  border: 1px solid color-mix(in srgb, var(--green) 25%, transparent);
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap;
}
.verified-chip svg { color: var(--green); flex: none; }
.svc3-why { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.svc3-why li { display: flex; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--bone-2); }
.svc3-why li svg { color: var(--green); flex: none; }
.svc-compact-head { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s5); }
.svc-compact-head button { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; padding: 0; font-size: 0.8125rem; font-weight: 600; color: var(--sky-deep, var(--amber)); cursor: pointer; }
.svc-compact-head button:hover { text-decoration: underline; }
.svc-compact-head h1 { font-size: 1.25rem; font-weight: 700; margin: 0; padding-left: var(--s3); border-left: 1px solid var(--line); }
.svc-compact-head h1:empty { display: none; }
.svc-search-input { position: relative; }
.svc-suggest { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--ink-800); border: 1px solid var(--line); border-radius: var(--r-md, 12px); box-shadow: 0 16px 40px -16px rgba(0,0,0,0.25); z-index: 20; overflow: hidden; padding: 6px; }
.svc-suggest button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: none; padding: 9px 10px; border-radius: 8px; font-size: 0.875rem; color: var(--bone-2); cursor: pointer; }
.svc-suggest button:hover { background: var(--ink-750, var(--ink-900)); }
.svc-suggest svg { color: var(--taupe); flex: none; }
.active-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--s4); }
.active-filters button { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; font-weight: 600; color: var(--bone-2); background: var(--ink-750, var(--ink-800)); border: 1px solid var(--line); border-radius: 99px; padding: 6px 12px; cursor: pointer; }
.active-filters button:hover { border-color: var(--danger); color: var(--danger); }
.rail-searching { padding-top: var(--s1, 4px); padding-bottom: var(--s2); }
.rail-back { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; padding: 0; font-size: 0.8125rem; font-weight: 600; color: var(--sky-deep, var(--amber)); cursor: pointer; margin-bottom: var(--s4); }
.rail-back:hover { text-decoration: underline; }
.rail-searching-term { font-size: 0.9375rem; font-weight: 700; color: var(--bone); }
.reco-panel { background: var(--ink-800); border: 1.5px solid var(--sky-deep, var(--amber)); border-radius: var(--r-lg); padding: var(--s6); margin-bottom: var(--s5); box-shadow: 0 20px 48px -24px rgba(26,143,227,0.3); }
.reco-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 1.0625rem; font-weight: 700; color: var(--bone); margin-bottom: 2px; }
.reco-sub { font-size: 0.8125rem; font-weight: 600; color: var(--sky-deep, var(--amber)); margin-bottom: var(--s4); }
.reco-body { display: flex; align-items: flex-start; gap: var(--s5); }
.reco-av { width: 56px; height: 56px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 1.125rem; background-size: cover; background-position: center; }
.reco-text { flex: 1; min-width: 0; }
.reco-name { font-weight: 700; font-size: 1rem; color: var(--bone); display: flex; align-items: center; gap: 6px; }
.reco-title { font-size: 0.9375rem; color: var(--taupe); margin: 2px 0 10px; }
.reco-next { font-size: 0.8125rem; color: var(--taupe-3); margin: 8px 0 0; line-height: 1.5; }
.reco-cta { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
@media (max-width: 640px) { .reco-body { flex-direction: column; } .reco-cta { align-items: stretch; width: 100%; } .reco-cta .btn { width: 100%; } }
.svc3-foot { display: flex; flex-direction: column; gap: 14px; padding: 16px 20px; border-top: 1px solid var(--line); margin-top: auto; }
.svc3-foot-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card.svc3 .price { display: inline-flex; align-items: baseline; font-size: 0.9375rem; }
.svc3-foot .rating-link { margin: 0; padding: 2px 4px; font-size: 0.9375rem; }
.svc3-foot .rl-ct { color: var(--taupe); text-decoration: none; font-weight: 500; }
.svc3-foot .rating-link:hover { background: none; }
.svc3-book { width: 100%; height: 52px; font-size: 0.9688rem; }
@media (max-width: 760px) {
  .svc3-body { padding: 12px 16px 16px; }
  .svc3-foot { padding: 14px 16px; }
}

/* ── Compact list-row card, phones only ─────────────────────
   Small square thumbnail + one-line title/meta/price, so 3-4
   listings fit on one screen instead of one giant card per
   scroll. Category badge collapses to an icon, description and
   "next available" drop, the row itself stays tappable so the
   book button drops too. ── */
@media (max-width: 640px) {
  .grid-svc, .grid-feed { gap: 12px; }
  .card.svc3 {
    position: relative; display: flex; flex-direction: column; border-radius: var(--r-lg);
    transition: transform var(--t-fast), box-shadow var(--t-fast);
  }
  .card.svc3:active { transform: scale(0.985); }
  /* thumbnail dropped on mobile to save space, only the save button (and,
     for events, the date chip) survive, absolutely positioned over the card */
  .svc3-top {
    position: absolute; inset: 0; height: 50px; margin: 0; padding: 0;
    background: none; border: none; z-index: 2; pointer-events: none;
  }
  .svc3-top .cat-badge { display: none; }
  .svc3-top .save-btn {
    position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; pointer-events: auto;
  }
  .svc3-top .save-btn svg { width: 15px; height: 15px; }
  .svc3-top .evt3-datechip { top: 10px; left: 14px; transform: none; width: 34px; padding: 3px 0; }
  .cover-flag { display: none; }
  .svc3-body {
    margin-top: 0; background: transparent; border-radius: 0;
    padding: 14px 44px 4px 14px; gap: 4px;
  }
  .svc3-title { font-size: 1.0625rem; font-weight: 700; line-height: 1.28; -webkit-line-clamp: 2; }
  .svc3-desc, .svc3-avail { display: none; }
  .svc3-id { gap: 8px; margin-top: 2px; }
  .svc3-av { width: 22px; height: 22px; font-size: 0.8125rem; }
  .svc3-flag { font-size: 0.8125rem; }
  .svc3-name { font-size: 0.8125rem; font-weight: 500; gap: 4px; }
  .svc3-shield { width: 13px; height: 13px; }
  .svc3-loc { font-size: 0.8125rem; color: var(--bone-2); }
  .svc3-foot {
    flex-direction: row; align-items: center;
    padding: 0 14px 14px 14px; border-top: none; margin-top: 0; gap: 8px;
  }
  .svc3-foot-top { flex: 1; }
  .card.svc3 .svc3-foot .price { font-size: 1.0625rem; font-weight: 700; }
  .svc3-foot .rating-link { font-size: 0.8125rem; padding: 2px; margin: -2px; gap: 4px; }
  .svc3-foot .rating-link svg { width: 13px; height: 13px; }
  .svc3-book { display: none; }
}

/* ── Event card, service-card anatomy, orange theme ──────── */
.card.evt3 .svc3-top {
  background: linear-gradient(115deg, var(--orange-dim) 0%, oklch(0.94 0.05 62) 48%, oklch(0.95 0.04 40) 100%);
}
.card.evt3 .cat-badge { --cat: var(--orange); }
.card.evt3 .svc3-top { --cat: var(--orange); }
.card.evt3:hover { box-shadow: 0 22px 46px -18px rgba(246,130,31,0.42), var(--shadow-card); }
.card.evt3 .btn-book { background: var(--orange); }
.card.evt3 .btn-book:hover { background: var(--orange-deep); }
.evt3-datechip {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 46px; padding: 4px 0; border-radius: 11px; background: #fff; border: 1px solid var(--line);
  box-shadow: var(--shadow-sm); line-height: 1;
}
.evt3-datechip b { font-family: var(--serif); font-size: 1.1875rem; font-weight: 700; color: var(--orange-deep); }
.evt3-datechip span { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--taupe); margin-top: 2px; }
.evt3-when { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--orange-deep); }
.evt3-when svg { color: var(--orange); flex: none; }
.evt3-going { display: inline-flex; align-items: center; gap: 6px; font-size: 0.875rem; font-weight: 600; color: var(--bone-2); }
.evt3-going svg { color: var(--taupe); flex: none; }
.evt3-going .low { color: var(--orange-deep); font-weight: 700; }
[data-theme="dark"] .card.evt3 .svc3-top { background: linear-gradient(115deg, rgba(246,130,31,0.22) 0%, rgba(246,130,31,0.10) 55%, transparent 100%); }
[data-theme="dark"] .evt3-datechip { background: var(--ink-750); }

/* compact hero, signed-in browse state: personal greeting + search, no full-viewport wall */
.hero-compact { padding: clamp(28px, 5vh, 52px) var(--s8) clamp(18px, 3vh, 30px); max-width: 1320px; margin: 0 auto; min-height: calc(100vh - 64px); min-height: calc(100svh - 64px); min-height: calc(100dvh - 64px); display: flex; flex-direction: column; justify-content: center; }
.hero-compact .hero-text { max-width: 940px; margin: 0 auto; text-align: center; }
/* greeting + prompt reuse the guest hero's real h1 / .hero-sub styling so the
   signed-in hero visually matches, just smaller scale (personal one-liner,
   not a marketing headline) and no eyebrow chip (no new content to attach it to) */
.hero-compact h1 { font-size: clamp(34px, 5vw, 54px); letter-spacing: -0.03em; }
.hero-compact .hero-sub { max-width: 52ch; }
.hc-invite-wrap { max-width: 1000px; margin: 36px auto 0; padding: 0 var(--s8); }
.ci-modal { max-width: 620px; background: transparent; border: none; box-shadow: none; }
.ci-modal .ci-card {
  margin-bottom: 0; padding: 30px 32px; gap: 20px; flex-wrap: wrap; border-radius: var(--r-xl);
  border-color: rgba(246,130,31,0.22); background: var(--ink-800); box-shadow: var(--shadow-pop);
}
.ci-modal .ci-main { flex: 1 1 100%; order: 2; }
.ci-modal .ci-go { flex: 1 1 100%; order: 3; justify-content: center; }
.hc-invite-wrap .ci-card {
  margin-bottom: 0; padding: 22px 26px; gap: 18px; border-radius: var(--r-xl);
  border-color: rgba(246,130,31,0.22);
  box-shadow: 0 16px 40px -26px rgba(26,24,20,0.16), 0 2px 8px rgba(26,24,20,0.04);
}
.hc-invite-wrap .ci-ic { width: 42px; height: 42px; border-radius: 12px; box-shadow: 0 6px 16px -8px rgba(246,130,31,0.5); }
.hc-invite-wrap .ci-title { font-size: 1.0313rem; }
.hc-invite-wrap .ci-sub { font-size: 0.875rem; }
.hc-invite-wrap .ci-go { height: 44px; padding: 0 18px; font-size: 0.8438rem; border-radius: var(--r-pill); }
@media (max-width: 600px) { .hero-compact { padding: 22px var(--s4) 14px; } .hc-invite-wrap { padding: 0 var(--s4); margin-top: 24px; } }

/* popular-search chips, quick on-ramps under the hero search */
.hero-chips { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin: var(--s6) auto 0; max-width: 820px; }
.hc-lead { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--taupe); margin-right: 4px; }
.hero-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: var(--r-pill); background: var(--ink-800); border: 1px solid var(--line); color: var(--bone-2); font-size: 0.875rem; font-weight: 600; box-shadow: var(--shadow-sm); cursor: pointer; transition: var(--t); }
.hero-chip svg { color: var(--amber); flex: none; }
.hero-chip:hover { border-color: var(--amber); color: var(--bone); transform: translateY(-1px); box-shadow: var(--shadow-card); }
.hero-center .hero-text { width: 100%; max-width: 940px; margin: 0 auto; text-align: center; position: relative; z-index: 45; }
.hero-center h1 { width: 100%; max-width: none; margin-inline: auto; margin-top: var(--s2); font-size: clamp(28px, 3.2vw, 38px); letter-spacing: -0.02em; }
.hero-center .hero-eyebrow { margin-bottom: var(--s3); padding: 4px 8px 4px 7px; gap: 5px; }
.hero-center .hero-eyebrow .eyebrow { font-size: 0.8125rem; letter-spacing: 0.06em; }
.hero-center .hero-eyebrow svg { width: 12px; height: 12px; }
.hero-center .hero-sub { margin: 0 auto; max-width: none; font-size: 1rem; }
.hero-center .hs-line { white-space: nowrap; }
.hero-center .trust-signals { justify-content: center; max-width: 760px; margin: var(--s4, 16px) auto 0; gap: 8px 20px; padding-top: var(--s4, 16px); border-top: 1px solid var(--line); font-size: 0.8125rem; }
.hero-center .ts-item { font-size: 0.8125rem; gap: 6px; }
.hero-center .ts-item svg { width: 13px; height: 13px; }
.hs-context { display: flex; align-items: center; justify-content: center; gap: 8px; margin: var(--s3) auto 0; padding-top: var(--s3); border-top: 1px solid var(--line); width: 100%; max-width: none; font-size: 0.9375rem; color: var(--taupe); text-align: center; }
.hs-context svg { color: var(--sky); flex: none; }
.hs-context strong, .hs-context a { color: var(--sky-deep); font-weight: 600; }

/* split hero: copy + community collage side by side, reusing existing hero-art/collage/stat-card */
.hero-split { position: relative; }
.hero-split::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); z-index: 0; pointer-events: none; background: radial-gradient(1100px 640px at 6% 12%, rgba(26,143,227,0.14), transparent 62%), radial-gradient(900px 560px at 96% 6%, rgba(246,130,31,0.07), transparent 60%); }
.hero-split > * { position: relative; z-index: 1; }
.hero-split .hero-grid { display: grid; grid-template-columns: 1fr; align-items: center; justify-items: center; gap: var(--s8); width: 100%; max-width: 960px; margin: -20px auto 0 auto; }
.hero-split .hero-text { text-align: center; }
.hero-split .hero-eyebrow, .hero-split .trust-signals { justify-content: center; margin-left: auto; margin-right: auto; }
.hero-split .hero-sub { margin-left: auto; margin-right: auto; }
.hero-split .hero-text { max-width: 900px; margin: 0 auto; text-align: center; }
.hero-split .hero-eyebrow { margin: 0 0 var(--s5) 0; padding: 5px 11px 5px 9px; border-color: var(--line-soft); }
.hero-split .hero-eyebrow .eyebrow { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; }
.hero-split .hero-eyebrow svg { width: 12px; height: 12px; opacity: 0.8; }
.hero-split h1 { margin: var(--s6) 0 var(--s4); text-align: center; width: auto; font-size: clamp(30px, 3.2vw, 44px); }
.hero-split .hero-sub { margin: 0 auto var(--s4); text-align: center; max-width: none; white-space: nowrap; }
.hero-split .hs-line { white-space: normal; }
.hero-split .trust-signals { justify-content: center; margin: var(--s6) auto 0; padding-top: 0; border-top: none; gap: 8px 16px; }
.hero-split .hero-search > .trust-signals { margin: 0 auto; padding: 14px 22px; border-top: 1px solid var(--line); justify-content: center; text-align: center; }
.hero-split .ts-item { font-size: 0.8125rem; gap: 6px; }
.hero-split .ts-item svg { width: 14px; height: 14px; }
.hero-split .hero-art { max-width: 380px; margin: 0 auto; width: 100%; overflow: visible; }
@media (min-width: 1300px) {
  .hero-split .trust-signals { flex-wrap: nowrap; }
  .hero-split .ts-item { white-space: nowrap; }
}

.hero-story { position: relative; width: 100%; aspect-ratio: 16/10; max-height: 230px; transform: scale(0.92); transform-origin: top center; }
.hs-mapbg {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 1px 1px, rgba(26,143,227,0.18) 1px, transparent 0) 0 0/22px 22px,
    radial-gradient(120% 100% at 15% 90%, rgba(26,143,227,0.10), transparent 60%),
    radial-gradient(100% 90% at 85% 8%, rgba(26,143,227,0.06), transparent 60%);
  -webkit-mask-image: radial-gradient(ellipse 75% 75% at 50% 45%, #000 50%, transparent 100%);
  mask-image: radial-gradient(ellipse 75% 75% at 50% 45%, #000 50%, transparent 100%);
}
.hs-path { position: absolute; inset: 0; width: 100%; height: 100%; }
.hs-path path { fill: none; stroke: var(--line-strong); stroke-width: 2; stroke-dasharray: 2 8; stroke-linecap: round; animation: hsDash 22s linear infinite; }
@keyframes hsDash { to { stroke-dashoffset: -300; } }
.hs-traveler { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--sky); box-shadow: 0 0 0 5px rgba(26,143,227,0.22); offset-path: path("M30 218 C 100 198, 150 168, 190 142 S 262 92, 300 62 S 352 40, 372 24"); offset-rotate: 0deg; animation: hsTravel 7s ease-in-out infinite; z-index: 2; }
@keyframes hsTravel { 0%, 8% { offset-distance: 0%; opacity: 1; } 46% { offset-distance: 100%; opacity: 1; } 50% { opacity: 0; } 54% { offset-distance: 0%; opacity: 0; } 62%, 100% { offset-distance: 0%; opacity: 1; } }
.hs-distance { position: absolute; top: 88%; left: 30%; display: flex; align-items: center; gap: 5px; font-size: 0.8125rem; font-weight: 700; color: var(--sky-deep); background: var(--ink-800); border: 1px solid var(--line); padding: 3px 8px; border-radius: 999px; white-space: nowrap; z-index: 3; }
.hs-star { position: absolute; color: var(--sky); font-size: 13px; opacity: 0.55; animation: hsTwinkle 3.4s ease-in-out infinite; }
@keyframes hsTwinkle { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.75; } }
.hs-star-1 { top: 12%; left: 38%; }
.hs-star-2 { top: 66%; left: 14%; opacity: 0.4; }
.hs-star-3 { top: 46%; left: 60%; font-size: 9px; opacity: 0.5; }
.hs-star-4 { top: 26%; left: 58%; font-size: 10px; opacity: 0.45; }
.hs-star-5 { top: 58%; right: 8%; font-size: 8px; opacity: 0.4; }
.hs-node { position: absolute; display: flex; align-items: center; gap: 6px; z-index: 3; }
.hs-home { top: 80%; left: 8%; }
.hs-home .hs-flag { font-size: 20px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--ink-800); border: 1px solid var(--line); box-shadow: 0 6px 14px -6px rgba(0,0,0,0.2); }
.hs-node-label { font-size: 0.8125rem; font-weight: 600; color: var(--bone-2); background: var(--ink-800); border: 1px solid var(--line); padding: 5px 13px; border-radius: 999px; white-space: nowrap; box-shadow: var(--shadow-sm); }
.hs-node-sub { display: block; font-size: 0.8125rem; font-weight: 500; color: var(--taupe-3); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 1px; }
.hs-here { top: 8%; right: 10%; }
.hs-pin { width: 22px; height: 22px; border-radius: 50%; background: var(--sky); color: #fff; display: grid; place-items: center; position: relative; z-index: 1; box-shadow: 0 8px 18px -6px rgba(26,143,227,0.6); }
.hs-pulse { position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--sky); opacity: 0.5; animation: hsPulse 2.2s ease-out infinite; }
@keyframes hsPulse { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(2.3); opacity: 0; } }
.hs-here .hs-node-label { color: var(--sky-deep); border-color: color-mix(in srgb, var(--sky-deep) 30%, var(--line)); }
.hs-need { top: 4%; left: 2%; z-index: 3; }
.hs-need-ic { width: 24px; height: 24px; border-radius: 50%; background: var(--ink-800); border: 1.5px dashed var(--sky); color: var(--sky-deep); display: grid; place-items: center; flex: none; }
.hs-need .hs-node-label { color: var(--sky-deep); }
.hs-stop { position: absolute; display: flex; align-items: center; gap: 7px; background: var(--ink-800); border: 1px solid var(--line); border-radius: 12px; padding: 6px 9px 6px 6px; box-shadow: var(--shadow-sm); z-index: 4; }
.hs-stop-photo { position: relative; flex: none; }
.hs-stop-photo img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; display: block; border: 1.5px solid var(--ink-800); }
.hs-stop-flag { position: absolute; bottom: -3px; right: -4px; font-size: 12px; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25)); }
.hs-stop-text { font-size: 0.8125rem; line-height: 1.3; color: var(--taupe); white-space: nowrap; }
.hs-stop-text strong { display: block; font-size: 0.8125rem; color: var(--bone); font-weight: 700; }
.hs-stop-1 { top: 64%; left: 10%; }
.hs-stop-2 { top: 40%; left: 34%; }
.hs-stop-3 { top: 22%; left: 56%; }
.hs-caption { position: absolute; bottom: -30px; left: 4%; font-family: var(--serif); font-size: 0.875rem; font-weight: 600; color: var(--bone-2); letter-spacing: -0.01em; }
@media (max-width: 1100px) {
  .hs-caption { display: none; }
}
.hero-split .hero-search { margin-top: var(--s3); max-width: none; width: 100%; }
.hero-split.hero-center .hero-eyebrow { margin-bottom: 0; }
@media (max-width: 900px) {
  .hero-split .hero-grid { grid-template-columns: 1fr; gap: var(--s5); }
  .hero-split .hero-art { max-width: 320px; margin: 0 auto; }
  .hero-split .hero-text { max-width: none; text-align: center; }
  .hero-split .hero-eyebrow, .hero-split .trust-signals { justify-content: center; margin-left: auto; margin-right: auto; }
  .hero-split h1, .hero-split .hero-sub { text-align: center; margin-left: auto; margin-right: auto; }
}
@media (max-width: 640px) {
  .hero-split .hero-art { display: none; }
  .hs-eg { display: none; }
}

/* lift the search above the sticky feed toolbar (z:30) so popovers paint on top */
.hs-field-wrap { z-index: 1; }
.hs-field-wrap:has(.sb-pop) { z-index: 60; }
.sb-pop { z-index: 70; }
.hs-scrim { display: none; }
@keyframes hs-scrim-in { from { opacity: 0; } to { opacity: 1; } }

/* enlarge the module, make it the clear focal point */
/* enlarge the module, make it the clear focal point (shared by the guest
   hero and the signed-in compact hero, so both use the exact same styling) */
.hero-center .hero-search.hero-compact .hero-search { margin: var(--s5) auto 0; max-width: 1040px; padding: 10px; gap: 10px; border-radius: 26px; box-shadow: 0 34px 72px -32px rgba(26,143,227,0.6), 0 8px 22px rgba(26,24,20,0.08); }
.hero-center .hs-field.hero-compact .hs-field { padding: 16px 18px; gap: 15px; border-radius: 18px; }
.hero-center .hs-ic.hero-compact .hs-ic { width: 52px; height: 52px; border-radius: 15px; }
.hero-center .hs-ic svg.hero-compact .hs-ic svg { width: 23px; height: 23px; }
.hero-center .hs-label.hero-compact .hs-label { font-size: 0.8125rem; letter-spacing: 0.14em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-center .hs-value.hero-compact .hs-value { font-size: 1.0938rem; }
.hero-center .hs-div.hero-compact .hs-div { height: 48px; }
.hero-center .hs-go.hero-compact .hs-go { height: 70px; padding: 0 32px; font-size: 1.0625rem; gap: 11px; border-radius: 18px; }
.hero-center .hs-go svg.hero-compact .hs-go svg { width: 21px; height: 21px; }
.hero-center .hs-field-wrap .sb-pop.hero-compact .hs-field-wrap .sb-pop { top: calc(100% + 20px); }
/* last field (community) opens right-aligned so it never overflows the edge */
.hero-center .hs-fields .hs-field-wrap:last-child .sb-pop.hero-compact .hs-fields .hs-field-wrap:last-child .sb-pop { left: auto; right: 0; }

/* hero category menu: compact rows so more options are visible per screenful
   (height/position is owned by the JS fit-to-viewport logic above) */
.hero-center .hero-what-pop.hero-compact .hero-what-pop { padding: 12px; max-width: 372px; }
.hero-center .hero-what-pop .sb-pop-title.hero-compact .hero-what-pop .sb-pop-title { margin-bottom: 6px; padding: 0 4px; }
.hero-center .hero-what-pop .sb-loc-row.hero-compact .hero-what-pop .sb-loc-row { padding: 8px 10px; gap: 11px; }
.hero-center .hero-what-pop .sb-loc-glyph.hero-compact .hero-what-pop .sb-loc-glyph { width: 26px; height: 26px; }

/* roomier, friendlier location popover */
.sb-pop-where { min-width: min(432px, calc(100vw - 32px)); }
.sb-pop-culture { min-width: min(360px, calc(100vw - 32px)); }
.sb-loc-glyph.locate { background: var(--green-dim); color: var(--green); }
.sb-loc-row.feature.locate:hover { border-color: var(--green); background: rgba(18,160,106,0.06); }
.sb-loc-cities { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 2px 10px; }
.sb-loc-cities .sb-city { font-size: 0.8438rem; }

/* ============================================================
   belinkd, MOBILE / RESPONSIVE OVERRIDES  (must stay last so they win)
   ============================================================ */
@media (max-width: 760px) {
  /* hero sized so the top of the first results section peeks above the fold,
     instead of eating the whole first screen (was 78vh + tall headline) */
  .hero-center { padding: var(--s5) var(--s5) var(--s4); min-height: auto; display: flex; flex-direction: column; justify-content: center; }
  .hero-center .hero-eyebrow { display: none; }
  /* The guest hero carries BOTH .hero-center and .hero-split, so the rule
     above was also hiding its "Belinkd Berlin · your community is already
     here" chip — re-enable it specifically for that combination. */
  .hero-split.hero-center .hero-eyebrow { display: inline-flex; margin-bottom: var(--s3); margin-left: 0; margin-right: 0; justify-content: flex-start; }
  .hero-split.hero-center .hero-sub { margin-top: -6px; margin-left: 0; text-align: left; order: 2; }
  .hero-center h1 { text-align: left !important; margin-left: 0 !important; margin-right: 0 !important; order: 1; }
  .hero-split.hero-center .hero-text { text-align: left; display: flex; flex-direction: column; }
  .hero-center h1 { margin-top: 0; font-size: clamp(36px, 10.5vw, 44px); line-height: 1.08; letter-spacing: -0.03em; text-align: left; width: 100%; text-wrap: pretty; }
  .hero-center .hero-sub { font-size: 0.9375rem; line-height: 1.5; margin-top: 4px; max-width: 30ch; text-wrap: pretty; text-align: left; }
  .hero-center .hs-line { white-space: normal; }

  /* ── Hero on mobile ───────────────────────────────────────────────────
     The hero opens the scrolling page: sized to its content (not forced to
     fill the viewport) so headline, subhead and the search card, the primary
     action, all land within the first screen with minimal scroll. */
  .discover .hero-center {
    min-height: calc(100svh - 64px); min-height: calc(100dvh - 64px);
    justify-content: center; padding-top: var(--s7); padding-bottom: var(--s6);
  }
  /* the location / culture pickers are position:fixed bottom sheets; the sticky
     feed-toolbar's will-change/transform/backdrop-filter would otherwise make it
     their containing block and pin them to the top. Neutralise while open so they
     anchor to the viewport bottom like a real sheet. */
  .feed-toolbar:has(.sb-pop) {
    will-change: auto !important; transform: none !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  }
  .ctx-scrim {
    display: block; position: fixed; inset: 0; z-index: 150;
    background: rgba(26, 24, 20, 0.45);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    animation: fadein 160ms var(--ease);
  }
  /* portaled-to-<body> location/culture sheet: own stacking context above all
     app chrome, sheet flush to the viewport bottom and above its own scrim */
  .ctx-sheet-root { position: fixed; inset: 0; z-index: 1400; }
  .ctx-sheet-root .ctx-scrim { z-index: 1; }
  .ctx-sheet-root .sb-pop {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 2;
    width: auto; min-width: 0; max-width: none; max-height: 84dvh; overflow-y: auto;
    border-radius: var(--r-xl, 22px) var(--r-xl, 22px) 0 0;
    box-shadow: 0 -18px 48px -10px rgba(26,24,20,0.34);
    padding-bottom: max(18px, env(safe-area-inset-bottom));
    animation: sb-sheet-up 280ms var(--ease);
  }
  /* the sheet itself is the only scroll container; inner lists (culture,
     location) must not have their own scrollbar or the two conflict */
  .ctx-sheet-root .sb-cultures, .ctx-sheet-root .sb-loc-list { max-height: none; overflow-y: visible; }

  /* search module, slightly tighter top gap to save vertical space */
  .hero-center .hero-search.hero-compact .hero-search { flex-direction: column; align-items: stretch; max-width: 440px; margin-top: var(--s4); padding: 8px; gap: 6px; border-radius: 20px; }
  .hero-center .hs-fields.hero-compact .hs-fields { flex-direction: column; align-items: stretch; width: 100%; gap: 4px; }
  .hero-center .hs-field.hero-compact .hs-field { width: 100%; padding: 13px 14px; gap: 13px; border-radius: 14px; }
  .hero-center .hs-ic.hero-compact .hs-ic { width: 46px; height: 46px; }
  /* the divider: a thin inset hairline between the two stacked fields,
     NOT the 48px gray box the desktop vertical rule produced */
  .hero-center .hs-div.hero-compact .hs-div { width: auto; height: 1px; margin: 0 14px; align-self: stretch; }
  .hero-center .hs-go.hero-compact .hs-go { width: 100%; height: 54px; justify-content: center; padding: 0 20px; font-size: 1rem; margin-top: 2px; }

  /* picker as a bottom sheet so it never opens off-screen below the fold */
  .hero-center .hs-field-wrap .sb-pop.hero-compact .hs-field-wrap .sb-pop {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto;
    margin: 0; border-radius: 22px 22px 0 0; max-height: 78vh; overflow-y: auto;
    box-shadow: 0 -16px 40px -8px rgba(26,24,20,0.3); padding-bottom: max(16px, env(safe-area-inset-bottom));
    animation: sheet-up 0.26s var(--ease);
    z-index: 80;
  }
  /* dimming scrim behind the mobile sheet, separates it from the hero so the
     two no longer read as an overlapping jumble */
  .hero-search .hs-scrim {
    position: fixed; inset: 0; z-index: 70; display: block;
    background: rgba(26,24,20,0.46);
    animation: hs-scrim-in 0.22s var(--ease);
  }
  .sb-pop-where { min-width: 0; width: auto; }
  .sb-loc-list.sb-cultures { max-height: none; }

  /* trust signals: compact centered wrap (was a tall 3-row column) */
  .hero-center .trust-signals { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px 14px; margin-top: var(--s5); max-width: 360px; }
  .hero-center .ts-item { font-size: 0.8125rem; gap: 6px; }
  .hero-center .ts-item svg { width: 13px; height: 13px; }
  .ts-label-full { display: none; }
  .ts-label-short { display: inline; }
  .hero-chips { gap: 7px; margin-top: var(--s5); max-width: 420px; }
  .hc-lead { flex-basis: 100%; text-align: center; margin: 0 0 2px; }
  .hero-chip { padding: 7px 12px; font-size: 0.8125rem; gap: 6px; }

  /* ── COMPACT HORIZONTAL CARDS ─────────────────────────────
     thumbnail left · condensed content right, so 3–4 fit per
     screen. The whole card already taps through to detail, so
     the dual CTA + height-bloating extras are dropped here. ── */
  .grid-feed.grid-svc.grid-evt { gap: 12px; }
  .card.svc:not(.svc3).card.evt:not(.evt3) {
    display: grid; grid-template-columns: 116px 1fr; align-items: stretch;
    border-radius: var(--r-lg);
  }
  /* cover → fixed-width left thumbnail spanning the full card height */
  .card.svc .svc-cover.card.evt .evt-cover {
    grid-row: 1 / span 2; height: auto; min-height: 100%;
    padding: 8px; align-items: flex-start; justify-content: flex-start;
  }
  /* category badge → icon + label pill at the top of the content column
     (the 116px thumbnail is too narrow for the full category label) */
  /* category badge → icon + label pill at the top of the content column.
     Its containing block is the 116px cover (position:relative), so % width
     collapses, size it from the viewport instead: vw − (2×16 page pad +
     116 thumb + 12 gap + 12 right margin). */
  .card.svc:not(.svc3) .cat-badge.card.evt:not(.evt3) .cat-badge {
    position: absolute; top: 10px; left: 128px; right: auto;
    width: calc(100vw - 184px); height: 25px;
    padding: 0 11px; gap: 6px; font-size: 0.8125rem; font-weight: 700;
    border-radius: 999px; justify-content: flex-start; z-index: 4;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .card.svc .cat-badge svg.card.evt .cat-badge svg { width: 14px; height: 14px; flex: none; }
  /* hide secondary cover overlays in the small thumbnail */
  .card.svc .svc-cover .access.card.evt .evt-cover .access { display: none; }
  .card.svc .svc-cover .save-btn.card.evt .evt-cover .save-btn { display: none; }
  .card.svc .cover-flag.card.evt .cover-flag { font-size: 3.5rem; right: 2px; bottom: -2px; opacity: 0.3; }
  /* event date chip stays (the date is critical) but shrinks */
  .card.evt .evt-datechip { left: 8px; bottom: 8px; top: auto; width: 44px; height: 48px; border-radius: 11px; }
  .card.evt .evt-datechip b { font-size: 1.25rem; }
  .card.evt .evt-datechip span { font-size: 0.8125rem; }

  /* right column: condensed body; top padding reserves room for the badge pill */
  .card.svc .svc-body.card.evt .evt-body { padding: 40px 14px 10px; gap: 6px; justify-content: center; }
  /* event cards no longer carry the top "Event" badge pill (the culture + time
     toprow labels them), so reclaim the space the pill used to reserve */
  .card.evt .evt-body { padding-top: 12px; }
  .card.svc .svc-title.card.evt .evt-title { font-size: 1rem; line-height: 1.25; }
  /* drop the elements that inflate height */
  .card.svc .svc-desc.card.svc .impact-row.card.evt .attendees.card .provider .pv-meta { display: none; }
  /* slim provider line (service) */
  .card.svc .provider { gap: 8px; }
  .card.svc .provider .av { width: 26px; height: 26px; font-size: 0.8125rem; }
  .card.svc .provider .av-flag { display: none; }
  .card.svc .pv-name { font-size: 0.875rem; }
  /* event meta line (keep flag, time, location, going) */
  .card.evt .flag-pill { height: 22px; font-size: 0.8125rem; padding: 0 9px 0 7px; }
  .card.evt .evt-time { font-size: 0.875rem; }
  .card.evt .evt-meta { font-size: 0.875rem; gap: 3px 10px; }

  /* foot → slim rating + price row in the right column, no CTA button */
  .card.svc .svc-foot.card.evt .svc-foot {
    grid-column: 2; flex-direction: row; align-items: center; justify-content: space-between;
    padding: 0 14px 12px; border-top: none; margin-top: 0; gap: 10px;
  }
  .card.svc .svc-foot-cta .btn-book.card.evt .svc-foot-cta .btn-book { display: none; }
  .card.svc .svc-meta-row.card.evt .svc-meta-row { display: none; }
  .card.svc .svc-foot-cta.card.evt .svc-foot-cta { width: 100%; justify-content: flex-start; }
  .card.svc .price.card.evt .price { font-size: 0.9375rem; }
  /* full-bleed cover-image cards: keep the image, just resize */
  .card.svc .svc-cover.has-cover.card.evt .evt-cover.has-cover { background-size: cover; }
}
@keyframes sheet-up { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ============================================================
   belinkd, MAP VIEW  (full-screen, mobile-first)
   ============================================================ */
.mapview {
  position: fixed; inset: 0; z-index: 100; overflow: hidden;
  background: var(--map-land); opacity: 1;
  --map-land: #ECE6DA; --map-park: #D9E6CC; --map-water: #C2DBEC; --map-road: rgba(26,24,20,0.06);
}
@keyframes fadeMap { from { opacity: 1; } to { opacity: 1; } }

.map-surface { position: absolute; inset: 0; overflow: hidden; touch-action: none; cursor: grab; user-select: none; }
.map-surface:active { cursor: grabbing; }
.map-canvas { position: absolute; inset: 0; }

/* ── pins ──────────────────────────────────────────────── */
.map-pin-btn {
  position: absolute; transform: translate(-50%, -100%);
  display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 11px 0 7px;
  border-radius: 999px; background: #fff; border: 1.5px solid var(--cult); color: var(--bone);
  font-size: 0.8125rem; font-weight: 700; white-space: nowrap; z-index: 2;
  box-shadow: 0 4px 12px -3px rgba(26,24,20,0.32); transition: transform 0.12s var(--ease), box-shadow 0.12s;
}
.map-pin-btn::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 9px; height: 9px; background: #fff; border-right: 1.5px solid var(--cult); border-bottom: 1.5px solid var(--cult); transform: translateX(-50%) rotate(45deg); }
.map-pin-btn .mp-ic { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: var(--cult); flex: none; }
.map-pin-btn .mp-ic svg { color: #fff; }
.map-pin-btn.active { transform: translate(-50%, -100%) scale(1.12); z-index: 6; background: var(--cult); color: #fff; box-shadow: 0 9px 22px -5px rgba(26,24,20,0.45); }
.map-pin-btn.active::after { background: var(--cult); }
.map-pin-btn.active .mp-ic { background: #fff; }
.map-pin-btn.active .mp-ic svg { color: var(--cult); }

/* ── cluster ───────────────────────────────────────────── */
.map-cluster {
  position: absolute; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: var(--amber); color: #fff; font-size: 0.9375rem; font-weight: 800;
  border: 3px solid #fff; box-shadow: 0 6px 16px -4px rgba(26,24,20,0.4); z-index: 3;
}
.map-cluster .mc-ring { position: absolute; inset: -7px; border-radius: 50%; border: 2px solid var(--amber); opacity: 0.32; }

/* ── top overlay ───────────────────────────────────────── */
.map-top { position: absolute; top: 0; left: 0; right: 0; z-index: 10; display: flex; align-items: center; gap: 10px; padding: max(12px, env(safe-area-inset-top)) 14px 12px; pointer-events: none; }
.map-top > * { pointer-events: auto; }
.map-icon-btn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1px solid var(--line); color: var(--bone); box-shadow: var(--shadow-card); flex: none; transition: var(--t-fast); }
.map-icon-btn:hover { background: var(--ink-750); }
.map-icon-btn.recenter { color: var(--amber); }
.map-chips { display: flex; gap: 5px; padding: 5px; background: #fff; border-radius: 999px; box-shadow: var(--shadow-card); border: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
.map-chips::-webkit-scrollbar { display: none; }
.map-chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 999px; font-size: 0.8438rem; font-weight: 600; color: var(--taupe); white-space: nowrap; flex: none; transition: var(--t-fast); }
.map-chip.on { background: var(--bone); color: #FAFAF8; }
.mch-n { font-size: 0.8125rem; opacity: 0.7; }
.map-list-toggle { display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 16px; border-radius: 999px; background: var(--bone); color: #FAFAF8; font-weight: 600; font-size: 0.875rem; box-shadow: var(--shadow-card); flex: none; }
.map-list-toggle svg { color: #FAFAF8; }

/* ── search-this-area pill ─────────────────────────────── */
.map-search-area { position: absolute; top: 78px; left: 50%; transform: translateX(-50%); z-index: 9; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 999px; background: var(--bone); color: #FAFAF8; font-size: 0.875rem; font-weight: 600; box-shadow: 0 10px 26px -8px rgba(26,24,20,0.5); animation: popIn 0.2s var(--ease); }
.map-search-area svg { color: #FAFAF8; }
.map-search-area.is-clear { background: #fff; color: var(--bone); border: 1px solid var(--line-strong); }
.map-search-area.is-clear svg { color: var(--bone); }
@keyframes popIn { from { opacity: 0; } to { opacity: 1; } }

/* ── zoom + recenter ───────────────────────────────────── */
.map-ctrls { position: absolute; right: 14px; bottom: 210px; z-index: 9; display: flex; flex-direction: column; gap: 8px; }

/* ── bottom carousel ───────────────────────────────────── */
.map-rail-wrap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 8; padding: 10px 0 max(12px, env(safe-area-inset-bottom)); pointer-events: none; }
.map-remote-note { pointer-events: auto; margin: 0 14px 8px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; background: #fff; border: 1px solid var(--line); border-radius: 999px; font-size: 0.875rem; color: var(--taupe); box-shadow: var(--shadow-sm); }
.map-remote-note svg { color: var(--taupe); }
.map-rail { display: flex; gap: 12px; padding: 0 14px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; pointer-events: auto; }
.map-rail::-webkit-scrollbar { display: none; }
.map-card { scroll-snap-align: center; flex: 0 0 300px; max-width: 86vw; display: flex; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 10px; box-shadow: var(--shadow-card); cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
.map-card.active { border-color: var(--cult); box-shadow: 0 12px 30px -10px rgba(26,24,20,0.3); }
.mcd-thumb { position: relative; flex: none; width: 84px; border-radius: 11px; overflow: hidden; }
.mcd-flag { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.875rem; }
.mcd-badge { position: absolute; top: 6px; left: 6px; width: 24px; height: 24px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--cult); box-shadow: var(--shadow-sm); }
.mcd-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mcd-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mcd-kind { font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 2px 8px; border-radius: 999px; }
.mcd-kind.k-service { background: var(--amber-dim); color: var(--amber-deep); }
.mcd-kind.k-event { background: var(--orange-dim); color: var(--orange-deep); }
.mcd-rating { display: inline-flex; align-items: center; gap: 3px; font-size: 0.8125rem; font-weight: 600; color: var(--bone-2); }
.mcd-rating svg { color: var(--star); }
.mcd-title { font-family: var(--serif); font-size: 0.9375rem; line-height: 1.2; font-weight: 600; color: var(--bone); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mcd-meta { display: flex; align-items: center; gap: 5px; font-size: 0.8125rem; color: var(--taupe); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mcd-meta svg { color: var(--taupe); flex: none; }
.mcd-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 4px; }
.mcd-price { font-size: 0.8125rem; font-weight: 700; color: var(--bone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mcd-cta { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 13px; border-radius: 999px; background: var(--bone); color: #FAFAF8; font-size: 0.8125rem; font-weight: 700; }
.mcd-cta svg { color: #FAFAF8; }
.map-empty { pointer-events: auto; margin: 0 14px; padding: 18px 20px; background: #fff; border: 1px solid var(--line); border-radius: 16px; color: var(--taupe); font-size: 0.875rem; display: flex; flex-direction: column; align-items: flex-start; box-shadow: var(--shadow-card); }

/* filters-sheet "open map" row */
.fs-open-map svg:last-child { margin-left: auto; color: var(--taupe); }

@media (min-width: 761px) {
  /* on desktop, present the map as a large centered modal rather than edge-to-edge */
  .mapview { border-radius: 0; }
  .map-card { flex-basis: 320px; }
}

/* ============================================================
   THE CONVERSION MOMENT, customer → creator pivot modal
   Fires after a positive review. Creator side = orange accent.
   ============================================================ */
.cm-modal { max-width: 540px; padding: 0; overflow: hidden; position: relative; display: flex; flex-direction: column; }
.cm-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.cm-close { position: absolute; top: 14px; right: 14px; z-index: 3; }

.cm-head {
  position: relative; padding: 32px 32px 24px;
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(246,130,31,0.16), transparent 55%),
    linear-gradient(180deg, #FFF7EF, var(--ink-800));
  border-bottom: 1px solid var(--line);
}
.cm-badge {
  width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center;
  background: var(--orange); color: #fff; box-shadow: 0 10px 24px -8px rgba(246,130,31,0.6);
  margin-bottom: 16px;
}
.cm-eyebrow { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange-deep); margin-bottom: 10px; }
.cm-title { font-family: var(--serif); font-size: 1.75rem; line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; color: var(--bone); }
.cm-title em { font-style: italic; color: var(--orange-deep); }
.cm-recip { margin-top: 14px; font-size: 0.9063rem; line-height: 1.55; color: var(--bone-2); max-width: 46ch; }

.cm-body { padding: 24px 32px 8px; display: flex; flex-direction: column; gap: 16px; }
.cm-block-label { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--taupe); margin-bottom: 10px; }
.cm-dot { width: 8px; height: 8px; border-radius: 50%; }
.cm-dot.sky { background: var(--sky); }
.cm-dot.green { background: var(--green); }
.cm-block-lead { font-size: 0.9375rem; line-height: 1.5; color: var(--bone); }
.cm-block-lead strong { color: var(--sky-deep); }

.cm-demand { display: flex; align-items: center; gap: 13px; margin-top: 12px; padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--r-lg); background: rgba(var(--ov),0.02); }
.cm-demand-av { width: 40px; height: 40px; border-radius: 12px; flex: none; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 0.8125rem; }
.cm-demand-main { min-width: 0; flex: 1; }
.cm-demand-title { font-size: 0.875rem; font-weight: 600; color: var(--bone); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cm-demand-meta { display: flex; align-items: center; gap: 12px; margin-top: 5px; font-size: 0.8125rem; color: var(--taupe); }
.cm-demand-meta span { display: inline-flex; align-items: center; gap: 5px; }
.cm-demand-budget { color: var(--green); font-weight: 700; }
.cm-demand-flag { font-size: 1.375rem; flex: none; }

.cm-earn { padding: 16px 18px; border-radius: var(--r-lg); background: var(--green-dim); border: 1px solid rgba(18,160,106,0.22); }
.cm-earn .cm-block-label { color: var(--green); margin-bottom: 8px; }
.cm-earn-row { display: flex; align-items: center; gap: 16px; }
.cm-earn-fig { display: flex; align-items: baseline; gap: 3px; flex: none; }
.cm-earn-num { font-family: var(--serif); font-size: 2.5rem; font-weight: 700; letter-spacing: -0.02em; color: var(--bone); }
.cm-earn-unit { font-size: 0.9375rem; font-weight: 600; color: var(--taupe); }
.cm-earn-note { font-size: 0.875rem; line-height: 1.45; color: var(--bone-2); }
.cm-earn-note strong { color: var(--green); }

.cm-reassure { display: flex; flex-direction: column; gap: 9px; padding-top: 2px; }
.cm-reassure-item { display: flex; align-items: center; gap: 10px; font-size: 0.8438rem; color: var(--bone-2); }
.cm-reassure-item svg { color: var(--orange-deep); flex: none; }

.cm-actions { display: flex; gap: 8px; padding: 20px 32px 8px; }
.cm-go { flex: 1; background: var(--orange); color: #fff; justify-content: center; box-shadow: 0 12px 26px -12px rgba(246,130,31,0.7); }
.cm-go:hover { background: var(--orange-deep); }
.cm-later { flex: none; }
.cm-foot { padding: 4px 34px 26px; font-size: 0.8125rem; line-height: 1.45; color: var(--taupe); }
.cm-foot strong { color: var(--bone-2); }

@media (max-width: 560px) {
  .cm-head { padding: 28px 22px 22px; }
  .cm-title { font-size: 1.5rem; }
  .cm-body { padding: 20px 22px 4px; }
  .cm-actions { flex-direction: column-reverse; padding: 18px 22px 6px; }
  .cm-foot { padding: 6px 22px 22px; }
}

/* ── CreatorInvite, the always-available lighter give-back card ── */
.ci-card {
  position: relative; display: flex; align-items: center; gap: 16px;
  padding: 18px 20px; margin-bottom: var(--s6);
  border: 1px solid rgba(246,130,31,0.28); border-radius: var(--r-lg);
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(246,130,31,0.10), transparent 60%),
    linear-gradient(180deg, #FFF9F2, var(--ink-800));
  box-shadow: var(--shadow-sm);
}
.ci-ic { width: 46px; height: 46px; border-radius: 13px; flex: none; display: grid; place-items: center; background: var(--orange); color: #fff; box-shadow: 0 8px 20px -8px rgba(246,130,31,0.6); }
.ci-main { flex: 1; min-width: 0; }
.ci-title { font-family: var(--serif); font-size: 1.0625rem; font-weight: 600; line-height: 1.25; color: var(--bone); letter-spacing: -0.01em; }
.ci-title-2 { color: var(--orange-deep); }
.ci-sub { margin-top: 5px; font-size: 0.875rem; line-height: 1.45; color: var(--bone-2); max-width: 62ch; }
.ci-sub strong { color: var(--green); font-weight: 700; }
.ci-go { flex: none; background: var(--orange); color: #fff; box-shadow: 0 10px 22px -12px rgba(246,130,31,0.7); }
.ci-go:hover { background: var(--orange-deep); }
.ci-x { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: var(--taupe); background: transparent; transition: var(--t-fast); }
.ci-x:hover { background: rgba(var(--ov),0.05); color: var(--bone); }

@media (max-width: 640px) {
  .ci-card { flex-wrap: wrap; gap: 12px; padding: 16px 16px 18px; }
  .ci-ic { width: 40px; height: 40px; }
  .ci-main { flex: 1 1 100%; order: 2; }
  .ci-go { order: 3; width: 100%; justify-content: center; }
  .ci-x { order: 1; width: 40px; height: 40px; top: 8px; right: 8px; }
}

/* ── Conversion Insights panel (internal, Alt+I) ── */
.ip-panel {
  position: fixed; left: 18px; bottom: 18px; z-index: 400;
  width: 344px; max-width: calc(100vw - 36px);
  background: #1A1814; color: #F4F1EC;
  border: 1px solid rgba(255,255,255,0.12); border-radius: 14px;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.6);
  padding: 14px 16px 13px; font-family: var(--sans);
  animation: fadein 160ms var(--ease);
}
.ip-head { display: flex; align-items: center; justify-content: space-between; }
.ip-title { display: flex; align-items: center; gap: 8px; font-family: var(--serif); font-weight: 600; font-size: 0.9375rem; }
.ip-live { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(18,160,106,0.25); }
.ip-head-actions { display: flex; align-items: center; gap: 6px; }
.ip-mini { font-size: 0.8125rem; color: #C9C4BC; background: rgba(255,255,255,0.08); border-radius: 999px; padding: 3px 10px; }
.ip-mini:hover { background: rgba(255,255,255,0.14); color: #fff; }
.ip-x { width: 24px; height: 24px; border-radius: 50%; color: #C9C4BC; font-size: 0.8125rem; }
.ip-x:hover { background: rgba(255,255,255,0.1); color: #fff; }
.ip-sub { font-size: 0.875rem; color: #9C9486; margin: 4px 0 10px; }
.ip-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.ip-table th { text-align: right; font-weight: 600; color: #9C9486; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 0 0 6px; }
.ip-table th:first-child { text-align: left; }
.ip-table td { text-align: right; padding: 5px 0; border-top: 1px solid rgba(255,255,255,0.07); }
.ip-trg { text-align: left; color: #EFE8D7; }
.ip-conv { font-weight: 700; color: #FBBE7E; }
.ip-best td { background: rgba(246,130,31,0.10); }
.ip-best .ip-trg { color: #FBBE7E; }
.ip-divide td { border-top: 1px solid rgba(255,255,255,0.18); color: #C9C4BC; }
.ip-foot { margin-top: 11px; font-size: 0.8125rem; line-height: 1.45; color: #C9C4BC; }
.ip-foot strong { color: #FBBE7E; }
@media (max-width: 480px) { .ip-panel { left: 10px; right: 10px; width: auto; } }

/* ============================================================
   SCOPED COMMUNITY FEED, context bar, quick-intent, new cards
   ============================================================ */
.feed-toolbar.ctxbar { display: flex; flex-direction: column; gap: 0; align-items: stretch; padding: 9px var(--s8); max-width: 1320px; margin: 0 auto; background: transparent; border: none; box-shadow: none; }

/* single-row context bar: scope · category · search · saved · filters · sort */
.ctxbar-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ctxbar-row .ctxpill-wrap { flex: none; }
.ctxbar-row .ctx-search { flex: 1 1 240px; }
.ctxbar-row .saved-btn { flex: none; }
.ctxbar-row .ctxpill-wrap:last-of-type { margin-left: 2px; }

/* Filters popover trigger + count badge */
.filters-trigger.has-val { border-color: var(--sky); background: var(--sky-dim); }
.filters-trigger.has-val svg:first-child { color: var(--sky-deep); }
.filters-trigger .fcount { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--sky); color: #fff; font-family: var(--mono); font-size: 0.8125rem; font-weight: 600; margin-left: -2px; }
.filters-menu { position: absolute; top: calc(100% + 8px); right: 0; left: auto; min-width: 232px; padding: 6px; background-color: var(--ink-800); background-image: none; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 20px 48px -12px rgba(26,24,20,0.32), 0 2px 8px rgba(26,24,20,0.12); border: 1px solid var(--line-strong); border-radius: var(--r); }
.filters-menu .fm-head { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--taupe); padding: 8px 10px 6px; }
.filters-menu .fm-div { height: 1px; background: var(--line); margin: 5px 6px; }
.filters-menu .fm-toggle svg:first-child { color: var(--green); }
.filters-menu .fm-toggle.sel svg:first-child { color: var(--sky-deep); }
.filters-menu .fm-clear { width: 100%; margin-top: 4px; height: 38px; border-radius: var(--r-sm); border: none; background: rgba(var(--ov),0.05); color: var(--bone-2); font-size: 0.8125rem; font-weight: 600; cursor: pointer; transition: var(--t-fast); }
.filters-menu .fm-clear:hover { background: rgba(var(--ov),0.1); color: var(--bone); }

/* filter row, search + quick chips + sort */
.ctxbar-filters { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ctx-search { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 220px; height: 44px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--ink-800); box-shadow: var(--shadow-sm); }
.ctx-search svg:first-child { color: var(--taupe); flex: none; }
.ctx-search input { flex: 1; min-width: 0; border: none; background: none; outline: none; font-family: var(--sans); font-size: 0.9063rem; color: var(--bone); }
.ctx-search input::placeholder { color: var(--taupe-3); }
.cs-clear { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: var(--taupe); background: rgba(var(--ov),0.06); }
.cs-clear:hover { background: rgba(var(--ov),0.12); color: var(--bone); }
.ctx-quick { display: flex; align-items: center; gap: 8px; }
.qf-chip { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--ink-800); color: var(--taupe); font-size: 0.8125rem; font-weight: 600; cursor: pointer; transition: var(--t-fast); white-space: nowrap; }
.qf-chip svg { color: var(--green); flex: none; }
.qf-chip:hover { color: var(--bone); border-color: var(--bone-2); }
.qf-chip.on { color: #fff; background: var(--sky); border-color: var(--sky); }
.qf-chip.on svg { color: #fff; }
.ctx-sortfield { flex: none; position: relative; }
.ctx-sortfield select { height: 40px; padding: 0 34px 0 16px; border-radius: var(--r-pill); border: 1px solid var(--line); background: rgba(var(--ov),0.02); color: var(--bone-2); font-size: 0.8438rem; font-weight: 600; cursor: pointer; appearance: none; -webkit-appearance: none; transition: var(--t-fast); }
.ctx-sortfield select:hover { border-color: var(--line-strong); background: rgba(var(--ov),0.04); color: var(--bone); }
.ctx-sortfield select:focus-visible { border-color: var(--amber-deep); }
.ctx-sortfield svg { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--taupe); pointer-events: none; }
@media (max-width: 760px) {
  .ctxbar-filters { gap: 10px; }
  .ctx-search { flex-basis: 100%; order: -1; }
  .ctx-quick { overflow-x: auto; flex-wrap: nowrap; }
  .ctx-sortfield { margin-left: auto; }
}
.cat-trigger.has-val { border-color: var(--sky); background: var(--sky-dim); color: var(--sky-deep); }
.cat-trigger.has-val svg:first-child { color: var(--sky-deep); }
.cat-menu { position: absolute; top: calc(100% + 8px); left: 0; right: auto; min-width: 240px; background-color: var(--ink-800); background-image: none; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 20px 48px -12px rgba(26,24,20,0.32), 0 2px 8px rgba(26,24,20,0.12); border: 1px solid var(--line-strong); }

/* airy services grid */
.svc-grid { max-width: 1320px; margin: 8px auto 0; padding: 0 var(--s8) 64px; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 26px; }
@media (max-width: 760px) { .svc-grid { padding: 0 var(--s4) 48px; gap: 18px; grid-template-columns: 1fr; } }
.ctxpill-wrap { position: relative; }
.ctx-pill { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--ink-800); color: var(--bone); font-size: 0.9063rem; font-weight: 600; cursor: pointer; transition: var(--t-fast); white-space: nowrap; }
.ctx-pill svg:first-child { color: var(--sky); }
.ctx-pill:hover.ctx-pill.on { border-color: var(--sky); background: var(--sky-dim); }
.ctx-pill .ctx-chev { color: var(--taupe); }
.ctxbar .seg-tabs { display: flex; gap: 4px; background: rgba(var(--ov),0.04); border-radius: var(--r-pill); padding: 4px; }
.ctxbar .seg-tab { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 15px; border-radius: var(--r-pill); font-size: 0.8438rem; font-weight: 600; color: var(--taupe); background: none; border: none; cursor: pointer; transition: var(--t-fast); }
.ctxbar .seg-tab:hover { color: var(--bone); }
.ctxbar .seg-tab.on { background: var(--ink-800); color: var(--bone); box-shadow: var(--shadow-sm); }
.ctxbar .seg-tab .st-n { font-family: var(--mono); font-size: 0.8125rem; font-weight: 600; padding: 1px 6px; border-radius: 999px; background: rgba(var(--ov),0.07); color: var(--taupe); }
.ctxbar .seg-tab.on .st-n { background: var(--sky-dim); color: var(--sky-deep); }
.ctxbar-views { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.tool-icon { position: relative; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--line); background: var(--ink-800); color: var(--taupe); cursor: pointer; transition: var(--t-fast); }
.tool-icon:hover { color: var(--bone); border-color: var(--line-strong); }
.tool-icon.on { color: var(--orange); border-color: var(--orange); background: var(--orange-dim); }
.ti-count { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--orange); color: #fff; font-family: var(--mono); font-size: 0.8125rem; font-weight: 600; display: grid; place-items: center; }
.cat-pills { display: flex; flex-wrap: wrap; gap: 9px; }
.cat-pill { height: 38px; padding: 0 17px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--ink-800); color: var(--taupe); font-size: 0.8438rem; font-weight: 500; cursor: pointer; transition: var(--t-fast); white-space: nowrap; box-shadow: var(--shadow-sm); }
.cat-pill:hover { color: var(--bone); border-color: var(--line-strong); }
.cat-pill.on { color: #fff; background: var(--sky); border-color: var(--sky); box-shadow: 0 8px 20px -10px var(--sky); }
.ctxbar-sort { flex: none; position: relative; }
.ctxbar-sort select { height: 40px; padding: 0 34px 0 16px; border-radius: var(--r-pill); border: 1px solid var(--line); background: rgba(var(--ov),0.02); color: var(--bone-2); font-size: 0.8438rem; font-weight: 600; cursor: pointer; appearance: none; -webkit-appearance: none; transition: var(--t-fast); }
.ctxbar-sort select:hover { border-color: var(--line-strong); background: rgba(var(--ov),0.04); color: var(--bone); }
.ctxbar-sort select:focus-visible { border-color: var(--amber-deep); }
.ctxbar-sort svg { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--taupe); pointer-events: none; }

/* quick-intent row */
.quick-intent { max-width: 1320px; margin: 0 auto; padding: 22px var(--s6) 4px; }
.qi-lead { display: block; font-family: var(--serif); font-size: 1.125rem; font-weight: 600; color: var(--bone); margin-bottom: 12px; }
.qi-chips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.qi-chip { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 20px 12px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--ink-800); color: var(--bone-2); font-size: 0.8438rem; font-weight: 600; cursor: pointer; transition: var(--t); text-align: center; box-shadow: var(--shadow-sm); }
.qi-chip svg { color: var(--sky); }
.qi-chip:hover { border-color: var(--sky); color: var(--bone); transform: translateY(-2px); box-shadow: var(--shadow-card); }
.qi-chip.on { border-color: var(--sky); background: var(--sky-dim); color: var(--sky-deep); }
.qi-chip.on svg { color: var(--sky-deep); }

.favor-post-row { max-width: 1320px; margin: 0 auto; padding: 18px var(--s6) 0; }

/* new card bits: vouched line, tier badge, availability */
.pv-vouch { display: flex; align-items: center; gap: 5px; font-size: 0.8125rem; font-weight: 500; color: var(--green); margin-top: 2px; }
.pv-vouch svg { color: var(--green); flex: none; }
.tier-badge { display: inline-flex; align-items: center; gap: 4px; margin-left: 7px; padding: 2px 7px; border-radius: 999px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.02em; vertical-align: middle; }
.tier-badge svg { flex: none; }
.tier-badge.t2 { background: var(--sky-dim); color: var(--sky-deep); }
.tier-badge.t3 { background: var(--green-dim); color: var(--green); }
.avail-next { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; font-weight: 600; color: var(--bone-2); }
.avail-next svg { color: var(--sky); flex: none; }
.evt-free { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--green); }

@media (max-width: 900px) {
  .qi-chips { grid-template-columns: repeat(3, 1fr); }
  .qi-chip:nth-child(4).qi-chip:nth-child(5) { grid-column: span 1; }
}
@media (max-width: 760px) {
  .feed-toolbar.ctxbar { padding: 12px var(--s4); gap: 12px; }
  /* combine the filter controls into two tidy rows:
     row 1 = search (full width), row 2 = category (grows) · Filters · saved */
  .ctxbar-row { gap: 8px; row-gap: 10px; }
  .ctxbar-row .ctx-search { flex: 1 1 100%; order: 0; }
  .ctxbar-row .ctx-wrap.ctxpill-wrap { flex: 1 1 auto; min-width: 0; }   /* category grows to fill */
  .ctxbar-row .cat-trigger { width: 100%; min-width: 0; }
  .ctxbar-row .cat-trigger > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ctxbar-row .ctxpill-wrap:not(.ctx-wrap) { flex: none; }               /* Filters stays compact */
  .ctxbar-top { gap: 10px; }
  .ctxbar .seg-tabs { order: 3; width: 100%; overflow-x: auto; }
  .ctxbar-views { order: 2; }
  .ctxbar-cats { flex-direction: column; align-items: stretch; gap: 10px; }
  .cat-pills { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  .ctxbar-sort select { width: 100%; }
  .quick-intent { padding: 18px var(--s4) 2px; }
  .qi-chips { grid-template-columns: repeat(2, 1fr); }
  .qi-lead { font-size: 1rem; }
}
@media (max-width: 420px) { .qi-chips { grid-template-columns: 1fr 1fr; } .qi-chip { padding: 15px 8px; font-size: 0.8125rem; } }

/* ============================================================
   SERVICE DETAIL, full page layer
   ============================================================ */
.btn-block { width: 100%; justify-content: center; }
.btn-lg { height: 54px; font-size: 0.9688rem; border-radius: var(--r); }

.svcpage {
  position: fixed; inset: 0; z-index: 200;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--ink-900); color: var(--bone);
}
@media (min-width: 761px) {
  /* desktop: sit BELOW the real site topbar (64px) instead of covering it, 
     the breadcrumb inside now owns wayfinding, so the standalone "Back"
     button is redundant and gets hidden; prev/next result arrows stay. */
  .svcpage { top: 64px; z-index: 48; }
}
@media (prefers-reduced-motion: no-preference) {
  .svcpage { animation: svpIn 0.34s var(--ease); }
}
.svp-mbar { display: none; }
@media (max-width: 760px) {
  .svp-mbar {
    display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 30;
    height: 52px; padding: 0 8px 0 4px; background: var(--ink-800); border-bottom: 1px solid var(--line);
  }
  .svp-mbar-back, .svp-mbar-menu {
    display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
    background: none; border: none; color: var(--bone); flex: none; cursor: pointer;
  }
  .svp-mbar-back:hover, .svp-mbar-menu:hover { background: rgba(var(--ov),0.06); }
  .svp-mbar-title { flex: 1; font-size: 0.9375rem; font-weight: 600; color: var(--bone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .svp-mbar-menu { display: none; }
}
@keyframes svpIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* top bar */
.svp-bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--s4);
  padding: 14px var(--s8);
  background: color-mix(in srgb, var(--ink-900) 86%, transparent);
  backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.svp-back {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px 0 10px;
  border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--ink-800);
  color: var(--bone); font-size: 0.9063rem; font-weight: 600; transition: var(--t-fast);
}
.svp-back:hover { border-color: var(--bone-2); transform: translateX(-2px); }
.svp-nav { display: flex; align-items: center; gap: 4px; margin: 0 auto; }
.svp-navbtn {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line-strong); background: var(--ink-800); color: var(--bone); transition: var(--t-fast);
}
.svp-navbtn:hover:not(:disabled) { border-color: var(--bone-2); background: var(--ink-750); }
.svp-navbtn:disabled { opacity: 0.35; cursor: default; }
.svp-navcount { font-family: var(--mono); font-size: 0.8125rem; color: var(--taupe); padding: 0 8px; white-space: nowrap; }
.svp-navcount em { font-style: normal; color: var(--taupe-3); }

/* heart moved up into the hero eyebrow row (was in the top bar, next to the
   now-removed Back button) — override the card-cover absolute positioning
   and push it to the far right of the row instead. */
.svp-hero-save { position: static; width: 44px; height: 44px; margin-left: auto; }

.svp-wrap { max-width: 1320px; margin: 0 auto; padding: var(--s8) var(--s8) 120px; }
.svp-breadcrumb { margin-bottom: var(--s6); }
.breadcrumb .bc-current { color: var(--bone); font-weight: 600; max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* hero */
.svp-hero { margin-bottom: var(--s6); }
.svp-media { width: 100%; height: 260px; border-radius: var(--r-lg); margin-bottom: var(--s6); background-size: cover; background-position: center; border: 1px solid var(--line); }
.svp-media.fallback { display: grid; place-items: center; }
.svp-media-ic { color: rgba(255,255,255,0.8); }
.svp-secnav { position: sticky; top: 0; z-index: 5; display: flex; gap: var(--s6); margin: 0 0 var(--s6); padding: 0; background: none; border-bottom: none; }
.svp-secnav::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: var(--ink-900); border-bottom: 1px solid var(--line); z-index: -1; }
.svp-secnav button { position: relative; font-size: 0.9063rem; font-weight: 600; color: var(--taupe); padding: 14px 2px; min-height: 44px; transition: var(--t-fast); }
.svp-secnav button:hover { color: var(--bone); }
.svp-secnav button::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--sky-deep); transform: scaleX(0); transition: var(--t-fast); }
.svp-secnav button:hover::after { transform: scaleX(1); }
.svp-eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.svp-eyebrow .tag-chip-category { position: static; }
.svp-flag { font-size: 0.875rem; font-weight: 600; color: var(--taupe); }
.svp-title { font-family: var(--serif); font-size: clamp(28px, 3.2vw, 40px); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; color: var(--bone); max-width: 20ch; text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.svp-metarow { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; font-size: 0.9375rem; }
.svp-meta { display: inline-flex; align-items: center; gap: 7px; color: var(--bone-2); }
.svp-meta svg { color: var(--taupe); flex: none; }
.svp-meta svg.on { color: var(--star, #E8A33D); }
.svp-meta.ok { color: var(--green); } .svp-meta.ok svg { color: var(--green); }
.svp-meta.svp-new { color: var(--sky); } .svp-meta.svp-new svg { color: var(--sky); }
.svp-meta b { font-weight: 700; color: var(--bone); }
.svp-meta-btn { border: none; background: none; padding: 0; margin: 0; font: inherit; cursor: pointer; border-radius: var(--r-sm); }
.svp-meta-btn:hover { color: var(--amber-deep); text-decoration: underline; }
.svp-book-rating.svp-meta-btn { display: inline-flex; }
.svp-dot { color: var(--taupe-3); }

.svp-booked, .svp-lock {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: var(--s6);
  padding: 14px 18px; border-radius: var(--r); font-size: 0.9063rem; line-height: 1.45;
}
.svp-booked { background: var(--green-dim); color: var(--green); }
.svp-booked svg { color: var(--green); flex: none; margin-top: 1px; }
.svp-lock { background: var(--amber-dim); color: var(--bone-2); }
.svp-lock svg { color: var(--amber); flex: none; margin-top: 1px; }

/* two-column layout */
.svp-cols { display: grid; grid-template-columns: minmax(0,1fr) 372px; gap: clamp(24px, 3vw, 48px); align-items: start; }
.svp-main { display: flex; flex-direction: column; gap: var(--s8); min-width: 0; }

.svp-h2 { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; color: var(--bone); letter-spacing: -0.01em; }
.svp-sec-head { display: flex; align-items: center; gap: 12px; }
.svp-sec-ic {
  flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: var(--sky-dim); color: var(--sky);
}
.svp-sec-ic.green { background: var(--green-dim); color: var(--green); }
.svp-sec-ic.amber { background: var(--amber-dim); color: var(--amber-deep); }
.svp-sec-ic.orange { background: var(--orange-dim); color: var(--orange-deep); }
.svp-sec-ic.star { background: rgba(232,163,61,0.14); color: var(--star, #E8A33D); }
.svp-blocksub { font-size: 0.875rem; color: var(--taupe); margin-top: 4px; }
.svp-prose { font-size: 1.0313rem; line-height: 1.65; color: var(--bone-2); margin-top: 12px; max-width: 62ch; }
.svp-prose.clamp4 { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.svp-readmore { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; font-size: 0.875rem; font-weight: 700; color: var(--sky-deep); min-height: 44px; }
.svp-structured { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6) var(--s7); margin-top: var(--s6); padding-top: var(--s6); border-top: 1px solid var(--line-faint); }
.svp-struct-h { display: flex; align-items: center; gap: 8px; font-size: 0.9375rem; font-weight: 700; color: var(--bone); margin-bottom: 10px; }
.svp-struct-h svg { color: var(--sky-deep); flex: none; }
.svp-struct-list { display: flex; flex-direction: column; gap: 9px; list-style: none; padding: 0; margin: 0; }
.svp-struct-list li { position: relative; padding-left: 16px; font-size: 0.9063rem; line-height: 1.5; color: var(--bone-2); }
.svp-struct-list li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 5px; height: 5px; border-radius: 50%; background: var(--sky-deep); }
.svp-struct-note { font-size: 0.8125rem; color: var(--taupe); margin-top: 8px; }
.svp-highlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s3); padding: var(--s5) var(--s6); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--ink-800); }
.svp-hi { display: flex; align-items: center; gap: 9px; font-size: 0.875rem; color: var(--bone); font-weight: 500; }
.svp-hi svg { flex: none; color: var(--sky-deep); }
.svp-block {
  display: flex; flex-direction: column; padding: var(--s6);
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--ink-800); box-shadow: var(--shadow-card);
}
.svp-block > .svp-prose:first-child { margin-top: 0; }

/* provider */
.svp-provider {
  display: flex; align-items: center; gap: 16px; padding: var(--s6);
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--ink-800); box-shadow: var(--shadow-card);
}
.svp-pv-av {
  position: relative; flex: none; width: 60px; height: 60px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 1.3125rem;
  background-size: cover; background-position: center;
}
.svp-pv-flag { position: absolute; bottom: -3px; right: -4px; font-size: 1.25rem; line-height: 1; border-radius: 4px; box-shadow: 0 0 0 3px var(--ink-800); }
.svp-pv-body { flex: 1; min-width: 0; }
.svp-pv-name { display: flex; align-items: center; gap: 7px; font-family: var(--serif); font-size: 1.3125rem; font-weight: 600; color: var(--bone); }
.svp-pv-bg { font-size: 0.8438rem; color: var(--taupe); margin-top: 2px; }
.svp-pv-mission { font-family: var(--serif); font-style: italic; font-size: 1rem; color: var(--bone-2); margin-top: 10px; line-height: 1.45; }
.svp-pv-line { font-size: 0.875rem; color: var(--taupe); margin-top: 6px; line-height: 1.5; }
.svp-pv-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.svp-resp { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; font-weight: 600; color: var(--green); background: var(--green-dim); padding: 5px 11px; border-radius: var(--r-pill); }
.svp-resp svg { color: var(--green); }
.svp-langs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.svp-langs-label { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--taupe-3); margin-right: 4px; }

/* includes */
.svp-includes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; margin-top: 16px; }
.svp-includes li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.9375rem; color: var(--bone-2); line-height: 1.4; }
.svp-includes svg { color: var(--green); flex: none; margin-top: 1px; }

/* availability */
.svp-week { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.svp-day {
  min-width: 46px; height: 40px; padding: 0 10px; border-radius: var(--r-sm); display: grid; place-items: center;
  font-size: 0.8125rem; font-weight: 600; color: var(--taupe-3); background: var(--ink-800); border: 1px solid var(--line);
}
.svp-day.on { color: #fff; background: var(--sky); border-color: var(--sky); }
.svp-slots { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.svp-slot { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--r-pill); font-size: 0.8125rem; font-weight: 600; color: var(--bone-2); background: var(--ink-800); border: 1px solid var(--line); }
.svp-slot svg { color: var(--taupe); }
.svp-notice { font-size: 0.8125rem; color: var(--taupe); margin-top: 12px; }
.svp-avail-text { margin-top: 10px; }

/* add-ons */
.svp-optlist { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.svp-opt {
  border-radius: var(--r); border: 1.5px solid var(--line); background: var(--ink-800); transition: var(--t-fast);
  overflow: hidden;
}
.svp-opt:hover { border-color: var(--bone-2); }
.svp-opt.on { border-color: var(--sky); background: var(--sky-dim); }
.svp-opt-main {
  display: flex; align-items: center; gap: 14px; text-align: left; width: 100%;
  padding: 15px 18px; background: none; border: none;
}
.svp-opt-check { flex: none; width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--line-strong); display: grid; place-items: center; color: transparent; transition: var(--t-fast); }
.svp-opt.on .svp-opt-check { background: var(--sky); border-color: var(--sky); color: #fff; }
.svp-opt-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.svp-opt-name { font-size: 0.9375rem; font-weight: 600; color: var(--bone); }
.svp-opt-desc { font-size: 0.875rem; color: var(--taupe); line-height: 1.4; }
.svp-opt-price { font-family: var(--serif); font-size: 1.0625rem; font-weight: 700; color: var(--bone); white-space: nowrap; flex: none; }
.svp-opt-price small { font-family: var(--sans); font-size: 0.8125rem; color: var(--taupe); font-weight: 400; }
.svp-opt-more {
  display: flex; align-items: center; gap: 5px; width: 100%; padding: 0 18px 12px 54px;
  background: none; border: none; font-size: 0.8125rem; font-weight: 600; color: var(--sky); cursor: pointer;
}
.svp-opt-more:hover { color: var(--sky); text-decoration: underline; }
.svp-opt-more-chev { transition: transform var(--t-fast); }
.svp-opt.expanded .svp-opt-more-chev { transform: rotate(180deg); }
.svp-opt-detail {
  padding: 2px 18px 16px 54px; display: flex; flex-direction: column; gap: 8px;
  font-size: 0.8438rem; line-height: 1.5; color: var(--bone-2); border-top: 1px solid var(--line-faint);
}
.svp-opt-detail p { margin: 0; }
.svp-opt-detail p:first-child { padding-top: 12px; }

/* reviews */
.svp-revhead { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.svp-revlist { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.svp-rev { padding: 18px; border-radius: var(--r); border: 1px solid var(--line); background: var(--ink-800); }
.svp-rev.mine { border-color: var(--sky); background: var(--sky-dim); }
.svp-rev-top { display: flex; align-items: center; gap: 11px; }
.svp-rev-av { position: relative; width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 0.875rem; }
.svp-rev-flag { position: absolute; bottom: -2px; right: -3px; font-size: 0.8125rem; }
.svp-rev-id { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.svp-rev-name { display: inline-flex; align-items: center; gap: 7px; font-size: 0.9063rem; font-weight: 600; color: var(--bone); }
.svp-rev-you { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sky); background: var(--sky-dim); padding: 1px 6px; border-radius: 999px; }
.svp-rev-date { font-size: 0.8125rem; color: var(--taupe-3); }
.svp-rev-stars { display: inline-flex; gap: 1px; }
.svp-rev-stars svg.on { color: var(--star, #E8A33D); }
.svp-rev-stars svg.off { color: var(--line-strong); }
.svp-rev-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.svp-rev-tag { font-size: 0.8125rem; font-weight: 500; color: var(--taupe); background: transparent; border: 1px solid var(--line); padding: 0 0.75rem; height: 1.875rem; display: inline-flex; align-items: center; border-radius: var(--r-pill); }
.svp-rev-text { font-size: 0.875rem; line-height: 1.55; color: var(--bone-2); margin-top: 11px; }
.svp-rev-text.clamp3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.svp-revsum { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.875rem 0 0.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line-faint); }

.svp-showall { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: var(--s4); padding: 12px; min-height: 44px; font-size: 0.875rem; font-weight: 700; color: var(--bone); border: 1px solid var(--line-strong); border-radius: var(--r); }
.svp-showall:hover { background: rgba(var(--ov),0.04); }

/* booking rail */
.svp-side { position: sticky; top: 88px; }
.svp-book {
  display: flex; flex-direction: column; gap: 14px; padding: var(--s6);
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--ink-800); box-shadow: var(--shadow-pop);
}
.svp-book-rate { display: flex; align-items: baseline; gap: 6px; }
.svp-book-rate b { font-family: var(--serif); font-size: 2.25rem; font-weight: 700; color: var(--bone); }
.svp-book-unit { font-size: 0.9375rem; color: var(--taupe); }
.svp-book-rating { display: inline-flex; align-items: center; gap: 6px; font-size: 0.875rem; font-weight: 600; color: var(--bone); margin-top: -6px; }
.svp-book-rating svg.on { color: var(--star, #E8A33D); }
.svp-book-rating span { color: var(--taupe); font-weight: 400; }
.svp-book-fact { display: flex; flex-direction: column; gap: 3px; padding: 12px 0; border-top: 1px solid var(--line); }
.svp-book-fk { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone-2); }
.svp-book-fv { font-size: 0.875rem; color: var(--bone); font-weight: 500; }
.svp-weekstrip { display: flex; gap: 5px; margin: 7px 0; }
.svp-wd { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 0.8125rem; font-weight: 700; color: var(--taupe); background: var(--ink-700); }
.svp-wd.on { color: #fff; background: var(--sky-deep); }
.price-tight { letter-spacing: -0.02em; }
.svp-book-adds { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: var(--r); background: rgba(var(--ov),0.04); border: 1px solid var(--line); }
.svp-book-addrow { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; font-size: 0.8438rem; color: var(--bone-2); }
.svp-book-addrow > span:first-child { min-width: 0; }
.svp-book-addrow b { color: var(--bone); font-weight: 600; flex: none; }
.svp-book-addrow.sub { color: var(--taupe); font-size: 0.8125rem; }
.svp-book-addrow.sub span { display: inline-flex; align-items: center; gap: 5px; }
.svp-book-addtotal { display: flex; align-items: center; justify-content: space-between; padding-top: 8px; margin-top: 2px; border-top: 1px solid var(--line); font-size: 0.875rem; font-weight: 600; color: var(--bone); }
.svp-book-addtotal b { font-family: var(--serif); font-size: 1.125rem; }
.svp-book-trust { display: flex; align-items: flex-start; gap: 9px; font-size: 0.8125rem; line-height: 1.45; color: var(--taupe); padding-top: 4px; }
.svp-book-trust svg { color: var(--green); flex: none; margin-top: 1px; }

/* more like this */
.svp-more { margin-top: var(--s12); padding-top: var(--s8); border-top: 1px solid var(--line); }
.svp-morerail { display: flex; gap: 14px; margin-top: 20px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
.svp-morerail::-webkit-scrollbar { display: none; }

/* ── Checkout, presented as a floating card over a dimmed/blurred backdrop
   (the .scrim reused from DetailModal), not an inline page. ── */
.svp-checkout-page {
  width: 100%; max-width: 720px; margin: 0; display: flex; flex-direction: column;
  background-color: var(--ink-800); border: 1px solid var(--line); border-radius: var(--r-xl);
  box-shadow: var(--shadow-pop); max-height: calc(100dvh - 96px); overflow: hidden;
  animation: modalin 260ms var(--ease);
}
.co-topbar { flex: none; padding: var(--s4) var(--s6); border-bottom: 1px solid var(--line-faint); background: var(--grad-card-band); }

/* ── One checkout-scoped primary/brand system: sky blue for every primary
   CTA (Continue to payment · Pay €X · View my booking), green reserved
   only for the confirmation state. ── */
.svp-checkout-page { --co-primary: var(--sky-deep); --co-primary-h: #0d5e9c; --pay-accent: var(--sky-deep); --pay-accent-dim: var(--sky-dim); }
.svp-checkout-page .btn-primary { background: var(--co-primary); color: #fff; box-shadow: 0 12px 26px -14px rgba(20,111,189,0.5); }
.svp-checkout-page .btn-primary:hover { background: var(--co-primary-h); box-shadow: 0 16px 30px -12px rgba(20,111,189,0.55); }
.svp-checkout-page .btn-primary:active { background: var(--co-primary-h); }
[data-theme="dark"] .svp-checkout-page .btn-primary { background: var(--co-primary); color: #fff; box-shadow: none; }
[data-theme="dark"] .svp-checkout-page .btn-primary:hover { background: var(--co-primary-h); }
.co-foot-hint { flex-basis: 100%; margin: 2px 0 0; font-size: 0.8125rem; color: var(--taupe); }
.co-foot-priced { flex-wrap: wrap; }
.co-head { display: flex; flex-direction: column; gap: 6px; }
.co-head .modal-title { margin-bottom: 0; }
.co-head .co-item-title { margin-top: 0; }
.co-head .modal-prose:last-child { margin-top: 2px; }
@media (prefers-reduced-motion: reduce) {
  .svp-checkout-page *, .svp-checkout-page *::before, .svp-checkout-page *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}
.svp-checkout-page input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--ink-800) inset; -webkit-text-fill-color: var(--bone); caret-color: var(--bone); transition: background-color 999999s ease-in-out 0s; }
.svp-checkout-back { align-self: flex-start; background: #FFFFFF; }
.svp-checkout-page .co-hero { padding: var(--s5) var(--s6) 0; flex: none; }
.svp-checkout-page .co-card { flex: 1 1 auto; min-height: 0; border: none; box-shadow: none; border-radius: 0; background: transparent; }

/* ── Single-card checkout, redesigned per feedback: a compact provider
   header sits above one bordered card; the card is sectioned (Your details /
   Choose a day / Choose a time / Message) with dividers instead of floating
   fields; the footer pins price + CTA together, Airbnb-style. ── */
.co-hero { display: flex; align-items: center; gap: 12px; margin-bottom: var(--s2); }
.co-hero-av {
  width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: 0.9375rem; background-size: cover; background-position: center;
}
.co-hero-text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.co-hero-name { font-weight: 700; font-size: 1rem; color: var(--bone); }
.co-hero-sub { display: flex; align-items: center; gap: 5px; font-size: 0.8438rem; color: var(--taupe); }
.co-hero-sub svg.on { color: var(--star); }
.co-hero-dot { color: var(--taupe-3); }

.co-card {
  border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--ink-800);
  box-shadow: var(--shadow-card); overflow: hidden; display: flex; flex-direction: column;
}
.svp-checkout-page .modal-body { padding: var(--s6) var(--s6) var(--s5); overflow-y: auto; gap: var(--s6); -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%); }
.svp-checkout-page .modal-body.at-bottom { -webkit-mask-image: none; mask-image: none; }
.svp-checkout-page .modal-title { font-size: 1.625rem; }
.svp-checkout-page .modal-prose { font-size: 1rem; margin-top: -8px; }

/* progress: a slim labeled bar instead of the generic dot·bar·dot */
.co-progress { display: flex; flex-direction: column; gap: 8px; }
.co-progress-label { font-family: var(--mono); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--taupe-3); }
.co-progress-bar { height: 4px; border-radius: 2px; background: var(--ink-700); overflow: hidden; }
.co-progress-bar span { display: block; height: 100%; background: var(--amber); border-radius: 2px; transition: width 0.3s var(--ease); }
.co-progress-quiet { margin-bottom: var(--s6); }
.co-pay-anchor { display: flex; align-items: center; gap: 14px; padding-bottom: var(--s5); margin-bottom: var(--s6); border-bottom: 1px solid var(--line-soft); }
.co-pay-anchor + .co-progress-quiet { margin-top: -2px; }
.cpa-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cpa-title { font-size: 0.9375rem; font-weight: 600; color: var(--bone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cpa-sub { font-size: 0.8125rem; color: var(--taupe); }
.cpa-total { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.cpa-total-label { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--taupe); }
.cpa-total-num { font-family: var(--serif); font-size: 1.875rem; font-weight: 700; letter-spacing: -0.02em; color: var(--pay-accent, var(--bone)); line-height: 1.1; }
.co-pay-addons { display: flex; flex-wrap: wrap; gap: 8px; margin: -8px 0 var(--s5); }
.cpa-addon { display: inline-flex; align-items: center; gap: 5px; font-size: 0.8125rem; color: var(--taupe); background: rgba(var(--ov),0.03); border-radius: var(--r-pill); padding: 4px 10px; }
.cpa-addon b { color: var(--bone-2); font-weight: 600; }
.co-pay-section { display: flex; flex-direction: column; gap: 14px; }
.co-pay-trust { display: flex; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--taupe); margin-top: 2px; }
.co-pay-trust svg { flex: none; color: var(--taupe-3); }
body.co-density-compact .co-pay-section { gap: 8px; }
body.co-density-compact .co-pay-row { padding: 9px 12px; }
body.co-density-compact .co-pay-anchor { padding-bottom: var(--s3); margin-bottom: var(--s3); }
body.co-density-compact .co-card-form { gap: 7px; padding: 11px 13px; }

/* sections, replacing the run of floating fields with named, divided groups */
.co-section { padding-top: var(--s5); border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: var(--s3); }
.co-section:first-of-type { padding-top: 0; border-top: none; }
.co-section-card { border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s5); background: var(--ink-900); box-shadow: 0 1px 2px rgba(20,16,10,0.04), 0 8px 24px -12px rgba(20,16,10,0.10); }
.co-section-card.co-section:first-of-type { border-top: 1px solid var(--line); }
.co-section-card-pay { margin-top: 4px; }
.cor-line { display: inline-flex; align-items: center; gap: 8px; }
.cor-ic { color: var(--taupe); flex: none; }
.co-foot-pay { flex-direction: column; align-items: stretch; gap: 10px; }
.co-foot-pay-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.co-foot-pay-top .co-foot-total { display: inline-flex; align-items: baseline; gap: 6px; font-size: 0.875rem; color: var(--taupe); margin-left: 0; }
.co-foot-pay-top .co-foot-total b { color: var(--bone); font-size: 1.0625rem; }
.co-foot-secure { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--taupe); white-space: nowrap; }
.co-foot-secure svg { color: var(--green); flex: none; }
.co-section-title { font-size: 0.9375rem; font-weight: 700; color: var(--bone); display: flex; align-items: center; gap: 8px; }
.co-section-optional { font-size: 0.8125rem; font-weight: 500; color: var(--taupe-3); text-transform: none; letter-spacing: normal; }
.co-section .co-fields { grid-template-columns: 1fr 1fr; gap: var(--s3); }
.co-section .form-label { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; margin-bottom: 9px; text-transform: none; }
.co-section .input, .co-section .textarea, .co-section .select { border-radius: var(--r-lg); font-size: 1rem; }
.co-section .input { height: 54px; }
.co-section .input:focus, .co-section .textarea:focus, .co-section .select:focus {
  border-color: var(--amber-deep); box-shadow: 0 0 0 3px var(--amber-dim);
}
.co-avail-head { margin-top: -4px; }

/* date cards: vertical, roomy, with a check badge in the selected state */
.co-date { position: relative; width: 68px; height: 76px; padding: 10px 4px; }
.cod-check {
  position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--bone); color: #FAFAF8; display: grid; place-items: center; box-shadow: var(--shadow-sm);
}
.co-date.on .cod-check { background: var(--sky-deep); color: #fff; border: 2px solid var(--ink-900); box-shadow: 0 1px 4px rgba(0,0,0,0.35); }
.co-date.on { box-shadow: 0 0 0 2px var(--ink-900), 0 0 0 4px var(--sky-deep); }

/* footer: total pinned next to the CTA, always visible at the bottom of the card */
.co-foot-priced { justify-content: space-between; }
.co-foot-price { display: flex; flex-direction: column; line-height: 1.2; }
.co-foot-price span { font-size: 0.8125rem; color: var(--taupe); text-transform: uppercase; letter-spacing: 0.04em; }
.co-foot-price b { font-family: var(--serif); font-size: 1.375rem; color: var(--sky-deep); }
.svp-checkout-page .modal-foot { padding: var(--s5) var(--s6); border-top: 1px solid var(--line); background: var(--ink-850); flex: none; }
.svp-checkout-page .modal-foot .btn-primary { min-width: 200px; }

.svp-checkout-page .co-avail { border-radius: var(--r-lg); padding: var(--s5); background: rgba(var(--ov),0.02); border-color: var(--line); box-shadow: none; }
.svp-checkout-page .co-tickets { border-radius: var(--r-lg); padding: var(--s5); box-shadow: none; background: rgba(var(--ov),0.02); }
.svp-checkout-page .co-trust { border-radius: var(--r-lg); padding: 14px 16px; font-size: 0.8438rem; margin-top: 0; }
.svp-checkout-page .co-date, .svp-checkout-page .slot-chip { transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast), background var(--t-fast); }
.svp-checkout-page .co-date:hover:not(.full), .svp-checkout-page .slot-chip:hover:not(.full) { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
@media (max-width: 640px) {
  .svp-checkout-page .modal-body { padding: var(--s5) var(--s5) var(--s4); }
  .svp-checkout-page .modal-foot { padding: var(--s4) var(--s5); flex-wrap: wrap; }
  .svp-checkout-page .modal-foot .btn-primary { flex: 1 1 100%; }
}

.svp-morecard {
  flex: none; width: 216px; text-align: left; display: flex; flex-direction: column; gap: 10px;
  padding: 14px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--ink-800); box-shadow: var(--shadow-sm); transition: var(--t-fast);
}
.svp-morecard:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: var(--shadow-card); }
.svp-more-av { position: relative; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 0.9375rem; background-size: cover; background-position: center; }
.svp-more-flag { position: absolute; bottom: -2px; right: -3px; font-size: 0.8125rem; }
.svp-more-title { font-family: var(--serif); font-size: 0.9688rem; font-weight: 600; color: var(--bone); line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.svp-more-meta { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8125rem; color: var(--bone-2); font-weight: 600; }
.svp-more-meta small { color: var(--taupe); font-weight: 400; }
.svp-more-rate { display: inline-flex; align-items: center; gap: 3px; color: var(--taupe); }
.svp-more-rate svg.on { color: var(--star, #E8A33D); }

/* mobile bottom bar (desktop hidden) */
.svp-mobilebar { display: none; }

@media (max-width: 900px) {
  .svp-cols { grid-template-columns: 1fr; }
  .svp-side { position: static; }
  .svp-book { box-shadow: var(--shadow-card); }
  .svp-revlist { grid-template-columns: 1fr; }
  .svp-includes { grid-template-columns: 1fr; }
  .svp-wrap { padding-left: var(--s6); padding-right: var(--s6); }
}
@media (max-width: 640px) {
  .svp-wrap { padding-bottom: 96px; }
  .svp-nav { margin: 0; order: 3; }
  .svp-navcount { display: none; }
  /* hide the desktop booking CTA/message inside the rail on small screens;
     the sticky bottom bar takes over */
  .svp-book .btn-block { display: none; }
  .svp-book-trust { display: none; }
  .svp-mobilebar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 210;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--ink-900) 92%, transparent);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
  }
  .svp-mb-price { display: flex; align-items: baseline; gap: 5px; }
  .svp-mb-price b { font-family: var(--serif); font-size: 1.375rem; font-weight: 700; color: var(--bone); }
  .svp-mb-price span { font-size: 0.8125rem; color: var(--taupe); }
  .svp-mb-actions { display: flex; align-items: center; gap: 8px; }
  .svp-mb-msg { width: 44px; padding: 0; justify-content: center; }
  /* the sticky Book & pay bar (z-index 210) was sitting on top of the
     back-to-top FAB (60) and covering its bottom-right corner entirely */
  .svcpage .fab-top { z-index: 220; bottom: calc(84px + env(safe-area-inset-bottom)); }

  /* tighter rhythm end-to-end, a long stack of 32px section gaps read as
     "empty" on a small screen; bring every layer down a notch */
  .svp-bar { padding: 10px var(--s4); gap: var(--s3); }
  .svp-back { height: 36px; padding: 0 14px 0 9px; font-size: 0.875rem; }
  .svp-wrap { padding: var(--s5) var(--s4) 96px; }
  .svp-breadcrumb { margin-bottom: var(--s4); }
  .svp-breadcrumb .bc-current { max-width: 22ch; }
  .svp-hero { margin-bottom: var(--s5); }
  .svp-eyebrow { gap: 8px; margin-bottom: 10px; }
  .svp-title { font-size: 1.625rem; }
  .svp-media { height: 160px; margin-bottom: var(--s4); }
  .svp-secnav { overflow-x: auto; -webkit-overflow-scrolling: touch; top: 52px; z-index: 6; background: var(--ink-900); }
  .svp-highlights { grid-template-columns: 1fr 1fr; padding: var(--s4); }
  .svp-structured { grid-template-columns: 1fr; gap: var(--s5); }
  .svp-metarow { gap: 8px; margin-top: 10px; font-size: 0.8438rem; }
  .svp-booked, .svp-lock { margin-bottom: var(--s4); padding: 12px 14px; font-size: 0.8438rem; }
  .svp-cols { gap: var(--s6); }
  .svp-main { gap: var(--s6); }
  .svp-provider { padding: var(--s4); gap: 14px; flex-direction: column; }
  .svp-block { padding: var(--s4); }
  .svp-pv-av { width: 56px; height: 56px; font-size: 1.1875rem; }
  .svp-pv-flag { font-size: 0.9375rem; }
  .svp-pv-body { width: 100%; }
  .svp-pv-name { font-size: 1.125rem; }
  .svp-pv-mission { font-size: 0.9375rem; margin-top: 10px; }
  .svp-pv-foot { gap: 8px; margin-top: 8px; }
  .trust-row { gap: 8px; }
  .trust-chip { font-size: 0.8125rem; padding: 6px 11px 6px 9px; }
  .pv-resp { margin-left: 0; }
  .svp-langs { margin-top: 8px; }
  .svp-h2 { font-size: 1.1875rem; }
  .svp-sec-ic { width: 30px; height: 30px; border-radius: 8px; }
  .svp-blocksub { margin-top: 2px; }
  .svp-prose { font-size: 0.9375rem; margin-top: 8px; }
  .svp-includes { gap: 10px 18px; margin-top: 10px; }
  .svp-week { gap: 6px; margin-top: 10px; }
  .svp-slots { margin-top: 10px; }
  .svp-book { padding: var(--s4); gap: 10px; }
}

/* ── Event detail, orange theme + event-specific blocks ──── */
.evtpage .svp-eyebrow .cat-badge { --cat: var(--orange); }
.evtpage .svp-meta.accent { color: var(--orange-deep); }
.evtpage .svp-meta.accent svg { color: var(--orange); }
.evtpage .svp-book-rating { color: var(--bone); }
.evtpage .svp-book-rating svg { color: var(--orange); }
.evtpage .svp-book-trust svg { color: var(--orange); }
.svp-booked.evt { background: var(--orange-dim); color: var(--orange-deep); }
.svp-booked.evt svg { color: var(--orange); }
.svp-resp.evt { color: var(--orange-deep); background: var(--orange-dim); }
.svp-resp.evt svg { color: var(--orange); }

.evp-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 16px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.evp-fact { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; background: var(--ink-800); }
.evp-fk { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--taupe-3); }
.evp-fv { font-size: 0.9375rem; font-weight: 500; color: var(--bone); line-height: 1.35; }

.evp-attend { display: flex; align-items: center; gap: 16px; margin-top: 16px; padding: 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--ink-800); }
.evp-avs { display: flex; flex: none; }
.evp-av { width: 40px; height: 40px; border-radius: 50%; border: 2.5px solid var(--ink-800); margin-left: -12px; }
.evp-av:first-child { margin-left: 0; }
.evp-attend-line { font-size: 0.9375rem; color: var(--bone-2); line-height: 1.5; }
.evp-attend-line b { color: var(--bone); font-weight: 600; }

.evp-morechip {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 12px; background: var(--orange-dim); border: 1px solid var(--line); line-height: 1;
}
.evp-morechip b { font-family: var(--serif); font-size: 1.125rem; font-weight: 700; color: var(--orange-deep); }
.evp-morechip span { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--taupe); margin-top: 1px; }
.evtpage .svp-more-rate svg { color: var(--taupe); }

@media (max-width: 900px) {
  .evp-facts { grid-template-columns: 1fr; }
}

/* ============================================================
   HOMEPAGE SECTIONS, shared by signed-in and guest homepages
   (Curated providers → Why Belinkd → Search → Provider CTA)
   ============================================================ */
.mkt-section { padding: 96px var(--s8) 0; max-width: 1140px; margin: 0 auto; }
.mkt-section.tight { padding-top: 0; }
.mkt-eyebrow {
  display: inline-flex; align-items: center; gap: 7px; justify-content: center; width: 100%;
  font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sky-deep); font-weight: 600; margin-bottom: 16px;
}
.mkt-eyebrow svg { color: var(--sky); flex: none; }
.mkt-h2 { font-family: var(--serif); font-size: clamp(32px,4vw,54px); font-weight: 700; letter-spacing: -0.025em; text-align: center; color: var(--bone); line-height: 1.08; text-wrap: pretty; }
.mkt-h2.left { text-align: left; margin-left: 0; }
.mkt-h2 em { font-style: italic; color: var(--sky); }

/* ── How it works, flat columns with numbered badges + divider rules ── */
.mkt-steps { position: relative; display: grid; grid-template-columns: repeat(3,1fr); gap: 0; margin-top: 56px; }
.mkt-step {
  position: relative; text-align: center; padding: 0 22px;
}
.mkt-step:not(:last-child)::after {
  content: ""; position: absolute; top: 8px; bottom: 8px; right: 0; width: 1px; background: var(--line);
}
.mkt-step-ic-wrap { position: relative; width: 68px; height: 68px; margin: 0 auto 20px; }
.mkt-step-num {
  position: absolute; top: -8px; left: -8px; z-index: 2; width: 26px; height: 26px; border-radius: 50%;
  background: var(--sky); color: #fff; font-family: var(--sans); font-size: 0.8125rem; font-weight: 700;
  display: grid; place-items: center; box-shadow: 0 4px 10px -3px rgba(26,143,227,0.6);
}
.mkt-step-ic {
  position: relative; z-index: 1; width: 100%; height: 100%; border-radius: 18px; display: grid; place-items: center;
  box-shadow: 0 8px 20px -12px rgba(26,143,227,0.45);
}
.mkt-step-ic.tone-sky { background: var(--sky-dim); color: var(--sky-deep); }
.mkt-step-ic.tone-orange { background: var(--orange-dim); color: var(--orange-deep); box-shadow: 0 8px 20px -12px rgba(246,130,31,0.45); }
.mkt-step h3 { position: relative; z-index: 1; font-size: 1.125rem; font-weight: 700; color: var(--bone); margin-bottom: 9px; letter-spacing: -0.005em; }
.mkt-step p { position: relative; z-index: 1; font-size: 0.9063rem; line-height: 1.62; color: var(--taupe); max-width: 29ch; margin: 0 auto; }

/* ── Testimonial, full-bleed cream band, decorative rings + quote mark ── */
.mkt-band { background: var(--ink-850); margin-top: 96px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mkt-testi { position: relative; max-width: 740px; margin: 0 auto; text-align: center; padding: 88px 0; }
.mkt-testi-rings { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.mtr { position: absolute; border-radius: 50%; border: 2px solid; opacity: 0.14; }
.mtr-sky { width: 220px; height: 220px; top: -60px; left: -70px; border-color: var(--sky); }
.mtr-orange { width: 160px; height: 160px; bottom: -50px; right: -50px; border-color: var(--orange); }
.mkt-testi-mark { position: relative; z-index: 1; font-family: var(--serif); font-size: 4.25rem; font-weight: 800; color: var(--sky); opacity: 0.4; line-height: 1; margin-bottom: 2px; }
.mkt-testi-stars { position: relative; z-index: 1; display: flex; justify-content: center; gap: 3px; color: var(--orange); margin-bottom: 18px; }
.mkt-testi-quote { position: relative; z-index: 1; font-family: var(--sans); font-size: clamp(21px,2.5vw,28px); font-weight: 700; line-height: 1.44; color: var(--bone); letter-spacing: -0.01em; text-wrap: pretty; }
.mkt-brand-be { color: var(--sky); }
.mkt-brand-linkd { color: var(--orange); }
.mkt-testi-who { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 12px; margin-top: 30px; }
.mkt-testi-av {
  width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--sky), var(--orange)); color: #fff; font-family: var(--serif); font-weight: 700; font-size: 0.9375rem;
}
.mkt-testi-who-text { display: flex; flex-direction: column; text-align: left; line-height: 1.3; }
.mkt-testi-name { font-size: 0.875rem; font-weight: 700; color: var(--bone); }
.mkt-testi-sub { font-family: var(--mono); font-size: 0.875rem; color: var(--taupe); }

/* ── Community showcase, split, reuses the hero's collage component ── */
.mkt-comm { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.mkt-comm h2 { font-family: var(--serif); font-size: clamp(28px,3.4vw,40px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; color: var(--bone); }
.mkt-comm h2 em { font-style: italic; color: var(--sky); display: block; }
.mkt-comm p { font-size: 0.9375rem; line-height: 1.6; color: var(--taupe); margin-top: 16px; max-width: 46ch; }
.mkt-flags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.mkt-flag {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 15px; border-radius: var(--r-pill);
  background: var(--ink-800); border: 1px solid var(--line-strong); font-size: 0.8125rem; font-weight: 600; color: var(--bone-2);
  box-shadow: var(--shadow-sm); transition: 0.15s ease;
}
.mkt-flag:hover { border-color: var(--sky); color: var(--bone); transform: translateY(-1px); }
.mkt-flag.more { color: var(--taupe); font-weight: 500; box-shadow: none; background: none; border-style: dashed; }
.mkt-comm-cta { margin-top: 30px; }
.mkt-comm-cta .mkt-cta-btn svg { margin-left: 2px; transition: transform 0.15s ease; }
.mkt-comm-cta .mkt-cta-btn:hover svg { transform: translateX(3px); }
.mkt-comm-collage { position: relative; padding: 24px 0; }

/* ── Closing CTA, full-bleed tinted band with decorative rings ── */
.mkt-cta { position: relative; margin-top: 96px; overflow: hidden; background: linear-gradient(180deg, rgba(26,143,227,0.07), rgba(246,130,31,0.05)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mkt-cta-rings { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.mcr { position: absolute; border-radius: 50%; border: 2px solid; opacity: 0.12; }
.mcr-sky { width: 320px; height: 320px; top: -120px; left: -100px; border-color: var(--sky); }
.mcr-orange { width: 260px; height: 260px; bottom: -110px; right: -90px; border-color: var(--orange); }
.mkt-cta-inner { position: relative; z-index: 1; padding-top: 84px; padding-bottom: 96px; text-align: center; }
.mkt-cta-inner .mkt-h2 { font-size: clamp(32px,4vw,50px); margin-top: 4px; }
.mkt-cta-sub { text-align: center; font-size: 1rem; color: var(--taupe); max-width: 52ch; margin: 18px auto 0; line-height: 1.55; }
.mkt-cta-row { display: flex; justify-content: center; gap: 14px; margin-top: 32px; flex-wrap: wrap; }
.mkt-cta-btn { height: 54px; padding: 0 30px; border-radius: var(--r); font-size: 0.9688rem; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.mkt-cta-trust { display: flex; justify-content: center; gap: 30px; margin-top: 34px; flex-wrap: wrap; }
.mkt-cta-trust span { display: inline-flex; align-items: center; gap: 7px; font-size: 0.8125rem; font-weight: 600; color: var(--taupe); }
.mkt-cta-trust svg { color: var(--sky); flex: none; }
.mkt-cta-inner .trust-signals { justify-content: center; margin-top: 34px; }

/* ── Provider Application ─────────────────────────────────── */
.ap-page { max-width: 760px; margin: 0 auto; padding: var(--s10) var(--s6) var(--s20); }
.ap-loading, .ap-gate, .ap-status { text-align: center; padding: var(--s20) var(--s6); color: var(--taupe); }
.ap-gate svg, .ap-status svg { color: var(--sky); margin-bottom: var(--s3); }
.ap-gate h1, .ap-status h1 { font-family: var(--serif); font-size: 1.75rem; color: var(--bone); margin: 0 0 8px; }
.ap-status .btn { margin-top: var(--s5); }
.ap-head { margin-bottom: var(--s8); }
.ap-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sky); margin-bottom: 10px; }
.ap-head h1 { font-family: var(--serif); font-size: 2rem; letter-spacing: -0.01em; color: var(--bone); margin: 0 0 10px; }
.ap-lede { font-size: 1.0625rem; color: var(--taupe); max-width: 60ch; line-height: 1.55; }
.ap-notice { display: flex; align-items: center; gap: 8px; margin-top: var(--s4); padding: 12px 16px; border-radius: var(--r); background: var(--amber-dim, rgba(214,158,46,0.12)); color: var(--amber-deep, #b8841f); font-size: 0.875rem; font-weight: 600; }
.ap-section { border: 1px solid var(--line); border-radius: var(--r-xl); background: #fff; padding: var(--s7) var(--s7); margin-bottom: var(--s6); }
.ap-section h2 { font-family: var(--serif); font-size: 1.25rem; color: var(--bone); margin: 0 0 var(--s4); }
.ap-hint { font-size: 0.8438rem; color: var(--taupe); margin: -6px 0 var(--s3); }
.ap-textarea { min-height: 110px; padding: 12px 14px; resize: vertical; font-family: var(--sans); }
.ap-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ap-chips.col { flex-direction: column; align-items: flex-start; }
.ap-chip { padding: 9px 16px; border: 1px solid var(--line); border-radius: var(--r-pill); background: #fff; color: var(--taupe); font-size: 0.875rem; font-weight: 600; transition: var(--t-fast); text-align: left; }
.ap-chip:hover { border-color: var(--sky); color: var(--bone); }
.ap-chip.on { background: var(--sky); border-color: var(--sky); color: #fff; }
.ap-upload { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 20px; border: 1.5px dashed var(--line); border-radius: var(--r-lg); color: var(--taupe); cursor: pointer; text-align: center; transition: var(--t-fast); }
.ap-upload:hover, .ap-upload.drag { border-color: var(--sky); background: rgba(26,143,227,0.04); }
.ap-upload.has-file { border-style: solid; border-color: var(--green); color: var(--green); }
.ap-upload b { color: var(--bone); font-size: 0.9375rem; }
.ap-upload span { font-size: 0.8125rem; }
.ap-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 0.875rem; color: var(--taupe); cursor: pointer; }
.ap-consent input { margin-top: 3px; flex-shrink: 0; }
.ap-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: var(--s6); }
@media (max-width: 640px) {
  .ap-actions { flex-direction: column-reverse; }
  .ap-actions .btn { width: 100%; justify-content: center; }
}

/* ── Provider Application: invitation intro ─────────────────── */
.apw-intro { max-width: 620px; margin: 0 auto; text-align: center; padding-top: var(--s6); }
.apw-intro .ap-eyebrow { justify-content: center; }
.apw-intro h1 { font-family: var(--serif); font-size: clamp(1.75rem, 3.6vw, 2.375rem); letter-spacing: -0.015em; color: var(--bone); margin: var(--s3) 0 var(--s4); line-height: 1.18; }
.apw-intro .ap-lede { margin: 0 auto var(--s5); }
.apw-intro-note { display: flex; align-items: center; gap: 8px; text-align: left; margin: 0 auto var(--s6); padding: 12px 16px; border-radius: var(--r); background: rgba(26,143,227,0.06); color: var(--sky); font-size: 0.875rem; max-width: 48ch; }
.apw-intro-steps { display: flex; flex-direction: column; gap: 10px; text-align: left; max-width: 380px; margin: 0 auto var(--s5); }
.apw-intro-steps li { display: flex; align-items: center; gap: 12px; font-size: 0.9375rem; color: var(--bone); font-weight: 600; }
.apw-intro-steps li span { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--paper-2, #f4f1ea); color: var(--taupe); font-size: 0.8125rem; font-weight: 700; flex-shrink: 0; }
.apw-intro-time { font-size: 0.8125rem; color: var(--taupe); margin-bottom: var(--s6); }

/* ── Provider Application: step rail ────────────────────────── */
.apw-rail { display: flex; align-items: center; gap: 0; list-style: none; margin: 0 0 var(--s7); padding: 0; }
.apw-rail-item { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; position: relative; }
.apw-rail-item:not(:last-child)::after { content: ""; flex: 1; height: 1px; background: var(--line); margin: 0 8px; }
.apw-rail-num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; font-size: 0.8125rem; font-weight: 700; flex-shrink: 0; background: var(--paper-2, #f4f1ea); color: var(--taupe); border: 1px solid var(--line); }
.apw-rail-item.now .apw-rail-num { background: var(--sky); border-color: var(--sky); color: #fff; }
.apw-rail-item.done .apw-rail-num { background: var(--green, #2f8a5b); border-color: var(--green, #2f8a5b); color: #fff; }
.apw-rail-label { font-size: 0.8125rem; font-weight: 600; color: var(--taupe); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apw-rail-item.now .apw-rail-label { color: var(--bone); }
@media (max-width: 640px) {
  .apw-rail-label { display: none; }
  .apw-rail-item.now .apw-rail-label { display: inline; }
}

.apw-panel-head { margin-bottom: var(--s6); }
.apw-emotion { display: block; font-size: 0.875rem; color: var(--sky); font-style: italic; margin-bottom: 6px; }
.apw-panel-head h1 { font-family: var(--serif); font-size: 1.625rem; color: var(--bone); margin: 0; letter-spacing: -0.01em; }
.apw-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: var(--s6); }
@media (max-width: 640px) {
  .apw-actions { flex-direction: column-reverse; }
  .apw-actions .btn { width: 100%; justify-content: center; }
}

/* ── Provider Application: review step ──────────────────────── */
.apw-review { display: flex; flex-direction: column; gap: 0; }
.apw-review-row { display: flex; justify-content: space-between; gap: var(--s5); padding: 12px 0; border-bottom: 1px solid var(--line); }
.apw-review-row:last-child { border-bottom: none; }
.apw-review-label { font-size: 0.8125rem; color: var(--taupe); font-weight: 600; flex-shrink: 0; width: 140px; }
.apw-review-value { font-size: 0.9375rem; color: var(--bone); text-align: right; max-width: 60%; }
.apw-review-value em { color: var(--taupe); font-style: italic; }
@media (max-width: 640px) {
  .apw-review-row { flex-direction: column; gap: 4px; }
  .apw-review-label { width: auto; }
  .apw-review-value { text-align: left; max-width: 100%; }
}

.hero-scroll-cue { position: fixed !important; left: 50%; bottom: var(--s5); transform: translateX(-50%); display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-card); color: var(--taupe); opacity: 0.9; animation: hero-scroll-bob 2.2s ease-in-out infinite; cursor: pointer; border: none; z-index: 5; }
.hero-scroll-cue:hover { color: var(--bone); opacity: 1; }
@keyframes hero-scroll-bob { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(6px); } }


/* ── Become a Provider (apply.jsx): identity verification flow ── */
.apw2-page { max-width: 560px; }
.apw2-progress { height: 4px; border-radius: 2px; background: var(--line); margin-bottom: var(--s7); overflow: hidden; }
.apw2-progress span { display: block; height: 100%; background: var(--sky); border-radius: 2px; transition: width 0.25s ease; }
.apw2-link-btn { display: block; background: none; border: none; padding: 0; margin: 0 0 var(--s5); font-size: 0.875rem; color: var(--taupe); text-align: left; }
.apw2-link-btn span { color: var(--sky); font-weight: 600; }
.apw2-verified-note { display: inline-flex; align-items: center; gap: 7px; margin-top: var(--s4); font-size: 0.875rem; font-weight: 600; color: var(--green, #2f8a5b); }

/* Phone field row: fixed country-code box + number input */
.phone-row { display: flex; gap: 10px; }
.phone-prefix { flex: none; width: 92px; display: flex; align-items: center; gap: 6px; justify-content: center; }
.phone-number { flex: 1; }

/* OTP: separate digit boxes, auto-advance handled in JS */
.otp-row { display: flex; gap: 10px; }
.otp-box { width: 48px; height: 56px; text-align: center; font-size: 1.375rem; font-weight: 700; border: 1px solid var(--line); border-radius: var(--r); background: #fff; color: var(--bone); }
.otp-box:focus { outline: none; border-color: var(--sky); box-shadow: 0 0 0 3px rgba(26,143,227,0.15); }

/* Activation checklist (post-submit) */
.apw2-checklist-card { border: 1px solid var(--line); border-radius: var(--r-xl); background: #fff; overflow: hidden; }
.apw2-checklist-head { text-align: center; padding: var(--s8) var(--s6) var(--s7); background: linear-gradient(160deg, rgba(26,143,227,0.08), rgba(246,130,31,0.06)); }
.apw2-ring { display: inline-flex; align-items: center; justify-content: center; width: 68px; height: 68px; border-radius: 50%; margin-bottom: var(--s4); background: conic-gradient(var(--sky) calc(var(--pct) * 1%), var(--line) 0); }
.apw2-ring b { display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; background: #fff; font-size: 0.9375rem; font-weight: 700; color: var(--bone); }
.apw2-checklist-head h1 { font-family: var(--serif); font-size: 1.5rem; color: var(--bone); margin: 0 0 6px; }
.apw2-checklist-head p { font-size: 0.9375rem; color: var(--taupe); margin: 0; }
.apw2-checklist-body { display: flex; flex-direction: column; }
.apw2-checklist-row { display: flex; align-items: center; gap: var(--s4); padding: var(--s6) var(--s6); border-top: 1px solid var(--line); text-align: left; transition: var(--t-fast); }
.apw2-checklist-row:hover { background: rgba(26,143,227,0.03); }
.apw2-check { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line-strong); color: transparent; }
.apw2-check.done { background: var(--green, #2f8a5b); border-color: var(--green, #2f8a5b); color: #fff; }
.state-pending .apw2-check { border-color: var(--orange); }
.apw2-checklist-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.apw2-checklist-label { font-size: 0.9688rem; font-weight: 700; color: var(--bone); }
.apw2-checklist-time { margin-left: 8px; font-size: 0.8125rem; font-weight: 600; color: var(--taupe-3); }
.apw2-checklist-sub { font-size: 0.8125rem; color: var(--taupe); }
.state-pending .apw2-checklist-sub { color: var(--orange-deep); font-style: italic; }
.apw2-checklist-arrow { flex: none; color: var(--taupe-3); }
.apw2-modal { max-width: 480px; padding: var(--s7); }
.apw2-modal .ap-section { border: none; padding: 0; margin: 0; }
.apw2-modal .ap-section h2 { font-family: var(--serif); font-size: 1.25rem; color: var(--bone); margin: 0 0 var(--s2); }

@media (max-width: 860px) {
  .mkt-steps { grid-template-columns: 1fr; gap: 20px; }
  .mkt-step:not(:last-child)::after { display: none; }
  .mkt-comm { grid-template-columns: 1fr; gap: 40px; }
  .mkt-section { padding-top: 68px; }
}
@media (max-width: 560px) {
  .mkt-steps { grid-template-columns: 1fr; gap: 32px 16px; margin-top: 36px; }
  .mkt-step { padding: 0 8px; }
  .mkt-step-ic-wrap { width: 54px; height: 54px; margin-bottom: 14px; }
  .mkt-step-num { width: 22px; height: 22px; font-size: 0.8125rem; top: -6px; left: -6px; }
  .mkt-step h3 { font-size: 0.9375rem; margin-bottom: 5px; }
  .mkt-step p { font-size: 0.8125rem; line-height: 1.45; max-width: 22ch; }
  .mkt-band { margin-top: 68px; }
  .mkt-testi { padding: 64px 0; }
  .mkt-cta { margin-top: 68px; }
  .mkt-cta-inner { padding-top: 60px; padding-bottom: 72px; }
}

/* ============================================================
   HOMEPAGE, footer
   ============================================================ */

/* ── Real multi-column footer ── */
.site-footer { padding: var(--s10) var(--s8) var(--s8); }
.site-footer-cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--s8); padding-bottom: var(--s8); border-bottom: 1px solid var(--line); }
.site-footer-brand-col .brand { margin-bottom: 10px; }
.site-footer-brand-col .site-footer-tag { max-width: 32ch; line-height: 1.5; font-size: 0.875rem; margin: 0; }
.site-footer-col { display: flex; flex-direction: column; gap: 10px; }
.sfc-head { font-family: var(--mono); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--taupe-3); margin-bottom: 4px; }
.site-footer-col a { font-size: 0.875rem; color: var(--bone-2); font-weight: 500; cursor: pointer; width: fit-content; }
.site-footer-col a:hover { color: var(--sky-deep); }
.site-footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s3); padding-top: var(--s6); font-size: 0.8125rem; }
.site-footer-meta { display: flex; align-items: center; gap: var(--s4); }
.site-footer-signout, .site-footer-signin { font-size: 0.8125rem; }

@media (max-width: 760px) {
  .site-footer-cols { grid-template-columns: 1fr; gap: var(--s6); }
}

/* ============================================================
   HOMEPAGE, ART-DIRECTION PASS — premium hero, social proof, bento
   journey, immersive how-it-works, dark brand moment, power search,
   editorial provider split, premium footer.
   ============================================================ */

.mkt-eyebrow.left { justify-content: flex-start; width: auto; }
.mkt-cta-sub.left { text-align: left; margin-left: 0; }

/* ── Nav: transparent-over-hero, solid once scrolled ── */
.topbar { transition: background-color 220ms ease, backdrop-filter 220ms ease, border-color 220ms ease, box-shadow 220ms ease; }
.topbar-transparent { background-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; }
.topbar-transparent .topnav a { color: var(--bone-2); }
.topbar-transparent .topnav a:hover { color: var(--bone); background-color: rgba(255,255,255,0.5); }

/* ── Premium footer, no distinct surface — just blends into the page ── */
.site-footer { background: transparent; border-top: none; }
.site-footer-cols { grid-template-columns: 1.6fr 1fr 1fr 1fr; border-bottom-color: var(--footer-line); }
.site-footer-brand-col .brand-word { color: var(--footer-text-strong); }
.site-footer-brand-col .brand-word em { color: var(--orange); }
.site-footer-tag { color: var(--footer-text); font-size: 0.9375rem; line-height: 1.5; max-width: 30ch; margin: 10px 0 0; }
.sfc-head { color: var(--taupe-3); }
.site-footer-col a { color: var(--footer-text); }
.site-footer-col a:hover { color: var(--sky-deep); }
.sfc-static { font-size: 0.8438rem; color: var(--taupe-3); line-height: 1.5; }
.site-footer-bottom { border-top: none; padding-top: var(--s6); }
.site-footer-loc, .site-footer-proto { color: var(--taupe-3); }
.site-footer-signout { color: var(--taupe) !important; }
.site-footer-signin { color: var(--sky-deep) !important; }

@media (max-width: 980px) {
  .site-footer-cols { grid-template-columns: 1fr 1fr; gap: var(--s6) var(--s5); }
  .site-footer-brand-col { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .site-footer-cols { grid-template-columns: 1fr; }
  .site-footer-brand-col { grid-column: auto; }
}

/* ── Rail card: a bordered white card with a soft-fading accent bar inset
   from its left edge, rounded via the fade itself rather than literal
   corner radii — shared visual language between the Dresden availability
   card and the provider CTA band, tone set per-instance via --rail-color. ── */
.rail-card { position: relative; }
.rail-card::before {
  content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 4px; border-radius: 4px;
  background: linear-gradient(to bottom, transparent 0%, var(--rail-color, var(--sky)) 16%, var(--rail-color, var(--sky)) 84%, transparent 100%);
}

/* ── Provider CTA card: mirrors the Dresden card's rail language, orange
   toned, the only saturated color in an otherwise quiet band. ── */
.provider-compact { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 1px 2px rgba(23,23,23,0.04); padding: var(--s7) var(--s8) var(--s7) calc(var(--s8) + 10px); }
/* Orange stays the only saturated color in this band, mirroring the
   Dresden card's blue accent, so it reads as the one thing to act on. */
.provider-compact .btn-primary { background-color: var(--orange); color: #fff; box-shadow: 0 10px 22px -12px rgba(246,130,31,0.55); }
.provider-compact .btn-primary:hover { background-color: var(--orange-deep); }

/* Coming-soon rows inside the national hero's city picker (MatchHero /
   CityFieldPicker) — same dimmed treatment as HeaderLangPills' disabled
   language rows, so "not live yet" reads consistently across the app. */
.sb-loc-row-soon { opacity: 0.55; }
.sb-loc-row-soon:hover { opacity: 0.85; }

/* ── Provider CTA: compact final band, not an editorial split ── */
.provider-compact-band { padding: 72px 0; background: color-mix(in srgb, var(--surface-peach) 55%, var(--ink-900)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.provider-compact-band .mkt-section { padding-top: 0; padding-bottom: 0; max-width: 1040px; }
.provider-compact { display: flex; align-items: center; justify-content: space-between; gap: var(--s6); flex-wrap: wrap; text-align: left; }
.pc-text h2 { font-family: var(--serif); font-size: clamp(21px,2.2vw,27px); font-weight: 700; letter-spacing: -0.015em; color: var(--bone); margin: 0; line-height: 1.3; }
.pc-text h2 em { font-style: normal; color: var(--orange-deep); background: linear-gradient(transparent 62%, rgba(246,130,31,0.22) 62%); }
.pc-text p { font-size: 0.9375rem; color: var(--taupe); margin: 6px 0 0; }

@media (max-width: 760px) {
  .provider-compact { flex-direction: column; align-items: flex-start; text-align: left; }
  .provider-compact .mkt-cta-btn { width: 100%; justify-content: center; }
}

/* ============================================================
   NATIONAL HOME (guest), ported 1:1 from the Claude Design canvas
   export — the "hx-" prefixed home-page redesign, plus the compact
   hero-with-people/hero-lower-solo layout it sits under.
   ============================================================ */

/* ── Hero: sized to its content (not full-viewport), single wide column,
   no side illustration — .hero-lower-solo is a 1-column variant of the
   hero-with-people 2-column grid (search + optional people aside), used
   here without the aside. ── */
.hero.hero-with-people { min-height: 0; padding-top: clamp(80px, 11vh, 132px); padding-bottom: clamp(20px, 2.4vh, 32px); }
.hero.hero-with-people .hero-grid { margin-top: 0; }
.hero.hero-with-people + .hx-sec { padding-top: 28px; border-top: 0; }
/* width:100% is load-bearing here: .hero-center is a flex column with
   align-items:center, so without an explicit width this would just
   shrink-to-fit its content instead of filling out to max-width like a
   normal block box, leaving it narrower than the hx-wrap sections below
   despite sharing the same max-width/padding. */
.hero-lower { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 28px; align-items: start; width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 var(--s8); box-sizing: border-box; }
.hero-lower-solo { grid-template-columns: minmax(0,1fr); max-width: 1180px; }
/* Fill the full 1180px column instead of the search bar's own narrower
   960px cap, so it lines up with the width of hx-wrap sections below
   rather than looking cramped/centered inside them. */
.hero-lower-solo .hero-search { max-width: none; width: 100%; }
.hero-split.hero-center .hero-text .hero-sub { margin-bottom: 6px; }
.hero-split.hero-center .hero-text h1 { margin-top: 0; }
.hx-hero-note { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; font-size: 0.875rem; color: var(--taupe); }
.hx-hero-note .hx-link { font-size: 0.875rem; }
.hx-hero-live { font-size: 0.8125rem; color: var(--taupe-3); }

/* ── Shared home-section chrome ── */
.hx-wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--s8); }
.hx-sec { padding: 64px 0; border-top: 1px solid var(--line-faint); }
.discover .hx-sec.hx-topics { padding-top: 80px; }
.hx-eyebrow { font-family: var(--sans); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--taupe-3); display: flex; align-items: center; gap: 12px; margin: 0 0 24px; }
.hx-eyebrow::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); max-width: 180px; }
.hx-eyebrow-2 { margin-top: 48px; }
.hx-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.hx-sec-head .hx-eyebrow { margin: 0; }
.hx-sec-head .hx-eyebrow::after { max-width: 120px; }
.hx-link { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0; font-size: 0.875rem; font-weight: 600; color: var(--sky); cursor: pointer; transition: color var(--t-fast); }
.hx-link:hover { color: var(--sky-deep); }
.hx-display { font-family: var(--serif); font-size: clamp(30px,4vw,46px); font-weight: 600; line-height: 1.08; letter-spacing: -0.025em; color: var(--bone); margin: 0 0 12px; text-wrap: pretty; }
.hx-display em { font-style: normal; color: var(--sky); background: linear-gradient(180deg, transparent 76%, rgba(26,143,227,0.16) 76%); padding: 0 0.06em; }
.hx-av { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--r-pill); color: #fff; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.02em; flex: none; box-shadow: 0 0 0 3px rgba(255,255,255,0.9), 0 2px 8px -3px rgba(26,24,20,0.35); }
.hx-av.lg { width: 48px; height: 48px; font-size: 0.9375rem; }
.hx-topic:focus-visible, .hx-chip:focus-visible, .hx-card:focus-visible, .hx-btn:focus-visible, .hx-link:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; border-radius: 12px; }

/* ── Topics ── */
.hx-topic-grid { display: grid; grid-template-columns: repeat(8,1fr); gap: 14px; }
.hx-topic { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 112px; padding: 16px 8px; background: var(--ink-800); border: 1px solid var(--line-faint); border-radius: 18px; box-shadow: 0 1px 2px rgba(26,24,20,0.03); font-size: 0.8125rem; font-weight: 600; color: var(--bone); text-align: center; cursor: pointer; transition: transform 0.22s cubic-bezier(.2,.8,.2,1), box-shadow 0.22s ease, border-color 0.22s ease; }
.hx-topic svg { color: var(--sky); width: 20px; height: 20px; }
.hx-topic::before { content: ""; position: absolute; inset: 0; border-radius: 18px; background: radial-gradient(120px 60px at 50% 0%, rgba(26,143,227,0.10), transparent 70%); opacity: 0; transition: opacity 0.22s ease; pointer-events: none; }
.hx-topic:hover { transform: translateY(-3px); border-color: rgba(26,143,227,0.45); box-shadow: 0 18px 34px -22px rgba(26,24,20,0.32), 0 2px 4px rgba(26,24,20,0.04); }
.hx-topic:hover::before { opacity: 1; }
.hx-topic:active { transform: translateY(-1px); }

/* ── Community chips ── */
.hx-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.hx-chip { padding: 9px 15px; background: var(--ink-800); border: 1px solid var(--line-faint); border-radius: var(--r-pill); font-size: 0.8438rem; font-weight: 500; color: var(--bone-2); cursor: pointer; transition: transform 0.18s ease, border-color 0.18s ease, color 0.18s ease, background 0.18s ease; }
.hx-chip:hover { border-color: var(--sky); color: var(--sky); transform: translateY(-1px); }
.hx-chip.on { background: var(--sky-dim); border-color: var(--sky); color: var(--sky-deep); font-weight: 600; box-shadow: inset 0 0 0 1px rgba(26,143,227,0.35); }

/* ── Trusted people grid ── */
.hx-people-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.hx-card { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; background: var(--ink-800); border: 1px solid var(--line-faint); border-radius: 20px; padding: 22px; box-shadow: 0 1px 2px rgba(26,24,20,0.03); cursor: pointer; transition: transform 0.24s cubic-bezier(.2,.8,.2,1), box-shadow 0.24s ease, border-color 0.24s ease; }
.hx-card:hover { border-color: var(--line-strong); transform: translateY(-4px); box-shadow: 0 26px 50px -30px rgba(26,24,20,0.34), 0 2px 5px rgba(26,24,20,0.05); }
.hx-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; background: var(--green-dim); border-radius: var(--r-pill); font-size: 0.8125rem; font-weight: 600; color: var(--green); }
.hx-card-name { font-family: var(--serif); font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.01em; color: var(--bone); }
.hx-card-rating { display: inline-flex; align-items: center; gap: 5px; font-size: 0.8125rem; color: var(--taupe); }
.hx-card-rating svg { color: var(--star); }
.hx-card-title { font-size: 0.9063rem; line-height: 1.45; color: var(--bone-2); }
.hx-card-langs { font-size: 0.8125rem; color: var(--taupe-3); }
.hx-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line-faint); font-size: 0.875rem; color: var(--bone); }
.hx-card-foot strong { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.hx-card .hx-link { opacity: 0.75; transition: opacity 0.2s ease, transform 0.2s ease; }
.hx-card:hover .hx-link { opacity: 1; transform: translateX(2px); }
.hx-promises { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; margin-top: 36px; border-top: 1px solid var(--line); }
.hx-promise { display: flex; align-items: center; gap: 12px; padding: 22px 24px; font-size: 0.9063rem; line-height: 1.45; color: var(--taupe); border-right: 1px solid var(--line-faint); }
.hx-promise:first-child { padding-left: 0; }
.hx-promise:last-child { border-right: 0; }
.hx-promise svg { color: var(--sky); flex: none; opacity: 0.9; }

/* ── How it works ── */
.hx-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 36px; }
.hx-step { position: relative; overflow: hidden; padding: 26px 24px 24px; background: var(--ink-800); border: 1px solid var(--line-faint); border-radius: 20px; box-shadow: 0 1px 2px rgba(26,24,20,0.03); }
.hx-step::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, rgba(26,143,227,0), var(--sky) 22%, rgba(26,143,227,0.35) 62%, rgba(26,143,227,0)); }
.hx-step-n { display: block; font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.14em; color: var(--sky); margin-bottom: 16px; }
.hx-step h3 { font-family: var(--serif); font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.01em; color: var(--bone); margin: 0 0 10px; }
.hx-step p { font-size: 0.9063rem; line-height: 1.55; color: var(--taupe); margin: 0; }

/* ── Promise band: gradient depth + a light sweep, not a flat fill ── */
.hx-band { position: relative; overflow: hidden; padding: 84px 0; color: #fff; background: linear-gradient(165deg, #12689F 0%, #0E5A96 34%, #0B4A7D 74%, #0A4270 100%); }
.hx-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(900px 420px at 12% -10%, rgba(255,255,255,0.14), transparent 65%); pointer-events: none; }
.hx-band .hx-wrap { position: relative; }
.hx-band-display { font-family: var(--serif); font-size: clamp(30px,4.4vw,50px); font-weight: 600; line-height: 1.08; letter-spacing: -0.025em; margin: 0 0 24px; }
.hx-band-display em { font-style: normal; color: var(--orange); background: linear-gradient(180deg, transparent 78%, rgba(233,124,42,0.35) 78%); padding: 0 0.06em; }
.hx-band-sub { font-size: 1.0313rem; line-height: 1.6; color: rgba(255,255,255,0.78); margin: 0; max-width: 56ch; }

/* ── Where we operate ── */
.hx-where-lede { font-size: 0.9688rem; line-height: 1.6; color: var(--taupe); margin: 0 0 24px; max-width: 60ch; }
.hx-city { position: relative; overflow: hidden; background: var(--ink-800); border: 1px solid var(--line-faint); border-radius: 22px; padding: 28px 30px; max-width: 760px; box-shadow: 0 1px 2px rgba(26,24,20,0.03), 0 24px 48px -34px rgba(26,143,227,0.35); }
.hx-city::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, rgba(26,143,227,0), var(--sky) 22%, rgba(26,143,227,0.35) 78%, rgba(26,143,227,0)); }
.hx-city-tag { display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px; background: var(--sky-dim); border-radius: var(--r-pill); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sky-deep); }
.hx-city-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(46,158,91,0.18); }
.hx-city h3 { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; color: var(--bone); margin: 12px 0 8px; }
.hx-city p { font-size: 0.9063rem; line-height: 1.55; color: var(--taupe); margin: 0 0 14px; }
.hx-next { margin-top: 24px; font-size: 0.8125rem; letter-spacing: 0.01em; color: var(--taupe-3); }

/* ── Become a provider ── */
.hx-provider { background: transparent; padding: 72px 0 96px; border-top: 1px solid var(--line-faint); }
.hx-provider .hx-wrap { position: relative; overflow: hidden; width: calc(100% - 48px); max-width: 1132px; margin-inline: auto; box-sizing: border-box; text-align: left; padding: 34px 36px 36px; border: 1px solid var(--line-faint); border-radius: 22px; background: var(--ink-800); box-shadow: 0 1px 2px rgba(26,24,20,0.03), 0 24px 48px -34px rgba(233,124,42,0.35); }
.hx-provider .hx-wrap::after { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, rgba(233,124,42,0), var(--orange) 22%, rgba(233,124,42,0.35) 78%, rgba(233,124,42,0)); }
.hx-provider-line { font-family: var(--serif); font-size: clamp(24px,2.4vw,30px); font-weight: 600; line-height: 1.14; letter-spacing: -0.02em; color: var(--bone); margin: 0 0 10px; }
.hx-provider-line em { font-style: normal; color: var(--orange-deep); background: linear-gradient(180deg, transparent 78%, rgba(233,124,42,0.22) 78%); padding: 0 0.06em; }
.hx-provider-sub { font-size: 0.9688rem; line-height: 1.6; color: var(--taupe); margin: 0 0 24px; max-width: 56ch; }
.hx-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 22px; background: var(--ink-800); border: 1px solid var(--line-strong); border-radius: var(--r); font-size: 0.9375rem; font-weight: 600; color: var(--bone); cursor: pointer; transition: all var(--t-fast); }
.hx-btn:hover { border-color: var(--sky); color: var(--sky); box-shadow: var(--shadow-card); }
.hx-provider .hx-btn { min-height: 50px; padding: 0 26px; font-size: 0.9688rem; background: var(--orange); border-color: transparent; color: #fff; box-shadow: 0 14px 30px -18px rgba(233,124,42,0.7); }
.hx-provider .hx-btn:hover { background: var(--orange-deep); border-color: transparent; color: #fff; transform: translateY(-1px); box-shadow: 0 18px 36px -18px rgba(233,124,42,0.8); }

/* ── How it works (standalone page), round 3: a subtractive length pass.
   4 sections only (hero, one compact storyboard, one merged trust
   section, closing dual-CTA), each UI fragment shrunk to a single small
   token instead of a full mock interface, whitespace between sections
   instead of a divider line, and only one background colour (the page's)
   — the manifesto no longer gets its own full-bleed band. ───────────── */
.hiw-page { padding-top: var(--s8); }
.hiw-page .hx-sec, .hiw-page .hx-band { border-top: 0; }
.hiw-page .hx-display, .hiw-page .hx-band-display { font-size: 36px; }
.hiw-hero-sec { padding-top: 40px; padding-bottom: 40px; }
.hiw-story-sec { padding-top: 40px; padding-bottom: 40px; }
.hiw-trust-sec { padding-top: 40px; padding-bottom: 48px; }

.hiw-lede { font-size: 0.9375rem; line-height: 1.6; color: var(--taupe); margin: 12px 0 0; max-width: 58ch; }

/* hero: two text-link CTAs (no filled buttons yet), one real example */
.hiw-hero { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap: var(--s10); align-items: center; }
.hiw-hero-links { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.hiw-hero-link { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9375rem; font-weight: 600; background: none; border: none; padding: 0; cursor: pointer; align-self: flex-start; }
.hiw-hero-link.blue { color: var(--sky-deep); }
.hiw-hero-link.orange { color: var(--orange-deep); }
.hiw-hero-card { padding: 18px 20px; }
.hiw-hero-card .hiw-mini-av { width: 44px; height: 44px; font-size: 0.9375rem; }
.hiw-hero-card .hiw-mini-name { font-size: 1rem; }

.hiw-chip { display: flex; align-items: center; gap: 8px; background: var(--ink-800); border: 1px solid var(--line-faint); border-radius: var(--r); padding: 10px 14px; font-size: 0.8125rem; color: var(--taupe); }
.hiw-chip svg { color: var(--sky-deep); flex: none; }
.hiw-chip b { color: var(--bone); font-weight: 600; }

.hiw-mini-card { background: var(--ink-800); border: 1px solid var(--line-faint); border-radius: var(--r); padding: 12px 14px; width: 100%; display: block; text-align: left; font: inherit; cursor: pointer; transition: var(--t-fast); }
.hiw-mini-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-card); transform: translateY(-1px); }
.hiw-mini-top { display: flex; align-items: center; gap: 10px; }
.hiw-mini-av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 0.8125rem; font-weight: 700; flex: none; }
.hiw-mini-body { flex: 1; min-width: 0; }
.hiw-mini-name { font-size: 0.8438rem; font-weight: 600; color: var(--bone); }
.hiw-mini-rat { font-size: 0.8125rem; color: var(--star); }
.hiw-mini-side { text-align: right; }
.hiw-mini-price { font-size: 0.8125rem; color: var(--taupe-3); }
.hiw-mini-verif { font-size: 0.8125rem; color: var(--green); font-weight: 600; display: flex; align-items: center; gap: 3px; justify-content: flex-end; }
.hiw-mini-langs { font-size: 0.8125rem; color: var(--taupe-3); margin-top: 6px; }

.hiw-mini-msg { background: var(--ink-800); border: 1px solid var(--line-faint); border-radius: var(--r); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.hiw-bubble { font-size: 0.8125rem; line-height: 1.45; padding: 6px 10px; border-radius: 10px; max-width: 92%; }
.hiw-bubble-out { background: var(--sky); color: #fff; border-radius: 10px 10px 10px 3px; align-self: flex-start; }
.hiw-bubble-in { background: var(--ink-750); border: 1px solid var(--line-faint); color: var(--bone-2); border-radius: 10px 10px 3px 10px; align-self: flex-start; }

/* the 4-step storyboard: reuses the sitewide .hx-step card, one small
   fragment token per step instead of a full mock interface */
.hiw-storyboard { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-top: 20px; }
.hiw-storyboard .hx-step { display: flex; flex-direction: column; gap: 4px; }
.hiw-storyboard .hx-step > *:last-child { margin-top: auto; padding-top: 10px; }

.hiw-match-card { background: var(--ink-750); border: 1px solid var(--line-faint); border-radius: var(--r); padding: 8px 10px; width: 100%; display: flex; align-items: center; gap: 8px; text-align: left; font: inherit; cursor: pointer; transition: var(--t-fast); }
.hiw-match-card:hover { border-color: var(--line-strong); }
.hiw-match-av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 0.8125rem; font-weight: 700; flex: none; }
.hiw-match-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hiw-match-name { font-size: 0.8125rem; font-weight: 600; color: var(--bone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hiw-match-sub { font-size: 0.8125rem; color: var(--taupe); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hiw-match-price { font-size: 0.8125rem; font-weight: 600; color: var(--bone); white-space: nowrap; }

.hiw-done-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--green-dim); color: var(--green); font-size: 0.8125rem; font-weight: 600; padding: 6px 10px; border-radius: var(--r-pill); }
.hiw-done-stars { color: var(--star); letter-spacing: 1px; margin-left: 4px; }

/* trust: a short list of what a profile shows, an honest limits line,
   and the manifesto folded in as a small statement (no full-bleed band) */
.hiw-points { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; max-width: 60ch; }
.hiw-points li { display: flex; align-items: center; gap: 10px; font-size: 0.9375rem; color: var(--bone-2); }
.hiw-points li svg { flex: none; color: var(--sky-deep); }
.hiw-honest-line { font-size: 0.875rem; line-height: 1.55; color: var(--taupe); max-width: 62ch; margin: 18px 0 0; }
.hiw-manifesto { font-family: var(--serif); font-size: 1.1875rem; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; color: var(--bone); margin: 28px 0 0; padding-top: 24px; border-top: 1px solid var(--line-faint); }
.hiw-manifesto em { font-style: normal; color: var(--orange-deep); }
.hiw-manifesto span { display: block; margin-top: 8px; font-family: var(--sans); font-size: 0.875rem; font-weight: 400; color: var(--taupe); }

/* two ways in, closing dual-CTA */
.hiw-paths { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; margin-top: 20px; }
.hiw-path { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; background: var(--ink-800); border: 1px solid var(--line-faint); border-radius: var(--r-lg); padding: 26px; box-shadow: 0 1px 2px rgba(26,24,20,0.03); transition: transform 0.22s cubic-bezier(.2,.8,.2,1), box-shadow 0.22s ease, border-color 0.22s ease; }
.hiw-path::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; }
.hiw-path.blue::before { background: linear-gradient(90deg, rgba(26,143,227,0), var(--sky) 30%, rgba(26,143,227,0.4) 70%, rgba(26,143,227,0)); }
.hiw-path.orange::before { background: linear-gradient(90deg, rgba(233,124,42,0), var(--orange) 30%, rgba(233,124,42,0.4) 70%, rgba(233,124,42,0)); }
.hiw-path:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: 0 26px 48px -28px rgba(26,24,20,0.3), 0 2px 6px rgba(26,24,20,0.05); }
.hiw-path-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; margin-bottom: 2px; }
.hiw-path.blue .hiw-path-ic { background: var(--sky-dim); color: var(--sky-deep); }
.hiw-path.orange .hiw-path-ic { background: var(--orange-dim); color: var(--orange-deep); }
.hiw-path.blue .hiw-cta-kicker { color: var(--sky-deep); }
.hiw-path.orange .hiw-cta-kicker { color: var(--orange-deep); }
.hiw-cta-kicker { font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.hiw-cta-heading { font-family: var(--serif); font-size: 1.375rem; font-weight: 600; color: var(--bone); }
.hiw-cta-body { font-size: 0.875rem; color: var(--taupe); line-height: 1.5; }

.hiw-journey-preview { background: var(--ink-750); border: 1px solid var(--line-faint); border-radius: var(--r); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.hiw-jp-row { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; }
.hiw-jp-row.done { color: var(--taupe-3); }
.hiw-jp-row.next { color: var(--bone); font-weight: 600; }
.hiw-jp-row.later { color: var(--taupe-3); }
.hiw-jp-row svg { flex: none; }
.hiw-jp-row.done svg { color: var(--green); }
.hiw-jp-row.next svg { color: var(--sky-deep); }
.hiw-jp-row.later svg { color: var(--line-strong); }

.hiw-cta-action { display: flex; align-items: center; justify-content: center; gap: 6px; border: none; border-radius: var(--r); padding: 12px; font-size: 0.875rem; font-weight: 600; color: #fff; cursor: pointer; margin-top: auto; }
.hiw-cta-action.blue { background: var(--sky); }
.hiw-cta-action.orange { background: var(--orange); }

@media (max-width: 1000px) {
  .hx-topic-grid { grid-template-columns: repeat(4,1fr); }
  .hx-people-grid, .hx-steps, .hx-promises { grid-template-columns: 1fr; }
  .hx-promise { border-right: 0; border-bottom: 1px solid var(--line-faint); }
  .hero-lower { grid-template-columns: 1fr; }
  .hiw-hero { grid-template-columns: 1fr; }
  .hiw-paths { grid-template-columns: 1fr; }
  .hiw-storyboard { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 640px) {
  .discover .hx-sec { padding: 56px 0; }
  .hx-sec { padding: 48px 0; }
  .hx-wrap, .hero-lower { padding: 0 var(--s5); }
  .hx-topic-grid { grid-template-columns: repeat(2,1fr); }
  .hx-band { padding: 60px 0; }
  .hx-eyebrow::after { display: none; }
  .hiw-storyboard { grid-template-columns: 1fr; }
  .hx-promise:first-child { padding-left: 24px; }
  .hx-provider { padding: 48px 0 64px; }
  .hx-provider .hx-wrap { width: calc(100% - 36px); padding: 26px 22px 28px; border-radius: 18px; }
}

/* ── Legal (Impressum / Privacy / Terms), a working draft the founder
   fills in before real users rely on it — see legal.jsx. ──────────── */
.legal-layout { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: var(--s10); align-items: start; margin-top: var(--s6); }

.legal-rail { position: sticky; top: calc(var(--s8) + 8px); display: flex; flex-direction: column; gap: 3px; }
.legal-nav-btn { text-align: left; background: none; border: none; padding: 10px 14px; border-radius: var(--r); font-family: var(--sans); font-size: 0.9375rem; color: var(--taupe); cursor: pointer; transition: var(--t-fast); }
.legal-nav-btn:hover { background: var(--ink-800); color: var(--bone); }
.legal-nav-btn.on { background: var(--sky-dim); color: var(--bone); font-weight: 600; }
.legal-rail-note { font-size: 0.8125rem; line-height: 1.55; color: var(--taupe-3); margin: var(--s6) 0 0; padding-top: var(--s5); border-top: 1px solid var(--line-faint); }
.legal-rail-note b { color: var(--taupe); }

.legal-content { max-width: 680px; min-width: 0; }
.legal-doc { animation: fadein 160ms var(--ease); }

.legal-kicker { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sky-deep); margin: 0 0 10px; }
.legal-title { font-family: var(--serif); font-size: clamp(1.75rem, 3vw, 2.375rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 12px; }
.legal-status { font-size: 0.9063rem; color: var(--taupe-3); margin: 0 0 var(--s7); padding-bottom: var(--s7); border-bottom: 1px solid var(--line-faint); }
.legal-status b { color: var(--taupe); font-weight: 600; }

.legal-callout { display: flex; gap: 12px; background: var(--orange-dim); border: 1px solid rgba(233,124,42,0.28); border-radius: var(--r-lg); padding: 16px 18px; margin: 0 0 var(--s8); }
.legal-callout .lc-ic { flex: none; font-family: var(--mono); font-size: 0.8125rem; color: var(--orange-deep); padding-top: 1px; }
.legal-callout p { margin: 0; font-size: 0.875rem; line-height: 1.55; color: var(--bone-2); }
.legal-callout b { color: var(--orange-deep); }

.legal-clause { margin: 0 0 var(--s8); }
.legal-clause h2 { display: flex; align-items: baseline; gap: 10px; font-family: var(--serif); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; color: var(--bone); margin: 0 0 10px; }
.legal-clause .lc-num { font-family: var(--mono); font-size: 0.8125rem; font-weight: 500; color: var(--sky-deep); }
.legal-clause p { font-size: 0.9375rem; line-height: 1.65; color: var(--bone-2); margin: 0 0 12px; }
.legal-clause p:last-child { margin-bottom: 0; }
.legal-clause ul { margin: 0 0 12px; padding-left: 20px; }
.legal-clause li { font-size: 0.9375rem; line-height: 1.6; color: var(--bone-2); margin-bottom: 7px; }
.legal-clause a { color: var(--sky-deep); cursor: pointer; }
.legal-clause a:hover { text-decoration: underline; }

.legal-fill { display: inline; font-family: var(--mono); font-size: 0.85em; background: var(--sky-dim); color: var(--sky-deep); padding: 1px 6px; border-radius: 5px; white-space: normal; }

.legal-end { font-size: 0.8125rem; color: var(--taupe-3); margin-top: var(--s10); padding-top: var(--s5); border-top: 1px solid var(--line-faint); }

@media (max-width: 780px) {
  .legal-layout { grid-template-columns: 1fr; }
  .legal-rail { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .legal-rail-note { width: 100%; }
}