/* YOSO, local discovery with member pricing */

/* Palette is taken straight off the wordmark: warm ink ground (the black the
   logo was drawn on), and the logo's own orange-to-gold ramp as the whole
   accent system. Green survives in one job only -- "open now" / "verified" --
   because that meaning has to stay separate from the brand colour. */
:root{
  --canvas:#0C0A09; --canvas-2:#070605;
  --panel:#16110D; --panel-2:#221913;
  --line:#2C2119; --line-strong:#4A382A;
  --accent:#FF6A2E; --accent-hover:#FF8347; --accent-muted:rgba(255,106,46,.20);
  --gold:#FFB23D; --gold-muted:rgba(255,178,61,.18);
  --brand-ramp:linear-gradient(180deg,#FEA702,#FD6B03 54%,#FE3A08);
  /* The wordmark's ramp, sampled straight off brand-logo.png: amber at the top
     of the Y arms, through orange, to the red-orange at the tip of the pin. Set
     vertically, the way it runs in the mark itself. */
  --brand-ramp-text:linear-gradient(180deg,#FEA702 0%,#FD6B03 54%,#FE2F05 100%);
  --jade:#7BD68F;
  --text-primary:#F6F1EA; --text-secondary:#B3A69A; --dim:#8A7C70;

  /* Familjen Grotesk for both display and body: it holds up at headline size
     and at 14px, so the site runs on one family instead of a pairing that has
     to be reconciled. Deliberately quiet -- the logo, the hero footage and the
     offer ticker are already carrying the personality, and the type's job is to
     stay out of their way. Spline Sans Mono handles prices and labels; it has
     tabular figures, which the DM Mono it replaced also had. */
  --display:"Familjen Grotesk",-apple-system,system-ui,sans-serif;
  --body:"Familjen Grotesk",-apple-system,system-ui,sans-serif;
  --mono:"Spline Sans Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --tshadow:0 1px 2px rgba(6,4,3,.95),0 3px 12px rgba(6,4,3,.78),0 10px 44px rgba(6,4,3,.8);
  --wrap:1240px; --pad:clamp(18px,4.4vw,56px);
  /* The nav is as tall as the logo plus its 11px padding, so the fallback is
     derived from the same clamp the logo uses instead of being a fixed guess.
     app.js measures the real bar and overwrites this, but the CSS value has to
     be right on its own: it is what the first paint uses, and a wrong one puts
     the search bar under the nav until the script runs. */
  --navh:clamp(74px,calc(6.2vw + 22px),110px);
}
html[data-lang="zh"]{
  --display:"Familjen Grotesk","Noto Sans SC",-apple-system,system-ui,sans-serif;
  --body:"Familjen Grotesk","Noto Sans SC",-apple-system,system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html,body{overflow-x:hidden;overflow-x:clip}
/* color-scheme is what tells the browser to paint its own furniture dark:
   without it Windows renders a light scrollbar, which on this canvas reads as
   a white bar down the right edge. It fixes native form controls too. */
html{-webkit-text-size-adjust:100%;color-scheme:dark;
  scrollbar-width:thin;scrollbar-color:var(--line-strong) var(--canvas-2)}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--canvas-2)}
::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px;border:3px solid var(--canvas-2)}
::-webkit-scrollbar-thumb:hover{background:var(--accent)}
::-webkit-scrollbar-corner{background:var(--canvas-2)}
body{margin:0;background:var(--canvas);color:var(--text-primary);font-family:var(--body);line-height:1.6;-webkit-font-smoothing:antialiased;animation:pagein .8s var(--ease-out) both}
@keyframes pagein{from{opacity:0}to{opacity:1}}
img{max-width:100%;height:auto;display:block}
/* Familjen Grotesk tops out at 700 and has no width axis, so the presence comes
   from tight tracking rather than from weight or stretch. */
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.06;letter-spacing:-.026em;margin:0}
p{margin:0}
ul,ol,dl,dd{margin:0;padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
.mono{font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.jade{color:var(--jade)} .accent{color:var(--accent)} .dim{color:var(--dim)}
/* The O carries the logo's own orange-to-gold ramp, so the wordmark in running
   text is the same object as the mark in the corner. */
/* text-shadow must go: with a transparent fill the heading's dark shadow shows
   straight through the letter and the O reads as a hole in the word. */
.o{display:inline-block;color:var(--gold);background:var(--brand-ramp-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none}
.small{font-size:12.5px}
.center{text-align:center;margin-inline:auto}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;z-index:200;background:var(--accent);color:#160603;padding:12px 18px;border-radius:0 0 12px 0;font-weight:700}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* Environment: the signature.
   Not drifting blur blobs -- concentric rings radiating from two anchor points,
   the logo's O read as a location ping. Geometric, slow, and pure CSS, so a
   phone gets exactly the same motion a desktop does. */
/* Flat across the width on purpose. This used to be a radial gradient falling
   to #070605 at its edges, and with the content capped at --wrap the exposed
   margin on a wide screen read as two black bands down the sides. The warmth
   now varies only vertically, so every column of the page is the same value. */
.env{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:linear-gradient(180deg,#151009 0%,var(--canvas) 38%,var(--canvas) 100%)}
.env span{position:absolute;display:block}
/* Two repeating-radial-gradient layers used to sit here painting concentric
   rings across the whole page. They belonged to the CSS 3D hero that the video
   replaced, and over large flat areas of the canvas they read as banding -- the
   rings down the sides. Both elements are gone from the markup now; only the
   grain remains, which is a texture rather than a pattern. */
.env-grain{inset:0;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------------- nav ---------------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:90;display:flex;align-items:center;gap:clamp(10px,2.4vw,30px);padding:11px var(--pad);min-height:var(--navh);transition:background .4s var(--ease),backdrop-filter .4s var(--ease),border-color .4s var(--ease);border-bottom:1px solid transparent}
.nav.solid{background:rgba(14,11,9,.9);backdrop-filter:blur(16px);border-bottom-color:var(--line)}
.brand{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.brand-img{height:clamp(52px,6.2vw,88px);width:auto;display:block}
.foot-brand .brand-img{height:clamp(58px,6.6vw,96px)}
.brand-text{display:flex;flex-direction:column;line-height:1.05;gap:1px}
.bw-a{color:var(--accent)}
.brand-tagline{font-family:var(--mono);font-size:8.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary);white-space:nowrap}
.brand-tagline::before{content:"— ";color:var(--dim)}
.brand-tagline::after{content:" —";color:var(--dim)}
.foot-tag .bw-a{color:var(--accent)}
.brand-mark{width:24px;height:24px;color:var(--accent);flex:0 0 auto}
.brand-word{font-family:var(--display);font-weight:800;font-size:21px;letter-spacing:-.03em}
.nav-links{display:flex;gap:clamp(10px,1.5vw,20px);margin-left:auto;font-size:14px;font-weight:500;color:var(--text-secondary)}
.nav-links a{position:relative;padding:6px 0;white-space:nowrap;transition:color .3s var(--ease)}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--accent);transition:right .45s var(--ease-out)}
/* Home carries an icon so the way back is recognisable at a glance on every
   page, not just findable by reading the row. */
.nav-home{display:inline-flex;align-items:center;gap:6px}
.nav-home svg{width:16px;height:16px;flex:0 0 auto}
body[data-page="home"] .nav-home{color:var(--accent)}
body[data-page="home"] .nav-home::after{right:0}
.nav-links a:hover{color:var(--text-primary)} .nav-links a:hover::after{right:0}
.nav-right{display:flex;align-items:center;gap:7px;margin-left:clamp(8px,1.6vw,18px)}
.lang{display:flex;align-items:center;gap:3px;background:transparent;border:1px solid var(--line-strong);border-radius:999px;padding:6px 10px;font-family:var(--mono);font-size:11.5px;cursor:pointer;color:var(--text-secondary);transition:border-color .3s var(--ease),color .3s var(--ease)}
.lang:hover{border-color:var(--accent);color:var(--text-primary)}
.lang-sep{opacity:.4}
html[data-lang="en"] .lang-en,html[data-lang="zh"] .lang-zh{color:var(--accent)}
.navburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;background:transparent;border:1px solid var(--line-strong);border-radius:10px;cursor:pointer;padding:0 10px}
.navburger span{display:block;height:1.6px;background:currentColor;transition:transform .35s var(--ease)}

/* ---------------- buttons ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid transparent;border-radius:999px;cursor:pointer;font-family:var(--body);font-weight:700;font-size:14px;letter-spacing:-.01em;padding:9px 18px;background:transparent;color:var(--text-primary);white-space:nowrap;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease-out),box-shadow .3s var(--ease)}
.btn-accent{background:var(--brand-ramp);color:#1A0E04;box-shadow:0 6px 22px rgba(255,106,46,.24)}
.btn-accent:hover{filter:brightness(1.08);transform:translateY(-2px);box-shadow:0 12px 32px rgba(255,106,46,.34)}
.btn-line{border-color:var(--line-strong)}
.btn-line:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.btn-ghost{color:var(--text-secondary)} .btn-ghost:hover{color:var(--text-primary)}
.btn-lg{padding:13px 24px;font-size:15.5px}
.btn-sm{padding:7px 13px;font-size:13px}
.btn-full{width:100%}
@media (pointer:coarse){.btn{min-height:44px}.btn-sm{min-height:38px}}

/* ---------------- hero with the search box ----------------
   The scroll-scrubbed hero video is back (2026-08-18, by request). The CSS 3D
   valley that briefly replaced it is gone; keeping both fought for the same
   space. Colours here are the new warm-ink palette, not the old teal. */
.hero{position:relative;height:200vh;z-index:1}
.stage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--canvas-2)}
.stage .poster,.stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stage .poster{background-size:cover;background-position:50% 46%;transition:opacity .8s var(--ease)}
.stage video{opacity:0;transition:opacity .8s var(--ease);will-change:transform;transform:translateZ(0)}
.stage.video-ready video{opacity:1}
.stage.video-ready .poster{opacity:0}
.stage.video-failed video{display:none}
/* A warm grade that lifts rather than darkens: the footage is the hero, so it
   gets brighter, and only the strip actually under the headline is scrimmed. */
