/*
  Prova public site — shared stylesheet.
  Plain CSS, no build step. Every page in hosting/ links this one file.
  Tokens follow DESIGN.md (the app's design system) so the site feels like
  the app: ink/parchment/lime, the five Nutri-Score colours, full-radius
  controls, system font only.
*/

/* ────────────────────────────────────────────────────────────────────────
   1. RESET
   ──────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { min-height: 100vh; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea { font: inherit; }

/* ────────────────────────────────────────────────────────────────────────
   2. TOKENS — DESIGN.md palette, radii, spacing
   ──────────────────────────────────────────────────────────────────────── */
:root {
  /* colour */
  --ink:        #0C0C10;
  --ink-mid:    #1E1E28;
  --lime:       #C5F135;
  --lime-dark:  #A8CF1A;
  --parchment:  #F7F7F2;
  --white:      #FFFFFF;
  --card-border: rgba(12,12,16,0.08);
  --border-dark: rgba(255,255,255,0.12);

  /* text on dark: never pure white. Primary ≥ .72 (AA on ink), meta lower. */
  --on-dark:      rgba(255,255,255,0.72);
  --on-dark-mid:  rgba(255,255,255,0.55);
  --on-dark-soft: rgba(255,255,255,0.60);

  /* text on light: ink stepped down, never below .62 (AA on parchment/white). */
  --ink-muted: rgba(12,12,16,0.62);
  --ink-faint: rgba(12,12,16,0.58);

  /* score / semantic */
  --score-a: #1FC16B;
  --score-b: #78D64B;
  --score-c: #F5C842;
  --score-d: #FF7A3C;
  --score-e: #FF3B30;

  /* radii */
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-full: 999px;
  --r-badge: 12px;

  /* spacing */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 16px;
  --sp-lg: 24px;
  --sp-xl: 32px;
  --sp-xxl: 48px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, sans-serif;
  --max: 1120px;
}

/* ────────────────────────────────────────────────────────────────────────
   3. BASE
   ──────────────────────────────────────────────────────────────────────── */
body {
  font-family: var(--font);
  background: var(--parchment);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
h1, h2, h3, h4 { font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
p { line-height: 1.65; }

:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
.band-parchment :focus-visible,
.band-lime :focus-visible {
  outline-color: var(--ink);
}

/* ────────────────────────────────────────────────────────────────────────
   4. SITE SHELL — nav + footer
   ──────────────────────────────────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-lg);
  height: 64px;
  padding: 0 var(--sp-xl);
  background: rgba(12,12,16,0.86);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-dark);
}
.nav-logo {
  font-size: 19px;
  font-weight: 800;
  color: var(--lime);
  letter-spacing: -0.02em;
  text-decoration: none;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--sp-lg);
  flex: 1;
  justify-content: center;
}
.nav-links a {
  font-size: 14px;
  font-weight: 600;
  color: var(--on-dark);
  text-decoration: none;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.nav-links a:hover { color: var(--white); }
.nav-cta { flex-shrink: 0; }

@media (max-width: 720px) {
  .nav-links { display: none; }
  .nav { padding: 0 var(--sp-md); justify-content: space-between; }
}

.site-footer {
  background: var(--ink);
  padding: var(--sp-xxl) var(--sp-xl) var(--sp-xl);
  border-top: 1px solid var(--border-dark);
}
.site-footer-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr repeat(3, 1fr);
  gap: var(--sp-xl);
}
.footer-logo {
  font-size: 18px;
  font-weight: 800;
  color: var(--lime);
  letter-spacing: -0.02em;
}
.footer-tagline { color: var(--on-dark-mid); font-size: 13px; margin-top: var(--sp-sm); max-width: 28ch; }
.footer-col .footer-heading {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
  margin-bottom: var(--sp-md);
}
.footer-col ul { display: flex; flex-direction: column; gap: var(--sp-sm); }
.footer-col a {
  font-size: 14px;
  color: var(--on-dark);
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.footer-col a:hover { color: var(--white); }
.footer-bottom {
  max-width: var(--max);
  margin: var(--sp-xl) auto 0;
  padding-top: var(--sp-lg);
  border-top: 1px solid var(--border-dark);
  font-size: 12.5px;
  color: var(--on-dark-soft);
}

@media (max-width: 720px) {
  .site-footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-logo, .footer-tagline { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .site-footer-inner { grid-template-columns: 1fr 1fr; gap: var(--sp-lg); }
}

/* ────────────────────────────────────────────────────────────────────────
   5. BUTTONS
   ──────────────────────────────────────────────────────────────────────── */
.btn-primary, .btn-secondary, .btn-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-sm);
  min-height: 48px;
  padding: 13px 26px;
  border-radius: var(--r-full);
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  transition: background-color 0.15s, border-color 0.15s, opacity 0.15s;
}
.btn-primary { background: var(--lime); color: var(--ink); }
.btn-primary:hover { background: var(--lime-dark); }
.btn-secondary {
  background: transparent;
  color: var(--on-dark);
  border: 1.5px solid var(--border-dark);
}
.btn-secondary:hover { border-color: rgba(255,255,255,0.4); color: var(--white); }
.btn-dark { background: var(--ink); color: var(--lime); }
.btn-dark:hover { opacity: 0.85; }
.btn-primary[aria-disabled="true"],
.btn-secondary[aria-disabled="true"],
.btn-dark[aria-disabled="true"] { opacity: 0.45; cursor: default; pointer-events: none; }

