/* =============================================================================
   pages.css — shared styling for the content/product pages.
   Load order:  styles.css  →  tokens.css  →  pages.css
   All colour comes from tokens.css (palette + --cat theme + washes/glows), so
   this file never hard-codes a brand colour — it only references the tokens.
   ============================================================================= */

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display, Inter, system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
  /* category-tinted wash bloomed out of near-black — set per page by .theme-* */
  background: var(--page-bg);
  background-attachment: fixed;
}
.page { padding-top: var(--nav-h, 75px); }   /* clears the fixed header, no extra gap */

/* ---------------------------------------------------------------------------
   Interior-page header: sticky black-tint bar with the PF logo centered and
   ALWAYS shown. (On the hero the logo is hidden until it docks; pages.css loads
   only on interior pages, so this override never touches the hero.)
   --------------------------------------------------------------------------- */
.nav {
  padding: 26px 32px;          /* generous breathing room around the centered logo */
  mix-blend-mode: normal;
  background: rgba(5, 4, 10, 0.74);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  backdrop-filter: blur(12px) saturate(120%);
  border-bottom: 1px solid var(--line);
}
.nav-logo { opacity: 1; height: 42px; }

/* contact form + methods */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px,4vw,56px); align-items: start; }
.form { display: grid; gap: 14px; }
.form label { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.form input, .form textarea { width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; color: var(--ink); font: inherit; }
.form input:focus, .form textarea:focus { outline: none; border-color: var(--cat-line); }
.contact-method { padding: 16px 0; border-top: 1px solid var(--line); }
.contact-method h4 { margin: 0 0 4px; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cat-ink); }
.contact-method a, .contact-method p { color: var(--ink); font-size: 1.05rem; margin: 0; text-decoration: none; }
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; } }
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 6vw; }
.sec { position: relative; padding: clamp(64px, 11vh, 130px) 0; }
.sec--tight { position: relative; padding: clamp(40px, 7vh, 80px) 0; }

/* a thin lean-spectrum divider (the colour-is-the-map motif) */
.rule-spectrum { height: 2px; border: 0; margin: 0; background: var(--spectrum); opacity: 0.8; }
.rule-spectrum.rule-black { background: #000; opacity: 1; }   /* black divider above the map */
/* a soft category glow you can drop behind a section's content */
.glow::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--glow);
}

.eyebrow {
  font-size: 0.72rem; letter-spacing: 0.26em; text-transform: uppercase;
  font-weight: 700; color: var(--cat-ink); margin: 0 0 16px;
}
.h-xl { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em;
  font-size: clamp(2.4rem, 7vw, 5.2rem); line-height: 0.98; margin: 0; }
.h-lg { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.015em;
  font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.04; margin: 0 0 18px; }
.lede { font-size: clamp(1.05rem, 1.7vw, 1.4rem); line-height: 1.5; color: var(--ink-2); max-width: 60ch; margin: 0; }
.body-copy { font-size: 1rem; line-height: 1.65; color: var(--ink-2); max-width: 64ch; }
.cat-accent { color: var(--cat-ink); }

/* reveal-on-scroll (site-chrome.js adds .in) */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }

/* ---------------------------------------------------------------------------
   SLOT — on-screen production notes. Type colour (image / FX / video) is fixed
   so you can scan a page for what it needs; the frame picks up the page accent.
   --------------------------------------------------------------------------- */
.slot {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; text-align: center; min-height: 220px; padding: 30px 26px;
  border: 2px dashed var(--cat-line); border-radius: 16px;
  background-color: var(--cat-fill);
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0 10px, transparent 10px 22px);
  color: var(--ink-2);
}
.slot__tag {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700;
  padding: 5px 11px; border-radius: 999px; border: 1px solid currentColor; color: var(--slot-c, var(--cat-ink));
}
.slot__desc { font-size: 0.92rem; line-height: 1.5; max-width: 44ch; color: var(--ink-2); margin: 0; }
.slot__hint { font-family: ui-monospace, Menlo, monospace; font-size: 0.7rem; color: var(--ink-3); }

.slot--img   { --slot-c: #5fb6e6; border-color: rgba(95,182,230,0.5); }
.slot--video { --slot-c: #b9d94a; border-color: rgba(185,217,74,0.5); }
.slot--fx    { --slot-c: #c79be0; border-color: rgba(176,123,208,0.55); }
.slot--fx::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(120deg, transparent 32%, rgba(199,155,224,0.12) 50%, transparent 68%);
  background-size: 220% 100%; animation: slot-sheen 3s linear infinite;
}
@keyframes slot-sheen { to { background-position: -220% 0; } }
.slot--legal { --slot-c: #e0b34a; border-color: rgba(224,179,74,0.5); min-height: 120px; }
.slot--wide { aspect-ratio: 16 / 9; min-height: 0; }
.slot--full { min-height: 70vh; }
.slot--tall { aspect-ratio: 4 / 5; min-height: 0; }
.slot--band { min-height: 150px; }

/* ---------------------------------------------------------------------------
   Category page components
   --------------------------------------------------------------------------- */
.cat-hero { position: relative; padding: clamp(36px,5vh,60px) 0 clamp(48px,9vh,100px); overflow: hidden; }
.cat-hero::before {                       /* category glow blooming behind the title */
  content: ""; position: absolute; left: -10%; top: -10%; width: 70%; height: 80%; z-index: -1;
  background: var(--glow); filter: blur(10px); pointer-events: none;
}
.cat-hero .slot--full { margin-top: 26px; }
.cat-promise { font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.2rem, 2.4vw, 1.8rem); line-height: 1.3; color: var(--ink); max-width: 24ch; margin: 22px 0 0; }

/* info band — Taste · Feel · Top Terpenes · Sun/Moon (the brand hallmark) */
/* ===== INFO BAND — full-bleed brand-color strip with dark card tiles ===== */
/* The section paints solid --cat edge-to-edge; the .wrap keeps content centered. */
.info-band-sec {
  position: relative;
  background: var(--cat);
  /* break out of the page's max-width to span the full viewport */
  width: 100vw; left: 50%; margin-left: -50vw;
  padding-top: clamp(40px, 6vh, 72px); padding-bottom: clamp(40px, 6vh, 72px);
}
/* faint tonal depth so the flat band isn't dead-flat */
.info-band-sec::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 140% at 15% 0%, rgba(255,255,255,0.12), transparent 55%);
}

/* ===== WHITE MID-BODY — every section BETWEEN the two theme-color bands (the
   info-band at top, the finder-CTA at bottom) flips to a clean white surface with
   dark ink + a darkened brand accent. Hairline separators divide them. Reuses the
   .invert token machinery so slots / proof / headings adapt automatically. */
.info-band-sec ~ .sec:not(.finder-cta-sec),
.info-band-sec ~ .sec--tight:not(.finder-cta-sec) {
  background: #fbfaff;
  color: var(--ink-dark);
  --ink:   var(--ink-dark);
  --ink-2: rgba(20, 16, 28, 0.64);
  --ink-3: rgba(20, 16, 28, 0.44);
  --line:   rgba(20, 16, 28, 0.12);
  --line-2: rgba(20, 16, 28, 0.24);
  --surface:   rgba(20, 16, 28, 0.035);
  --surface-2: rgba(20, 16, 28, 0.045);
  --cat-ink:  color-mix(in srgb, var(--cat) 60%, var(--ink-dark) 40%);
  --cat-soft: color-mix(in srgb, var(--cat) 14%, transparent);
  --cat-glow: color-mix(in srgb, var(--cat) 26%, transparent);
  --cat-line: color-mix(in srgb, var(--cat) 40%, var(--line));
  --cat-fill: color-mix(in srgb, var(--cat) 8%, transparent);
}
/* full-width hairline separator between adjacent white sections */
.info-band-sec ~ .sec:not(.finder-cta-sec) + .sec:not(.finder-cta-sec),
.info-band-sec ~ .sec--tight:not(.finder-cta-sec) + .sec:not(.finder-cta-sec),
.info-band-sec ~ .sec:not(.finder-cta-sec) + .sec--tight:not(.finder-cta-sec) {
  border-top: 1px solid rgba(20, 16, 28, 0.10);
}
/* a short brand-color rule centered above each section's heading as a marker */
.info-band-sec ~ .sec .eyebrow::before,
.info-band-sec ~ .sec--tight .eyebrow::before {
  content: ""; display: inline-block; width: 24px; height: 2px;
  background: var(--cat); margin-right: 12px; vertical-align: middle;
  border-radius: 2px;
}
.info-band {
  position: relative; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1vw, 16px); background: none; border: none; border-radius: 0;
  counter-reset: infocell;
}
/* Cards mirror the New · Product Finder CTA: near-black editorial ink on the --cat
   band, a thin outline (no fill, no hover animation), finder-style 0N index. */
