/* ============================================================
   ON THE LISTS — "the night, then the store"
   Loaded LAST: app.css → v2.css → story.css → this.
   index.en.story.html only. Nothing above it is modified, so
   deleting this file and its four markup hooks restores the
   previous page exactly.

   WHY THIS LAYER EXISTS
   The story page told one night well, but ran the whole way in a
   single register — dark photograph, centred line, repeat — and
   the carried-over back half (proof / pricing / FAQ) kept the same
   dark ground. Twelve screens at one value and one temperature.
   No individual screen was wrong; the page just had no second act,
   and nothing in it said "this is the part where you decide."

   The brief was Apple's store. What actually makes that work is
   not the white: it is that Apple runs a film, and then turns the
   lights on for the part where things are priced and compared.

   The night supplies that transition for free:

     20:00 – 01:20   the night          dark, photographic
     22:50           the guest's hand   a flash of light — v2's
                                        "two worlds", unchanged
     10:00           the morning after  THE LIGHTS COME UP, and
                                        they stay up
     the store       products · proof · pricing · FAQ   light
     book a demo     back into the dark — the invitation

   The turn lands on the one beat whose copy was already about
   daylight, so the art direction and the writing say the same
   thing at the same moment.

   HOW THE LIGHT WORLD IS BUILT
   Not by restyling components. `.lw` re-points the design tokens
   app.css and v2.css already read — --text, --muted, --surface,
   --hairline, --fill and friends — so proof, pricing, the FAQ and
   every chip and metric inside them flip in one move. Same trick
   v2.css uses to de-gold app.css by redefining --gold. Only what
   hard-codes a colour, or assumes a dark ground, needs a patch;
   those are collected under PATCHES below.

   DISCLOSURE RULE (2026-08-04) HOLDS THROUGHOUT. The store tiles
   are venue photography — no operator screens, no floor map, no
   dashboards. They deliberately reuse the three frames from the
   night, because the section's whole argument is "you already
   watched all of this."
   ============================================================ */


/* ============================================================
   1. THE LIGHT WORLD
   ============================================================ */

.lw{
  /* Two neutrals — a true white and a barely-there grey. Alternating
     them is what separates sections on a long bright page without
     drawing a single border. */
  --room:#F5F5F7;
  --room-deep:#FFFFFF;
  --room-panel:#FFFFFF;
  --ink:#F5F5F7;
  --ink-2:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#F5F5F7;
  --glass:#FFFFFF;

  /* Near-black, never #000: pure black on white glares at this size. */
  --text:#12141A;
  --muted:#585D66;
  --faint:#86868B;
  --white:#12141A;            /* app.css reads --white as "strongest ink" */

  --hairline:rgba(18,20,26,.12);
  --hairline-warm:rgba(18,20,26,.22);
  --fill:rgba(18,20,26,.032);
  --fill-2:rgba(18,20,26,.06);

  /* Gold does not survive a white ground — #E0B86A on white is about
     1.8:1. The accent goes deep enough to read, and prices come off
     it entirely below: a price is information, not an accent. */
  --money:#8A6A28;
  --money-deep:#6F5520;
  --gold:#6E6659;
  --gold-soft:#5E5750;
  --gold-deep:#8C8375;
  --gold-glow:rgba(18,20,26,.08);

  --elev-1:0 1px 2px rgba(18,20,26,.05);
  --elev-2:0 10px 30px rgba(18,20,26,.09);
  --elev-3:0 26px 64px rgba(18,20,26,.13);
  --inset-hi:inset 0 1px 0 rgba(255,255,255,.8);

  /* v2 chose rectangles deliberately — professional equipment is made
     of rectangles. That argument is about the operator world. The
     store is the other world, so it may round. */
  --r-sm:10px;
  --r-md:16px;
  --r-lg:22px;
  --radius:var(--r-md);
  --radius-lg:var(--r-lg);

  background:var(--surface);
  color:var(--text);
}
/* .band already paints --surface-2, so #pricing lands on the grey by
   itself and the sequence alternates white / grey / white. */


/* ---- PATCHES: what a token swap can't reach ---- */

/* v2's primary button is a light chip on dark (background:--lit); on
   white it disappears. Inverted, not restyled — the shape stays. */
