/* franchiseworld.app (v2, 09.11.2026). Source of truth; build.mjs copies it (content-hashed) to the preview.
   No inline styles, one self-hosted font (Nunito Sans, SIL OFL, same face as the game), one small own script (site.js:
   video play/pause). Design reference: Google Stitch project "Franchise World Website" (warm toy look of the game).
   Brand colours come from the game theme (franchise_world/lib/app/theme.dart): cream, coral, sun, sky, mint, night.
   Colour tokens are checked for WCAG contrast by verify.mjs (keep the PAIRS list there in sync). */
@font-face {
  font-family: "Nunito Sans";
  src: url("/assets/NunitoSans-latin.e71ce02df4.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
:root {
  color-scheme: light dark;
  --bg: #fff6e6;
  --bg-2: #ffeccd;
  --ink: #2a2220;
  --muted: #55484a;
  --tile: #ffffff;
  --edge: #8a7f68;
  --soft-edge: #eadcc0;
  --link: #a22d1b;
  --focus: #2a2220;
  --accent: #b3321f;
  --on-accent: #ffffff;
  --chip: #ffc93c;
  --on-chip: #2a2220;
  --store: #2a2220;
  --on-store: #fff6e6;
  --band: #141a2e;
  --on-band: #f6f0e6;
  --band-muted: #c9cfe3;
  --mint: #b7ecda;
  --sky: #9ad5f3;
  --sun: #ffc93c;
  --coral: #ef5b4d;
  --ok: #176b3b;
  --shadow: 0 0.75rem 2rem -0.75rem rgb(90 55 20 / 0.18), 0 0.0625rem 0.1875rem rgb(90 55 20 / 0.08);
  --shadow-lg: 0 1.5rem 3rem -1rem rgb(90 55 20 / 0.26), 0 0.125rem 0.375rem rgb(90 55 20 / 0.08);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0f1e;
    --bg-2: #141a2e;
    --ink: #f6f0e6;
    --muted: #c3c9de;
    --tile: #18203a;
    --edge: #6a7cb4;
    --soft-edge: #26325a;
    --link: #ffc93c;
    --focus: #ffc93c;
    --accent: #ffc93c;
    --on-accent: #0b0f1e;
    --chip: #ffc93c;
    --on-chip: #0b0f1e;
    --store: #f6f0e6;
    --on-store: #141a2e;
    --band: #050812;
    --on-band: #f6f0e6;
    --band-muted: #c3c9de;
    --mint: #1d4b44;
    --sky: #1d3a5c;
    --sun: #ffc93c;
    --coral: #ff8a7f;
    --ok: #4be08e;
    --shadow: 0 1.25rem 2.5rem -1rem rgb(0 0 0 / 0.7), inset 0 0.0625rem 0 rgb(255 255 255 / 0.06);
    --shadow-lg: 0 2rem 4rem -1.25rem rgb(0 0 0 / 0.8);
  }
}

@media (min-width: 120rem) { html { font-size: 125%; } }
@media (min-width: 180rem) { html { font-size: 150%; } }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); scroll-padding-top: 9rem; }
@media (min-width: 56rem) { html { scroll-padding-top: 6rem; } }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  background: var(--bg);
  font-family: "Nunito Sans", ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-wrap: break-word;
  padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
}
:lang(ja) body, body:lang(ja) { line-break: strict; }
:lang(ko) body, body:lang(ko) { word-break: keep-all; }
:lang(ja) h1, :lang(ja) h2, :lang(ja) h3, :lang(ja) .lead { word-break: auto-phrase; }
h1, h2, h3, p, figure { margin: 0; }
img, video, svg { display: block; max-width: 100%; }
a { color: var(--link); text-underline-offset: 0.25em; text-decoration-thickness: 0.07em; }
a:hover { text-decoration-thickness: 0.14em; }
:focus-visible { outline: 0.1875rem solid var(--focus); outline-offset: 0.25rem; border-radius: 0.375rem; }
.band :focus-visible, .site-footer :focus-visible { outline-color: var(--sun); }
.skip { position: absolute; left: 0.75rem; top: -5rem; z-index: 30; background: var(--accent); color: var(--on-accent); padding: 0.75rem 1rem; border-radius: 0.5rem; font-weight: 800; }
.skip:focus { top: calc(env(safe-area-inset-top) + 0.75rem); }
.wrap { width: min(100% - 2rem, 76rem); margin-inline: auto; }
@media (min-width: 48rem) { .wrap { width: min(100% - 4rem, 76rem); } }
@media (min-width: 100rem) { .wrap { width: min(100% - 8rem, 88rem); } .stage { width: min(100%, 40rem); } }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 88%, transparent); border-bottom: 0.0625rem solid var(--soft-edge); padding-top: env(safe-area-inset-top); }
@supports (backdrop-filter: blur(1px)) { .site-header { backdrop-filter: saturate(1.4) blur(0.75rem); } }
.bar { display: flex; align-items: center; gap: 0.5rem 1rem; min-height: 4rem; flex-wrap: wrap; padding-top: 0.5rem; }
@media (min-width: 56rem) { .bar { padding-top: 0; } }
.brand { display: inline-flex; align-items: center; gap: 0.625rem; min-height: 2.75rem; color: var(--ink); text-decoration: none; font-weight: 900; font-size: 1.1875rem; letter-spacing: -0.01em; margin-right: auto; }
.brand svg { width: 2.5rem; height: 2.5rem; flex: none; }
.nav { order: 3; width: 100%; }
.nav ul { list-style: none; margin: 0; padding: 0 0 0.25rem; display: flex; gap: 0.25rem; overflow-x: auto; scrollbar-width: none; }
.nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; min-width: 2.75rem; padding-inline: 0.75rem; border-radius: 999px; color: var(--ink); text-decoration: none; font-weight: 800; white-space: nowrap; }
.nav a:hover { background: var(--bg-2); }
.nav a[aria-current="page"] { background: var(--chip); color: var(--on-chip); }
@media (min-width: 56rem) { .nav { order: 0; width: auto; } .nav ul { padding: 0; } }
.lang { position: relative; }
.lang summary { list-style: none; display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2.75rem; padding-inline: 0.75rem; border: 0.0625rem solid var(--edge); border-radius: 999px; font-weight: 800; cursor: pointer; }
.lang summary::-webkit-details-marker { display: none; }
.lang summary svg { width: 1.125rem; height: 1.125rem; }
.lang ul { position: absolute; right: 0; top: calc(100% + 0.5rem); z-index: 25; list-style: none; margin: 0; padding: 0.5rem; min-width: 12rem; background: var(--tile); border: 0.0625rem solid var(--edge); border-radius: 1rem; box-shadow: var(--shadow-lg); }
.lang li a, .lang li span { display: flex; align-items: center; min-height: 2.75rem; padding-inline: 0.75rem; border-radius: 0.625rem; color: var(--ink); text-decoration: none; font-weight: 700; }
.lang li a:hover { background: var(--bg-2); }
.lang li span { color: var(--muted); }
.lang li span::after { content: " ✓"; }
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.5rem 1.125rem; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-weight: 900; text-decoration: none; box-shadow: 0 0.25rem 0 color-mix(in srgb, var(--accent) 60%, #000); }
.pill:hover { filter: brightness(1.08); }
@media (max-width: 33.99rem) { .bar > .pill { display: none; } }
@media (max-width: 22.5rem) { .brand { font-size: 1rem; gap: 0.5rem; } .brand svg { width: 2rem; height: 2rem; } .lang summary { padding-inline: 0.5rem; } .nav a { padding-inline: 0.5rem; font-size: 0.9375rem; } .nav ul { gap: 0; } }

/* ---------- hero ---------- */
main { flex: 1; }
.hero { position: relative; overflow: hidden; padding-block: clamp(2rem, 6vw, 5rem) clamp(2.5rem, 6vw, 5rem); background:
  radial-gradient(48rem 32rem at 100% 0%, color-mix(in srgb, var(--sky) 60%, transparent), transparent 70%),
  radial-gradient(40rem 28rem at 0% 100%, color-mix(in srgb, var(--mint) 70%, transparent), transparent 70%),
  linear-gradient(180deg, var(--bg), var(--bg-2)); }
.hero .wrap { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; grid-template-columns: minmax(0, 1fr); }
.hero .wrap { grid-template-areas: "copy" "stage" "actions"; row-gap: 1.5rem; }
.hero-copy { grid-area: copy; text-align: center; }
.hero-actions { grid-area: actions; text-align: center; }
.stage { grid-area: stage; }
@media (min-width: 60rem) {
  .hero .wrap { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); grid-template-areas: "copy stage" "actions stage"; grid-template-rows: auto 1fr; row-gap: 0; }
  .hero-copy, .hero-actions { text-align: left; }
  .hero-copy { align-self: end; }
  .hero-actions { align-self: start; }
}
.hero h1 .eyebrow { display: table; margin: 0 auto 1rem; line-height: 1.3; }
@media (min-width: 60rem) { .hero h1 .eyebrow { margin-left: 0; } }
.h1-main { display: block; }
.eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.875rem; border-radius: 999px; background: var(--chip); color: var(--on-chip); font-weight: 900; font-size: 0.875rem; letter-spacing: 0.04em; text-transform: uppercase; }
:lang(ja) .eyebrow, :lang(ko) .eyebrow { text-transform: none; letter-spacing: 0; }
.hero h1 { margin-top: 0; font-size: clamp(2.25rem, 6.4vw, 4.5rem); font-weight: 900; line-height: 1.04; letter-spacing: -0.03em; text-wrap: balance; }
:lang(ja) .hero h1, :lang(ko) .hero h1 { letter-spacing: 0; line-height: 1.2; font-size: clamp(1.75rem, 5.4vw, 3.75rem); }
@media (max-width: 24rem) { :lang(ko) .lead, :lang(ja) .lead { font-size: 1.0625rem; } }
.lead { margin: 1.25rem auto 0; max-width: 36rem; font-size: clamp(1.125rem, 2vw, 1.375rem); line-height: 1.5; color: var(--muted); font-weight: 600; text-wrap: pretty; }
@media (min-width: 60rem) { .lead { margin-left: 0; } }
.stores { list-style: none; margin: 0 auto;  padding: 0; display: grid; gap: 0.75rem; grid-template-columns: minmax(0, 1fr); max-width: 32rem; }
.stores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 29.99rem) { .store { flex-direction: column; align-items: flex-start; gap: 0.375rem; min-height: 0; padding: 0.625rem 0.75rem; border-radius: 1rem; } .store svg { width: 1.5rem; height: 1.5rem; } .store b { font-size: 0.9375rem; } }
@media (min-width: 60rem) { .stores { margin-left: 0; } .hero-actions .stores { margin-top: 1.75rem; } }
.store { height: 100%; display: flex; align-items: center; gap: 0.875rem; min-height: 4.25rem; padding: 0.75rem 1rem; border-radius: 1.25rem; background: var(--store); color: var(--on-store); text-align: left; box-shadow: var(--shadow); }
.store svg { width: 2rem; height: 2rem; flex: none; }
.store small { display: block; font-size: 0.8125rem; font-weight: 700; opacity: 0.85; line-height: 1.2; }
.store b { display: block; font-size: 1.0625rem; line-height: 1.2; font-weight: 900; }
.store .soon { display: inline-block; margin-top: 0.25rem; padding: 0.0625rem 0.5rem; border-radius: 999px; background: var(--chip); color: var(--on-chip); font-size: 0.8125rem; font-weight: 900; }
/* Live store: the official badge, unchanged and uncropped (badges/README.md). Its transparent padding (de/es/fr/... 76.8 %,
   en 67.2 % of its height visible) gives part of the clear space Google asks for (a quarter of the badge height); the padding of
   the link adds the rest (16rem wide: padding of the PNG about 11 px + 8 px >= a quarter of the 76 px badge). */
