/* ============================================================
   SavdokuBot blog — base layer (tokens, reset, buttons, header).
   A frozen copy of the landing's stylesheet as it stood before the
   2026-10 landing redesign: the articles linked /site/styles.css, and
   the redesign replaced that file with a dark, design-only sheet.
   The blog keeps this look until it is redesigned on its own; the
   blog-specific rules live in blog.css. Same design tokens as the
   Mini App (apps/web/src/styles/tokens.css), light default + dark via
   prefers-color-scheme. Self-contained: no CDNs, system fonts.
   ============================================================ */

:root {
  --teal-50: #e6f6f1;
  --teal-500: #0e9f77;
  --teal-600: #0b8a67;
  --teal-700: #097355;

  --mp-uzum: #7c3aed;
  --mp-wb: #cb11ab;
  --mp-ozon: #005bff;
  --mp-yandex: #ffcc00;

  --gray-0: #ffffff;
  --gray-50: #f7f8fa;
  --gray-100: #f1f2f4;
  --gray-150: #e9ebef;
  --gray-200: #e1e4e8;
  --gray-900: #16191e;

  --bg: var(--gray-0);
  --bg-alt: var(--gray-50);
  --surface: var(--gray-0);
  --text-primary: var(--gray-900);
  --text-secondary: #5c636d;
  --text-tertiary: #7b828c;
  --text-on-accent: #ffffff;
  --border: var(--gray-200);
  --separator: var(--gray-150);

  --accent: var(--teal-500);
  --accent-hover: var(--teal-600);
  --accent-press: var(--teal-700);
  --accent-soft: var(--teal-50);
  --accent-ring: rgba(14, 159, 119, 0.28);
  --hero-tint: linear-gradient(180deg, #eaf7f2 0%, rgba(234, 247, 242, 0) 82%);

  --shadow-sm: 0 1px 2px rgba(16, 25, 30, 0.05), 0 2px 6px rgba(16, 25, 30, 0.04);
  --shadow-md: 0 2px 6px rgba(16, 25, 30, 0.06), 0 8px 20px rgba(16, 25, 30, 0.08);
  --shadow-lg: 0 4px 12px rgba(16, 25, 30, 0.1), 0 20px 48px rgba(16, 25, 30, 0.16);
  --shadow-accent: 0 6px 18px rgba(14, 159, 119, 0.3);

  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  --font-sans:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, 'Helvetica Neue', Arial, sans-serif;

  /* The one ease-out of the product, kept identical to apps/web/src/styles/tokens.css.
     W408 settled the curve on the app side and applied it "in both spellings" — CSS and
     `lib/motion.ts`. This file was a third spelling nobody looked at, and it still held the
     older, weaker curve: `cubic-bezier(0.22, 0.61, 0.36, 1)`, which covers 27% of its travel
     in the first tenth of the duration where this one covers 40%. Same product, two arrivals.
     Pinned by apps/landing/motion.test.ts — change it there and here together, or not at all. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* The app's four duration tiers, same values as tokens.css. The landing used to have one
     (`--dur-base`) and spelled the rest as literals, which is how `transform 90ms` ended up
     sitting next to `background var(--dur-base)` in the same declaration with nothing saying
     the two were meant to be different tiers rather than one of them being a typo. */
  --dur-instant: 90ms;
  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur-slow: 320ms;

  /* The sticky header is the one translucent surface on this page, and it was written inline:
     a tint plus a blur, right in `.site-header`. Inline means an `@media` cannot reach it, so a
     visitor who told their OS to reduce transparency got nothing, and an engine without
     `backdrop-filter` got a 14%-see-through bar with the page sliding legibly under the nav text.
     The app hit exactly this in U7 and answered it the same way: the material is a token with an
     opaque twin, and the overrides swap the token rather than the rule — so the border and the
     tint stop being transparent together instead of one of them staying see-through. */
  --material-blur: saturate(180%) blur(14px);
  --material-bar: color-mix(in srgb, var(--bg) 86%, transparent);
  --material-bar-solid: var(--bg);

  /* The app's press tiers, same values as tokens.css. A control that does not answer a touch
     reads as broken on a phone long before the tap ever resolves — and on this page the tap
     that matters is the first one a seller ever gives the product. */
  --press-scale: 0.97;
  --press-scale-lg: 0.98;
  --press-opacity: 0.6;

  /* The one duration the shared scale does not cover, and it is deliberate: the app has no
     scroll reveal, so there is nothing on the other side to match. Named rather than promoted
     into the scale, so a later reader can see it is landing-only and not a fifth tier. */
  --dur-reveal: 480ms;

  --header-h: 64px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --gray-0: #1b1d21;
    --gray-50: #23262b;
    --gray-100: #101114;
    --gray-150: #2c2f35;
    --gray-200: #30343b;
    --gray-900: #f4f6f8;

    --bg: #101114;
    --bg-alt: #16181c;
    --surface: #1b1d21;
    --text-primary: var(--gray-900);
    --text-secondary: #a7adb6;
    --text-tertiary: #8a909a;
    --text-on-accent: #06231b;

    --accent: #18b98c;
    --accent-hover: #2bc79b;
    --accent-press: #38d2a8;
    --accent-soft: rgba(24, 185, 140, 0.14);
    --accent-ring: rgba(24, 185, 140, 0.34);
    --hero-tint: linear-gradient(180deg, rgba(24, 185, 140, 0.1) 0%, rgba(24, 185, 140, 0) 82%);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.34), 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4), 0 10px 24px rgba(0, 0, 0, 0.44);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5), 0 24px 56px rgba(0, 0, 0, 0.56);
    --shadow-accent: 0 6px 20px rgba(24, 185, 140, 0.36);

    color-scheme: dark;
  }
}

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg {
  max-width: 100%;
  display: block;
}

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

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
}