/* store badges: icon + two-line label */
.btn-store {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 18px;
  border-radius: var(--r-md);
  background: var(--ink);
  border: 1px solid var(--border-dark);
  color: var(--white);
  text-decoration: none;
}
.btn-store svg { flex-shrink: 0; width: 22px; height: 22px; }
.btn-store-label { display: flex; flex-direction: column; text-align: left; line-height: 1.25; }
.btn-store-label small {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--on-dark-mid);
}
.btn-store-label span { font-size: 15px; font-weight: 700; }
.btn-store:hover { border-color: rgba(255,255,255,0.35); }
.btn-store.is-soon { opacity: 0.45; cursor: default; pointer-events: none; }

/* ────────────────────────────────────────────────────────────────────────
   6. GRADE BADGE — the letter is always present, never colour alone
   ──────────────────────────────────────────────────────────────────────── */
.grade-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-badge);
  font-weight: 800;
  color: var(--white);
  flex-shrink: 0;
}
.grade-badge.s { width: 28px; height: 28px; font-size: 13px; border-radius: 8px; }
.grade-badge.m { width: 44px; height: 44px; font-size: 19px; border-radius: 12px; }
.grade-badge.l { width: 72px; height: 72px; font-size: 32px; border-radius: 16px; }
.grade-a { background: var(--score-a); color: var(--white); }
.grade-b { background: var(--score-b); color: var(--ink); }
.grade-c { background: var(--score-c); color: var(--ink); }
.grade-d { background: var(--score-d); color: var(--white); }
.grade-e { background: var(--score-e); color: var(--white); }

/* ────────────────────────────────────────────────────────────────────────
   7. SECTION SCAFFOLDING + BANDS
   ──────────────────────────────────────────────────────────────────────── */
.section { max-width: var(--max); margin: 0 auto; padding: 88px var(--sp-xl); }
.band-ink { background: var(--ink); }
.band-parchment { background: var(--parchment); }
.band-lime { background: var(--lime); }
.band-ink .section-label { color: var(--on-dark-soft); }
.band-ink .section-title { color: var(--white); }
.band-ink .section-body { color: var(--on-dark); }
.band-lime .section-title, .band-lime .section-body { color: var(--ink); }

.section-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: var(--sp-sm);
}
.section-title {
  font-size: clamp(26px, 4.4vw, 42px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: var(--sp-md);
}
.section-body {
  font-size: 17px;
  color: var(--ink-muted);
  line-height: 1.65;
  max-width: 560px;
}

@media (max-width: 720px) { .section { padding: 64px var(--sp-md); } }

/* ────────────────────────────────────────────────────────────────────────
   8. CARDS + FEATURE GRID
   ──────────────────────────────────────────────────────────────────────── */
.card {
  background: var(--white);
  border: 1px solid var(--card-border);
  border-radius: var(--r-lg);
  padding: var(--sp-lg);
}
.card h3 { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: var(--sp-sm); }
.card p { font-size: 14px; color: var(--ink-muted); }
.card .icon {
  width: 48px; height: 48px;
  border-radius: var(--r-md);
  background: var(--parchment);
  border: 1px solid var(--card-border);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--sp-md);
  color: var(--ink);
}
.card .icon svg { width: 22px; height: 22px; }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-md);
  margin-top: var(--sp-xxl);
}
@media (max-width: 960px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .feature-grid { grid-template-columns: 1fr; } }

/* ────────────────────────────────────────────────────────────────────────
   9. PHONE FRAME — CSS only, holds a 330×600 image (source at 2×: 660×1200)
   ──────────────────────────────────────────────────────────────────────── */