.lw .btn-gold{background:var(--text);color:#FFF;font-weight:600}
.lw .btn-gold:hover{background:#2C2F36}
.lw .btn-ghost{background:transparent;color:var(--text);border-color:var(--hairline-warm)}
.lw .btn-ghost:hover{background:var(--fill-2);border-color:rgba(18,20,26,.34)}

/* Same problem, smaller: the "Add-on" pill is --lit on --lit-ink. */
.lw .price-head .ph-new{background:var(--text);color:#FFF}

/* "Recommended" is dark ink on --money. That is 8.4:1 on the dark page and
   only 3.64:1 once --money drops to #8A6A28 — under AA for a label this
   small. It becomes the same near-black chip as the other two, which also
   reads more clearly as "this is the one we picked". */
.lw .price .pp-best{background:var(--text);color:#FFF}

/* zouk-tokyo-white.png is a white-on-transparent mark and vanishes
   here. brightness(0) blacks every opaque pixel and leaves the alpha
   channel alone, which is safer on a logo than invert(). */
.lw .proof-venue img{filter:brightness(0);opacity:.82}

/* Background photography is a dark-world device: app.css lays it in at
   opacity .3 under a scrim, which on white reads as a stain. In the
   store, the pictures are the tiles. */
.lw .bg-photo{display:none}

/* A price is a number you compare, not an accent you notice. */
.lw .price .amt{color:var(--text)}
.lw .price .amt.tbd{color:var(--muted)}

/* v2 gives cards a translucent fill plus a hairline because they sit
   on a dark ground; the same recipe on white reads as a smudge. A card
   here is white, bordered, softly lifted. */
.lw .price,
.lw .proof-venue,
.lw .faq details{
  background:#FFF;
  border:1px solid var(--hairline);
  border-radius:var(--r-lg);
}
.lw .price{padding:2rem 1.9rem}
.lw .price.featured{
  border-color:rgba(18,20,26,.3);
  background:#FFF;
  box-shadow:var(--elev-2);
}
.lw .launch{
  background:#FFF;border:1px solid var(--hairline);
  border-radius:var(--r-lg);box-shadow:var(--elev-1);
}
.lw .metric{
  background:#FFF;border:1px solid var(--hairline);
  border-radius:var(--r-lg);padding:1.5rem;
}
.lw .faq summary:hover{background:rgba(18,20,26,.028)}
/* v2 caps the list at 780px with no auto margin — fine under a left-aligned
   head, visibly off under the centred one the store uses. */
.lw .faq{margin-inline:auto}
.lw .chip{background:#FFF;border-color:var(--hairline)}

/* The live-storefront link was styled inline for the dark ground. */
.lw .proof-venue .st a{
  color:var(--money)!important;
  border-bottom-color:rgba(138,106,40,.4)!important;
}

/* Heads centre in the store. On a dark editorial page a left-aligned
   head reads as a chapter opening; on a bright product page the same
   head reads as an unfinished column. */
.lw .sec-head{max-width:64ch;margin-inline:auto;text-align:center}
.lw .sec-head .lead{margin-inline:auto}
.lw .sec-head .eyebrow{justify-content:center}
.lw .sec-head h2{
  font-size:clamp(1.9rem,4vw,3.2rem);
  font-variation-settings:"wdth" 96;
  letter-spacing:-.028em;line-height:1.05;
  text-wrap:balance;
}
/* .chips sits under a centred column in #proof and inherits the flex
   start alignment from app.css. */
.lw .proof .chips{justify-content:flex-start}


/* ============================================================
   2. DAWN — where the lights come up
   Formerly .scene-quiet: near-black, no photograph, "the morning
   after." Right beat to strip bare, wrong colour to strip it to.
   The page has spent six screens in a dark room, and the one line
   about the morning is the only place it can honestly turn.
   ============================================================ */

.scene-dawn{
  background:
    radial-gradient(120% 90% at 50% 6%,#FFFFFF,#F7F7F9 46%,#ECEDF0);
  color:var(--lit-ink);
  border-top:0;
}
/* The seam is the sunrise: the dark room above bleeds a little way
   into the top of this screen rather than stopping at an edge. */
.scene-dawn::before{
  content:"";position:absolute;left:0;right:0;top:0;
  height:clamp(90px,16vh,190px);pointer-events:none;
  background:linear-gradient(180deg,#0B0908,rgba(11,9,8,.45) 34%,transparent);
}
.scene-dawn h2{color:var(--lit-ink);text-shadow:none}
.scene-dawn .scene-lead{color:var(--lit-muted)}
.scene-dawn .scene-lead em{color:var(--lit-ink)}
.scene-dawn .scene-time{color:var(--lit-muted)}
.scene-dawn .scene-time b{color:var(--money-deep)}
.scene-dawn .scene-time::before,
.scene-dawn .scene-time::after{background:rgba(20,23,27,.2)}


/* ============================================================
   3. TYPE — the film half
   story.css already set Archivo's width axis to 90. The display
   setting this direction wants is bigger, tighter and shorter-
   measured than a SaaS headline: the line should read as one
   object rather than be scanned across.
   ============================================================ */

.scene h1,.scene h2{
  font-size:clamp(2.5rem,6.6vw,5.6rem);
  font-variation-settings:"wdth" 88;
  font-weight:680;
  letter-spacing:-.034em;
  line-height:.98;
  max-width:17ch;
}
/* Deliberately smaller than the night beats. Those are single lines with a
   whole screen to themselves; the hero has to carry an eyebrow, two lines,
   a full sub-paragraph AND both buttons above the fold. At the beat size it
   ran to five lines of 102px and pushed the CTAs 76px past the cut. */
.scene-hero h1{
  /* 2026-08-12：大文字に。⚠️ HTML は通常表記のまま text-transform で
     変換すること——読み上げソフトが1文字ずつ読む問題と、検索側に
     通常表記を渡すため。
     大文字は小文字より字幅が広く、ディセンダが無いぶん行間を詰められる。
     字間は逆に負のままだと詰まりすぎるので、ほぼゼロまで戻す。 */
  text-transform:uppercase;
  max-width:20ch;
  font-size:clamp(1.55rem,2.95vw,2.7rem);
  line-height:1.08;
  letter-spacing:.005em;
  font-variation-settings:"wdth" 88;
  font-weight:700;
  text-shadow:0 2px 30px rgba(6,6,5,.8),0 1px 4px rgba(6,6,5,.55);
}
/* One step up from body copy. Under type this large, a 1rem lead
   reads as a caption and the screen loses its middle. */
.scene-lead{
  font-size:clamp(1.02rem,1.35vw,1.28rem);
  line-height:1.62;
  max-width:52ch;
}


/* ============================================================
   4. THE STORE
   The previous #system was three rows in a list. A list is the
   right shape when the items are variations of one thing — but
   these are three products a venue buys separately, at three
   different prices. So they get the shape that says so: three
   cards, each with its own picture, contents and price.

   All copy is the existing page's, unchanged. Prices are read off
   #pricing below rather than invented.
   ============================================================ */

.store{
  position:relative;
  padding:clamp(5.5rem,13vh,9rem) 0 clamp(5rem,12vh,8rem);
  background:var(--surface-2);
}
.store .wrap{max-width:1180px}

/* The measure belongs on the heading, NOT on this container: a max-width
   here is inherited as a hard ceiling by the paragraph too, so the h2 broke
   into four narrow lines and the sub-copy could never reach its own 46ch. */
.store-head{text-align:center;margin:0 auto clamp(3rem,7vh,4.75rem)}
.store-eyebrow{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--faint);margin:0 0 1.1rem;
}
.store-head h2{
  font-family:var(--display);
  font-size:clamp(2rem,4.6vw,3.5rem);
  font-variation-settings:"wdth" 94;
  font-weight:660;letter-spacing:-.032em;line-height:1.02;
  /* 20ch では「One guest, one QR, one night.」（689px 必要）が入らず、
     明示改行を入れたあとに 3 行へ割れていた。この見出しの2行目が
     収まる幅にする。text-wrap:balance は残すが、明示改行がある場合は
     そちらが優先されるので競合しない。 */
  margin:0 auto;max-width:24ch;color:var(--text);text-wrap:balance;
}
.store-head p{
  margin:1.25rem auto 0;max-width:46ch;
  color:var(--muted);font-size:1.02rem;line-height:1.65;
}

.store-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1rem,1.6vw,1.5rem);
  align-items:stretch;
}

.tile{
  display:flex;flex-direction:column;
  background:#FFF;
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--elev-1);
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s;
}
.tile:hover{transform:translateY(-4px);box-shadow:var(--elev-2)}

/* 2026-08-22：写真や見出しを叩いても何も起きない、という指摘。
   カードは「詳しく見る」のリンクだけが当たり判定で、面積の大半を
   占める写真は死んでいた。カード全体を当たり判定にする。

   <article> ごと <a> で包むと、中の「料金を見る」がアンカーの入れ子に
   なって HTML として不正になる。そこで「詳しく見る」の擬似要素を
   カード全面に広げる（stretched link）。::after は chevron が使って
   いるので ::before を使うこと。
   「料金を見る」は z-index でその上に載せ、別リンクのまま残す。 */
.tile{position:relative}
.tile-links .lnk-strong::before{
  content:"";position:absolute;inset:0;z-index:1;
}
/* ⚠️ :not(.lnk-strong) は必須。「詳しく見る」自身に position:relative を
   付けると、上の ::before の基準がカードではなくリンク自身になり、
   当たり判定がリンクの幅（約75px）に縮む。 */
.tile-links .lnk:not(.lnk-strong){position:relative;z-index:2}

/* The picture is the same frame that product had during the night.
   That recognition is the section's argument, and it is cheaper than
   explaining the product a second time. */
.tile-shot{margin:0;aspect-ratio:4/3;overflow:hidden;background:#0B0908}
.tile-shot img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.tile:hover .tile-shot img{transform:scale(1.035)}

.tile-body{
  display:flex;flex-direction:column;flex:1;
  padding:clamp(1.5rem,2vw,1.9rem);
}
.tile-n{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--faint);margin:0 0 .7rem;
}
.tile h3{
  font-family:var(--display);
  font-size:clamp(1.25rem,1.7vw,1.55rem);
  font-weight:640;letter-spacing:-.022em;line-height:1.1;
  margin:0 0 .55rem;color:var(--text);
}
.tile-sub{margin:0;color:var(--muted);font-size:.94rem;line-height:1.55}

/* Contents use each section's own group names, so the store preview
   and the detail page cannot drift apart. */
.tile-list{
  list-style:none;padding:0;margin:1.15rem 0 0;
  display:flex;flex-wrap:wrap;gap:.4rem .5rem;
}
.tile-list li{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);
  border:1px solid var(--hairline);border-radius:var(--r-sm);
  padding:.34rem .6rem;
}

.tile-price{
  margin:auto 0 0;padding-top:1.5rem;
  font-size:.92rem;color:var(--muted);
}
.tile-price b{
  font-family:var(--mono);font-weight:400;font-size:1.35rem;
  color:var(--text);letter-spacing:-.02em;
}
.tile-price .per{font-size:.82rem}

/* Product 03 carries a one-time build alongside the monthly. Showing only
   the monthly on the shelf would make the three cards look comparable when
   they are not — the buyer would find the build cost two screens later. */
.tile-addon{
  margin:.4rem 0 0;font-size:.8rem;line-height:1.45;color:var(--muted);
}

.tile-live{
  display:inline-flex;align-items:center;gap:.5rem;margin:.9rem 0 0;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);
}
.tile-live i{
  width:6px;height:6px;border-radius:50%;background:#2C9E5B;
  box-shadow:0 0 0 3px rgba(44,158,91,.16);
}

.tile-links{
  display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;
  margin-top:1.25rem;padding-top:1.25rem;
  border-top:1px solid var(--hairline);
}

/* The chevron is a pseudo-element so it can move on hover without
   shifting the label next to it. */
.lnk{
  display:inline-flex;align-items:center;gap:.3rem;
  font-size:.9rem;color:var(--money);text-decoration:none;
}
.lnk::after{
  content:"\203A";font-size:1.15em;line-height:1;
  transition:transform .25s cubic-bezier(.2,.7,.2,1);
}
.lnk:hover::after{transform:translateX(3px)}
.lnk:focus-visible{outline:2px solid var(--money);outline-offset:3px;border-radius:3px}
.lnk-strong{font-weight:600;color:var(--text)}

.store-more{display:flex;justify-content:center;margin-top:clamp(2.5rem,5vh,3.5rem)}
.store-more .lnk{font-size:.95rem}


/* ============================================================
   5. HEADER
   Thin, translucent, blurred, never competing with the page. It
   stays dark through both worlds: the brand mark is a white PNG,
   and a bar that changes colour mid-scroll needs JS this page
   does not otherwise need.
   ============================================================ */

header.site{
  background:rgba(11,9,8,.72);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
/* 2026-08-11：ロゴを 32→44px に上げたのに伴い、バーも上げる。
   56px のままだと 44px のロゴで上下 6px しか残らず、窮屈というより
   ロゴが枠に当たって見えた。v2.css は 76px を指定しているが、この
   ルールのほうが詳細度が高く勝つので、ここで揃える。 */
header.site .nav{height:76px}
.nav-links a{font-size:.82rem}


/* ============================================================
   6. MOTION
   Content moves as you scroll, not on load. Done with scroll-driven
   CSS rather than an IntersectionObserver on purpose: app.js's
   .reveal observer is known not to fire reliably on this project,
   and a JS reveal that fails leaves content at opacity:0 forever.
   An unsupported view() timeline simply never applies, so the
   resting state is fully visible and nothing can be stranded.

   Stagger is by animation-range, not delay — ranges are tied to
   scroll position, so a fast scroll cannot outrun them.
   ============================================================ */

@keyframes rise-in{
  from{opacity:0;transform:translateY(26px)}
  to{opacity:1;transform:none}
}

@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .scene-copy > *,
    .store-head > *,
    .tile{
      animation:rise-in linear both;
      animation-timeline:view();
      animation-range:entry 6% entry 58%;
    }
    .scene-copy > .scene-time  {animation-range:entry 4%  entry 44%}
    .scene-copy > h1,
    .scene-copy > h2           {animation-range:entry 8%  entry 54%}
    .scene-copy > .scene-lead  {animation-range:entry 12% entry 64%}
    .scene-copy > .scene-actions,
    .scene-copy > .scene-art,
    .scene-copy > .scene-shot  {animation-range:entry 16% entry 72%}

    /* The hero is already on screen at load, where a view() timeline
       would pin it to its start value until the reader scrolls. It
       opens on its own timeline instead. */
    .scene-hero .scene-copy > *{
      animation:rise-in .8s cubic-bezier(.2,.7,.2,1) both;
      animation-timeline:auto;
    }
    /* Delays stepped down 2026-08-09: the eyebrow that used to hold
       delay 0 is gone, and the h1 was opening on a dead 60ms beat. */
    .scene-hero .scene-copy > h1{animation-delay:0s}
    .scene-hero .scene-copy > .scene-lead{animation-delay:.08s}
    .scene-hero .scene-copy > .scene-actions{animation-delay:.16s}

    .store-grid .tile:nth-child(2){animation-range:entry 9%  entry 62%}
    .store-grid .tile:nth-child(3){animation-range:entry 12% entry 66%}
  }
}