.container.narrow {
  max-width: 820px;
}

.num {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

h1 {
  font-size: clamp(34px, 6vw, 54px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 700;
}

h2 {
  font-size: clamp(26px, 4vw, 36px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 700;
  text-align: center;
}

.section-sub {
  max-width: 620px;
  margin: 14px auto 0;
  text-align: center;
  color: var(--text-secondary);
}

section {
  padding: 72px 0;
}

.eyebrow {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 22px;
  white-space: nowrap;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  border: 1px solid transparent;
  transition:
    background var(--dur-base) var(--ease-out),
    transform var(--dur-instant) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

.btn:active {
  transform: scale(var(--press-scale));
}

.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--accent-ring);
}

.btn-primary {
  background: var(--accent);
  color: var(--text-on-accent);
  box-shadow: var(--shadow-accent);
}

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover {
    background: var(--accent-hover);
  }
}

.btn-primary:active {
  background: var(--accent-press);
}

.btn-ghost {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border);
}

@media (hover: hover) and (pointer: fine) {
  .btn-ghost:hover {
    background: var(--bg-alt);
  }
}

.btn-inverse {
  background: #fff;
  color: var(--teal-700);
}

@media (hover: hover) and (pointer: fine) {
  .btn-inverse:hover {
    background: #f2fbf8;
  }
}

.btn-lg {
  min-height: 52px;
  padding: 12px 28px;
  font-size: 17px;
}

.btn-sm {
  min-height: 44px;
  padding: 8px 18px;
  font-size: 15px;
  box-shadow: none;
}

/* ---------- Header ---------- */
/* The bar material, as a class so the blog header wears the same one. */
.material-bar {
  background: var(--material-bar);
  -webkit-backdrop-filter: var(--material-blur);
  backdrop-filter: var(--material-blur);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--separator);
}

.nav {
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--header-h);
}

@media (min-width: 900px) {
  .nav {
    gap: 20px;
  }
}

.logo {
  display: flex;
  align-items: center;
  /* The mark is 30px; the target around it is 44. Nothing sits within 44px of it — the nav
     links are hidden below 900px and the actions are pushed to the far right by margin-left:auto
     — so growing the box here cannot steal a neighbour's tap (U3's rule). */
  min-width: 44px;
  min-height: 44px;
  gap: 10px;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
}

.logo-mark {
  width: 30px;
  height: 30px;
  flex: none;
}

/* Narrow phones: the mark alone is enough — frees room so the RU header CTA
   ("Открыть бота") never clips. */
@media (max-width: 480px) {
  .logo span {
    display: none;
  }
}

.nav-links {
  display: none;
  gap: 26px;
  margin: 0 auto;
}

.nav-links a {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: color var(--dur-base) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .nav-links a:hover {
    color: var(--text-primary);
  }
}

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

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

.lang-btn {
  min-width: 44px;
  min-height: 44px;
  padding: 4px 8px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .lang-btn:hover {
    background: var(--bg-alt);
  }
}

.lang-btn.active {
  background: var(--accent-soft);
  color: var(--accent-press);
}

.lang-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--accent-ring);
}

@media (min-width: 900px) {
  .nav-links {
    display: flex;
  }

  .nav-actions {
    margin-left: 0;
  }
}

/* ---------- Hero ---------- */
.hero {
  padding: 64px 0 80px;
  background: var(--hero-tint);
}

.hero-grid {
  display: grid;
  gap: 48px;
  align-items: center;
}

.lead {
  margin-top: 18px;
  font-size: 18px;
  color: var(--text-secondary);
  max-width: 520px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.trust-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-top: 24px;
  padding: 0;
  list-style: none;
}

.trust-chips li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-press);
  font-size: 13.5px;
  font-weight: 600;
}

@media (prefers-color-scheme: dark) {
  .trust-chips li {
    color: var(--accent-press);
  }
}

.trust-chips li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

@media (min-width: 900px) {
  .hero-grid {
    grid-template-columns: 1.08fr 0.92fr;
  }
}

/* ---------- Phone mockup ---------- */
.hero-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Same honesty signal the /shots gallery carries (.shot-badge), sized down for the hero. */
.mock-note {
  margin: 14px 0 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
}

.phone {
  position: relative;
  width: min(320px, 86vw);
  border-radius: 44px;
  padding: 12px;
  background: var(--gray-900);
  box-shadow: var(--shadow-lg);
}

@media (prefers-color-scheme: dark) {
  .phone {
    background: #000;
  }
}

.phone-notch {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 110px;
  height: 24px;
  border-radius: 0 0 16px 16px;
  background: inherit;
  z-index: 2;
}

.phone-screen {
  border-radius: 34px;
  background: var(--bg-alt);
  padding: 44px 14px 20px;
  overflow: hidden;
}

.mock-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px 12px;
  font-weight: 700;
  font-size: 15px;
}

.mock-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
}

.mock-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.mock-kpi {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 12px;
  display: grid;
  gap: 2px;
}

.mock-kpi-label {
  font-size: 11px;
  color: var(--text-tertiary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mock-kpi-value {
  font-size: 19px;
  font-weight: 700;
}

.mock-card {
  margin-top: 8px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 12px;
}

.mock-card-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--separator);
}

.mock-stock {
  color: var(--accent);
  white-space: nowrap;
}

.mock-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  font-size: 13px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--separator);
}

.mock-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.mp-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dot);
  flex: none;
}

.mock-sync {
  margin-left: auto;
  font-weight: 600;
  color: var(--text-primary);
}

.mock-toast {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  color: var(--accent-press);
  font-size: 12px;
  font-weight: 600;
}

.mock-toast-icon {
  width: 15px;
  height: 15px;
  flex: none;
}

/* ---------- Problem ---------- */
.problem {
  background: var(--bg-alt);
}

.problem-grid {
  display: grid;
  gap: 14px;
  margin-top: 36px;
}

.problem-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
}

.problem-x {
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(229, 72, 77, 0.12);
  color: #e5484d;
  font-size: 13px;
  font-weight: 700;
}

.problem-item p {
  color: var(--text-secondary);
}

.problem-answer {
  margin-top: 28px;
  text-align: center;
  font-size: 19px;
  font-weight: 700;
  color: var(--accent);
}

@media (min-width: 760px) {
  .problem-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- How ---------- */
.steps {
  list-style: none;
  padding: 0;
  margin: 44px 0 0;
  display: grid;
  gap: 20px;
  counter-reset: none;
}

.step {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 26px 24px 24px;
  box-shadow: var(--shadow-sm);
}

.step-num {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--text-on-accent);
  font-weight: 700;
  font-size: 16px;
}

.step h3 {
  margin-top: 14px;
  font-size: 18px;
}

.step p {
  margin-top: 8px;
  color: var(--text-secondary);
  font-size: 15px;
}

@media (min-width: 760px) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- Feature cards (reused by the coach section) ---------- */
.feature-grid {
  display: grid;
  gap: 16px;
  margin-top: 44px;
}

.feature {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 24px;
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .feature:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
  }
}

.feature-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  color: var(--accent);
}

.feature-icon svg {
  width: 24px;
  height: 24px;
}

.feature h3 {
  margin-top: 16px;
  font-size: 17px;
}

.feature p {
  margin-top: 8px;
  color: var(--text-secondary);
  font-size: 15px;
}

@media (min-width: 640px) {
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 980px) {
  .feature-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- Security ---------- */
.security-list {
  list-style: none;
  padding: 0;
  margin: 44px 0 0;
  display: grid;
  gap: 22px;
}

.security-list li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.sec-icon {
  flex: none;
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  color: var(--accent);
}

.security-list h3 {
  font-size: 17px;
}

.security-list p {
  margin-top: 6px;
  color: var(--text-secondary);
  font-size: 15px;
}

@media (min-width: 760px) {
  .security-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 32px;
  }
}

/* ---------- Pricing ---------- */
.pricing {
  background: var(--bg-alt);
}

.plans {
  display: grid;
  gap: 16px;
  margin-top: 44px;
  align-items: stretch;
}

.plan {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
}

.plan-featured {
  border: 2px solid var(--accent);
  box-shadow: var(--shadow-md);
}

.plan-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: var(--text-on-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.plan h3 {
  font-size: 17px;
}

.plan-price {
  margin-top: 10px;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.plan-price small {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-tertiary);
  letter-spacing: 0;
  white-space: nowrap;
}

.plan ul {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: grid;
  gap: 10px;
}

.plan li {
  position: relative;
  padding-left: 26px;
  font-size: 14.5px;
  color: var(--text-secondary);
}

.plan li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 7L10 17l-5-5' fill='none' stroke='%230e9f77' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 10px;
  background-position: center;
  background-repeat: no-repeat;
}

.pricing-note {
  margin-top: 26px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 14px;
}

@media (min-width: 640px) {
  .plans {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 980px) {
  .plans {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---------- FAQ ---------- */
.faq-list {
  margin-top: 40px;
  display: grid;
  gap: 12px;
}

.faq-list details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0 20px;
  overflow: hidden;
}

.faq-list summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 36px 18px 0;
  font-weight: 600;
  font-size: 16px;
  position: relative;
  min-height: 44px;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::after {
  content: '';
  position: absolute;
  right: 2px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--text-tertiary);
  border-bottom: 2px solid var(--text-tertiary);
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--dur-base) var(--ease-out);
}

.faq-list details[open] summary::after {
  transform: translateY(-30%) rotate(225deg);
}

.faq-list summary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--accent-ring);
  border-radius: var(--radius-md);
}

.faq-list p {
  padding: 0 0 18px;
  color: var(--text-secondary);
  font-size: 15px;
}

/* ---------- Final CTA ---------- */
.final-cta {
  background: linear-gradient(135deg, var(--teal-600), var(--teal-500));
  color: #fff;
  text-align: center;
}

.final-cta h2 {
  color: #fff;
}

.final-cta p {
  margin: 14px auto 0;
  max-width: 480px;
  color: rgba(255, 255, 255, 0.85);
}

.final-cta .btn {
  margin: 28px 6px 0;
}

/* Secondary "look around" button sits on the teal gradient — the base .btn-ghost tokens
   (dark text, subtle border) would vanish there. */
.final-cta .btn-ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}

@media (hover: hover) and (pointer: fine) {
  .final-cta .btn-ghost:hover {
    background: rgba(255, 255, 255, 0.12);
  }
}

/* ---------- Footer ---------- */
.site-footer {
  padding: 44px 0 28px;
  border-top: 1px solid var(--separator);
  background: var(--bg);
}

.footer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
}

.footer-brand {
  font-weight: 700;
  font-size: 17px;
}

.footer-note {
  margin-top: 6px;
  color: var(--text-tertiary);
  font-size: 14px;
}

/* Five links, 23.2px tall and 10px apart when measured. Two 44px targets do not fit in
   23.2 + 10 + 23.2 = 56.4px, so an invisible expander here would have each link eating its
   neighbour's tap — U3 learned that on the app side. The row itself becomes the target. */
.footer-links {
  display: grid;
  gap: 0;
  font-size: 14.5px;
}

.footer-links a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-secondary);
}

@media (hover: hover) and (pointer: fine) {
  .footer-links a:hover {
    color: var(--text-primary);
  }
}

.footer-legal {
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px solid var(--separator);
  color: var(--text-tertiary);
  font-size: 13px;
  display: grid;
  gap: 8px;
}

/* ---------- Reveal on scroll ---------- */
/* Hidden state only when JS is running (html.js set inline in <head>),
   so a no-JS visitor still sees the whole page. */
html.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
}

html.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ============================================================
   Ekranlar — the product's own screenshots.
   The page had no image of the app at all: a visitor read about it and never saw it. These are
   real captures (tools/shots), so the only design work here is a frame that does not pretend to
   be a device it isn't, and a row that scrolls on a phone instead of stacking four tall pictures.
   ============================================================ */

.shot-badge {
  margin: 18px auto 0;
  text-align: center;
}

.shot-badge span {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Phone-width cards in a scroller. On a phone four full-height shots stacked would be a page of
   nothing but pictures; side-by-side, the visitor sees there are four and swipes if they care. */
.shot-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(232px, 62vw);
  gap: 20px;
  margin-top: 32px;
  padding: 4px 20px 8px;
  /* The row breaks the container's gutter so a card can sit flush against the screen edge —
     otherwise the last card looks cut off by a margin rather than by the scroll. */
  margin-inline: -20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.shot-row::-webkit-scrollbar {
  display: none;
}

.shot {
  margin: 0;
  scroll-snap-align: center;
}

/* A quiet frame, not a fake iPhone: the bezel art would be a claim about a device we never
   photographed. Rounded, bordered, and clipped is enough to read as "a screen". */
.shot-frame {
  border-radius: 22px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  line-height: 0;
}

.shot-frame img {
  display: block;
  width: 100%;
  height: auto;
}

.shot figcaption {
  margin-top: 14px;
}

.shot figcaption h3 {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}

.shot figcaption p {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
}

@media (min-width: 760px) {
  .shot-row {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-columns: auto;
    gap: 24px;
    margin-inline: 0;
    padding: 4px 0 8px;
    overflow-x: visible;
  }
}

/* ============================================================
   Material overrides — both swap the token, not the rule.
   ============================================================ */

/* The visitor asked their OS for less transparency. Answer it. */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --material-blur: none;
    --material-bar: var(--material-bar-solid);
  }
}

/* No backdrop-filter in this engine: a tint with nothing blurred behind it is not a material,
   it is just an unreadable bar. Fall back to the opaque twin rather than to see-through. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --material-bar: var(--material-bar-solid);
  }
}

/* Reduced motion: movement goes, the fade that explains it stays. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  /* The setting asks for less movement, not for a page that changes state without saying so.
     The app draws this line in tokens.css: force the property list down to what does not move,
     and leave each element its own duration and easing for whatever survives. An element that
     declared no transition still has none, because the initial `transition-duration` is 0s.

     What this replaces mattered: a blanket `transition-duration: 0.001ms !important` took the
     fades with the movement, so a hover, a pressed button and a revealed section all became
     instant swaps — the visitor who asked for calmer motion got a harsher page than the default. */
  *,
  *::before,
  *::after {
    transition-property:
      opacity, color, background-color, border-color, box-shadow, fill, stroke !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }

  /* Must out-rank the html.js gate above. The section still fades in on scroll — that fade is
     what tells the visitor the page is arriving in pieces — it just no longer travels 14px. */
  html.js .reveal {
    transform: none;
  }
}