.stage .poster,.stage video{filter:saturate(.95) contrast(1.04) brightness(1.16) sepia(.07)}
/* Scrim, kept off the picture: a soft band behind the headline for contrast,
   plus edges under the nav and the ticker. The middle of the frame stays open
   so the scene is actually visible. */
.scrim{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(to bottom,
    rgba(12,10,9,.62) 0%,
    rgba(12,10,9,.30) 9%,
    rgba(12,10,9,.42) 26%,
    rgba(12,10,9,.42) 52%,
    rgba(12,10,9,.16) 66%,
    rgba(12,10,9,.55) 88%,
    rgba(12,10,9,.88) 100%)}

/* ---- boba, poured on a loop ----
   One 9s cycle: the stream falls, the cup fills, the pearls settle and bob.
   It sits in the right margin of the hero, clear of the headline and above the
   ticker, and it is the only warm-blooded thing in an otherwise geometric page. */
.boba{position:absolute;right:clamp(18px,4vw,72px);bottom:104px;z-index:2;
  width:clamp(96px,10vw,148px);pointer-events:none;
  filter:drop-shadow(0 12px 26px rgba(6,4,3,.55));
  animation:bobain 1s var(--ease-out) 1.7s both}
@keyframes bobain{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.boba svg{width:100%;height:auto;display:block;overflow:visible}
.boba .cup{fill:rgba(255,246,235,.13);stroke:rgba(255,238,220,.62);stroke-width:2.6;stroke-linejoin:round}
.boba .lid{fill:rgba(255,238,220,.78)}
.boba .straw{fill:var(--gold);opacity:.92}
.boba .pearls circle{fill:#2A1608}

/* the stream: falls, then stops while the cup is full */
.pour{fill:rgba(201,138,75,.9);transform-origin:65px 6px;animation:pour 9s var(--ease) infinite}
@keyframes pour{
  0%{transform:scaleY(0);opacity:0}
  6%{opacity:1}
  8%,42%{transform:scaleY(1);opacity:1}
  50%,100%{transform:scaleY(0);opacity:0}
}
/* the tea line rising to meet it */
.fill{transform-origin:50% 100%;animation:fill 9s var(--ease) infinite}
@keyframes fill{
  0%,6%{transform:translateY(112px)}
  46%{transform:translateY(8px)}
  86%{transform:translateY(8px)}
  100%{transform:translateY(112px)}
}
/* pearls dance once the tea is in */
.pearls circle{animation:pearl 2.4s var(--ease) infinite;transform-origin:center;opacity:0}
.pearls circle:nth-child(1){animation-delay:3.2s}
.pearls circle:nth-child(2){animation-delay:3.45s}
.pearls circle:nth-child(3){animation-delay:3.05s}
.pearls circle:nth-child(4){animation-delay:3.7s}
.pearls circle:nth-child(5){animation-delay:3.3s}
.pearls circle:nth-child(6){animation-delay:3.55s}
@keyframes pearl{
  0%{opacity:0;transform:translateY(10px) scale(.7)}
  12%{opacity:1}
  40%{transform:translateY(-13px) scale(1.06)}
  70%{transform:translateY(3px) scale(.97)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
@media (prefers-reduced-motion:reduce){
  .boba,.pour,.fill,.pearls circle{animation:none}
  .boba{opacity:1;transform:none}
  .pour{opacity:0}
  .fill{transform:translateY(8px)}
  .pearls circle{opacity:1;transform:none}
}
/* below this the hero is already tight on room and the cup would crowd the copy */
@media (max-width:900px){ .boba{display:none} }

/* live offer ticker across the foot of the hero */
.ticker{position:absolute;left:0;right:0;bottom:0;z-index:3;overflow:hidden;padding:14px 0;
  border-top:1px solid var(--line);background:linear-gradient(to top,rgba(12,10,9,.92),rgba(12,10,9,.35));
  -webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent)}
.ticker-lane{display:flex;width:max-content;gap:0;animation:lane 64s linear infinite}
.ticker:hover .ticker-lane{animation-play-state:paused}
.tick{display:inline-flex;align-items:center;gap:9px;padding:0 26px;white-space:nowrap;font-size:13.5px;
  border-right:1px solid var(--line)}
.tick-dot{width:6px;height:6px;border-radius:50%;background:var(--jade);flex:0 0 auto;animation:tickdot 2.6s var(--ease) infinite}
.tick b{font-weight:600;color:var(--text-primary)}
.tick-o{color:var(--text-secondary)}
.tick-s{color:var(--gold);font-size:12.5px}
@keyframes lane{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes tickdot{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(123,214,143,.45)}60%{opacity:.55;box-shadow:0 0 0 6px rgba(123,214,143,0)}}
@media (prefers-reduced-motion:reduce){.ticker-lane{animation:none}.tick-dot{animation:none}}
@media (max-width:720px){.tick{font-size:12.5px;padding:0 18px}}

.hero-inner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:calc(var(--navh) + 14px) var(--pad) 118px;text-shadow:var(--tshadow)}
.hero-kicker{margin-bottom:18px}
.chip{display:inline-block;background:rgba(12,10,9,.55);border:1px solid rgba(122,100,80,.34);border-radius:999px;padding:6px 14px;backdrop-filter:blur(10px);font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-secondary);text-shadow:0 1px 3px rgba(6,4,3,.85)}
.hero-h{font-size:clamp(2.2rem,5.8vw,4.6rem);max-width:min(18ch,94vw);letter-spacing:-.032em}
/* Chinese sets far wider per character, so the Latin measure strands the last
   glyphs on their own line. */
html[data-lang="zh"] .hero-h{max-width:min(15em,94vw);letter-spacing:0}

/* the asker */
.asker{width:min(760px,100%);margin-top:30px;text-shadow:none}
.asker-row{display:flex;align-items:center;gap:8px;background:rgba(18,14,11,.88);backdrop-filter:blur(18px);border:1px solid var(--line-strong);border-radius:999px;padding:7px 7px 7px 18px;box-shadow:0 20px 60px rgba(6,4,3,.55);transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.asker-row:focus-within{border-color:var(--accent);box-shadow:0 20px 60px rgba(255,106,46,.22)}
.asker-ico{width:18px;height:18px;color:var(--text-secondary);flex:0 0 auto}
.asker input{flex:1;min-width:0;background:transparent;border:0;outline:none;padding:12px 4px;font-size:15.5px}
.asker input::placeholder{color:#8A7C70}
.mic{flex:0 0 auto;width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line-strong);border-radius:50%;background:transparent;color:var(--text-secondary);cursor:pointer;transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease)}
.mic svg{width:17px;height:17px}
.mic:hover{color:var(--accent);border-color:var(--accent)}
.mic.listening{color:#1A0E04;background:var(--accent);border-color:var(--accent);animation:mic 1.3s var(--ease) infinite}
.mic.mic-off{opacity:.45}
@keyframes mic{0%,100%{box-shadow:0 0 0 0 rgba(255,106,46,.5)}70%{box-shadow:0 0 0 12px rgba(255,106,46,0)}}
.asker-go{flex:0 0 auto}
.asker-hint{margin-top:10px;font-size:13px;color:var(--accent)}
.asker-sm .asker-row{padding-left:14px;box-shadow:none;background:var(--panel)}
.asker-sm input{padding:9px 4px;font-size:14.5px}

.quickchips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:22px;text-shadow:none}

/* The opening. One orchestrated sequence rather than scattered effects: the
   ring fires, the line rises, the two O's drop in last and land like pins
   (which is what the mark is), then the ticker slides up under it. */
.hero-kicker,.asker,.quickchips{opacity:0;transform:translateY(18px);animation:heroin .9s var(--ease-out) both}
.hero-kicker{animation-delay:.25s}
.asker{animation-delay:1.35s}
.quickchips{animation-delay:1.5s}
@keyframes heroin{to{opacity:1;transform:none}}

/* The headline arrives word by word, each one tipping up into place. --i is
   written per piece by splitHeadline() in app.js, so the cadence holds however
   long the line is and in either language. */
.hero-h{perspective:900px}
.hero-h .w{display:inline-block;font-style:normal;opacity:0;transform:translateY(28px) rotateX(-52deg);
  transform-origin:50% 100%;animation:wordin .78s var(--ease-out) both;
  animation-delay:calc(.45s + var(--i,0) * .07s)}
@keyframes wordin{to{opacity:1;transform:none}}

/* The wordmark lands as one object, the way a logo should, and takes the brand
   ramp across the whole word.

   Colouring only the two O's was tried and dropped: inside a running headline
   at this size the alternating white/gold split fragments the word into four
   coloured shapes instead of one name. That device needs the isolation it has
   in the logo lockup; in a sentence it reads as a mistake. */
.hero-h .wm{display:inline-block;font-style:normal;font-kerning:normal;
  font-feature-settings:"kern" 1;letter-spacing:-.038em;white-space:nowrap;
  background:var(--brand-ramp-text);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--gold);text-shadow:none;
  opacity:0;transform:translateY(28px) rotateX(-52deg);transform-origin:50% 100%;
  animation:wmin .8s var(--ease-out) both;animation-delay:calc(.45s + var(--i,0) * .07s)}