.phone {
  position: relative;
  width: 330px;
  height: 600px;
  background: var(--ink);
  border-radius: 44px;
  padding: 12px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
  flex-shrink: 0;
}
.phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 34px;
  overflow: hidden;
  background: var(--ink-mid);
}
.phone-screen img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 480px) {
  .phone { width: 260px; height: 473px; padding: 10px; border-radius: 36px; }
  .phone-screen { border-radius: 27px; }
}

/* scan-line sweep, plays once on load */
.phone-scan {
  position: absolute;
  left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--lime), transparent);
  top: 0;
  animation: scan-sweep 1.4s ease-in-out 0.3s 1;
  opacity: 0.9;
}
@keyframes scan-sweep {
  0%   { top: 4%; opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { top: 94%; opacity: 0; }
}
.fade-up { animation: fade-up 0.6s ease-out both; }
@keyframes fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .phone-scan { animation: none; opacity: 0; }
  .fade-up { animation: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}

/* ────────────────────────────────────────────────────────────────────────
   10. FAQ — native details/summary
   ──────────────────────────────────────────────────────────────────────── */
.faq { display: flex; flex-direction: column; gap: var(--sp-sm); margin-top: var(--sp-xl); }
.faq details {
  background: var(--white);
  border: 1px solid var(--card-border);
  border-radius: var(--r-md);
  padding: var(--sp-md) var(--sp-lg);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .chevron { flex-shrink: 0; transition: transform 0.2s; color: var(--ink-faint); }
.faq details[open] summary .chevron { transform: rotate(180deg); }
.faq p { margin-top: var(--sp-sm); color: var(--ink-muted); font-size: 15px; }
@media (prefers-reduced-motion: reduce) {
  .faq summary .chevron { transition: none; }
}

/* ────────────────────────────────────────────────────────────────────────
   11. PROSE — long-form pages (learn / legal)
   ──────────────────────────────────────────────────────────────────────── */
.prose { max-width: 720px; margin: 0 auto; padding: 120px var(--sp-lg) 88px; line-height: 1.7; }
.prose h1 { font-size: clamp(30px, 5vw, 44px); letter-spacing: -0.03em; margin-bottom: var(--sp-lg); }
.prose h2 { font-size: 24px; letter-spacing: -0.02em; margin: var(--sp-xxl) 0 var(--sp-md); }
.prose h3 { font-size: 18px; letter-spacing: -0.01em; margin: var(--sp-xl) 0 var(--sp-sm); }
.prose p { margin-bottom: var(--sp-md); color: var(--ink-muted); font-size: 16px; }
.prose ul, .prose ol { margin: 0 0 var(--sp-md) var(--sp-lg); }
.prose li { margin-bottom: var(--sp-xs); color: var(--ink-muted); }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose a { color: var(--ink); text-decoration-color: var(--card-border); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: var(--ink); }
.prose .table-wrap { display: block; overflow-x: auto; margin-bottom: var(--sp-md); }
.prose table { border-collapse: collapse; width: 100%; font-size: 14px; }
.prose th, .prose td { text-align: left; padding: var(--sp-sm) var(--sp-md); border-bottom: 1px solid var(--card-border); white-space: nowrap; }
.prose th { font-weight: 700; color: var(--ink); }
.prose td { color: var(--ink-muted); }

/* ────────────────────────────────────────────────────────────────────────
   12. BREADCRUMB + LEGAL TOC
   ──────────────────────────────────────────────────────────────────────── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  font-size: 13px;
  color: var(--ink-faint);
  margin-bottom: var(--sp-lg);
}
.breadcrumb a { color: var(--ink-muted); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

.legal-toc {
  background: var(--white);
  border: 1px solid var(--card-border);
  border-radius: var(--r-md);
  padding: var(--sp-lg);
  margin-bottom: var(--sp-xl);
}
.legal-toc h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--sp-md); color: var(--ink-faint); }
.legal-toc ol { margin: 0; list-style: decimal inside; display: flex; flex-direction: column; gap: var(--sp-xs); }
.legal-toc a { font-size: 14px; color: var(--ink); text-decoration: none; }
.legal-toc a:hover { text-decoration: underline; }

/* ────────────────────────────────────────────────────────────────────────
   13. RESPONSIVE UTILITIES
   ──────────────────────────────────────────────────────────────────────── */
.container { max-width: var(--max); margin: 0 auto; padding: 0 var(--sp-xl); }
@media (max-width: 720px) { .container { padding: 0 var(--sp-md); } }
.show-desktop { display: initial; }
.show-mobile { display: none; }
@media (max-width: 960px) {
  .show-desktop { display: none; }
  .show-mobile { display: initial; }
}
body { overflow-x: hidden; }