/* Public site — landing and legal pages. Shares the app's palette (copied from
   style.css) so the marketing surface and the product read as one thing. */

/* --- tokens: keep in sync with public/style.css --- */
:root {
  /* spacing — strict 4px scale */
  --s0: 4px; --s1: 8px; --s2: 12px; --s3: 16px; --s4: 24px; --s5: 32px; --s6: 48px;
  /* radii */
  --r-sm: 10px; --r: 14px; --r-lg: 20px; --r-pill: 999px;

  /* dark theme (default) */
  --bg: #0a0f1c; --bg-2: #0e1526;
  --card: #141d30; --raised: #1c2740;
  --text: #eef1f8; --muted: #94a1bb; --line: #253150;
  --accent: #ffb454; --accent-2: #ff9d3c; --accent-text: #ffc06e; --accent-ink: #241701;
  --good: #26c06e; --good-ink: #06231a; --bad: #d42a30; --bad-ink: #ffffff;
  --tint-good: rgba(38,192,110,0.14); --tint-bad: rgba(212,42,48,0.16);
  --img-mat: #f7f8fc;
  --glow: 0 10px 30px -8px rgba(255,150,40,0.55), 0 3px 8px rgba(0,0,0,0.4);
  --shadow: 0 1px 2px rgba(0,0,0,0.35);
  --topglow: radial-gradient(120% 60% at 50% -8%, rgba(255,170,80,0.10), transparent 60%);

  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;

  /* landing accents — subject-matter colors: sea, buoy yellow, signal red */
  --sea: #3aa3dc; --buoy: #ffd23f; --signal: #ef4b53;
  /* pressed-button edge: darker rim under the CTA */
  --edge: #b36a00;
  --display: ui-rounded, "SF Pro Rounded", var(--sans);

  /* Marker-only ink for the vs-list / plan-chips check and cross glyphs.
     These render as text (CSS content:), so they need 4.5:1 against --card —
     a stricter bar than --good/--bad themselves have to clear (those are
     shared with tint swatches and app answer styling). Dark theme's --good
     already clears 4.5:1 on --card, so it's reused as-is; --bad does not, so
     it gets its own lighter-on-dark-card value here. */
  --good-ink-on-card: var(--good);
  --bad-ink-on-card: #ff6b6b;
}
/* Light tokens apply when the OS asks for light (no attribute set) or when
   a page opts in explicitly with data-theme="light". Dark stays the default. */
[data-theme="light"] {
  --bg: #eef1f8; --bg-2: #e6ebf5;
  --card: #ffffff; --raised: #f2f5fb;
  --text: #14203c; --muted: #566079; --line: #dde4f0;
  --accent: #e08700; --accent-2: #c96a00; --accent-text: #9a5a00; --accent-ink: #241701;
  --good: #26c06e; --good-ink: #06231a; --bad: #d42a30; --bad-ink: #ffffff;
  --tint-good: rgba(30,150,85,0.12); --tint-bad: rgba(212,42,48,0.10);
  --img-mat: #ffffff;
  --glow: 0 10px 26px -10px rgba(200,110,0,0.5), 0 1px 3px rgba(20,30,60,0.14);
  --shadow: 0 1px 2px rgba(20,30,60,0.08);
  --topglow: radial-gradient(120% 60% at 50% -8%, rgba(224,135,0,0.10), transparent 60%);
  --edge: #9a5400;
  /* --good on white fails 4.5:1 for text markers (2.37:1) — darken for the
     vs-list / plan-chips check glyph only. --bad already clears 4.5:1 on
     white, so it's reused as-is. */
  --good-ink-on-card: #0f7a42;
  --bad-ink-on-card: var(--bad);
  /* sea/buoy/signal at their dark-theme values wash out on white tiles
     (--buoy measures 1.44:1, --sea 2.82:1); darkened here to clear 3:1 for
     graphical use while staying recognisably sea-blue / buoy-yellow / signal-red. */
  --sea: #2c7ba7; --buoy: #a38628; --signal: #d24249;
}
[data-theme="light"] .topic .shape, [data-theme="light"] .closing .shape { fill: #14203c; }
@media (prefers-color-scheme: light) {
  /* keep in sync with [data-theme="light"] above */
  :root:not([data-theme="dark"]) {
    --bg: #eef1f8; --bg-2: #e6ebf5;
    --card: #ffffff; --raised: #f2f5fb;
    --text: #14203c; --muted: #566079; --line: #dde4f0;
    --accent: #e08700; --accent-2: #c96a00; --accent-text: #9a5a00; --accent-ink: #241701;
    --good: #26c06e; --good-ink: #06231a; --bad: #d42a30; --bad-ink: #ffffff;
    --tint-good: rgba(30,150,85,0.12); --tint-bad: rgba(212,42,48,0.10);
    --img-mat: #ffffff;
    --glow: 0 10px 26px -10px rgba(200,110,0,0.5), 0 1px 3px rgba(20,30,60,0.14);
    --shadow: 0 1px 2px rgba(20,30,60,0.08);
    --topglow: radial-gradient(120% 60% at 50% -8%, rgba(224,135,0,0.10), transparent 60%);
    --edge: #9a5400;
    /* --good on white fails 4.5:1 for text markers (2.37:1) — darken for the
       vs-list / plan-chips check glyph only. --bad already clears 4.5:1 on
       white, so it's reused as-is. */
    --good-ink-on-card: #0f7a42;
    --bad-ink-on-card: var(--bad);
    /* sea/buoy/signal at their dark-theme values wash out on white tiles
       (--buoy measures 1.44:1, --sea 2.82:1); darkened here to clear 3:1 for
       graphical use while staying recognisably sea-blue / buoy-yellow / signal-red. */
    --sea: #2c7ba7; --buoy: #a38628; --signal: #d24249;
  }
  :root:not([data-theme="dark"]) .topic .shape, :root:not([data-theme="dark"]) .closing .shape { fill: #14203c; }
}

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--topglow), linear-gradient(180deg, var(--bg-2), var(--bg) 22%);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent-text); }
h1, h2, h3, .brand { font-family: var(--display); }