/* ============================================================
   Press feedback — two tiers, the app's (tokens.css `.press` / `.press-lg` / `.press-soft`)
   ============================================================ */

/* Which tier a control gets is a question about its geometry, not its importance:

   scale   — a control with its own edges, small enough that shrinking the whole thing reads
             as the press rather than as the page moving. The pill buttons.
   scale-lg— the same idea on a wide surface, where 0.97 would be a lurch. The FAQ rows.
   opacity — a control that has no edges of its own, or that lives inside a container whose
             geometry the scale would break: the segments inside a pill, and text links sitting
             in a paragraph or a footer column. Scaling those moves type against type.

   Before this, exactly one selector on the page answered a touch: `.btn`. The language switch,
   the pricing toggle, all eighteen FAQ rows and every text link took a tap in silence. */

.faq-list summary,
.lang-btn,
.seg-btn,
.logo,
.footer-links a,
.hero-alt a,
.final-alt a {
  transition:
    transform var(--dur-fast) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    background var(--dur-base) var(--ease-out);
}

.faq-list summary:active {
  transform: scale(var(--press-scale-lg));
}

.lang-btn:active,
.seg-btn:active,
.logo:active,
.footer-links a:active,
.hero-alt a:active,
.final-alt a:active {
  opacity: var(--press-opacity);
}

/* ============================================================
   D212 additions — protection-led IA components
   ============================================================ */

:root {
  --warn-text: #b26b00;
  --warn-soft: rgba(245, 166, 35, 0.14);
}

@media (prefers-color-scheme: dark) {
  :root {
    --warn-text: #ffb84d;
    --warn-soft: rgba(245, 166, 35, 0.18);
  }
}

/* Alternating section backgrounds */
.alt {
  background: var(--bg-alt);
}

.eyebrow.center {
  text-align: center;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Marketplace strip ---------- */
.strip {
  padding: 30px 0 34px;
  border-bottom: 1px solid var(--separator);
}

.strip-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  justify-content: center;
  padding: 0;
  margin: 0;
}

.strip-list li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 600;
  background: var(--surface);
}

.strip-note {
  margin-top: 14px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 14px;
}

/* ---------- Split sections (copy + visual) ---------- */
.split-grid {
  display: grid;
  gap: 36px;
  align-items: center;
}

@media (min-width: 900px) {
  .split-grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 56px;
  }
}

.split-copy h2 {
  text-align: left;
  margin-top: 10px;
}

.split-sub {
  margin-top: 14px;
  color: var(--text-secondary);
}

.split-bullets {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: grid;
  gap: 10px;
}

.split-bullets li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  color: var(--text-secondary);
}

.split-bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 7L10 17l-5-5' fill='none' stroke='%230e9f77' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 10px;
  background-position: center;
  background-repeat: no-repeat;
}

/* ---------- Panels (visual mock cards outside the phone) ---------- */
.split-visual,
.tour-visual {
  display: flex;
  justify-content: center;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: 20px;
  width: min(420px, 100%);
}

.panel-head {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
  font-weight: 700;
  font-size: 15px;
  padding-bottom: 12px;
}

/* ---------- Chips ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  background: var(--bg-alt);
  color: var(--text-secondary);
  white-space: nowrap;
}

.chip-warn {
  background: var(--warn-soft);
  color: var(--warn-text);
}

.chip-ok,
.chip-new,
.chip-plan {
  background: var(--accent-soft);
  color: var(--accent-press);
}

.chip-btn {
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 8px 14px;
  font-size: 13px;
}

.chip-btn.primary {
  background: var(--accent);
  color: var(--text-on-accent);
  border-color: transparent;
}

/* ---------- Pre-publish check card ---------- */
.check-row {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 9px 0;
  font-size: 14px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--separator);
}

.check-row:last-of-type {
  border-bottom: 0;
}

