/*
  HoJiah 台灣好呷 — marketing site stylesheet.
  Tokens mirror lib/core/theme/app_colors.dart so the static site and the
  Flutter app read as one brand.

  Layout is desktop-first with max-width overrides. The breakpoints that
  actually exist (all in em, so they follow the user's default font size):
    - 72em   (1152px) header nav collapses into the hamburger drawer below
             this. The longest nav (ja) needs ~1070px to stay on one row, so
             the drawer covers every tablet width rather than letting the nav
             wrap into a second row.
    - 37.5em (600px)  the open drawer lays out as a wrapped row above this,
             as a single column below it.
    - 48em   (768px)  44px touch targets for pills / footer links below this
             (and on any coarse pointer, at every width).
    - 33em   container query on .legal-body: the privacy table stacks into
             label/value cards when its column is narrower than this. It is
             a container query, not a viewport one, so it also stacks at
             large text sizes on wide screens.
  The Flutter app's own breakpoints (mobile <600, tablet 600–1024, desktop
  >1024, core/responsive/breakpoints.dart) are intentionally not mirrored
  for the nav: they describe app layouts, not nav-label length.
*/

:root {
  color-scheme: light dark;

  /* Light theme (warm, sunlit) — default */
  --bg: #fdfaf5;
  --surface: #ffffff;
  --surface-hover: #fbf5ec;
  --ink: #1a1712;
  --ink-muted: #5f5648;
  /* Decorative hairlines only (cards, dividers): ~1.1:1, so NEVER the sole
     boundary of a control. Controls use --border-strong. */
  --outline: #e7dfd2;
  --outline-variant: #dbd1c1;
  /* Control boundary: >=3:1 against page, surface and hover in both themes. */
  --border-strong: #857963;

  --plates-gold: #d4af37;
  --plates-glow: #ffe088;
  --plates-shadow: #b38f1b;
  --plates-charcoal: #1c1b1b;
  --plates-ink: #1a1712;
  --bowls-vermilion: #e05a47;
  --bowls-vermilion-deep: #c4472f;
  /* AppColors.michelinSlate: a citation, not a crest. Decorative marks only. */
  --michelin-slate: #4a6572;
  --accent-slate-text: var(--michelin-slate);
  --selected-bg: #1c1b1b;
  --selected-text: #d4af37;

  /* Fixed printed-menu fields; independent of the page theme. */
  --field-white: #ffffff;
  --world-fine: var(--plates-charcoal);
  --world-fine-border: var(--plates-charcoal);
  --world-fine-ink: #f7f1e4;
  --world-fine-accent: var(--plates-gold);
  --world-fine-muted: #c9bca4;
  --world-street: var(--bowls-vermilion-deep);
  --world-street-ink: var(--field-white);
  --world-slate: var(--michelin-slate);
  --world-slate-ink: var(--field-white);

  /* Filled gold control states, kept on the gold ramp so the ink label only
     keeps AA (hover lightens toward glow ~9.9:1; active deepens ~7.2:1). */
  --plates-gold-hover: color-mix(in srgb, var(--plates-gold) 70%, var(--plates-glow));
  --plates-gold-active: color-mix(in srgb, var(--plates-gold) 55%, var(--plates-shadow));

  /* Motion: ease-out-quart; state changes 160ms. */
  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
  --duration-state: 160ms;

  /* Contrast-safe accent text; aliases preserve the existing role API. */
  --accent-gold-text: #7a5f0f;
  --accent-gold-text-tint: var(--accent-gold-text);
  --accent-vermilion-text: #b43a28;
  --accent-vermilion-text-tint: var(--accent-vermilion-text);
  /* Legacy names (mirror app_colors.dart), kept as aliases that follow the
     theme so an old reference can never ship the light value on dark. */
  --plates-gold-on-light: var(--accent-gold-text);
  --bowls-vermilion-on-light: var(--accent-vermilion-text);

  /* Contrast-safe focus role; fixed panels override it locally. */
  --focus-ring: var(--accent-gold-text);

  /* z-index scale; nothing else gets a raw number. */
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-overlay: 30;
  --z-modal: 40;
  --z-toast: 50;
  --z-skip-link: 60; /* must clear everything, incl. a sticky header */

  --shadow-color: 27, 23, 18;
  --radius-card: 16px;
  --radius-card-in-panel: 12px;
  --text-badge: 0.8125rem;
  --radius-control: 12px;
  --radius-pill: 999px;
  --max-width: 1120px;
  --body-max-width: 72ch;

  /* Type scale (rem: respects the browser's font-size setting). One small
     size for captions / pills / meta, then body, then steps of >=1.25x. */
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5625rem;
  --text-2xl: 1.953rem;
  --text-3xl: 2.441rem;
  --text-4xl: 3.052rem;

  /* Font stacks. Latin always resolves through the platform UI font first;
     the CJK families that follow are ordered per language (see :lang()
     rules below) so Han characters pick the right regional glyph forms.
     System fonts only: no CJK webfont download. */
  --font-latin: -apple-system, BlinkMacSystemFont, "Segoe UI";
  --font-stack: var(--font-latin), "PingFang TC", "Microsoft JhengHei",
    "Noto Sans TC", "Hiragino Sans", "Noto Sans JP", "Apple SD Gothic Neo",
    "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15120d;
    --surface: #201c15;
    --surface-hover: #2a251c;
    --ink: #f7f1e4;
    --ink-muted: #c9bca4;
    --outline: #3a3226;
    --outline-variant: #4a4130;
    --border-strong: #968a75;
    --accent-gold-text: #d9b845;
    --accent-gold-text-tint: var(--accent-gold-text);
    --accent-vermilion-text: #ee7a66;
    --accent-vermilion-text-tint: var(--accent-vermilion-text);
    --accent-slate-text: #9db4c0;
    --selected-bg: #d4af37;
    --selected-text: #1a1712;
    --world-fine: #26221a;
    --world-fine-border: var(--outline);
    --shadow-color: 0, 0, 0;
  }
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh; /* fallback */
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  overflow-wrap: break-word; /* long words / e-mail addresses never cause sideways scroll */
  -webkit-font-smoothing: antialiased;
}