@keyframes wmin{
  0%{opacity:0;transform:translateY(28px) rotateX(-52deg);filter:drop-shadow(0 0 0 rgba(255,178,61,0))}
  62%{opacity:1;filter:drop-shadow(0 0 18px rgba(255,178,61,.38))}
  100%{opacity:1;transform:none;filter:drop-shadow(0 0 7px rgba(255,178,61,.2))}
}
/* Plain inline: an inline-block here would break kerning against Y and S.
   The o's are lowercase, so they already sit at x-height and need no size
   correction; the earlier .92em shrink was cancelling a capital's overshoot
   and would double up here. */
.hero-h .o{display:inline;text-shadow:none}
.ticker{animation:tickerin 1s var(--ease-out) 1.5s both}
@keyframes tickerin{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .hero-kicker,.asker,.quickchips,.hero-h .w,.hero-h .wm,.ticker{animation:none;opacity:1;transform:none;filter:none}
}
.qchip{background:rgba(18,14,11,.72);backdrop-filter:blur(10px);border:1px solid var(--line-strong);border-radius:999px;padding:8px 15px;font-size:13.5px;font-weight:500;color:var(--text-secondary);transition:border-color .3s var(--ease),color .3s var(--ease)}
.qchip:hover{border-color:var(--accent);color:var(--accent)}

.cue{position:absolute;left:50%;bottom:74px;transform:translateX(-50%);width:22px;height:34px;border:1.5px solid rgba(179,166,154,.4);border-radius:12px;z-index:4}
.cue span{position:absolute;left:50%;top:6px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:var(--accent);animation:cue 2.4s var(--ease) -.4s infinite}
@keyframes cue{0%,100%{transform:translateY(0);opacity:1}55%{transform:translateY(12px);opacity:.15}}
@media (max-height:620px){.cue{display:none}}

/* the five static hero gates, identical to the GATES array in app.js */
@media (max-width: 720px),
       (orientation: portrait) and (max-width: 1024px),
       (orientation: portrait) and (pointer: coarse),
       (orientation: landscape) and (pointer: coarse) and (max-height: 560px),
       (prefers-reduced-motion: reduce){
  .hero{height:auto}
  .stage{position:relative;height:auto;min-height:100svh}
  .stage video{display:none}
  .hero-inner{position:relative;min-height:100svh}
  .cue{display:none}
}
/* No scroll-scrub on touch/small/reduced-motion, so the still frame drifts
   instead of sitting dead. This is the whole reason phones do not feel like a
   different, deader site. */
.stage.kb .poster{animation:heroKB 22s var(--ease) infinite alternate}
body.paused .stage.kb .poster{animation-play-state:paused}
@keyframes heroKB{from{transform:scale(1) translate3d(0,0,0)}to{transform:scale(1.12) translate3d(-2%,-1.4%,0)}}

/* ---------------- sections ---------------- */
/* Every view needs its own stacking context above .env. Without this, the fixed
   background layer paints over any static text, and only positioned descendants
   such as card images survive. */
.view{position:relative;z-index:1}
/* Padding is per-section, so two neighbours used to stack their full top and
   bottom values and open a 198px hole between the offer rail and the category
   grid. Halving it and letting the two halves meet gives one deliberate gap
   instead of two arbitrary ones. */
.sec{position:relative;z-index:1;padding:clamp(30px,4vw,54px) 0}
.sec:first-of-type{padding-top:clamp(48px,6vw,80px)}
.sec:last-of-type{padding-bottom:clamp(48px,6vw,80px)}
.wrap{width:min(var(--wrap),100% - var(--pad)*2);margin-inline:auto}
.eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.h2{font-size:clamp(1.72rem,3.6vw,2.85rem)}
.lede{margin-top:16px;max-width:64ch;color:var(--text-secondary);font-size:clamp(.98rem,1.25vw,1.08rem)}
.sec-head{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;justify-content:space-between;margin-bottom:26px}
.seeall{font-size:14px;color:var(--accent);white-space:nowrap}
.seeall:hover{text-decoration:underline}
.pagehead{padding:calc(var(--navh) + 34px) 0 26px}
.pagehead .lede{margin-top:14px}

.reveal>*{opacity:0;transform:translateY(24px);transition:opacity .75s var(--ease-out),transform .75s var(--ease-out)}
.reveal.in>*{opacity:1;transform:none}
.reveal.in>*:nth-child(1){transition-delay:0s}
.reveal.in>*:nth-child(2){transition-delay:.09s}
.reveal.in>*:nth-child(3){transition-delay:.18s}
.reveal.done>*:nth-child(1),.reveal.done>*:nth-child(2),.reveal.done>*:nth-child(3){transition-delay:0s!important}

/* rails */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(290px,320px);gap:16px;overflow-x:auto;padding-bottom:14px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.rail>*{scroll-snap-align:start}
.rail::-webkit-scrollbar{height:7px}
.rail::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px}