.check-ic {
  flex: none;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
}

.check-row.ok .check-ic {
  background: var(--accent-soft);
  color: var(--accent-press);
}

.check-row.warn .check-ic {
  background: var(--warn-soft);
  color: var(--warn-text);
}

.check-row.warn {
  color: var(--text-primary);
  font-weight: 600;
}

.check-fix {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  color: var(--accent-press);
  font-size: 13px;
  font-weight: 600;
}

/* ---------- Digest lines inside the hero phone ---------- */
.mock-group {
  margin: 10px 0 2px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-tertiary);
  letter-spacing: 0.03em;
}

.mock-line {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: 12.5px;
  color: var(--text-secondary);
}

.mock-line-ic {
  flex: none;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 800;
}

.mock-line.ok .mock-line-ic {
  background: var(--accent-soft);
  color: var(--accent-press);
}

.mock-line.warn .mock-line-ic {
  background: var(--warn-soft);
  color: var(--warn-text);
}

/* ---------- Order card ---------- */
.order-card .panel-head {
  justify-content: flex-start;
}

.order-card .panel-head .chip-new {
  margin-left: auto;
}

.order-product {
  font-size: 14.5px;
  font-weight: 600;
}

.order-sla {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 9px 12px;
  border-radius: var(--radius-md);
  background: var(--warn-soft);
  color: var(--warn-text);
  font-size: 13px;
  font-weight: 600;
}

.order-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

/* ---------- Flow card (photo → AI → confirm → publish) ---------- */
.flow-step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  font-size: 14px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--separator);
}

.flow-step:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.flow-step:first-child {
  padding-top: 0;
}

.flow-num {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-press);
  font-weight: 700;
  font-size: 13px;
}

/* ---------- Chart card ---------- */
.chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 120px;
}

.chart-bars span {
  flex: 1;
  height: var(--h);
  background: linear-gradient(180deg, var(--accent), var(--accent-hover));
  border-radius: 6px 6px 2px 2px;
  opacity: 0.9;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--text-secondary);
}

.chart-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ---------- Review card ---------- */
.review-stars {
  color: #f5a623;
  font-size: 15px;
  letter-spacing: 2px;
}

.review-text {
  font-size: 14.5px;
  color: var(--text-primary);
}

.review-note {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--text-tertiary);
}

/* ---------- Capability tour ---------- */
.tour-row {
  display: grid;
  gap: 28px;
  margin-top: 56px;
  align-items: center;
}

.tour-row:first-of-type {
  margin-top: 48px;
}

@media (min-width: 900px) {
  .tour-row {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 56px;
  }

  .tour-row:nth-of-type(even) .tour-copy {
    order: 2;
  }

  .tour-row:nth-of-type(even) .tour-visual {
    order: 1;
  }
}

.tour-copy h3 {
  margin-top: 16px;
  font-size: 22px;
  letter-spacing: -0.01em;
}

.tour-copy > p {
  margin-top: 10px;
  color: var(--text-secondary);
}

/* ---------- AI honesty banner ---------- */
.ai-note {
  margin-top: 64px;
  padding: 28px;
  border-radius: var(--radius-xl);
  background: var(--accent-soft);
  border: 1px solid var(--accent-ring);
  text-align: center;
}

.ai-note h3 {
  font-size: 18px;
  color: var(--accent-press);
}

.ai-note p {
  margin: 10px auto 0;
  max-width: 640px;
  color: var(--text-secondary);
  font-size: 15px;
}

/* ---------- Marketplace capability matrix ---------- */
.matrix-wrap {
  margin-top: 44px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface);
  overflow: hidden;
}

table.matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}

.matrix th,
.matrix td {
  padding: 13px 16px;
  text-align: center;
  border-bottom: 1px solid var(--separator);
}

.matrix thead th {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  background: var(--bg-alt);
}

.matrix thead th:first-child,
.matrix tbody th {
  text-align: left;
}

.matrix tbody th {
  font-weight: 600;
  color: var(--text-primary);
}

.matrix tbody tr:last-child th,
.matrix tbody tr:last-child td {
  border-bottom: 0;
}

