/* The website's stylesheet. It reads only the prototype's design tokens (tokens.css),
   so the site follows the design system the screens were drawn in. Mobile first. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-md);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  overflow-wrap: break-word;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--color-accent-ink); }
.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 var(--space-4); }

.site-header { border-bottom: var(--border-hairline) solid var(--color-border); background: var(--color-surface); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 56px; }
.brand { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 600; color: var(--color-text); text-decoration: none; }
.brand img { border-radius: var(--radius-sm); }
.lang-menu { position: relative; }
.lang-menu summary { cursor: pointer; list-style: none; padding: var(--space-2) var(--space-3); border: var(--border-hairline) solid var(--color-border); border-radius: var(--radius-pill); font-size: var(--font-size-sm); }
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu ul { position: absolute; inset-inline-end: 0; z-index: 2; margin: var(--space-2) 0 0; padding: var(--space-2); list-style: none; max-height: 60vh; overflow-y: auto; min-width: 200px; background: var(--color-surface); border: var(--border-hairline) solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.lang-menu a { display: block; padding: var(--space-2) var(--space-3); color: var(--color-text); text-decoration: none; border-radius: var(--radius-sm); }
.lang-menu a[aria-current] { background: var(--color-surface-sunken); font-weight: 600; }

.hero { display: grid; gap: var(--space-6); padding-top: var(--space-8); padding-bottom: var(--space-8); align-items: center; }
.hero h1 { font-size: var(--font-size-2xl); line-height: 1.2; margin: 0 0 var(--space-3); }
.lead { font-size: var(--font-size-lg); color: var(--color-text-muted); margin: 0 0 var(--space-6); }
.hero-shot { width: min(320px, 80%); margin: 0 auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.store-links { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.btn { display: inline-flex; align-items: center; min-height: var(--tap-target); padding: 0 var(--space-6); border-radius: var(--radius-pill); background: var(--color-primary); color: var(--color-on-primary); font-weight: 600; text-decoration: none; }
.btn-secondary { background: var(--color-surface-sunken); color: var(--color-text); }

.features { display: grid; gap: var(--space-8); padding-top: var(--space-8); padding-bottom: var(--space-8); }
.feature { display: grid; gap: var(--space-4); align-items: center; }
.feature h2 { font-size: var(--font-size-xl); line-height: 1.3; margin: 0 0 var(--space-2); }
.feature p { margin: 0; color: var(--color-text-muted); }
.feature img { width: min(280px, 70%); margin: 0 auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }

.video, .faq, .cta { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.video h2, .faq h2 { font-size: var(--font-size-xl); margin: 0 0 var(--space-4); }
.video video, .video img { border-radius: var(--radius-lg); width: 100%; }
.faq dt { font-weight: 600; margin-top: var(--space-4); }
.faq dd { margin: var(--space-1) 0 0; color: var(--color-text-muted); }
.cta { text-align: center; }
.cta .store-links { justify-content: center; }

.prose { max-width: 760px; padding-top: var(--space-8); padding-bottom: var(--space-8); }
.prose h1 { font-size: var(--font-size-2xl); line-height: 1.2; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
.prose th, .prose td { text-align: start; padding: var(--space-2); border-bottom: var(--border-hairline) solid var(--color-border); vertical-align: top; }
.notice { padding: var(--space-3) var(--space-4); background: var(--color-surface-sunken); border-radius: var(--radius-md); }
.table-scroll { overflow-x: auto; }

.site-footer { border-top: var(--border-hairline) solid var(--color-border); padding: var(--space-6) 0; font-size: var(--font-size-sm); color: var(--color-text-muted); }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }

@media (min-width: 800px) {
  .hero { grid-template-columns: 3fr 2fr; }
  .feature { grid-template-columns: 1fr 1fr; }
  .feature:nth-child(even) .feature-text { order: 2; }
}