.store-live { padding: 0; background: none; box-shadow: none; justify-content: center; }
.store-badge { display: flex; align-items: center; justify-content: center; width: 100%; padding: 0.5rem; border-radius: 0.75rem; }
.store-badge img { display: block; width: 100%; max-width: 16rem; height: auto; }
/* No hover motion on official store badges (Apple marketing guidelines forbid animating the App Store badge). */
.facts { list-style: none; margin: 1.25rem auto 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.25rem; color: var(--muted); font-weight: 700; font-size: 0.9375rem; }
.facts li { display: inline-flex; align-items: center; gap: 0.375rem; }
.facts li::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--ok); flex: none; }
@media (min-width: 60rem) { .facts { justify-content: flex-start; } }
@media (min-width: 60rem) { .hero-actions .facts { margin-top: 1.25rem; } }

/* stage: landscape poster card with the phone video in front (as in the Stitch reference) */
.stage { position: relative; width: min(100%, 34rem); margin-inline: auto; padding-bottom: 2rem; }
.stage-card { width: 82%; margin-left: auto; border-radius: 2rem; overflow: hidden; box-shadow: var(--shadow-lg); border: 0.375rem solid var(--tile); background: var(--mint); }
.stage-card img { width: 100%; height: auto; aspect-ratio: 1280 / 548; object-fit: cover; }
.stage .phone { position: relative; width: 52%; margin-top: -24%; margin-left: 4%; }
@media (max-width: 29.99rem) { .stage { padding-bottom: 0; } .stage-card { display: none; } .stage .phone { width: min(62%, 15rem); margin: 0 auto; } }

