/* Folio Words pages — override the AY Studio umbrella dark theme with the app's
   own light "paper and ink" palette (Folio/DesignSystem/FolioColor.swift:
   paper #FBFAF6, ink #1E1C17, ink accent #2F4FA8, printed grid #D6DEE9, desk
   #DED8C9). Loads after the shared styles.css so these variables win. Used by
   all three Folio pages (product, privacy, support); nothing under /ofertaal/
   links this file. */
:root {
  --bg: #fbfaf6;
  --bg-elev: #fffdf8;
  --bg-card: #fffdf8;
  --border: #ded8c9;
  --text: #1e1c17;
  --muted: #57534a;
  --teal: #2f4fa8;
  --teal-dim: #243e86;
  --orange: #c4472a;
  --grid: #d6dee9;
  --grad: linear-gradient(135deg, #3b5fc4 0%, #2f4fa8 55%, #243e86 100%);
}

body { background: var(--bg); }

.site-header { background: rgba(251, 250, 246, 0.88); }
.monogram { color: #fbfaf6; }
.btn-primary { color: #fff; }
.btn-ghost:hover { border-color: var(--teal); }
.pill-soon { background: rgba(196, 71, 42, 0.12); color: #a63a20; }
.pill-live { background: rgba(47, 79, 168, 0.12); color: var(--teal-dim); }
.lang-toggle button.active { color: #fff; }

/* ---- hero: a page of squared paper with the app icon beside the words --- */
.hero-folio {
  position: relative;
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
  border-bottom: 1px solid var(--border);
}
.hero-folio .wrap {
  display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center;
  padding: 72px 24px;
}
.hero-folio .eyebrow, .hero-folio h1, .hero-folio .lede { max-width: 520px; }
.hero-folio .soon { margin: 0 0 24px; color: var(--muted); font-size: 15px; }
.hero-folio .soon .pill { margin-right: 8px; }
.hero-icon {
  display: block; width: 220px; height: 220px; border-radius: 22%;
  box-shadow: 0 26px 50px -18px rgba(30, 40, 90, 0.5);
}

/* ---- phone-mockup screenshot showcase ---- */
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; text-align: center; }
.shot .frame {
  max-width: 210px; margin: 0 auto 20px; border-radius: 26px; overflow: hidden;
  border: 6px solid #1e1c17; box-shadow: 0 20px 44px -14px rgba(36, 62, 134, 0.35);
}
.shot .frame img { display: block; width: 100%; height: auto; }
.shot h3 { margin: 0 0 6px; font-size: 19px; }
.shot p { color: var(--muted); margin: 0; font-size: 14px; }

/* ---- two short facts under the screenshots ---- */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.facts article {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 26px;
}
.facts h3 { margin: 0 0 8px; font-size: 19px; }
.facts p { color: var(--muted); margin: 0; font-size: 15px; }

/* ---- privacy / support pages: the studio's .doc rules assume a dark page --- */
.doc p, .doc li { color: #3a372f; }
.doc h3 { color: var(--teal); }
.doc code { background: var(--bg-elev); color: var(--teal-dim); }
.doc a { text-decoration: underline; }

@media (max-width: 700px) {
  .hero-folio .wrap { grid-template-columns: 1fr; gap: 24px; padding: 40px 24px 48px; }
  .hero-icon { order: -1; width: 112px; height: 112px; }
}