/* language: BG renders with no JS; the inline script may switch to EN */
html[lang="bg"] [data-t="en"] { display: none; }
html[lang="en"] [data-t="bg"] { display: none; }

.wrap { max-width: 720px; margin: 0 auto; padding: var(--s3); }
/* Landing-page-only widening. Scoped as an additional class rather than a
   change to .wrap itself: the legal pages (terms/privacy/refunds) only ever
   carry plain .wrap (see their .legal main), so they never pick this up —
   there is no selector here that can match them. */
.wrap-lg { max-width: 1080px; }

/* Comfortable reading measure for long-form prose blocks that sit inside the
   wider landing container: the FAQ, the "why not the PDF" intro paragraph,
   the progress-strip paragraph, and the price/plan card. */
.measure { max-width: 700px; margin-left: auto; margin-right: auto; }
/* .why and .tracking constrain their intro paragraph to .measure but their
   heading is a full-width sibling, not a .measure ancestor (unlike .price
   and .faq, where .measure sits on the <section> itself) — so the heading
   sat flush with the wide container while the paragraph centered narrower
   below it, jogging the left edge. Give the heading the same box instead of
   wrapping it: comparison cards / demo strip that follow stay full width. */
.why > h2, .tracking > h2 { max-width: 700px; margin-left: auto; margin-right: auto; }

.site-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s2); padding: var(--s3) 0;
}
/* The brand links home from every page, including the landing page itself.
   color/text-decoration are reset because it is a link that should still read
   as the wordmark, not as body copy. */
.site-head .brand {
  font-weight: 800; font-size: 1.1rem; letter-spacing: -0.01em;
  color: inherit; text-decoration: none;
}
.site-head nav { display: flex; align-items: center; gap: var(--s1); }

.ghost {
  padding: var(--s0) var(--s2); border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--card);
  color: var(--text); font: inherit; cursor: pointer;
}

.hero { padding: var(--s6) 0 var(--s5); }
.hero h1 { font-size: clamp(1.9rem, 6vw, 2.7rem); line-height: 1.15; letter-spacing: -0.02em; }
.hero p.lede { color: var(--muted); font-size: 1.05rem; margin-top: var(--s3); }

.cta {
  display: inline-block; margin-top: var(--s4);
  padding: var(--s2) var(--s5); border-radius: var(--r-lg);
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--display); font-weight: 800; text-decoration: none;
  box-shadow: 0 4px 0 var(--edge);
  transition: transform 0.06s ease, box-shadow 0.06s ease;
}
.cta:active { transform: translateY(4px); box-shadow: 0 0 0 var(--edge); }
@media (prefers-reduced-motion: reduce) {
  .cta { transition: none; }
  .cta:active { transform: none; box-shadow: 0 4px 0 var(--edge); }
}

section { padding: var(--s5) 0; border-top: 1px solid var(--line); }
section h2 { font-size: 1.35rem; letter-spacing: -0.01em; margin-bottom: var(--s3); }

.cards { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); padding: var(--s3);
}
.card h3 { font-size: 1rem; margin-bottom: var(--s1); }
.card p { color: var(--muted); font-size: 0.92rem; }

.price { text-align: center; }
.price .amount {
  font-family: var(--mono); font-size: 3rem; font-weight: 800;
  color: var(--accent-text); font-variant-numeric: tabular-nums;
}
/* Cents set small and raised to the cap height of the euros, so the eye reads
   the whole number first. The lift is in em (of the cents' own size), so it
   tracks the font-size above instead of drifting when that changes. */
