/* ============================================================
   Reflexia — web styles
   Mirrors the iOS app's design system:
     · Inter font family
     · Warm alabaster background, white cards, cool gray borders
     · Lavender purple primary accent (#682860) — used sparingly
     · Generous corner radius (16–24) and padding (16–32)
   ============================================================ */

:root {
  /* Colors — warm neutral paper, unified with the doc pages.
     Lavender (#682860) survives only as a micro-accent. */
  --paper:          #FAFAF7;
  --surface:        #FFFFFF;
  --surface-soft:   #F1EEE7;
  --border:         #E8E5DF;
  --border-strong:  #D6D2C9;

  --text:           #1A1A1A;
  --text-soft:      #5F5E5C;
  --text-mute:      #8A8884;

  --accent:         #682860;   /* lavenderPurple — micro-accent only */
  --accent-soft:    rgba(104, 40, 96, 0.10);
  --accent-line:    rgba(104, 40, 96, 0.20);

  /* Type */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;

  /* Radii match AppStyler.CornerRadius */
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 24px;
  --r-pill: 999px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:          #0F0F10;
    --surface:        #16161A;
    --surface-soft:   #1B1B1D;
    --border:         #2A2A2E;
    --border-strong:  #3A3A3F;

    --text:           #ECEAE3;
    --text-soft:      #A3A09A;
    --text-mute:      #6E6C68;

    --accent:         #C28FB3;   /* lighter lavender for dark mode contrast */
    --accent-soft:    rgba(194, 143, 179, 0.12);
    --accent-line:    rgba(194, 143, 179, 0.28);
  }
}

/* -----------  Base  ----------- */

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  background: var(--paper);
  color: var(--text);
  font: 400 16px/1.6 var(--font);
  font-feature-settings: "cv11", "ss01", "ss03", "kern", "calt";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--accent); color: #FFFFFF; }

a { color: inherit; text-decoration: none; }

/* -----------  Masthead  ----------- */

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px clamp(20px, 5vw, 40px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
}

.brand-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: block;
}

/* Language switcher (also used in doc pages) */

.lang {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
}

.lang button {
  appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  font: 600 12px/1 var(--font);
  letter-spacing: 0.02em;
  color: var(--text-soft);
  padding: 7px 13px;
  border-radius: var(--r-pill);
  transition: background 140ms ease, color 140ms ease;
}

.lang button:hover { color: var(--text); }

.lang button[aria-current="true"] {
  background: var(--text);
  color: var(--paper);
}

/* ============================================================
   LANDING (index.html) — full-viewport hero, glass navbar,
   calm animated background, edge anchors.
   ============================================================ */

/* ----- Glass navbar (fixed) ----- */

.glass-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 50;
  padding: 16px clamp(20px, 5vw, 40px);
  background: linear-gradient(to bottom, rgba(250, 250, 247, 0.98) 80%, rgba(250, 250, 247, 0));
  pointer-events: none;
}

@media (prefers-color-scheme: dark) {
  .glass-nav {
    background: linear-gradient(to bottom, rgba(15, 15, 16, 0.98) 80%, rgba(15, 15, 16, 0));
  }
}

.glass-nav-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 1280px;
  margin: 0 auto;
  pointer-events: auto;
}

.glass-nav .brand { font-weight: 700; }

.nav-links {
  display: flex;
  gap: clamp(18px, 3vw, 32px);
  margin: 0 auto;
}

.nav-links a {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: lowercase;
  color: var(--text-soft);
  transition: color 140ms ease;
}

.nav-links a:hover { color: var(--text); }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

/* Hamburger — mobile only */

.nav-burger {
  display: none;
  appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  width: 36px;
  height: 36px;
  padding: 8px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}

.nav-burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--text);
  border-radius: 2px;
  transition: transform 220ms ease, opacity 220ms ease;
}

.nav-burger.open span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav-burger.open span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* Mobile drawer */

.nav-drawer {
  /* Absolutely positioned so the hidden drawer never stretches the fixed
     header (its gradient would otherwise paint over page titles). */
  position: absolute;
  top: 100%;
  left: clamp(20px, 5vw, 40px);
  right: clamp(20px, 5vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.25);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 220ms ease, transform 220ms ease, visibility 0s linear 220ms;
  pointer-events: auto;
}

.nav-drawer a {
  font-size: 15px;
  font-weight: 500;
  text-transform: lowercase;
  color: var(--text);
  padding: 12px 14px;
  border-radius: var(--r-sm);
}

.nav-drawer a:hover { background: var(--surface-soft); }

.nav-drawer.open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 220ms ease, transform 220ms ease;
}

@media (max-width: 760px) {
  .nav-links { display: none; }
  .nav-burger { display: flex; }
}

/* ----- Page sections (huma-style: typographic, hairlines, mono eyebrows) ----- */

:root { --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; }

.hero,
.section {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: clamp(24px, 6vw, 64px);
  padding-right: clamp(24px, 6vw, 64px);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin: 0 0 20px;
}

.eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

/* ----- Hero — pure typography ----- */

.hero {
  padding-top: clamp(150px, 24vh, 230px);
  padding-bottom: clamp(56px, 9vh, 96px);
}

.hero .eyebrow { animation: fadeUp 0.7s cubic-bezier(0.2, 0, 0, 1) both; }

.hero-title {
  font-size: clamp(40px, 6.8vw, 84px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 28px;
  animation: fadeUp 0.7s cubic-bezier(0.2, 0, 0, 1) 0.08s both;
}

.hero-title .line { display: block; }
.hero-title .line--2 { color: var(--text-mute); }

.hero-sub {
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.65;
  color: var(--text-soft);
  max-width: 56ch;
  margin: 0 0 36px;
  animation: fadeUp 0.7s cubic-bezier(0.2, 0, 0, 1) 0.16s both;
}

.hero-cta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 22px;
  animation: fadeUp 0.7s cubic-bezier(0.2, 0, 0, 1) 0.24s both;
}

.btn-ghost {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-soft);
  transition: color 140ms ease;
}

.btn-ghost:hover { color: var(--text); }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(15px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ----- Generic section ----- */

.section {
  padding-top: clamp(56px, 10vh, 110px);
  padding-bottom: clamp(56px, 10vh, 110px);
}

.section-title {
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 1.12;
  letter-spacing: -0.022em;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 48px;
  max-width: 24ch;
}

/* ----- About ----- */

.about-text {
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.7;
  color: var(--text-soft);
  max-width: 62ch;
  margin: 0 0 40px;
}

.about-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 28px;
}

/* App Store badge — outlined pill, Apple mark + two-line label */
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  border: 1.5px solid var(--text);
  border-radius: var(--r-pill);
  padding: 12px 28px 12px 22px;
  color: var(--text);
  transition: background 140ms ease, color 140ms ease;
}

.store-badge:hover {
  background: var(--text);
  color: var(--paper);
}

.store-badge .apple { width: 22px; height: 27px; flex-shrink: 0; }

.store-badge-text { display: flex; flex-direction: column; }
.store-badge-text .small { font-size: 12px; line-height: 1.3; }
.store-badge-text .big { font-size: 19px; font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; }

/* ----- Scroll reveal ----- */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.2, 0, 0, 1), transform 0.7s cubic-bezier(0.2, 0, 0, 1);
}

.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .hero .eyebrow, .hero-title, .hero-sub, .hero-cta { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}


/* -----------  Footer (both landing & doc pages)  ----------- */

.colophon {
  margin-top: clamp(48px, 10vw, 80px);
  padding: 24px clamp(20px, 5vw, 40px) 40px;
  text-align: center;
  font-size: 13px;
  color: var(--text-mute);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.colophon a {
  color: var(--text-soft);
  border-bottom: 1px solid transparent;
  transition: color 140ms ease, border-color 140ms ease;
}

.colophon a:hover {
  color: var(--text);
  border-color: var(--text-mute);
}

.colophon .links {
  display: inline-flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.colophon .sep {
  color: var(--text-mute);
}

/* ============================================================
   DOC PAGES (privacy.html, terms.html) — long-form editorial
   Single centered column, neutral palette (Stoic-style).
   Container: <main class="document"> directly under <header class="masthead">.
   Doc-only tokens override the landing ones via body.doc-body.
   ============================================================ */

body.doc-body {
  --paper:         #FAFAF7;
  --surface:       #FFFFFF;
  --surface-soft:  #F1EEE7;
  --border:        #E8E5DF;
  --border-strong: #D6D2C9;

  --text:          #1A1A1A;
  --text-soft:     #5F5E5C;
  --text-mute:     #8A8884;

  --accent:        #1A1A1A;
  --accent-soft:   rgba(26, 26, 26, 0.06);
  --accent-line:   rgba(26, 26, 26, 0.35);

  --quote-bg:      #F1EEE7;

  background: var(--paper);
  color: var(--text);
}

@media (prefers-color-scheme: dark) {
  body.doc-body {
    --paper:         #0F0F10;
    --surface:       #16161A;
    --surface-soft:  #1B1B1D;
    --border:        #2A2A2E;
    --border-strong: #3A3A3F;

    --text:          #ECEAE3;
    --text-soft:     #A3A09A;
    --text-mute:     #6E6C68;

    --accent:        #ECEAE3;
    --accent-soft:   rgba(236, 234, 227, 0.08);
    --accent-line:   rgba(236, 234, 227, 0.4);

    --quote-bg:      #1B1B1D;
  }
}

/* Document column — single, centered, scales linearly via clamp().
   Top padding is dropped because the hero supplies its own vertical space. */

.document {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 32px) 96px;
  min-width: 0;
}

/* ---------- HERO: title + dates form a centered magazine-style cover ---------- */

.document article > h1 {
  text-align: center;
  font-size: clamp(40px, 6.5vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 700;
  color: var(--text);
  margin: 0 auto;
  padding: clamp(48px, 9vw, 96px) 0 18px;
  max-width: 16ch;
}

/* Subtitle = the first <p> after the H1 (Effective/Last-updated metadata) */
.document article > h1 + p {
  text-align: center;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-mute);
  margin: 0 auto;
  padding: 0 0 clamp(48px, 8vw, 80px);
  max-width: 52ch;
  font-weight: 400;
}
.document article > h1 + p strong {
  color: var(--text-mute);
  font-weight: 500;
}

/* Lede = the second <p> after the H1 (the actual intro sentence). */
.document article > h1 + p + p {
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.5;
  color: var(--text);
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 0 0 32px;
}
.document article > h1 + p + p strong { font-weight: 700; }

/* ---------- Body hierarchy ---------- */

.document h2 {
  font-size: clamp(22px, 2.6vw, 28px);
  line-height: 1.3;
  letter-spacing: -0.012em;
  font-weight: 600;
  color: var(--text);
  margin: 72px 0 16px;
  scroll-margin-top: 24px;
}

.document h3 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text);
  margin: 36px 0 12px;
}