/* --- Typography: per-language stacks and CJK line breaking --- */

/* The element's own lang picks the stack. html carries the page language;
   language-switch links carry their own lang, so "日本語" on an English page
   still renders in Japanese glyph forms. */
:lang(zh) {
  --font-stack: var(--font-latin), "PingFang TC", "Microsoft JhengHei",
    "Noto Sans TC", system-ui, sans-serif;
}
:lang(ja) {
  --font-stack: var(--font-latin), "Hiragino Sans", "Hiragino Kaku Gothic ProN",
    "Yu Gothic", "YuGothic", "Noto Sans JP", Meiryo, system-ui, sans-serif;
}
:lang(ko) {
  --font-stack: var(--font-latin), "Apple SD Gothic Neo", "Malgun Gothic",
    "Noto Sans KR", system-ui, sans-serif;
}
html,
[lang] {
  font-family: var(--font-stack);
}

/* Japanese: kinsoku (no line-initial small kana or ー) everywhere; phrase-aware
   breaking (never strand a particle like を at a line start) on short text.
   auto-phrase is progressive enhancement: engines without it ignore it. */
:lang(ja) {
  line-break: strict;
}
:lang(ja) :is(h1, h2, h3, .lede, .brand, .btn) {
  word-break: auto-phrase;
  overflow-wrap: anywhere; /* a very long phrase may still break, never overflow */
}
/* Korean is spaced: break between words, never inside one. */
:lang(ko) {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* CJK glyphs fill the em box: no negative tracking, and display headings
   need more leading than Latin. Specificity (0,1,2) beats the per-section
   heading rules so those stay free to set Latin metrics. */
html:lang(zh) :is(h1, h2, h3),
html:lang(ja) :is(h1, h2, h3),
html:lang(ko) :is(h1, h2, h3) {
  letter-spacing: 0;
  line-height: 1.3;
}

h1,
h2,
h3 {
  text-wrap: balance;
}
p,
li {
  text-wrap: pretty;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
}

/* Skip link — visible on keyboard focus only */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: var(--z-skip-link);
  background: var(--surface);
  color: var(--ink);
  padding: 12px 20px;
  border-radius: 0 0 var(--radius-control) 0;
  border: 1px solid var(--outline);
}
.skip-link:focus {
  left: 0;
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: 20px;
}

