/* ============================================================
   ON THE LISTS — v2 art direction ("two worlds")
   Loaded AFTER app.css, on index.en.html only.
   app.css is untouched: pitch*.html keep the original look.

   The product spans two sides of one doorway, so the page is
   built out of that split rather than out of decoration.

     OPERATOR WORLD (inside)  warm room-dark, dense, instrumented
     GUEST WORLD    (outside) cool screen-light, spacious, editorial

   Gold is reserved for money and the venue's own mark. Everything
   that used to be gold-for-decoration is now structural taupe.
   ============================================================ */

/* Typefaces are loaded via <link> in index.en.html:
   Archivo (variable width) — display
   IBM Plex Sans           — body  (IBM Plex Sans JP covers the JA page later)
   IBM Plex Mono           — data                                            */

:root{
  /* ---- Operator world: a nightclub interior is warm dark, not black ---- */
  --room:#15120F;
  --room-deep:#0B0908;
  --room-panel:#1D1915;

  /* ---- Guest world: a phone screen is a lit rectangle in a dark room ---- */
  --lit:#E7E9ED;
  --lit-panel:#F4F5F7;
  --lit-edge:#C8CCD3;
  --lit-ink:#14171B;
  --lit-muted:#5A6069;

  /* ---- Money. The only warm accent left, and it is spent sparingly. ---- */
  --money:#E0B86A;
  --money-deep:#B08F50;

  /* ---- Structural taupe. Redefining --gold here de-golds every
         eyebrow, border, icon and marker inherited from app.css at once. ---- */
  --gold:#8C8375;
  --gold-soft:#A79C8C;
  --gold-deep:#6E6659;
  --gold-glow:rgba(255,255,255,.05);
  --hairline-warm:rgba(255,255,255,.17);

  /* ---- Re-point app.css's grounds at the warm room ---- */
  --ink:var(--room);
  --ink-2:var(--room-deep);
  --surface:var(--room-panel);
  --surface-2:#100D0B;

  --text:#F2EFEA;
  --muted:#A9A29A;
  --faint:#77706A;

  --hairline:rgba(255,255,255,.09);
  --fill:rgba(255,255,255,.035);
  --fill-2:rgba(255,255,255,.065);
  --glass:var(--room);

  /* ---- Operational status. Real states, so they earn real color. ---- */
  --st-open:#6EC78E;
  --st-held:#9B82D8;
  --st-paid:#D98AC6;
  --st-seated:#E06A5A;
  --st-scan:#7DD3FC;

  /* ---- Three UI radii. No pills: pill chips and badges are decoration,
         and professional equipment is made of rectangles.
         --r-device is separate because a phone is a physical object. ---- */
  --r-sm:6px;
  --r-md:12px;
  --r-lg:20px;
  --r-device:30px;
  --radius:var(--r-md);
  --radius-lg:var(--r-lg);

  --elev-1:0 1px 2px rgba(0,0,0,.5);
  --elev-2:0 12px 32px rgba(0,0,0,.5);
  --elev-3:0 28px 70px rgba(0,0,0,.6);
  --inset-hi:inset 0 1px 0 rgba(255,255,255,.05);

  --display:"Archivo",system-ui,sans-serif;
  --font:"IBM Plex Sans",system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;

  --maxw:1200px;
}

/* ===== Base type ===== */
body{
  font-family:var(--font);
  font-weight:400;
  line-height:1.65;
  letter-spacing:0;
}
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:600;
  line-height:1.04;
  letter-spacing:-.015em;
  font-variation-settings:"wdth" 100;
}
::selection{background:var(--lit);color:var(--lit-ink)}

/* Data is this product's subject matter, so it is set as data. */
.mono,.metric .v,.ad-big,.ad-num,.price .amt,.cu-big,
.pu-row .val,.rank-row .n,.tally,.vm-stat .s-v{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
  font-weight:400;
  letter-spacing:-.01em;
}

/* Labels: small, wide-tracked, structural — no longer gold. */
.eyebrow{
  font-family:var(--mono);
  font-size:.6875rem;font-weight:400;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-soft);margin:0 0 1.1rem;
  display:flex;align-items:center;gap:.7rem;
}
.eyebrow::before{
  content:"";width:1.6rem;height:1px;background:var(--hairline-warm);flex:0 0 auto;
}
.sec-head.center .eyebrow{justify-content:center}

/* Feature labels say who on the team actually touches the thing.
   That is information; "Feature 01…10" was only decoration — these
   features are not a sequence, and #7 reads fine without #6. */
.eyebrow .aud{
  color:var(--text);background:var(--fill-2);
  border:1px solid var(--hairline);border-radius:var(--r-sm);
  padding:.16rem .5rem;letter-spacing:.1em;font-size:.62rem;
}
.lit-world .eyebrow .aud{
  color:var(--lit-ink);background:#DDE1E7;border-color:var(--lit-edge);
}

/* Chips are rectangles now, like everything else. */
.chip{
  border-radius:var(--r-sm);font-size:.74rem;
  padding:.36rem .7rem;background:var(--fill);border-color:var(--hairline);
}
.chip b{color:var(--text);font-weight:600}
.lead{color:var(--muted);font-size:clamp(.95rem,1.5vw,1.06rem);line-height:1.68;max-width:60ch}

/* ===== Radii sweep — everything inherited from app.css onto the 3 tokens ===== */
.card,.metric,.shot,.s3,.flow-step,.faq details,.ad-cc,.ad-table,
.ad-panel,.re-input,.feat-photo,.launch,.browser,.store-ev{border-radius:var(--r-md)}
.btn,.re-btn,.cu-btn,.se-btn,.nav-deck,.ad-avatar,.gs-continue,.gs-save,
.pu-pill,.b-free,.wc-badge,.gs-badge,.price .pp-best,.vm-newbtn{border-radius:var(--r-sm)}
.thread,.vs-col,.uc,.pillar,.price,.counter-ui,.promoter-ui,.proof-venue,
.resv-edit,.vipmap,.vm-floor,.ad-camera,.ad-result,.ad-scan{border-radius:var(--r-lg)}
.phone,.phone::after{border-radius:var(--r-device)}
.member-card,.welcome-card,.gscreen{border-radius:calc(var(--r-device) - 8px)}

/* ===== Header — solid, not glass. Blur-on-scroll is a generator tic. ===== */
header.site{
  background:var(--room-deep);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  border-bottom:1px solid var(--hairline);
}
/* 2026-08-11：ロゴを上げるのに合わせてバーも少し高くした。
   68px のままだと 44px のロゴで上下の余白が 12px しか残らず窮屈。 */
.nav{height:76px}
/* ⚠️ 2026-08-14：ここは onthelists-white-trim.png 専用の数字。
   元の onthelists-white.png は 2214×660 だが、絵は 1705×300 しかなく、
   ファイルの 55% が透明の余白だった。つまり height:44px と書いても
   実際に見えていたのは 20px。「ロゴを大きくしたのに小さいまま」を
   繰り返していた原因はこれで、CSS 側ではなかった。

   余白を落とした -trim.png に差し替えたので、同じ 44px を指定すると
   2.2倍の大きさで出る。34px = 見た目 34px（旧比 +70%、ユーザーが
   Option 4 を選択）。比率は 1705:300 = 5.68:1 なので幅 193px。
   ⚠️ 画像を元ファイルに戻すときは、この数字も 44/40 に戻すこと。
   ⚠️ フッターの .powered .pw-logo は別物（store.css）。あちらは今も
      余白付きの元ファイルを使っているので、この数字と揃えないこと。 */
.brand img{height:34px}
footer .brand img{height:31px}
.nav-links a{font-size:.84rem;color:var(--muted);letter-spacing:.005em}
.nav-deck{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;
  color:var(--muted)!important;border:1px solid var(--hairline);
  padding:.34rem .7rem;
}
.nav-deck:hover{background:var(--fill-2);color:var(--text)!important}
.langsel{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em}
.langsel a.on{color:var(--text)}
/* "Sales deck" was rendering twice on desktop: once in .nav-links (intended
   for the mobile drawer) and once in .nav-cta. app.css only hides the .nav-cta
   copy below 860px, so above that both showed. Hide the drawer copy instead. */
@media(min-width:861px){
  .nav-links > .nav-deck{display:none}
}