/* category cards */
.catgrid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));margin-top:26px}
.catgrid.big{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.ccard{position:relative;display:block;border-radius:18px;overflow:hidden;border:1px solid var(--line);aspect-ratio:5/3;transition:border-color .4s var(--ease),transform .4s var(--ease-out)}
.ccard:hover,.ccard:active{border-color:var(--accent);transform:translateY(-4px)}
.ccard img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-out)}
.ccard:hover img,.ccard:active img{transform:scale(1.06)}
.ccard::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(12,10,9,.92) 0%,rgba(12,10,9,.22) 58%,rgba(12,10,9,.05) 100%)}
.ccard-t{position:absolute;left:15px;bottom:13px;z-index:2;font-family:var(--display);font-weight:800;font-size:1.12rem;letter-spacing:-.02em}
.ccard-sub{position:absolute;left:15px;bottom:-2px;z-index:2;font-size:11.5px;color:var(--text-secondary);padding-bottom:14px}
.ccard-n{position:absolute;right:13px;top:12px;z-index:2;font-size:12px;background:rgba(12,10,9,.7);border:1px solid var(--line-strong);border-radius:999px;padding:2px 9px}
.catgrid.big .ccard-t{bottom:30px}

/* steps */
.steps{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:36px}
.step{transition:transform .45s var(--ease-out)}
.step:hover,.step:active{transform:translateY(-5px)}
.step-n{display:block;font-size:11.5px;color:var(--accent);letter-spacing:.18em;margin-bottom:12px}
.step-img{border-radius:16px;overflow:hidden;border:1px solid var(--line);aspect-ratio:16/10;background:var(--panel)}
.step-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-out)}
.step:hover .step-img img,.step:active .step-img img{transform:scale(1.05)}
.step h3{margin-top:18px;font-size:1.2rem}
.step p{margin-top:9px;color:var(--text-secondary);font-size:14.8px}

/* quotes */
.quotes{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));margin-top:34px}
.qcard{position:relative;background:linear-gradient(180deg,var(--panel) 0%,rgba(16,42,49,.55) 100%);border:1px solid var(--line);border-radius:18px;padding:26px 22px;overflow:hidden;transition:border-color .45s var(--ease),transform .45s var(--ease-out)}
.qcard:hover,.qcard:active{border-color:var(--line-strong);transform:translateY(-4px)}
.qarc{position:absolute;right:-14px;top:-20px;width:96px;height:48px;opacity:.4}
.qarc path{fill:none;stroke:var(--accent-muted);stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s var(--ease-out)}
.reveal.in .qarc path{stroke-dashoffset:0}
.q-n{font-size:2.1rem;color:var(--jade);line-height:1;margin-bottom:14px}
.qcard blockquote{margin:0;font-size:14.5px;line-height:1.6;color:var(--text-secondary)}
.q-w{margin-top:14px;padding-top:13px;border-top:1px solid var(--line);font-size:12px;color:var(--dim)}
.sample-note{margin-top:22px;font-size:12.5px;color:var(--dim);max-width:70ch}

/* cities */
.citywrap{margin-top:24px}
.citylist{display:flex;flex-wrap:wrap;gap:9px}
.citychip{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:999px;padding:9px 16px;font-size:14px;color:var(--text-secondary);transition:border-color .3s var(--ease),color .3s var(--ease)}
.citychip:hover{border-color:var(--accent);color:var(--accent)}
.wider-h{font-family:var(--display);font-weight:800;font-size:1.15rem;letter-spacing:-.02em;margin:30px 0 8px;padding-top:24px;border-top:1px solid var(--line)}
.wider-note{font-size:13px;color:var(--text-secondary);margin-bottom:12px}
.widerlist{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.widercard{list-style:none;border:1px dashed var(--line-strong);border-radius:14px;padding:14px 16px;background:rgba(16,42,49,.35)}
.wider-n{font-weight:700;font-size:14.5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.wider-a{font-size:13px;color:var(--text-secondary);margin-top:3px}
.wider-acts{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.cityregion{margin-bottom:22px}
.cityregion-h{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:11px}
.cityregion-h .mono{color:var(--text-secondary);border:1px solid var(--line);border-radius:999px;padding:1px 8px;font-size:11px;letter-spacing:0}
.citychips{display:flex;flex-wrap:wrap;gap:8px}
/* the target / not-yet-a-target split */
.citygroup-h{font-family:var(--display);font-weight:700;font-size:1.05rem;letter-spacing:-.01em;
  margin:26px 0 14px;padding-bottom:9px;border-bottom:1px solid var(--line)}
.citygroup-h:first-child{margin-top:0}
.citygroup-h.dim{color:var(--dim);font-weight:500;font-size:.92rem}
.cityphase{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold);border:1px solid var(--gold-muted);border-radius:999px;padding:2px 7px}
/* "clear" reads as an escape from the filters, so it stays quiet and never
   picks up the accent the active chips use */
.chip-clear{color:var(--dim);border-style:dashed}
.chip-clear:hover{color:var(--text-primary);border-color:var(--line-strong)}
/* Prospect listings are deliberately plain: no accent, no badge glow. They are
   real places, but nothing about them has been agreed or checked, and the card
   should not borrow any of the confidence a partner's card earns. */
.prospect-chip{font-family:var(--mono);font-size:10px;letter-spacing:.06em;border-radius:999px;
  padding:2px 8px;border:1px dashed var(--line-strong);color:var(--dim);white-space:nowrap}
.mcard.prospect{opacity:.96}
/* states plainly that the picture illustrates the trade rather than showing
   this particular business */
.illus{position:absolute;left:11px;top:11px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-secondary);
  background:rgba(12,10,9,.72);backdrop-filter:blur(6px);
  border:1px solid rgba(179,166,154,.28);border-radius:999px;padding:3px 9px}
.citychip.thin{opacity:.62}
.citychip .mono{font-size:11.5px;color:var(--accent)}

/* business block */
.biz-wrap{display:grid;gap:clamp(34px,5vw,64px);grid-template-columns:1fr;align-items:center}
@media (min-width:960px){.biz-wrap{grid-template-columns:1.08fr .92fr}}
.biz-list{margin-top:34px;display:flex;flex-direction:column;gap:22px}
.biz-list li{position:relative;padding-left:24px}
.biz-list li::before{content:"";position:absolute;left:0;top:10px;width:9px;height:9px;border-radius:50%;background:var(--accent)}
.biz-list h3{font-size:1.14rem}
.biz-list p{margin-top:7px;color:var(--text-secondary);font-size:14.5px}
.biz-copy .cta-row{margin-top:32px}
.cta-row{display:flex;flex-wrap:wrap;gap:11px}
.cta-row.center{justify-content:center}
.biz-panel{background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line-strong);border-radius:20px;overflow:hidden;box-shadow:0 30px 70px rgba(6,4,3,.5)}
.bp-top{display:flex;align-items:center;gap:6px;padding:13px 17px;border-bottom:1px solid var(--line);background:rgba(14,11,9,.5)}
.bp-dot{width:8px;height:8px;border-radius:50%;background:var(--line-strong)}
.bp-dot:first-child{background:var(--accent)}
.bp-title{margin-left:8px;font-size:11.5px;color:var(--text-secondary)}
.bp-body{padding:24px 22px 26px}
.bp-row{display:flex;align-items:baseline;gap:8px;margin-bottom:11px}
.bp-k{font-size:12px;color:var(--text-secondary)}
.bp-v{font-size:1.8rem}
.bp-bars{display:flex;align-items:flex-end;gap:7px;height:104px;margin:22px 0 20px}
.bp-bars.big{height:150px}
.bp-bars span{flex:1;height:var(--h);border-radius:6px 6px 3px 3px;background:linear-gradient(180deg,var(--accent),rgba(255,106,46,.22));transform-origin:bottom;transform:scaleY(0);transition:transform .9s var(--ease-out)}
.biz-panel.in .bp-bars span,.panel .bp-bars span{transform:scaleY(1)}
.biz-panel.in .bp-bars span:nth-child(1){transition-delay:.05s}
.biz-panel.in .bp-bars span:nth-child(2){transition-delay:.12s}
.biz-panel.in .bp-bars span:nth-child(3){transition-delay:.19s}
.biz-panel.in .bp-bars span:nth-child(4){transition-delay:.26s}
.biz-panel.in .bp-bars span:nth-child(5){transition-delay:.33s}
.biz-panel.in .bp-bars span:nth-child(6){transition-delay:.4s}
.biz-panel.in .bp-bars span:nth-child(7){transition-delay:.47s}
.bp-rate{display:flex;align-items:center;justify-content:space-between;padding-top:16px;border-top:1px solid var(--line)}
.bp-rate-v{font-size:1.28rem;color:var(--accent)}