/* phone frame around a portrait video or screenshot */
.phone { position: relative; padding: 0.5rem; border-radius: 2.25rem; background: #1d1716; box-shadow: var(--shadow-lg); }
.phone picture, .tablet picture { display: block; }
.phone video, .phone img { display: block; width: 100%; height: auto; aspect-ratio: 540 / 1054; object-fit: cover; border-radius: 1.75rem; background: var(--sky); }
.phone.shot img { aspect-ratio: 1290 / 2796; }
.tablet { padding: 0.625rem; border-radius: 1.75rem; background: #1d1716; box-shadow: var(--shadow-lg); }
.tablet img { display: block; width: 100%; height: auto; aspect-ratio: 2048 / 2732; border-radius: 1.25rem; background: var(--sky); }
.vbtn { position: absolute; right: 1rem; bottom: 1rem; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0.125rem solid #fff; border-radius: 50%; background: rgb(20 26 46 / 0.78); color: #fff; cursor: pointer; }
.vbtn svg { width: 1.125rem; height: 1.125rem; }
.vbtn[hidden] { display: none; }
.vbtn .i-play { display: none; }
.vbtn[data-state="paused"] .i-play { display: block; }
.vbtn[data-state="paused"] .i-pause { display: none; }
.band-video .vbtn { right: 1.25rem; bottom: 1.25rem; }

/* ---------- sections ---------- */
.section { padding-block: clamp(3rem, 8vw, 6rem); }
.section-head { text-align: center; max-width: 44rem; margin: 0 auto clamp(2rem, 4vw, 3rem); }
.section h2 { font-size: clamp(1.75rem, 4.2vw, 2.75rem); font-weight: 900; line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; }
:lang(ja) .section h2, :lang(ko) .section h2 { letter-spacing: 0; line-height: 1.3; }
.section-head p { margin-top: 0.75rem; color: var(--muted); font-size: 1.125rem; }
.alt { background: var(--bg-2); }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); counter-reset: step; }
@media (min-width: 48rem) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.steps li { display: flex; flex-direction: column; gap: 1rem; padding: 1.25rem; border-radius: 2rem; background: var(--tile); box-shadow: var(--shadow); }
.steps .phone { width: min(78%, 15rem); margin: auto auto 0; }
.steps h3 { font-size: 1.3125rem; font-weight: 900; line-height: 1.25; display: flex; gap: 0.625rem; align-items: baseline; }
.steps h3::before { counter-increment: step; content: counter(step); display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2rem; height: 2rem; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: 1rem; }
.steps p { color: var(--muted); }

.features { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .features { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.features li { padding: 1.5rem; border-radius: 1.75rem; background: var(--tile); box-shadow: var(--shadow); }
.features .ico { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 1rem; background: var(--bg-2); color: var(--accent); }
.features .ico svg { width: 1.625rem; height: 1.625rem; }
.features h3 { margin-top: 0.875rem; font-size: 1.1875rem; font-weight: 900; line-height: 1.3; }
.features p { margin-top: 0.375rem; color: var(--muted); }

.band { background: var(--band); color: var(--on-band); }
.band .section-head p { color: var(--band-muted); }
.band-video { position: relative; max-width: 64rem; margin-inline: auto; border-radius: 2rem; overflow: hidden; border: 0.25rem solid rgb(255 255 255 / 0.12); box-shadow: 0 1.5rem 3rem -1.5rem rgb(0 0 0 / 0.5); background: #7fd8b8; }
.band .phone { box-shadow: 0 0 0 0.0625rem rgb(255 255 255 / 0.14), 0 1.5rem 3rem -1.5rem rgb(0 0 0 / 0.5); }
.band-video video { width: 100%; height: auto; aspect-ratio: 1280 / 548; object-fit: cover; }
.clips { list-style: none; margin: clamp(2.5rem, 6vw, 4rem) auto 0; padding: 0; display: grid; gap: 2rem; max-width: 56rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .clips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.clips li { display: grid; gap: 1rem; justify-items: center; align-content: start; text-align: center; }
.clips .phone { width: min(70%, 17rem); }
.clips h3 { font-size: 1.25rem; font-weight: 900; }
.clips p { color: var(--band-muted); max-width: 22rem; }

.gallery h3 { font-size: 1.125rem; font-weight: 900; margin: 0 0 0.75rem; }
.strip { list-style: none; margin: 0 0 2rem; padding: 0.25rem 0.25rem 1rem; display: grid; grid-auto-flow: column; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
.strip li { scroll-snap-align: start; }
.strip.phones { grid-auto-columns: minmax(11rem, 15rem); }
.strip.tablets { grid-auto-columns: minmax(15rem, 22rem); }
@media (min-width: 64rem) { .strip.phones { grid-auto-columns: minmax(0, 1fr); grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: row; overflow: visible; } .strip.tablets { grid-auto-columns: minmax(0, 1fr); grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row; overflow: visible; } }
.note { color: var(--muted); font-size: 0.9375rem; text-align: center; }
.swipe { color: var(--muted); font-size: 0.9375rem; margin: -0.25rem 0 0.75rem; }
.swipe::after { content: " →"; }
@media (min-width: 64rem) { .swipe { display: none; } }

.faq { max-width: 46rem; margin-inline: auto; display: grid; gap: 0.75rem; }
.faq details { border-radius: 1.25rem; background: var(--tile); box-shadow: var(--shadow); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.5rem; padding: 0.875rem 1.25rem; font-weight: 900; font-size: 1.125rem; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 0.625rem; height: 0.625rem; flex: none; border-right: 0.1875rem solid var(--accent); border-bottom: 0.1875rem solid var(--accent); transform: rotate(45deg); margin-top: -0.25rem; }
.faq details[open] summary::after { transform: rotate(225deg); margin-top: 0.25rem; }
.faq details p { padding: 0 1.25rem 1.25rem; color: var(--muted); }

.final { padding-block: clamp(3rem, 8vw, 6rem); background: linear-gradient(180deg, var(--bg), color-mix(in srgb, var(--coral) 14%, var(--bg))); }
.final-card { max-width: 48rem; margin-inline: auto; padding: clamp(1.5rem, 5vw, 3rem); border-radius: 2.5rem; background: var(--tile); box-shadow: var(--shadow-lg); text-align: center; }
.final-card h2 { font-size: clamp(1.75rem, 4.2vw, 2.5rem); font-weight: 900; line-height: 1.15; }
.final-card > p { margin-top: 0.5rem; color: var(--muted); font-size: 1.125rem; }
.final-card .stores { margin: 1.5rem auto 0; }

/* button of the confirm/unsubscribe pages (waitlist sign-up closed 11.11.2026) */
.cta { appearance: none; justify-self: start; min-height: 3rem; padding: 0.75rem 1.5rem; font: inherit; font-size: 1.125rem; font-weight: 900; color: var(--on-accent); background: var(--accent); border: 0; border-radius: 999px; cursor: pointer; box-shadow: 0 0.25rem 0 color-mix(in srgb, var(--accent) 60%, #000); }
.cta:hover { filter: brightness(1.08); }
@media (max-width: 30rem) { .cta { width: 100%; justify-self: stretch; } }

/* ---------- content pages (guide, events, press) ---------- */
.page-head { padding-block: clamp(2rem, 6vw, 4rem) clamp(1.5rem, 4vw, 2.5rem); background: linear-gradient(180deg, var(--bg-2), var(--bg)); }
.crumbs ol { list-style: none; margin: 0 0 0.75rem; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; font-weight: 700; color: var(--muted); }
.crumbs li { display: inline-flex; align-items: center; min-height: 2.75rem; }
.crumbs li + li::before { content: "›"; margin-right: 0.5rem; }
.crumbs a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.page-head h1 { font-size: clamp(2rem, 5.5vw, 3.5rem); font-weight: 900; line-height: 1.1; letter-spacing: -0.02em; }
:lang(ja) .page-head h1, :lang(ko) .page-head h1 { letter-spacing: 0; line-height: 1.3; }
.page-head p { margin-top: 0.75rem; max-width: 44rem; color: var(--muted); font-size: 1.1875rem; }
.prose { max-width: 46rem; }
.prose h2 { font-size: clamp(1.375rem, 3vw, 1.75rem); font-weight: 900; margin: 2.5rem 0 0.75rem; line-height: 1.25; }
.prose p { margin-bottom: 1rem; }
.prose ul { padding-left: 1.25rem; }
.prose li { margin-bottom: 0.5rem; }
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.cards li { display: flex; gap: 1rem; align-items: flex-start; padding: 1.125rem; border-radius: 1.5rem; background: var(--tile); box-shadow: var(--shadow); }
.cards img { width: 4.5rem; height: 4.5rem; flex: none; border-radius: 1rem; background: var(--bg-2); }
.cards h3 { font-size: 1.125rem; font-weight: 900; line-height: 1.3; }
.cards p { color: var(--muted); font-size: 0.9375rem; margin-top: 0.25rem; }
.cards .rhythm { display: inline-block; margin-top: 0.5rem; padding: 0.125rem 0.625rem; border-radius: 999px; background: var(--bg-2); color: var(--ink); font-weight: 800; font-size: 0.875rem; }
.table-wrap { overflow-x: auto; border-radius: 1.25rem; box-shadow: var(--shadow); background: var(--tile); }
table { width: 100%; border-collapse: collapse; min-width: 34rem; }
.facts-table { min-width: 0; }
.block-title { font-size: clamp(1.375rem, 3vw, 1.75rem); font-weight: 900; line-height: 1.25; margin: 2.5rem 0 0.5rem; }
.note-left { color: var(--muted); margin-bottom: 1.25rem; }
.page-head + .wrap.section { padding-top: clamp(1rem, 3vw, 2rem); }
.section > .prose:first-child > h2:first-child { margin-top: 0.5rem; }
th, td { text-align: left; padding: 0.875rem 1rem; border-bottom: 0.0625rem solid var(--soft-edge); vertical-align: middle; }
thead th { background: var(--bg-2); font-weight: 900; }
.table-wrap img { width: 3rem; height: 3rem; max-width: none; border-radius: 0.75rem; display: inline-block; vertical-align: middle; margin-right: 0.75rem; }
td b { vertical-align: middle; }
.facts-table th { width: 32%; }
@media (max-width: 30rem) { .facts-table tr { display: block; padding: 0.75rem 1rem; border-bottom: 0.0625rem solid var(--soft-edge); } .facts-table tr:last-child { border-bottom: 0; } .facts-table th, .facts-table td { display: block; width: auto; padding: 0; border: 0; } .facts-table th { font-size: 0.875rem; color: var(--muted); } }
.press-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); }
.press-grid a { display: flex; flex-direction: column; height: 100%; padding: 0.5rem; border-radius: 1.25rem; background: var(--tile); box-shadow: var(--shadow); text-decoration: none; color: var(--ink); font-weight: 700; font-size: 0.875rem; }
.press-grid img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 5; object-fit: contain; border-radius: 0.875rem; background: var(--bg-2); margin-bottom: 0.375rem; }
.logo-box { display: inline-flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border-radius: 1.25rem; background: var(--tile); box-shadow: var(--shadow); }
.logo-box svg { width: 4rem; height: 4rem; }
.more { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.5rem; }

/* ---------- footer ---------- */
.site-footer { margin-top: auto; padding-block: 2.5rem calc(2rem + env(safe-area-inset-bottom)); background: var(--band); color: var(--band-muted); font-size: 0.9375rem; }
.site-footer a { color: var(--on-band); display: inline-flex; align-items: center; min-height: 2.75rem; }
.foot { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48rem) { .foot { grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr)); } }
.foot .brand { color: var(--on-band); }
.foot h2 { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--band-muted); margin-bottom: 0.25rem; }
:lang(ja) .foot h2, :lang(ko) .foot h2 { text-transform: none; letter-spacing: 0; }
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 1rem; align-items: center; }
.foot li > span { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 800; color: var(--on-band); }
.foot p { margin-top: 0.5rem; }
.foot .small { font-size: 0.875rem; }

/* ---------- legal and result pages (unchanged content, new layout) ---------- */
main.page { padding-block: 1rem 3rem; }
.doc { max-width: 46rem; margin-inline: auto; padding-block: 1rem 3rem; }
.doc h1 { font-size: clamp(2.25rem, 7vw, 3.5rem); font-weight: 900; line-height: 1.1; margin-bottom: 0.75rem; }
.doc h2 { font-size: 1.375rem; margin: 2rem 0 0.5rem; font-weight: 800; }
.doc h3 { font-size: 1.125rem; margin: 1.5rem 0 0.5rem; font-weight: 800; }
.doc p { margin-bottom: 1rem; }
.doc ul { margin: 0 0 1rem; padding-left: 1.25rem; }
.doc li { margin-bottom: 0.5rem; overflow-wrap: anywhere; }
.doc .updated { color: var(--muted); }
.doc p a { padding-block: 0.25rem; }
.back { display: inline-flex; align-items: center; min-height: 2.75rem; margin-bottom: 0.5rem; }
.notfound { text-align: center; padding-block: 4rem; }
.notfound h1 { font-size: clamp(2rem, 6vw, 3rem); font-weight: 900; margin-bottom: 1rem; }
.notfound a { display: inline-flex; align-items: center; min-height: 2.75rem; padding-inline: 0.5rem; }
.msg { display: block; padding: 0.875rem 1rem; background: var(--tile); border-left: 0.25rem solid var(--accent); border-radius: 0.5rem; }
.inline-form { margin-block: 1.25rem 1.5rem; }
.langs ul { display: flex; flex-wrap: wrap; gap: 0 0.25rem; list-style: none; margin: 0 0 0.5rem; padding: 0; }
.langs li { margin: 0; }
.langs a, .langs span { display: inline-flex; align-items: center; min-height: 2.75rem; padding-inline: 0.5rem; }
.langs span { color: var(--muted); font-weight: 800; }

/* ---------- link-preview scene (tooling/build_franchiseworld_og_image.py, v1 only) ---------- */
.s-plate { fill: #f3dcae; } .s-road { stroke: #fff6e6; stroke-width: 11; fill: none; } .s-glow { fill: none; stroke: none; }
.s-top { fill: url(#topGrad); } .s-left { fill: #d8b57a; } .s-right { fill: #c29a5e; } .s-shop-top { fill: #ef5b4d; }
.s-park { fill: #9ed083; } .s-tree { fill: #5faa57; } .s-win { fill: #ffc93c; } .s-ring { fill: none; stroke: #ef5b4d; stroke-width: 2.5; }
.s-ringfill { fill: #ef5b4d; opacity: 0.16; } .s-beam { fill: url(#beamGrad); } .s-route { fill: none; stroke: #2a2220; stroke-width: 2.5; stroke-dasharray: 3 9; }
.s-pin { fill: #ef5b4d; } .s-pindot { fill: #fff6e6; } .stop-top-a { stop-color: #fffaf0; } .stop-top-b { stop-color: #fde8bd; }
.stop-glow-a { stop-color: #4fa3e0; stop-opacity: 0.32; } .stop-glow-b { stop-color: #4fa3e0; stop-opacity: 0; }
.stop-beam-a { stop-color: #ef5b4d; stop-opacity: 0.55; } .stop-beam-b { stop-color: #ef5b4d; stop-opacity: 0; }

/* motion only when allowed; videos are paused by site.js under reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .rise.r2 { animation-delay: 0.1s; } .rise.r3 { animation-delay: 0.2s; }
  @keyframes rise { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: none; } }
}
@media (forced-colors: active) { .store:not(.store-live), .pill, .cta, .eyebrow, .store .soon { border: 0.0625rem solid CanvasText; } }
@media print { .skip, .site-header, .vbtn, video { display: none; } }