/* ===== Buttons — the primary action is lit, not gold ===== */
.btn{
  height:2.8rem;padding:0 1.2rem;font-size:.875rem;font-weight:500;
  letter-spacing:.005em;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.btn:active{transform:none}
.btn-gold{background:var(--lit);color:var(--lit-ink);box-shadow:none;font-weight:600}
.btn-gold:hover{background:#fff;box-shadow:none}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--hairline-warm)}
.btn-ghost:hover{background:var(--fill-2);border-color:rgba(255,255,255,.3)}
:focus-visible{outline:2px solid var(--lit);outline-offset:3px;border-radius:var(--r-sm)}

/* ===== Section rhythm ===== */
section{padding:clamp(3.75rem,8vw,6.75rem) 0}
.band{background:var(--surface-2);border-block:1px solid var(--hairline)}
.sec-head{max-width:56ch;margin-bottom:clamp(2.25rem,4vw,3.25rem)}
/* h1 が並ぶのは製品ページ（door / vip / booking）だけ。そこでは各製品
   セクションの見出しがそのページの h1 になるので、h2 と同じ体裁にする。
   2026-08-10 追加。 */
.sec-head h2,.sec-head h1{font-size:clamp(1.7rem,3.4vw,2.6rem);margin-bottom:1.1rem}
.note{color:var(--faint);font-size:.82rem;line-height:1.65}

/* ============================================================
   PAGE LAYOUT
   Migrated out of index.en.html's inline <style> so this file is
   the single source of truth. Structure only — every color, type
   and radius decision is overridden in the sections below.
   ============================================================ */
.hero-photo{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.hero-photo img{
  position:absolute;
  mask-image:radial-gradient(62% 62% at 64% 42%,#000 32%,transparent 78%);
  -webkit-mask-image:radial-gradient(62% 62% at 64% 42%,#000 32%,transparent 78%);
}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero-actions{display:flex;flex-wrap:wrap}

.split{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.thread{border:1px solid var(--hairline);padding:1.1rem}
.thread .th-head{
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--hairline);padding-bottom:.6rem;margin-bottom:.85rem;
}
.thread .th-head b{font-size:.82rem;font-weight:600;color:var(--text)}
.thread .th-head .badge{font-family:var(--mono);font-size:.62rem;color:var(--faint)}
.bubble{
  background:var(--fill);border:1px solid var(--hairline);
  padding:.6rem .8rem;margin-bottom:.55rem;color:var(--text);max-width:88%;
}
.bubble .who{display:block;margin-bottom:.2rem}
.bubble.me{margin-left:auto}
.tally{white-space:pre-wrap;color:var(--muted)}
.thread-cap{text-transform:uppercase;text-align:center;margin-top:.8rem}

.versus{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:.5rem}
.vs-col{padding:1.6rem;border:1px solid var(--hairline)}
.vs-col h3{margin-bottom:.3rem}
.vs-col .sub{text-transform:uppercase;margin-bottom:1.1rem}
.vs-list{list-style:none;padding:0;margin:0;display:grid;gap:.7rem}
.vs-list li{display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem;color:var(--text)}
.vs-list .mk{flex:0 0 auto;display:grid;place-items:center;font-size:.7rem;margin-top:.1rem}
.vs-list.bad li{color:var(--muted)}

.quote{text-align:center;margin:0 auto;max-width:760px}
.quote .cite{margin-top:1.4rem;max-width:52ch;margin-inline:auto}

.feature{display:grid;grid-template-columns:1fr 1fr;align-items:center;margin-top:clamp(2.5rem,6vw,4.5rem)}
.feature:first-of-type{margin-top:0}
.feature.flip .feat-media{order:-1}
.feat-points{list-style:none;padding:0;margin:1.4rem 0 0;display:grid;gap:.8rem}
.feat-points li{display:flex;gap:.65rem;align-items:flex-start}
.feat-points svg{flex:0 0 auto;margin-top:.2rem}
.feat-photo{margin:1rem 0 0;position:relative;overflow:hidden;border:1px solid var(--hairline)}
.feat-photo img{width:100%;height:auto;display:block}
.feat-photo figcaption{
  position:absolute;left:0;bottom:0;width:100%;
  padding:.7rem .9rem .55rem;color:var(--text);
}

.counter-ui{border:1px solid var(--hairline);padding:1.6rem;box-shadow:var(--elev-3)}
.counter-ui .cu-label{text-transform:uppercase}
.counter-ui .cu-big{line-height:1;margin:.3rem 0 .2rem}
.counter-ui .cu-unit{font-size:1rem;color:var(--muted);margin-left:.4rem}
.counter-ui .cu-btns{display:flex;gap:.7rem;margin:1.3rem 0}
.cu-btn{flex:1;border:1px solid var(--hairline);font-weight:500;display:grid;place-items:center;cursor:default}
.cu-timeline{display:flex;justify-content:space-between;gap:.5rem;border-top:1px solid var(--hairline);padding-top:1rem}
.cu-timeline div{text-align:center}
.cu-timeline .n{font-family:var(--mono);color:var(--text);font-size:1rem;margin-top:.15rem}

/* Both flow4s sit inside a .feature's text column — about half the page — so
   four across squeezed each step into a tall, narrow sliver with headings
   breaking mid-phrase ("Send a / link"). Two across gives each step a
   landscape box and lets the headings sit on one line. */
.flow4{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.flow-step{border:1px solid var(--hairline);padding:1.15rem 1.3rem}
.flow-step h4{text-wrap:balance}
.flow-step .n{text-transform:uppercase}
.flow-step h4{margin:.6rem 0 .4rem}

.promoter-ui{border:1px solid var(--hairline);overflow:hidden;box-shadow:var(--elev-3)}
.promoter-ui .pu-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem 1.4rem;border-bottom:1px solid var(--hairline);
}
.promoter-ui .pu-head .tag{text-transform:uppercase}
.pu-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem 1.4rem;border-bottom:1px solid var(--hairline);
}
.pu-row:last-child{border-bottom:0}
.pu-row .lab{font-size:.9rem;color:var(--muted)}
.pu-row .val{font-size:.95rem;color:var(--text)}

.rank{display:grid;gap:.7rem;margin-top:.5rem}
.rank-row{display:grid;grid-template-columns:auto 1fr auto;gap:.9rem;align-items:center}
.rank-row .who{font-size:.9rem;color:var(--text);width:3.5rem}
.rank-bar{overflow:hidden}
.rank-bar span{display:block;height:100%}
.rank-row .n{color:var(--text);font-size:.95rem;width:2rem;text-align:right}

.usecase{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.uc{padding:1.8rem;border:1px solid var(--hairline)}
.uc h3{margin-bottom:.3rem}
.uc .uc-sub{margin-bottom:1.1rem}
.uc ul{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.uc li{font-size:.9rem;color:var(--muted);padding-left:1.1rem;position:relative}
.uc li::before{content:"";position:absolute;left:0;top:.62rem}

.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:.5rem}
.s3{border:1px solid var(--hairline);padding:1.5rem}
.s3 h4{margin:.5rem 0 .4rem}

.proof{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.proof-venue{border:1px solid var(--hairline);padding:2rem;text-align:center}
.proof-venue .loc{text-transform:uppercase;margin-bottom:.6rem}
.proof-venue .st{color:var(--muted);font-size:.85rem;margin-top:.4rem}

.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;align-items:stretch}
.price{border:1px solid var(--hairline);padding:1.8rem;display:flex;flex-direction:column}
.price .pp-tag{text-transform:uppercase;margin-bottom:.2rem}
.price .pp-best{align-self:flex-start;text-transform:uppercase;margin-bottom:.8rem}
.price h3{margin-bottom:.8rem}
.price .amt{line-height:1}
.price .amt small{font-size:.95rem;font-weight:400}
.price .alt{font-size:.78rem;color:var(--faint);margin-top:.4rem}
.price .cond{font-size:.8rem;color:var(--muted);margin-top:1rem;padding-top:1rem;border-top:1px solid var(--hairline)}
.price .ev-row{
  display:flex;justify-content:space-between;font-size:.86rem;
  color:var(--text);padding:.45rem 0;border-bottom:1px solid var(--hairline);
}
.price .ev-row:last-child{border-bottom:0}
.price .ev-row .mono{font-family:var(--mono)}
.launch{
  margin-top:1.25rem;border:1px solid var(--hairline);padding:1.1rem 1.4rem;
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
}
.launch .lt{text-transform:uppercase}
.launch .lb{font-size:1rem;color:var(--text)}
.launch .lb b{font-family:var(--mono);font-weight:400}

.faq{display:grid;gap:.7rem;max-width:780px}
.faq details{border:1px solid var(--hairline);overflow:hidden}
.faq summary{
  cursor:pointer;list-style:none;color:var(--text);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  transition:background-color .15s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:var(--fill-2)}
.faq summary .pm{flex:0 0 auto;font-family:var(--mono);transition:transform .2s}
.faq details[open] summary .pm{transform:rotate(45deg)}
.faq .ans{color:var(--muted)}

.cta{text-align:center}
.cta h2{margin-bottom:1rem}
.cta .lead{margin:0 auto 2rem}
.cta-actions{display:flex;justify-content:center;gap:.75rem;flex-wrap:wrap}

/* ============================================================
   HERO — the thesis. The most characteristic thing about this
   product is a number going up at a door, so that is what opens.
   ============================================================ */
.hero{padding:clamp(3.25rem,7vw,5.5rem) 0 clamp(3rem,6vw,5rem)}
.hero-photo img{
  right:-8%;top:-16%;width:min(880px,70vw);opacity:.24;
  filter:contrast(1.06) saturate(.9);
}
.hero::after{
  background:linear-gradient(90deg,var(--room) 20%,rgba(21,18,15,.55) 52%,rgba(21,18,15,.25) 78%),
    linear-gradient(180deg,transparent 60%,var(--room) 97%);
}
/* The hero is a single full-width column now (.hero-copy is just .wrap).
   The product visual it used to hold on the right lives in .showcase.
   Size/measure overrides for the headline are in the TOP-OF-PAGE SHOWCASE
   block at the end of this file. */
.hero h1{
  font-size:clamp(2.5rem,6vw,4.5rem);
  font-variation-settings:"wdth" 108;
  font-weight:600;letter-spacing:-.025em;line-height:.98;
  margin:.2rem 0 1.4rem;
}
.hero h1 .accent{color:var(--muted);font-variation-settings:"wdth" 88;font-weight:400}
.hero-actions{margin-top:2rem;gap:.7rem}

/* ---- Signature: the door counter ---------------------------------------
   Big number = inside right now. Tally = the current half-hour, which is
   the real reporting interval staff work to today. Five-bar strokes, not
   正 — door-count mechanics stay international on this page. ---------- */
.doorcount{
  background:linear-gradient(176deg,var(--room-panel),var(--room-deep));
  border:1px solid var(--hairline-warm);
  border-radius:var(--r-lg);
  padding:1.5rem 1.6rem 1.35rem;
  box-shadow:var(--elev-3),var(--inset-hi);
  max-width:420px;margin-left:auto;
}
.dc-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding-bottom:1rem;border-bottom:1px solid var(--hairline);
}
.dc-label{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted);
}
.dc-venue{font-family:var(--mono);font-size:.68rem;color:var(--faint);letter-spacing:.04em}
.dc-live{display:inline-flex;align-items:center;gap:.4rem}
.dc-live i{
  width:6px;height:6px;border-radius:50%;background:var(--st-open);
  box-shadow:0 0 0 3px rgba(110,199,142,.15);
}
.dc-n{
  font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:clamp(3.6rem,9vw,5.2rem);font-weight:400;
  color:var(--text);line-height:1;letter-spacing:-.04em;
  margin:1.1rem 0 .1rem;display:flex;align-items:baseline;gap:.6rem;
}
.dc-n .cap{
  font-size:.9rem;color:var(--faint);letter-spacing:.02em;font-weight:400;
}
.dc-sub{font-size:.8rem;color:var(--muted);margin-bottom:1.15rem}

/* Arrivals histogram, one bar per 5-minute bucket, grown oldest-first on
   load. This replaced five-bar tally strokes: a hand tally is precisely the
   thing this product removes, so drawing one on the product's own screen
   argued against the pitch. Bars also carry more — the rush at :55 is
   visible, not just the total. Built by assets/v2.js. */
.dc-tally{
  padding:.85rem 0 .95rem;
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
}
.dc-chart{
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  gap:.4rem;align-items:end;
}
.dc-slot{display:flex;flex-direction:column;align-items:stretch;gap:.4rem}
.dc-bar{
  height:3.5rem;display:flex;align-items:flex-end;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.035));
  border-radius:2px;
}
.dc-bar i{
  display:block;width:100%;height:0;border-radius:2px;
  background:var(--muted);
  transition:height .5s cubic-bezier(.2,.7,.2,1);
}
/* Only the busiest interval is lit. One accent, and it means something. */
.dc-slot.peak .dc-bar i{background:var(--money)}
.dc-t{
  font-family:var(--mono);font-size:.58rem;letter-spacing:.06em;
  color:var(--faint);text-align:center;
}
.dc-slot.peak .dc-t{color:var(--muted)}
@media(prefers-reduced-motion:reduce){
  .dc-bar i{transition:none}
}
.dc-tallycap{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  margin-top:.9rem;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.05em;color:var(--faint);
}
.dc-tallycap b{color:var(--text);font-weight:400}
.dc-foot{display:flex;gap:1.4rem;margin-top:.95rem}
.dc-foot span{font-family:var(--mono);font-size:.72rem;color:var(--muted);letter-spacing:.04em}
.dc-foot b{color:var(--text);font-weight:400;margin-left:.35rem}
.dc-foot i{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  margin-right:.45rem;vertical-align:middle;
}
.dc-foot i.in{background:var(--st-open)}
.dc-foot i.out{background:var(--faint)}

/* ============================================================
   OPERATOR WORLD components
   ============================================================ */
.card{background:var(--fill);border-color:var(--hairline);box-shadow:none}
.card:hover{border-color:var(--hairline-warm);box-shadow:none;transform:none}
.card .ico{
  width:32px;height:32px;border-radius:var(--r-sm);
  background:var(--fill-2);color:var(--muted);font-size:.95rem;margin-bottom:1rem;
}
.card .ico.warn{background:rgba(224,106,90,.1);color:var(--st-seated)}
.card h3{font-family:var(--font);font-size:1rem;font-weight:600;letter-spacing:0}
.card p{font-size:.89rem;line-height:1.6}

.metric{background:var(--fill);border-color:var(--hairline)}
.metric .k{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;color:var(--faint)}
.metric .v{font-size:2rem;color:var(--text);font-weight:400}
.metric .v .g{color:var(--money)}

/* Group-chat threads: the "before" state. Kept plain on purpose — this is
   the problem, it should not look designed. */
.thread{background:var(--room-deep);border-color:var(--hairline);box-shadow:none}

/* ---- The guestlist that never stops -----------------------------------
   Three static bubbles could not carry "searching, matching, tallying —
   all by hand." The point is not what any one message says; it is that the
   thread keeps moving while someone is standing at your door. So it moves.
   .th-track holds two identical .th-set blocks and travels to -50%, which
   lands exactly on the start of the second set — a seamless loop with no
   JS. Pauses on hover so it can actually be read, and stops entirely under
   prefers-reduced-motion. */
.th-scroll{
  position:relative;height:clamp(230px,30vw,290px);overflow:hidden;
  /* Fade both ends: messages should arrive from and vanish into the scroll,
     not start and stop at a hard edge. */
  mask-image:linear-gradient(180deg,transparent,#000 11%,#000 86%,transparent);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 11%,#000 86%,transparent);
}
.th-track{animation:th-roll 34s linear infinite;will-change:transform}
@keyframes th-roll{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(0,-50%,0)}
}
.thread-scroll:hover .th-track,
.thread-scroll:focus-within .th-track{animation-play-state:paused}
.th-head .badge.live{
  display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;
}
.th-head .badge.live::before{
  content:"";width:5px;height:5px;border-radius:50%;
  background:var(--st-seated);
  box-shadow:0 0 0 3px rgba(224,106,90,.14);
}
@media(prefers-reduced-motion:reduce){
  .th-track{animation:none}
}
.bubble{border-radius:var(--r-sm);font-size:.81rem;line-height:1.55}
.bubble .who{font-family:var(--mono);font-size:.62rem;color:var(--faint);letter-spacing:.04em}
.bubble.me{background:var(--fill-2);border-color:var(--hairline)}
.tally{font-size:.78rem;line-height:1.85}
.tally .g{color:var(--money)}
.thread-cap{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;color:var(--faint)}

.vs-col{border-radius:var(--r-lg)}
.vs-col.bad{background:var(--room-deep);border-color:var(--hairline)}
.vs-col.good{background:var(--fill);border-color:var(--hairline-warm)}
.vs-col h3{font-family:var(--font);font-weight:600;font-size:.98rem}
.vs-col .sub{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:var(--faint)}
.vs-list .mk{border-radius:var(--r-sm);width:1.1rem;height:1.1rem}
.vs-list .mk.x{background:rgba(224,106,90,.14);color:var(--st-seated)}
.vs-list .mk.o{background:rgba(110,199,142,.14);color:var(--st-open)}

.quote .q{
  font-family:var(--display);font-size:clamp(1.8rem,4.6vw,2.9rem);
  font-weight:400;font-variation-settings:"wdth" 96;line-height:1.2;letter-spacing:-.015em;
}
.quote .q em{color:var(--money);font-style:normal}
.quote .cite{font-size:.87rem;color:var(--muted)}

.feature{gap:clamp(2rem,5vw,4rem)}
.feature h3{
  font-size:clamp(1.3rem,2.7vw,1.85rem);font-weight:600;
  font-variation-settings:"wdth" 100;letter-spacing:-.02em;margin:.4rem 0 1rem;
}
.feat-points li{font-size:.91rem;line-height:1.6}
.feat-points svg{color:var(--muted)}
.feat-photo figcaption{font-size:.72rem;background:linear-gradient(0deg,rgba(11,9,8,.88),transparent)}

.counter-ui{background:linear-gradient(176deg,var(--room-panel),var(--room-deep));border-color:var(--hairline)}
.counter-ui .cu-label{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;color:var(--faint)}
.counter-ui .cu-big{font-size:clamp(2.8rem,8vw,4rem);color:var(--text);font-weight:400;letter-spacing:-.03em}
.cu-btn{height:3rem;border-radius:var(--r-sm);font-size:.95rem}
.cu-btn.in{background:rgba(110,199,142,.12);color:var(--st-open);border-color:rgba(110,199,142,.3)}
.cu-btn.out{background:var(--fill);color:var(--muted);border-color:var(--hairline)}
.cu-timeline .t{font-family:var(--mono);font-size:.62rem;color:var(--faint)}

.flow-step{background:var(--fill);border-color:var(--hairline)}
.flow-step .n{font-family:var(--mono);font-size:.7rem;color:var(--faint);letter-spacing:.14em}
.flow-step h4{font-family:var(--font);font-size:.95rem;font-weight:600;letter-spacing:0}
.flow-step p{font-size:.83rem;line-height:1.55}

.promoter-ui{background:linear-gradient(176deg,var(--room-panel),var(--room-deep));border-color:var(--hairline)}
.promoter-ui .pu-head .nm{font-family:var(--display);font-size:1.05rem;font-weight:600}
.promoter-ui .pu-head .tag{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;color:var(--faint)}
.pu-row .val.ok{color:var(--money)}
.pu-pill{border:1px solid var(--hairline-warm);color:var(--muted);font-size:.68rem;padding:.22rem .6rem}
.rank-bar{border-radius:var(--r-sm);height:.45rem;background:var(--fill-2)}
.rank-bar span{background:var(--muted);border-radius:var(--r-sm)}
.rank-row:first-child .rank-bar span{background:var(--money)}

.uc{background:var(--fill);border-color:var(--hairline)}
.uc h3{font-family:var(--display);font-size:1.1rem;font-weight:600}
.uc .uc-sub{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;color:var(--faint)}
.uc li::before{background:var(--muted);width:.3rem;height:.3rem;border-radius:50%}

.s3{background:var(--fill);border-color:var(--hairline)}
.s3 .n{font-family:var(--mono);font-size:1.15rem;color:var(--faint);font-weight:400}
.s3 h4{font-family:var(--font);font-size:.97rem;font-weight:600;letter-spacing:0}
.s3 p{font-size:.85rem;line-height:1.55}

.proof-venue{background:var(--fill);border-color:var(--hairline-warm)}
.proof-venue .loc{font-family:var(--mono);font-size:.66rem;letter-spacing:.24em;color:var(--faint)}
.proof-venue .vn{
  font-family:var(--display);font-size:clamp(1.5rem,3.6vw,2.1rem);
  font-weight:600;font-variation-settings:"wdth" 104;letter-spacing:.01em;color:var(--money);
}

.pillar{border-radius:var(--r-lg);background:var(--fill)}
.pillar.good{background:var(--fill-2);border-color:var(--hairline-warm)}
.pillar .pillar-tag{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;color:var(--faint)}
.pillar h3{font-family:var(--display);font-size:1.25rem;font-weight:600}
.pillar .pillar-sub{font-family:var(--mono);font-size:.74rem;color:var(--faint)}
.pillar-list .mk{border-radius:var(--r-sm);background:var(--fill-2);color:var(--muted)}
.pillar-now{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em}
.pillar-now.gold{color:var(--money)}

/* Pricing — money, so gold is earned here. */
.price{background:var(--fill);border-color:var(--hairline)}
.price.featured{border-color:var(--hairline-warm);background:var(--fill-2);box-shadow:none}
.price .pp-tag{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;color:var(--faint)}
.price .pp-best{
  background:var(--money);color:#1A1408;font-family:var(--mono);
  font-size:.6rem;letter-spacing:.12em;padding:.22rem .55rem;
}
.price h3{font-family:var(--display);font-size:1.05rem;font-weight:600}
.price .amt{font-size:2.2rem;color:var(--money);font-weight:400;letter-spacing:-.03em}
.price .amt small{color:var(--muted);font-family:var(--font)}
.price .ev-row .mono{color:var(--text)}
.launch{background:var(--fill-2);border-color:var(--hairline-warm)}
.launch .lt{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;color:var(--faint)}
.launch .lb b{color:var(--money);font-size:1.3rem}
.price-head{font-family:var(--mono);color:var(--muted);letter-spacing:.12em}
.price-head .ph-new{background:var(--lit);color:var(--lit-ink);border-radius:var(--r-sm);font-family:var(--mono)}

.faq details{background:var(--fill);border-color:var(--hairline)}
.faq summary{font-size:.95rem;padding:1rem 1.3rem}
.faq summary .pm{color:var(--muted)}
.faq .ans{font-size:.88rem;line-height:1.65;padding:0 1.3rem 1.1rem}

.cta{background:var(--surface-2);border-block:1px solid var(--hairline)}
.cta h2{font-size:clamp(1.9rem,4.2vw,2.9rem);font-variation-settings:"wdth" 104}

footer.site{border-top:1px solid var(--hairline);background:var(--room-deep)}
.foot-links{font-size:.83rem}
.foot small{font-family:var(--mono);font-size:.7rem;letter-spacing:.03em}

/* Admin browser mock — this is the instrument, so it gets the status palette. */
.admin,.vipmap,.resv-edit,.welcome-card,.gscreen{font-family:var(--font)}
.browser{border-radius:var(--r-md);box-shadow:var(--elev-2)}
.browser-bar .url{font-family:var(--mono);border-radius:var(--r-sm)}
.ad-label{font-family:var(--mono);color:var(--muted);letter-spacing:.14em}
.ad-big{font-weight:400;color:var(--text)}
.ad-big.gold{color:var(--money)}
.ad-meter{border-radius:var(--r-sm);background:var(--fill-2)}
.ad-meter span{background:var(--muted)}
.ad-nav a.active::before{background:var(--lit)}
.admin-nav a.active svg{stroke:var(--lit)}
.admin-brandsub{color:var(--faint)}
.ad-evt b{color:var(--money)}
.ad-scan{border-color:rgba(125,211,252,.7);border-radius:var(--r-md)}
.ad-sweep{background:linear-gradient(to right,transparent,var(--st-scan),transparent)}
.ad-result{
  border-color:rgba(110,199,142,.5);background:rgba(110,199,142,.08);
  box-shadow:none;border-radius:var(--r-md);
}
.ad-avatar{background:rgba(110,199,142,.14);color:var(--st-open)}
.ad-ok{color:var(--st-open)}
.b-free{background:rgba(125,211,252,.12);color:var(--st-scan);border-color:rgba(125,211,252,.35)}
.ad-tr .gold{color:var(--money)}
.ad-th{font-family:var(--mono);letter-spacing:.1em}

.vt.free{background:var(--st-open)}
.vt.reserved{background:var(--st-held)}
.vt.deposit{background:var(--st-paid)}
.vt.seated{background:var(--st-seated)}
.vt.comp{background:var(--money)}
.vt{border-radius:var(--r-sm)}
.vm-title small{color:var(--muted)}
.vm-stat .s-v.g{color:var(--money)}
.vm-newbtn{color:var(--muted);border-color:var(--hairline)}
.vm-leg{font-family:var(--mono)}
.re-seg span.on{background:var(--lit);color:var(--lit-ink)}
.re-chip{background:var(--fill-2);border-color:var(--hairline);color:var(--text)}
.re-btn.gold{background:var(--lit);color:var(--lit-ink)}
.re-tax b{color:var(--money)}
.re-label{font-family:var(--mono);letter-spacing:.12em}

/* ============================================================
   GUEST WORLD — the doorway.
   A guest's phone is a bright rectangle in a dark room, so the
   guest-facing sections are literally lit. The transition into
   them is the moment this page is built around: a hard edge,
   not a fade.
   ============================================================ */
.lit-world{
  background:var(--lit);
  color:var(--lit-ink);
  border-block:0;
  position:relative;
  padding-block:clamp(4.5rem,9vw,7.5rem);
}
/* The threshold: a bright seam where the room ends. */
.lit-world::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--lit) 12%,var(--lit) 88%,transparent);
}
.lit-world .eyebrow{color:var(--lit-muted)}
.lit-world .eyebrow::before{background:var(--lit-edge)}
.lit-world h2,.lit-world h3,.lit-world h4{color:var(--lit-ink)}
.lit-world .lead,.lit-world p{color:var(--lit-muted)}
.lit-world .note{color:#767C85}
.lit-world .gallery figcaption{
  font-family:var(--mono);color:var(--lit-muted);
  font-size:.66rem;letter-spacing:.16em;
}

/* CONTINUE is the guest's one action on their own phone, and app.css paints
   it with var(--gold-soft). Redefining --gold to structural taupe de-golded
   every decorative use in one move (the point of that trick) but caught this
   button too, leaving the invitation looking like a disabled control. Gold is
   reserved for money and the venue's mark — a guest accepting an invitation
   is exactly that kind of moment, so it gets the real one back explicitly. */
.gs-continue{background:var(--money);color:#1A140A}
.gs-continue small{color:#6B5630}
.lit-world .card{background:var(--lit-panel);border-color:var(--lit-edge)}
.lit-world .card:hover{border-color:#A8AEB8}
.lit-world .card h3{color:var(--lit-ink)}
.lit-world .card p{color:var(--lit-muted)}
.lit-world .card .ico{background:#DDE1E7;color:var(--lit-muted)}
.lit-world .chip{background:var(--lit-panel);border-color:var(--lit-edge);color:var(--lit-muted)}
.lit-world .btn-ghost{color:var(--lit-ink);border-color:var(--lit-edge)}
.lit-world .btn-ghost:hover{background:#DDE1E7}
.lit-world .btn-gold{background:var(--lit-ink);color:var(--lit)}
.lit-world .btn-gold:hover{background:#000}
.lit-world :focus-visible{outline-color:var(--lit-ink)}
/* The phone keeps its own dark interior — the screen is what's lit. */
.lit-world .phone{
  border-color:#B9BEC6;
  background:linear-gradient(180deg,#2A2724,#141210);
  box-shadow:0 24px 60px rgba(20,23,27,.28);
}
.lit-world .phone::after{box-shadow:none}

/* ============================================================
   MOTION — deliberate, and scarce.
   ============================================================ */
.tilt{transform:none!important}
.float{animation:none}
.glow,.glow::before{display:none}
.card:hover{transition:border-color .15s ease}

/* Scroll-reveal is switched off on this page. It was applied to 82 elements,
   which emphasized nothing, and app.js's IntersectionObserver proved
   unreliable here — a failure mode that leaves content permanently invisible.
   Content is never hidden waiting on a script. This rule is the safety net if
   a .reveal class is ever reintroduced by an edit. */
.reveal,.reveal.in{opacity:1;transform:none;transition:none}
.vipmap:hover .vt{transform:none}
.hero-photo,.bg-photo.focal img,.welcome-card .wc-bg{animation:none}

/* The one orchestrated moment: the counter builds on load. */
@keyframes dc-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.doorcount{animation:dc-in .6s cubic-bezier(.2,.7,.2,1) both}

@media(prefers-reduced-motion:reduce){
  .doorcount{animation:none}
  .dc-tally .stroke{opacity:1}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* The 980px block that used to live here collapsed the two-column hero and
   reset .doorcount's margin/max-width. Both are dead now: the hero is a single
   full-width column and the counter lives inside .showcase, where it is
   absolutely positioned. Its responsive rules are in the trailing media blocks
   at the end of this file, with the rest of the showcase. */
@media(max-width:860px){
  .nav-links{background:var(--room-deep)}
  .proof{grid-template-columns:1fr}
  .proof .proof-venue{order:-1}
  .feature{grid-template-columns:1fr}
  .feature.flip .feat-media{order:0}
  .price-grid,.steps3{grid-template-columns:1fr}
}
@media(max-width:560px){
  .hero h1{font-size:clamp(2.1rem,9vw,2.8rem);font-variation-settings:"wdth" 100}
  .doorcount{padding:1.25rem 1.2rem 1.1rem}
  .dc-n{font-size:3.4rem}
  .dc-foot{gap:1rem;flex-wrap:wrap}
  .lit-world{padding-block:clamp(3.5rem,10vw,5rem)}
  .split,.versus,.usecase{grid-template-columns:1fr}
  .flow4{grid-template-columns:1fr}
}

/* ============================================================
   INFORMATION ARCHITECTURE
   The page previously sorted features on two axes at once —
   product (Door OS / Booking OS) and audience (Door staff /
   Promoters / Managers / Owners) — so neither was answerable.
   It now commits to product as the primary axis, with audience
   kept as the secondary tag on each block. These are the few
   new pieces that structure needs.
   ============================================================ */

/* ---- Sub-head: a chapter's second movement ----------------------------
   Sections that used to be separate top-level chapters (The Problem,
   Why It's Different, the storefront showcase) now sit inside their
   parent chapter. They need a heading that reads as subordinate to an
   h2 but louder than body copy — otherwise the merge just looks like
   a section that lost its title. */
.sec-sub{
  margin:clamp(2.75rem,5vw,4rem) 0 clamp(1.5rem,2.5vw,2rem);
  padding-top:clamp(1.75rem,3vw,2.5rem);
  border-top:1px solid var(--hairline);
  max-width:56ch;
}
.sec-sub.center{max-width:64ch;margin-inline:auto;text-align:center}
.sec-sub h3{
  font-family:var(--display);
  font-size:clamp(1.25rem,2.2vw,1.65rem);
  font-weight:600;letter-spacing:-.01em;line-height:1.25;
  color:var(--text);margin:0;
}
.sec-sub .lead{margin-top:.85rem}

/* ---- Feature index ----------------------------------------------------
   The one thing the page had no way to say: "here is everything in this
   product, at a glance." Ten alternating full-bleed feature blocks give
   a reader no map. Set as data — mono numerals, hairline rules — so it
   reads as a contents list, not a second row of feature cards. */
.feat-index{
  list-style:none;margin:0 0 clamp(2.5rem,5vw,4rem);padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--hairline);
  border:1px solid var(--hairline);border-radius:var(--r-md);
  overflow:hidden;
}
/* Booking OS has four features, not six — 3 columns would leave an orphan. */
.feat-index.four{grid-template-columns:repeat(4,1fr)}
.feat-index a{
  display:flex;flex-direction:column;gap:.4rem;
  padding:1.05rem 1.15rem;height:100%;
  background:var(--ink);text-decoration:none;
  transition:background-color .15s ease;
}
.feat-index a:hover{background:var(--fill-2)}
.feat-index .fi-n{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;
  color:var(--money);
}
.feat-index .fi-t{
  font-family:var(--display);font-size:.98rem;font-weight:600;
  color:var(--text);line-height:1.3;
}
.feat-index .fi-a{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);
}

/* ---- Three pillars ----------------------------------------------------
   VIP table management is a live, primary product, not a line item inside
   the door product — app.css still assumes two pillars, and collapses them
   to one column at 860px. Three across needs more room than two did, so it
   stacks earlier here rather than squeezing three narrow cards. */
.pillars{grid-template-columns:repeat(3,1fr)}
@media(max-width:1024px){
  .pillars{grid-template-columns:1fr}
}

/* ---- Grouped header ---------------------------------------------------
   Platform / Door OS / Booking OS all sit inside Chapter 02, so a flat row
   of seven peers contradicted the hierarchy the page now has. Hairline
   dividers carry the grouping — no dropdown, nothing to hover or mistap.
   The middle group is labelled on hover/focus only, so the resting state
   stays a clean nav rather than a diagram. */
.nav-links{display:flex;align-items:center}
.nav-group{display:flex;align-items:center;gap:1.5rem;position:relative}
.nav-group + .nav-group{
  margin-left:1.5rem;padding-left:1.5rem;
  border-left:1px solid var(--hairline-warm);
}
/* Names the chapter its links belong to, without spending header height. */
.nav-group[data-chapter]::after{
  content:attr(data-chapter);
  position:absolute;left:1.5rem;top:calc(100% + .1rem);
  font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--money);
  opacity:0;transform:translateY(-2px);
  transition:opacity .18s ease,transform .18s ease;
  pointer-events:none;white-space:nowrap;
}
.nav-group[data-chapter]:hover::after,
.nav-group[data-chapter]:focus-within::after{opacity:1;transform:translateY(0)}

/* ---- Chapter markers --------------------------------------------------
   Story and product are different KINDS of content, but they used to read
   as one undifferentiated run of sections. These mark the seam. Deliberately
   quiet — a signpost, not another hero — so they organise the scroll without
   competing with the section headings underneath. */
.chapter{
  padding:clamp(3rem,6vw,4.5rem) 0 clamp(1.5rem,2.5vw,2rem);
  border-top:1px solid var(--hairline-warm);
  background:var(--room-deep);
}
.ch-label{
  font-family:var(--mono);
  font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--text);margin:0 0 .6rem;
  display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;
}
.ch-n{
  color:var(--money);
  border:1px solid rgba(224,184,106,.32);border-radius:var(--r-sm);
  padding:.2rem .55rem;letter-spacing:.14em;
}
.ch-sub{
  font-family:var(--display);
  font-size:clamp(1.5rem,3vw,2.1rem);font-weight:600;
  letter-spacing:-.015em;line-height:1.2;
  color:var(--text);margin:0 0 1.6rem;
}
.ch-beats{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:.5rem 2.2rem;
  counter-reset:beat;
}
.ch-beats li{
  counter-increment:beat;
  font-size:.86rem;color:var(--muted);
  display:flex;align-items:baseline;gap:.6rem;
}
.ch-beats li::before{
  content:counter(beat,decimal-leading-zero);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;
  color:var(--faint);
}

/* ---- Feature groups ---------------------------------------------------
   "Door & Guestlist OS" names two categories, but the six features under it
   were a flat list, so the product's own division never appeared — and VIP
   tables, which the name doesn't promise at all, read as miscellaneous.
   The index groups by those real categories; .feat-group repeats the label
   inline so the grouping survives once the reader is scrolling past it. */
/* One column per group, derived — NOT a hard-coded count. A fixed
   repeat(N,1fr) left an empty cell on the right the moment a category moved
   out of a product (VIP tables leaving Door OS did exactly that). */
.feat-index.grouped{
  display:grid;
  /* must clear the base .feat-index track list, or auto-flow just fills
     those 3 explicit columns instead of generating one per group */
  grid-template-columns:none;
  grid-auto-flow:column;grid-auto-columns:1fr;
  align-items:stretch;
}
.feat-index.grouped .fg{background:var(--ink);height:100%}
.feat-index.grouped .fg-label{
  font-family:var(--mono);
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--money);margin:0;
  padding:.95rem 1.15rem .55rem;
  border-bottom:1px solid var(--hairline);
}
.feat-index.grouped ol{list-style:none;margin:0;padding:0}
.feat-index.grouped ol li + li{border-top:1px solid var(--hairline)}

.feat-group{
  font-family:var(--mono);
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--money);
  margin:clamp(2.5rem,5vw,3.75rem) 0 clamp(-1rem,-2vw,-1.75rem);
  padding-top:1.1rem;
  border-top:1px solid rgba(224,184,106,.22);
  display:flex;align-items:center;gap:.7rem;
}
.fgm-n{color:var(--faint);letter-spacing:.12em}

/* ---- Cross-reference --------------------------------------------------
   Door OS's floor map and Booking OS's table inventory are genuinely
   two different features — one seats the room tonight, one sells it in
   advance — but they both said "Tables" from 200 lines apart, which read
   as the same thing said twice. Naming them apart fixes the collision;
   this link makes the relationship explicit. */
.feat-xref{
  margin-top:1.4rem;padding-top:1rem;
  border-top:1px solid var(--hairline);
  font-size:.84rem;line-height:1.6;color:var(--faint);
  max-width:46ch;
}
.feat-xref a{
  color:var(--money);text-decoration:none;
  border-bottom:1px solid rgba(224,184,106,.35);
}
.feat-xref a:hover{border-bottom-color:var(--money)}

/* ---- Consolidated proof ----------------------------------------------
   Three proof moments used to be sprinkled between feature chapters.
   Stacked into one section they need internal separation, and the pull
   quote needs room to breathe between the metrics and the storefront. */
#proof .proof + .proof{margin-top:0}
.proof-quote{
  margin:clamp(2.75rem,5vw,4rem) auto 0;
  padding-top:clamp(2rem,3.5vw,3rem);
  border-top:1px solid var(--hairline);
  text-align:center;max-width:62ch;
}

/* Anchored features must clear the fixed header when jumped to. */
[id^="f-"]{scroll-margin-top:84px}

/* .feat-index.four must be repeated in these blocks, not just .feat-index:
   the modifier is more specific, so a bare .feat-index rule loses to it even
   inside a media query. Without this the 4-up index stayed 4 columns at 390px. */
/* These live at the end of the file on purpose: the .feat-index.grouped base
   rule above has the same specificity, so an override placed in the earlier
   media blocks loses on source order and the groups stayed side by side. */
@media(max-width:860px){
  .feat-index,.feat-index.four{grid-template-columns:repeat(2,1fr)}
  .feat-index.grouped{grid-auto-flow:row;grid-template-columns:1fr}

  /* In the drawer the groups stack, and the chapter label earns its keep as a
     real divider row instead of a hover affordance (there is no hover here). */
  .nav-group{flex-direction:column;align-items:stretch;gap:0;width:100%}
  .nav-group + .nav-group{margin-left:0;padding-left:0;border-left:0}
  .nav-group[data-chapter]::after{
    content:attr(data-chapter);
    position:static;order:-1;opacity:1;transform:none;
    padding:.85rem var(--pad) .3rem;
    border-top:1px solid var(--hairline);
    font-size:.6rem;
  }
  .nav-group[data-chapter] a:first-of-type{border-top:0}
  /* app.css caps the drawer at 360px, which clipped the last items once the
     nav grew. Let it size to content, and scroll on short screens. */
  .nav-links.open{max-height:80vh;overflow-y:auto}
}
@media(max-width:560px){
  .feat-index,.feat-index.four{grid-template-columns:1fr}
  .feat-index a{flex-direction:row;align-items:baseline;gap:.65rem;flex-wrap:wrap}
  .feat-index .fi-a{margin-left:auto}
  .ch-beats{flex-direction:column;gap:.45rem}
}

/* ============================================================
   TOP-OF-PAGE SHOWCASE
   The page used to open with copy, atmosphere and one CSS-drawn
   card — nothing that showed the product. A visitor met four
   narrative sections before anything that looked like software.

   The hero is now a full-width statement and the showcase
   directly beneath it carries the proof: the real 3D floor
   render from the running app, with the app chrome rebuilt in
   English on top of it. The render itself contains no text, so
   it stays international while still being the real thing.

   This block is at the END of the file on purpose — see the
   ordering note above the trailing media queries.
   ============================================================ */

/* ---- Page ground: give the dark some material --------------------------
   A flat fill reads as "unfinished" no matter how good the colour is, because
   nothing physical is ever that clean. Two cheap layers fix it without adding
   a single element to the page:

   1. Grain. One inline SVG turbulence tile, fixed to the viewport so it sits
      still while the page moves under it — the way film grain sits on a
      photograph rather than on the subject. Kept at .05: the eye should feel
      texture and never resolve dots.
   2. Room light. Two enormous, very low soft washes — warm from the upper
      left the way a doorway spills, cool-neutral from the right — so the
      ground has a direction instead of being evenly lit nowhere. */
body::after{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(70% 55% at 12% -5%,rgba(224,184,106,.055),transparent 62%),
    radial-gradient(55% 45% at 96% 8%,rgba(198,206,222,.035),transparent 66%);
}
@media(prefers-reduced-motion:no-preference){
  /* Nothing animates here; the media query only documents that the grain is
     deliberately static. Moving grain is a screensaver, not a surface. */
}

/* ---- Hero: statement only ----------------------------------------------
   Kept deliberately short vertically. The hero's job now is to say the
   thing and hand over — the showcase has to be visibly underway at the
   fold, or the page is back to opening on nothing but words. */
.hero{padding:clamp(2.25rem,4vw,3.25rem) 0 clamp(1.75rem,3vw,2.75rem)}
/* Room light behind the statement itself, stronger than the page wash, so
   the headline sits in a lit area rather than on a flat panel. */
.hero::before{
  content:"";position:absolute;inset:-10% -5% 0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(48% 62% at 22% 32%,rgba(224,184,106,.075),transparent 68%),
    radial-gradient(38% 50% at 78% 12%,rgba(231,233,237,.05),transparent 70%);
}
.hero-copy h1{
  font-size:clamp(2.2rem,4.6vw,3.6rem);
  max-width:20ch;
  margin-bottom:1.25rem;
}
.hero-copy .lead{max-width:62ch}
/* Re-aimed: the mask was tuned to sit behind a right-hand card that has
   moved into the showcase. Drop it lower so it reads as room light behind
   the statement instead of a sliver clipped by the header. */
.hero-photo img{
  right:-4%;top:-6%;width:min(720px,55vw);opacity:.26;
  mask-image:radial-gradient(58% 58% at 66% 45%,#000 26%,transparent 74%);
  -webkit-mask-image:radial-gradient(58% 58% at 66% 45%,#000 26%,transparent 74%);
}

/* ---- Showcase shell ----------------------------------------------------
   A div, not a section: no section padding, so it reads as the second half
   of the hero rather than as a chapter competing with the Chapter 01/02
   signposts. Breaks out slightly past --maxw (1200).

   DISCLOSURE RULE — do not put an operator screen in here. A build of this
   block using the app's real 3D VIP floor render was removed: the operator
   UI is what competitors would copy, so it stays off the public page. What
   is allowed here is a venue photo (no product information), the guest's
   own screen (every guest sees it anyway) and the door counter (a number
   going up reveals nothing about how it is produced). Between them they
   show the product's core loop without showing its construction. */
.showcase{padding-bottom:clamp(3rem,6vw,5rem)}
.sc-wrap{max-width:1320px;margin:0 auto;padding-inline:var(--pad)}

/* The photographic stage. .has-photo/.bg-photo.focal are app.css utilities;
   focal is the dramatic treatment (opacity .52 + a radial vignette), which is
   what this needs — the crowd has to read as a real room, not as texture. */
.sc-stage{
  position:relative;
  border:1px solid var(--hairline);
  border-radius:var(--r-lg);
  overflow:hidden;
  padding:clamp(1.75rem,4vw,3.25rem) clamp(1.25rem,3vw,3rem) clamp(1.25rem,2.5vw,2rem);
  box-shadow:var(--elev-3);
}
/* The utility clips to the section by default; here it must clip to the
   rounded panel instead. */
.sc-stage .bg-photo{border-radius:inherit}
/* app.css's focal treatment is tuned for a photo sitting behind a whole
   section of body copy, so it dims hard. Here the photo IS the content —
   the room the counter is counting — and both artifacts on top of it are
   fully opaque, so it can carry much more light without hurting legibility. */
.sc-stage .bg-photo img{
  opacity:.9;filter:contrast(1.08) saturate(1.08) brightness(1.35);
}
.sc-stage .bg-photo::after{
  background:
    radial-gradient(115% 95% at 50% 42%,rgba(6,6,5,0),rgba(6,6,5,.5) 82%),
    linear-gradient(180deg,rgba(6,6,5,.28),rgba(6,6,5,.5));
}

/* Two artifacts, one loop: what the door holds and what the guest holds.
   align-items:start, not center — the two columns are different heights and
   centering them put the two labels on visibly different lines. */
.sc-pair{
  display:grid;grid-template-columns:1.05fr .95fr;
  align-items:start;gap:clamp(1.75rem,4vw,4rem);
}
.sc-side{display:flex;flex-direction:column;gap:1rem;min-width:0}
.sc-side-guest{align-items:center}
.sc-label{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted);margin:0;
  display:flex;align-items:center;gap:.7rem;
}
.sc-label::before{
  content:"";width:1.6rem;height:1px;background:var(--hairline-warm);flex:0 0 auto;
}
.sc-side-guest .sc-label{align-self:flex-start}

/* The relocated signature. Sized by width + font-size, never transform:
   .doorcount carries the dc-in keyframe, which ends on transform:none and
   would wipe a scale() out from under it. */
.sc-door{
  width:100%;max-width:460px;margin:0;
  /* Elevation removed with the panel it used to sit on — see "THE COUNTER,
     STRIPPED" at the end of this file. A shadow under bare type reads as a
     bug, and there is no longer a surface for it to lift. */
  box-shadow:none;
}
/* The guest side is a real photograph now, not the CSS mock — a frame from
   the partner's demo film. Allowed under the disclosure rule for the same
   reason the mock was: it is the screen every guest already holds.

   No device chrome around it: the photo already contains a phone in a hand,
   and drawing a second bezel around a photographed bezel reads as a mistake.
   Treated as a print instead — hairline, radius, the same elevation as the
   counter opposite it, so the two artifacts feel like one pair. */
.sc-shot{
  margin:0;width:min(320px,78vw);
  border:1px solid var(--hairline);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--elev-3);
  /* The source plate is a touch cooler and darker than this page's ground;
     nudged toward the room so it doesn't read as pasted on. */
  filter:brightness(1.06) saturate(1.04);
}
.sc-shot img{display:block;width:100%;height:auto}

/* The line that makes the pair a sentence rather than two screenshots. */
.sc-caption{
  margin:clamp(1.5rem,3vw,2.25rem) 0 0;
  padding-top:clamp(1.25rem,2.5vw,1.75rem);
  border-top:1px solid var(--hairline);
  font-size:.9rem;line-height:1.6;color:var(--muted);
  text-align:center;text-wrap:balance;
}

/* ---- Three-product strip -----------------------------------------------
   A preview of Chapter 02, not a replacement for it: each card is an anchor
   into the section it summarises, and the wording is lifted from that
   section's own pillar so the two never drift apart.
   Hairline dividers via 1px gap over a hairline ground — same "equipment
   made of rectangles" logic as the rest of v2. */
.hl-strip{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  margin-top:clamp(1.5rem,3vw,2.25rem);
  background:var(--hairline);
  border:1px solid var(--hairline);
  border-radius:var(--r-md);overflow:hidden;
}
/* Flex column so the "Live now" markers align across all three cards
   regardless of how many lines each one-liner takes. */
.hl-card{
  display:flex;flex-direction:column;
  padding:clamp(1.25rem,2.2vw,1.7rem);
  background:var(--room);color:inherit;text-decoration:none;
  transition:background-color .15s ease;
}
.hl-card:hover{background:var(--room-panel)}
.hl-tag{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--faint);margin-bottom:.75rem;
}
.hl-card h2{
  font-family:var(--display);font-size:clamp(1rem,1.5vw,1.18rem);
  font-weight:600;letter-spacing:-.005em;line-height:1.2;
  color:var(--text);margin:0 0 .55rem;
}
.hl-sub{font-size:.86rem;line-height:1.6;color:var(--muted);margin:0}
.hl-now{
  display:flex;align-items:center;gap:.45rem;margin-top:auto;padding-top:1.1rem;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);
}
.hl-now i{
  width:6px;height:6px;border-radius:50%;background:var(--st-open);
  box-shadow:0 0 0 3px rgba(110,199,142,.15);
}

/* ---- Showcase responsive ------------------------------------------------
   Trailing block, same reason as the IA rules above: these selectors have
   base rules of equal specificity earlier in this file, so an override
   placed in the earlier media queries would lose on source order. */
@media(max-width:860px){
  /* Side by side, the phone gets too narrow to read before the counter does.
     Stack instead, counter first — it is the one that carries the number. */
  .sc-pair{grid-template-columns:1fr;gap:clamp(1.75rem,5vw,2.5rem);justify-items:center}
  .sc-side{width:100%;max-width:420px}
  .sc-door{max-width:none}
  .sc-side-guest{align-items:center}
  .sc-side-guest .sc-label{align-self:center}
  .sc-shot{margin-inline:auto}
}
@media(max-width:680px){
  .hl-strip{grid-template-columns:1fr}
}
@media(max-width:480px){
  .hero-copy h1{max-width:none}
  .sc-stage{border-radius:var(--r-md);padding:1.5rem 1rem 1.25rem}
  .sc-caption{font-size:.84rem}
}

/* ============================================================
   TOP-OF-PAGE INFORMATION DENSITY
   The showcase answered "what does it look like" but the first
   screen still answered almost nothing else: how big is this,
   is it actually running, what do I need to run it, and what
   are the three products made of.

   Three additions, all text — the disclosure rule holds, so the
   answer to "how does it work" is the sequence of events, never
   the operator screen that performs them. Every number here is
   already claimed further down the page (#proof, #onboarding);
   nothing new is asserted at the top.
   ============================================================ */

/* ---- Hero fact row — REMOVED 2026-08-07 --------------------------------
   The row (3 products / 600–800 guests a night / Every night, partner venue
   Ginza / Phone only) is gone from index.en.html and matched nothing here.
   Two of its four marks duplicated the #trusted band added the same day,
   and it stated them small, ABOVE the large version — so it weakened the
   numbers it was meant to introduce. The other two were answered better
   elsewhere on the page: the three product cards sit directly below the
   hero, and "phone only" belongs to #onboarding.
   ------------------------------------------------------------------------ */

/* ---- The loop, opened out ----------------------------------------------
   Sits between the photo stage and the product strip: the stage shows the
   two ends of the loop, this says what happens between them, the strip
   says which product each part belongs to.

   Deliberately NOT boxed — the product cards below are the boxed element,
   and two stacked three-column card rows would read as one repeated
   component. Here: a top hairline per step, numbers in the margin. */
.sc-flow{
  list-style:none;margin:clamp(1.5rem,3vw,2.25rem) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1.25rem,3vw,2.5rem);
}
.sc-flow li{padding-top:1rem;border-top:1px solid var(--hairline-warm)}
.sc-flow .sf-when{
  display:flex;align-items:center;gap:.6rem;margin:0 0 .6rem;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--faint);
}
.sc-flow .sf-n{color:var(--money);font-variant-numeric:tabular-nums}
.sc-flow h3{
  font-family:var(--display);font-size:clamp(1rem,1.4vw,1.12rem);
  font-weight:600;line-height:1.25;letter-spacing:-.005em;
  color:var(--text);margin:0 0 .5rem;text-wrap:balance;
}
.sc-flow p:not(.sf-when){
  margin:0;font-size:.86rem;line-height:1.65;color:var(--muted);
}