/* join */
.join-wrap{max-width:720px;text-align:center}
.join-h{margin-top:6px;text-wrap:balance}
/* Chinese sets much wider per character, so the line that fits in English
   broke awkwardly here. Give it room and stop it splitting mid-clause. */
html[data-lang="zh"] .join-wrap{max-width:940px}
html[data-lang="zh"] .join-h{letter-spacing:0}
.join-wrap .lede{margin-inline:auto}
.join-wrap .cta-row{margin-top:28px}

/* ---------------- merchant card ---------------- */
.mcard{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:border-color .4s var(--ease),transform .4s var(--ease-out),box-shadow .4s var(--ease)}
.mcard:hover,.mcard:active,.mcard.hot{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 16px 40px rgba(6,4,3,.4)}
.mcard-img{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--canvas-2)}
.mcard-img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-out)}
/* The heavy amber grade that used to live here was there to bind a set of AI
   renders together. These are photographs now, and the whole point is that they
   read as real, so the treatment is almost nothing: a touch of contrast, and a
   very slight warm veil to seat them on the canvas. */
.mcard-img img,.ccard img,.step-img img{filter:saturate(1.02) contrast(1.04)}
.mcard-img::after,.step-img::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(200deg,rgba(255,106,46,.05),transparent 60%)}
.step-img{position:relative}
.mcard:hover .mcard-img img,.mcard:active .mcard-img img{transform:scale(1.05)}
.mcard-offer{position:absolute;left:11px;bottom:11px;background:var(--accent);color:#1A0E04;font-size:12px;font-weight:700;border-radius:999px;padding:5px 12px;max-width:calc(100% - 22px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mcard-body{padding:16px 17px 17px;display:flex;flex-direction:column;gap:9px;flex:1}
.mcard-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.mcard-name{font-size:1.08rem;letter-spacing:-.02em;line-height:1.2}
.mcard-name a:hover{color:var(--accent)}
.mcard-alt{margin-top:3px;font-size:12.5px;color:var(--text-secondary)}
.fav{flex:0 0 auto;width:34px;height:34px;display:grid;place-items:center;background:transparent;border:1px solid var(--line);border-radius:50%;color:var(--text-secondary);cursor:pointer;transition:color .3s var(--ease),border-color .3s var(--ease)}
.fav svg{width:17px;height:17px}
.fav:hover{color:var(--accent);border-color:var(--accent)}
.fav.on{color:var(--accent);border-color:var(--accent)}
.fav.on svg path{fill:var(--accent)}
.btn.fav{width:auto;height:auto;border-radius:999px}
.mcard-rate{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:13px}
.stars{color:var(--accent);letter-spacing:-1px;font-size:13px}
.stars span{opacity:.24}.stars span.on{opacity:1}.stars span.half{opacity:.6}
.vchip{font-family:var(--mono);font-size:10.5px;border:1px solid var(--line);border-radius:999px;padding:2px 7px;color:var(--jade)}
.pricedots{font-family:var(--mono);font-size:12px;color:var(--text-secondary)}
.pricedots .dim{opacity:.35}
.mcard-meta{font-size:12.8px;color:var(--text-secondary);display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.mcard-meta .dot{opacity:.4}
.open{color:var(--jade);font-weight:700}.soon{color:var(--accent);font-weight:700}.shut{color:var(--dim)}
.mcard-deal{display:flex;flex-wrap:wrap;align-items:center;gap:7px;font-size:13.2px;padding:9px 11px;background:rgba(255,106,46,.09);border:1px solid var(--accent-muted);border-radius:11px}
.deal-tag{background:var(--accent);color:#1A0E04;font-size:10.5px;font-weight:700;border-radius:5px;padding:2px 6px;letter-spacing:.04em}
.deal-save{margin-left:auto;color:var(--jade);font-size:12.5px}
.mcard-items{display:flex;flex-wrap:wrap;gap:5px}
.mcard-items span{font-size:11.5px;border:1px solid var(--line);border-radius:999px;padding:3px 9px;color:var(--text-secondary)}
.mcard-perks{display:flex;flex-wrap:wrap;gap:5px}
.perkchip{font-size:11.5px;border:1px solid rgba(123,214,143,.34);background:rgba(123,214,143,.08);border-radius:999px;padding:3px 9px;color:var(--jade);white-space:nowrap}
.mcard.compact .mcard-perks{display:none}
.mcard-why{font-size:12.5px;color:var(--text-secondary);padding-top:9px;border-top:1px solid var(--line)}
.mcard-why b{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:4px;font-weight:500}
.mcard-fresh{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--dim)}
.srcchip{font-family:var(--mono);font-size:10px;letter-spacing:.06em;border-radius:999px;padding:2px 7px;border:1px solid var(--line);white-space:nowrap}
.src-v{color:var(--jade);border-color:rgba(123,214,143,.4)}
.src-m{color:var(--text-secondary)}
.src-u{color:#9FB6E0;border-color:rgba(159,182,224,.35)}
.src-p{color:var(--text-secondary)}
.src-s{color:var(--accent);border-color:var(--accent-muted)}
.mcard-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:4px}
.mcard.compact .mcard-why,.mcard.compact .mcard-items{display:none}
.mcard.compact .mcard-acts .btn:nth-child(3){display:none}

/* ---------------- discover ---------------- */
[data-view="discover"]{padding-top:var(--navh)}
.dbar{position:sticky;top:var(--navh);z-index:60;background:rgba(14,11,9,.94);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);padding:14px 0 12px}
.dbar-wrap{display:flex;flex-direction:column;gap:12px}
.dbar .asker{margin-top:0;width:100%}
.filters{display:flex;flex-wrap:wrap;gap:14px}
.fgroup{display:flex;flex-wrap:wrap;gap:6px}
.chip-b{background:transparent;border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:13px;font-weight:500;color:var(--text-secondary);cursor:pointer;white-space:nowrap;transition:border-color .3s var(--ease),color .3s var(--ease),background .3s var(--ease)}
.chip-b:hover{border-color:var(--line-strong);color:var(--text-primary)}
.chip-b.on{background:var(--accent-muted);border-color:var(--accent);color:var(--accent)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips.wide{gap:8px}

.dsplit{display:grid;gap:22px;grid-template-columns:1fr;padding-top:22px;padding-bottom:60px}
@media (min-width:1000px){.dsplit{grid-template-columns:minmax(0,55fr) minmax(0,45fr);align-items:start}}
.dlist{min-width:0;display:flex;flex-direction:column;gap:14px}
.dlist-head{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;color:var(--text-secondary)}
.sortbtn{background:transparent;border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:12.5px;color:var(--text-secondary);cursor:pointer;white-space:nowrap;transition:border-color .3s var(--ease),color .3s var(--ease)}
.sortbtn:hover{border-color:var(--accent);color:var(--accent)}
#results{display:grid;gap:14px;grid-template-columns:1fr}
/* In the results list the image is a thumbnail beside the facts, not a poster
   above them. Four listings on a screen beats one and a half. */
@media (min-width:520px){
  #results .mcard{flex-direction:row}
  #results .mcard-img{flex:0 0 34%;max-width:230px;aspect-ratio:auto;align-self:stretch}
  #results .mcard-offer{font-size:11px;padding:4px 9px;left:9px;bottom:9px}
  #results .mcard-body{flex:1;min-width:0}
}
.empty{padding:40px 0;text-align:center;color:var(--text-secondary)}

/* the AI answer block */
.ai-block{background:linear-gradient(180deg,rgba(255,106,46,.09),var(--panel) 60%);border:1px solid var(--accent-muted);border-radius:18px;padding:20px 20px 18px}
.ai-block.warn{background:linear-gradient(180deg,rgba(255,106,46,.2),var(--panel) 60%);border-color:var(--accent)}
.ai-head{display:flex;align-items:flex-start;gap:11px}
.ai-badge{flex:0 0 auto;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;background:var(--accent);color:#1A0E04;border-radius:999px;padding:3px 9px;font-weight:500}
.ai-line{font-family:var(--display);font-weight:700;font-size:clamp(1.02rem,1.7vw,1.24rem);letter-spacing:-.02em;line-height:1.32}
.ai-read{margin-top:11px;font-size:13px;color:var(--jade)}
.ai-sub{margin-top:8px;font-size:13.4px;color:var(--text-secondary)}
.ai-safety{margin-top:12px;font-size:12.8px;color:var(--text-primary);background:rgba(14,11,9,.6);border-left:2px solid var(--accent);border-radius:0 10px 10px 0;padding:10px 13px}
.ai-note{margin-top:13px;padding-top:11px;border-top:1px solid var(--line);font-size:11.8px;color:var(--dim)}
.ai-ask{margin-top:14px;padding:13px;background:rgba(14,11,9,.55);border:1px solid var(--line);border-radius:13px}
.ai-ask p{font-size:13.4px;margin-bottom:9px}
.ai-answer-inline{margin-top:13px;font-size:14px;color:var(--text-secondary);line-height:1.65}

/* map */
.dmap{position:sticky;top:calc(var(--navh) + 116px);height:calc(100vh - var(--navh) - 140px);min-height:420px}
.mapwrap{position:relative;height:100%;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#0C0A09}
.mapsvg{width:100%;height:100%;display:block}
.mapsvg .leaflet-container{background:#0C0A09;font-family:var(--body)}
.mapsvg .leaflet-control-attribution{background:rgba(14,11,9,.72);color:var(--dim);font-size:10.5px}
.mapsvg .leaflet-control-attribution a{color:var(--text-secondary)}
.mapsvg .leaflet-control-zoom a{background:var(--panel-2);color:var(--text-primary);border-color:var(--line-strong)}
.mapsvg .leaflet-control-zoom a:hover{background:var(--panel);color:var(--accent)}
/* origin "you are here" marker */
.morigin-wrap{position:relative}
.morigin-dot{position:absolute;left:5px;top:5px;width:8px;height:8px;border-radius:50%;background:var(--jade)}
.morigin-ring{position:absolute;left:1px;top:1px;width:16px;height:16px;border-radius:50%;background:rgba(123,214,143,.25);animation:mapPulse 2.4s var(--ease-out) infinite}
@keyframes mapPulse{0%{transform:scale(.55);opacity:1}75%,100%{transform:scale(2.2);opacity:0}}
/* merchant pins */
.mpin-wrap{cursor:pointer}
.mpin-svg{width:26px;height:32px;filter:drop-shadow(0 3px 7px rgba(6,4,3,.6))}
.mpin-svg .pin-body{fill:var(--accent);stroke:#1A0E04;stroke-width:1.2;transition:transform .2s var(--ease-out);transform-origin:12px 30px}
.mpin-svg .pin-n{fill:#1A0E04;font-family:var(--mono);font-size:11px;font-weight:700}
.mpin-wrap:hover .pin-body,.mpin-wrap.hot .pin-body{fill:#fff;transform:scale(1.15)}
.mpin-wrap.hot .mpin-svg{filter:drop-shadow(0 0 10px rgba(255,255,255,.55))}
/* cluster bubbles */
.mapsvg .marker-cluster{background:rgba(255,106,46,.22)}
.mapsvg .marker-cluster div{background:var(--accent);color:#1A0E04;font-family:var(--mono);font-weight:700;box-shadow:0 3px 10px rgba(6,4,3,.5)}
.mapsearch{position:absolute;left:50%;top:14px;transform:translateX(-50%);z-index:410;background:var(--panel-2);border:1px solid var(--accent);border-radius:999px;padding:8px 16px;font-size:13px;font-weight:700;color:var(--text-primary);cursor:pointer;box-shadow:0 10px 30px rgba(6,4,3,.6)}
.mapcard{position:absolute;left:12px;right:12px;bottom:12px;z-index:410}
.mapcard-x{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;background:rgba(14,11,9,.8);border:1px solid var(--line-strong);color:var(--text-primary);font-size:18px;line-height:1;cursor:pointer}
.maptoggle{display:none;position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:80;background:var(--panel-2);border:1px solid var(--accent);border-radius:999px;padding:11px 24px;font-size:14px;font-weight:700;color:var(--text-primary);cursor:pointer;box-shadow:0 14px 40px rgba(6,4,3,.6)}

@media (max-width:999px){
  .dmap{display:none;position:fixed;inset:var(--navh) 0 0;height:auto;z-index:70;border-radius:0}
  body.mapmode .dmap{display:block}
  body.mapmode .mapwrap{border-radius:0;border:0}
  body.mapmode .dlist{display:none}
  .maptoggle{display:block}
  [data-view="discover"] .maptoggle{display:block}
}
body:not([data-page="discover"]) .maptoggle{display:none}

/* ---------------- merchant detail ---------------- */
.mhead{background-size:cover;background-position:50% 46%;padding:calc(var(--navh) + 46px) 0 34px}
.mhead-in{display:flex;flex-direction:column;gap:11px}
.backlink{font-size:13px;color:var(--text-secondary)}
.backlink:hover{color:var(--accent)}
.mh-name{font-size:clamp(1.85rem,4.4vw,3.1rem);text-shadow:var(--tshadow)}
.mh-alt{font-size:14.5px;color:#CFDEDE}
.mh-meta{display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-size:13.5px}
.mh-acts{display:flex;flex-wrap:wrap;gap:9px;margin-top:9px}
.mgrid{display:grid;gap:22px;grid-template-columns:1fr;padding:26px 0 70px}
@media (min-width:960px){.mgrid{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);align-items:start}}
.mmain,.mside{display:flex;flex-direction:column;gap:16px;min-width:0}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:22px 20px}
.ph{font-size:1.12rem;margin-bottom:14px}
.offerpanel{background:linear-gradient(180deg,rgba(255,106,46,.12),var(--panel) 62%);border-color:var(--accent)}
.offer-big{font-family:var(--display);font-weight:800;font-size:clamp(1.3rem,2.6vw,1.85rem);letter-spacing:-.02em;color:var(--accent)}
.offer-terms{margin-top:9px;font-size:13.8px;color:var(--text-secondary)}
.offer-meta{margin-top:15px;display:flex;flex-direction:column;gap:7px;font-size:13px;color:var(--text-secondary)}
.offer-meta b{color:var(--text-primary)}
.perkpanel{border-color:rgba(123,214,143,.34)}
.perks{display:flex;flex-direction:column;gap:12px;margin-top:4px}
.perk{display:flex;flex-direction:column;gap:3px;padding-left:15px;position:relative}
.perk::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--jade)}
.perk-k{font-weight:700;font-size:14.5px}
.perk-v{font-size:13.4px;color:var(--text-secondary)}
.bk-perks{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:16px}
.bk-perks li{list-style:none;font-size:11.5px;border:1px solid rgba(123,214,143,.34);background:rgba(123,214,143,.08);border-radius:999px;padding:3px 9px;color:var(--jade)}
.perk-num{margin-top:14px;padding:11px 13px;border:1px solid rgba(123,214,143,.34);background:rgba(123,214,143,.08);border-radius:11px;font-size:13.4px}
.perk-num b{color:var(--jade);font-size:15px;letter-spacing:.06em}
.items{display:flex;flex-direction:column}
.items li{display:flex;align-items:baseline;gap:11px;padding:11px 0;border-bottom:1px solid var(--line)}
.items li:last-child{border-bottom:0}
.it-n{flex:1;font-size:14.6px}
.hot{margin-left:8px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent-muted);border-radius:999px;padding:1px 7px}
.it-m{font-size:12px;color:var(--dim)}
.it-p{font-size:14.5px;color:var(--jade)}
.src-line{margin-top:13px;padding-top:11px;border-top:1px solid var(--line);font-size:11.8px;color:var(--dim)}
.drows{display:flex;flex-direction:column}
.drow{display:grid;gap:4px;padding:11px 0;border-bottom:1px solid var(--line)}
@media (min-width:560px){.drow{grid-template-columns:150px 1fr;gap:14px}}
.drow:last-child{border-bottom:0}
.drow dt{font-size:12.5px;color:var(--dim)}
.drow dd{font-size:14.2px}
.rev-note{font-size:13px;color:var(--text-secondary);margin-bottom:15px}
.revbars{display:flex;flex-direction:column;gap:10px}
.revbar{display:grid;grid-template-columns:1fr 2fr auto;gap:11px;align-items:center;font-size:13.4px}
.rb{height:6px;border-radius:99px;background:var(--canvas-2);overflow:hidden}
.rb i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--jade))}
.addr{font-size:14.5px}
.minimap{width:100%;height:auto;border:1px solid var(--line);border-radius:12px;background:#0C0A09;margin:13px 0}
.hours{width:100%;font-size:13.4px;border-collapse:collapse}
.hours th{text-align:left;font-weight:500;color:var(--text-secondary);padding:5px 0;width:70px}
.hours td{padding:5px 0;font-family:var(--mono);font-size:12.5px}
.hours tr.today th,.hours tr.today td{color:var(--accent)}
.fresh{color:var(--jade);font-size:13.4px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.stale{color:var(--accent);font-size:13.4px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.simlist{display:flex;flex-direction:column;gap:12px}

/* ---------------- account and portal ---------------- */
.subtabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px;border-bottom:1px solid var(--line);padding-bottom:12px}
.subtab{border:1px solid var(--line);border-radius:999px;padding:8px 15px;font-size:13.4px;color:var(--text-secondary);transition:border-color .3s var(--ease),color .3s var(--ease),background .3s var(--ease)}
.subtab:hover{border-color:var(--line-strong);color:var(--text-primary)}
.subtab.on{background:var(--accent);border-color:var(--accent);color:#1A0E04;font-weight:700}
.portalbody{display:flex;flex-direction:column;gap:16px;padding-bottom:70px}
[data-view="account"] .panel,[data-view="membership"] .wrap,[data-view="categories"] .wrap{margin-bottom:70px}

.memcard{background:linear-gradient(160deg,#16373F,#0B1E24 70%);border:1px solid var(--line-strong);border-radius:22px;padding:24px 22px;max-width:400px;margin-inline:auto;box-shadow:0 26px 60px rgba(6,4,3,.55)}
.mc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.mc-tier{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent-muted);border-radius:999px;padding:3px 10px}
.qrbox{background:#fff;border-radius:16px;padding:12px;display:grid;place-items:center}
.qrsvg{width:100%;max-width:230px;height:auto;display:block}
.codebig{text-align:center;font-size:2.1rem;letter-spacing:.26em;margin-top:16px;color:var(--accent)}
.codehint{text-align:center;font-size:12px;color:var(--dim);margin-top:6px}
.mc-locked{text-align:center;font-size:14px;color:var(--text-secondary);padding:26px 0}
.mc-foot{display:flex;align-items:center;justify-content:space-between;margin-top:20px;padding-top:16px;border-top:1px solid var(--line);font-size:13.4px}
.mc-holder{margin-bottom:18px}
.mc-name{font-size:1.25rem;font-weight:600;line-height:1.2}
.mc-phone{font-size:13.6px;color:var(--text-secondary);margin-top:4px}
.mc-missing{color:var(--accent);text-decoration:underline;text-underline-offset:2px;font-size:13.6px;font-weight:400}
.savetop{text-align:center;padding:14px 0 22px}
.save-l{font-size:13px;color:var(--text-secondary)}
.save-n{font-size:clamp(2.4rem,7vw,3.4rem);margin:6px 0}
.save-s{font-size:13px;color:var(--text-secondary)}
.monthbars{display:flex;align-items:flex-end;gap:9px;height:110px;padding:0 4px 0;margin-bottom:22px}
.mb{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;height:100%}
.mb i{display:block;width:100%;border-radius:6px 6px 3px 3px;background:linear-gradient(180deg,var(--jade),rgba(123,214,143,.2))}
.mb span{font-size:10.5px;color:var(--dim)}
.dash-h3{margin:22px 0 11px;font-size:.98rem;font-family:var(--body);font-weight:700;letter-spacing:0;color:var(--text-secondary)}
.tx{display:flex;flex-direction:column;gap:8px}
.tx li{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--canvas-2);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:14px}
.tx-name{min-width:0;display:flex;flex-direction:column;gap:3px}
.tx-sub{font-size:11.8px;color:var(--dim)}
.tx-amt{color:var(--jade);white-space:nowrap}
.tx-empty{font-size:13.4px;color:var(--dim);padding:14px 0}
.bstatus{font-family:var(--mono);font-size:11px;border-radius:999px;padding:3px 9px;border:1px solid var(--line);white-space:nowrap}
.bstatus.requested{color:var(--accent);border-color:var(--accent-muted)}
.bstatus.accepted{color:var(--jade);border-color:rgba(123,214,143,.4)}
.bstatus.declined{color:var(--dim)}
.bkacts{display:flex;gap:6px;flex-wrap:wrap}
.favgrid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
.dash-acts{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}

.statgrid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(165px,1fr))}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:15px;padding:17px 16px}
.stat-l{font-size:12px;color:var(--text-secondary);line-height:1.35}
.stat-n{font-size:1.75rem;margin-top:7px}
.todo{display:flex;flex-direction:column;gap:9px;font-size:14px;color:var(--text-secondary)}
.todo li{position:relative;padding-left:20px}
.todo li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;background:var(--accent)}

.admin-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.admin-tablewrap{overflow-x:auto}
.admin-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:420px}
.admin-table th{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line-strong);font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--dim);font-weight:600}
.admin-table td{padding:9px 6px;border-bottom:1px solid var(--line)}
.admin-table tr:last-child td{border-bottom:none}
.admin-table td.dim{color:var(--dim)}
.admin-table th.num,.admin-table td.num{text-align:right}
.stat-n.jade{color:var(--jade)}
.stat-n.accent{color:var(--accent)}
.preview{margin:18px 0;padding:16px;background:var(--canvas-2);border:1px dashed var(--line-strong);border-radius:14px}
.redeemer{max-width:460px}
.bigcode{font-family:var(--mono)!important;font-size:1.5rem!important;letter-spacing:.14em;text-align:center}
.rz-good{margin-top:16px;background:rgba(123,214,143,.12);border:1px solid var(--jade);border-radius:15px;padding:18px;text-align:center}
.rz-h{font-family:var(--display);font-weight:800;font-size:1.3rem;color:var(--jade)}
.rz-n{font-size:2rem;margin-top:8px;color:var(--jade)}
.rz-bad{margin-top:16px;background:rgba(255,106,46,.12);border:1px solid var(--accent);border-radius:15px;padding:16px;font-size:14px;color:var(--accent)}

