/* ============================================================
   Tokyo Local Guide v77 — ELEVATION layer
   "The Concierge's Field Notebook, alive with his footage."
   Loads AFTER styles.css. Cream paper vs neon-night film tension.
   Only additive classes (hero77 / filmwin / statband / routeline /
   lockstrip / mapnight). Consumes tokens.css vars.
   ============================================================ */

:root{
  /* deep night-Tokyo — the cinematic counter-tone to the cream paper */
  --night:        #0E1014;
  --night-2:      #15181E;
  --night-ink:    #F3ECE2;
  --night-muted:  #A9B0BC;
  --ink-line:     color-mix(in srgb, var(--accent) 60%, transparent);
}

/* ============================================================
   HERO — paper column + film window
   ============================================================ */
.hero77{ position:relative; overflow:clip; border-bottom:1px solid var(--border);
  background:
    radial-gradient(120% 80% at 90% -10%, color-mix(in srgb,var(--accent) 7%, transparent), transparent 60%),
    var(--bg); }
.hero77 .hero__inner{ display:none; } /* (no-op safety) */
.hero77__grid{ position:relative; z-index:1; max-width:var(--container); margin:0 auto;
  padding:clamp(28px,4vw,56px) var(--edge) clamp(40px,5vw,68px);
  display:grid; grid-template-columns:1fr; gap:clamp(24px,3.2vw,40px); align-items:center; }
@media(max-width:680px){ .hero77__grid{ padding:24px var(--s-4) 32px; gap:22px; } }
@media(min-width:960px){ .hero77__grid{ grid-template-columns:minmax(0,1.02fr) minmax(0,1.1fr); gap:clamp(36px,4vw,64px); } }

/* --- paper column --- */
.hero77__paper{ position:relative; z-index:2; }
.hero77__eyebrow{ display:inline-flex; align-items:center; gap:9px; margin:0 0 18px;
  font-family:var(--font-body); font-size:11.5px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent-2); }
.hero77__rec{ width:8px; height:8px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 70%,transparent); animation:rec 2.6s var(--ease) infinite; }
@keyframes rec{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent);} 70%{ box-shadow:0 0 0 7px transparent;} 100%{ box-shadow:0 0 0 0 transparent;} }
@media(prefers-reduced-motion:reduce){ .hero77__rec{ animation:none; } }

.hero77__headline{ margin:0; font-family:var(--font-display); color:var(--text);
  font-weight:540; font-optical-sizing:auto; font-variation-settings:'opsz' 144;
  letter-spacing:-.018em; line-height:1.02;
  font-size:clamp(38px,6.4vw,68px); text-wrap:balance; }
.hero77__headline em{ font-style:italic; font-weight:500; color:var(--accent-2);
  position:relative; white-space:nowrap; }
.hero77__headline em::after{ content:""; position:absolute; left:-.04em; right:-.04em; bottom:.02em;
  height:.5em; background:linear-gradient(transparent 62%, color-mix(in srgb,var(--accent) 22%, transparent) 62%);
  z-index:-1; border-radius:2px; }

.hero77__sub{ margin:20px 0 0; max-width:42ch; color:var(--text-muted);
  font-size:clamp(15.5px,1.5vw,18px); line-height:1.55; }