/* ============================================================
   7. RESPONSIVE
   NOTE, same rule as v2.css and story.css: this is the LAST set of
   media queries the page loads, so overrides for anything defined
   above belong here — an equal-specificity rule placed in an
   earlier file's media block loses on source order.
   ============================================================ */

@media(max-width:1024px){
  .store-grid{grid-template-columns:repeat(2,1fr)}
  /* Two cards and an empty cell reads as a bug; the third spans. */
  .store-grid .tile:nth-child(3){grid-column:1 / -1}
  .store-grid .tile:nth-child(3) .tile-shot{aspect-ratio:21/9}
}

@media(max-width:860px){
  .scene h1,.scene h2{max-width:15ch;letter-spacing:-.03em}

  /* The row becomes a swipe. This is the one piece of store behaviour
     that is genuinely better on a phone than the stack it replaces:
     three priced products stay side by side and comparable, and the
     peeking edge says there is more. The negative margin lets cards
     reach the screen edge while scroll-padding keeps the first one
     aligned with the copy above it. */
  .store-grid{
    display:flex;
    gap:.9rem;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:var(--pad);
    padding:.5rem var(--pad) 1.5rem;
    margin-inline:calc(var(--pad) * -1);
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .store-grid::-webkit-scrollbar{display:none}
  .store-grid .tile{flex:0 0 78vw;max-width:340px;scroll-snap-align:start}
  .store-grid .tile:nth-child(3){grid-column:auto}
  .store-grid .tile:nth-child(3) .tile-shot{aspect-ratio:4/3}
  .tile:hover{transform:none}

  .store-head h2{max-width:15ch}
  .lw .price{padding:1.6rem 1.4rem}
}

@media(max-width:480px){
  .scene-hero h1{font-size:clamp(2.4rem,10vw,3.2rem)}
  .scene h1,.scene h2{font-size:clamp(2.15rem,9vw,3rem);max-width:14ch}
  .store-grid .tile{flex-basis:84vw}
  .tile-list li{font-size:.62rem}
}

/* ============================================================
   PROOF METRICS — 2 UP (2026-08-09)
   #proof lost its third metric ("Verbal-check mistakes / 0":
   internal jargon, unverifiable zero). app.css sets .metrics to
   repeat(3,1fr) and is shared with index.html and all four decks,
   so it must not be edited — this override is scoped to .lw,
   which only exists on this page. app.css's own narrow breakpoint
   already collapses .metrics to one column, so mobile needs nothing.
   ============================================================ */
.lw .metrics{grid-template-columns:repeat(2,1fr)}

/* ============================================================
   製品タイルの「いま起きていること」（2026-08-10）

   3製品をトップの2画面目に上げたのに伴い、各タイルへ
   問題を1行足した。何のアプリかだけでなく「何を解決するか」が
   1画面で伝わる必要があるため。

   問題＝冷たい灰（画面の光の色。彩度を落とし、解決側より弱く）
   解決＝tile-sub。こちらは本文色まで上げて、視線が下に流れるようにする。
   色だけで前後関係が読めるので、Before/After のラベルは置かない。
   ============================================================ */
.lw .tile-prob{
  margin:0 0 .55rem;
  display:flex;gap:.5rem;
  font-size:.85rem;line-height:1.45;
  color:#6E757C;                       /* --muted より青寄り＝「まだ直っていない」側 */
}
.lw .tile-prob::before{
  content:"✕";flex:none;font-size:.76rem;line-height:1.7;color:#A2A8AE;
}
/* 解決側を一段強く。並べたときに問題→解決の順で読める。 */
.lw .tile-sub{color:var(--text)}

@media(max-width:640px){
  .lw .tile-prob{font-size:.8rem}
}

/* ============================================================
   ヒーロー：左寄せ（2026-08-11）

   写真をドアの到着シーンに変えたのに伴う変更。中央寄せのままだと
   見出しがゲストの顔の真上に重なって、写真も文字も死ぬ。新しい写真は
   右にホストと暖色のドア、中央に人、左が濡れた路面で暗い ——
   文字を置けるのは左だけ。

   ⚠️ .scene は place-items:center なので、margin だけでは左に寄らない。
   justify-items で解除する必要がある（一度これで嵌った）。
   左端はヘッダーのロゴと揃えたいので、.scene-copy を .wrap と同じ
   （max-width + auto margin + pad）にして、中の文字だけ左揃えにする。
   ============================================================ */
.scene-hero{justify-items:stretch}
.scene-hero .scene-copy{
  max-width:var(--maxw);
  margin-inline:auto;
  text-align:left;
}
.scene-hero .scene-copy > *{text-align:left;margin-inline:0}
.scene-hero h1{
  /* ⚠️ 2行で組むこと。4行版（max-width:13ch）は
       We digitized / everything / except the / hospitality.
     と、意味の切れ目でないところで割れていた。この文の自然な切れ目は
     「We digitized everything ／ except the hospitality.」の1箇所だけで、
     4行はその塊を無理に割っている。文字は小さくなるが、1文が2つの塊で
     読めるほうが強い。 */
  max-width:24ch;
  font-size:clamp(1.9rem,3.55vw,3.3rem);
  line-height:1.02;
  letter-spacing:-.038em;
  /* 写真の上なので影は装飾ではなく可読性の担保 */
  text-shadow:0 2px 30px rgba(6,6,5,.8),0 1px 4px rgba(6,6,5,.55);
}
.scene-hero .scene-lead{
  max-width:40ch;
  /* 本文用の --muted は暗い無地なら十分だが、写真の上では沈む。
     ヒーローだけ明度を上げ、行間も少し詰めて塊にする。 */
  color:rgba(237,233,226,.9);
  line-height:1.55;
  text-shadow:0 1px 18px rgba(6,6,5,.85);
}
/* 枠線だけのボタンは写真の上でほぼ消えるので、少し起こす。 */
.scene-hero .btn-ghost{border-color:rgba(237,233,226,.34)}

/* コピー全体を持ち上げる。.scene は place-items:center なので中央に
   置かれるが、この写真で暗いのは左の「上半分」——下half は歩道の石が
   明るい。padding-bottom を足すと中央揃えの基準がずれ、実質的に
   ブロックが上へ寄る。縦画面では下に敷く設計なので効かせない。 */
@media(min-width:861px){
  .scene-hero .scene-copy{padding-bottom:10vh}
}
.scene-hero .scene-actions{justify-content:flex-start}

/* 文字が乗る左側だけを沈める。全面スクリムだと右の暖色のドアまで
   死ぬので、横方向のグラデーションにしてある。 */
.scene-hero .scene-photo::after{
  content:"";position:absolute;inset:0;
  /* 2行にしたぶん見出しが右へ伸びるので、暗い帯も少し右まで延ばす。
     ただし濃くはしない——写真が仕事をしているので潰さないこと。 */
  /* 2026-08-16：写真の差し替えに合わせて少し薄くした（.92/.82 → .86/.72）。
     見出しの下にあるのは待っている列で、ここが潰れると
     「開店前の店」に戻ってしまう。文字は text-shadow が持たせている。 */
  background:
    linear-gradient(96deg,
      rgba(6,6,5,.86) 0%, rgba(6,6,5,.72) 28%, rgba(6,6,5,.42) 50%,
      rgba(6,6,5,.12) 68%, transparent 84%),
    linear-gradient(180deg,rgba(6,6,5,.72),transparent 20%);
}
/* 写真をわずかに右へ寄せ、左の暗い余白を広げる。2行の見出しが
   ゲストの顔に重ならずに収まるのはこの位置。
   ⚠️ 2026-08-16：70% → 58%。新しい写真は列が左、受付台が右にあり、
   70% だと列がほとんど画面外へ出て、写真の主題（行列）が消えていた。
   58% で「列 → 受付 → 店内」が1枚に収まる。 */
@media(min-width:861px){
  .scene-hero .scene-photo img{object-position:58% center}
}

@media(max-width:860px){
  /* 縦画面では左右に逃げ場がないので、下に敷いて文字を持ち上げる */
  .scene-hero h1{max-width:15ch;font-size:clamp(2.2rem,8.6vw,3rem)}
  /* 2026-08-16 追加。縦画面は横がほとんど切り落とされるので、
     既定（中央）だと外壁のイルミネーションしか残らず、人も端末も
     写らなかった。受付台に寄せて、ゲストとドアの人、その手元の
     タブレットと携帯が入る位置にしてある。 */
  .scene-hero .scene-photo img{object-position:80% center}

  /* 2026-08-16：写真を上へ寄せる（ユーザー指摘）。
     縦画面では写真（横長）が高さぴったりに収まるので、
     object-position の縦方向は効かない——動かす余地が1pxもない。
     そこで写真を120%の高さに拡大し、下端で固定している。
     はみ出すのは上（店内の天井）だけ、人は大きく、上に来る。
     ⚠️ 拡大率を上げすぎないこと。130%を超えると列に並ぶ人が
        画面の外へ出て、「行列のある店」に見えなくなる。 */
  .scene-hero .scene-photo{overflow:hidden}
  .scene-hero .scene-photo img{position:absolute;left:0;bottom:0;height:120%}

  /* 2026-08-16：文字を下へ落として、人の顔の上にかからないようにする
     （ユーザー指摘「人が見えるようにしてほしい」）。中央揃えのままだと
     見出しがちょうど顔の高さに来ていた。

     ⚠️ padding-bottom を 0 にしないこと。この節は 100svh だがヘッダーの
     ぶん（約77px）下へずれて始まるので、下端に寄せきると CTA が
     画面の外へ落ちる。10vh は 390×726 で CTA 下端が画面下から34px
     内側に収まる値。増やすと文字が顔に重なり、減らすと CTA が切れる。 */
  .scene-hero{align-items:end}
  .scene-hero .scene-copy{padding-bottom:10vh}

  /* 上半分は人が写っているので薄く、文字が乗る下半分だけ濃くする。 */
  .scene-hero .scene-photo::after{
    background:linear-gradient(180deg,
      rgba(6,6,5,.55) 0%, rgba(6,6,5,.18) 26%, rgba(6,6,5,.62) 62%, rgba(6,6,5,.95) 100%);
  }
}

/* ============================================================
   ポスターの壁（2026-08-11）— #system の製品3面

   旧 .store-grid > .tile（角丸カード3枚・写真341px）を置き換えたもの。
   3面を隙間1pxで並べ、写真を全高で使う。クラブの外に貼ってある
   3枚のポスターの見え方。

   ⚠️ .panels は .wrap の外（全幅）に置くこと。中に入れると左右に
   余白が出て「壁」にならない。
   明るい面（.lw）の中にある黒い帯、という構図なので、ヒーロー（暗）
   → 製品（明地に黒帯）→ 名乗り（明）のリズムは保たれる。
   ============================================================ */
.lw .panels{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:rgba(18,20,26,.16);   /* 隙間＝細い罫線に見える */
  margin-top:clamp(2.5rem,5vh,3.5rem);
}
.lw .panel{
  position:relative;overflow:hidden;background:#000;
  min-height:min(76vh,660px);
  display:flex;flex-direction:column;justify-content:flex-end;
  text-decoration:none;color:#EDE9E2;
}
.lw .panel img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.02);transition:transform .9s cubic-bezier(.2,.7,.2,1);
  filter:brightness(.86);
}
.lw .panel:hover img,.lw .panel:focus-visible img{transform:scale(1.07)}
/* 上は軽く、下は深く。文字が乗るのは下だけなので、写真の抜けを殺さない。 */
.lw .panel::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(8,7,6,.62) 0%,rgba(8,7,6,.12) 26%,
    rgba(8,7,6,.72) 62%,rgba(8,7,6,.95) 100%);
}
.lw .p-in{position:relative;z-index:1;padding:clamp(1.5rem,2.4vw,2.2rem)}
.lw .p-n,.lw .p-live{
  position:absolute;top:clamp(1.2rem,2vw,1.8rem);z-index:1;
  font-family:var(--mono);text-transform:uppercase;
}
.lw .p-n{left:clamp(1.5rem,2.4vw,2.2rem);font-size:.62rem;letter-spacing:.22em;color:rgba(237,233,226,.75)}
.lw .p-live{
  right:clamp(1.5rem,2.4vw,2.2rem);font-size:.55rem;letter-spacing:.14em;
  color:#E0B86A;border:1px solid rgba(224,184,106,.45);border-radius:999px;padding:.22rem .6rem;
}
.lw .panel h3{
  font-family:var(--display);font-variation-settings:"wdth" 90;font-weight:670;
  font-size:clamp(1.35rem,2.1vw,1.85rem);line-height:1.05;letter-spacing:-.03em;
  margin:0 0 .7rem;color:#EDE9E2;text-wrap:balance;
  text-shadow:0 2px 24px rgba(0,0,0,.6);
}
/* 問題は冷たい灰、解決は本文色。タイルのときと同じ配色の約束。 */
.lw .p-prob{display:flex;gap:.5rem;font-size:.83rem;line-height:1.45;color:#9AA4AB;margin:0 0 .5rem}
.lw .p-prob::before{content:"✕";flex:none;font-size:.74rem;line-height:1.6;color:#7E8890}
.lw .p-sol{font-size:.87rem;line-height:1.5;color:rgba(237,233,226,.94);margin:0 0 1.1rem}
.lw .p-addon{font-size:.72rem;line-height:1.4;color:rgba(237,233,226,.62);margin:-.7rem 0 1.1rem}
.lw .p-foot{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  border-top:1px solid rgba(237,233,226,.2);padding-top:.9rem;
}
.lw .p-price{font-family:var(--mono);font-size:1.05rem;color:#E0B86A}
.lw .p-price i{font-style:normal;font-size:.62rem;color:rgba(237,233,226,.55);margin-left:.25rem}
.lw .p-go{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(237,233,226,.9);white-space:nowrap;
}
.lw .panel:hover .p-go,.lw .panel:focus-visible .p-go{color:#E0B86A}
.lw .panel:focus-visible{outline:2px solid #E0B86A;outline-offset:-3px}

@media(max-width:900px){
  /* 横スワイプはやめて縦積み。壁の見え方は保ちつつ、1面ずつ読ませる。 */
  .lw .panels{grid-template-columns:1fr}
  .lw .panel{min-height:62vh}
}
@media(prefers-reduced-motion:reduce){
  .lw .panel img{transition:none}
  .lw .panel:hover img{transform:scale(1.02)}
}

/* ============================================================
   製品セクションの見出し：縦積み（2026-08-11）

   中央揃えの見出し＋段落をやめ、左揃えのアナフォラに変更。
   繰り返しを消すのではなく「型」として見せるのが狙いなので、
   1行1文で必ず改行する（text-wrap:balance は無効化すること。
   放っておくと行長を揃えようとして積み上げが崩れる）。

   最後の em だけ金。ここが落ちなので、色を変えるのはこの1行だけ。
   ============================================================ */
.lw .store-head--stack{
  text-align:left;
  margin-inline:0;
  max-width:none;
}
/* ⚠️ .store-eyebrow は <p> なので、あとに来る .store-head p
   （margin:1.25rem auto 0; max-width:46ch）に負けて中央に寄る。
   セレクタの詳細度で上書きし、margin と max-width を両方リセットする。 */
.lw .store-head--stack .store-eyebrow{margin:0 0 1.6rem;max-width:none}
.lw .store-head--stack h2{
  margin:0;
  max-width:none;
  text-wrap:normal;            /* balance だと積み上げが崩れる */
  font-size:clamp(2.2rem,5.4vw,4.4rem);
  line-height:.98;
  letter-spacing:-.04em;
  font-variation-settings:"wdth" 90;
}
.lw .store-head--stack h2 em{
  font-style:normal;
  display:block;
  color:var(--money);          /* .lw では #8A6A28。白地で読める深い金 */
}
/* 見出しの下に短い罫を1本。壁が始まる前の「間」をつくる。 */
.lw .sh-rule{
  height:1px;background:var(--hairline);
  margin-top:clamp(1.4rem,3vh,2rem);
  max-width:14ch;
}

@media(max-width:640px){
  .lw .store-head--stack h2{font-size:clamp(1.9rem,9vw,2.6rem)}
}

/* ============================================================
   #simple — 「その夜に必要なものだけ」（2026-08-11）

   開示ルールで実画面を出せないので、簡潔さは "画面に出ているものを
   数える" ことで示す。3項目のあとに「and nothing else.」で落とす。
   リストそのものが主張なので、装飾は罫1本だけに留める。
   ============================================================ */
#simple .only-list{
  margin:clamp(2.5rem,5vh,3.5rem) 0 clamp(2.5rem,5vh,3.5rem);
  padding-top:clamp(1.6rem,3vh,2.2rem);
  border-top:1px solid var(--hairline);
  max-width:44ch;
}
#simple .only-k{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--faint);margin:0 0 1.1rem;
}
#simple .only-list ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
#simple .only-list li{
  font-family:var(--display);font-variation-settings:"wdth" 92;font-weight:640;
  font-size:clamp(1.15rem,2vw,1.6rem);letter-spacing:-.025em;line-height:1.2;
  color:var(--text);
}
#simple .only-end{
  margin:.9rem 0 0;font-family:var(--display);font-variation-settings:"wdth" 92;
  font-weight:640;font-size:clamp(1.15rem,2vw,1.6rem);letter-spacing:-.025em;
  color:var(--money);
}

/* 引用は主張の証拠なので、装飾ではなく落ちとして大きく置く。 */
/* 2026-08-16：引用をひとまわり大きくした。ここはページで唯一の
   「他人の言葉」で、しかも機械がいちばん苦手なスタッフの言葉。
   周りの本文と同じ重さで置くと、ただの補足に見えていた。 */
#simple .use-quote{
  margin:0;padding-top:clamp(2.2rem,4.5vh,3.2rem);
  border-top:1px solid var(--hairline);max-width:20em;
}
#simple .use-quote .q{
  font-family:var(--display);font-variation-settings:"wdth" 92;font-weight:680;
  font-size:clamp(2rem,4.8vw,3.4rem);line-height:1.14;letter-spacing:-.035em;
  color:var(--text);margin:0 0 1.4rem;text-wrap:balance;
}
#simple .use-quote .q em{font-style:normal;color:var(--money)}
#simple .use-quote .cite{margin:0;color:var(--muted);font-size:.92rem;line-height:1.6}