.price .amount .cents {
  font-size: 0.45em; vertical-align: 0.85em; letter-spacing: 0.01em;
}
/* Announced but not drawn. Used for the price card, where the visible figure
   is split into euros and raised cents with no decimal point between them. */
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.price .vat { color: var(--muted); font-size: 0.9rem; }

.shots { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.shots img { border: 1px solid var(--line); border-radius: var(--r); }

.site-foot {
  border-top: 1px solid var(--line); margin-top: var(--s5);
  padding: var(--s4) 0 var(--s6); color: var(--muted); font-size: 0.88rem;
}
.site-foot .links { display: flex; flex-wrap: wrap; gap: var(--s3); margin-bottom: var(--s3); }

/* legal pages */
.legal h1 { font-size: 1.6rem; margin-bottom: var(--s2); }
.legal h2 { font-size: 1.1rem; margin-top: var(--s4); }
.legal p, .legal li { color: var(--muted); margin-top: var(--s2); }
.legal ul { padding-left: var(--s4); }
.legal .updated { font-family: var(--mono); font-size: 0.85rem; }

/* --- hero split + phone mock ------------------------------------------- */
.hero-grid { display: grid; gap: var(--s5); align-items: center; text-align: left; }
@media (min-width: 720px) { .hero-grid { grid-template-columns: 1.2fr 1fr; } }
.mock {
  width: min(260px, 70vw); margin: 0 auto; padding: var(--s2);
  background: var(--raised); border: 1px solid var(--line);
  border-radius: 36px; box-shadow: var(--shadow);
}
@media (min-width: 1080px) {
  /* Room to breathe next to the hero heading on large screens, without
     letting the mock outgrow the copy beside it. */
  .mock { width: 300px; }
}
.mock-screen {
  background: var(--bg); border-radius: 26px; padding: var(--s3);
  display: grid; gap: var(--s2);
}
.mock-progress { height: 8px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
.mock-progress span { display: block; height: 100%; width: 62%; border-radius: var(--r-pill); background: var(--good); }
.mock-image { background: var(--img-mat); border-radius: var(--r-sm); padding: var(--s1); }
.mock-opts { display: grid; gap: var(--s1); }
.opt { height: 26px; border-radius: var(--r-sm); background: var(--card); border: 1px solid var(--line); }
.good-opt { background: var(--tint-good); border-color: var(--good); }

/* --- learning loop path ------------------------------------------------- */
.path { list-style: none; padding: 0; display: grid; gap: var(--s4); }
@media (min-width: 720px) { .path { grid-template-columns: repeat(4, 1fr); } }
.path-step { position: relative; padding-left: 56px; }
@media (min-width: 720px) { .path-step { padding-left: 0; padding-top: 56px; } }
.node {
  position: absolute; left: 0; top: 0; width: 44px; height: 44px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--card); border: 2px solid var(--line); color: var(--accent-text);
}
/* Connector lives on .path-step (not .node) so percentage sizing resolves
   against the step's actual box — the full grid column on desktop, the full
   stacked height on mobile — rather than the node's fixed 44px. That box's
   far edge plus the grid's own gap (var(--s4)) lands exactly on the next
   node, at any container width. :not(:last-child) keeps the last step bare. */
.path-step:not(:last-child)::after {
  content: ""; position: absolute; left: 21px; top: 44px;
  width: 2px; height: calc(100% - 44px + var(--s4));
  border-left: 2px dashed var(--line);
}
@media (min-width: 720px) {
  .path-step:not(:last-child)::after {
    left: 46px; top: 21px; width: calc(100% - 46px + var(--s4)); height: 2px;
    border-left: 0; border-top: 2px dashed var(--line);
  }
}
.path-step h3 { font-size: 1rem; margin-bottom: var(--s0); }
.path-step p { color: var(--muted); font-size: 0.9rem; }

/* --- stat chips + topic tiles ------------------------------------------ */
.stats { display: flex; flex-wrap: wrap; gap: var(--s1); margin-bottom: var(--s3); }
.chip {
  padding: var(--s0) var(--s2); border-radius: var(--r-pill);
  background: var(--card); border: 1px solid var(--line);
  font-family: var(--display); font-weight: 700; font-size: 0.9rem;
}
.chip strong { color: var(--accent-text); }
/* 9 tiles: fixed at 3 columns from the smallest phone width up through the
   wide desktop container, so the last tile is never stranded alone on its
   own row (9 divides evenly by 3, not by 2 or 4 — an auto-fit fallback
   would strand it at those widths). */
.topics { list-style: none; padding: 0; display: grid; gap: var(--s2);
  grid-template-columns: repeat(3, 1fr); }
.topic {
  display: grid; gap: var(--s1); justify-items: center; text-align: center;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s3) var(--s2);
  font-size: 0.88rem; font-weight: 600;
}
.topic svg { width: 48px; height: 48px; }
.topic .shape, .closing .shape { fill: #eef1f8; }

/* --- feature card icons + progress strip ------------------------------- */
.card-icon { width: 32px; height: 32px; margin-bottom: var(--s1); color: var(--accent-text); }
.demo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: var(--s3) 0; }
.demo-bar { flex: 1 1 180px; height: 12px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
.demo-bar span { display: block; height: 100%; width: 70%; background: linear-gradient(90deg, var(--good), var(--sea)); }
.demo-pill {
  padding: var(--s0) var(--s2); border-radius: var(--r-pill);
  background: var(--tint-bad); border: 1px solid var(--bad); font-size: 0.85rem; font-weight: 700;
}
.demo-badge {
  padding: var(--s0) var(--s2); border-radius: var(--r-pill);
  background: var(--tint-good); border: 1px solid var(--good); font-size: 0.85rem; font-weight: 700;
}

/* --- versus cards: the PDF vs the app ----------------------------------- */
.versus { display: grid; gap: var(--s3); }
@media (min-width: 720px) { .versus { grid-template-columns: 1fr 1fr; } }
.vs-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s4);
}
.vs-card h3 { font-size: 1.05rem; margin-bottom: var(--s2); }
.vs-card.win { border-color: var(--accent); box-shadow: 0 4px 0 var(--edge); }
.vs-list { list-style: none; padding: 0; display: grid; gap: var(--s1); color: var(--muted); font-size: 0.92rem; }
.vs-list li { padding-left: 28px; position: relative; }
.vs-list li::before { position: absolute; left: 0; top: 0; font-weight: 800; }
.vs-card:not(.win) .vs-list li::before { content: "✗"; color: var(--bad-ink-on-card); }
.vs-card.win .vs-list li::before { content: "✓"; color: var(--good-ink-on-card); }
.vs-card.win .vs-list { color: var(--text); }