.info-cell {
  counter-increment: infocell;
  --tile-ink: var(--cat-on, #0a0a0c);                   /* same ink as .finder-cta */
  position: relative; display: flex; flex-direction: column; gap: 12px;
  padding: 22px 22px 24px; min-height: 156px;
  background: none;
  border: 1.5px solid color-mix(in srgb, var(--tile-ink) 22%, transparent);
  border-radius: 14px;
}
/* finder-style index, top-right */
.info-cell::after {
  content: "0" counter(infocell);
  position: absolute; top: 18px; right: 20px;
  font-family: var(--font-display, inherit); font-weight: 800; font-size: 22px;
  letter-spacing: -0.02em; color: var(--tile-ink); opacity: 0.5;
}
.info-cell-k {
  font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase;
  font-weight: 700; color: var(--tile-ink); opacity: 0.72;
}
.info-cell-v {
  margin: auto 0 0; font-size: 1.18rem; line-height: 1.3;
  color: var(--tile-ink); font-weight: 700; letter-spacing: -0.01em;
}
.info-cell-v span { opacity: 0.4; padding: 0 2px; }
/* the FX cell hosts the Sun/Moon slot — flush inside, inked to match */
.info-cell--fx .slot {
  margin: auto 0 0; width: 100%; --slot-c: var(--tile-ink);
  border-color: color-mix(in srgb, var(--tile-ink) 30%, transparent); background-color: transparent;
}
.info-cell--fx .slot__desc, .info-cell--fx .slot__tag { color: var(--tile-ink); }

/* legacy h4/p info-cells (e.g. ai1 device-spec band) match the outline style:
   h4 = the value (big), p = the label below it */
.info-cell h4 { order: 1; margin: auto 0 0; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1; letter-spacing: -0.01em; color: var(--tile-ink); }
.info-cell h4 small { font-size: 0.5em; font-weight: 600; opacity: 0.6; margin-left: 2px; }
.info-cell h4 + p { order: 2; margin: 8px 0 0; font-size: 0.72rem; letter-spacing: 0.16em;
  text-transform: uppercase; font-weight: 700; color: var(--tile-ink); opacity: 0.72; }

/* proof points — editorial, hairline-divided, accent kickers */
.proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.proof-item { padding: 0 clamp(16px,2.4vw,34px); border-left: 1px solid var(--line); }
.proof-item:first-child { border-left: none; }
.proof-k { display: block; font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; color: var(--cat-ink); margin-bottom: 10px; }
.proof-t { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.05rem,1.5vw,1.3rem); letter-spacing: -0.01em; margin: 0 0 8px; }
.proof-d { margin: 0; font-size: 0.94rem; line-height: 1.55; color: var(--ink-2); }

/* strain / SKU rail — horizontal scroll, colour-coded to lean */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(248px, 1fr);
  gap: 18px; overflow-x: auto; padding: 6px 6vw 22px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.rail-card { scroll-snap-align: start; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--surface-2); }
.rail-card .slot { border-radius: 0; border-left: none; border-right: none; border-top: none; }
.rail-meta { padding: 16px 18px 20px; }
.rail-lean { display: inline-flex; align-items: center; gap: 7px; font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.rail-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--lean, var(--pf-3)); box-shadow: 0 0 10px var(--lean, var(--pf-3)); }
.rail-name { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; margin: 8px 0 4px; }
.rail-sub { margin: 0; font-size: 0.86rem; color: var(--ink-2); }

/* ---- "Find Your Lean" — overlays the top of the merged map section ----
   the panel uses the same frosted-glass look as the map controls (.camctl) */
.lean-panel { width: calc(100% - 12vw); max-width: 1180px; margin: 0 auto; padding: 22px 22px 6px;
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(20,22,32,.72), rgba(8,9,14,.82));
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 50px -18px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08); }
.lean-panel { padding: 12px 14px 2px; }
.lean-panel .rail { padding: 0; background: none; box-shadow: none; border-radius: 0;
  grid-auto-columns: 168px; gap: 10px; }   /* fixed-width cards (no 1fr stretch) */
/* HORIZONTAL cards — hybrid-themed (chartreuse/--pf-3) surface + border */
.lean-panel .rail-card { border-radius: 9px;
  border: 1px solid color-mix(in srgb, var(--pf-3) 45%, rgba(255,255,255,.16));
  background: color-mix(in srgb, var(--pf-3) 16%, rgba(16,19,28,.82));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pf-3) 12%, transparent),
    0 0 14px -6px color-mix(in srgb, var(--pf-3) 50%, transparent);
  display: flex; align-items: center; gap: 6px; padding: 5px; }
.lean-panel .rail-card .slot { aspect-ratio: 1 / 1; height: 40px; width: 40px; flex: 0 0 40px;
  min-height: 0; padding: 0; gap: 0; border: none; border-radius: 7px; overflow: hidden; }
