/* Kora Baby — the website. Our own pages: nothing here is loaded from anyone else (Petru, 2026-10-13:
   "I want us to design the whole website and control everything on the website"). No tracker, no cookie,
   no outside font — the fonts are the app's own files, served from this folder.

   Two looks, one sheet: <html data-look="dark"> is the app's Sea dark; data-look="light" is its light sister.
   The first draft shows both; the one he picks stays and the other's block is deleted. */

@font-face { font-family: "Poppins"; font-weight: 500; font-display: swap; src: url("fonts/Poppins_500Medium.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-display: swap; src: url("fonts/Poppins_600SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-display: swap; src: url("fonts/Poppins_700Bold.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("fonts/Inter_400Regular.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("fonts/Inter_500Medium.ttf") format("truetype"); }

/* Sea dark — the app's own stops (themes.json, "lagoon"). */
:root, :root[data-look="dark"] {
  --floor: #0c2830;
  --page: linear-gradient(180deg, #0c95b4 0%, #0c7891 9%, #0c5d70 20%, #0c4857 32%, #0c3742 46%, #0c2830 62%);
  --ink: #ffffff;
  --soft: rgba(255, 255, 255, 0.90);
  --faint: rgba(255, 255, 255, 0.74);
  --card: rgba(255, 255, 255, 0.12);
  --card-edge: rgba(255, 255, 255, 0.16);
  --line: rgba(255, 255, 255, 0.18);
  --cta: #ffffff;
  --cta-ink: #0c2830;
  --pill: rgba(255, 255, 255, 0.16);
  --phone: #071a20;
  --shot: url("img/home-dark.jpg");
  --shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  color-scheme: dark;
}
/* Its light sister — the same teal, on paper. */
:root[data-look="light"] {
  --floor: #f4f7f8;
  --page: linear-gradient(180deg, #d6eef3 0%, #e6f3f6 14%, #f4f7f8 34%);
  --ink: #0c2830;
  --soft: rgba(12, 40, 48, 0.86);
  --faint: rgba(12, 40, 48, 0.66);
  --card: #ffffff;
  --card-edge: rgba(12, 40, 48, 0.08);
  --line: rgba(12, 40, 48, 0.12);
  --cta: #0c7891;
  --cta-ink: #ffffff;
  --pill: rgba(12, 120, 145, 0.10);
  --phone: #e9eef0;
  --shot: url("img/home-light.jpg");
  --shadow: 0 30px 70px rgba(12, 40, 48, 0.18);
  color-scheme: light;
}

/* The phone picture in the page's own language (launch 15.23): the same Home of the test baby Kora, taken on Ceres's
   simulator in German, Italian and French. The dark look only — the light pictures are English until a light look stays. */
:root[lang="de"]:not([data-look="light"]) { --shot: url("img/home-dark-de.jpg"); }
:root[lang="it"]:not([data-look="light"]) { --shot: url("img/home-dark-it.jpg"); }
:root[lang="fr"]:not([data-look="light"]) { --shot: url("img/home-dark-fr.jpg"); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--floor);
  color: var(--ink);
  font-family: "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.55;
}
.page { background: var(--page); background-repeat: no-repeat; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
h1, h2, h3, .brand, .btn, .eyebrow { font-family: "Poppins", -apple-system, "Helvetica Neue", Arial, sans-serif; }
a { color: inherit; }

/* The bar */
.bar { display: flex; align-items: center; gap: 14px; padding: 22px 0; }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 19px; text-decoration: none; margin-right: auto; }
.brand img { width: 40px; height: 40px; border-radius: 10px; display: block; }
.bar nav { display: flex; gap: 6px; }
.bar nav a { text-decoration: none; font-size: 15px; font-weight: 500; padding: 8px 12px; border-radius: 99px; color: var(--soft); }
.bar nav a:hover, .bar nav a[aria-current="page"] { background: var(--pill); color: var(--ink); }
.langs { display: flex; gap: 4px; }
.langs a, .langs span { font-size: 13px; font-weight: 500; padding: 6px 9px; border-radius: 99px; text-decoration: none; color: var(--faint); }
.langs [aria-current="true"] { background: var(--pill); color: var(--ink); }

/* The top of the page */
.hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 48px; align-items: center; padding: 56px 0 88px; }
.eyebrow { display: inline-block; font-size: 14px; font-weight: 600; padding: 7px 14px; border-radius: 99px; background: var(--pill); margin: 0 0 22px; }
h1 { font-size: clamp(38px, 6vw, 62px); line-height: 1.06; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 20px; }
.lead { font-size: 19px; color: var(--soft); max-width: 34em; margin: 0 0 30px; }
.btn { display: inline-block; font-weight: 600; font-size: 17px; text-decoration: none; background: var(--cta); color: var(--cta-ink); padding: 15px 26px; border-radius: 99px; }
.btn:focus-visible, a:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.under { font-size: 14px; color: var(--faint); margin: 16px 0 0; }

.phone { justify-self: center; width: min(300px, 78vw); aspect-ratio: 600 / 1304; border-radius: 44px; padding: 9px; background: var(--phone); box-shadow: var(--shadow); }
.phone i { display: block; width: 100%; height: 100%; border-radius: 36px; background: var(--shot) center top / cover no-repeat; }

/* What Kora keeps */
section { padding: 64px 0; }
h2 { font-size: clamp(26px, 3.4vw, 34px); line-height: 1.15; font-weight: 600; margin: 0 0 10px; }
.sub { color: var(--soft); max-width: 40em; margin: 0 0 34px; }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.grid.two-up { grid-template-columns: repeat(2, minmax(0, 1fr)); }  /* the de/it/fr pages: Juno's four blocks */
.card { background: var(--card); border: 1px solid var(--card-edge); border-radius: 22px; padding: 22px; }
.card .dot { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 14px; background: color-mix(in srgb, var(--c) 22%, transparent); }
.card .dot svg { width: 22px; height: 22px; stroke: var(--c); fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
:root[data-look="light"] .card .dot svg { stroke: color-mix(in srgb, var(--c) 72%, #0c2830); }
.card h3 { font-size: 18px; font-weight: 600; margin: 0 0 6px; }
.card p { margin: 0; font-size: 16px; color: var(--soft); }

/* Together, and the promises */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.plain { border-top: 1px solid var(--line); }
.plain p { color: var(--soft); max-width: 44em; }
.plain.tail { border-top: 0; padding-top: 0; }  /* the de/it/fr pages: questions and "not medical", under the two blocks */
.plain strong { color: var(--ink); font-weight: 500; }

/* A page of text — privacy.html and support.html (launch 15.19): the app's own words, read on a phone. */
.doc { max-width: 44em; padding: 24px 0 40px; }
.doc h1 { font-size: clamp(34px, 5vw, 48px); margin: 0 0 16px; }
.doc .lead { font-size: 17px; margin: 0 0 8px; }
.doc .part { padding: 26px 0 0; }
.doc h2 { font-size: clamp(22px, 2.8vw, 26px); margin: 0 0 8px; }
.doc p { color: var(--soft); margin: 0 0 12px; overflow-wrap: anywhere; }
.doc p.dotted { padding-left: 0.62em; text-indent: -0.62em; }
.doc strong { color: var(--ink); font-weight: 600; }
.doc mark.todo { background: #ffd54a; color: #0c2830; border-radius: 4px; padding: 0 3px; }  /* a [[NEEDS PETRU: …]] line, shown as the app shows it */

/* The foot */
footer { padding: 34px 0 60px; color: var(--faint); font-size: 14px; }
footer .row { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; }
footer a { text-decoration: none; color: var(--soft); }
footer a:hover { text-decoration: underline; }
footer .who { margin: 14px 0 0; max-width: 44em; }  /* who operates Kora and where to write (Juno, 2026-10-16; 15.28) */

@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; padding: 28px 0 56px; gap: 40px; }
  .grid, .grid.two-up { grid-template-columns: 1fr; }
  .two { grid-template-columns: 1fr; }
  .bar nav { display: none; }
  section { padding: 48px 0; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }