/* Privacy Policy & Terms of Use, on top of css/home.css: same header, footer,
   cream palette and Baloo 2 headings as the home page.
   The policy text ships once per language (.bs-content.bs-<lang>); the hidden
   radios at the top of <body> pick the visible block through CSS alone, so a
   store reviewer reads the page without JS. js/legal-lang.js ties the radios
   to the header language picker. */
.bs-lang-input { display: none; }
.bs-content { display: none; }
#bs-en:checked ~ main .bs-en, #bs-vi:checked ~ main .bs-vi, #bs-zh:checked ~ main .bs-zh,
#bs-ja:checked ~ main .bs-ja, #bs-ko:checked ~ main .bs-ko, #bs-es:checked ~ main .bs-es,
#bs-fr:checked ~ main .bs-fr, #bs-pt:checked ~ main .bs-pt, #bs-ru:checked ~ main .bs-ru,
#bs-hi:checked ~ main .bs-hi, #bs-bn:checked ~ main .bs-bn, #bs-id:checked ~ main .bs-id,
#bs-th:checked ~ main .bs-th { display: block; }

.legal { max-width: 860px; padding-top: 48px; padding-bottom: 72px; }

/* Language pills: only shown without JS (inside <noscript>). */
.bs-switch { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 32px; }
.bs-switch label {
  cursor: pointer; padding: 7px 14px; border-radius: 999px; font-weight: 700; font-size: 0.88rem;
  background: #fff; border: 1px solid var(--border); color: var(--ink-soft);
}
.bs-switch label:hover { background: var(--card); color: var(--ink); }
#bs-en:checked ~ main label[for="bs-en"], #bs-vi:checked ~ main label[for="bs-vi"],
#bs-zh:checked ~ main label[for="bs-zh"], #bs-ja:checked ~ main label[for="bs-ja"],
#bs-ko:checked ~ main label[for="bs-ko"], #bs-es:checked ~ main label[for="bs-es"],
#bs-fr:checked ~ main label[for="bs-fr"], #bs-pt:checked ~ main label[for="bs-pt"],
#bs-ru:checked ~ main label[for="bs-ru"], #bs-hi:checked ~ main label[for="bs-hi"],
#bs-bn:checked ~ main label[for="bs-bn"], #bs-id:checked ~ main label[for="bs-id"],
#bs-th:checked ~ main label[for="bs-th"] { background: var(--brand-blue); border-color: var(--brand-blue); color: #fff; }

/* Title block */
.hero-section { text-align: center; margin-bottom: 40px; }
.hero-icon {
  display: inline-flex; align-items: center; justify-content: center; gap: 2px;
  font-size: 2rem; line-height: 1; padding: 16px 22px; margin-bottom: 18px;
  border-radius: 999px; background: var(--card);
}
.hero-section h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); font-weight: 800; margin: 0 0 12px; letter-spacing: -0.01em; }
.hero-description { color: var(--ink-soft); font-size: 1.1rem; max-width: 36em; margin: 0 auto; }
.hero-description strong { color: var(--ink); }
.updated {
  display: inline-block; margin: 18px 0 0; padding: 5px 14px; border-radius: 999px;
  background: var(--tint); border: 1px solid var(--border);
  font-size: 0.85rem; font-weight: 700; color: var(--ink-soft);
}

/* The three reassurances, in the app icon's tile colours. */
.facts-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 40px; }
.fact-card {
  background: #fff; border: 1px solid var(--border); border-top: 5px solid var(--tile-blue);
  border-radius: var(--radius-md); padding: 22px 20px; text-align: center;
}
.fact-card:nth-child(2) { border-top-color: var(--tile-red); }
.fact-card:nth-child(3) { border-top-color: var(--tile-green); }
.fact-icon { font-size: 1.8rem; line-height: 1; margin-bottom: 10px; }
.fact-title { margin: 0; font-family: var(--display); font-weight: 800; font-size: 1.15rem; line-height: 1.2; }
.fact-note { margin: 4px 0 0; color: var(--ink-soft); font-size: 0.92rem; }

/* Policy sections (home.css pads every <section>; .policy-card padding wins). */
.policy-list { display: grid; gap: 14px; margin-bottom: 40px; }
.policy-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 24px 28px; }
.policy-card h2 { font-size: 1.3rem; font-weight: 800; margin: 0 0 8px; }
.policy-card p { margin: 0; color: var(--ink-soft); line-height: 1.7; }
.policy-card b, .policy-card strong { color: var(--ink); }

/* Contact band, like the home page's dark download band. */
.cta-section { background: var(--ink); color: #fff; border-radius: var(--radius-lg); padding: 44px 28px; text-align: center; margin-bottom: 24px; }
.cta-section h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; margin: 0 0 10px; }
.cta-description { margin: 0 auto 22px; max-width: 34em; opacity: 0.85; }
.mail-button {
  display: inline-block; background: #fff; color: var(--ink); font-weight: 800;
  padding: 12px 26px; border-radius: 999px; transition: transform 0.15s ease;
}
.mail-button:hover { text-decoration: none; transform: translateY(-2px); }
.mail-button:focus-visible, .bs-switch label:focus-visible { outline: 3px solid var(--brand-sky); outline-offset: 2px; }

.copyright { text-align: center; font-size: 0.88rem; color: var(--ink-soft); margin: 0; }
.copyright a { font-weight: 700; }

@media (max-width: 640px) {
  .legal { padding-top: 32px; padding-bottom: 48px; }
  .hero-section { margin-bottom: 28px; }
  .hero-description { font-size: 1rem; }
  .facts-grid { grid-template-columns: 1fr; gap: 12px; margin-bottom: 28px; }
  .fact-card { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; text-align: left; padding: 16px 18px; }
  .fact-icon { grid-row: span 2; margin: 0; }
  .policy-card { padding: 20px; }
  .policy-card h2 { font-size: 1.15rem; }
  .cta-section { padding: 32px 20px; }
}

@media (prefers-reduced-motion: reduce) { .mail-button { transition: none; } }