/* hide the placeholder [Image] tag / desc text inside the tiny thumbnail */
.lean-panel .rail-card .slot .slot__tag, .lean-panel .rail-card .slot .slot__desc,
.lean-panel .rail-card .slot .slot__hint { display: none; }
.lean-panel .rail-meta { padding: 0; flex: 1; min-width: 0; text-align: left; }
.lean-panel .rail-lean { font-size: 0.48rem; color: rgba(255,255,255,.65); }
.lean-panel .rail-name { font-size: 0.74rem; margin: 2px 0 0; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lean-panel .rail-sub { font-size: 0.6rem; color: rgba(255,255,255,.66);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* slider docked at the bottom of the glass panel, content vertically centered */
.lean-dock { margin-top: 0; padding: 12px 0 4px; border-top: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; }
.lean-panel .lean-slider { margin: 0 auto; width: 100%; }
.lean-panel .lean-track { height: 16px; }
.lean-panel .lean-label { margin: 7px 0 0; color: rgba(255,255,255,.8); }

/* ---------------------------------------------------------------------------
   Sun ↔ Moon lean slider — the product selector's filter. Sun (Sativa / red) to
   Moon (Indica / purple); drag the orb along the spectrum bar to filter the cards
   below by lean. Full visual treatment TBD — this is the working jist.
   --------------------------------------------------------------------------- */
.lean-slider { display: flex; align-items: center; gap: 16px; max-width: 560px; margin: 24px auto 2px; }
.lean-end { flex: none; position: relative; width: 18px; height: 18px;
  /* crescent moon mask: a disc with a bite taken out (the cut-out circle is offset) */
  --moon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M14.5 2.5a10 10 0 1 0 0 19 7.5 7.5 0 0 1 0-19z"/></svg>'); }
/* Sun = always RED (solid circle) */
.lean-sun  { border-radius: 50%; background: var(--pf-1); box-shadow: 0 0 12px 1px var(--pf-1); }
/* Moon = PURPLE crescent, drawn from a real SVG via mask (no fake white overlay) */
.lean-moon { background: var(--pf-5); filter: drop-shadow(0 0 8px color-mix(in srgb, var(--pf-5) 70%, transparent));
  -webkit-mask: var(--moon) center / contain no-repeat; mask: var(--moon) center / contain no-repeat; }
.lean-track { position: relative; flex: 1; height: 26px; display: flex; align-items: center; cursor: pointer; touch-action: none; }
.lean-bar { position: absolute; left: 0; right: 0; height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--pf-1), var(--pf-2), var(--pf-3), var(--pf-4), var(--pf-5)); }
.lean-orb { position: absolute; top: 50%; left: var(--p, 50%); transform: translate(-50%, -50%);
  width: 22px; height: 22px; border-radius: 50%; padding: 0; cursor: grab;
  background: var(--orb, var(--pf-3)); border: 3px solid #fff;
  box-shadow: 0 1px 6px rgba(0,0,0,0.3), 0 0 14px var(--orb, var(--pf-3));
  animation: lean-orb-pulse 1.8s ease-in-out infinite; }
.lean-orb:active { cursor: grabbing; animation: none; }
@keyframes lean-orb-pulse {
  0%, 100% { box-shadow: 0 1px 6px rgba(0,0,0,0.3), 0 0 0 0 color-mix(in srgb, var(--orb, var(--pf-3)) 60%, transparent), 0 0 14px var(--orb, var(--pf-3)); }
  50%      { box-shadow: 0 1px 6px rgba(0,0,0,0.3), 0 0 0 7px color-mix(in srgb, var(--orb, var(--pf-3)) 0%, transparent), 0 0 18px var(--orb, var(--pf-3)); }
}
@media (prefers-reduced-motion: reduce) { .lean-orb { animation: none; } }
.lean-label { display: block; text-align: center; margin: 10px 0 0; font-size: 0.72rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }
/* card filter states (driven by site-chrome.js): active = bright, others dimmer.
   No 'rise' / movement — just opacity. */
.rail-card { transition: opacity .3s ease; }
.rail-card.dim { opacity: 0.4; }
.rail-card.active { opacity: 1; transform: none; }

/* ---------------------------------------------------------------------------
   Store locator — a REAL brand-styled MapLibre GL map (free, no API key).
   MapLibre mounts in .store-map-canvas; site-chrome.js recolors the free
   OpenFreeMap tiles to a dark, category-accented Passion Flower look, adds
   brand-glow markers, and on ZIP submit geocodes (Nominatim) → nearest store.
   The category radial-gradient on .store-map is a fallback if the map can't load.
   --------------------------------------------------------------------------- */
/* Full-bleed finder: the map fills section.sec.finder edge-to-edge, top-to-bottom.
   The section becomes the positioning context + sets the height; .wrap stops
   constraining; .store-map stretches to cover the whole section. */
.sec.finder {
  position: relative; padding: 0; overflow: hidden;
  height: clamp(460px, 66vh, 680px);
}
/* Merged section: ONE map of FIXED height (--map-h). The map canvas fills that
   fixed box; EVERY widget is absolutely positioned against it (anchored to an
   edge), so moving any widget never changes the map's height.
   --map-h is the single knob — change it anytime to resize the map. */
.sec.finder.lean-merged { --map-h: 860px; height: var(--map-h); min-height: 0; }
/* .store-map keeps its base rule (position:absolute; inset:0) → fills the fixed box.
   theme-coloured TOP scrim over the upper map, fading to 0% lower down. */
.lean-merged .store-map-scrim { display: none; }
/* top theme-scrim, injected inside the MapLibre canvas container (above tiles,
   below the store pins). Lighter so it doesn't overpower the map. */
.map-top-scrim { position: absolute; top: 0; left: 0; right: 0; height: 360px; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--map-base, #16273f) 55%, transparent) 0%,
    color-mix(in srgb, var(--map-base, #16273f) 22%, transparent) 40%,
    transparent 100%); }
/* store pins sit ABOVE the top scrim */
.store-map-canvas .maplibregl-marker { z-index: 3; }

/* ---- widgets anchored to the fixed map box ---- */
/* products glass panel → DOCKED to the top + both side edges (flush, full width) */
.lean-overlay { position: absolute; top: 0; left: 0; right: 0; z-index: 2; text-align: center;
  padding: 0; display: flex; flex-direction: column; align-items: stretch; pointer-events: none; }
.lean-overlay > * { pointer-events: auto; }
.lean-merged .lean-panel { width: 100%; max-width: none; margin: 0; padding-bottom: 22px;
  border-left: 0; border-right: 0; border-top: 0; border-radius: 0;   /* docked → square corners */
  overflow: visible;                                  /* let the slider dangle below the glass */
  transform: none !important; opacity: 1 !important; }   /* docked flush to top — no reveal offset */
/* Slider dock = a glass pill hanging below the products, only as wide as the
   slider (+32px buffer each side), centred. Bottom corners rounded; the TOP
   corners flare OUTWARD (concave) to blend into the products panel above. */
.lean-merged .lean-panel { position: relative; overflow: visible; }
.lean-merged .lean-dock { position: absolute; top: 100%; left: 50%;
  width: min(624px, calc(100% - 24px)); transform: translateX(-50%);   /* slider 560 + 32px each side */
  margin-top: 0; padding: 12px 32px 12px; border-top: none;
  background: linear-gradient(160deg, rgba(20,22,32,.72), rgba(8,9,14,.82));
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(255,255,255,.12); border-top: none;
  border-radius: 0 0 16px 16px; }
/* concave flare: little wedges just outside each top corner, filled with the glass
   colour everywhere EXCEPT a transparent quarter-circle — making the dock's top
   edge curve OUTWARD to meet the products bar above (no visible seam). */
.lean-merged .lean-dock::before, .lean-merged .lean-dock::after {
  content: ""; position: absolute; top: 0; width: 18px; height: 18px; pointer-events: none; }
.lean-merged .lean-dock::before { left: -18px;
  background: radial-gradient(circle at 0 100%, transparent 18px, rgba(14,16,24,.8) 18px); }
.lean-merged .lean-dock::after { right: -18px;
  background: radial-gradient(circle at 100% 100%, transparent 18px, rgba(14,16,24,.8) 18px); }
/* the zone wrapper is now a passthrough that just fills the box (no height driving) */
.lean-merged .store-map-zone { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
/* readability scrim over the BOTTOM of the map (behind the headline) */
.lean-merged .store-map-zone::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(5,4,10,0.96) 6%, rgba(5,4,10,0.5) 26%, transparent 50%); }
/* ZIP widget → top-left, above the scrim + map content (high z so it's always on top) */
.lean-merged .store-finder { position: absolute; top: 24px; left: 24px; z-index: 40; pointer-events: auto;
  transform: none !important; opacity: 1 !important; }   /* exact position — no reveal offset */
.lean-merged .store-map-inner { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; pointer-events: none; }
.lean-merged .store-map-inner a, .lean-merged .store-map-inner button { pointer-events: auto; }
.sec.finder .wrap { max-width: none; width: 100%; height: 100%; padding: 0; margin: 0; }
.store-map {
  position: absolute; inset: 0; overflow: hidden; isolation: isolate;
  border: none; border-radius: 0;
  background:  /* fallback only — covered by the map canvas when it loads */
    radial-gradient(52% 44% at 28% 30%, color-mix(in srgb, var(--cat) 30%, transparent), transparent 72%),
    radial-gradient(130% 120% at 50% 45%, var(--bg-2), #05040a 92%);
}
.store-map-canvas { position: absolute; inset: 0; height: 100%; z-index: 0; }
/* no map data/attribution citation on any map */
.store-map-canvas .maplibregl-ctrl-attrib,
.store-map-canvas .maplibregl-ctrl-bottom-right,
.store-map-canvas .maplibregl-ctrl-bottom-left { display: none !important; }

/* ---- rotate / tilt camera control (injected into .store-map by site-chrome.js) ---- */
.camctl { position: absolute; right: 18px; bottom: 26px; z-index: 30;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 12px 12px 10px; border-radius: 18px;
  background: linear-gradient(160deg, rgba(20,22,32,.72), rgba(8,9,14,.82));
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 30px -8px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08);
  font: 11px Inter, system-ui, sans-serif; color: #eef1f8; transition: opacity .25s ease; }
.camctl button { -webkit-tap-highlight-color: transparent; }
.camctl-dial { position: relative; display: flex; align-items: center; gap: 6px; }
.camctl-rot { width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 50%; cursor: pointer; color: #cfd6e6;
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05);
  transition: background .16s, color .16s, transform .12s, box-shadow .16s; }
.camctl-rot:hover { background: rgba(255,255,255,.12); color: #fff; }
.camctl-rot:active { transform: scale(.9); }
.camctl-reset { position: relative; width: 50px; height: 50px; border-radius: 50%;
  cursor: pointer; color: #fff; display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--cat) 55%, rgba(255,255,255,.2));
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--cat) 26%, rgba(20,22,32,.6)), rgba(10,11,16,.85));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 0 14px -4px color-mix(in srgb, var(--cat) 70%, transparent);
  transition: box-shadow .18s, transform .12s; }