/* --- plan card + FAQ accordion ----------------------------------------- */
.plan {
  max-width: 420px; margin: 0 auto; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4);
}
.plan-chips { list-style: none; padding: 0; margin: var(--s3) 0 0; display: grid; gap: var(--s1); text-align: left; font-size: 0.92rem; }
.plan-chips li { padding-left: 28px; position: relative; }
.plan-chips li::before { content: "✓"; position: absolute; left: 0; font-weight: 800; color: var(--good-ink-on-card); }

/* --- closing CTA band ---------------------------------------------------- */
.closing {
  text-align: center; border-radius: var(--r-lg); border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--raised), var(--card));
  padding: var(--s6) var(--s4); margin-top: var(--s5);
}
.closing h2 { margin-bottom: var(--s1); }
.closing p { color: var(--muted); }
.closing svg.beacon { width: 72px; height: 72px; margin: 0 auto var(--s2); display: block; }
.faq details {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); padding: var(--s2) var(--s3); margin-top: var(--s2);
}
.faq summary { font-weight: 700; cursor: pointer; }
.faq details p { color: var(--muted); margin-top: var(--s1); }

/* ---------- install guide ---------- */
/* site.css scopes its typography: .hero p.lede and .legal h1 do not reach a
   plain .install page, so it needs its own heading and lede rules or the h1
   renders at browser default. Sized to match .legal h1. */
.install h1 { font-size: 1.6rem; margin-bottom: var(--s2); }
.install .lede { color: var(--muted); font-size: 1.05rem; max-width: 60ch; }
.install details { border: 1px solid var(--line); border-radius: 12px; margin: 1rem 0; padding: .75rem 1rem; }
.install details > summary { font-weight: 600; cursor: pointer; padding: .25rem 0; }
.install .steps { margin: .75rem 0 0; padding-left: 1.25rem; }
.install .steps > li { margin: 0 0 1.25rem; max-width: 60ch; }
.install .note { border-left: 3px solid var(--accent); background: var(--card); border-radius: 0 8px 8px 0; padding: .75rem 1rem; margin: 1.5rem 0; }
.install .note p { max-width: 60ch; margin: 0; }
.install .trouble dt { font-weight: 600; margin-top: .9rem; }
.install .trouble dd { margin: .25rem 0 0; max-width: 60ch; }
.install .shot { margin: .75rem 0 0; max-width: 320px; }
.install .shot svg { width: 100%; height: auto; display: block; border-radius: 10px; }
.install .shot figcaption { font-size: .85rem; color: var(--muted); margin-top: .4rem; }