/* A file, not a <style> element: the page's CSP has no 'unsafe-inline'
   (deploy/cloud/common.caddy). The values are the web's tokens
   (frontend/src/styles.css, design/TOKENS.md). The landing cannot load the
   app's style sheet, because the gate hides the app's files. */

/* A copy of frontend/src/fonts/onest.woff2, byte for byte
   (landingFont.test.mjs). The gate hides /assets/*, so the landing serves
   its own copy. One variable file covers every weight and both scripts. */
@font-face {
  font-family: "Onest";
  src: url("/onest.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #ffffff;
  --grid: #dce4f2;
  --ink: #19213a;
  --muted: #4a5470;
  --line: #19213a;
  --shadow: #19213a;
  --p: #1d3aa8;
  --p-on: #ffffff;
  --p-soft: #d7def5;
  --s: #ffc93c;
  --s-on: #19213a;
  --t: #ff5a36;
  --soft: #eef2fa;
  --soft-line: #c9d4ec;
  /* The dark bands stay dark in both themes. */
  --band: #19213a;
  --band-ink: #ffffff;
  --band-muted: #c9d3f2;
  --border: 2px solid var(--line);
  --shadow-hero: 5px 5px 0 var(--shadow);
  --shadow-card: 4px 4px 0 var(--shadow);
  --font: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* The web's night palette. It follows the system setting. A theme that the
   visitor picks in the header (landing.js) sets data-theme on <html>, and
   that wins over the system setting. The two blocks hold the same values. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0f1426;
    --surface: #19213a;
    --grid: #1c2540;
    --ink: #f2f4fa;
    --muted: #a9b3cf;
    --line: #4a5684;
    --shadow: #000000;
    --p: #7d95ff;
    --p-on: #0f1426;
    --p-soft: #1f2a52;
    --t: #ff7a5c;
    --soft: #222c4a;
    --soft-line: #4a5684;
    --band: #0a0e1c;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1426;
  --surface: #19213a;
  --grid: #1c2540;
  --ink: #f2f4fa;
  --muted: #a9b3cf;
  --line: #4a5684;
  --shadow: #000000;
  --p: #7d95ff;
  --p-on: #0f1426;
  --p-soft: #1f2a52;
  --t: #ff7a5c;
  --soft: #222c4a;
  --soft-line: #4a5684;
  --band: #0a0e1c;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.5 var(--font);
}

h1, h2, h3, p, ul, ol, blockquote { margin: 0; }

a { color: var(--p); }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--t); outline-offset: 3px; }

.wrap { max-width: 1200px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }

.paper {
  background:
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--bg);
}

.muted { color: var(--muted); font-size: 15px; }

.label {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--p);
}

/* Header */

/* One row: the brand, the links, the key and the script picker. On a
   tablet the links get their own row and stay in view. On a phone they go
   behind "Meni", with the key, so the row fits. */
.bar {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  grid-template-areas: "brand links key pref";
  align-items: center;
  gap: 8px 12px;
  padding-top: 24px;
}

.brand { grid-area: brand; display: inline-flex; color: var(--p); }
/* The letters sit at equal optical spacing: the white area between each
   pair, at x-height, is the same. The width keeps the 710:210 viewBox. */
.wordmark { width: 133px; height: 40px; }
.wordmark .dot { fill: var(--t); }

.ico {
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.links {
  grid-area: links;
  justify-self: end;
  margin-right: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  font-size: 16px;
  font-weight: 600;
}

.links a { text-decoration: none; padding: 10px 0; }

.nav-key {
  grid-area: key;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  color: var(--s-on);
  background: var(--s);
  border: var(--border);
}

.pref { grid-area: pref; }
.menu { grid-area: menu; display: none; }

.pref > summary,
.menu > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
  background: var(--surface);
  border: var(--border);
}

.pref > summary::-webkit-details-marker,
.menu > summary::-webkit-details-marker { display: none; }

.menu .ico-close,
.menu[open] .ico-open { display: none; }
.menu[open] .ico-close { display: inline; }

/* The open panels lie over the page, so opening one does not move the
   hero. */
.pop {
  position: absolute;
  z-index: 2;
  top: calc(100% + 8px);
  right: 24px;
  width: 260px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--surface);
  border: var(--border);
  box-shadow: var(--shadow-card);
}

.pop-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.pop-list { list-style: none; padding: 0; margin: 0; }

.pop-list a,
.pop-list button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 0 10px;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
}

.pop-list a .ico { visibility: hidden; color: var(--p); }
.pop-list [aria-current="page"] { background: var(--soft); }
.pop-list [aria-current="page"] .ico { visibility: visible; }

/* The theme group. landing.js removes its hidden attribute. The display
   rule below would show the group without the script, so [hidden] is
   stated again. */
.pop-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--soft-line);
}
.pop-group[hidden] { display: none; }