/* --- Header / nav --- */

.site-header {
  border-bottom: 1px solid var(--outline);
  background: var(--surface);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 14px;
}

/* The wordmark never wraps on the full-width header (it also never shrinks
   below its natural width); the collapsed header re-allows a wrap at the
   space only, see the drawer block below. */
.brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 10px;
  font-weight: 700;
  font-size: var(--text-lg);
  line-height: 1.2;
  white-space: nowrap;
  word-break: keep-all;
  text-decoration: none;
  color: var(--ink);
}

.brand img {
  width: 36px;
  height: 36px;
  border-radius: 9px;
}

/*
  Mobile nav. No-JS baseline: .nav-toggle is a visually-hidden but focusable
  checkbox (Tab + Space work, it carries the accessible name) and the <label>
  after it is the visible hamburger. assets/js/nav.js upgrades this in place:
  the label becomes a real <button aria-expanded aria-controls> (so Enter works
  and the open state is announced), the checkbox is hidden and kept only as the
  state holder behind the single `.nav-toggle:checked ~ .site-nav` rule below.
*/
.nav-toggle {
  display: none; /* wide screens: no toggle, and no phantom tab stop */
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.nav-toggle[hidden] {
  display: none; /* JS swapped in a <button>; wins over the media-query display */
}

/* Shared by the no-JS <label> and the JS <button> */
.nav-toggle-label {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  -webkit-appearance: none; /* iOS Safari paints its own <button> chrome */
  appearance: none;
  background: transparent;
  color: var(--ink);
  font: inherit;
  border-radius: var(--radius-control);
  border: 1px solid var(--border-strong);
  cursor: pointer;
  touch-action: manipulation;
}

.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
  content: "";
  display: block;
  width: 20px;
  height: 2px;
  background: var(--ink);
  position: relative;
  transition: transform 0.2s ease-out;
}
.nav-toggle-label span::before {
  position: absolute;
  top: -6px;
}
.nav-toggle-label span::after {
  position: absolute;
  top: 6px;
}

/* The checkbox is clipped away, so the visible label wears its focus ring */
.nav-toggle:focus-visible + .nav-toggle-label {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Windows high-contrast: background-painted bars would vanish */
@media (forced-colors: active) {
  .nav-toggle-label span,
  .nav-toggle-label span::before,
  .nav-toggle-label span::after {
    forced-color-adjust: none;
    background: CanvasText;
  }
}

/* Gaps are tuned so the longest nav (ja) leaves ~50px spare inside the 1080px
   content column; widen them and the ja header drops to a second row. */
.site-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.site-nav a {
  text-decoration: none;
  font-weight: 600;
  font-size: var(--text-base);
  white-space: nowrap;
  color: var(--ink);
}

.lang-switch {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.lang-switch a {
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
}

.lang-switch a[aria-current="true"] {
  background: var(--selected-bg);
  border-color: var(--selected-bg);
  color: var(--selected-text);
}

/* Pointer-independent target sizes, including language pills. */
.brand, .site-nav > a, .lang-switch a, .footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.lang-switch a {
  justify-content: center;
  min-width: 44px;
}

/* Collapsed header (below 72em): brand + toggle on one row, the drawer on its
   own full-width row beneath. Every nav item is a 44px-tall full-width row. */
@media (max-width: 71.99em) {
  .nav-toggle {
    display: block;
  }
  .nav-toggle-label {
    display: flex;
  }
  .brand {
    flex-shrink: 1;
    min-width: 0;
    max-width: calc(100% - 60px); /* leave room for the 44px toggle + 16px gap */
    white-space: normal; /* wraps at the space only (keep-all above) */
  }
  .site-nav {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-block: 8px 16px;
    border-top: 1px solid var(--outline);
  }
  .nav-toggle:checked ~ .site-nav {
    display: flex;
  }
  .site-header .container {
    flex-wrap: wrap;
  }
  .site-nav > a {
    display: flex;
    align-items: center;
    min-height: 44px;
    white-space: normal; /* long labels wrap instead of overflowing at 200% text */
  }
  .site-nav .lang-switch {
    margin-top: 8px;
  }
}

/* Tablet drawer: links flow as a wrapped row, language pills pushed right. */
@media (min-width: 37.5em) and (max-width: 71.99em) {
  .site-nav {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 24px;
  }
  .site-nav .lang-switch {
    margin-top: 0;
    margin-inline-start: auto;
  }
}

/* Coarse-pointer baseline retained alongside the pointer-independent targets. */
@media (max-width: 47.99em), (pointer: coarse) {
  .brand {
    min-height: 44px;
  }
  .site-nav > a,
  .lang-switch a,
  .footer-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .lang-switch a {
    justify-content: center;
    min-width: 44px;
  }
}
@media (max-width: 47.99em) {
  .lang-switch a {
    padding-inline: 14px;
  }
}

/* --- Hero --- */

.hero {
  padding-block: clamp(40px, 6vw, 80px) clamp(32px, 5vw, 72px);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
}

.hero-copy {
  align-self: center;
  min-width: 0;
}

.hero h1 {
  font-size: clamp(2.1rem, 1.2rem + 3vw, 3.5rem);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.025em;
  margin: 0;
  text-wrap: balance;
}

:lang(zh) .hero h1,
:lang(ja) .hero h1,
:lang(ko) .hero h1 {
  /* CJK glyphs are full-width: a smaller display size gives the same line length */
  font-size: clamp(1.9rem, 0.8rem + 4.4vw, 3.4rem);
  line-height: 1.22;
  letter-spacing: 0;
}

/* Japanese: keep katakana words / phrases together where the browser supports it */
html:lang(ja):not(.legal-page) main {
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}

/* Korean: wrap at spaces, never inside a word */
html:lang(ko):not(.legal-page) main {
  word-break: keep-all;
  overflow-wrap: anywhere; /* only bites when a word would overflow (e.g. 200% text) */
}

.hl {
  color: var(--accent-vermilion-text);
}

.ph {
  display: inline-block; /* keeps a CJK phrase on one line; breaks only between phrases */
  max-width: 100%; /* ...unless the phrase alone is wider than the line (large text sizes) */
}

.hero .lede {
  font-size: clamp(1.05rem, 0.9rem + 0.7vw, 1.3rem);
  color: var(--ink-muted);
  max-width: 34em;
  margin: clamp(14px, 2vw, 22px) 0 0;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 30px;
}

.hero-note {
  margin: 14px 0 0;
  color: var(--ink-muted);
  font-size: var(--text-sm);
  max-width: 34em;
}

.hero-apps {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--text-sm);
  font-weight: 600;
  text-underline-offset: 4px;
}

.hero-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  width: min(100%, 400px);
  justify-self: center;
}

@media (min-width: 55em) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    align-items: center;
  }
  .hero-cards { justify-self: end; }
  .hero-cards .restaurant-card:last-child { margin-inline-start: 40px; }
}

/* HTML listings share the app's bands, badges and plain-text citations. */
.restaurant-card {
  min-width: 0;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--outline);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.card-band {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 4px 12px;
  min-height: 44px;
  padding: 10px 16px;
  font-size: var(--text-badge);
}
.card-band-label { font-weight: 800; }
.card-band-street { background: var(--world-street); color: var(--world-street-ink); }
.card-band-fine { background: var(--plates-charcoal); color: var(--world-fine-accent); }
.card-band-fine .card-distance { color: var(--world-fine-ink); }
.card-band-michelin { background: var(--world-slate); color: var(--world-slate-ink); }
.card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
}
.card-title-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px 12px;
}
.restaurant-card h3 {
  min-width: 0;
  margin: 0;
  font-size: 1.1875rem;
  line-height: 1.35;
  font-weight: 800;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.card-title-row h3 { flex: 1 1 12ch; }
.card-title-row .card-distance {
  color: var(--ink-muted);
  font-size: var(--text-badge);
}
.restaurant-card .card-cuisine {
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--text-sm);
}
.card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.award-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 3px 10px;
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
  font-size: var(--text-badge);
  font-weight: 700;
}
.award-badge svg { flex: none; }
.award-plates { color: var(--accent-gold-text); }
.award-bowls {
  background: var(--world-street);
  border-color: var(--world-street);
  color: var(--world-street-ink);
}
.award-michelin { color: var(--accent-slate-text); }

/* --- Buttons --- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: var(--radius-control);
  font-weight: 700;
  font-size: var(--text-base);
  text-decoration: none;
  border: 1px solid transparent;
  min-height: 48px;
}

.btn-primary {
  background: var(--plates-gold);
  color: var(--plates-ink);
  border-color: var(--border-strong);
}

.btn-outline {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--ink);
}

/* --- Interaction states ---
   Hover only where a pointer can hover, so a tap never leaves a control
   stuck in its hover look. Press feedback (:active) applies everywhere.
   The global reduced-motion rule below collapses these transitions. */
.btn,
.nav-toggle-label,
.lang-switch a,
.site-nav > a,
.footer-links a,
.footer-credit a,
.hero-apps {
  transition-property: background-color, border-color, color, text-decoration-color, transform;
  transition-duration: var(--duration-state);
  transition-timing-function: var(--ease-out);
}

/* Text links get a gold underline that grows in, not a colour change, so
   their AA-checked ink colour never moves. */
.site-nav > a,
.footer-links a {
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  text-decoration-color: transparent;
}

@media (hover: hover) {
  .btn-primary:hover {
    background: var(--plates-gold-hover);
  }
  .btn-outline:hover,
  .nav-toggle-label:hover {
    background: var(--surface-hover);
  }
  .lang-switch a:not([aria-current="true"]):hover {
    background: var(--surface-hover);
    border-color: var(--border-strong);
  }
  .site-nav > a:hover,
  .footer-links a:hover {
    text-decoration-color: var(--plates-gold);
  }
  .hero-apps:hover,
  .footer-credit a:hover {
    text-decoration-thickness: 2px;
  }
}

/* After the hover block: a pressed control is also hovered, and equal
   specificity means the later rule wins. */
.btn:active,
.lang-switch a:active,
.nav-toggle-label:active {
  transform: translateY(1px);
}
.btn-primary:active {
  background: var(--plates-gold-active);
}

/* --- Sections --- */

main section {
  padding-block: clamp(40px, 6vw, 72px);
}

/* Large display type must never push the page wider (text-only zoom to 200%) */
html:not(.legal-page) main#main :is(h1, h2, h3, p, li) {
  overflow-wrap: anywhere;
}

.btn-lg {
  min-height: 54px;
  padding: 14px 30px;
}