/* #simple は見出しも左。中央の見出し → 左のリスト、で軸がずれていた。
   「余計なものを出さない」という主張の節なので、組みも一本の軸に揃える。
   （.lw .sec-head は中央寄せなので、ここで打ち消す） */
/* ⚠️ `.lw #simple` ではなく `#simple.lw`。この節は .lw を「持っている」
   側であって、.lw の中にあるわけではない。子孫セレクタでは一致しない。 */
#simple.lw .sec-head{text-align:left;margin-inline:0;max-width:none}
#simple.lw .sec-head h2{margin-inline:0;max-width:16ch;text-align:left}
#simple.lw .sec-head .lead{margin-inline:0;max-width:52ch;text-align:left}
#simple.lw .sec-head .eyebrow{justify-content:flex-start}

/* ============================================================
   カード復帰後の写真拡大（2026-08-12）

   カード → ポスターの壁 → カード、と一周した。壁は情報（機能タグ・
   See pricing）を落としてしまったので戻したが、壁で得た「写真の
   大きさ」は捨てない。4/3 → 1/1 で写真の面積が約1.33倍になる。

   3枚目だけ 21/9 にしていた古い媒体クエリは、比率が揃わなくなるので
   打ち消す。
   ============================================================ */
.lw .tile-shot{aspect-ratio:1/1}
@media(max-width:1100px){
  .lw .store-grid .tile:nth-child(3) .tile-shot{aspect-ratio:1/1}
}
@media(max-width:640px){
  /* 縦積み（実際は横スワイプ）では正方形だと写真が画面を占有しすぎる。
     ⚠️ 3枚目を明示的に含めること。上の max-width:1100px の
        `.lw .store-grid .tile:nth-child(3) .tile-shot` は詳細度 (0,4,0) で、
        `.lw .tile-shot` の (0,2,0) より強い。両方のクエリが一致する
        スマホ幅では、後に書いてあっても3枚目だけ 1/1 のまま残り、
        写真の高さが 255px と 340px で 85px ずれる（実機で発覚
        2026-08-14）。詳細度を揃えて初めて打ち消せる。 */
  .lw .tile-shot,
  .lw .store-grid .tile:nth-child(3) .tile-shot{aspect-ratio:4/3}
}

/* 価格表の下の注記（2026-08-12）。条件はリードから降ろしてここへ。
   本文より一段落として、表を読み終えた人だけが拾う位置に置く。 */
.lw .price-terms{
  margin:clamp(1.6rem,3vh,2.2rem) auto 0;
  max-width:60ch;text-align:center;
  font-size:.82rem;line-height:1.6;color:var(--faint);
}

/* ヒーローの主張行（2026-08-12・V2）。
   h1 はカテゴリを名乗り、その直下でこの一行が「何が違うか」を言う。
   見出しより小さく、リードより大きい——3段の中間として置く。 */
.scene-hero .hero-claim{
  font-size:clamp(1.05rem,1.5vw,1.35rem);
  font-weight:500;line-height:1.5;letter-spacing:-.01em;
  max-width:38ch;
  /* 2026-08-12：見出しと詰まって1つの塊に見えていたので間を空ける。
     大文字の見出しは下辺が揃うぶん、小文字より次の行が近く見える。 */
  margin:clamp(1.1rem,2.2vh,1.6rem) 0 clamp(1rem,2vh,1.4rem);
  color:rgba(237,233,226,.94);
  text-shadow:0 1px 18px rgba(6,6,5,.85);
}

/* 実績：ロゴ画像が無い会場は名前を組み文字で置く（2026-08-12） */
.proof-venue .venue-name{
  font-family:var(--display);font-variation-settings:"wdth" 92;font-weight:660;
  font-size:1.15rem;letter-spacing:-.02em;margin:.1rem 0 .4rem;color:var(--text);
}