.pop-list button {
  width: 100%;
  gap: 10px;
  font: 600 17px var(--font);
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}

.pop-list button > span { flex: 1; }
.pop-list .ico-check { visibility: hidden; color: var(--p); }
.pop-list [aria-pressed="true"] { background: var(--soft); }
.pop-list [aria-pressed="true"] .ico-check { visibility: visible; }

.drop {
  position: absolute;
  z-index: 2;
  top: calc(100% + 14px);
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-top: var(--border);
  border-bottom: var(--border);
}

.drop a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  padding: 0 16px;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--soft-line);
}

.drop a .ico { color: var(--p); }
.drop .drop-key { color: var(--s-on); background: var(--s); border-bottom: 0; }
.drop .drop-key .ico { color: var(--s-on); }

@media (max-width: 979px) {
  .bar { grid-template-areas: "brand . key pref" "links links links links"; }
  .links {
    justify-self: stretch;
    margin-right: 0;
    padding-top: 6px;
    border-top: 1px solid var(--soft-line);
  }
}

@media (max-width: 599px) {
  .bar {
    grid-template-columns: auto 1fr auto auto;
    grid-template-areas: "brand . pref menu";
    gap: 8px;
    padding-top: 16px;
  }
  .wordmark { width: 106px; height: 32px; }
  .links, .bar > .nav-key { display: none; }
  .menu { display: block; }
  .pref > summary { padding: 0 10px; }
  /* The button keeps only the globe. Its name stays for a screen reader. */
  .pref-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .pref > summary > .ico:last-child { display: none; }
  .pop { left: 16px; right: 16px; width: auto; }
}

/* Hero */

.hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 48px;
  padding-top: 48px;
  padding-bottom: 64px;
}

.hero-copy {
  flex: 1 1 460px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--p);
}

h1 {
  font-size: clamp(40px, 6vw, 64px);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.accent { color: var(--p); }

.lead { font-size: 20px; max-width: 40ch; }

.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }

.button,
.preview button {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 24px;
  font: 600 17px var(--font);
  text-decoration: none;
  color: var(--p-on);
  background: var(--p);
  border: var(--border);
  box-shadow: var(--shadow-card);
  cursor: pointer;
}

.button:hover,
.preview button:hover { box-shadow: 2px 2px 0 var(--shadow); }

/* Real screens of the app */

.hero-shot { flex: 0 0 auto; display: flex; justify-content: center; }
.hero-shot .shot-phone { width: 250px; }
.hero-shot img { aspect-ratio: 390 / 600; }

.shot-phone {
  padding: 7px;
  background: var(--surface);
  border: 3px solid var(--line);
  border-radius: 26px;
  box-shadow: var(--shadow-card);
}

.shot-phone img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: top;
  border: 1px solid var(--soft-line);
  border-radius: 18px;
}

.shot-phone--crop img { aspect-ratio: 390 / 540; }

/* Each screen comes in the light and the dark theme of the app, and the
   page shows the one of its own theme. The two rules follow the two blocks
   of the night palette. A hidden image is lazy, so the browser does not
   load it. */
.shot-phone .shot-dark { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .shot-phone .shot-light { display: none; }
  :root:not([data-theme="light"]) .shot-phone .shot-dark { display: block; }
}

:root[data-theme="dark"] .shot-phone .shot-light { display: none; }
:root[data-theme="dark"] .shot-phone .shot-dark { display: block; }

/* How it works: two roles, one shown at a time. */

.how { display: flex; flex-direction: column; gap: 14px; margin-bottom: 40px; scroll-margin-top: 16px; }
.how h2 { font-size: clamp(26px, 3vw, 34px); line-height: 1.1; font-weight: 800; }
.how-tabs { display: flex; flex-direction: column; gap: 20px; }
.how-tabs > input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.how-switch { display: inline-flex; align-self: flex-start; background: var(--surface); border: var(--border); }
.how-switch label { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; font-weight: 800; cursor: pointer; }

#uloga-roditelj:checked ~ .how-switch [for="uloga-roditelj"],
#uloga-dete:checked ~ .how-switch [for="uloga-dete"] { color: var(--s-on); background: var(--s); }

#uloga-roditelj:focus-visible ~ .how-switch [for="uloga-roditelj"],
#uloga-dete:focus-visible ~ .how-switch [for="uloga-dete"] { outline: 3px solid var(--t); outline-offset: -3px; }

.how-steps {
  display: none;
  list-style: none;
  padding: 4px 0 12px;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

#uloga-roditelj:checked ~ .how-steps--roditelj,
#uloga-dete:checked ~ .how-steps--dete { display: flex; }

.how-step { flex: 0 0 210px; display: flex; flex-direction: column; gap: 14px; scroll-snap-align: start; }
.how-cap { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; }

.how-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  font-weight: 800;
  color: var(--s-on);
  background: var(--s);
  border: 2px solid var(--line);
}