/* plans */
.plan-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-top:8px}
.plan{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:30px 26px;display:flex;flex-direction:column;transition:border-color .4s var(--ease),transform .4s var(--ease-out)}
.plan:hover,.plan:active{transform:translateY(-4px);border-color:var(--line-strong)}
.plan-hi{border-color:var(--accent);background:linear-gradient(180deg,rgba(255,106,46,.10),var(--panel) 62%)}
.plan-tag{position:absolute;top:-11px;left:26px;background:var(--accent);color:#1A0E04;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;border-radius:999px;padding:4px 11px}
.plan h3{font-size:1.4rem}
.price{margin-top:14px;display:flex;align-items:baseline;gap:6px}
.price .mono{font-size:clamp(2.4rem,5vw,3.1rem)}
.per{font-size:13.5px;color:var(--text-secondary)}
.plan ul{margin:22px 0 26px;display:flex;flex-direction:column;gap:11px;font-size:14.4px}
.plan li{position:relative;padding-left:25px;color:var(--text-secondary)}
.plan li::before{content:"";position:absolute;left:0;top:8px;width:11px;height:6px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
.plan li b{color:var(--text-primary);font-weight:600}
/* What the free tier does NOT include, stated rather than implied by absence:
   the gap is the reason to upgrade, so it should be legible at a glance. */
.plan li.no{color:var(--dim);text-decoration:none}
.plan li.no::before{content:"";width:11px;height:11px;top:6px;border:0;transform:none;
  background:linear-gradient(currentColor,currentColor) center/11px 1.8px no-repeat}
.plan-terms{margin-top:14px;font-size:11.6px;line-height:1.5;color:var(--dim)}
.plan .btn{margin-top:auto}

/* faq */
.faq-list{margin-top:26px;border-top:1px solid var(--line)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{list-style:none;cursor:pointer;padding:20px 42px 20px 0;position:relative;font-family:var(--display);font-weight:700;font-size:clamp(1rem,1.8vw,1.2rem);letter-spacing:-.02em;transition:color .3s var(--ease)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:hover{color:var(--accent)}
.faq-list summary::after,.faq-list summary::before{content:"";position:absolute;right:6px;top:50%;background:var(--accent);transition:transform .4s var(--ease-out),opacity .3s var(--ease)}
.faq-list summary::after{width:14px;height:2px;margin-top:-1px}
.faq-list summary::before{width:2px;height:14px;margin:-7px -6px 0 0;right:12px}
.faq-list details[open] summary::before{transform:rotate(90deg);opacity:0}
.faq-list details p{padding:0 6ch 22px 0;color:var(--text-secondary);font-size:14.6px}

/* forms */
.field{margin-bottom:15px}
.field2{display:grid;gap:12px;grid-template-columns:1fr 1fr}
.field label{display:block;font-size:12.5px;color:var(--text-secondary);margin-bottom:7px}
.field input,.field select{width:100%;background:var(--canvas-2);border:1px solid var(--line);border-radius:11px;padding:12px 14px;font-size:15px;transition:border-color .3s var(--ease)}
.field input:focus,.field select:focus{border-color:var(--accent);outline:none}
input[type=range]{width:100%;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer;padding:8px 0}
input[type=range]::-webkit-slider-runnable-track{height:5px;border-radius:99px;background:var(--line)}
input[type=range]::-moz-range-track{height:5px;border-radius:99px;background:var(--line)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-7.5px;border-radius:50%;background:var(--accent);border:3px solid var(--canvas);box-shadow:0 3px 12px rgba(255,106,46,.5)}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--accent);border:3px solid var(--canvas)}
.ferr{margin-bottom:12px;font-size:13.4px;color:var(--accent)}
.field-check{display:flex;align-items:flex-start;gap:9px;margin-bottom:15px;font-size:13.4px;color:var(--text-secondary);cursor:pointer;line-height:1.5}
.field-check input{margin-top:3px;flex:none;accent-color:var(--accent)}
.field-check a{color:var(--text);text-decoration:underline;text-underline-offset:2px}

.legal{max-width:68ch}
.legal-p{color:var(--text-secondary);font-size:14.6px;line-height:1.7;margin-bottom:20px}
.fnote{margin-top:14px;font-size:12.2px;color:var(--dim);line-height:1.5}

/* footer */
.foot{position:relative;z-index:1;border-top:1px solid var(--line);padding:52px 0 40px}
.foot-wrap{display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between;align-items:flex-start}
.foot-brand{display:flex;flex-wrap:wrap;align-items:center;gap:8px;max-width:340px}
.foot-tag{flex:1 0 100%;margin-top:11px;font-size:13.2px;color:var(--text-secondary)}
.foot-cols{display:flex;flex-wrap:wrap;gap:12px 24px;font-size:13.8px;color:var(--text-secondary)}
.foot-contact{display:flex;flex-direction:column;gap:9px;font-size:13.8px;color:var(--text-secondary);min-width:170px}
.foot-ch{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:2px}
.foot-contact a{transition:color .3s var(--ease)}
.foot-contact a:hover{color:var(--accent)}
.foot-mail{margin-top:4px;font-size:12.4px;color:var(--dim);word-break:break-all}
.foot-cols a:hover{color:var(--accent)}
.foot-fine{margin-top:40px;padding-top:22px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px;font-size:11.8px;color:var(--dim);max-width:82ch}

/* sheets */
.sheet{position:fixed;inset:0;z-index:120;display:flex;align-items:flex-end;justify-content:center}
@media (min-width:700px){.sheet{align-items:center}}
.sheet-bg{position:absolute;inset:0;background:rgba(4,12,14,.74);backdrop-filter:blur(8px);animation:fade .35s var(--ease) both}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet-panel{position:relative;width:min(480px,100%);max-height:92vh;overflow-y:auto;background:var(--panel);border:1px solid var(--line-strong);border-radius:22px 22px 0 0;padding:clamp(22px,4vw,32px);animation:sheetin .5s var(--ease-out) both}
@media (min-width:700px){.sheet-panel{border-radius:22px}}
@keyframes sheetin{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.sheet-x{position:absolute;top:12px;right:14px;background:transparent;border:0;font-size:27px;line-height:1;color:var(--text-secondary);cursor:pointer;padding:6px;z-index:2}
.sheet-x:hover{color:var(--accent)}
.sheet-h{font-size:1.45rem;margin-bottom:16px;padding-right:24px}
.modal-sub{font-size:13.8px;color:var(--text-secondary);margin-bottom:18px}
.tabs{display:flex;gap:5px;padding:5px;background:var(--canvas-2);border:1px solid var(--line);border-radius:999px;margin-bottom:20px}
.tab{flex:1;background:transparent;border:0;border-radius:999px;padding:10px;font-size:14px;font-weight:700;color:var(--text-secondary);cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease)}
.tab.on{background:var(--panel-2);color:var(--text-primary)}

/* toast, install */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:150;background:var(--panel-2);border:1px solid var(--accent);border-radius:999px;padding:11px 20px;font-size:14px;font-weight:700;box-shadow:0 14px 40px rgba(6,4,3,.6);animation:sheetin .4s var(--ease-out) both;max-width:calc(100% - 32px);text-align:center}
.install{position:fixed;right:18px;bottom:18px;z-index:110;display:flex;align-items:center;gap:8px;background:rgba(34,25,19,.94);backdrop-filter:blur(12px);border:1px solid var(--accent);border-radius:999px;padding:10px 17px;font-size:13.5px;font-weight:700;color:var(--text-primary);cursor:pointer;box-shadow:0 14px 40px rgba(6,4,3,.6);animation:sheetin .6s var(--ease-out) both}
.install svg{width:16px;height:16px;color:var(--accent);flex:0 0 auto}

/* reduced motion, pausing */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
  .reveal>*{opacity:1;transform:none}
  .qarc path{stroke-dashoffset:0}
  .bp-bars span{transform:scaleY(1)}
}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}
.pinned .reveal>*{opacity:1;transform:none}
.pinned .qarc path{stroke-dashoffset:0}
.pinned .bp-bars span{transform:scaleY(1)}

/* small screens */
@media (max-width:900px){
  .nav-links{position:fixed;left:0;right:0;top:var(--navh);flex-direction:column;gap:0;background:rgba(14,11,9,.97);backdrop-filter:blur(18px);border-bottom:1px solid var(--line);padding:8px var(--pad) 16px;transform:translateY(-12px);opacity:0;pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease-out)}
  body.navopen .nav-links{opacity:1;transform:none;pointer-events:auto}
  .nav-links a{padding:12px 0;border-bottom:1px solid var(--line);font-size:15.5px}
  .navburger{display:flex;order:3;margin-left:auto}
  .nav-right{order:2;margin-left:auto}
  .nav [data-open-auth="login"]{display:none}
}
@media (max-width:560px){
  .field2{grid-template-columns:1fr}
  .rail{grid-auto-columns:minmax(262px,86%)}
  .foot-fine{font-size:11px}
  .codebig{font-size:1.7rem}
  .subtabs{overflow-x:auto;flex-wrap:nowrap;padding-bottom:14px}
  .subtab{white-space:nowrap}
}