/* 実績：ロゴ画像が無い会場は名前を組み文字で置く（2026-08-12） */
.proof-venue .venue-name{
  font-family:var(--display);font-variation-settings:"wdth" 92;font-weight:660;
  font-size:1.2rem;letter-spacing:-.02em;margin:.1rem 0 .4rem;color:var(--text);
}

/* ============================================================
   実績セクションの背景（2026-08-12）

   汎用写真から、語っている当の会場の実写（満員の ZOUK TOKYO）に
   差し替えたのに伴う調整。app.css の .bg-photo は「本文の背後に敷く
   写真」用にかなり強く沈める設定なので、そのままだと赤い霞になり、
   実写を使う意味——本当に満員の実在の店だと分かること——が消える。

   写真は見せる。読ませるのはコピーの真下だけを暗くして担保する。
   ============================================================ */
#proof .bg-photo{opacity:1}
#proof .bg-photo img{filter:brightness(.5) contrast(1.05) saturate(.92)}
#proof .bg-photo::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(70% 55% at 50% 42%,rgba(8,7,6,.86),rgba(8,7,6,.5) 60%,rgba(8,7,6,.25) 100%),
    linear-gradient(180deg,rgba(8,7,6,.85),transparent 26%,transparent 70%,rgba(8,7,6,.9));
}

/* ============================================================
   フッター最下段の「powered by ON THE LISTS」（2026-08-12）

   旧 poweredby-ltgray.png をやめ、本物のロゴ（onthelists-white.png、
   ヘッダーと同じもの）＋「powered by」の組み文字に分けた。

   旧画像を捨てた理由は2つ。
   (1) 明るい地に置く前提の絵柄で、文字の縁に影が焼き込んである。
       黒地（--ink）だと影が灰色のにじみになり、拡大するほど濁る。
   (2) 綴りが "ON THE LIST"（単数）。ブランド名は LISTS で食い違う。
       onthelists-white.png は正しく LISTS になっている。

   ⚠️ 大きさを下げないこと。このロゴはヘアラインで描かれていて、
      60px を切ると線が1px を割り、THE を囲む金の罫線が潰れて
      ただの霞になる。26px だった頃はロゴが小さかったのではなく、
      ロゴが見えていなかった。84px はそのための下限に近い値。

   ⚠️ 日本語版 index.html にも同じブロックがある（あちらは store.css
      を読まないのでページ内 <style> に複製）。片方だけ直すと2言語で
      ズレる。必ず両方直すこと。
   ============================================================ */
.powered{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(.9rem,2vw,1.4rem);
  margin:0;line-height:1;
}
.powered .pw-pre{
  font-size:clamp(.7rem,1.3vw,.82rem);letter-spacing:.26em;
  color:var(--gold);white-space:nowrap;
}
.powered .pw-logo{height:clamp(68px,7vw,84px);width:auto;display:block}

/* 横並びのままだと狭い画面で入らない。縮めるとロゴが潰れるので、
   縮めるのではなく縦に積む。こうすれば 320px でも 69px を保てる。 */
@media(max-width:640px){
  .powered{flex-direction:column;gap:.9rem}
  .powered .pw-logo{height:auto;width:min(72vw,260px)}
}

/* ============================================================
   料金：積み上げ式プラン（2026-08-13）

   「3製品を並べて好きに買う」から「下を含んだ3段」に変えた。
   VIP を採るならドアは必ず付いてくる、という売り方に合わせたもの。

   ⚠️ 大小の区分（1日の来場者数）は Door 段にしか付けない。
      区分の根拠はドアの負荷なので、テーブルを売る規模の会場では
      意味を持たない——というユーザー判断。上の段は一律料金。

   ⚠️ 初期費用は「会場につき1回」。段ごとに取らない。
      段ごとに取ると、Floor を選んだ会場が Door 分と二重に払う形になる。
   ============================================================ */