.how-cap strong { display: block; line-height: 1.3; }
.how-d { display: block; margin-top: 2px; font-size: 14px; line-height: 1.45; color: var(--muted); }

@media (max-width: 599px) {
  .hero-shot { width: 100%; }
  .hero-shot .shot-phone { width: 230px; }
  .how-step { flex-basis: 230px; }
}

main { padding: 64px 0 24px; }

/* A row that scrolls sideways, so long sections do not make the page long.
   The row is CSS only, so it works without the script. The next card
   always shows in part: that edge, the fade and the hint say the row
   scrolls, also where the system hides the scroll bar (iOS). */
.rail {
  --cols: 3.25;
  --gap: 16px;
  list-style: none;
  display: flex;
  gap: var(--gap);
  /* The row runs to the edge of the screen. The padding keeps the first
     and the last card in line with the text. */
  margin: 0 -24px;
  padding: 4px 24px 18px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 24px;
  scrollbar-width: thin;
  scrollbar-color: var(--p) var(--soft);
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
}

.rail > li {
  flex: 0 0 calc((100% - var(--gap) * (var(--cols) - 1)) / var(--cols));
  scroll-snap-align: start;
}

/* The end of the row is not a start position. This snap position lets the
   row rest with the last card in full, and does not leave it to how a
   browser treats the edge. */
.rail > li:last-child { scroll-snap-align: end; }

/* The mask would hide a ring drawn outside the row. */
.rail:focus-visible { outline-offset: -3px; }

@media (max-width: 979px) { .rail { --cols: 2.2; } }
@media (max-width: 639px) { .rail { --cols: 1.15; } }

.rail-hint { margin-top: -8px; font-size: 14px; font-weight: 700; color: var(--p); }

.why-card {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--surface);
  border: var(--border);
}

.why-card h3 { font-size: 19px; line-height: 1.2; font-weight: 800; }

.why { display: flex; flex-direction: column; gap: 20px; margin-bottom: 40px; scroll-margin-top: 16px; }
.why h2 { font-size: clamp(26px, 3vw, 34px); line-height: 1.1; font-weight: 800; }
.why-card p:last-child { font-size: 15px; }

/* Privacy */

.trust { background: var(--soft); border-top: var(--border); border-bottom: var(--border); }

.trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  padding-top: 40px;
  padding-bottom: 40px;
}

.trust h2 { font-size: 20px; font-weight: 800; margin-bottom: 6px; }
.trust p { color: var(--muted); }

/* Price */

.price { display: flex; flex-direction: column; gap: 14px; padding-top: 48px; padding-bottom: 40px; scroll-margin-top: 16px; }
.price h2 { font-size: clamp(26px, 3vw, 34px); line-height: 1.1; font-weight: 800; }
.price-lead { font-size: 18px; max-width: 60ch; }

.price-card {
  display: flex;
  flex-direction: column;
  align-self: flex-start;
  align-items: flex-start;
  gap: 20px;
  padding: 24px;
  background: var(--surface);
  border: var(--border);
  box-shadow: var(--shadow-card);
}

.price-incl { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 32px; }
.price-incl li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; line-height: 1.4; }
.price-incl li::before { content: "✓"; font-weight: 800; color: var(--p); }

.price-note { font-size: 14px; color: var(--muted); }

/* Questions */

.faq { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 12px 16px; padding-top: 48px; padding-bottom: 40px; scroll-margin-top: 16px; }
.faq h2 { grid-column: 1 / -1; margin-bottom: 4px; font-size: clamp(24px, 2.6vw, 30px); font-weight: 800; }
.faq-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.faq details { border: var(--border); background: var(--surface); }

.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 10px 18px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 22px; font-weight: 600; color: var(--p); }
.faq details[open] summary::after { content: "−"; }
.faq details > p { margin: 0 18px 18px; }

@media (max-width: 979px) {
  .faq { grid-template-columns: 1fr; }
}

@media (max-width: 599px) {
  .price, .faq { padding-top: 40px; }
  .price-card { padding: 16px; }
  .price-incl { grid-template-columns: 1fr; }
}

/* The preview key */

.key { padding-top: 48px; padding-bottom: 48px; }

.preview { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 20px; }

.preview-field {
  flex: 1 1 360px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.preview label { font-size: 22px; font-weight: 800; }

/* 18px: iOS zooms into a field under 16px. */
.preview input {
  margin-top: 6px;
  min-height: 48px;
  padding: 10px 14px;
  font: 18px var(--font);
  color: var(--ink);
  background: var(--surface);
  border: var(--border);
  border-radius: 0;
}

/* Footer */

.foot { background: var(--band); color: var(--band-muted); font-size: 14px; }

.foot-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding-top: 20px;
  padding-bottom: 20px;
}

.foot-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.foot a { color: var(--band-ink); }

/* Text for a screen reader only. It names the script picker, whose
   button shows only the script. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}