.camctl-reset:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 0 20px -2px color-mix(in srgb, var(--cat) 90%, transparent); }
.camctl-reset:active { transform: scale(.94); }
.camctl-n { font-size: 11px; font-weight: 700; letter-spacing: .04em;
  color: color-mix(in srgb, var(--cat) 40%, #fff); position: relative; z-index: 2; }
.camctl-needle { position: absolute; top: 5px; left: 50%; width: 0; height: 0;
  transform-origin: 50% 20px; transform: translateX(-50%) rotate(0deg);
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-bottom: 9px solid var(--cat); filter: drop-shadow(0 0 3px color-mix(in srgb, var(--cat) 80%, transparent)); }
.camctl-zoom, .camctl-tilt { display: flex; flex-direction: column; align-items: stretch; width: 50px;
  border-radius: 11px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); }
.camctl-zoom button, .camctl-tilt button { height: 26px; display: grid; place-items: center; cursor: pointer;
  border: none; background: transparent; color: #cfd6e6; transition: background .16s, color .16s; }
.camctl-zoom button:hover, .camctl-tilt button:hover { background: rgba(255,255,255,.1); color: #fff; }
.camctl-zoom button:active, .camctl-tilt button:active { background: color-mix(in srgb, var(--cat) 30%, transparent); }
.camctl-div { height: 1px; background: rgba(255,255,255,.1); }
.camctl-readout { display: flex; gap: 12px; }
.camctl-readout span { display: inline-flex; align-items: center; gap: 4px; }
.camctl-readout i { font-style: normal; color: color-mix(in srgb, var(--cat) 55%, #8a90a2); font-size: 12px; }
.camctl-readout b { font-weight: 600; font-variant-numeric: tabular-nums;
  font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: #eef1f8; min-width: 30px; }
.store-map-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(5,4,10,0.96) 6%, rgba(5,4,10,0.5) 32%, transparent 60%); }
/* top-left finder card: a 'WASHINGTON · FIND A STORE' pill header over a ZIP input */
.store-finder { position: absolute; top: 20px; left: 24px; z-index: 3; width: min(300px, 70%);
  border-radius: 16px; overflow: hidden;
  /* BRAND gradient glass: light brand colour → dark brand colour (both tinted by --cat) */
  --glass-light: color-mix(in srgb, var(--cat) 45%, rgba(8,10,16,.55));
  --glass-dark:  color-mix(in srgb, var(--cat) 30%, rgba(5,6,11,.78));
  border: 1px solid color-mix(in srgb, var(--cat) 55%, rgba(0,0,0,.3));
  background: linear-gradient(155deg, var(--glass-light), var(--glass-dark));
  -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: 0 8px 28px -10px rgba(0,0,0,0.5); }
.store-tag { margin: 0; padding: 9px 16px; text-align: center;
  font-size: 0.64rem; letter-spacing: 0.24em; text-transform: uppercase; color: #fff;
  background: color-mix(in srgb, var(--cat) 55%, rgba(8,10,16,.45));
  border-bottom: 1px solid color-mix(in srgb, var(--cat) 50%, rgba(0,0,0,.3));
  text-shadow: 0 1px 3px rgba(0,0,0,.5); }
/* compact, cohesive ZIP group: input + button share size and line up tightly */
.finder-zip { display: flex; gap: 6px; padding: 10px 12px; align-items: center; }
[hidden] { display: none !important; }   /* author display rules must not beat the hidden attribute */
.store-finder .finder-zip input, .store-finder .finder-zip .btn {
  height: 32px; box-sizing: border-box; border-radius: 999px;
  font: inherit; font-size: 0.78rem; line-height: 1; }
.store-finder .finder-zip input { flex: 1; min-width: 0; background: #fff; border: 1px solid var(--line-2);
  padding: 0 12px; color: #0a0710; letter-spacing: 0.1em; text-align: center; }
.store-finder .finder-zip input::placeholder { color: #6b6b76; }
.store-finder .finder-zip input:focus { outline: none; border-color: var(--cat); }
.store-finder .finder-zip .btn { flex: 0 0 auto; width: 32px; padding: 0; margin: 0; display: grid; place-items: center;
  background: var(--cat); color: #0a0710; font-weight: 700; border: none; cursor: pointer; box-shadow: none; }
.store-result { margin: 0; padding: 0 12px 12px; font-size: 0.82rem; color: var(--ink); }
.store-result b { color: var(--cat-ink); }

.store-map-inner { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 0 6vw 40px; text-align: center; }
/* legal disclaimer: small, readable, centered under the headline */
.store-map-inner .lede { font-size: 0.8rem; line-height: 1.45; opacity: 0.82;
  max-width: 58ch; margin-left: auto; margin-right: auto; text-align: center; }
/* ---- store callouts: white name pill → thin white line → flashing white dot ----
   (custom marker elements added by site-chrome.js; anchored at the bottom dot) */
.store-callout { position: relative; display: flex; flex-direction: column; align-items: center;
  cursor: pointer; pointer-events: auto; }
.store-callout-pill { white-space: nowrap; font: 700 11px Inter, system-ui, sans-serif;
  letter-spacing: 0.01em; color: #11131a; background: #fff; padding: 4px 10px; border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.45); }
.store-callout-line { width: 1.5px; height: 22px; background: #fff;
  box-shadow: 0 0 4px rgba(255,255,255,0.7); }
.store-callout-dot { width: 9px; height: 9px; border-radius: 50%; background: #fff; margin-top: -1px;
  box-shadow: 0 0 0 0 rgba(255,255,255,0.6); animation: store-dot-pulse 1.6s ease-out infinite; }
@keyframes store-dot-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0.65), 0 0 8px rgba(255,255,255,0.9); }
  70%  { box-shadow: 0 0 0 11px rgba(255,255,255,0), 0 0 8px rgba(255,255,255,0.9); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0), 0 0 8px rgba(255,255,255,0.9); }
}
@media (prefers-reduced-motion: reduce) { .store-callout-dot { animation: none; } }
.store-callout--carry { z-index: 2; }
.store-callout--carry .store-callout-pill:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.45), 0 0 0 2px var(--cat); }
/* card open → the popup card replaces this pin's pill (dot + line stay) */
.store-callout--carded .store-callout-pill { display: none; }
/* entered-ZIP marker: 50% black pill (the ZIP) → black line → pulsing black dot */
.store-callout--you { z-index: 4; }
.store-callout--you .store-callout-pill { background: rgba(0,0,0,0.5); color: #fff;
  font-weight: 700; letter-spacing: 0.08em; box-shadow: 0 2px 8px rgba(0,0,0,0.5); }
.store-callout--you .store-callout-line { background: #000; box-shadow: 0 0 4px rgba(0,0,0,0.6); }
.store-callout--you .store-callout-dot { background: #000; animation: store-dot-pulse-black 1.6s ease-out infinite; }
@keyframes store-dot-pulse-black {
  0%   { box-shadow: 0 0 0 0 rgba(0,0,0,0.6), 0 0 8px rgba(0,0,0,0.7); }
  70%  { box-shadow: 0 0 0 11px rgba(0,0,0,0), 0 0 8px rgba(0,0,0,0.7); }
  100% { box-shadow: 0 0 0 0 rgba(0,0,0,0), 0 0 8px rgba(0,0,0,0.7); }
}
@media (prefers-reduced-motion: reduce) { .store-callout--you .store-callout-dot { animation: none; } }
/* NON-carrying: greyed-out pill (visible but clearly secondary; no pulse) */
.store-callout--muted { z-index: 1; }
.store-callout--muted .store-callout-pill { background: rgba(140,148,162,0.92); color: #1a1d24;
  font-weight: 600; box-shadow: 0 2px 6px rgba(0,0,0,0.35); }
.store-callout--muted:hover .store-callout-pill { background: rgba(170,178,192,0.98); }
.store-callout--muted .store-callout-line { background: #8c94a2; box-shadow: none; }
.store-callout--muted .store-callout-dot { background: #8c94a2; animation: none;
  box-shadow: 0 0 0 2px rgba(140,148,162,0.25); }
/* the 'you' (entered ZIP) pin keeps its own dot style */
.store-marker { width: 14px; height: 14px; border-radius: 50%; cursor: pointer; background: var(--mk, #fff); }
.store-marker--you { background: #fff; box-shadow: 0 0 0 5px rgba(255,255,255,0.25), 0 0 22px #fff; }

/* shop product card — a light/white card anchored ON the pin (MapLibre popup) */
.store-card-popup .maplibregl-popup-content {
  padding: 15px 16px 16px; border-radius: 16px; background: #fff; color: #16181d;
  box-shadow: 0 18px 44px -12px rgba(0,0,0,0.45), 0 0 0 1px rgba(0,0,0,0.06);
  animation: store-card-in .16s ease-out; }
.store-card-popup .maplibregl-popup-tip { border-top-color: #fff !important; border-bottom-color: #fff !important; }
@keyframes store-card-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
.store-card-x { position: absolute; top: 8px; right: 9px; width: 24px; height: 24px; border: none;
  background: transparent; color: #9aa1ad; font-size: 19px; line-height: 1; cursor: pointer; border-radius: 7px; }
.store-card-x:hover { background: rgba(0,0,0,0.06); color: #16181d; }
.store-card-name { margin: 0 22px 1px 0; font-size: 1rem; font-weight: 800; color: #14161b; letter-spacing: -0.01em; }
.store-card-city { margin: 0 0 11px; font-size: 0.74rem; color: #8a92a0; letter-spacing: 0.02em; }
.store-card-city:has(+ .store-card-contact) { margin-bottom: 7px; }
.store-card-contact { margin: 0 0 11px; padding: 8px 0 0; border-top: 1px solid rgba(0,0,0,0.07); }
.store-card-addr { margin: 0; font-size: 0.78rem; line-height: 1.4; color: #3a4150; }
.store-card-phone { display: inline-block; margin: 4px 0 0; font-size: 0.82rem; font-weight: 700;
  color: color-mix(in srgb, var(--cat) 72%, #2a2e36); text-decoration: none; letter-spacing: 0.01em; }
.store-card-phone:hover { text-decoration: underline; }
.store-card-sub { margin: 0 0 8px; font-size: 0.66rem; letter-spacing: 0.07em; text-transform: uppercase;
  color: color-mix(in srgb, var(--cat) 60%, #3a4150); font-weight: 800; }
.store-card-sub--no { color: #c0473a; text-transform: none; letter-spacing: 0.01em; font-weight: 700; font-size: 0.82rem; }
.store-card-list { margin: 0; padding: 0; list-style: none; font-size: 0.84rem; line-height: 1.5; }
.store-card-list li { margin: 0 0 4px; padding-left: 14px; position: relative; color: #2a2e36; }
.store-card-list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 5px; height: 5px;
  border-radius: 50%; background: var(--cat); }
.store-card-empty, .store-card-other { margin: 6px 0 0; font-size: 0.78rem; color: #7a828f; }

/* ============================================================================
   PRODUCT FINDER PORTAL (finder.html) — full-viewport map + filter toolbar.
   The nav bar sits transparent on top; a thin glass toolbar sits just under it.
   ========================================================================== */
.finder-page { overflow: hidden; }                 /* portal owns the viewport */
.finder-portal { position: fixed; inset: 0; }      /* top→bottom, side→side */
.finder-portal .store-map { position: absolute; inset: 0; border-radius: 0; overflow: hidden; }
.finder-portal .store-map-canvas { position: absolute; inset: 0; height: 100%; z-index: 0; }
.finder-portal.card-open .store-map-canvas,        /* card-open lift also works here */
.finder-portal .store-map.card-open .store-map-canvas { z-index: 60; }

/* thin filter toolbar, docked FLUSH under the (transparent) top bar.
   --nav-h is the real nav height (padding 30+30 + ~15 line) so there's no gap. */
/* ============================================================================
   PRODUCT FINDER TOOLBAR — enterprise/neutral. The SURFACE is a fixed slate
   (independent of --cat); the accent appears only as a restrained highlight: a
   1px top rule, focus rings, and active states. So it always conforms to the map
   state without the whole bar turning that color.
   ========================================================================== */
.finder-toolbar {
  position: absolute; top: var(--nav-h, 75px); left: 0; right: 0; z-index: 45;
  display: flex; align-items: stretch; gap: 0;
  padding: 0 22px; height: 72px;
  background: rgba(17, 19, 24, 0.9);
  -webkit-backdrop-filter: blur(18px) saturate(120%); backdrop-filter: blur(18px) saturate(120%);
  box-shadow: 0 8px 28px -18px rgba(0, 0, 0, 0.7);
}

/* ---- first-run coachmarks: bouncing tooltips under each control ---- */
.finder-coach {
  position: absolute; top: calc(100% + 16px); left: 50%; z-index: 60;
  transform: translateX(-50%);
  padding: 11px 17px; border-radius: 11px; white-space: nowrap;
  background: #ffffff; color: #14161b;
  font: 700 14px Inter, system-ui, sans-serif; letter-spacing: 0.01em;
  box-shadow: 0 12px 30px -8px rgba(0,0,0,0.6);
  animation: coach-bounce 1.5s cubic-bezier(.5,.05,.3,1) infinite;
  pointer-events: none;
}
.finder-coach::before {   /* pointer arrow up toward the control */
  content: ""; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  border: 7px solid transparent; border-bottom-color: #ffffff;
}
.finder-coach.is-out { animation: none; opacity: 0; transform: translateX(-50%) translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s ease; }
@keyframes coach-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-7px); }
}
@media (prefers-reduced-motion: reduce) { .finder-coach { animation: none; } }

/* a thin accent top rule — only once a hybridization chip is active (a real brand
   color). In the neutral/grey default it's hidden, so there's no bluish halo. */
.finder-toolbar::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--cat), transparent);
  opacity: 0; transition: opacity 0.25s ease; z-index: 2;
}
/* 4px BRAND RAINBOW STRIP docked to the toolbar's bottom edge, with a revolving
   light orb riding it (reuses the footer orb's travel keyframes). Replaces the
   plain bottom border. */
.toolbar-spectrum {        /* static 4px brand rainbow — no traveling orb on the finder */
  position: absolute; left: 0; right: 0; bottom: -4px; height: 4px; z-index: 46;
  pointer-events: none;
  background: linear-gradient(90deg, var(--pf-1), var(--pf-2), var(--pf-3), var(--pf-4), var(--pf-5));
}
body:not(.theme-neutral) .finder-toolbar::before { opacity: 0.7; }
/* each control is a self-contained group, separated by hairline dividers */
.finder-field {
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  padding: 0 22px; border-right: 1px solid rgba(255, 255, 255, 0.07);
}
.finder-field:first-child { padding-left: 0; }
.finder-field[hidden] { display: none; }
.finder-field label {
  font: 700 9px var(--font-display), system-ui, sans-serif; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(231, 234, 240, 0.5);
}
/* flat enterprise dropdown — neutral fill, hairline border, accent only on focus */
.finder-field select {
  -webkit-appearance: none; appearance: none;
  min-width: 190px; height: 34px; padding: 0 32px 0 12px; border-radius: 7px;
  font: 600 13px Inter, system-ui, sans-serif; letter-spacing: 0.005em; color: #f2f4f8;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23aab0bd' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
  cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.finder-field select:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.22); }
.finder-field select:focus { outline: none; border-color: var(--cat);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cat) 30%, transparent); }
.finder-field select option { color: #16181d; }

/* ZIP field — input + go button as one bordered unit matching the dropdowns */
.finder-toolbar .finder-zip {
  display: flex; align-items: stretch; gap: 0; height: 34px; padding: 0; box-sizing: border-box;
  border-radius: 7px; overflow: hidden;
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.finder-toolbar .finder-zip:focus-within { border-color: var(--cat);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cat) 30%, transparent); }
.finder-toolbar .finder-zip input {
  width: 132px; height: 100%; box-sizing: border-box; padding: 0 14px;
  border: none; background: transparent;
  font: 600 13px Inter, system-ui, sans-serif; color: #f2f4f8; letter-spacing: 0.04em;
}
.finder-toolbar .finder-zip input::placeholder { color: rgba(231, 234, 240, 0.4); letter-spacing: 0.02em; }
.finder-toolbar .finder-zip input:focus { outline: none; }
.finder-toolbar .finder-zip-go {
  flex: 0 0 auto; width: 34px; height: 100%; box-sizing: border-box;  /* full field height */
  display: flex; align-items: center; justify-content: center;  /* center the arrow */
  margin: 0; padding: 0; border: none; cursor: pointer; line-height: 1;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06); color: rgba(231, 234, 240, 0.85);
  font: 600 15px Inter, system-ui, sans-serif; transition: background 0.15s ease, color 0.15s ease;
}
.finder-toolbar .finder-zip-go:hover { background: color-mix(in srgb, var(--cat) 28%, rgba(255,255,255,0.06)); color: #fff; }

/* Hybridization dots — housed in a bordered "button group" box matching the
   dropdowns (same height/border/fill), so the whole toolbar reads as one group. */
.lean-dots {
  display: flex; align-items: center; gap: 12px; height: 34px; padding: 0 14px;
  border-radius: 7px; background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.lean-dot {
  position: relative; width: 16px; height: 16px; padding: 0; border-radius: 50%;
  background: var(--dot); cursor: pointer; -webkit-appearance: none; appearance: none;
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.lean-dot:hover { transform: scale(1.16); border-color: rgba(255, 255, 255, 0.55); }
.lean-dot:focus-visible { outline: none; border-color: #fff; }
.lean-dot.is-active {
  border-color: #fff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dot) 50%, transparent), 0 1px 4px rgba(0, 0, 0, 0.5);
}
/* count = a quiet status readout, pushed to the far end of the bar */
.finder-count {
  display: flex; align-items: center; margin: 0 0 0 auto; padding-left: 20px;
  font: 600 12px Inter, system-ui, sans-serif; letter-spacing: 0.01em;
  color: rgba(231, 234, 240, 0.75);
}
.finder-count::before {
  content: ""; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%;
  background: var(--cat); box-shadow: 0 0 8px color-mix(in srgb, var(--cat) 70%, transparent);
}
/* Clear filters — thin underlined text link, only shown when a filter is active */
.finder-clear {
  align-self: center; margin-left: 18px; padding: 0; border: none; background: none;
  font: 400 12px Inter, system-ui, sans-serif; letter-spacing: 0.01em;
  color: rgba(231, 234, 240, 0.6); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px; cursor: pointer; transition: color 0.15s ease;
}
.finder-clear:hover { color: #fff; }
.finder-clear[hidden] { display: none; }

/* hybridization note — overlaid on the MAP, upper-right, cinema display font */
.lean-overlay {
  position: absolute; z-index: 36; right: 28px;
  top: calc(var(--nav-h, 75px) + 90px);
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  text-align: right; pointer-events: none;
  animation: lean-ov-in 0.3s ease-out;
}
.lean-overlay[hidden] { display: none; }
@keyframes lean-ov-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* the concatenated filter title, e.g. "Indica-Hybrid  |  Vapes" */
.lean-overlay-name {
  font-family: var(--font-message), var(--font-display), sans-serif;
  font-weight: 800; font-size: clamp(24px, 3vw, 42px); line-height: 0.98;
  letter-spacing: -0.01em; color: #fff;
  text-shadow: 0 2px 18px rgba(0,0,0,0.55), 0 0 2px rgba(0,0,0,0.4);
}
/* the lean "feel" context — a DARK GLASS PILL under the title. ALWAYS one line
   (a pill should never wrap); ellipsis + a viewport cap keep it from overflowing. */
.lean-overlay-effect {
  width: max-content; max-width: min(420px, 80vw); padding: 8px 15px; border-radius: 999px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: rgba(10, 11, 16, 0.55);
  -webkit-backdrop-filter: blur(12px) saturate(1.1); backdrop-filter: blur(12px) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 6px 20px -8px rgba(0,0,0,0.6);
  font-family: Inter, system-ui, sans-serif; font-weight: 500;
  font-size: clamp(11.5px, 1vw, 14px); line-height: 1.3; color: rgba(255,255,255,0.9);
}
.lean-overlay-effect[hidden] { display: none; }

/* ---- PRODUCTS sidebar — DOCKED flush to the left, top (under the nav) + bottom.
   Full-height column, same frosted glass as .camctl. Square outer corners. ---- */
.finder-products {
  position: absolute; left: 0; z-index: 35;
  top: var(--fp-top, calc(var(--nav-h, 75px) + 64px)); /* flush under the toolbar */
  bottom: 0; width: 300px; display: flex; flex-direction: column;
  border-radius: 0; overflow: hidden;
  background: linear-gradient(160deg, rgba(20,22,32,.78), rgba(8,9,14,.88));
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  border-right: 1px solid rgba(255,255,255,.12);
  box-shadow: 14px 0 36px -16px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08);
  color: #eef1f8; font: 12px Inter, system-ui, sans-serif;
  animation: fp-in .22s ease-out;
}
@keyframes fp-in { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
.fp-head { display: flex; align-items: center; justify-content: space-between;
  padding: 13px 14px; border-bottom: 1px solid rgba(255,255,255,.1); }
.fp-title { font: 800 12px var(--font-display), Inter, sans-serif; letter-spacing: 0.14em;
  text-transform: uppercase; color: color-mix(in srgb, var(--cat) 45%, #fff); }
.fp-close { width: 24px; height: 24px; border: none; background: transparent; cursor: pointer;
  color: #9aa1ad; font-size: 18px; line-height: 1; border-radius: 7px; }
.fp-close:hover { background: rgba(255,255,255,.08); color: #fff; }
.fp-list { overflow-y: auto; padding: 8px 10px 14px; }
.fp-cat + .fp-cat { margin-top: 12px; }
.fp-cat-h { margin: 8px 4px 6px; font: 800 12px var(--font-display), Inter, sans-serif;
  letter-spacing: 0.04em; color: #fff; }
.fp-lean { margin: 0 0 6px; }
.fp-lean-h { display: flex; align-items: center; gap: 7px; margin: 7px 4px 3px;
  font: 700 10px Inter, system-ui, sans-serif; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--cat) 30%, #aab0bd); }
.fp-dot { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255,255,255,.25); }
.fp-sku { display: block; width: 100%; text-align: left; margin: 2px 0; padding: 8px 10px;
  border: 1px solid transparent; border-radius: 8px; cursor: pointer;
  background: rgba(255,255,255,.05); color: #dfe3ec; font: 500 12.5px Inter, system-ui, sans-serif;
  transition: background .15s ease, border-color .15s ease, color .15s ease; }
.fp-sku:hover { background: rgba(255,255,255,.1); color: #fff; }
.fp-sku.is-picked { background: color-mix(in srgb, var(--cat) 28%, rgba(255,255,255,.06));
  border-color: var(--cat); color: #fff; font-weight: 700; }

/* ============================================================================
   MOBILE — TOP toolbar keeps the "locate/specify" filters (Location · Category ·
   Product), scrollable + ≥44px targets. The HYBRIDIZATION dots + Clear relocate
   to a thumb-reachable BOTTOM bar. The map pan/tilt/zoom controls (.camctl) are
   HIDDEN on mobile (use native pinch/drag gestures instead).
   ========================================================================== */
@media (max-width: 720px) {
  /* hide the map control widget entirely on mobile */
  .camctl { display: none !important; }

  /* "PRODUCT FINDER" nav link — stack into 2 right-justified rows to save width */
  .nav-right--link {
    display: inline-block; max-width: 5.5em; text-align: right;
    line-height: 1.15; white-space: normal;
  }

  /* iOS Safari leaves a translucent fringe at the bottom edge of a fixed bar with
     backdrop-filter (reads as a gap). On the finder, make the nav OPAQUE + drop its
     border + blur so there's no fringe; the opaque toolbar then overlaps it solidly. */
  body[data-route="/finder"] .nav {
    border-bottom: none;
    background: #0e1015;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }

  /* --- top toolbar: Location · Category · Product (scrollable, big targets).
     OPAQUE + overlaps the nav by 3px so it's bulletproof-flush on iOS (no fringe,
     no sub-pixel hairline). --- */
  /* FIXED (not absolute) so the toolbar shares the NAV's viewport coordinate system.
     The nav is position:fixed/top:0; the portal is a separate fixed box whose top
     edge can differ from the viewport on mobile browsers (dynamic URL bar / visual
     vs layout viewport) — anchoring the toolbar to the portal left a real gap on
     device. Fixed + same top reference = butts exactly under the nav. */
  .finder-toolbar {
    position: fixed; top: var(--nav-h, 75px); left: 0; right: 0; height: auto;
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    gap: 0; padding: 10px 12px 12px;
    /* pull the opaque bar UP 2px under the nav so no map peeks at the top seam, and
       its own bg fully covers the control row (the gap was map showing through a
       transparent strip at the toolbar's edges). */
    margin-top: -2px; border-top: 2px solid #0e1015;
    background: #0e1015;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  /* a separate thin separator that sits ON the seam, above the opaque fill */
  .finder-toolbar::after {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: rgba(255,255,255,0.12);
  }
  .finder-toolbar::-webkit-scrollbar { display: none; }
  .finder-field { flex: 0 0 auto; padding: 4px 14px; border-right: none; }   /* no field dividers on mobile */
  .finder-field:first-child { padding-left: 4px; }
  .finder-field label { font-size: 9px; }
  /* every filter control shares ONE height (48px), vertically centered, so the ZIP
     field lines up exactly with the Category/Product triggers. */
  .finder-toolbar .finder-field { justify-content: center; }
  .finder-field select,
  .finder-toolbar .finder-zip,
  .finder-trigger { height: 48px; box-sizing: border-box; align-self: center; flex: 0 0 auto; }
  .finder-field select { min-width: 150px; padding: 0 32px 0 13px; font-size: 15px; }
  /* ZIP: minimum width that still shows the "ZIP code" placeholder — frees space for
     the Category/Product triggers. 16px font avoids iOS zoom-on-focus. */
  .finder-toolbar .finder-zip input { width: 78px; padding: 0 8px; font-size: 16px; }
  .finder-toolbar .finder-zip-go { width: 48px; }
  .finder-count { padding: 0 14px; white-space: nowrap; align-self: center; }
  .finder-portal.products-open .finder-toolbar { padding-left: 12px; }
  .lean-note { max-width: 100%; }

  /* title overlay: DOCKED full-width across the top (under the toolbar), centered —
     a glass band, not a floating pane (saves space). Feels note hidden on mobile. */
  .lean-overlay {
    left: 0; right: 0; top: calc(var(--nav-h, 75px) + 72px); gap: 0;
    align-items: center;
  }
  .lean-overlay-name {
    width: 100%; max-width: none; text-align: center; box-sizing: border-box;
    font-size: 15px; line-height: 1.2;
    padding: 8px 16px; border-radius: 0;
    background: rgba(12, 14, 19, 0.6);
    -webkit-backdrop-filter: blur(12px) saturate(1.1); backdrop-filter: blur(12px) saturate(1.1);
    border: none; border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.55);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
  }
  .lean-overlay-effect { display: none; }   /* no feels note on mobile */
  /* sidebar: narrower, and stop above the bottom filter bar (~70px + safe area) */
  .finder-products { width: min(264px, 80vw); bottom: calc(74px + env(safe-area-inset-bottom)); }

  /* --- BOTTOM filter bar (Hybridization dots + Clear) — appended to <body> by JS
     so it pins to the viewport (the toolbar's backdrop-filter would trap it). --- */
  .finder-bottombar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 47;
    display: flex; align-items: center; justify-content: center;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(14, 16, 21, 0.96);
    -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1);
    box-shadow: 0 -8px 28px -18px rgba(0, 0, 0, 0.8);
  }
  /* the bottom bar is a column: a top row (centered "Hybridization" label with the
     Clear link pinned at its right), then the segmented pill row below. */
  .finder-bottombar { flex-direction: column; gap: 7px; padding-top: 9px; }
  .finder-bottombar .finder-field--lean {
    position: static; flex-direction: column; align-items: center; gap: 7px;
    padding: 0; border: none; width: 100%;
  }
  .finder-bottombar .finder-field--lean > label {
    position: static; width: 100%; margin: 0; text-align: center; font-size: 9px;
    letter-spacing: 0.18em; text-transform: uppercase; color: rgba(231, 234, 240, 0.5);
  }
  /* SEGMENTED PILL: one connected control, 5 text segments with hairline dividers.
     The selected segment fills with its brand color; the rest are flat text. */
  .finder-bottombar .lean-dots {
    width: 100%; max-width: 420px; height: 44px; gap: 0; padding: 0;
    justify-content: stretch; align-items: stretch; overflow: hidden;
    border-radius: 12px; border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.05);
  }
  .finder-bottombar .lean-dot {
    flex: 1 1 0; min-width: 0; height: 100%; padding: 0 2px;
    display: flex; align-items: center; justify-content: center;
    border: none; border-left: 1px solid rgba(255,255,255,0.1); border-radius: 0;
    background: transparent; cursor: pointer;
    font: 700 11px Inter, system-ui, sans-serif; letter-spacing: 0.01em;
    color: var(--dot);   /* unselected: text in its own hybrid color */
    transition: background 0.15s ease, color 0.15s ease;
  }
  .finder-bottombar .lean-dot:first-child { border-left: none; }
  .finder-bottombar .lean-dot::before { content: none; }   /* no swatch */
  .finder-bottombar .lean-dot::after { content: attr(data-short); white-space: nowrap; }
  /* segments do NOT scale on hover (the inherited dot hover-scale looks wrong here) */
  .finder-bottombar .lean-dot:hover { transform: none; background: rgba(255,255,255,0.05); }
  /* selected segment: FILLED with its hybrid color, BLACK text */
  .finder-bottombar .lean-dot.is-active {
    background: var(--dot); color: #0a0a0c; text-shadow: none;
  }
  .finder-bottombar .lean-dot.is-active:hover { background: var(--dot); }
  .finder-bottombar .lean-dot:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
  /* Clear sits on the LABEL row (top), right-aligned — small + tight so it never
     reaches the segmented pill below it. */
  .finder-bottombar .finder-clear {
    position: absolute; top: 7px; right: 14px;
    align-self: auto; margin: 0; padding: 0; line-height: 13px; font-size: 10px;
    white-space: nowrap; z-index: 2;
  }

  /* the in-toolbar count ("12 dispensaries carry this") is hidden on mobile */
  .finder-count { display: none; }

  /* --- Category & Product: native <select> hidden, custom TRIGGER button shown.
     The two trigger fields split the leftover width EQUALLY; Location (ZIP) keeps
     its natural size. Toolbar no longer needs to scroll. --- */
  .finder-toolbar { overflow-x: visible; }
  .finder-toolbar select[data-facet] { display: none; }
  .finder-toolbar .finder-field:has(.finder-trigger) { flex: 1 1 0; min-width: 0; padding: 4px 6px; }
  .finder-toolbar .finder-field:has(.finder-trigger) > label { display: none; }  /* no duplicate label */
  .finder-toolbar .finder-field:has(.finder-zip) > label { display: none; }      /* "Location" — ZIP placeholder is enough */
  .finder-trigger {
    display: flex; align-items: center; width: 100%;
    height: 48px; padding: 0 16px 0 9px; border-radius: 10px;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
    color: #f2f4f8; cursor: pointer; text-align: left; position: relative;
  }
  .finder-trigger::after {                 /* chevron */
    content: ""; position: absolute; right: 7px; top: 50%; width: 7px; height: 7px;
    border-right: 1.5px solid #aab0bd; border-bottom: 1.5px solid #aab0bd;
    transform: translateY(-70%) rotate(45deg);
  }
  .finder-trigger[aria-expanded="true"]::after { transform: translateY(-30%) rotate(-135deg); }
  .finder-trigger-val {
    font: 600 13px Inter, system-ui, sans-serif; line-height: 1;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;   /* clip long values */
  }
  .finder-toolbar .finder-field:has(.finder-trigger) { padding: 4px 3px; }   /* tighter at narrow widths */
  .finder-trigger-val.is-placeholder { color: rgba(231,234,240,0.5); font-weight: 500; }

  /* --- DRAWER slides UP and docks onto the color-chip pane (bottom bar), not the
     top. It sits just above the bottom bar (--fp-bottombar-h, measured in JS). --- */
  .finder-drawer-scrim {
    position: fixed; inset: 0; z-index: 58; background: rgba(0,0,0,0.5);
    opacity: 0; transition: opacity 0.25s ease;
  }
  .finder-drawer-scrim.is-open { opacity: 1; }
  .finder-drawer {
    position: fixed; left: 0; right: 0; z-index: 59;
    max-height: 60vh; display: flex; flex-direction: column;
    background: rgba(16,18,24,0.98);
    transition: transform 0.28s cubic-bezier(.2,.7,.2,1);
  }
  .finder-drawer.is-open { transform: translateY(0); }

  /* SKU (Product) drawer — docks onto the bottom color-chip pane, slides UP. */
  .finder-drawer--bottom {
    top: auto; bottom: var(--fp-bottombar-h, 150px); padding: 4px 0 8px;
    border-top: 1px solid rgba(255,255,255,0.12);
    border-radius: 18px 18px 0 0; box-shadow: 0 -14px 40px -10px rgba(0,0,0,0.7);
    transform: translateY(110%);
  }
  /* peek (after select): collapse down so just the top strip stays visible */
  .finder-drawer--bottom.is-peek { transform: translateY(calc(100% - 46px)); }

  /* Category (and other) drawers — drop DOWN from under the toolbar, at the top. */
  .finder-drawer--top {
    top: calc(var(--nav-h, 75px) + 64px); bottom: auto; padding: 8px 0 4px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    border-radius: 0 0 18px 18px; box-shadow: 0 14px 40px -10px rgba(0,0,0,0.7);
    transform: translateY(-110%);
  }
  /* peek for a top drawer: slide UP so only the bottom strip stays visible */
  .finder-drawer--top.is-peek { transform: translateY(calc(-100% + 46px)); }

  .finder-drawer.is-peek .finder-drawer-list { pointer-events: none; }
  .finder-drawer.is-peek .finder-drawer-grip,
  .finder-drawer.is-peek .finder-drawer-title { cursor: pointer; }
  .finder-drawer-grip { display: flex; justify-content: center; padding: 9px 0 4px; cursor: grab; }
  .finder-drawer-grip span { width: 40px; height: 4px; border-radius: 99px; background: rgba(255,255,255,0.28); }
  .finder-drawer-title { margin: 2px 0 8px; text-align: center;
    font: 800 10px var(--font-display), sans-serif; letter-spacing: 0.18em; text-transform: uppercase;
    color: rgba(231,234,240,0.55); }
  .finder-drawer-list { overflow-y: auto; padding: 0 8px 4px; }
  .finder-drawer-opt {
    display: flex; align-items: center; width: 100%; min-height: 52px; padding: 0 16px;
    border: none; background: transparent; border-radius: 12px; cursor: pointer;
    font: 600 16px Inter, system-ui, sans-serif; color: #e7eaf0; text-align: left;
  }
  .finder-drawer-opt:hover { background: rgba(255,255,255,0.06); }
  .finder-drawer-opt.is-sel { background: color-mix(in srgb, var(--cat) 26%, rgba(255,255,255,0.06)); color: #fff; }
  .finder-drawer-opt.is-sel::after { content: "✓"; margin-left: auto; color: var(--cat); font-weight: 800; }

  /* --- products list → BOTTOM SHEET (slide up), swipe-down to dismiss. Sits flush
     just above the bottom color dock — --fp-bottombar-h is its measured height
     (already includes the safe-area), so no guesswork / gap. --- */
  .finder-products {
    left: 0; right: 0; width: auto; top: auto;
    bottom: var(--fp-bottombar-h, 104px);
    max-height: 50vh; border-radius: 18px 18px 0 0;
    border: 1px solid rgba(255,255,255,0.12); border-bottom: none;
    box-shadow: 0 -16px 40px -14px rgba(0,0,0,0.65);
    transition: transform 0.28s cubic-bezier(.2,.7,.2,1);
  }
  .finder-products .fp-grip { display: flex; justify-content: center; padding: 9px 0 3px; cursor: grab; }
  .finder-products .fp-grip span { width: 40px; height: 4px; border-radius: 99px; background: rgba(255,255,255,0.28); }

  /* PEEK: after a product is picked, collapse the sheet to just its top tab
     (grip + "Products" header). Tap the tab to expand again. */
  .finder-products.is-peek { transform: translateY(calc(100% - 76px)); }
  .finder-products.is-peek .fp-grip,
  .finder-products.is-peek .fp-head { cursor: pointer; }
  .finder-products.is-peek .fp-list { pointer-events: none; }

  /* nicer close × on the bottom sheet: a round bordered button, larger tap target */
  .finder-products .fp-close {
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.16);
    color: rgba(231,234,240,0.8); font-size: 17px; line-height: 1; font-weight: 400;
  }
  .finder-products .fp-close:hover,
  .finder-products .fp-close:active { background: rgba(255,255,255,0.14); color: #fff; }
  .finder-products .fp-head { padding: 12px 14px; }

  /* On mobile, the in-page store-finder MAP section on product pages is redundant
     with the dedicated Product Finder — hide it (keeps the mobile pages clean).
     The standalone Product Finder portal (.finder-portal) is unaffected. */
  .sec.finder.lean-merged { display: none; }
}

/* the drag grip only shows on mobile (bottom-sheet); hidden on desktop dock */
.fp-grip { display: none; }

/* ============================================================================
   PRODUCT FINDER CTA — full-bleed band in the PAGE'S BRAND COLOR (--cat), dark
   editorial ink on it. Big number-led layout, not a glassy card.
   The section wrapping it gets the brand fill edge-to-edge.
   ========================================================================== */
/* The brand fill lives on the SECTION (which never moves), so the .reveal slide of
   the inner .finder-cta can't expose the dark page-bg behind it during scroll. */
.sec.finder-cta-sec { padding: 0; background: var(--cat); }
.finder-cta {
  position: relative; overflow: hidden;
  /* ink reads on the bright brand fill — white where contrast holds, else near-black */
  --cta-ink: var(--cat-on, #0a0a0c);
  background: var(--cat);
  color: var(--cta-ink);
  padding: clamp(56px, 10vw, 120px) clamp(24px, 8vw, 110px);
}
/* large faint wordmark watermark + a tonal panel for depth (not glassy) */
.finder-cta::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(140% 120% at 100% 0%, rgba(255,255,255,0.16), transparent 55%),
    linear-gradient(180deg, transparent, rgba(0,0,0,0.10));
  pointer-events: none;
}
.finder-cta-inner { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; }
.finder-cta-eyebrow {
  display: inline-flex; align-items: center; gap: 9px; margin: 0 0 22px;
  font: 800 11px var(--font-display), sans-serif; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--cta-ink); opacity: 0.72;
}
.finder-cta-eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--cta-ink); opacity: 0.5; }
.finder-cta-title {
  margin: 0 0 22px; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(36px, 7vw, 78px); line-height: 0.96; letter-spacing: -0.03em;
  color: var(--cta-ink); max-width: 14ch;
}
.finder-cta-lede {
  margin: 0 0 34px; max-width: 50ch; font-size: clamp(16px, 1.7vw, 20px); line-height: 1.5;
  font-weight: 500; color: var(--cta-ink); opacity: 0.82;
}
/* capability points → numbered editorial row, not bullet dots */
.finder-cta-points {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 3vw, 40px);
  margin: 0 0 42px; padding: 36px 0 0; list-style: none;
  border-top: 1.5px solid color-mix(in srgb, var(--cta-ink) 22%, transparent);
}
.finder-cta-points li {
  font-size: clamp(13px, 1.4vw, 15.5px); font-weight: 600; line-height: 1.35;
  color: var(--cta-ink); counter-increment: cta;
}
.finder-cta-points { counter-reset: cta; }
.finder-cta-points li::before {
  content: "0" counter(cta); display: block; margin-bottom: 8px;
  font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.02em;
  opacity: 0.5;
}
.finder-cta-btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 18px 34px; border-radius: 999px; text-decoration: none;
  background: var(--cta-ink); color: var(--cat); font-weight: 800; letter-spacing: 0.01em;
  font-size: 15px;
  transition: transform 0.15s ease, opacity 0.2s ease;
}
.finder-cta-btn:hover { transform: translateY(-2px); opacity: 0.92; }
.finder-cta-btn svg { width: 18px; height: 18px; }
.finder-cta-note { margin: 20px 0 0; font-size: 12px; color: var(--cta-ink); opacity: 0.55; letter-spacing: 0.02em; }
@media (max-width: 600px) {
  .finder-cta { padding: 44px 22px 48px; }
  .finder-cta-points { grid-template-columns: 1fr; gap: 16px; padding-top: 26px; }
  .finder-cta-points li { display: flex; align-items: baseline; gap: 12px; }
  .finder-cta-points li::before { margin-bottom: 0; font-size: 16px; }
}

/* find-it CTA */
.finder { text-align: center; }
.finder .btn { display: inline-block; margin-top: 22px; padding: 15px 30px; border-radius: 999px;
  background: var(--cat); color: #0a0710; font-weight: 700; text-decoration: none; letter-spacing: 0.01em;
  box-shadow: 0 10px 40px var(--cat-glow); }
.finder .btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-2); box-shadow: none; margin-left: 10px; }

/* chips (category filters / tags) */
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }
.chip { display: inline-block; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700;
  color: var(--cat-ink); border: 1px solid var(--cat-line); border-radius: 999px; padding: 5px 12px; background: var(--cat-fill); }

/* featured post (image + text, two-up) */
.feature { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(20px,3vw,42px); align-items: center; }
.feature .post-title { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.01em; font-size: clamp(1.4rem,2.4vw,2.1rem); line-height: 1.08; margin: 12px 0 10px; }
.post-excerpt { margin: 0; color: var(--ink-2); line-height: 1.6; }
.post-meta { margin: 14px 0 0; font-size: 0.8rem; color: var(--ink-3); letter-spacing: 0.04em; }
.post-card .post-title { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; line-height: 1.18; margin: 8px 0 6px; }
@media (max-width: 820px) { .feature { grid-template-columns: 1fr; } }

/* responsive grid + download/asset card (Media & Graphics) */
.grid { display: grid; gap: 18px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.dl-card { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--surface-2); }
.dl-card .slot { border-radius: 0; border: none; }
.dl-meta { padding: 14px 16px 18px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dl-name { font-family: var(--font-display); font-weight: 700; margin: 0; font-size: 1.02rem; }
.dl-sub { margin: 2px 0 0; font-size: 0.82rem; color: var(--ink-2); }
.dl-get { font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cat-ink); white-space: nowrap; }
@media (max-width: 820px) { .grid-3 { grid-template-columns: 1fr; } }

/* small standardized utilities (keep pages free of ad-hoc inline styles) */
.mt { margin-top: 26px; }
.center { margin-left: auto; margin-right: auto; }
.slot--mini { min-height: 84px; }
.lean-1 { --lean: var(--pf-1); } .lean-2 { --lean: var(--pf-2); }
.lean-3 { --lean: var(--pf-3); } .lean-4 { --lean: var(--pf-4); }
.lean-5 { --lean: var(--pf-5); }

/* small legal/prose page */
.prose { max-width: 72ch; }
.prose h2 { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; margin: 34px 0 10px; color: var(--cat-ink); }
.prose p, .prose li { font-size: 0.98rem; line-height: 1.7; color: var(--ink-2); }

@media (max-width: 820px) {
  .info-band { grid-template-columns: repeat(2, 1fr); }
  .info-cell { min-height: 130px; padding: 18px 18px 20px; }
  .info-cell-v { font-size: 1.06rem; }
  .proof { grid-template-columns: 1fr; gap: 26px; }
  .proof-item { border-left: none; padding: 0; }
}