/* 「Door のすべて＋」の帯。カード上端で段の包含関係を示す。 */
.price .incl{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--money);margin:0 0 .8rem;padding-bottom:.8rem;
  border-bottom:1px solid var(--hairline-warm);
}

/* Door 段だけの2バンド表示。.amt を2つ並べると数字が競うので、
   ラベルと金額を1行に組んで高さを抑えている。 */
.price .band-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:.55rem 0;border-bottom:1px solid var(--hairline);
}
.price .band-row:last-of-type{border-bottom:0}
.price .band-row .bl{font-size:.82rem;color:var(--muted)}
.price .band-row .bv{font-family:var(--mono);font-size:1.45rem;color:var(--text)}
.price .band-row .bv small{font-size:.8rem;color:var(--faint)}

/* 単発イベントは段ではないので、グリッドの外に横長1枚で置く。 */
.price.oneoff{margin-top:1rem}

/* ============================================================
   価格の比較表（2026-08-13）

   カード＝いくらか／表＝何が入っているか、に分けた。積み上げを
   文章（"Includes Product 01 in full"）で言うのをやめ、列が下から
   埋まる形で見せている。カード側の .stk チップも同じ役割で、
   その段までを点灯させる。
   ⚠️ 経緯と各指定の理由は _pricing-matrix.html のコメントに残した。
   ============================================================ */
  /* ---------- 比較表 --------------------------------------------
     横スクロールは wrapper 側に持たせる。テーブル自体に overflow を
     かけると sticky なヘッダが効かなくなる。 -------------------- */
  /* ⚠️ overflow-x:auto をデスクトップで常時かけないこと。overflow を持つ
     祖先はスクロールコンテナになり、中の sticky が縦方向に効かなくなる
     （ヘッダが表と一緒に流れて消える）。表はデスクトップでは収まるので、
     横スクロールは狭い画面だけに限定する。 */
  .cmp-wrap{margin-top:2.4rem}
  /* ⚠️ border-collapse:collapse と sticky な thead は Chrome で噛み合わず、
     固定ヘッダが直後の行に重なって1行分を隠す。separate にして、罫線は
     セルの border-bottom で引く（見た目は同じ）。 */
  .cmp{width:100%;min-width:660px;border-collapse:separate;border-spacing:0;text-align:left}
  /* 表題は読み上げ専用。見出しは上の .sec-head が既に言っている。 */
  .cmp-cap{position:absolute;width:1px;height:1px;overflow:hidden;
           clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

  /* ヘッダは列を見失わないよう固定する。20行あると、スクロールした
     時点でどの列が Product 02 なのか分からなくなるため。
     top は固定ナビの高さぶん下げる。本番の .nav は 76px（v2.css:165）。
     ここを実際のバーより小さくすると、バーとヘッダの隙間に本文が覗く。 */
  .cmp{--cmp-top:76px}
  .cmp thead th{
    position:sticky;top:var(--cmp-top);z-index:5;background:var(--ink-2);
    padding:1rem .9rem;vertical-align:bottom;
    border-bottom:1px solid var(--hairline-warm);
  }
  .cmp thead th:first-child{width:42%}
  .cmp .cmpc-n{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;
             text-transform:uppercase;color:var(--faint);display:block}
  .cmp .cmpc-name{font-size:.95rem;font-weight:600;color:var(--text);
                display:block;margin-top:.25rem;line-height:1.3}
  .cmp .cmpc-price{font-family:var(--mono);font-size:.8rem;color:var(--money);
                 display:block;margin-top:.4rem}

  /* 群の見出し行。「この塊はどの製品から入ってくるか」をここで言う。
     カード側の "Includes Product 01 in full" を消せるのはこの行のおかげ。 */
  .cmp .grp td{
    padding:1.6rem .9rem .5rem;font-family:var(--mono);font-size:.68rem;
    letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
  }
  .cmp .grp td b{color:var(--text);font-weight:500}
  .cmp tbody th{
    font-weight:400;font-size:.92rem;color:var(--text);
    padding:.62rem .9rem;border-bottom:1px solid var(--hairline);
  }
  .cmp tbody td{
    padding:.62rem .9rem;border-bottom:1px solid var(--hairline);
    text-align:center;width:19.3%;
  }
  /* 群の見出しは行見出しと同じ左端に揃える。tbody td の中央寄せを継ぐと
     チェックの列に混ざって、見出しに見えなくなる。 */
  .cmp .grp td{border-bottom:0;text-align:left}
  .cmp .yes svg{stroke:var(--money);vertical-align:middle}
  /* 「入っていない」は赤や × にしない。買えない印ではなく、上の段に
     あるという意味なので、線を1本引くだけに留める。 */
  .cmp .no{color:var(--faint);font-family:var(--mono)}

  /* 推奨列。カードの .featured と同じ列に薄い面を通すと、上のカードと
     下の表が同じものを指していることが目で繋がる。 */
  .cmp .col-hi{background:var(--fill)}
  .cmp thead th.col-hi{background:var(--surface-2)}

  .cmp tfoot td,.cmp tfoot th{
    padding:1rem .9rem;font-size:.85rem;color:var(--muted);
    border-top:1px solid var(--hairline-warm);
  }
  .cmp tfoot td{text-align:center;font-family:var(--mono);font-size:.8rem;color:var(--text)}

  /* ---------- カードの「入っているアプリ」表示 --------------------
     指摘（2026-08-13）：カードを見ても Product 02 に「入場カウント＋
     ゲストリスト」が入っていること、03 が全部入りであることが分からない。
     製品名（VIP Table Management）は、その製品が何をするかは言うが、
     下に何を含んでいるかは言わないため。

     3枚とも同じ3つのチップを出し、その段までを点灯させる。
     カード単体で読んでも「どこまで入っているか」が分かり、3枚を横に
     見れば積み上がっていく形がそのまま見える。
     ⚠️ 消灯側も必ず出すこと。点いているものだけ並べると、それが全部
        なのか、上にまだあるのかが判別できない。 -------------------- */
  .stk-lbl{
    font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
    text-transform:uppercase;color:var(--faint);margin:0 0 .5rem;
  }
  /* 横並び（flex-wrap）にすると、カードごとに折り返し位置が変わって
     3枚の行がずれ、横に見比べられなくなる。1行1つで縦に積む。 */
  .stk{
    list-style:none;padding:0;margin:0 0 1.1rem;
    display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;
  }
  .stk li{
    font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;
    border-radius:var(--r-sm);padding:.34rem .6rem;
    display:inline-flex;align-items:center;gap:.35rem;
  }
  .stk .on{color:var(--text);border:1px solid var(--hairline-warm);background:var(--fill)}
  .stk .on svg{stroke:var(--money)}
  /* 消灯は破線。実線で薄くすると「入っている（が控えめ）」に見える。 */
  .stk .off{color:var(--faint);border:1px dashed var(--hairline)}
  /* 読み上げ専用。チップの点灯／消灯は色と枠でしか差が出ないため。 */
  .vh{position:absolute;width:1px;height:1px;overflow:hidden;
      clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

  /* 初期費用ブロック。左に金額、右に中身。金額だけ・中身だけを別々に
     置くと、また「何の金額か」が離れるので必ず横並びで持たせる。 */
  .onb{margin-top:1.4rem}
  .onb-grid{
    display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
    gap:1.6rem 2.4rem;margin-top:1rem;
  }
  .onb .feat-points{margin:0}
  @media (max-width:760px){
    .onb-grid{grid-template-columns:1fr}
    /* 狭い画面では横スクロール。ここでは sticky を切る（上記の理由で
       どのみち効かないため、静的にして重なりを避ける）。 */
    .cmp thead th{position:static}
    .cmp-wrap{
      overflow-x:auto;-webkit-overflow-scrolling:touch;
      margin-inline:calc(-1 * var(--pad));padding-inline:var(--pad);
    }
  }

/* ============================================================
   #proof：1都市1枚のカード（2026-08-14）

   経緯：旧構成は左に会場カード（東京→SG の縦積み）、右に数字タイルの
   横並び。会場は縦、数字は横に読ませていたので対応が取れず、
   「どの数字がどの会場か分からない」とユーザー指摘。SG の 2,000+ を
   足した時点で表面化した。

   ⚠️ .proof-venue / .metrics は #proof の下側（ストアフロント）で
      まだ使っている。このブロックはそれとは別物なので、片方を消す
      ときにもう片方を巻き込まないこと。
   ⚠️ #proof は .lw ではない（暗い側のセクション）。トークンは
      そのまま使える。
   ============================================================ */
.vcards{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem}
.vcard{
  border:1px solid var(--hairline);background:var(--fill);
  border-radius:var(--radius);padding:2rem 1.9rem;text-align:center;
}
.vcard .loc{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.24em;
  color:var(--faint);text-transform:uppercase;margin:0;
}
.vcard .venue-name{font-size:1.55rem;font-weight:600;color:var(--text);margin:.5rem 0 .35rem}
.vcard .st{color:var(--muted);font-size:.85rem;margin:0}
/* 数字は必ずカードの中。共通の数字置き場を作ると元の問題が戻る。 */
.vcard .vnum{margin-top:1.5rem;padding-top:1.4rem;border-top:1px solid var(--hairline)}
.vcard .vnum .v{
  font-family:var(--mono);font-size:2.7rem;font-weight:300;color:var(--money);
  line-height:1;font-variant-numeric:tabular-nums;
}
.vcard .vnum .k{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--faint);margin-top:.5rem;
}
.vnote{text-align:center;color:var(--muted);font-size:.9rem;margin:1.5rem auto 0;max-width:60ch}
.vnote b{color:var(--text);font-weight:500}

/* 狭い画面では積む。2列のまま縮めると 2,000+ が折り返す。 */
@media(max-width:760px){
  .vcards{grid-template-columns:1fr}
  .vcard{padding:1.7rem 1.4rem}
  .vcard .vnum .v{font-size:2.3rem}
}

/* ============================================================
   比較表：スマホでは横スクロールをやめる（2026-08-14）

   指摘：「横にスクロールするのが嫌」「情報が多すぎる」。実機で確認して
   そのとおりだった。23行×4列を 390px に押し込めば、必ず横スクロールに
   なる。

   ⚠️ ここで効いている事実：✓ の付き方はグループ見出しで完全に決まる。
      「ドアで — Product 01 から」＝3列とも ✓
      「テーブルとボトル — Product 02 で追加」＝01 は −、02・03 が ✓
      「サイト＆オンライン販売 — Product 03 で追加」＝03 だけ ✓
      つまり列は、見出しが既に言っていることを23回繰り返しているだけ。
      スマホでは列を消しても情報は1つも失われない。だから消す。

   ⚠️ tfoot（初期費用）だけは列ごとに金額が違うので消せない……が、すぐ下の
      .onb ブロックが同じ3つの金額を再掲しているため、スマホでは重複になる。
      よって tfoot も隠す。.onb を消すときはここも戻すこと。
   ⚠️ マークアップは共通。英語版・日本語版どちらにも効く。
   ============================================================ */
@media(max-width:760px){
  .cmp-wrap{overflow-x:visible;margin-inline:0;padding-inline:0}
  /* ⚠️ min-width:0 が要る。上の .cmp は min-width:660px を持っていて、
     display:block にしただけでは横スクロールが残る（実機で確認）。 */
  .cmp{display:block;width:100%;min-width:0;border-collapse:collapse}
  .cmp thead,.cmp tfoot{display:none}
  .cmp tbody{display:block}
  .cmp tr{display:block}
  .cmp tbody td{display:none}          /* ✓ と − の列 */

  .cmp-cap{
    display:block;text-align:left;padding:0 0 .2rem;
    font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;
    text-transform:uppercase;color:var(--faint);
  }
  /* グループ見出し＝どの製品から入るか。ここだけが列の代わり。 */
  .cmp tr.grp{display:block;margin:1.6rem 0 .1rem}
  .cmp tr.grp td{
    /* ⚠️ width:auto が要る。群見出しも tbody の td なので、
       .cmp tbody td{width:19.3%} を継いで 72px まで潰れ、
       「テーブルと／ボトル ―／PRODUCT／02 で追加」と4行に割れる。 */
    display:block;width:auto;padding:0 0 .5rem;border:0;
    border-bottom:1px solid var(--hairline);
    font-size:.78rem;letter-spacing:.02em;color:var(--muted);
  }
  .cmp tr.grp td b{color:var(--money);font-weight:600}
  /* 機能行：チェックは行頭の1つだけにする */
  .cmp tbody th[scope="row"]{
    display:block;width:auto;padding:.62rem 0 .62rem 1.45rem;
    border-bottom:1px solid var(--hairline);
    font-weight:400;font-size:.9rem;line-height:1.55;
    text-align:left;position:relative;
  }
  .cmp tbody th[scope="row"]::before{
    content:"";position:absolute;left:.15rem;top:1.02em;
    width:.42rem;height:.42rem;border-radius:50%;
    background:var(--money);opacity:.75;
  }
}


/* 問い合わせ節：メールアドレスを文字としても出す（2026-08-15）
   ⚠️ mailto のボタンだけにしないこと。社用PCやWebメール運用だと
      メーラーが開かず、連絡先が画面から消える。 */
.mailto-line{
  margin:1.4rem 0 0;font-size:.92rem;color:var(--muted);
}
.mailto-line a{
  color:var(--money);text-decoration:none;
  border-bottom:1px solid rgba(224,184,106,.4);
  font-family:var(--mono);font-size:.94em;
}
.mailto-line a:hover{border-bottom-color:var(--money)}

/* 「それ以外は、何も。」の直後に置く、対の一文（2026-08-16）。
   オペレーション中に出るのは3つだけ、という主張への当然の反論
   （「じゃあ数字はどこに？」）を、時間軸で受ける。
   ⚠️ display 書体にしないこと。上のリストと同じ重さになると
      「4つ目の項目」に見えて、主張そのものが崩れる。
   ⚠️ 金色は .only-end（落ち）が持っている。ここを金にしない。 */
#simple .only-after{
  margin:1.4rem 0 0;max-width:40ch;
  font-size:.95rem;line-height:1.7;color:var(--muted);
}
#simple .only-after b{color:var(--text);font-weight:600}

/* 2026-08-22：#proof のドメインのチップをリンクにした（旧 <span>）。
   <a> は色を継承しないので、チップの色をここで明示している。
   飛び先と別タブは下の「ストアフロントを見る →」と同じ。 */
.chip-link{
  display:inline-flex;align-items:center;
  color:var(--muted);text-decoration:none;
  transition:border-color .2s,color .2s;
}
.chip-link:hover{color:var(--text);border-color:var(--money)}
.chip-link:focus-visible{outline:2px solid var(--money);outline-offset:2px}