.document p {
  margin: 0 0 20px;
  color: var(--text);
  font-size: 17px;
  line-height: 1.75;
}

.document strong { font-weight: 600; color: var(--text); }

.document a {
  color: var(--accent);
  border-bottom: 1px solid var(--accent-line);
  transition: border-color 140ms ease;
}

.document a:hover { border-color: var(--accent); }

.document ul, .document ol {
  padding-left: 24px;
  margin: 0 0 20px;
}

.document ul { list-style: disc; }
.document ol { list-style: decimal; }

.document ul li, .document ol li {
  margin-bottom: 10px;
  line-height: 1.75;
  font-size: 17px;
  color: var(--text);
}

.document ul li::marker,
.document ol li::marker {
  color: var(--text-mute);
}

/* Section divider — short centered rule where the markdown has `---`. */
.document hr {
  border: 0;
  height: 1px;
  background: var(--border);
  width: 80px;
  margin: 56px auto;
}

.document blockquote {
  background: var(--quote-bg);
  border-left: 3px solid var(--text);
  margin: 28px 0;
  padding: 20px 24px;
  border-radius: 4px;
  color: var(--text);
  font-size: 16px;
  line-height: 1.7;
}

.document blockquote p { font-size: 16px; line-height: 1.7; }
.document blockquote p:first-of-type {
  font-size: 16px;
  color: var(--text);
  margin-bottom: 12px;
  font-weight: 400;
}
.document blockquote p:last-child { margin-bottom: 0; }

/* Tables — wrapped in <div class="table-wrap"> by the build step so wide
   tables can scroll horizontally on narrow viewports without breaking
   page layout. The visible chrome (border, radius) lives on the wrap,
   so the table itself can exceed the wrap width and trigger overflow. */

.document .table-wrap {
  margin: 24px 0 28px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
}

.document table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  border-spacing: 0;
  margin: 0;
  background: var(--surface);
  font-size: 15px;
  font-feature-settings: "tnum";
}

.document table th,
.document table td {
  text-align: left;
  vertical-align: top;
  padding: 12px 14px;
  line-height: 1.55;
  border-bottom: 1px solid var(--border);
  word-break: keep-all;
  overflow-wrap: break-word;
}

.document table th {
  font-weight: 600;
  font-size: 12.5px;
  color: var(--text-soft);
  background: var(--surface-soft);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.document table td:first-child,
.document table th:first-child {
  width: 28%;
  min-width: 130px;
}

.document table tr:last-child td { border-bottom: 0; }

.document table code {
  font-size: 13px;
  padding: 1px 4px;
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: normal;
}

@media (max-width: 520px) {
  .document table th,
  .document table td { padding: 10px 12px; font-size: 14.5px; }
}

.document code {
  font: 14px ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  padding: 1px 6px;
  border-radius: 4px;
}

/* Doc pages share the fixed glass-nav — clear space under it. */
body.doc-body { padding-top: 56px; }

/* Doc-page footer matches the column width. */
.doc-body .colophon {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* Back-to-top floating affordance */

.back-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 50%;
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.18),
              0 2px 6px -2px rgba(0, 0, 0, 0.06);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease,
              background 140ms ease, color 140ms ease, border-color 140ms ease;
  z-index: 40;
}

.back-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.back-top:hover {
  background: var(--text);
  color: var(--paper);
  border-color: var(--text);
}

/* Hide non-active language */
html[lang|="en"] .document article[data-lang="uk"],
html[lang|="uk"] .document article[data-lang="en"] {
  display: none;
}

/* Data-attribute language toggles: hide the inactive language. */
html[lang|="en"] [data-show-lang="uk"],
html[lang|="uk"] [data-show-lang="en"] { display: none !important; }