.matrix thead .mp-dot {
  display: inline-block;
  margin-right: 6px;
  vertical-align: middle;
}

.mx {
  font-weight: 700;
}

.mx.yes {
  color: var(--accent);
}

.mx.no {
  color: var(--text-tertiary);
}

.mx.part {
  font-size: 12px;
  padding: 2px 8px;
  background: var(--warn-soft);
  color: var(--warn-text);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

@media (max-width: 759px) {
  .matrix,
  .matrix tbody,
  .matrix tr,
  .matrix th,
  .matrix td {
    display: block;
  }

  .matrix thead {
    display: none;
  }

  .matrix tbody tr {
    padding: 14px 16px;
    border-bottom: 1px solid var(--separator);
  }

  .matrix tbody tr:last-child {
    border-bottom: 0;
  }

  .matrix tbody th {
    padding: 0 0 8px;
    border: 0;
  }

  .matrix td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    border: 0;
    text-align: right;
  }

  .matrix td::before {
    content: attr(data-mp);
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
  }
}

.matrix-note {
  margin: 18px auto 0;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 13.5px;
  max-width: 640px;
}

/* ---------- Personas (kimlar uchun) ---------- */
.fit-grid {
  display: grid;
  gap: 16px;
  margin-top: 44px;
}

@media (min-width: 760px) {
  .fit-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.fit-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
}

.fit-card.featured {
  border: 2px solid var(--accent);
  box-shadow: var(--shadow-md);
}

.fit-card h3 {
  font-size: 17px;
}

.fit-card p {
  margin-top: 10px;
  color: var(--text-secondary);
  font-size: 15px;
  flex: 1;
}

.fit-card .chip-plan {
  margin-top: 16px;
  align-self: flex-start;
}

/* ---------- Coach grid: 4-up on wide screens ---------- */
@media (min-width: 980px) {
  .coach-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---------- Segmented control (pricing period) ---------- */
.seg {
  display: flex;
  gap: 4px;
  width: fit-content;
  margin: 28px auto 0;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
}

.seg-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 7px 18px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out);
}

.seg-btn.active {
  background: var(--accent);
  color: var(--text-on-accent);
}

.seg-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--accent-ring);
}

.seg-badge {
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: var(--warn-soft);
  color: var(--warn-text);
  font-size: 12px;
  font-weight: 700;
}

.seg-btn.active .seg-badge {
  background: rgba(255, 255, 255, 0.22);
  color: inherit;
}

/* ---------- Yearly total line under plan price ---------- */
.plan-year {
  margin-top: 6px;
  font-size: 13px;
  color: var(--text-tertiary);
}

.plan-year .num {
  font-weight: 700;
  color: var(--text-secondary);
}

/* ---------- Referral banner ---------- */
.ref-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 28px;
  margin-top: 48px;
  padding: 26px 28px;
  border-radius: var(--radius-xl);
  background: var(--accent-soft);
  border: 1px solid var(--accent-ring);
}

.ref-banner h3 {
  font-size: 19px;
  color: var(--accent-press);
}

.ref-banner p {
  margin-top: 8px;
  max-width: 560px;
  color: var(--text-secondary);
  font-size: 15px;
}

.ref-banner .btn {
  flex: none;
}

/* ---------- Scroll-spy active nav link ---------- */
.nav-links a[aria-current] {
  color: var(--accent);
  font-weight: 600;
}

/* ---------- Browser-version links (hero + final CTA) ---------- */
.hero-alt {
  margin-top: 18px;
  font-size: 14.5px;
}

/* `inline-flex` rather than a padded inline box: the text still wraps at 390px, and the
   line keeps a real height whether it wraps to two lines or fits on one. */
.hero-alt a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--accent);
  font-weight: 600;
}

@media (hover: hover) and (pointer: fine) {
  .hero-alt a:hover {
    color: var(--accent-hover);
  }
}

.final-alt {
  margin-top: 16px;
  font-size: 14.5px;
}

.final-alt a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .final-alt a:hover {
    color: #fff;
  }
}