/* Shared big-section heading */
.trust h2,
.langs h2,
.plans-sec h2,
.getapp h2 {
  font-size: clamp(1.9rem, 1rem + 3.4vw, 3.25rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

:lang(zh) :is(.trust, .langs, .plans-sec, .getapp, .world) h2,
:lang(ja) :is(.trust, .langs, .plans-sec, .getapp, .world) h2,
:lang(ko) :is(.trust, .langs, .plans-sec, .getapp, .world) h2 {
  font-size: clamp(1.7rem, 0.9rem + 3vw, 2.75rem);
  line-height: 1.25;
  letter-spacing: 0;
}

:lang(zh) .world h2,
:lang(ja) .world h2,
:lang(ko) .world h2 {
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem);
}

/* --- Two worlds: contained panels inside the content column --- */
.worlds { padding-block: 24px clamp(40px, 6vw, 96px); }
.worlds-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 24px;
}
.world {
  flex: 1 1 460px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
  padding: clamp(20px, 4vw, 40px);
  border: 1px solid transparent;
  border-radius: var(--radius-card);
}
.world-fine {
  background: var(--world-fine);
  border-color: var(--world-fine-border);
  color: var(--world-fine-ink);
}
.world-street { background: var(--world-street); color: var(--world-street-ink); }
.world h2 {
  font-size: clamp(2rem, 1.2rem + 2.4vw, 3rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.025em;
  margin: 0;
}
.world-fine h2 { color: var(--world-fine-accent); }
.world > p { margin: 0; max-width: 34em; }
.world-chip {
  padding: 3px 12px;
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
  font-size: var(--text-badge);
  font-weight: 700;
}
.world-fine .world-chip { color: var(--world-fine-accent); }
.world-street .world-chip { color: var(--world-street-ink); }
.world-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin-top: 10px;
}
.world .restaurant-card { border-radius: var(--radius-card-in-panel); }
.world .restaurant-card h3 { font-size: 1.125rem; }
.world-note { font-size: var(--text-sm); color: var(--world-fine-muted); }

/* --- Recognition / non-affiliation --- */

.trust,
.langs,
.plans-sec {
  padding-block: clamp(56px, 9vw, 112px);
}

.trust-grid,
.langs-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px clamp(32px, 6vw, 88px);
  align-items: start;
}

@media (min-width: 900px) {
  .trust-grid,
  .langs-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  }
}

.trust-body {
  display: grid;
  gap: 32px;
}

.trust h3 {
  margin: 0 0 8px;
  font-size: var(--text-lg);
  line-height: 1.35;
}

.trust h3::before {
  content: "";
  display: block;
  width: 40px;
  height: 4px;
  border-radius: 2px;
  margin-bottom: 14px;
}

.trust-ours h3::before {
  background: var(--plates-gold);
}

.trust-cited h3::before {
  background: var(--michelin-slate);
}

.trust p {
  margin: 0;
  color: var(--ink-muted);
  max-width: 60ch;
}

.trust-cited h3 { color: var(--accent-slate-text); }

/* --- Languages: one dish, four scripts --- */

.langs-copy p {
  margin: 18px 0 0;
  color: var(--ink-muted);
  max-width: 44ch;
}

.specimen {
  list-style: none;
  margin: 0;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--outline);
  border-radius: var(--radius-card);
  display: grid;
  gap: 6px;
}

.specimen li {
  display: grid;
  grid-template-columns: 5.2rem minmax(0, 1fr);
  align-items: baseline;
  gap: 14px;
}

.spec-tag {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--ink-muted);
}

.spec-dish {
  font-size: clamp(1.6rem, 1rem + 2.6vw, 3rem);
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.specimen .is-current .spec-dish {
  color: var(--accent-vermilion-text);
}

/* --- Free / Premium: a menu with dotted leaders, not tier cards --- */

.plans {
  list-style: none;
  margin: clamp(24px, 4vw, 44px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vw, 44px);
  max-width: 760px;
}

.plan-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.plan {
  min-width: 0;
}

.plan-head h3 {
  min-width: 0;
  overflow-wrap: anywhere;
  margin: 0;
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem);
  font-weight: 800;
  line-height: 1.2;
}

.plan-head::after {
  content: "";
  order: 1;
  flex: 1;
  min-width: 16px;
  border-bottom: 2px dotted var(--outline-variant);
}

.plan-status {
  order: 2;
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--ink-muted);
  text-align: right;
}

.plan p {
  margin: 10px 0 0;
  color: var(--ink-muted);
  max-width: 58ch;
}

/* --- Get the app: web app first, store apps honestly "coming soon" --- */

.getapp {
  padding-block: 24px clamp(40px, 6vw, 72px);
}

.getapp-panel {
  background: var(--world-fine);
  color: var(--world-fine-ink);
  border: 1px solid var(--world-fine-border);
  border-radius: var(--radius-card);
  padding: clamp(24px, 5vw, 56px);
  --focus-ring: var(--world-fine-accent);
}