.hero77__cta{ display:flex; flex-wrap:wrap; gap:12px; margin:26px 0 0; }
.btn77{ font-family:var(--font-body); font-weight:600; font-size:15.5px; cursor:pointer;
  border-radius:var(--r-pill); padding:14px 22px; min-height:50px; display:inline-flex; align-items:center; gap:9px;
  border:1px solid transparent; transition:transform var(--t-fast) var(--ease), box-shadow var(--t-med) var(--ease), background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.btn77--primary{ background:var(--accent); color:var(--text-on-accent); box-shadow:var(--shadow-cta); font-weight:700; font-size:16px; }
.btn77--primary:hover{ background:var(--accent-deep); transform:translateY(-1px); }
.btn77--ghost{ background:transparent; color:var(--text); border-color:var(--border-strong); }
.btn77--ghost:hover{ border-color:var(--accent); color:var(--accent-2); }
.btn77:active{ transform:translateY(0) scale(.99); }

.hero77__trust{ margin:16px 0 0; font-size:12.5px; color:var(--text-faint); letter-spacing:.01em; }

.hero77__byline{ display:flex; align-items:center; gap:13px; margin:26px 0 0;
  padding-top:22px; border-top:1px dashed var(--border-strong); }
.hero77__face{ width:54px; height:54px; flex:0 0 auto; border-radius:50%;
  box-shadow:0 0 0 1px var(--border-strong), var(--shadow-1); --is-empty-bg:var(--surface-3); }
.hero77__bylinetxt{ font-size:13px; line-height:1.42; color:var(--text-muted); }
.hero77__bylinetxt b{ color:var(--text); font-weight:700; }
.hero77__bylinetxt .u{ color:var(--accent-2); font-weight:600; }
.hero77__bylinetxt .muted{ color:var(--text-faint); }

/* --- film window: the neon night cut into the paper --- */
.filmwin{ position:relative; z-index:2; margin:0; aspect-ratio:16/10; border-radius:14px; overflow:hidden;
  background:var(--night); border:1px solid color-mix(in srgb,var(--accent) 26%, #000);
  box-shadow:0 30px 70px -28px rgba(0,0,0,.6), 0 0 0 6px color-mix(in srgb,var(--bg) 70%, transparent);
  isolation:isolate; }
@media(max-width:680px){ .filmwin{ aspect-ratio:16/11; } }
.filmwin__media{ position:absolute; inset:0; background:var(--night); }
.filmwin__media iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; pointer-events:none; }
/* loading shimmer of the night city before the film resolves */
.filmwin__media::before{ content:""; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(60% 50% at 30% 30%, color-mix(in srgb,var(--accent) 26%, transparent), transparent 70%),
    radial-gradient(50% 45% at 78% 68%, color-mix(in srgb,#2A6FDB 24%, transparent), transparent 70%),
    var(--night);
  opacity:1; transition:opacity .8s ease; }
.filmwin.is-playing .filmwin__media::before{ opacity:0; }
/* legibility + cinematic vignette over the footage */
.filmwin__scrim{ position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg, rgba(8,9,12,.05) 0%, transparent 26%, transparent 52%, rgba(8,9,12,.55) 88%, rgba(8,9,12,.72) 100%);
  box-shadow:inset 0 0 120px rgba(0,0,0,.45); }
.filmwin__cap{ position:absolute; left:16px; bottom:14px; right:16px; z-index:3;
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  font-family:var(--font-body); font-size:13px; font-weight:600; color:var(--night-ink);
  text-shadow:0 1px 10px rgba(0,0,0,.6); }
.filmwin__play{ display:inline-grid; place-items:center; width:26px; height:26px; flex:0 0 auto;
  border-radius:50%; background:var(--accent); color:#fff; font-size:11px; padding-left:2px;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 26%, transparent); }
.filmwin__loc{ color:var(--night-muted); font-weight:500; }
.filmwin__badge{ position:absolute; top:13px; left:14px; z-index:3; display:inline-flex; align-items:center; gap:7px;
  padding:6px 11px; border-radius:var(--r-pill); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:#fff; background:color-mix(in srgb,var(--night) 55%, transparent); backdrop-filter:blur(6px);
  border:1px solid color-mix(in srgb,#fff 16%, transparent); }
.filmwin__badge::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--accent); animation:rec 2.2s var(--ease) infinite; }
/* viewfinder corner ticks */
.filmwin__tick{ position:absolute; z-index:3; width:18px; height:18px; pointer-events:none;
  border:2px solid color-mix(in srgb,#fff 64%, transparent); }
.filmwin__tick--tl{ top:10px; left:10px; border-right:0; border-bottom:0; }
.filmwin__tick--tr{ top:10px; right:10px; border-left:0; border-bottom:0; }
.filmwin__tick--bl{ bottom:10px; left:10px; border-right:0; border-top:0; }
.filmwin__tick--br{ bottom:10px; right:10px; border-left:0; border-top:0; }
@media(max-width:680px){ .filmwin__tick{ display:none; } }

/* ============================================================
   ROUTE LINE — the hand-drawn vermilion thread
   ============================================================ */
.routeline{ position:relative; z-index:1; display:block; width:100%; height:62px; margin:-14px auto 0; max-width:var(--container); }
.routeline__path{ fill:none; stroke:var(--accent); stroke-width:2.4; stroke-linecap:round;
  stroke-dasharray:var(--len,1400); stroke-dashoffset:var(--len,1400);
  filter:drop-shadow(0 1px 0 color-mix(in srgb,var(--accent-deep) 50%, transparent)); }
.routeline__dot{ fill:var(--accent); opacity:0; transition:opacity .3s ease; }
.routeline__dot.is-on{ opacity:1; }
@media(prefers-reduced-motion:reduce){ .routeline__path{ stroke-dashoffset:0 !important; } .routeline__dot{ opacity:1; } }

/* ============================================================
   STAT BAND — the credibility numbers, confident & up high
   ============================================================ */
.statband{ position:relative; z-index:1; max-width:var(--container); margin:0 auto;
  padding:6px var(--edge) clamp(20px,3vw,30px);
  display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
@media(max-width:680px){ .statband{ grid-template-columns:repeat(2,1fr); gap:14px 0; padding:6px var(--s-4) 24px; } }
.stat{ padding:0 clamp(10px,1.6vw,22px); border-left:1px solid var(--border); }
.stat:first-child{ border-left:0; padding-left:0; }
@media(max-width:680px){ .stat:nth-child(odd){ border-left:0; padding-left:0; } .stat{ padding-left:16px; } }
.stat__num{ font-family:var(--font-display); font-weight:600; line-height:1; letter-spacing:-.02em;
  font-size:clamp(28px,3.6vw,42px); color:var(--text); }
.stat__num .accent{ color:var(--accent-2); }
.stat__lbl{ margin-top:7px; font-size:12px; line-height:1.35; color:var(--text-muted); }
.stat__lbl b{ color:var(--text); font-weight:600; }

/* ============================================================
   LOCKED STRIP — the 189 concierge-only addresses, teased
   (photo + neighborhood + concierge one-liner; name/spot blurred)
   ============================================================ */
.lockstrip{ position:relative; margin:0; padding:clamp(28px,3.4vw,44px) 0;
  background:var(--night);
  border-top:1px solid color-mix(in srgb,var(--accent) 22%, #000);
  border-bottom:1px solid color-mix(in srgb,var(--accent) 22%, #000); color:var(--night-ink); }
.lockstrip__inner{ max-width:var(--container); margin:0 auto; padding:0 var(--edge); }
@media(max-width:680px){ .lockstrip__inner{ padding:0 var(--s-4); } }
.lockstrip__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap; margin:0 0 22px; }
.lockstrip__kick{ font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); margin:0 0 10px; display:flex; align-items:center; gap:8px; }
.lockstrip__kick svg{ width:15px; height:15px; }
.lockstrip__title{ margin:0; font-family:var(--font-display); font-weight:540; letter-spacing:-.015em;
  font-size:clamp(24px,3vw,36px); color:var(--night-ink); line-height:1.08; max-width:20ch; text-wrap:balance; }
.lockstrip__title em{ font-style:italic; color:var(--gold); }
.lockstrip__sub{ margin:10px 0 0; color:var(--night-muted); font-size:14px; max-width:40ch; line-height:1.5; }
.lockstrip__cta{ flex:0 0 auto; }

.lockgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:16px; }
/* Mike (2026-06-25): on phones the 6 private-list cards stacked tall and buried the
   browse list. Make them a compact horizontal swipe row so the chips/list sit right below. */
@media(max-width:760px){
  .lockgrid{ display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding:2px 0 10px; scrollbar-width:none; }
  .lockgrid::-webkit-scrollbar{ display:none; }
  .lockgrid > *{ flex:0 0 80%; scroll-snap-align:start; }
}
.lockcard{ position:relative; border-radius:13px; overflow:hidden; text-align:left;
  background:var(--night-2); border:1px solid color-mix(in srgb,#fff 9%, transparent);
  display:flex; flex-direction:column; min-height:264px; cursor:pointer;
  transition:transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-med) var(--ease); }
.lockcard:hover{ transform:translateY(-3px); border-color:color-mix(in srgb,var(--accent) 50%, transparent);
  box-shadow:0 24px 48px -22px rgba(0,0,0,.7); }
.lockcard__photo{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--night); }
.lockcard__photo img{ width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(1.04) contrast(1.02); }
.lockcard__photo::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(8,9,12,.5) 100%); }
.lockcard__pin{ position:absolute; right:11px; bottom:11px; z-index:2; display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px; border-radius:var(--r-pill); font-size:11px; font-weight:700;
  background:color-mix(in srgb,var(--night) 50%, transparent); color:#fff; backdrop-filter:blur(5px);
  border:1px solid color-mix(in srgb,#fff 18%, transparent); }
.lockcard__pin svg{ width:12px; height:12px; }
.lockcard__body{ padding:14px 15px 16px; display:flex; flex-direction:column; gap:9px; flex:1; }
.lockcard__nbhd{ font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); }
/* the blurred name — tantalize, don't show */
.lockcard__name{ font-family:var(--font-display); font-weight:560; font-size:18px; line-height:1.12; color:var(--night-ink);
  filter:blur(7px); opacity:.86; user-select:none; letter-spacing:.02em; }
.lockcard__quote{ font-size:13.5px; line-height:1.45; color:#E7E3DB; }
.lockcard__quote .q{ color:var(--accent-2); font-style:italic; }
.lockcard__foot{ margin-top:auto; display:flex; align-items:center; gap:8px; padding-top:4px;
  font-size:12px; color:var(--night-muted); }
.lockcard__lock{ display:inline-grid; place-items:center; width:22px; height:22px; border-radius:6px;
  background:color-mix(in srgb,var(--accent) 18%, transparent); color:var(--accent-2); }
.lockcard__lock svg{ width:12px; height:12px; }
.lockcard__reveal{ margin-left:auto; color:var(--gold); font-weight:600; }

.lockstrip .btn77--primary{ box-shadow:0 10px 30px -10px rgba(192,50,46,.7); }
.lockstrip .btn77--ghost{ color:var(--night-ink); border-color:color-mix(in srgb,#fff 24%, transparent); }
.lockstrip .btn77--ghost:hover{ border-color:var(--accent); color:#fff; }

/* ============================================================
   NIGHT MAP — the cinematic window onto the city
   ============================================================ */
.split__map.is-night{ border-color:color-mix(in srgb,var(--accent) 22%, #000);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 14%, transparent), 0 24px 60px -30px rgba(0,0,0,.6); }
.split__map.is-night #map{ background:var(--night); }
.split__map.is-night .map__legend{ background:color-mix(in srgb,var(--night) 86%, transparent);
  border-color:color-mix(in srgb,#fff 12%, transparent); color:var(--night-muted); }
/* ink-drawn pins on the dark map */
.is-night .pin{ filter:drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
.is-night .cluster{ box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 28%, transparent), 0 6px 16px -6px rgba(0,0,0,.6); }
.mapcap{ position:absolute; top:12px; left:12px; z-index:401; display:inline-flex; align-items:center; gap:8px;
  padding:7px 12px; border-radius:var(--r-pill); font-size:12px; font-weight:600; color:var(--night-ink);
  background:color-mix(in srgb,var(--night) 72%, transparent); backdrop-filter:blur(6px);
  border:1px solid color-mix(in srgb,#fff 14%, transparent); max-width:calc(100% - 24px); }
.mapcap b{ color:var(--gold); }
.mapcap .dotpulse{ width:8px; height:8px; border-radius:50%; background:var(--accent); animation:rec 2.4s var(--ease) infinite; }

/* keep Leaflet controls legible on night tiles */
.is-night .leaflet-control-zoom a{ background:var(--night-2); color:var(--night-ink); border-color:color-mix(in srgb,#fff 12%,transparent); }
.is-night .leaflet-control-attribution{ background:color-mix(in srgb,var(--night) 70%, transparent); color:var(--night-muted); }
.is-night .leaflet-control-attribution a{ color:var(--night-muted); }

/* ============================================================
   PLACE CARDS v77 — real film frame + concierge voice + trio
   ============================================================ */
.card77{ position:relative; display:flex; flex-direction:column; width:100%; text-align:left;
  background:var(--surface-1); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden;
  cursor:pointer; font-family:inherit; color:var(--text); -webkit-tap-highlight-color:transparent;
  transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-med) var(--ease), transform var(--t-fast) var(--ease); }
.card77 > *{ pointer-events:none; }
@media(hover:hover){ .card77:hover{ border-color:var(--border-strong); box-shadow:var(--shadow-2); transform:translateY(-3px); } }
.card77:active{ transform:scale(.995); }

.card77__media{ position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--surface-3); }
.card77__media--film img{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(1.05) contrast(1.02); transition:transform var(--t-slow) var(--ease); }
@media(hover:hover){ .card77:hover .card77__media--film img{ transform:scale(1.045); } }
.card77__media--film::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 45%, rgba(8,9,12,.42) 100%); }
.card77__media--tile{ display:grid; place-items:center;
  background:
    radial-gradient(120% 100% at 80% 0%, color-mix(in srgb,var(--cat) 30%, transparent), transparent 60%),
    repeating-linear-gradient(135deg, color-mix(in srgb,var(--cat) 9%, var(--surface-2)) 0 11px, color-mix(in srgb,var(--cat) 5%, var(--surface-2)) 11px 22px); }
.card77__glyph{ font-size:46px; line-height:1; filter:saturate(.9) drop-shadow(0 2px 6px rgba(0,0,0,.18)); }
.card77__walk{ position:absolute; left:11px; bottom:11px; z-index:2; display:inline-flex; align-items:center; gap:6px;
  padding:6px 11px; border-radius:var(--r-pill); font-size:12px; font-weight:700; letter-spacing:.01em;
  color:#fff; background:color-mix(in srgb,var(--night) 46%, transparent); backdrop-filter:blur(6px);
  border:1px solid color-mix(in srgb,#fff 22%, transparent); }
.card77__pick{ position:absolute; top:10px; right:10px; z-index:2; display:inline-grid; place-items:center;
  width:30px; height:30px; border-radius:50%; background:var(--gold); color:var(--gold-ink);
  box-shadow:0 4px 12px -4px rgba(0,0,0,.4); }
.card77__pick svg{ width:16px; height:16px; }

.card77__body{ padding:15px 16px 16px; display:flex; flex-direction:column; gap:7px; flex:1; }
.card77__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.card77__titlerow{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; min-width:0; }
.card77__title{ font-family:var(--font-display); font-weight:600; font-size:19px; line-height:1.16; letter-spacing:-.01em; color:var(--text); }
.card77__jp{ font-family:var(--font-kanji); font-size:12.5px; color:var(--text-faint); }
.card77__cat{ flex:0 0 auto; }
.card77__sub{ display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--text-muted); margin-top:-1px; }
.card77__nbhd{ font-weight:600; }
.card77__dot{ color:var(--text-faint); }
.card77__price{ color:var(--text-faint); }
.card77__why{ font-size:14px; line-height:1.5; color:var(--text); margin:2px 0 3px; text-wrap:pretty; }

/* the practical trio — the proof a human stood there */
.card77__trio{ display:flex; flex-direction:column; gap:7px; padding:11px 12px; margin-top:2px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-md); }
.trio{ display:flex; align-items:flex-start; gap:9px; font-size:12.5px; line-height:1.34; color:var(--text-muted); }
.trio__i{ flex:0 0 auto; display:inline-grid; place-items:center; width:17px; height:17px; color:var(--accent-2); margin-top:.5px; }
.trio__i svg{ width:15px; height:15px; }
.trio__t{ min-width:0; }
.card77__badges{ display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:4px; }

/* ============================================================
   ITINERARY v77 — film frames + route-line that draws down the day
   ============================================================ */
.itin77__promise{ margin:14px 0 0; font-size:14px; line-height:1.5; color:var(--text-muted); max-width:54ch; }
.itin77__promise em{ font-style:italic; color:var(--accent-2); font-weight:600; }
.itin77{ position:relative; }
/* the hand-drawn rail sits under the numbered nodes */
.itin77__rail{ position:absolute; left:18px; top:18px; bottom:24px; width:2.5px;
  background:repeating-linear-gradient(var(--border) 0 6px, transparent 6px 11px); z-index:0; }
.itin77__rail-fill{ position:absolute; left:0; top:0; width:100%; height:0;
  background:var(--accent); border-radius:2px;
  box-shadow:0 0 0 .5px color-mix(in srgb,var(--accent-deep) 50%, transparent);
  transition:height .18s linear; }
@media(prefers-reduced-motion:reduce){ .itin77__rail-fill{ transition:none; } }
@media(max-width:560px){ .itin77__rail{ left:16px; } }

.itin77__stops{ position:relative; z-index:1; }
.itin77__day{ margin-left:0; }
.itin77__stop{ grid-template-columns:38px 1fr; align-items:start; }
.itin77__node{ position:relative; z-index:2; background:var(--surface-1); color:var(--text-muted);
  border:2px solid var(--border); transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.itin77__node.is-on{ background:var(--accent); color:var(--text-on-accent); border-color:var(--accent); }

.itin77__card{ display:grid; grid-template-columns:96px 1fr; gap:0; padding:0; overflow:hidden; align-items:stretch; }
@media(max-width:480px){ .itin77__card{ grid-template-columns:80px 1fr; } }
.itin77__thumb{ position:relative; overflow:hidden; background:var(--surface-3); min-height:100%; }
.itin77__thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(1.05) contrast(1.02); }
.itin77__thumb--tile{ display:grid; place-items:center;
  background:radial-gradient(120% 100% at 70% 10%, color-mix(in srgb,var(--cat) 26%, transparent), transparent 60%), var(--surface-2); }
.itin77__glyph{ font-size:30px; }
.itin77__walk{ position:absolute; left:7px; bottom:7px; display:grid; place-items:center; width:22px; height:22px;
  border-radius:50%; font-size:9px; padding-left:1px; color:#fff; background:color-mix(in srgb,var(--night) 50%, transparent);
  backdrop-filter:blur(4px); border:1px solid color-mix(in srgb,#fff 22%, transparent); }
.itin77__cardbody{ padding:12px 14px; display:flex; flex-direction:column; gap:3px; text-align:left; }
.itin77__cardwalk{ margin-top:6px; font-size:12px; font-weight:600; color:var(--accent-2); }

/* itinerary: v76 richer structure — plan tagline, day-arc subtitle, walking/transit legs (2026-06-26) */
.itin77__tagline{ margin:12px 0 0; font-size:.96rem; line-height:1.5; color:var(--text-muted); font-style:italic; max-width:48ch; }
.itin77__day.itin-day__head{ flex-wrap:wrap; border-left:0; }
.itin77__daysub{ flex:1 0 100%; margin-top:4px; font-size:13px; line-height:1.45; color:var(--text-muted); }
.itin77__leg{ list-style:none; display:flex; gap:11px; align-items:flex-start; margin:4px 0 4px 17px; padding:2px 0 2px 13px; border-left:2px dashed var(--border-strong); }
.itin77__legicon{ flex-shrink:0; margin-left:-21px; color:var(--text-faint); font-size:15px; line-height:1.4; }
.itin77__legbody{ display:flex; flex-direction:column; gap:2px; }
.itin77__legtime{ font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--text-faint); }
.itin77__legtitle{ font-size:.9rem; font-weight:600; color:var(--text-muted); }
.itin77__legnote{ font-size:.84rem; line-height:1.45; color:var(--text-faint); }

/* ============================================================
   BARTENDER'S LIST — moody night-mode pours
   ============================================================ */
.barlist{ position:relative; background:
    radial-gradient(80% 60% at 18% 0%, color-mix(in srgb,#2A6FDB 12%, transparent), transparent 60%),
    radial-gradient(70% 60% at 92% 30%, color-mix(in srgb,var(--accent) 14%, transparent), transparent 60%),
    var(--night);
  color:var(--night-ink); padding:clamp(34px,4.4vw,60px) 0;
  border-top:1px solid color-mix(in srgb,var(--accent) 22%, #000); }
.barlist__inner{ max-width:var(--container); margin:0 auto; padding:0 var(--edge); }
@media(max-width:680px){ .barlist__inner{ padding:0 var(--s-4); } }
.barlist__head{ max-width:60ch; margin:0 0 26px; }
.barlist__kick{ display:flex; align-items:center; gap:9px; margin:0 0 12px;
  font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#7FB0FF; }
.barlist__dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); animation:rec 2.4s var(--ease) infinite; }
.barlist__title{ margin:0; font-family:var(--font-display); font-weight:540; letter-spacing:-.015em;
  font-size:clamp(26px,3.4vw,42px); line-height:1.06; color:var(--night-ink); text-wrap:balance; }
.barlist__title em{ font-style:italic; color:#7FB0FF; }
.barlist__sub{ margin:12px 0 0; color:var(--night-muted); font-size:15px; line-height:1.55; max-width:52ch; }

.barlist__grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:18px; }
.barcard{ position:relative; display:flex; flex-direction:column; text-align:left; overflow:hidden;
  border-radius:14px; background:var(--night-2); border:1px solid color-mix(in srgb,#fff 9%, transparent);
  cursor:pointer; color:var(--night-ink); font-family:inherit; min-height:320px;
  transition:transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-med) var(--ease); }
.barcard > *{ pointer-events:none; }
.barcard:hover{ transform:translateY(-4px); border-color:color-mix(in srgb,#7FB0FF 50%, transparent);
  box-shadow:0 26px 54px -24px rgba(0,0,0,.75); }
.barcard__media{ position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--night); }
.barcard__media img{ width:100%; height:100%; object-fit:cover; filter:saturate(1.12) contrast(1.05) brightness(.98); }
.barcard__noimg{ position:absolute; inset:0; background:linear-gradient(135deg, var(--night-2), var(--night)); }
.barcard__scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,9,12,.1) 0%, transparent 38%, rgba(8,9,12,.66) 100%); }
.barcard__play{ position:absolute; left:11px; bottom:11px; display:inline-flex; align-items:center; gap:6px;
  padding:6px 11px; border-radius:var(--r-pill); font-size:12px; font-weight:700; color:#fff;
  background:color-mix(in srgb,var(--night) 46%, transparent); backdrop-filter:blur(6px);
  border:1px solid color-mix(in srgb,#fff 20%, transparent); }
.barcard__body{ padding:15px 16px 18px; display:flex; flex-direction:column; gap:8px; flex:1; }
.barcard__nb{ font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#7FB0FF; }
.barcard__name{ font-family:var(--font-display); font-weight:560; font-size:21px; line-height:1.12; color:var(--night-ink); }
.barcard__note{ font-size:13.5px; line-height:1.5; color:#D8D4CC; }

/* ============================================================
   ABOUT MOMENT + BUY CARD v77
   ============================================================ */
.about77{ max-width:880px; margin:0 auto; }
.about77 .itin-detail__back{ margin-bottom:22px; }
/* the way back must be unmissable (Mike: "All plans" was a whisper) */
.itin-detail__back{ font-size:15px !important; font-weight:700 !important; color:var(--accent-2) !important;
  padding:8px 16px 8px 12px; border:1.5px solid color-mix(in srgb,var(--accent) 45%, transparent);
  border-radius:999px; background:color-mix(in srgb,var(--accent) 8%, transparent); }
.itin-detail__back:hover{ background:color-mix(in srgb,var(--accent) 16%, transparent); }
.about77__moment{ display:grid; grid-template-columns:1fr; gap:clamp(22px,3vw,40px); align-items:center; margin:0 0 clamp(32px,4vw,56px); }
@media(min-width:820px){ .about77__moment{ grid-template-columns:minmax(0,0.92fr) minmax(0,1.08fr); } }
.about77__photos{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.about77__photo{ width:100%; box-shadow:var(--shadow-2), 0 0 0 1px var(--border); --is-empty-bg:var(--surface-3); }
.about77__photo--a{ aspect-ratio:3/4; margin-top:24px; }
.about77__photo--b{ aspect-ratio:3/4; }
.about77__kick{ font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-2); margin:0 0 12px; }
.about77__h1{ font-family:var(--font-display); font-weight:540; font-size:clamp(28px,4.2vw,46px); line-height:1.04;
  letter-spacing:-.018em; margin:0 0 18px; color:var(--text); text-wrap:balance; }
.about77__h1 em{ font-style:italic; color:var(--accent-2); }
.about77__story p{ font-size:16px; line-height:1.62; color:var(--text-muted); margin:0 0 14px; text-wrap:pretty; }
.about77__story em{ font-style:italic; color:var(--text); }
.about77__sig{ font-family:var(--font-display); font-style:italic; font-size:18px; color:var(--text) !important; }

.buycard{ position:relative; overflow:hidden; border-radius:18px; margin:0 0 clamp(30px,4vw,48px);
  background:var(--night); color:var(--night-ink); border:1px solid color-mix(in srgb,var(--accent) 26%, #000);
  box-shadow:0 36px 80px -40px rgba(0,0,0,.7); }
.buycard__film{ position:absolute; inset:0; z-index:0; }
.buycard__filmmedia{ position:absolute; inset:0; background-size:cover; background-position:center; filter:saturate(1.05) brightness(.5); }
.buycard__filmscrim{ position:absolute; inset:0; background:linear-gradient(180deg, color-mix(in srgb,var(--night) 78%, transparent), color-mix(in srgb,var(--night) 94%, transparent)); }
.buycard__inner{ position:relative; z-index:1; padding:clamp(26px,3.4vw,44px); }
.buycard__kick{ font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin:0 0 16px; }
.buycard__price{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.buycard__now{ font-family:var(--font-display); font-weight:600; font-size:clamp(48px,8vw,76px); line-height:.9; letter-spacing:-.02em; color:#fff; }
.buycard__was{ font-size:22px; color:var(--night-muted); text-decoration:line-through; }
.buycard__once{ font-size:13px; color:var(--night-muted); font-weight:500; }
.buycard__lede{ margin:14px 0 20px; font-size:15.5px; line-height:1.5; color:#E7E3DB; max-width:46ch; }
.buycard__list{ list-style:none; padding:0; margin:0 0 24px; display:grid; gap:11px; }
.buycard__list li{ position:relative; padding-left:30px; font-size:15px; line-height:1.5; color:#E7E3DB; }
.buycard__list b{ color:#fff; font-weight:700; }
.buycard__list li::before{ content:""; position:absolute; left:0; top:3px; width:19px; height:19px; border-radius:50%;
  background:var(--accent); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/13px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/13px no-repeat; }
.buycard__cta{ display:inline-flex; align-items:center; gap:9px; font-family:var(--font-body); font-weight:700; font-size:17px;
  background:var(--accent); color:#fff; padding:16px 28px; border-radius:var(--r-pill); text-decoration:none;
  box-shadow:0 16px 40px -14px rgba(192,50,46,.8); transition:transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.buycard__cta:hover{ background:var(--accent-deep); transform:translateY(-1px); }
.buycard__author{ margin:18px 0 0; font-size:13.5px; color:var(--night-muted); }
.buycard__author b{ color:#E7E3DB; }
.buycard__trust{ display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 0; }
.buycard__badge{ font-size:12px; font-weight:600; color:var(--night-muted); padding:6px 11px; border-radius:var(--r-pill);
  background:color-mix(in srgb,#fff 6%, transparent); border:1px solid color-mix(in srgb,#fff 12%, transparent); }
.buycard__recover{ margin:22px 0 0; padding:16px 0 0; border-top:1px solid color-mix(in srgb,#fff 12%, transparent);
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:13.5px; color:var(--night-muted); }
.buycard__key{ display:flex; gap:8px; flex:1; min-width:240px; flex-wrap:wrap; }
.buycard__key input{ flex:1 1 200px; min-width:200px; min-height:48px; background:color-mix(in srgb,#fff 9%, transparent); color:#fff;
  border:1.5px solid color-mix(in srgb,#fff 34%, transparent); border-radius:var(--r-md); padding:12px 14px; font-size:16px; font-family:inherit; }
.buycard__key input:focus{ outline:none; border-color:var(--gold,#C9A35A); box-shadow:0 0 0 3px color-mix(in srgb,var(--gold,#C9A35A) 24%, transparent); }
.buycard__key input::placeholder{ color:var(--night-muted); }
.buycard__key button{ background:color-mix(in srgb,#fff 12%, transparent); color:#fff; border:0; border-radius:var(--r-md);
  padding:11px 18px; font-weight:600; font-size:14px; cursor:pointer; font-family:inherit; transition:background var(--t-fast) var(--ease); }
.buycard__key button:hover{ background:color-mix(in srgb,#fff 20%, transparent); }
.buycard__support{ margin:16px 0 0; font-size:13px; color:var(--night-muted); }
.buycard__support a{ color:var(--gold); }

/* ============================================================
   FOOTER — publication SEO hub
   ============================================================ */
.sitefoot77{ background:var(--night); color:var(--night-muted); border-top:1px solid color-mix(in srgb,var(--accent) 20%, #000); }
.sitefoot77__inner{ max-width:var(--container); margin:0 auto; padding:clamp(38px,4.5vw,60px) var(--edge) 26px; }
@media(max-width:680px){ .sitefoot77__inner{ padding:34px var(--s-4) 22px; } }
.sitefoot77__top{ display:grid; grid-template-columns:1fr; gap:32px; }
@media(min-width:860px){ .sitefoot77__top{ grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); gap:48px; } }
.sitefoot77__brand .sitefoot__wordmark{ display:inline-block; margin-bottom:14px; }
.sitefoot__tokyo{ color:var(--accent-2); }
.sitefoot__label{ color:var(--night-ink); }
.sitefoot77__tag{ margin:0 0 16px; font-size:14px; line-height:1.55; color:var(--night-muted); max-width:42ch; }
.sitefoot77__yt{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--gold); text-decoration:none; }
.sitefoot77__yt:hover{ color:#fff; }
.sitefoot77__cols{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px 20px; }
@media(min-width:560px){ .sitefoot77__cols{ grid-template-columns:repeat(4,1fr); } }
.sitefoot77__col{ display:flex; flex-direction:column; gap:9px; }
.sitefoot77__col h3{ margin:0 0 4px; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--night-ink); }
.sitefoot77__col a{ font-size:13.5px; color:var(--night-muted); text-decoration:none; transition:color var(--t-fast) var(--ease); }
.sitefoot77__col a:hover{ color:var(--gold); }
.sitefoot77__bottom{ margin-top:34px; padding-top:20px; border-top:1px solid color-mix(in srgb,#fff 10%, transparent);
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--night-muted); }
.sitefoot77__bottom a{ color:var(--night-muted); text-decoration:underline; text-underline-offset:2px; }
.sitefoot77__bottom a:hover{ color:var(--gold); }
.sitefoot77__note{ opacity:.85; }

/* fit the elevated card into the existing grids */
#cardList .cards, #newList.cards--grid{ display:grid; gap:var(--s-4); }
@media(min-width:560px){ #cardList .cards{ grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); } }
.split__list .cards-section .cards{ grid-template-columns:1fr; }
@media(min-width:1180px){ .split__list .cards-section .cards{ grid-template-columns:1fr 1fr; } }

/* tap-to-play hero poster (decision 2026-06-24: no autoplay loop) */
.filmwin__media{position:absolute;inset:0;overflow:hidden}
.filmwin__media img.filmwin__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* ===== neighborhood poster-hero (decision 2026-06-24: one 4K walk on top, tap to play) ===== */
.nbhd__video-card{ background:transparent; border:0; padding:0; }
.nbhd__video-card[hidden]{ display:none; }
.nbhd__hero{ position:relative; display:block; width:100%; aspect-ratio:16/9; border:0; padding:0; margin:0; cursor:pointer; border-radius:14px; overflow:hidden; box-shadow:0 8px 28px rgba(0,0,0,.20); font:inherit; color:#fff; background:#14110E; }
.nbhd__hero-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.nbhd__hero:hover .nbhd__hero-img{ transform:scale(1.04); }
.nbhd__hero-scrim{ position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.74) 0%, rgba(0,0,0,.12) 46%, rgba(0,0,0,.30) 100%); }
/* v76-style white neighborhood-name pill on the area film + bridge caption (2026-06-25) */
.nbhd__hero-nb{ position:absolute; left:12px; top:12px; z-index:2; color:#fff; font-size:13px; font-weight:700; letter-spacing:.01em; background:rgba(12,9,7,.6); padding:4px 11px; border-radius:999px; backdrop-filter:blur(2px); }
.nbhd__hero-cap{ margin:9px 2px 2px; font-size:.82rem; line-height:1.4; color:var(--text-muted,#6f655a); font-weight:600; }
/* ===== paywall: locked card teasers + unlock bar (2026-06-25) ===== */
.card77--locked{ cursor:pointer; }
.card77--locked .card77__media{ position:relative; filter:saturate(.55) brightness(.97); }
.card77__lock{ position:absolute; top:6px; right:6px; width:18px; height:18px; color:#fff; opacity:.92; }
.card77__lock svg{ width:100%; height:100%; }
.card77__title--blur{ filter:blur(5px); -webkit-filter:blur(5px); user-select:none; pointer-events:none; }
.card77__lockfoot{ display:inline-flex; align-items:center; gap:6px; margin-top:6px; font-size:.8rem; color:var(--accent,#C0322E); font-weight:600; }
.card77__lockfoot svg{ width:13px; height:13px; flex:0 0 13px; }
.unlockbar{ list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; justify-content:space-between; background:var(--paper2,#FBF7F0); border:1px solid var(--accent,#C0322E); border-radius:14px; padding:14px 16px; margin:0 0 14px; }
.unlockbar__txt{ font-size:.92rem; line-height:1.4; flex:1 1 220px; }
.unlockbar__cta{ white-space:nowrap; }
.nbhd__hero-play{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:62px; height:62px; display:grid; place-items:center; border-radius:50%; background:rgba(192,50,46,.92); color:#fff; font-size:21px; padding-left:4px; box-shadow:0 6px 20px rgba(0,0,0,.4); transition:transform .2s ease; }
.nbhd__hero:hover .nbhd__hero-play{ transform:translate(-50%,-50%) scale(1.08); }
.nbhd__hero-txt{ position:absolute; left:0; right:0; bottom:0; padding:16px 18px; display:flex; flex-direction:column; gap:3px; text-align:left; }
.nbhd__hero-title{ font-family:var(--font-display,'Fraunces',serif); font-weight:700; font-size:1.14rem; line-height:1.14; text-shadow:0 1px 8px rgba(0,0,0,.55); }
.nbhd__hero-cred{ font-size:.78rem; opacity:.92; text-shadow:0 1px 6px rgba(0,0,0,.6); }
.nbhd__video{ position:relative; width:100%; aspect-ratio:16/9; border-radius:14px; overflow:hidden; background:#000; }
.nbhd__video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
/* Mike (2026-06-25): on phones, cap the neighborhood film to a compact banner so the
   place count + first restaurants peek above the fold — the food is never buried. */
@media(max-width:899px){
  .nbhd__hero{ aspect-ratio:auto; height:clamp(146px, 30vh, 206px); }
  .nbhd__blurb{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
}

/* ===== Near Me (Wave 3, 2026-06-25): real geolocation → nearest pins ===== */
.near__sub{ font-size:.86rem; color:var(--text-muted,#6b6257); margin:0 0 14px; }
.near__loading{ padding:28px 0; text-align:center; color:var(--text-muted,#6b6257); }
.near__h{ font-family:var(--font-display,'Fraunces',serif); font-weight:700; }
.nearlist{ display:flex; flex-direction:column; gap:9px; }
.nearrow{ display:flex; align-items:flex-start; gap:12px; width:100%; text-align:left; background:var(--surface-1,#fff); border:1px solid var(--border,#e7ddcf); border-radius:14px; padding:12px; cursor:pointer; font:inherit; color:inherit; transition:border-color .15s ease, transform .05s ease; }
.nearrow:hover{ border-color:var(--accent,#C0322E); }
.nearrow:active{ transform:scale(.995); }
.nearrow__glyph{ flex:0 0 40px; height:40px; display:grid; place-items:center; border-radius:10px; background:color-mix(in srgb, var(--cat,#C0322E) 14%, transparent); color:var(--cat,#C0322E); font-size:18px; }
.nearrow__main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.nearrow__name{ font-weight:650; font-size:.98rem; }
.nearrow__pick{ color:var(--gold,#C9A35A); }
.nearrow__meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:.8rem; margin-top:1px; }
.nearrow__walk{ font-weight:700; color:var(--accent,#C0322E); white-space:nowrap; }
.nearrow__now{ font-size:.72rem; font-weight:700; padding:2px 8px; border-radius:999px; white-space:nowrap; }
.now--good{ background:rgba(122,128,80,.16); color:#565c30; }
.now--ok{ background:rgba(201,163,90,.20); color:#6f5318; }
.now--busy{ background:rgba(192,50,46,.14); color:#a3322e; }
.nearrow__exit{ font-size:.78rem; color:var(--text-muted,#6b6257); }
.nearrow__why{ font-size:.82rem; color:var(--text-muted,#6b6257); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.nearrow__chev{ align-self:center; color:var(--text-muted,#9b9384); font-size:1.3rem; }
.near__chooser{ display:flex; flex-wrap:wrap; gap:9px; }
.near__chip{ padding:9px 14px; border-radius:999px; border:1px solid var(--border,#e7ddcf); background:var(--surface-1,#fff); font:inherit; font-size:.86rem; cursor:pointer; transition:border-color .15s ease; }
.near__chip:hover{ border-color:var(--accent,#C0322E); }

/* ===== Start Here — concierge persona grid + collection modal (2026-06-26) ===== */
.starthere{ max-width:var(--container,1180px); margin:38px auto 0; padding:0 var(--edge,18px); }
.sh__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-bottom:18px; }
.sh__kick{ font-size:.76rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent,#C0322E); margin:0 0 5px; }
.sh__h2{ margin:0; font-family:var(--font-display,'Fraunces',Georgia,serif); font-weight:600; font-size:clamp(1.5rem,4.2vw,2.05rem); letter-spacing:-.01em; line-height:1.08; }
.sh__note{ font-size:.9rem; color:var(--text-muted,#6f655a); max-width:300px; margin:0; line-height:1.45; }
.sh-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:13px; }
.shcard{ position:relative; display:flex; flex-direction:column; gap:4px; text-align:left; width:100%; padding:18px 16px 16px; background:var(--paper2,#FBF7F0); border:1px solid var(--border,#E7DFD2); border-radius:var(--r-lg,16px); cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.shcard:hover{ transform:translateY(-2px); box-shadow:0 12px 30px -16px rgba(0,0,0,.34); border-color:var(--accent,#C0322E); }
.shcard__lock{ position:absolute; top:13px; right:13px; display:inline-flex; align-items:center; gap:4px; font-size:.68rem; font-weight:700; letter-spacing:.04em; color:var(--text-muted,#8a7f70); text-transform:uppercase; }
.shcard__lock svg{ width:12px; height:12px; }
.shcard__top{ display:flex; align-items:center; justify-content:space-between; }
.shcard__ico{ font-size:30px; line-height:1; }
.shcard__arr{ color:var(--accent,#C0322E); font-size:19px; font-weight:700; opacity:0; transform:translateX(-5px); transition:.15s ease; }
.shcard:hover .shcard__arr{ opacity:1; transform:translateX(0); }
.shcard__title{ font-family:var(--font-display,'Fraunces',Georgia,serif); font-weight:600; font-size:1.05rem; margin-top:7px; line-height:1.15; }
.shcard__sub{ font-size:.83rem; color:var(--text-muted,#6f655a); line-height:1.38; }
@media(max-width:760px){ .starthere{ margin-top:28px; } .sh-grid{ grid-template-columns:1fr 1fr; gap:10px; } .shcard{ padding:15px 13px 14px; } .shcard__ico{ font-size:26px; } }
.coll{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:18px; }
.coll[hidden]{ display:none; }
.coll__scrim{ position:absolute; inset:0; background:rgba(12,9,7,.55); opacity:0; transition:opacity .2s ease; }
.coll[data-open='true'] .coll__scrim{ opacity:1; }
.coll__box{ position:relative; width:min(620px,100%); max-height:88vh; overflow:auto; -webkit-overflow-scrolling:touch; background:var(--paper,#F5EFE6); border:1px solid var(--border,#E7DFD2); border-radius:20px; box-shadow:0 30px 80px -20px rgba(0,0,0,.55); transform:translateY(14px) scale(.99); opacity:0; transition:transform .22s ease, opacity .22s ease; }
.coll[data-open='true'] .coll__box{ transform:none; opacity:1; }
.coll__close{ position:absolute; top:14px; right:14px; z-index:6; width:38px; height:38px; border-radius:50%; background:var(--paper2,#FBF7F0); border:1px solid var(--border,#E7DFD2); color:var(--ink,#2A2018); cursor:pointer; font-size:15px; line-height:1; }
.coll__head{ padding:30px 26px 17px; border-bottom:1px solid var(--border,#E7DFD2); }
.coll__ico{ font-size:34px; line-height:1; }
.coll__h{ margin:9px 0 3px; font-family:var(--font-display,'Fraunces',Georgia,serif); font-weight:600; font-size:1.5rem; letter-spacing:-.01em; }
.coll__sub{ margin:0; font-size:.94rem; color:var(--text-muted,#6f655a); }
.coll__list{ list-style:none; margin:0; padding:16px; display:flex; flex-direction:column; gap:14px; }
body.coll-open{ overflow:hidden; }

/* ===== Where now, situational quiz modal (2026-06-26) ===== */
.wn__box{ width:min(460px,100%); }
.wn__body{ padding:30px 26px 28px; }
.wn__prog{ display:flex; gap:6px; margin-bottom:15px; }
.wn__prog i{ flex:1; height:4px; border-radius:2px; background:var(--border,#E7DFD2); transition:background .25s ease; }
.wn__prog i.on{ background:var(--accent,#C0322E); }
.wn__step{ font-size:.74rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--text-muted,#8a7f70); margin:0 0 7px; }
.wn__q{ font-family:var(--font-display,'Fraunces',Georgia,serif); font-weight:600; font-size:1.55rem; margin:0 0 18px; letter-spacing:-.01em; line-height:1.12; }
.wn__opts{ display:flex; flex-direction:column; gap:9px; }
.wn__opt{ display:flex; align-items:center; justify-content:space-between; gap:10px; text-align:left; width:100%; padding:15px 16px; background:var(--paper2,#FBF7F0); border:1px solid var(--border,#E7DFD2); border-radius:13px; font-size:1.02rem; font-weight:500; color:var(--ink,#2A2018); cursor:pointer; transition:border-color .14s ease, transform .14s ease; }
.wn__opt:hover{ border-color:var(--accent,#C0322E); transform:translateX(2px); }
.wn__arr{ color:var(--accent,#C0322E); font-weight:700; opacity:.45; transition:opacity .14s ease; }
.wn__opt:hover .wn__arr{ opacity:1; }
.wn__result .wn__rkick{ display:inline-flex; align-items:center; gap:6px; font-size:.76rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent,#C0322E); margin:0 0 14px; }
.wn__card{ list-style:none; margin:0; padding:0; }
.wn__actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
.wn__actions .btn77{ flex:1; justify-content:center; min-width:130px; }

/* concierge-upgrade tip on itinerary stops (2026-06-26) */
.itin77__up{ display:block; margin-top:7px; padding:7px 11px; background:color-mix(in srgb, var(--accent,#C0322E) 8%, transparent); border-left:2px solid var(--accent,#C0322E); border-radius:0 8px 8px 0; font-size:.82rem; line-height:1.42; color:var(--ink,#2A2018); }

/* ===== compact list rows + density toggle (B2, 2026-06-26) ===== */
.listmeta{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
#cardList[data-density="rows"]{ display:flex; flex-direction:column; gap:8px; }
#cardList[data-density="rows"] .cards{ display:flex; flex-direction:column; gap:8px; margin-top:8px !important; }
#cardList[data-density="rows"] .cards-section{ list-style:none; }
.pinrow{ width:100%; text-align:left; cursor:pointer; font:inherit; color:inherit; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:13px; background:var(--paper2,#FBF7F0); border:1px solid var(--border,#E7DFD2); border-radius:14px; padding:11px 13px 11px 11px; box-shadow:0 1px 3px rgba(0,0,0,.16); transition:box-shadow .16s ease, transform .16s ease, border-color .16s ease; }
.pinrow:hover{ box-shadow:0 8px 22px -14px rgba(0,0,0,.3); transform:translateY(-1px); border-color:var(--accent,#C0322E); }
.pinrow:active{ transform:translateY(0) scale(.995); }
.pinrow__thumb{ position:relative; width:70px; height:70px; flex-shrink:0; border-radius:11px; overflow:hidden; background:var(--border,#E7DFD2); display:grid; place-items:center; }
.pinrow__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.pinrow__thumb--tile{ background:color-mix(in srgb, var(--cat,#C0322E) 16%, var(--paper,#F5EFE6)); }
.pinrow__glyph{ font-size:26px; line-height:1; }
.pinrow__pick{ position:absolute; top:3px; right:3px; width:20px; height:20px; border-radius:50%; background:var(--gold,#C8962A); color:#fff; display:flex; align-items:center; justify-content:center; }
.pinrow__pick svg{ width:11px; height:11px; }
.pinrow__main{ min-width:0; display:flex; flex-direction:column; gap:3px; }
.pinrow__title{ font-family:var(--font-display,'Fraunces',Georgia,serif); font-weight:700; font-size:1.06rem; color:var(--ink,#2A2018); line-height:1.2; display:flex; align-items:center; gap:7px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pinrow__title--blur{ filter:blur(5px); -webkit-filter:blur(5px); user-select:none; }
.pinrow__mich{ flex-shrink:0; display:inline-flex; align-items:center; gap:2px; font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--accent,#C0322E); border:1px solid var(--accent,#C0322E); padding:1px 5px; border-radius:4px; }
.pinrow__mich svg{ width:9px; height:9px; }
.pinrow__meta{ font-size:.82rem; color:var(--text-muted,#6f655a); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pinrow__end{ display:flex; flex-direction:column; align-items:flex-end; gap:3px; flex-shrink:0; }
.pinrow__price{ font-size:.8rem; font-weight:700; color:var(--accent,#C0322E); white-space:nowrap; max-width:108px; overflow:hidden; text-overflow:ellipsis; }
.pinrow__lockt{ font-size:.72rem; }
.pinrow__chev{ color:var(--text-muted,#a89c8c); font-size:20px; line-height:1; }
.pinrow:hover .pinrow__chev{ color:var(--accent,#C0322E); }
.pinrow__lock{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; background:rgba(20,17,14,.32); }
.pinrow__lock svg{ width:20px; height:20px; }
.density{ display:inline-flex; gap:2px; background:var(--paper2,#FBF7F0); border:1px solid var(--border,#E7DFD2); border-radius:9px; padding:2px; flex-shrink:0; }
.density__btn{ display:flex; align-items:center; justify-content:center; width:30px; height:26px; border:0; background:transparent; color:var(--text-muted,#8a7f70); border-radius:7px; cursor:pointer; }
.density__btn.is-active{ background:var(--accent,#C0322E); color:#fff; }
.pinrow__thumb--lockimg img{ filter:blur(6px) saturate(.92); transform:scale(1.12); }

/* hero polish (R1 review): desktop balance + mobile CTA calm (2026-06-26) */
@media(min-width:960px){
  .hero77__headline{ font-size:clamp(52px,5.4vw,84px); }
}
.hero77__nowlink{ display:inline-flex; align-items:center; gap:5px; background:none; border:0; padding:10px 6px; font-family:var(--font-body); font-size:15px; font-weight:600; color:var(--accent-2); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; cursor:pointer; min-height:44px; }
.hero77__nowlink:hover{ color:var(--accent); }
.sticky-buy{ transform:translateY(150%); transition:transform .32s var(--ease,ease); }
.sticky-buy.is-awake{ transform:none; }
.density__btn{ min-width:40px; min-height:44px; }

/* R2 review fixes: start-here orphan/crop, gold-on-dark contrast, tap targets (2026-06-26) */
.starthere{ scroll-margin-top:74px; }
.sh-grid > .shcard:last-child:nth-child(odd){ grid-column:1 / -1; }
:root[data-theme="light"] .lockstrip, :root[data-theme="light"] .barlist, :root[data-theme="light"] .buycard, :root[data-theme="light"] .sitefoot77{ --gold:#C9A35A; }
.coll__close{ width:44px; height:44px; }
.near__chip{ min-height:44px; }
.density__btn{ min-width:44px; }

/* R3: locked rows read as premium catalog (real name + clear photo + small lock badge) (2026-06-26) */
.pinrow__lockbadge{ position:absolute; bottom:3px; right:3px; width:19px; height:19px; border-radius:50%; background:rgba(20,17,14,.72); color:#fff; display:grid; place-items:center; box-shadow:0 1px 4px rgba(0,0,0,.3); }
.pinrow--locked{ opacity:1; }
.pinrow--locked .pinrow__title{ color:var(--ink,#2A2018); font-weight:600; }
/* kill the sticky-header red bleed: opaque chiprow + view-toggle backgrounds */
.chiprow{ background:var(--bg,#F5EFE6) !important; }
.view-toggle{ background:var(--bg,#F5EFE6) !important; }

/* R4: hero product/price clarity + sticky-header overlap fix (2026-06-26) */
.hero77__offer{ margin:16px 0 0; font-size:14px; line-height:1.45; color:var(--text-muted); }
.hero77__offer b{ color:var(--accent-2); }
.chiprow--sub, .view-toggle{ position:static !important; top:auto !important; }
.wn__step{ color:var(--text-muted); }

/* R5 final: hide placeholder About photos (Mike adds real later), icon sizing, coll CTA, sticky robust (2026-06-26) */
#about-desk, #about-film{ display:none !important; }
.shcard__ico svg{ width:30px; height:30px; color:var(--accent,#C0322E); }
.coll__ico svg{ width:32px; height:32px; color:var(--accent,#C0322E); }
.coll__cta{ padding:4px 16px 20px; }
.coll__cta .btn77{ width:100%; justify-content:center; }
.chiprow{ background:var(--bg,#F5EFE6) !important; box-shadow:0 1px 0 var(--border,#E7DFD2); }
.chiprow__inner{ background:var(--bg,#F5EFE6); }

/* Mike 2026-06-26: reverted to HIDDEN names — tasteful blur on locked teaser thumbs (not muddy) */
.pinrow__thumb--lockimg img{ filter:blur(5px) saturate(.96) brightness(1.03); transform:scale(1.1); }
.pinrow--locked .pinrow__lock{ background:rgba(20,17,14,.20); }
.pinrow--locked .pinrow__lockt{ font-size:.72rem; font-weight:700; color:var(--accent,#C0322E); }

/* ===== v76-style swipe gallery of my area walks (each its own area+scene caption) — Mike 2026-06-26 ===== */
.walkrow{ margin-top:13px; }
.walkrow__lead{ margin:0 0 9px; font-size:.82rem; font-weight:600; color:var(--text-muted,#8a7f70); }
.walkrow__track{ display:flex; gap:11px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding-bottom:5px; scrollbar-width:none; }
.walkrow__track::-webkit-scrollbar{ height:0; width:0; }
.walkrow__card{ flex:0 0 160px; scroll-snap-align:start; display:flex; flex-direction:column; gap:7px; text-align:left; background:none; border:0; padding:0; cursor:pointer; }
.walkrow__thumb{ position:relative; display:block; width:160px; height:90px; border-radius:11px; overflow:hidden; background:var(--surface-3,#2C2520); }
.walkrow__thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .2s ease; }
.walkrow__card:hover .walkrow__thumb img{ transform:scale(1.05); }
.walkrow__play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:24px; color:#fff; text-shadow:0 2px 9px rgba(0,0,0,.65); background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,.22)); }
.walkrow__cap{ font-size:.78rem; line-height:1.34; color:var(--text,#F3ECE2); display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* Mike Termius batch 2026-06-26: photos visible+names hidden, de-red price, near-me mobile, vibrant un-cropped video frames */
.pinrow__price{ color:var(--text-muted,#8a7f70) !important; font-weight:600 !important; }
.pinrow__lockbadge{ position:absolute; bottom:4px; right:4px; width:20px; height:20px; border-radius:50%; background:rgba(20,17,14,.66); color:#fff; display:grid; place-items:center; box-shadow:0 1px 4px rgba(0,0,0,.35); }
.pinrow__lockbadge svg{ width:11px; height:11px; }
.lockcard__photo{ aspect-ratio:16/9 !important; }
.lockcard__photo img{ filter:saturate(1.16) contrast(1.06) brightness(1.02) !important; }
.lockcard__pin{ font-weight:700 !important; }
.card77__media--film img{ filter:saturate(1.08) contrast(1.03); }
.nearbtn{ display:inline-flex; align-items:center; gap:6px; padding:7px 12px; min-height:38px; border-radius:999px; border:1px solid var(--accent,#C0322E); background:transparent; color:var(--accent,#C0322E); font-family:var(--font-body); font-size:.84rem; font-weight:700; cursor:pointer; }
.nearbtn:hover{ background:var(--accent,#C0322E); color:#fff; }
.nearbtn svg{ width:15px; height:15px; }
.listmeta{ flex-wrap:wrap; gap:8px 12px; }

/* Review fixes 2026-06-27: prominent coll CTA, free tag, brighter thumbs, softer in-list upsell */
.coll__cta{ position:sticky; bottom:0; background:var(--paper,#F5EFE6); padding:14px 16px 18px; margin-top:0; border-top:1px solid var(--border,#E7DFD2); box-shadow:0 -6px 16px -10px rgba(0,0,0,.2); z-index:3; }
.pinrow__free{ font-size:.66rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#3f7d4f; background:color-mix(in srgb,#3f7d4f 12%, transparent); padding:2px 6px; border-radius:5px; }
.pinrow__thumb img{ filter:saturate(1.12) contrast(1.05) brightness(1.04); }
.card77__media--film img{ filter:saturate(1.12) contrast(1.05) brightness(1.03); }
.unlockbar{ background:var(--paper2,#FBF7F0) !important; border:1px solid var(--border,#E7DFD2) !important; }
.unlockbar__txt b{ color:var(--accent,#C0322E); }

/* Mike 2026-06-27: hero "Tap to watch" thumbnail was cropped (box 16/10-16/11 vs 16:9 thumb) -> match 16:9 */
@media(max-width:680px){ .filmwin{ aspect-ratio:16/9 !important; } }
.filmwin__media img.filmwin__poster{ object-fit:cover; }

/* Review 2026-06-27: locked rows/cards read as INTENTIONAL (redaction + Locked chip), not broken blur; a11y label size + tap targets */
.pinrow__title--lock, .card77__title--lock{ display:inline-flex; align-items:center; gap:8px; filter:none; }
.pinrow__redact, .card77__redact{ color:transparent; background:color-mix(in srgb, var(--ink,#23201c) 17%, transparent); border-radius:5px; box-decoration-break:clone; -webkit-box-decoration-break:clone; user-select:none; padding:0 .15em; }
.pinrow__lockchip, .card77__lockchip{ display:inline-flex; align-items:center; gap:3px; flex:0 0 auto; font-size:.64rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--text-muted,#8a7f70); background:color-mix(in srgb, var(--ink,#23201c) 8%, transparent); padding:2px 7px 2px 5px; border-radius:999px; }
.pinrow__lockchip svg, .card77__lockchip svg{ width:10px; height:10px; }
/* a11y: lift sub-12px uppercase micro-labels to 12px */
.lockcard__nbhd, .barcard__nb, .sitefoot77__col h3, .hero77__eyebrow, .lockstrip__kick, .barlist__kick, .about77__kick, .buycard__kick, .lockcard__pin{ font-size:12px !important; }
/* a11y: active-filter remove button 44px touch target */
@media (pointer:coarse){ .active-filters__pill button{ min-width:44px; min-height:44px; } }

/* 2026-06-27 viewport fix: at 320px the redaction bar pushed the LOCKED chip off-screen -> cap redaction, keep chip visible */
.pinrow__title--lock{ min-width:0; max-width:100%; overflow:hidden; flex-wrap:nowrap; }
.pinrow__redact{ flex:0 1 auto; min-width:0; max-width:min(58%, 230px); overflow:hidden; white-space:nowrap; box-decoration-break:slice; -webkit-box-decoration-break:slice; }
.pinrow__lockchip{ flex:0 0 auto; }
.card77__title--lock{ min-width:0; max-width:100%; overflow:hidden; }
.card77__redact{ flex:0 1 auto; min-width:0; max-width:min(70%, 240px); overflow:hidden; white-space:nowrap; box-decoration-break:slice; -webkit-box-decoration-break:slice; }
.card77__lockchip{ flex:0 0 auto; }

/* a11y 2026-06-27 (holistic re-review): LOCKED chips were 10.2px, below 12px floor */
.pinrow__lockchip, .card77__lockchip{ font-size:12px !important; }

/* 2026-06-27: collection depth-count (reviewer: show how deep each collection is) */
.shcard__count{ display:block; margin-top:6px; font-size:11.5px; font-weight:700; letter-spacing:.02em; color:var(--text-muted,#8a7f70); }
.coll__count{ display:inline-block; margin-top:4px; font-size:12px; font-weight:700; color:var(--text-muted,#8a7f70); }

/* 2026-07-02: search inside a collection (e.g. Yokocho Shibuya) — used to render statically and
   ignore the top search bar entirely, so typing there did nothing and there was no way back. */
.coll__empty{ margin:8px 16px 18px; padding:18px 16px; border-radius:14px; background:var(--surface-2,#EFE7D8);
  border:1px solid var(--border,#E7DFD2); color:var(--text-muted,#6f655a); font-size:.95rem; text-align:center; }
.coll__empty-clear{ display:block; margin:12px auto 0; padding:8px 18px; border-radius:999px; border:1px solid var(--border-strong,#C2B49E);
  background:var(--accent,#C0322E); color:#fff; font-weight:700; font-size:.88rem; cursor:pointer; }
.coll__empty-clear:hover{ background:var(--accent-deep,#7A1F1A); }

/* 2026-06-27: gate premium itineraries (3-day plan was fully free) — Day 1 preview then lock */
.itin77__lock{ list-style:none; margin:14px 0 4px; }
.itin77__lockpanel{ text-align:center; padding:22px 18px 24px; border-radius:16px; border:1px dashed color-mix(in srgb,var(--accent,#C0322E) 45%, transparent); background:color-mix(in srgb,var(--accent,#C0322E) 6%, var(--paper,#F5EFE6)); }
.itin77__lockico{ display:inline-grid; place-items:center; width:40px; height:40px; border-radius:50%; background:color-mix(in srgb,var(--accent,#C0322E) 14%, transparent); color:var(--accent,#C0322E); margin-bottom:10px; }
.itin77__lockico svg{ width:18px; height:18px; }
.itin77__locktitle{ font-family:var(--font-display,serif); font-size:1.12rem; font-weight:700; margin:0 0 5px; color:var(--ink,#2A2018); }
.itin77__locksub{ font-size:.86rem; line-height:1.45; color:var(--text-muted,#6f6557); margin:0 auto 15px; max-width:34ch; }
.itin77__lockpanel .btn77{ display:inline-flex; }

/* 2026-06-27 lockdown (Mike: clear photos let people identify the secret spot) — blur LOCKED venue photos; the 6 free stay crisp */
.pinrow--locked .pinrow__thumb img{ filter:blur(6px) saturate(1.08) brightness(1.02); transform:scale(1.22); }
.card77--locked .card77__media img{ filter:blur(9px) saturate(1.08) brightness(1.02); transform:scale(1.16); }
.pinrow--locked .pinrow__thumb, .card77--locked .card77__media{ overflow:hidden; }

/* lock badge on premium Start-Here cards (plans + locked collections) so they read as locked */
.shcard__lock{ display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%; background:color-mix(in srgb,var(--accent,#C0322E) 12%, transparent); color:var(--accent,#C0322E); }
.shcard__lock svg{ width:13px; height:13px; }

/* 2026-06-27: itinerary walk cue is now a PLAY button (was opening the place) */
.itin77__cardwalk{ cursor:pointer; }
.itin77__cardwalk:hover{ text-decoration:underline; }
.itin77__filmplay{ margin:10px 0 2px; aspect-ratio:16/9; width:100%; max-width:540px; border-radius:12px; overflow:hidden; background:#000; }
.itin77__filmplay iframe{ width:100%; height:100%; border:0; display:block; }

/* where-now quiz now returns several picks */
.wn__list{ display:flex; flex-direction:column; gap:10px; }

/* 2026-06-27 modal fixes: scroll-stuck (iOS chaining) + close button visible & fixed */
.coll__box{ overscroll-behavior:contain; }
.coll__close{ position:absolute; top:16px; right:16px; z-index:20; width:46px; height:46px; border-radius:50%; background:var(--accent,#C0322E); border:2px solid rgba(255,255,255,.85); color:#fff; font-size:19px; font-weight:800; line-height:1; display:grid; place-items:center; box-shadow:0 4px 16px rgba(0,0,0,.4); cursor:pointer; }
.coll__close:hover, .coll__close:focus-visible{ background:var(--accent-deep,#7A1F1A); outline:none; }

/* 2026-06-27 conversion: money-back guarantee + social proof (research: trust load with no reviews) */
.buycard__guarantee{ display:flex; gap:9px; align-items:flex-start; margin:16px 0 0; font-size:14px; line-height:1.5; color:#E7E3DB; text-align:left; }
.buycard__shield{ flex:0 0 auto; width:21px; height:21px; border-radius:50%; background:#3f9d57; color:#fff; display:grid; place-items:center; font-size:12px; font-weight:800; margin-top:1px; }
.buycard__proof{ margin:13px 0 0; font-size:13.5px; color:var(--night-muted,#9a9183); }
.buycard__proof a{ color:var(--gold,#C9A35A); font-weight:700; }

/* 2026-06-28 conversion: honest trip-date urgency (dark buycard) */
.buycard__urgency{ display:flex; gap:9px; align-items:flex-start; margin:14px 0 0; font-size:14px; line-height:1.5; color:#E7E3DB; text-align:left; }
.buycard__urgicon{ flex:0 0 auto; font-size:16px; margin-top:1px; }

/* 2026-06-28 hero aha (Mike picked Option A) — the booking-hack flex, tappable to the free Torioka secret */
.hero77__aha{ margin:14px 0 0; font-size:15.5px; line-height:1.55; color:var(--ink,#2A2018); max-width:48ch; }
.hero77__ahalink{ background:none; border:0; padding:0; font:inherit; color:var(--accent,#C0322E); font-weight:700; text-decoration:underline; text-underline-offset:2px; cursor:pointer; }
.hero77__ahalink:hover, .hero77__ahalink:focus-visible{ text-decoration:none; outline:none; }

/* 2026-06-28 barlist: free inline walk-video (the bartender selling point) */
.barcard__media{ position:relative; }
.barcard__iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; z-index:4; border-radius:inherit; }
.barcard.is-playing .barcard__play, .barcard.is-playing .barcard__scrim{ display:none; }
.barcard[role="button"]{ cursor:pointer; text-align:left; }

/* ============================================================
   2026-06-28 HERO 10/10 PASS: hierarchy + warmth + aha pull-quote
   (Mike: the hero felt flat / wall-of-text)
   ============================================================ */
.hero77{ background:
  radial-gradient(120% 82% at 88% -12%, color-mix(in srgb,var(--accent) 9%, transparent), transparent 56%),
  radial-gradient(88% 66% at -6% 114%, color-mix(in srgb,var(--gold,#C9A35A) 8%, transparent), transparent 60%),
  var(--bg); }
/* headline commands, tighter + a touch larger */
.hero77__headline{ font-size:clamp(40px,6.9vw,72px); line-height:1.0; letter-spacing:-.021em; }
.hero77__eyebrow{ margin:0 0 20px; }
/* the aha = a featured pull-quote, the single best hook (was flat body text) */
.hero77__aha{ margin:24px 0 0; padding:14px 20px 15px; max-width:46ch;
  font-size:clamp(15.5px,1.6vw,18.5px); line-height:1.5; color:var(--text);
  border-left:3px solid var(--accent); border-radius:0 13px 13px 0;
  background:linear-gradient(90deg, color-mix(in srgb,var(--accent) 8%, transparent), color-mix(in srgb,var(--accent) 1.5%, transparent) 86%); }
.hero77__ahalink{ color:var(--accent); font-weight:700; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; }
/* supporting text clearly secondary, with breathing rhythm */
.hero77__sub{ margin:24px 0 0; font-size:clamp(15px,1.45vw,17px); color:var(--text-muted); }
.hero77__cta{ margin:28px 0 0; }
.hero77__offer{ margin:22px 0 0; font-size:13px; opacity:.9; }
.hero77__trust{ margin:14px 0 0; }
/* stat band: a crafted strip, hairline-separated, numbers in full ink */
.statband{ border-top:1px solid var(--border); padding-top:clamp(18px,2vw,26px); margin-top:clamp(6px,1vw,14px); }
.stat__num{ color:var(--text); }

/* ============================================================
   2026-06-28 HERO polish pass 2: color discipline + film prominence + mobile proof-up
   ============================================================ */
/* eyebrow muted so RED is reserved for the headline accent + the CTAs (was scattered) */
.hero77__eyebrow{ color:color-mix(in srgb, var(--text) 60%, transparent); }
/* CTA polish: smoother transition + a more confident primary lift */
.btn77{ transition:transform .15s ease, background .2s ease, border-color .2s ease, box-shadow .25s ease, color .2s ease; }
.btn77--primary{ box-shadow:0 14px 32px -12px color-mix(in srgb,var(--accent) 78%, transparent); }
.btn77--primary:hover{ box-shadow:0 18px 40px -12px color-mix(in srgb,var(--accent) 86%, transparent); transform:translateY(-2px); }
/* film window: a more premium frame + a cleaner glass badge */
.filmwin{ box-shadow:0 24px 60px -24px rgba(0,0,0,.5); }
.filmwin__badge{ background:rgba(15,12,10,.6); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); color:#fff; border-color:rgba(255,255,255,.18); }
/* MOBILE: lift the "I filmed this" 4K proof to the top so it leads (was buried under all the text) */
@media(max-width:680px){
  .filmwin{ order:-1; margin:0 0 6px; }
  .hero77__paper{ order:0; }
}

/* 2026-06-28 FIX-ROUND: hero aha link inline (no orphaned period), tap caret, faint photo credit */
.hero77__ahalink{ display:inline !important; }
.hero77__ahacaret{ color:var(--accent,#C0322E); font-weight:800; }
.sh-photo{ position:relative; }
.sh-photo__credit{ position:absolute; right:6px; bottom:6px; font-size:9px; line-height:1.2; color:rgba(255,255,255,.55); background:rgba(0,0,0,.30); padding:2px 6px; border-radius:5px; letter-spacing:.01em; pointer-events:none; font-weight:500; max-width:60%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.hero77__aha .hero77__ahalink{ white-space:normal; }
.hero77__ahacaret{ white-space:nowrap; }

/* A1 2026-06-28: no-photo cards show a real neighbourhood walk-frame */
[data-walk="1"]{ background-size:cover !important; background-position:center !important; position:relative; }
[data-walk="1"]::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.28)); border-radius:inherit; }
[data-walk="1"] .pinrow__glyph, [data-walk="1"] .card77__glyph, [data-walk="1"] .itin77__glyph{ display:none; }
[data-walk="1"] .pinrow__pick, [data-walk="1"] .card77__pick, [data-walk="1"] .pinrow__lockbadge, [data-walk="1"] .card77__lock, [data-walk="1"] .pinrow__lock{ position:relative; z-index:2; }

/* PASS5 2026-06-28: professional hero link + refined pull-quote + clean no-photo tile */
.hero77__aha{ text-align:left; box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--accent) 9%, transparent), 0 8px 26px -16px rgba(0,0,0,.45); border-radius:4px 14px 14px 4px; }
.hero77__ahalink{
  display:inline !important; color:var(--accent) !important; font-weight:800;
  text-decoration:none !important;
  background:linear-gradient(180deg, transparent 60%, color-mix(in srgb,var(--accent) 26%, transparent) 60%) !important;
  padding:0 .5px; border-radius:2px; cursor:pointer;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
  transition:background .15s ease;
}
.hero77__ahalink:hover, .hero77__ahalink:focus-visible{
  background:color-mix(in srgb,var(--accent) 16%, transparent) !important; outline:none;
}
.hero77__ahacaret{ color:var(--accent); font-weight:900; white-space:nowrap; }
/* no-photo placeholder = an intentional, premium category tile (never a video thumbnail) */
.pinrow__thumb--tile, .card77__media--tile, .itin77__thumb--tile{
  background: radial-gradient(120% 100% at 28% 22%, color-mix(in srgb,var(--cat) 42%, transparent), transparent 60%), linear-gradient(150deg, color-mix(in srgb,var(--cat) 22%, #15110d), #0f0b08) !important;
}
.pinrow__glyph, .card77__glyph, .itin77__glyph{ filter:drop-shadow(0 2px 6px rgba(0,0,0,.4)); opacity:.96; }

/* Concierge Recommendations 2026-06-29 */
.cncrg{ max-width:760px; margin:0 auto; padding:6px 0 70px; }
.cncrg__head{ padding:10px 4px 6px; }
.cncrg__kick{ font:700 11px/1 var(--font-sans,Inter,sans-serif); letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin:14px 0 9px; }
.cncrg__title{ font-family:var(--font-display,Newsreader,Georgia,serif); font-weight:600; font-size:clamp(26px,6.4vw,34px); line-height:1.08; margin:0 0 11px; color:var(--text); }
.cncrg__trust{ font-size:14px; line-height:1.55; color:var(--text-muted); max-width:54ch; margin:0; }
.cncrg__sec{ margin:0 0 4px; }
.cncrg__group{ display:flex; align-items:center; gap:9px; font-size:12.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--text-secondary); margin:28px 4px 13px; }
.cncrg__gico{ font-size:16px; }
.cncrg__gcount{ font-size:11px; font-weight:700; color:var(--text-muted); background:var(--surface-2); border-radius:999px; padding:2px 8px; }
.cncrg__list{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.cncrg__card{ display:flex; gap:13px; padding:13px; background:var(--surface-1); border:1px solid var(--line); border-radius:15px; box-shadow:var(--sh-card,0 6px 18px -12px rgba(0,0,0,.5)); }
.cncrg__card.is-limited{ border-color:color-mix(in srgb, var(--accent) 45%, var(--line)); }
.cncrg__thumb{ flex:none; width:64px; height:64px; border-radius:12px; display:grid; place-items:center; background:radial-gradient(120% 100% at 30% 22%, color-mix(in srgb,var(--cat) 46%, transparent), transparent 60%), linear-gradient(150deg, color-mix(in srgb,var(--cat) 24%, #15110d), #100c09); }
.cncrg__glyph{ font-size:27px; filter:drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
.cncrg__main{ min-width:0; display:flex; flex-direction:column; gap:3px; flex:1; }
.cncrg__name{ font-weight:700; font-size:15.5px; color:var(--text); line-height:1.28; }
.cncrg__nowon{ display:inline-block; margin-left:7px; font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:var(--accent); border-radius:6px; padding:2px 7px; vertical-align:middle; }
.cncrg__blurb{ font-size:13.5px; line-height:1.45; color:var(--text-secondary); }
.cncrg__meta{ font-size:12px; color:var(--text-muted); font-weight:600; margin-top:1px; }
.cncrg__links{ display:flex; gap:16px; flex-wrap:wrap; margin-top:5px; }
.cncrg__link, .cncrg__phone{ font-size:12.5px; font-weight:700; color:var(--accent); text-decoration:none; }
.cncrg__link:hover, .cncrg__phone:hover{ text-decoration:underline; }
/* Concierge photo thumbs 2026-06-29 */
.cncrg__thumb--photo{ position:relative; overflow:hidden; }
.cncrg__thumb--photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:2; }
.cncrg__thumb--photo .cncrg__glyph{ opacity:.9; }
.cncrg__thumb--photo.is-fallback{ } /* img removed on error -> glyph shows */

/* ===== Go-live fix (2026-06-30): playing videos must be tappable + pausable (iOS + desktop) ===== */
.filmwin.is-playing .filmwin__media iframe{ pointer-events:auto !important; z-index:2; }
.barcard__iframe{ pointer-events:auto !important; }
.lockcard.is-playing .lockcard__iframe,
.lockcard.is-playing .lockcard__photo iframe{ pointer-events:auto !important; z-index:5; }
/* Go-live P0 (2026-07-01): all play iframes must be tappable + pausable */
.itin77__filmplay iframe, .sh-film iframe, .nbhd__video iframe{ pointer-events:auto !important; }
/* Go-live P0: detail sheet must scroll fully (no stuck bottom) on iOS */
.sheet__body{ overscroll-behavior:contain; -webkit-overflow-scrolling:touch; touch-action:pan-y; }
/* Go-live P3 (2026-07-01): tighten desktop Reference + New to a comfortable centered reading width */
@media(min-width:1040px){
  #view-reference .container{ max-width:1060px; margin-left:auto; margin-right:auto; }
  #view-new .container, #view-about .container{ max-width:960px; margin-left:auto; margin-right:auto; }
}
/* Go-live P2 (2026-07-01): clearance so the last detail line isn't hidden under the sticky action bar */
.sh-actions-spacer{ height:92px; pointer-events:none; }

/* ============================================================
   P5 DESKTOP/IPAD HERO POLISH (2026-07-01)
   Only min-width:960px+ rules. Mobile (<=680) + tablet untouched.
   Goal: turn the small floating film window into a tall,
   anchored cinematic panel; balance the two columns.
   ============================================================ */
@media(min-width:960px){
  .hero77__grid{
    grid-template-columns:minmax(0,0.94fr) minmax(0,1.16fr);
    gap:clamp(40px,4.2vw,68px);
    align-items:center;
    padding-top:clamp(44px,5vw,76px);
    padding-bottom:clamp(52px,5.4vw,84px);
  }
  .hero77__paper{ align-self:center; }
  .filmwin{
    aspect-ratio:4 / 3.15;
    border-radius:18px;
    border:1px solid color-mix(in srgb, var(--accent) 15%, var(--border));
    box-shadow:0 36px 90px -30px rgba(8,10,14,.60), 0 4px 16px -6px rgba(8,10,14,.30);
  }
  /* let the night poster fill the taller panel cleanly */
  .filmwin__media::before{ background-size:cover; background-position:center; }
}
@media(min-width:1280px){
  .hero77__grid{ grid-template-columns:minmax(0,0.9fr) minmax(0,1.2fr); }
  .filmwin{ aspect-ratio:4 / 3.35; }
}

/* P5: premium centered play button + poster depth on the hero film window (desktop) */
@media(min-width:960px){
  .filmwin__media::after{
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:
      radial-gradient(58% 58% at 50% 42%, rgba(0,0,0,0) 40%, rgba(8,10,14,.34) 100%),
      linear-gradient(to bottom, rgba(8,10,14,.30) 0%, rgba(8,10,14,0) 26%, rgba(8,10,14,0) 62%, rgba(8,10,14,.52) 100%);
  }
  .filmwin.is-playing .filmwin__media::after{ opacity:0; }
  .filmwin__btn-lg{ /* reserved */ }
  .filmwin::after{
    content:""; position:absolute; z-index:4; left:50%; top:47%; transform:translate(-50%,-50%);
    width:78px; height:78px; border-radius:50%;
    background:rgba(18,16,13,.40) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5.2v13.6L19 12z'/%3E%3C/svg%3E") no-repeat;
    background-size:32px 32px; background-position:53% center;
    border:1.6px solid rgba(255,255,255,.85);
    box-shadow:0 10px 34px rgba(0,0,0,.44), 0 0 0 10px rgba(255,255,255,.06);
    backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
    transition:transform .26s cubic-bezier(.4,0,.2,1), background-color .26s ease, opacity .2s ease;
    pointer-events:none;
  }
  .filmwin:hover::after{ transform:translate(-50%,-50%) scale(1.07); background-color:color-mix(in srgb, var(--accent) 78%, rgba(18,16,13,.4)); }
  .filmwin.is-playing::after{ opacity:0; }
}

/* ============================================================
   UNLOCKED STATE (2026-07-02): when the guide is unlocked, hide every
   "buy / locked" prompt. Previously there were ZERO .is-unlocked rules,
   so the nav pill, sticky buy bar and Start-Here lock icons stayed on
   even for a paid user.
   ============================================================ */
.is-unlocked .buypill,
.is-unlocked .sticky-buy,
.is-unlocked .unlockbar,
.is-unlocked .shcard__lock,
.is-unlocked .card77__lock,
.is-unlocked .card77__lockchip,
.is-unlocked .pinrow__lockbadge,
.is-unlocked .pinrow__lockchip{ display:none !important; }
.is-unlocked .shcard--locked{ opacity:1; }

/* PAID STATE (2026-07-03): once the key is in, the site stops selling.
   Green (olive, the design system's trust color) replaces every $29.99 ask. */
.is-unlocked .buycard__pricewrap,
.is-unlocked .buycard__cta,
.is-unlocked .buycard__ghost,
.is-unlocked .buycard__risk,
.is-unlocked .buycard__freeline,
.is-unlocked .buycard__recover,
.is-unlocked .pitch--closer,
.is-unlocked #heroTaste{ display:none !important; }
.paidnote{ display:none; }
.is-unlocked .paidnote{ display:flex; align-items:flex-start; gap:12px; margin:6px 0 4px; padding:16px 18px;
  border-radius:14px; border:1px solid color-mix(in srgb,var(--olive,#7A8050) 55%, transparent);
  background:color-mix(in srgb,var(--olive,#7A8050) 14%, transparent);
  color:var(--text,#F3ECE2); font-size:15px; line-height:1.5; text-align:left; }
.paidnote__tick{ flex:0 0 auto; display:grid; place-items:center; width:26px; height:26px; border-radius:50%;
  background:var(--olive,#7A8050); color:#fff; font-weight:800; font-size:14px; }
.paidnote b{ color:var(--olive-2,#A4AB78); }
.btn77--paid{ background:color-mix(in srgb,var(--olive,#7A8050) 22%, transparent) !important;
  border:1.5px solid var(--olive,#7A8050) !important; color:var(--olive-2,#A4AB78) !important;
  box-shadow:none !important; cursor:default; }
:root[data-theme="light"] .paidnote{ color:var(--text,#1A1612); }
:root[data-theme="light"] .paidnote b{ color:var(--olive-2,#59632F); }
:root[data-theme="light"] .btn77--paid{ color:var(--olive-2,#59632F) !important; }

/* where-now result: honest free-vs-locked note */
.wn__rnote{ margin:-8px 0 12px; font-size:.86rem; line-height:1.45; color:var(--text-muted,#6E6557); }

/* mobile hero rhythm: pull the value + CTA closer to the first fold */
@media (max-width:640px){
  .hero77__eyebrow{ margin:0 0 10px !important; }
  .hero77__aha{ margin:14px 0 0 !important; padding:12px 16px 13px !important; }
  .hero77__sub{ margin:14px 0 0 !important; }
  .hero77__cta{ margin-top:16px !important; }
  .hero77__offer{ margin:12px 0 0 !important; }
}

/* scroll reveal (class added by JS only; reduced-motion users never get .rv) */
.rv{ opacity:0; transform:translateY(14px); transition:opacity .55s ease var(--rv-d,0ms), transform .6s cubic-bezier(.22,.9,.3,1) var(--rv-d,0ms); }
.rv.rv-in{ opacity:1; transform:none; }

/* ============================================================
   INSIDER'S CUT — hero (design handoff 2026-07-02)
   Mobile = full-bleed night film hero; desktop keeps the paper
   editorial grid with the double-framed film window.
   ============================================================ */

/* shared: film grain on the hero window (pure CSS, no DOM) */
.filmwin__media::after{
  content:""; position:absolute; inset:0; z-index:2; opacity:.4; mix-blend-mode:overlay; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
.filmwin.is-playing .filmwin__media::after{ display:none; }

/* shared: slow Ken Burns on the poster, paused once the film plays */
@keyframes tlgKenburns{ from{ transform:scale(1) translate(0,0); } to{ transform:scale(1.07) translate(-1.4%,1%); } }
.filmwin__poster{ animation:tlgKenburns 16s ease-in-out infinite alternate; will-change:transform; }
.filmwin.is-playing .filmwin__poster{ animation:none; }

/* shared: REC badge (blinking vermilion dot) */
.filmwin__badge--rec{
  display:inline-flex; align-items:center; gap:7px; padding:6px 11px; border-radius:999px;
  font:700 10.5px/1 var(--font-body); letter-spacing:.1em; text-transform:uppercase; color:#fff;
  background:rgba(10,12,16,.5); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.18);
}
.filmwin__badge--rec::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--accent,#C0322E); animation:tlgBlink 2.2s ease infinite; }
@keyframes tlgBlink{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

/* shared: credential card + trust line */
.hero77__cred{ display:flex; align-items:center; gap:11px; }
.hero77__credtxt{ font:400 12px/1.4 var(--font-body); color:var(--text-muted); }
.hero77__credtxt b{ display:block; font-weight:650; font-size:13px; color:var(--text); }
.hero77__face{ width:44px; height:44px; border-radius:50%; flex:0 0 auto; overflow:hidden; }
.hero77__trust{ display:flex; align-items:center; gap:7px; font:500 11.5px/1.4 var(--font-body); color:var(--text-faint); margin:12px 0 0; }
.hero77__trust b{ color:var(--text-muted); font-weight:600; }

/* entrance choreography: film settles, content rises with stagger */
@keyframes tlgRise{ from{ opacity:0; transform:translateY(18px); } }
@keyframes tlgSettle{ from{ opacity:0; transform:scale(1.045); } }
.filmwin{ animation:tlgSettle 1.4s cubic-bezier(.2,.7,.2,1) backwards; }
.hero77__headline{ animation:tlgRise .7s cubic-bezier(.2,.7,.2,1) .12s backwards; }
.hero77__sub{ animation:tlgRise .7s cubic-bezier(.2,.7,.2,1) .24s backwards; }
.hero77__cred{ animation:tlgRise .7s cubic-bezier(.2,.7,.2,1) .38s backwards; }
.hero77__cta{ animation:tlgRise .7s cubic-bezier(.2,.7,.2,1) .52s backwards; }
.hero77__trust{ animation:tlgRise .7s cubic-bezier(.2,.7,.2,1) .68s backwards; }
.statband{ animation:tlgRise .7s cubic-bezier(.2,.7,.2,1) .84s backwards; }
@media (prefers-reduced-motion:reduce){
  .filmwin, .hero77__headline, .hero77__sub, .hero77__cred, .hero77__cta, .hero77__trust, .statband{ animation:none; }
  .filmwin__poster{ animation:none; }
  .filmwin__badge--rec::before{ animation:none; }
}

/* the aha field-note relocated into the lockstrip (paper note on night) */
.lockstrip__aha{
  margin:16px 0 0; max-width:56ch;
  background:#FAF4EA !important; color:#2A2018 !important;
  border-left:3px solid var(--accent,#C0322E);
  padding:14px 18px 15px !important; border-radius:4px 14px 14px 4px;
  box-shadow:0 14px 34px -18px rgba(0,0,0,.6);
}
.lockstrip__aha .hero77__ahalink{ color:#A82A26; }

/* Mike 2026-07-03: ONE hero design for both themes = the v77 film-window card.
   The full-bleed night hero was removed; colors follow the theme tokens. */
@media (max-width:959px){
  .stat__lbl .lbl-d{ display:none; }
}
/* ---------- DESKTOP refinements (>=960px) ---------- */
@media (min-width:960px){
  .filmwin{ box-shadow:0 0 0 7px rgba(245,239,230,.65), 0 34px 80px -30px rgba(20,10,8,.65); transition:transform .6s cubic-bezier(.2,.7,.2,1); }
  .filmwin:hover{ transform:scale(1.02); }
  .filmwin__badge--rec{ position:absolute; top:14px; left:14px; z-index:5; }
  .hero77__cred{ margin-top:18px; padding-top:16px; border-top:1px dashed var(--border-strong,#C2B49E); }
}

/* ============================================================
   INSIDER'S CUT — guide list (gold lock language + card polish)
   ============================================================ */
.pinrow__lockname, .card77__lockname{
  font-family:var(--font-display,'Fraunces',Georgia,serif); font-style:italic; font-weight:500;
  color:var(--gold,#8A6A2E); letter-spacing:0;
}
.pinrow--locked .pinrow__title--lock, .card77--locked .card77__title--lock{ filter:none !important; }
.pinrow__redact, .card77__redact{ display:none !important; }

/* the first-person one-liner reads in the creator's voice —
   inclusive sizing (Mike 2026-07-03): bigger, brighter, still his voice */
.card77__why{
  font-family:var(--font-display,'Fraunces',Georgia,serif); font-style:italic;
  font-size:16px; line-height:1.55; color:var(--text);
}
/* kicker treatment for the card meta line */
.card77__sub{
  font-size:10px !important; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold,#8A6A2E) !important;
}
.card77__sub .card77__price{ color:var(--text-muted) !important; letter-spacing:.04em; }
/* fact chips (design: inset paper chips with vermilion icons) */
.card77__trio .trio{
  background:var(--surface-3,#F1E8DA); border-radius:8px; padding:7px 10px;
}
.card77__trio .trio__i{ color:var(--accent,#C0322E); }
:root:not([data-theme="light"]) .card77__trio .trio{ background:rgba(255,255,255,.06); }

/* locked rows: one lock signal is enough — the gold line + thumb badge carry it */
.pinrow--locked .pinrow__lockchip, .card77--locked .card77__lockchip{ display:none !important; }
/* locked fallback tiles: gold-dark treatment, not the category pin glyph */
.pinrow--locked .pinrow__thumb--tile:not([data-walk="1"]){ background:linear-gradient(135deg,#241A0D,#3A2B14) !important; }
.pinrow--locked .pinrow__thumb--tile:not([data-walk="1"]) .pinrow__glyph{ display:none; }
.card77--locked .card77__media--tile:not([data-walk="1"]){ background:linear-gradient(135deg,#241A0D,#3A2B14) !important; }
.card77--locked .card77__media--tile:not([data-walk="1"]) .card77__glyph{ display:none; }
.pinrow--locked .pinrow__lockbadge{ background:rgba(201,163,90,.18); color:#C9A35A; border:1px solid rgba(201,163,90,.4); }

/* ============================================================
   INSIDER'S CUT — buy panel: ambient glow, term pills, check
   discs, and the hanko stamp (the thread's destination)
   ============================================================ */
.buycard{ position:relative; }
.buycard::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:
    radial-gradient(520px 300px at 50% -40px, rgba(192,50,46,.28), transparent 70%),
    radial-gradient(420px 300px at 88% 92%, rgba(64,96,168,.12), transparent 70%);
}
.buycard__inner{ position:relative; z-index:2; }
.buycard__terms{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 0; }
.bterm{
  padding:6px 11px; border-radius:999px; font:700 9.5px/1 var(--font-body);
  letter-spacing:.08em; text-transform:uppercase;
  color:#D9DCE2; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
}
.bterm b{ color:#fff; font-weight:750; }
.buycard__list li{ list-style:none; position:relative; padding-left:28px; }
.buycard__list li::before{
  content:"✓"; position:absolute; left:0; top:2px; width:17px; height:17px; border-radius:50%;
  background:var(--accent,#C0322E); color:#fff; font-size:11px; font-weight:800;
  display:grid; place-items:center;
}
.buycard__freeline{ margin:12px 0 0; font-size:13px; color:#A9B0BC; }
.buycard__freeline b{ color:#D9DCE2; }

/* the hanko — fires once when the buy panel enters */
.buycard__ctazone{ position:relative; display:block; margin-top:34px; }

/* ============================================================
   INSIDER'S CUT — place detail: trio labels, insider-quote why,
   dashed reservation-reality note
   ============================================================ */
.sh-why{
  font-family:var(--font-display,'Fraunces',Georgia,serif); font-style:italic;
  font-size:14.5px; line-height:1.6; color:var(--text);
  border-left:3px solid var(--accent,#C0322E); padding-left:14px;
}
.dgrid__l{
  color:var(--accent,#C0322E) !important; font-size:9px !important; font-weight:800 !important;
  letter-spacing:.14em !important; text-transform:uppercase !important;
}
.dgrid__l svg{ width:12px; height:12px; }
.sh-special{
  border:1.5px dashed var(--border-strong,#C2B49E); background:var(--surface-2,#FAF4EA);
  border-radius:10px; padding:12px 14px; font-size:13px; line-height:1.55;
}
:root:not([data-theme="light"]) .sh-special{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.2); }

/* night map: locked pins go gold with a lock glyph (design screen 05) */
.pin--locked{
  background:#C9A35A !important; border-color:#fff !important;
  width:22px !important; height:22px !important;
}
.pin--locked svg{ width:11px; height:11px; stroke:#2B2013; }
.map__legend .lg-lock{ width:14px; height:14px; border-radius:50%; background:#C9A35A; border:1.5px solid #fff; display:inline-block; }

/* ============================================================
   INSIDER'S CUT — faithful pass 2: pcard list, thread rail,
   map lock bar, buy composition (design screens 02/04/05/06)
   ============================================================ */

/* --- 02: "The list." header --- */
.listhead{ padding:18px 2px 4px; }
.listhead__t{ margin:0 0 3px; font:540 26px/1 var(--font-display,'Fraunces',Georgia,serif); letter-spacing:-.01em; color:var(--text); }
.listhead__dot{ color:var(--accent,#C0322E); }
.listhead__s{ margin:0; font:400 12.5px/1.45 var(--font-body); color:var(--text-muted); max-width:52ch; }

/* --- 04: day-plan vermilion thread rail --- */
.itin77__foot{
  list-style:none; padding:10px 4px 20px 40px; font:italic 500 13px/1.4 var(--font-display,'Fraunces',Georgia,serif);
  color:var(--text-muted);
}
.itin77__foot b{ color:var(--accent-2,#A82A26); font-style:normal; }

/* --- 05: gold lock bar on the map --- */
.maplock{
  position:absolute; left:12px; right:12px; bottom:52px; z-index:500;
  display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:13px;
  background:linear-gradient(135deg,#1B140A,#2B2013); border:1px solid rgba(201,163,90,.4);
  box-shadow:0 16px 40px -18px rgba(0,0,0,.7);
}
.maplock__ico{ width:30px; height:30px; flex:0 0 auto; display:grid; place-items:center; border-radius:9px; background:rgba(201,163,90,.16); color:#C9A35A; }
.maplock__ico svg{ width:15px; height:15px; }
.maplock__t{ flex:1; font:400 11.5px/1.4 var(--font-body); color:#C9BCA3; min-width:0; }
.maplock__t b{ display:block; color:#F3ECE2; font-weight:700; font-size:12.5px; }
.maplock__cta{
  flex:0 0 auto; border:0; cursor:pointer; padding:9px 16px; border-radius:999px;
  font:700 12.5px/1 var(--font-body); color:#2B2013; background:#C9A35A;
}
.is-unlocked .maplock{ display:none; }

/* --- 06: buy composition --- */
.buycard__h1{ margin:6px 0 10px; font:540 30px/1.05 var(--font-display,'Fraunces',Georgia,serif); color:#fff; letter-spacing:-.01em; }
.buycard__h1 em{ font-style:italic; color:#FFB4AE; }
.buycard__now sup{ font-size:.36em; top:-1.1em; position:relative; margin-right:1px; }
.buycard__ghost{
  display:block; width:100%; margin:10px 0 0; min-height:46px; cursor:pointer;
  background:transparent; color:#F3ECE2; border:1.5px solid rgba(255,255,255,.28); border-radius:999px;
  font:700 15px/1 var(--font-body);
}
.buycard__ghost:hover{ border-color:rgba(255,255,255,.5); }

/* ============================================================
   SCREEN 06 — exact port (build/06-unlock-buy.html values)
   ============================================================ */
.buycard{ background:#0E1014; }
.buycard__film{ display:none !important; }
.buycard::before{
  background:radial-gradient(90% 50% at 50% -6%, rgba(192,50,46,.28), transparent 62%),
             radial-gradient(70% 40% at 85% 70%, rgba(42,111,219,.12), transparent 60%) !important;
}
.buycard__kick{
  font:700 10.5px/1 var(--font-body) !important; letter-spacing:.2em !important; text-transform:uppercase;
  color:#C9A35A !important; margin:0 0 12px !important; text-align:center;
}
.buycard__h1{ font:540 30px/1.05 var(--font-display,'Fraunces',Georgia,serif) !important; color:#fff !important; margin:0 !important; letter-spacing:-.01em !important; text-align:center; }
.buycard__h1 em{ font-style:italic; color:#FFB4AE !important; }
.buycard__pricewrap{ text-align:center; margin:16px 0 2px; }
.buycard__amount{ font:600 64px/0.95 var(--font-display,'Fraunces',Georgia,serif); letter-spacing:-.02em; color:#fff; }
.buycard__amount sup{ font-size:24px; vertical-align:super; }
.buycard__terms{ display:flex; justify-content:center; gap:7px; margin:11px 0 0 !important; flex-wrap:wrap; }
.bterm{
  font:650 10.5px/1 var(--font-body) !important; letter-spacing:.08em !important; text-transform:uppercase;
  color:#A9B0BC !important; border:1px solid rgba(255,255,255,.16) !important; border-radius:999px;
  padding:7px 12px !important; background:none !important;
}
.bterm b{ color:#fff !important; }
.buycard__list{ list-style:none; margin:18px 0 0 !important; padding:16px 2px 2px !important; border-top:1px dashed rgba(255,255,255,.16); display:grid; gap:9px; }
.buycard__list li{ display:flex; gap:10px; font:400 13px/1.45 var(--font-body) !important; color:#D9DCE2 !important; padding-left:0 !important; }
.buycard__list li::before{ display:none !important; }
.buycard__list li b{ color:#fff; font-weight:650; }
.c-buy__check{ flex:0 0 auto; width:17px; height:17px; border-radius:50%; background:#C0322E; display:grid; place-items:center; margin-top:1px; }
.c-buy__check svg{ width:9px; height:9px; color:#fff; }
.buycard__freeline{ margin:13px 0 0 !important; text-align:center; font:500 11.5px/1.5 var(--font-body) !important; color:#7C828E !important; }
.buycard__freeline b{ color:#A9B0BC !important; }
.buycard__ctazone{ position:relative; margin-top:14px !important; padding:0 0 6px; display:flex; flex-direction:column; gap:9px; }
.buycard__stampzone{ position:relative; height:0; }
.hanko{
  position:absolute; right:6px; top:-74px; width:78px; height:78px; border-radius:50%; z-index:3;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; transform:rotate(8deg);
  color:#E23830; border:3.5px solid currentColor;
  background:radial-gradient(circle at 50% 40%, rgba(232,83,74,.18), rgba(232,83,74,.06));
  box-shadow:0 0 0 1px rgba(232,83,74,.2), inset 0 0 18px rgba(232,83,74,.12);
  opacity:0; pointer-events:none;
}
.hanko span{ font:700 30px/1 var(--font-display,'Fraunces',Georgia,serif); letter-spacing:-.02em; }
/* PAID / LIFETIME: brighter than the ring, stacked under the kanji with a hairline — never overlapping it */
.hanko small{ font:900 9px/1.18 var(--font-body); letter-spacing:.12em; text-transform:uppercase; text-align:center;
  color:#FF5348; padding-top:3px; margin-top:1px; border-top:1px solid rgba(255,83,72,.6); }
@keyframes stamp{ 0%{ opacity:0; transform:rotate(8deg) scale(2.1);} 60%{ opacity:1; transform:rotate(8deg) scale(.94);} 100%{ opacity:1; transform:rotate(8deg) scale(1);} }
.buycard.is-stamped .hanko{ animation:stamp .55s cubic-bezier(.2,1.4,.3,1) 1.35s both; }
@media (prefers-reduced-motion:reduce){ .buycard.is-stamped .hanko{ animation:none; opacity:1; } }
.buycard__cta{ font-size:17px !important; font-weight:700 !important; }
.buycard__risk{ text-align:center; font:400 11.5px/1.5 var(--font-body); color:#7C828E; margin:4px 0 0; }
.buycard__risk b{ color:#A9B0BC; font-weight:600; }

/* ============================================================
   SCREEN 03 — exact port (build/03-place-detail.html values)
   ============================================================ */
.c-det__badges{ display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
.badge--cat{ background:#F1E8DA !important; color:#5A5048 !important; border:1px solid #D9CFBE !important; }
.badge--gold{ background:#9C7A38 !important; color:#fff !important; border:0 !important; }
:root:not([data-theme="light"]) .badge--cat{ background:rgba(255,255,255,.07) !important; color:var(--text-muted) !important; border-color:rgba(255,255,255,.14) !important; }
.trio3{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:12px 0 0; }
.trio3__cell--exit{ grid-column:1 / -1; }
.trio3__cell{ background:var(--surface-1,#FFFFFF); border:1px solid var(--border,#D9CFBE); border-radius:12px; padding:11px 10px 12px; min-width:0; }
.trio3__k{ display:flex; align-items:center; gap:5px; font:700 9px/1 var(--font-body); letter-spacing:.12em; text-transform:uppercase; color:#A82A26; margin-bottom:7px; }
.trio3__k svg{ width:11px; height:11px; flex:0 0 auto; }
.trio3__v{ font:650 13.5px/1.25 var(--font-body); color:var(--text,#1A1612); overflow-wrap:break-word; }
.trio3__s{ font:400 10.5px/1.35 var(--font-body); color:var(--text-muted,#5A5048); margin-top:3px; }
:root:not([data-theme="light"]) .trio3__k{ color:#E06B65; }
.resv{ display:flex; gap:10px; align-items:flex-start; background:var(--surface-2,#FAF4EA); border:1px dashed #C2B49E; border-radius:12px; padding:11px 13px; margin:12px 0 0; }
.resv__ico{ font-size:15px; }
.resv__t{ font:650 12.5px/1.35 var(--font-body); color:var(--text,#1A1612); }
.resv__s{ font:400 11.5px/1.4 var(--font-body); color:var(--text-muted,#5A5048); margin-top:2px; }
:root:not([data-theme="light"]) .resv{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.22); }
.crowd{ background:var(--surface-1,#FFFFFF); border:1px solid var(--border,#D9CFBE); border-radius:12px; padding:11px 13px; margin:12px 0 0; }
.crowd__k{ display:flex; justify-content:space-between; font:700 9.5px/1 var(--font-body); letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint,#857A6C); margin-bottom:8px; }
.crowd__k b{ color:#5F6B3A; }
.crowd__bar{ display:flex; gap:2px; height:16px; border-radius:5px; overflow:hidden; }
.crowd__seg{ flex:1; }
.cw-g{ background:#8FA663; } .cw-y{ background:#D9B451; } .cw-r{ background:#C4574E; }
.crowd__times{ display:flex; justify-content:space-between; font:500 9px/1 var(--font-body); color:var(--text-faint,#857A6C); margin-top:5px; }
.crowd__sum{ margin:8px 0 0; font:400 11.5px/1.5 var(--font-body); color:var(--text-muted,#5A5048); }
/* sayblock exact */
.sh-why{
  border-left:3px solid #C0322E !important; padding:2px 0 2px 12px !important;
  font:italic 450 14.5px/1.5 var(--font-display,'Fraunces',Georgia,serif) !important; color:#3B3428 !important; margin:14px 0 0;
}
.sh-why b{ font-style:normal; color:#A82A26; }
:root:not([data-theme="light"]) .sh-why{ color:var(--text) !important; }
/* actions: primary flex 1.5 / ghost flex 1 */
.sh-actions .sh-act--primary{ flex:1.5; }
.sh-actions .sh-act{ flex:1; }

/* ============================================================
   SCREEN 04 — exact port (thread rail 33px/2.5px, fill, dots,
   kickers, names per build/04-day-plan.html)
   ============================================================ */
#itinStopList{ position:relative; padding-left:0; }
#itinStopList::before{
  content:""; position:absolute; left:33px; top:18px; bottom:10px; width:2.5px; z-index:0;
  background:repeating-linear-gradient(#C2B49E 0 5px, transparent 5px 10px);
}
/* Mike 2026-07-03: only ONE red line, the scroll-driven .itin77__rail-fill.
   The self-filling threadfill drew a second full-height red line — gone. */
.itin77__threadfill{ display:none; }
.itin77__node{
  width:26px !important; height:26px !important; border-radius:50%;
  background:#C0322E !important; color:#fff !important;
  display:grid; place-items:center; font:700 12px/1 var(--font-body) !important;
  box-shadow:0 0 0 4px var(--bg,#F5EFE6) !important; position:relative; z-index:2;
}
.itin-stop__time{
  font:700 9.5px/1 var(--font-body) !important; letter-spacing:.1em !important;
  text-transform:uppercase !important; color:#A82A26 !important;
}
.itin-stop__name{ font:600 14.5px/1.15 var(--font-display,'Fraunces',Georgia,serif) !important; color:var(--text,#1A1612) !important; margin:3px 0 2px; }
.itin-stop__note{ font:400 11px/1.4 var(--font-body) !important; color:var(--text-muted,#5A5048) !important; }
:root:not([data-theme="light"]) .itin-stop__time{ color:#E06B65 !important; }

/* ============================================================
   SCREEN 05 — exact fixes (locked pin 20px, lock bar exact colors)
   ============================================================ */
.split__map{ background:#0E1014; }
.pin--locked{ width:20px !important; height:20px !important; background:#C9A35A !important; }
.maplock__t{ color:#C9B98F !important; }
.maplock__t b{ color:#F0E3C6 !important; }
.maplock__cta{ color:#1B140A !important; }

/* ============================================================
   SCREEN 07 — desktop exact (h1 60, grid 1.02/1.2 gap 52,
   film 16/10 r16 + cream ring, stats 30px)
   ============================================================ */
@media (min-width:960px){
  .hero77__headline{ font-size:60px !important; font-weight:540 !important; line-height:1.01 !important; letter-spacing:-.02em; }
  .hero77__grid{ grid-template-columns:1.02fr 1.2fr !important; gap:52px !important; }
  .filmwin{ aspect-ratio:16/10 !important; border-radius:16px !important; }
  .hero77__sub{ font-size:17px !important; line-height:1.55 !important; max-width:44ch; }
  .statband .stat__num{ font:600 30px/1 var(--font-display,'Fraunces',Georgia,serif) !important; }
  .statband .stat__lbl{ font-size:10.5px !important; letter-spacing:.08em !important; text-transform:uppercase; margin-top:5px; }
}
/* 07: stat band is one row of five on desktop */
@media (min-width:960px){
  .statband{ display:flex !important; gap:0 !important; }
  .statband .stat{ flex:1; text-align:center; padding:18px 10px 20px; border-left:1px solid var(--border,#D9CFBE); border-radius:0; box-shadow:none; background:var(--surface-2,#FAF4EA); }
  .statband .stat:first-child{ border-left:0; }
}

/* ============================================================
   MIKE'S PHONE ROUND (2026-07-02): visibility + fixes
   ============================================================ */
/* search clear button */
.search{ position:relative; }
.search__clear{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:50%; border:0; cursor:pointer;
  background:var(--surface-3,#F1E8DA); color:var(--text,#1A1612); font-size:17px; line-height:1;
}
/* detail sheet: bigger, more vibrant (Mike: previous sizing was good) */
.trio3__k{ font-size:10px !important; letter-spacing:.14em !important; }
.trio3__v{ font-size:15.5px !important; line-height:1.3 !important; }
.trio3__s{ font-size:12px !important; }
.resv__t{ font-size:14px !important; }
.resv__s{ font-size:12.5px !important; }
.sh-why{ font-size:16px !important; }
.crowd__sum{ font-size:12.5px !important; }
.dgrid__v{ font-size:14.5px !important; }
.sh-special{ font-size:14px !important; }
/* sticky action bar: solid, nothing reads through it */
.sh-actions{
  background:var(--surface-1,#FFFFFF) !important;
  border-top:1px solid var(--border,#D9CFBE);
  box-shadow:0 -12px 24px -18px rgba(0,0,0,.35);
}
:root:not([data-theme="light"]) .sh-actions{ background:var(--surface-1) !important; }
.sh-actions-spacer{ height:104px !important; }
/* the stamp reads at a glance (Mike override of the 78px spec) */
.hanko{ width:112px !important; height:112px !important; top:-132px !important; right:-2px !important; border-width:4px !important; }
.hanko span{ font-size:40px !important; }
.hanko small{ font-size:13px !important; font-weight:900 !important; letter-spacing:.07em !important; color:#FF5348 !important; padding-top:5px !important; }
/* wordmark: LOCAL in vermilion like the design's mark */
.wordmark__label{ color:var(--accent,#C0322E) !important; }

/* ============================================================
   THEME-PURE (Mike 2026-07-02): light = all paper, dark = all
   night. Dark is the default for new visitors.
   ============================================================ */
/* flip the night tokens to paper in light mode: lockstrip, barlist
   and every var(--night*) consumer follow automatically */
:root[data-theme="light"]{
  --night:#FAF4EA;
  --night-2:#FFFFFF;
  --night-ink:#1A1612;
  --night-muted:#5A5048;
}
/* children with hardcoded light-on-dark colors */
:root[data-theme="light"] .lockcard{ border-color:#D9CFBE; box-shadow:0 10px 26px -18px rgba(30,25,18,.4); }
:root[data-theme="light"] .lockcard__quote{ color:#4A4136; }
:root[data-theme="light"] .lockcard__pin{ color:#fff; }
:root[data-theme="light"] .lockstrip .btn77--ghost{ color:#1A1612; border-color:#C2B49E; }
:root[data-theme="light"] .lockstrip{ border-top-color:#D9CFBE; border-bottom-color:#D9CFBE; }
:root[data-theme="light"] .barlist .barcard{ border-color:#D9CFBE; }
:root[data-theme="light"] .walkrow *{ color:inherit; }
/* the aha note matches its theme (paper on light, night card on dark) */
:root:not([data-theme="light"]) .lockstrip__aha{
  background:#15181E !important; color:#F3ECE2 !important;
  border-left:3px solid var(--accent,#C0322E);
  box-shadow:0 14px 34px -18px rgba(0,0,0,.6);
}
:root:not([data-theme="light"]) .lockstrip__aha .hero77__ahalink{ color:#E06B65; }
/* buy panel goes paper in light mode */
:root[data-theme="light"] .buycard{ background:#F5EFE6; }
:root[data-theme="light"] .buycard::before{
  background:radial-gradient(90% 50% at 50% -6%, rgba(192,50,46,.12), transparent 62%) !important;
}
:root[data-theme="light"] .buycard__kick{ color:#9C7A38 !important; }
:root[data-theme="light"] .buycard__h1{ color:#1A1612 !important; }
:root[data-theme="light"] .buycard__h1 em{ color:#A82A26 !important; }
:root[data-theme="light"] .buycard__amount{ color:#1A1612; }
:root[data-theme="light"] .bterm{ color:#5A5048 !important; border-color:rgba(0,0,0,.16) !important; }
:root[data-theme="light"] .bterm b{ color:#1A1612 !important; }
:root[data-theme="light"] .buycard__list{ border-top-color:rgba(0,0,0,.16); }
:root[data-theme="light"] .buycard__list li{ color:#5A5048 !important; }
:root[data-theme="light"] .buycard__list li b{ color:#1A1612; }
:root[data-theme="light"] .buycard__freeline{ color:#857A6C !important; }
:root[data-theme="light"] .buycard__freeline b{ color:#5A5048 !important; }
:root[data-theme="light"] .buycard__ghost{ color:#1A1612; border-color:#C2B49E; }
:root[data-theme="light"] .buycard__risk{ color:#857A6C; }
:root[data-theme="light"] .buycard__risk b{ color:#5A5048; }
:root[data-theme="light"] .buycard__was{ color:#857A6C; }
:root[data-theme="light"] .buycard__once{ color:#5A5048; }
:root[data-theme="light"] .buycard__recover, :root[data-theme="light"] .buycard__support{ color:#5A5048; }
/* map area follows the theme (tiles swap in JS) */
:root[data-theme="light"] .split__map{ background:#F5EFE6; }

/* light-mode mobile hero: breathing room for the credential row */
@media (max-width:959px){
  .hero77__cred{ margin:14px 0 4px; padding-top:14px; border-top:1px dashed var(--border-strong,#463E33); }
  .hero77__cta{ margin-top:14px; }
  :root[data-theme="light"] .hero77__cred{ border-top-color:#C2B49E; }
}


/* decor layers must never eat the play tap */
.filmwin__scrim, .filmwin__tick, .filmwin__badge--rec, .filmwin__cap{ pointer-events:none; }

:root[data-theme="light"] .filmwin__playbtn{ display:none; }
@media (min-width:960px){ .filmwin__playbtn{ display:none; } }

/* paid users KEEP the friends-only films section: names revealed, tap opens the place
   (Mike 2026-07-04: hiding it made 'the videos disappear' for him, the one buyer) */
.is-unlocked .lockcard__foot{ display:none !important; }
.is-unlocked .lockstrip .btn77{ display:none !important; }

/* the detail sheet is the deepest drill-in: it must open ABOVE any modal
   (collections/quiz sit at z-1000; the sheet was at 90 = opened invisibly behind) */
.sheet-backdrop{ z-index:1150 !important; }
.sheet{ z-index:1200 !important; }

/* the quiet nudge that appears while the hero film plays */
.filmnudge{
  position:absolute; z-index:6; left:50%; bottom:52px; transform:translateX(-50%);
  max-width:calc(100% - 32px); text-align:center; line-height:1.35;
  padding:10px 16px; border-radius:999px; border:1px solid rgba(255,255,255,.28); cursor:pointer;
  background:rgba(10,12,16,.72); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  color:#D9DCE2; font:500 12.5px/1 var(--font-body);
  animation:nudgeIn .6s cubic-bezier(.2,.7,.2,1) backwards;
}
.filmnudge b{ color:#fff; font-weight:700; }
@keyframes nudgeIn{ from{ opacity:0; transform:translateX(-50%) translateY(14px); } to{ opacity:1; transform:translateX(-50%) translateY(0); } }
.filmnudge.is-leaving{ opacity:0; transform:translateX(-50%) translateY(10px); transition:opacity .85s ease, transform .85s ease; pointer-events:none; }
@media (prefers-reduced-motion:reduce){ .filmnudge{ animation:none; } }

/* self-hosted hero film: watched here, nothing else on screen */
.filmwin__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; background:var(--night); }
.filmwin__snd{ position:absolute; right:12px; bottom:12px; z-index:6; width:38px; height:38px;
  display:grid; place-items:center; border-radius:50%; border:1px solid rgba(255,255,255,.26); cursor:pointer;
  background:rgba(10,12,16,.62); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  font-size:15px; line-height:1; color:#fff; }
.filmwin__snd:hover{ background:rgba(10,12,16,.82); }

/* night map (Mike round 3): the invert read as a 3D negative. Night now uses the SAME
   clear daytime cartography, gently dimmed to sit in the dark UI. Clarity wins. */
.tlg-tiles-dim img.leaflet-tile{
  filter:brightness(.88) saturate(.95) !important;
  mix-blend-mode:normal !important; }

/* English neighborhood names over the map: navigate by Shibuya, not 渋谷区 */
.nb-lbl-wrap{ background:none !important; border:none !important; }
.nb-lbl{ display:inline-block; width:120px; text-align:center; pointer-events:none;
  font:700 12.5px/1.2 var(--font-body,Inter,sans-serif); letter-spacing:.06em; text-transform:uppercase;
  color:#3A2F24; text-shadow:0 0 3px #fff,0 0 6px #fff,0 1px 8px rgba(255,255,255,.9); }
/* tiles are light cartography in both themes; ink + white halo reads on them always */

/* jump buttons: hold to glide, tap to jump; big enough to hit every time */
.scrolltop{ width:52px !important; height:52px !important; touch-action:none; }
/* jump-down twin of the back-to-top button: same spot, one slot lower, arrow flipped */
.scrolltop--down{ bottom:calc(var(--bottomnav-h) + 26px); }
.scrolltop--down svg{ transform:rotate(180deg); }
@media(min-width:900px){ .scrolltop--down{ bottom:24px; right:76px; } }

/* larger-text mode reaches the v77 reading surfaces too (they were px-locked, so
   the AA toggle looked dead on the main list) */
:root[data-textsize="large"] .card77__why{ font-size:18px !important; line-height:1.6 !important; }
:root[data-textsize="large"] .card77__title{ font-size:21px !important; }
:root[data-textsize="large"] .hero77__sub{ font-size:18px !important; }
:root[data-textsize="large"] .sh-why{ font-size:18px !important; }
:root[data-textsize="large"] .itin77__cardbody{ font-size:16.5px; }
:root[data-textsize="large"] .coll__sub, :root[data-textsize="large"] .listhead__s{ font-size:16.5px !important; }
:root[data-textsize="large"] .trio3__v{ font-size:18px !important; }
:root[data-textsize="large"] .trio3__s, :root[data-textsize="large"] .resv__s{ font-size:14px !important; }
:root[data-textsize="large"] .sh-how, :root[data-textsize="large"] .sh-what{ font-size:17px !important; }
:root[data-textsize="large"] .ref-item, :root[data-textsize="large"] .ref-card p{ font-size:17px !important; }
:root[data-textsize="large"] .itin77__daysub, :root[data-textsize="large"] .itin77__legtitle{ font-size:15.5px !important; }

/* ============================================================
   READABILITY OVERHAUL (Mike 2026-07-03: inclusive sizes, both
   themes) + film lightbox + brighter night map
   ============================================================ */
/* detail sheet: information you can grab at arm's length */
.trio3__k{ font-size:11px !important; letter-spacing:.1em !important; }
.trio3__v{ font-size:17px !important; font-weight:700 !important; color:var(--text) !important; line-height:1.32 !important; }
.trio3__cell--exit .trio3__v{ font-size:18.5px !important; }
.trio3__s{ font-size:13px !important; color:var(--text-muted) !important; }
.resv__t{ font-size:15.5px !important; color:var(--text) !important; }
.resv__s{ font-size:13.5px !important; }
.sh-why{ font-size:17.5px !important; color:var(--text) !important; line-height:1.6 !important; }
.dgrid__l{ font-size:10.5px !important; }
.dgrid__v{ font-size:16px !important; font-weight:600; color:var(--text) !important; line-height:1.42; }
.crowd__k{ font-size:10.5px !important; }
.crowd__times{ font-size:10px !important; }
.crowd__sum{ font-size:13px !important; }
.sh-special{ font-size:15.5px !important; line-height:1.6 !important; color:var(--text) !important; }
.card77__why{ font-size:16px !important; line-height:1.55 !important; }
/* buy panel: same treatment */
.buycard__list li{ font-size:14.5px !important; line-height:1.5 !important; }
.buycard__freeline{ font-size:13px !important; }
.buycard__risk{ font-size:12.5px !important; }
.bterm{ font-size:11px !important; }
/* film lightbox */
.tlg-lb{ position:fixed; inset:0; z-index:1300; display:grid; place-items:center; }
.tlg-lb__scrim{ position:absolute; inset:0; background:rgba(8,9,12,.78); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
.tlg-lb__box{ position:relative; width:min(94vw, 860px); animation:lbIn .35s cubic-bezier(.2,.7,.2,1) backwards; }
.tlg-lb__frame{ aspect-ratio:16/9; border-radius:14px; overflow:hidden; background:#000; box-shadow:0 30px 80px -20px rgba(0,0,0,.8); }
.tlg-lb__frame iframe{ width:100%; height:100%; border:0; display:block; }
.tlg-lb__close{
  position:absolute; top:-16px; right:-8px; z-index:2; width:44px; height:44px; border-radius:50%;
  background:#fff; color:#1A1612; border:0; font-size:22px; font-weight:800; cursor:pointer;
  box-shadow:0 6px 20px rgba(0,0,0,.5); display:grid; place-items:center;
}
@keyframes lbIn{ from{ opacity:0; transform:scale(.94); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .tlg-lb__box{ animation:none; } }
/* night map: premium, not murky — lift the dark tiles */
/* (old dark_all brighten-hack removed 2026-07-03: voyager+invert replaces it) */

/* "lost the email" link under the key form */
.buycard__lostlink{
  display:block; margin:10px 0 0; background:none; border:0; padding:6px 0; cursor:pointer;
  font:500 12.5px/1 var(--font-body); color:#A9B0BC; text-decoration:underline; text-underline-offset:3px;
}
:root[data-theme="light"] .buycard__lostlink{ color:#5A5048; }

/* ============================================================
   PLACE SHEET — EDITORIAL MASTHEAD / QUIET LEDGER (2026-07-13)
   Identity (name, 日本語, why-quote, what's special) reads BIG and
   editorial in Fraunces and owns the sheet's only vermilion (quote
   rule + primary CTA). Every logistic sits below a hairline
   "PLAN YOUR VISIT" cap in one compact, accent-free Inter stack:
   faint label / muted support / strong answer on one quiet card
   tone. Gold stays Kai's-pick, olive stays verified-only.
   ============================================================ */

/* --- identity: generous, serif, airy --- */
.sh-id{ margin:var(--s-3) 0 0; }
.sh-id__name{ font-size:30px !important; line-height:1.08 !important; font-weight:580; letter-spacing:-0.015em; text-wrap:balance; }
.sh-id__jp{ font-size:15px !important; margin-top:6px; letter-spacing:.02em; }
.sh-id .c-det__badges{ margin-top:11px; }
.sh-badges{ margin:var(--s-2) 0 0; }

/* the love moment: second-biggest thing on the sheet; keeps the vermilion rule */
.sh-why{ font-size:21px !important; line-height:1.45 !important; font-weight:460; margin:18px 0 2px !important; padding-left:16px; color:var(--text) !important; border-left-color:var(--accent) !important; }
/* what's special: editorial deck, not a boxed logistic note */
.sh-special{ border:0 !important; background:none !important; padding:0 !important; font-family:var(--font-display,'Fraunces',Georgia,serif); font-size:16px !important; line-height:1.62 !important; color:var(--text-muted) !important; margin:14px 0 2px !important; }

/* --- the practical: one compact accent-free zone under a hairline cap --- */
.sh-facts{ margin:22px 0 10px; --pr-strong:color-mix(in srgb, var(--text) 80%, var(--bg)); --pr-card:color-mix(in srgb, var(--surface-2) 55%, var(--bg)); }
.sh-facts__rule{ display:flex; align-items:center; gap:10px; margin:0 0 10px; }
.sh-facts__rule::after{ content:""; flex:1 1 auto; height:1px; background:var(--border); }
.sh-facts__rule span{ font:800 10px/1 var(--font-body); letter-spacing:.18em; text-transform:uppercase; color:var(--text-faint); }

.sh-facts .sh-ordering{ margin:0 0 8px; }
.sh-facts .sh-ord{ font-size:10.5px; padding:3px 9px; background:var(--pr-card); border-color:var(--border); color:var(--text-muted); }

.sh-facts .trio3{ gap:6px; margin:0; }
.sh-facts .trio3__cell{ padding:9px 10px 10px; border-radius:10px; background:var(--pr-card); border-color:var(--border); }
.sh-facts .trio3__k{ font-size:9px !important; letter-spacing:.13em !important; margin-bottom:5px; color:var(--text-faint) !important; }
.sh-facts .trio3__k svg{ color:currentColor; }
.sh-facts .trio3__v{ font-size:13.5px !important; font-weight:620 !important; line-height:1.42 !important; color:var(--pr-strong) !important; }
.sh-facts .trio3__s{ font-size:11.5px !important; margin-top:2px; color:var(--text-muted) !important; }

/* reservation reality: headline stays the loudest practical line (never label-quiet) */
.sh-facts .resv{ padding:10px 12px; margin:6px 0 0; border-radius:10px; gap:9px; background:var(--pr-card); border-color:var(--border-strong); }
.sh-facts .resv__ico{ display:grid; place-items:center; padding-top:1px; color:var(--text-faint); }
.sh-facts .resv__ico svg{ width:15px; height:15px; }
.sh-facts .resv__t{ font-size:13.5px !important; font-weight:750; color:var(--pr-strong) !important; }
.sh-facts .resv__s{ font-size:12px !important; line-height:1.5 !important; color:var(--text-muted) !important; }

.sh-facts .crowd{ padding:10px 12px; margin:6px 0 0; border-radius:10px; background:var(--pr-card); border-color:var(--border); }
.sh-facts .crowd__k{ font-size:9px !important; margin-bottom:6px; color:var(--text-faint); }
.sh-facts .crowd__k b{ color:var(--pr-strong); }  /* best-window value: no borrowed olive */
.sh-facts .crowd__bar{ height:12px; }
.sh-facts .crowd__times{ font-size:8.5px !important; margin-top:4px; }
.sh-facts .crowd__sum{ font-size:12px !important; margin-top:7px; }

.sh-facts .dgrid{ margin:6px 0 0; border-radius:10px; background:var(--border); border-color:var(--border); }
.sh-facts .dgrid__cell{ padding:9px 11px 10px; background:var(--pr-card); }
.sh-facts .dgrid__l{ font-size:9px !important; color:var(--text-faint) !important; }
.sh-facts .dgrid__l svg{ width:11px; height:11px; color:currentColor; }
.sh-facts .dgrid__v{ font-size:13px !important; font-weight:500; line-height:1.5; margin-top:3px; color:var(--pr-strong) !important; }
.sh-facts .dgrid__v--verified{ color:var(--olive-2) !important; }  /* trust keeps its olive */

/* --- action bar: true flex sibling of #sheetBody, never sticky --- */
.sheet > .sh-actions{ position:static; flex:0 0 auto; margin:0; padding:10px var(--s-5) 12px; }
.sheet > .sh-actions:empty{ display:none; }
@media(max-width:680px){ .sheet > .sh-actions{ margin-left:0; margin-right:0; padding-left:var(--s-4); padding-right:var(--s-4); } }

/* larger-text mode still wins inside the compact zone */
:root[data-textsize="large"] .sh-facts .trio3__v{ font-size:18px !important; }
:root[data-textsize="large"] .sh-facts .trio3__s,
:root[data-textsize="large"] .sh-facts .resv__s{ font-size:14px !important; }
:root[data-textsize="large"] .sh-facts .resv__t{ font-size:16px !important; }
:root[data-textsize="large"] .sh-facts .dgrid__v{ font-size:16px !important; }
:root[data-textsize="large"] .sh-facts .crowd__sum{ font-size:14px !important; }
:root[data-textsize="large"] .sh-special{ font-size:18px !important; }
:root[data-textsize="large"] .sh-why{ font-size:23px !important; }
:root[data-textsize="large"] .sh-id__name{ font-size:32px !important; }

/* --- ledger hue keys v2 (Mike 2026-07-14: "needs a bit of work, both themes"):
   each fact gets a signature hue with real presence — tinted icon coin +
   hued cap label — while values stay neutral ink. One --fh var per cell;
   light theme remaps --fh to a paper-legible ink variant and the coin
   tint recomputes automatically. Vermilion stays identity+CTA only. --- */
.sh-facts .trio3__cell--exit,
.sh-facts .dgrid__cell--nearest-station{ --fh:#7FB5E8; --fh-bg:rgba(127,181,232,.17); }
.sh-facts .trio3__cell--price{ --fh:#E8B559; --fh-bg:rgba(232,181,89,.17); }
.sh-facts .trio3__cell--order{ --fh:#F09070; --fh-bg:rgba(240,144,112,.17); }
.sh-facts .dgrid__cell--hours{ --fh:#7FD0A8; --fh-bg:rgba(127,208,168,.17); }
.sh-facts .dgrid__cell--look-for{ --fh:#BBA5F0; --fh-bg:rgba(187,165,240,.17); }
:root[data-theme="light"] .sh-facts .trio3__cell--exit,
:root[data-theme="light"] .sh-facts .dgrid__cell--nearest-station{ --fh:#2A5D91; --fh-bg:rgba(42,93,145,.12); }
:root[data-theme="light"] .sh-facts .trio3__cell--price{ --fh:#8A6218; --fh-bg:rgba(138,98,24,.13); }
:root[data-theme="light"] .sh-facts .trio3__cell--order{ --fh:#A84428; --fh-bg:rgba(168,68,40,.12); }
:root[data-theme="light"] .sh-facts .dgrid__cell--hours{ --fh:#28704D; --fh-bg:rgba(40,112,77,.12); }
:root[data-theme="light"] .sh-facts .dgrid__cell--look-for{ --fh:#5D4B92; --fh-bg:rgba(93,75,146,.12); }

.sh-facts .trio3__cell--exit .trio3__k,
.sh-facts .trio3__cell--price .trio3__k,
.sh-facts .trio3__cell--order .trio3__k,
.sh-facts .dgrid__cell--nearest-station .dgrid__l,
.sh-facts .dgrid__cell--hours .dgrid__l,
.sh-facts .dgrid__cell--look-for .dgrid__l{
  display:flex; align-items:center; gap:7px;
  color:var(--fh) !important; font-size:10px !important; font-weight:800 !important;
}
.sh-facts .trio3__cell--exit .trio3__k svg,
.sh-facts .trio3__cell--price .trio3__k svg,
.sh-facts .trio3__cell--order .trio3__k svg,
.sh-facts .dgrid__cell--nearest-station .dgrid__l svg,
.sh-facts .dgrid__cell--hours .dgrid__l svg,
.sh-facts .dgrid__cell--look-for .dgrid__l svg{
  box-sizing:content-box; width:13px; height:13px; padding:3.5px;
  border-radius:6px; color:var(--fh);
  background:var(--fh-bg);
}

/* --- Saved entry points: desktop navbtn + mobile bottomnav --- */
.navbtn--saved svg{ width:14px; height:14px; color:var(--gold); }
.navbtn--saved .navbtn__count{ font-size:10.5px; font-weight:800; background:var(--gold); color:var(--gold-ink); border-radius:99px; padding:2px 7px; margin-left:2px; }
.bottomnav__item--saved{ position:relative; }
.bottomnav__item--saved svg{ fill:none !important; }
.bottomnav__item--saved .bnav-count{
  position:absolute; top:4px; left:calc(50% + 6px);
  font:800 9.5px/1 var(--font-body); background:var(--gold); color:var(--gold-ink);
  border-radius:99px; padding:2.5px 5.5px; font-style:normal;
}

/* --- Saved chip: gold like the save button, appears once the first heart lands --- */
.chip--saved{ border-color:color-mix(in srgb, var(--gold) 45%, var(--border)); }
.chip--saved .chip__ico svg{ width:13px; height:13px; }
.chip--saved.is-active{ background:var(--gold); border-color:var(--gold); color:var(--gold-ink); }
.chip--saved.is-active .chip__ico svg{ fill:var(--gold-ink); }

/* ============================================================
   2026-07-22 · conversion layer: outcomes strip, sample entry,
   checkout overlay + toast, honest was-price.
   ============================================================ */
.winsrow{ padding:0 clamp(16px,4vw,48px); margin:26px auto 6px; max-width:1180px; }
.winsrow__inner{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.win{ background:var(--surface-1); border:1px solid var(--border); border-radius:var(--r-md);
  padding:14px 16px; display:flex; flex-direction:column; gap:4px; }
.win b{ font-family:var(--font-display); font-size:16.5px; letter-spacing:-.01em; color:var(--text); }
.win span{ font-size:13.5px; line-height:1.45; color:var(--text-muted); }
@media (max-width:900px){ .winsrow__inner{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .winsrow__inner{ grid-template-columns:1fr; gap:9px; } .win{ flex-direction:row; align-items:baseline; gap:8px; } .win b{ white-space:nowrap; font-size:15px; } .win span{ font-size:13px; } }

.sample{ padding:clamp(34px,6vw,64px) clamp(16px,4vw,48px); }
.sample__inner{ max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(22px,4vw,54px); align-items:center; }
.sample__kick{ font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin:0 0 10px; }
.sample__title{ font-family:var(--font-display); font-size:clamp(26px,3.4vw,40px); letter-spacing:-.02em; line-height:1.08; margin:0 0 12px; color:var(--text); }
.sample__title em{ font-style:italic; color:var(--accent); }
.sample__sub{ font-size:15.5px; line-height:1.6; color:var(--text-muted); margin:0 0 18px; max-width:52ch; }
.sample__ctas{ display:flex; gap:10px; flex-wrap:wrap; }
.is-unlocked .sample__ctas [data-buy]{ display:none !important; }
.sample__card{ margin:0; background:var(--surface-1); border:1px solid var(--border); border-radius:14px;
  padding:20px 20px 14px; box-shadow:0 18px 44px -22px rgba(0,0,0,.35); }
.sample__head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 12px; margin-bottom:8px; }
.sample__name{ font-family:var(--font-display); font-weight:700; font-size:21px; color:var(--text); }
.sample__jp{ font-weight:500; color:var(--text-faint); font-size:16px; }
.sample__meta{ font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint); }
.sample__why{ font-size:14.5px; line-height:1.55; color:var(--text-muted); margin:0 0 14px; }
.sample__rows{ margin:0; display:flex; flex-direction:column; gap:0; border-top:1px solid var(--border); }
.srow{ display:grid; grid-template-columns:104px 1fr; gap:12px; padding:9px 0 9px 10px; border-bottom:1px solid var(--border); border-left:3px solid transparent; }
.srow dt{ font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint); padding-top:2px; }
.srow dd{ margin:0; font-size:14px; line-height:1.5; color:var(--text); }
.srow--order{ border-left-color:#C0322E; }
.srow--exit{ border-left-color:#2E6EC0; }
.srow--in{ border-left-color:#2E8B57; }
.srow--closed{ border-left-color:#8a8377; }
.sample__open{ margin-top:14px; width:100%; text-align:center; font:600 14.5px var(--font-body); color:var(--accent);
  background:none; border:1px dashed color-mix(in srgb, var(--accent) 55%, transparent); border-radius:var(--r-pill);
  padding:11px 16px; cursor:pointer; transition:background .2s ease, border-color .2s ease; }
.sample__open:hover{ background:color-mix(in srgb, var(--accent) 9%, transparent); border-style:solid; }
@media (max-width:880px){ .sample__inner{ grid-template-columns:1fr; } .sample__card{ order:-1; } }

.buycard__was{ display:block; font:600 13px var(--font-body); letter-spacing:.02em; color:var(--text-faint); text-decoration:line-through; margin-bottom:2px; }

.payolay{ position:fixed; inset:0; z-index:2400; background:rgba(10,10,12,.66); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; padding:20px; }
.payolay[hidden]{ display:none; }
body.payolay-open{ overflow:hidden; }
.payolay__card{ background:var(--surface-1); color:var(--text); border:1px solid var(--border); border-radius:16px;
  max-width:440px; width:100%; padding:28px 26px; text-align:center; box-shadow:0 30px 80px -20px rgba(0,0,0,.55); }
.payolay__card h3{ font-family:var(--font-display); font-size:22px; letter-spacing:-.01em; margin:0 0 8px; }
.payolay__sub{ font-size:14.5px; line-height:1.55; color:var(--text-muted); margin:0 0 6px; }
.payolay__sub a{ color:var(--accent); }
.payolay__key{ margin:12px 0; }
.payolay__key code{ display:inline-block; font:700 16px/1.4 ui-monospace,Menlo,monospace; letter-spacing:.04em;
  background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:10px 14px; user-select:all; }
.payolay__row{ display:flex; gap:10px; justify-content:center; margin-top:16px; flex-wrap:wrap; }
.payolay__hanko{ width:54px; height:54px; margin:0 auto 12px; display:flex; align-items:center; justify-content:center;
  border:2px solid #C0322E; color:#C0322E; border-radius:10px; font:700 26px var(--font-display); transform:rotate(-4deg); }
.payolay__spin{ width:34px; height:34px; margin:0 auto 14px; border-radius:50%;
  border:3px solid var(--border); border-top-color:var(--accent); animation:payspin .8s linear infinite; }
@keyframes payspin{ to{ transform:rotate(360deg); } }

.paytoast{ position:fixed; left:50%; bottom:84px; transform:translateX(-50%) translateY(16px); z-index:2500;
  background:var(--text); color:var(--surface-1); font:600 14px var(--font-body); padding:11px 18px; border-radius:var(--r-pill);
  opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease; max-width:min(92vw,480px); text-align:center; }
.paytoast.is-on{ opacity:1; transform:translateX(-50%) translateY(0); }

/* 2026-07-22 · hero poster: sits ABOVE the iframe until playback truly starts,
   drifts slowly so a slow connection still looks cinematic, then fades out. */
.filmwin__poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1;
  transition:opacity .9s ease; }
.filmwin__poster.is-drifting{ animation:posterdrift 16s ease-in-out infinite alternate; }
@keyframes posterdrift{ from{ transform:scale(1.02) translateX(0); } to{ transform:scale(1.09) translateX(-1.6%); } }
.filmwin__poster.is-behind-film{ opacity:0; }
@media (prefers-reduced-motion:reduce){ .filmwin__poster.is-drifting{ animation:none; } }