/* ---- Product cards: what each one is made of ---------------------------
   The one-liner said what the product is; this says what is inside it,
   using the same group names as that section's own .feat-index so the
   preview and the section can't drift apart. */
.hl-list{
  list-style:none;margin:1.1rem 0 0;padding:0;
  display:flex;flex-direction:column;gap:.55rem;
}
.hl-list li{
  font-size:.8rem;line-height:1.5;color:var(--muted);
  padding-left:.9rem;position:relative;
}
/* A tick, not a bullet: these are things the product has, and a round dot
   at this size just reads as noise against the mono labels. */
.hl-list li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:4px;height:1px;background:var(--money);opacity:.8;
}
.hl-list b{
  display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;font-weight:500;color:var(--text);margin-bottom:.15rem;
}
/* The feature count turns the card into a visible door: the reader learns
   how much is behind it before deciding to click. */
.hl-go{margin-left:auto;color:var(--faint);letter-spacing:.1em}
.hl-card:hover .hl-go{color:var(--money)}

@media(max-width:860px){
  /* Three steps side by side get too narrow to hold a sentence once the
     stage has stacked; two-up keeps the measure readable. */
  .sc-flow{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){
  .sc-flow{grid-template-columns:1fr;gap:1.25rem}
}


/* ============================================================
   THE COUNTER, STRIPPED (2026-08-07)
   Loads last in this file, so it wins over the .doorcount block
   above without that block having to be unpicked.

   Why: on index.en.html the counter sits directly beside
   guest-pass.webp — a real photograph of a real phone in a real
   hand. Next to that, a CSS-drawn panel with a border, a shadow
   and a little bar chart reads as exactly what it is, and the
   pair loses the argument it was built to make. The fake was
   never going to beat the photograph, so it stops competing.

   What survives is the only part that was ever the point: the
   number, the capacity it is measured against, and the line about
   where it comes from. No panel, no chrome, no invented chart —
   which is also the honest position under the disclosure rule,
   since a number going up says nothing about how it is produced
   but a drawn dashboard implies a screen we won't show.

   The markup is untouched on both pages: the hidden parts stay in
   the DOM (assets/v2.js still builds the histogram into
   #doorTally) so nothing needs re-wiring and this is one block to
   delete if it should come back.
   ============================================================ */

.doorcount{
  background:none;
  border:0;
  border-radius:0;
  padding:0;
  box-shadow:none;
  max-width:none;
}
/* "INSIDE NOW / Sat 02:14", the histogram, its caption and the In/Out
   footer are all instrument chrome. Hidden, not deleted. */
.dc-head,
.dc-tally,
.dc-tallycap,
.dc-foot{display:none}

/* Freed from the panel, the number can be set as type rather than as a
   readout. Tabular figures stay — it counts up, and the digits must not
   jitter while it does. */
.dc-n{
  margin:0 0 .55rem;
  font-size:clamp(4.2rem,11vw,7rem);
  letter-spacing:-.055em;
  align-items:baseline;
  gap:.7rem;
  text-shadow:0 2px 30px rgba(6,6,5,.55);
}
.dc-n .cap{font-size:1rem;letter-spacing:.02em}
.dc-sub{
  margin:0;
  font-size:.9rem;
  max-width:34ch;
  /* Two lines either way at this measure, so balance them — unbalanced it
     drops "chat." alone on the second line in both placements. */
  text-wrap:balance;
  /* Structural, like the shadow on the number: this line now sits directly
     on a photograph instead of on a panel, and a busy frame behind it eats
     the letterforms without one. */
  text-shadow:0 1px 14px rgba(6,6,5,.8);
}

/* ---- The top-of-page pair -----------------------------------------------
   Without its panel the counter is far shorter than the photograph opposite,
   so the left column hung from the top of a tall row and the pair looked
   unbalanced. Stretching the row and centring the counter within its own
   column fixes it — and unlike align-items:center on the grid, this keeps
   both "At the door" / "In the guest's hand" labels on the same line, since
   each stays the first child of its own flex column.
   The number also grows: it is holding a whole column on its own now. */
.sc-pair{align-items:stretch}
.sc-door{margin-block:auto}
.sc-door .dc-n{font-size:clamp(4.5rem,9.5vw,8.5rem)}

/* ============================================================
   ANCHOR LANDING (2026-08-10)
   Both EN pages only — index.html does not load this file.

   The header is sticky, so every in-page anchor used to land with
   its heading tucked underneath it. scroll-padding-top on the
   scroll container is the one-line form of putting scroll-margin-top
   on each target, and it covers anchors added later for free.
   84px = the 64px header plus breathing room. (The older
   [id^="f-"] rule above is now redundant but harmless.)
   ============================================================ */
html{scroll-padding-top:84px}

/* ============================================================
   .browser の中に画像を直接置く場合（2026-08-14）
   vip.en.html の3Dフロアプランで使用。app.css の .shot は「枠」側の
   クラスで、border と背景を持つ。それを img に付けると .browser の
   枠と二重になるので、画像には付けず、ここで幅だけ合わせる。
   ⚠️ app.css は decks と共有なので触らない（この規則はこちらに置く）。
   ============================================================ */
.browser > img{display:block;width:100%;height:auto}

/* 端末枠ごと書き出したスクリーンショット（2026-08-14）
   booking の「決済とパス」で使用。
   ⚠️ .phone とは併用しないこと。あちらは CSS で枠を描く用で、この画像には
      すでに枠が入っている。重ねると枠が二重になる。
   幅は .phone（min(280px,72vw)）に合わせてあり、差し替え前後で
   レイアウトの見え方が変わらないようにしている。 */
.phone-shot{
  display:block;width:min(280px,72vw);height:auto;
  margin-inline:auto;
}

/* ============================================================
   ゲスト側3画面（door の #guest）

   2026-08-16 改：素材が透過（459×946）になり、3枚の端末の位置と
   大きさが1pxもずれずに一致した。ここから作りを2つ変えている。

   1) 黒い帯をやめた。前の素材は黒背景＋影つきで切り抜けなかったため、
      画像の地色と同じ黒い面に置いていた（下に経緯を残す）。透過なら
      切る必要も敷く必要もない。端末はセクションの地にそのまま乗る。
   2) 切り替えを「端末は動かさず、ガラスの中身だけを横に送る」方式に
      した。枠・レール・ステータスバーが1pxも動かないので、1台の端末が
      次のページへ進むように見える。端末ごと動かすと枠が動き、
      それがこれまで不安定に見えていた原因そのものだった。

   ⚠️ 送る層は「ガラス」の矩形で切り抜いている（--sq-*）。この矩形の
      境界線上が3枚とも真っ黒・不透明であることを実測して決めた。
      だから継ぎ目が出ない。素材を差し替えるときは必ず次の2つを確認：
      (a) 3枚の端末の位置と大きさが完全に一致していること
      (b) この矩形の縁が3枚とも黒いままであること
      どちらかが崩れると、切り替えの最中に継ぎ目が見える。
   ⚠️ ステータスバー（時刻・電波・電池）は送らない。一緒に動かすと
      切り替わりの最中に時計が2つ見える。矩形の上端はステータスバーの
      下、946pxのうち y=60 に置いてある。
   ⚠️ 送るのはスマホ幅（760px以下）だけ。デスクトップは3枚横並びのまま。
      横に並べれば3画面が一度に見えるので、送る必要がそもそもない。
      送りが要るのは、縦に積むと画面3つぶんスクロールさせることになる
      スマホの側だけ。
   ⚠️ HTML は3枚並びのまま。JS がスマホ幅で動いて初めて1台に畳まれる
      （v2.js）。JS が失敗しても3枚が普通に並ぶ。真っ白にはならない。
      動きを止めている利用者にも、3枚並びのまま全部見せる。

   〈経緯・2026-08-15〉端末を切り抜こうとしてやめた。当時の素材は
   黒背景＋影つきで、影（明度51〜74）が端末の画面（明度10前後）より
   明るいため、背景だけを自動で抜くことが原理的にできなかった。
   幾何学的なマスクで切ると角が実物と合わずギザギザになった。
   透過素材になったことで、この問題は消えている。
   ============================================================ */
/* ============================================================
   60秒の紹介動画（index の #film）2026-08-16

   ⚠️ YouTube/Vimeo の埋め込みにしないこと。このサイトの外部スクリプトは
      Plausible（Cookieなし）だけで、そのおかげで同意バナーを1枚も
      出さずに済んでいる。埋め込みを入れた時点で第三者ストレージが入り、
      英語版が対象にしているEU圏でバナーが要る。自前配信ならその話が
      そもそも発生しない。
   ⚠️ preload="none"。ポスター画像（28KB）以外は、再生を押すまで
      1バイトも読まない。動画本体は21MBある。
   ⚠️ 動画ファイルは faststart（moov が mdat より前）。押した瞬間に
      再生が始まる。書き出し直すときはこれを維持すること。
   ⚠️ 字幕は焼き込み済み（日本語＋英語）。日英で同じファイルを使う。
   ============================================================ */
.film{
  margin:clamp(1.8rem,4vw,2.8rem) auto 0;
  max-width:980px;
}
.film video{
  display:block;width:100%;height:auto;
  aspect-ratio:16/9;
  background:#000;
  border-radius:var(--r-md,12px);
}
/* 再生ボタンは JS が挿入する（v2.js）。HTML に書かないこと——
   JS が動かない環境で「押しても何も起きないボタン」が残ってしまう。
   挿入されなければブラウザ標準のコントロールがそのまま使える。 */
.film-frame{position:relative;display:block}
.film-play{
  position:absolute;inset:0;width:100%;height:100%;
  display:grid;place-items:center;
  border:0;background:transparent;cursor:pointer;padding:0;
}
.film-play i{
  display:grid;place-items:center;
  width:clamp(56px,7vw,78px);aspect-ratio:1;border-radius:50%;
  background:var(--money,#E0B86A);
  box-shadow:0 8px 34px rgba(0,0,0,.5);
  transition:transform .25s ease,box-shadow .25s ease;
}
.film-play:hover i,.film-play:focus-visible i{transform:scale(1.07);box-shadow:0 10px 40px rgba(0,0,0,.6)}
.film-play:focus-visible{outline:2px solid var(--money,#E0B86A);outline-offset:6px}
.film-play svg{margin-left:.18em;fill:#1B1509}
@media(prefers-reduced-motion:reduce){.film-play i{transition:none}}

.film figcaption{
  margin-top:1rem;text-align:center;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;
  color:var(--faint,rgba(237,233,226,.34));
}

.gallery .phone-shot{width:min(238px,72vw)}

/* --- JS が1台に畳んだ状態（スマホ幅だけ） --- */
@media(max-width:760px){
  .gallery.is-seq{display:block}
  .gallery.is-seq > figure{display:none}
  .gallery.is-seq > figure.is-lead{display:flex}
}

/* スマホ幅で組み替えたあとに画面を広げた場合の後始末。3枚並びに戻り、
   先頭の1枚は静止した端末として普通に並ぶ（送りは JS 側で止まる）。
   ⚠️ .pdev の幅は .phone-shot と同じにしてある。ここがずれると、
      横に並んだとき先頭の1枚だけ大きさが違って見える。 */
@media(min-width:761px){
  .gallery.is-seq figcaption span ~ span{display:none}
  .seq-dots{display:none}
}

.pdev{
  /* ガラスの矩形。459×946 の素材から実測（左32 上60 右31 下28 px）。 */
  --sq-l:6.9717%;
  --sq-t:6.3425%;
  --sq-r:6.7538%;
  --sq-b:2.9598%;
  position:relative;
  width:min(238px,72vw);   /* .phone-shot と同じ。揃えておくこと。 */
  aspect-ratio:459/946;
  margin-inline:auto;
}
.pdev .pdev-plate{position:absolute;inset:0;width:100%;height:100%;display:block}
.pdev-win{
  position:absolute;
  left:var(--sq-l);top:var(--sq-t);right:var(--sq-r);bottom:var(--sq-b);
  display:block;overflow:hidden;background:#000;
}
.pdev-track{
  display:flex;width:400%;height:100%;
  transition:transform .56s cubic-bezier(.65,0,.35,1);
}
.pdev-track img{width:25%;height:100%;display:block}
/* 3枚目から1枚目へ戻る一瞬だけ transition を切る（巻き戻して見せない）。 */
.pdev-track.is-snap{transition:none}

@media(max-width:760px){
  .gallery.is-seq figcaption{position:relative;min-height:1.4em;width:100%}
  .gallery.is-seq figcaption span{
    position:absolute;left:0;right:0;text-align:center;
    opacity:0;transition:opacity .42s ease;
  }
  .gallery.is-seq figcaption span.is-on{opacity:1}
}

.seq-dots{display:flex;justify-content:center;gap:.4rem}
.seq-dots i{
  width:6px;height:6px;border-radius:999px;background:var(--lit-edge);
  transition:width .45s cubic-bezier(.65,0,.35,1),background .45s ease;
}
.seq-dots i.is-on{width:18px;background:var(--money-deep)}

@media(prefers-reduced-motion:reduce){
  .pdev-track{transition:none}
}

/* ============================================================
   ブラウザモックの下に置く一行（2026-08-16）
   booking の #f-sell で使用。

   モックの中身は架空の会場（PULSE NIGHTCLUB）なので、そのことと、
   実際に動いているストアフロントの在り処を同じ場所で言う。
   ⚠️ 実リンクはトップの #proof にもあるが、検索から製品ページへ
      直接入ってくる人はトップを見ない。重複を承知で両方に置く。
   ⚠️ 箇条書き側のリンクと同じ行き先。片方だけ差し替えないこと。
   ============================================================ */
.shot-cap{
  margin:.85rem 0 0;text-align:center;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;line-height:1.6;
  color:var(--faint,rgba(237,233,226,.34));
}
.shot-cap a{
  color:var(--money,#E0B86A);text-decoration:none;
  border-bottom:1px solid rgba(224,184,106,.45);
}
.feat-points a{
  color:var(--money,#E0B86A);text-decoration:none;
  border-bottom:1px solid rgba(224,184,106,.4);
}