.getapp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 36px clamp(32px, 6vw, 88px);
  align-items: end;
}

@media (min-width: 900px) {
  .getapp-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  }
}

.getapp h2 {
  color: var(--world-fine-accent);
}

.getapp-copy p {
  margin: 16px 0 28px;
  max-width: 44ch;
}

.soon-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
  color: var(--world-fine-muted);
}

.soon-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}

.store-name {
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--world-fine-ink);
}

.store-soon {
  font-size: var(--text-sm);
}

/* --- Root language picker (/), shown only when the redirect can't run --- */

.lang-picker {
  padding-block: 64px;
  text-align: center;
}

.lang-picker img {
  border-radius: var(--radius-card);
  margin-inline: auto;
}

.lang-picker h1 {
  margin-top: 20px;
}

.lang-picker nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}

/* --- Footer --- */

.site-footer {
  border-top: 1px solid var(--outline);
  padding-block: 32px;
  color: var(--ink-muted);
  font-size: var(--text-sm);
}

.footer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  align-items: center;
}

.footer-grid > p {
  margin: 0;
}

.footer-links {
  display: flex;
  gap: 4px 20px;
  flex-wrap: wrap;
}

.footer-links a {
  font-weight: 600;
  color: var(--ink);
}

.footer-credit {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--outline);
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

.footer-credit a {
  color: var(--ink);
  font-weight: 600;
}

/* --- Legal / privacy page --- */

.legal-page main {
  padding-block: clamp(32px, 5vw, 56px);
}

.legal-body {
  max-width: var(--body-max-width);
  /* The privacy table stacks on the width of this column, not the viewport
     (see the @container block below). */
  container: legal / inline-size;
}

.legal-body h1 {
  font-size: var(--text-2xl);
  line-height: 1.2;
  margin: 0 0 0.4em;
}

.legal-body h2 {
  margin-top: 2em;
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
}

.legal-body h3 {
  margin: 1.6em 0 0.4em;
  font-size: var(--text-base);
  font-weight: 700;
}

.legal-body h2:first-of-type {
  margin-top: 0.5em;
}

.legal-body p,
.legal-body li {
  color: var(--ink-muted);
}

.legal-body strong {
  color: var(--ink);
}

.legal-meta {
  color: var(--ink-muted);
  font-size: var(--text-sm);
  margin-bottom: 32px;
}

.legal-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.2em 0;
  font-size: var(--text-sm);
}

.legal-body th,
.legal-body td {
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--outline);
  vertical-align: top;
  overflow-wrap: break-word;
}

.legal-body th {
  background: var(--surface-hover);
  color: var(--ink);
}

/* Narrow column (or large text): each row becomes a card of label/value
   pairs. The column headers are visually hidden (still in the a11y tree) and
   every cell prints its own header from its data-label attribute, so nothing
   depends on cells lining up and nothing is clipped at 320px / 200% text. */
@container legal (max-width: 33em) {
  .legal-body table,
  .legal-body tbody,
  .legal-body tr,
  .legal-body td {
    display: block;
    width: 100%;
  }
  .legal-body thead {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .legal-body thead th {
    display: block;
    padding: 0;
    border: 0;
  }
  .legal-body tbody tr {
    margin-bottom: 12px;
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-control);
  }
  .legal-body td {
    padding: 10px 14px;
    border: 0;
    border-bottom: 1px solid var(--outline);
    font-size: var(--text-base);
  }
  .legal-body td:last-child {
    border-bottom: 0;
  }
  .legal-body td:first-child {
    background: var(--surface-hover);
    border-radius: calc(var(--radius-control) - 1px) calc(var(--radius-control) - 1px) 0 0;
    font-weight: 700;
  }
  .legal-body td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--ink-muted);
  }
}

/* Focus visibility (WCAG 2.4.7, 1.4.11): contrast-safe role on each surface. */
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  /* *::before/::after too: the hamburger bars transition on pseudo-elements */
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}