/* Landing page, interface v2 (landing.html behind the gate — app/ui_v2.py
   V2_AWARE; loaded instead of its v1 <style> block). v1's .lp-* markup on
   the ambient background: no full-width bands — every section's content
   sits on glass, the headings are centred, the buttons are capsules, the
   line icons are tiles and the FAQ is one grouped list. Every rule is
   scoped under html.v2 (tests/test_ui_v2.py). */

html.v2 .v2-main--landing { max-width: 1120px; }

/* Glass for the blocks v1 drew as bands or plain boxes. */
html.v2 .lp-stats-inner, html.v2 .lp-step, html.v2 .lp-brands, html.v2 .lp-faq, html.v2 .lp-final-cta {
  background: var(--v2-glass-bg); border: 1px solid var(--v2-glass-border); box-shadow: var(--v2-glass-shadow);
  -webkit-backdrop-filter: var(--v2-glass-filter); backdrop-filter: var(--v2-glass-filter);
}

/* ── Hero ─────────────────────────────────────────────────────────── */
html.v2 .lp-hero { padding: 64px 16px 36px; text-align: center; background: none; border: 0; }
html.v2 .lp-badge {
  display: inline-flex; align-items: center; height: 30px; padding: 0 14px; margin: 0 0 22px;
  border: 0; border-radius: 999px; background: rgba(5, 150, 105, .12); color: var(--v2-accent-text);
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
html.v2 .lp-hero h1 {
  max-width: 860px; margin: 0 auto 18px; color: var(--v2-ink);
  font-size: clamp(34px, 5.4vw, 60px); font-weight: 800; line-height: 1.06; letter-spacing: -.025em;
}
html.v2 .lp-hero h1 span { color: var(--v2-accent-text); }
html.v2 .lp-hero h1, html.v2 .v2-main--landing h2 { text-wrap: balance; }
html.v2 .lp-hero p { max-width: 620px; margin: 0 auto 30px; font-size: 18px; line-height: 1.55; color: var(--v2-ink-sec); }
html.v2 .lp-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
html.v2 .lp-cta .btn { min-width: 190px; }

/* ── Stat strip: one glass card, four figures ─────────────────────── */
html.v2 .lp-stats { max-width: 960px; margin: 8px auto 0; padding: 0; background: none; border: 0; }
html.v2 .lp-stats-inner { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 22px 8px; border-radius: 28px; }
html.v2 .lp-stat { padding: 2px 10px; text-align: center; }
html.v2 .lp-stat + .lp-stat { border-left: 1px solid var(--v2-sep); }
html.v2 .lp-stat-num { font: 700 30px/1.15 var(--v2-font-round); letter-spacing: -.01em; color: var(--v2-accent-text); }
html.v2 .lp-stat-label { margin-top: 4px; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--v2-ink-sec); }

/* ── Sections ─────────────────────────────────────────────────────── */
html.v2 .lp-section, html.v2 .lp-benefits-section, html.v2 .lp-pricing-section {
  max-width: 1040px; margin: 0 auto; padding: 72px 0 0; background: none; border: 0;
}
html.v2 .lp-benefits-inner, html.v2 .lp-pricing-section .lp-inner { max-width: none; margin: 0; padding: 0; }
html.v2 .v2-main--landing h2 {
  margin: 0 0 8px; text-align: center; color: var(--v2-ink);
  font-size: 34px; font-weight: 800; line-height: 1.15; letter-spacing: -.02em;
}
html.v2 .lp-sub { max-width: 640px; margin: 0 auto 30px; text-align: center; font-size: 16px; line-height: 1.5; color: var(--v2-ink-sec); }
html.v2 .lp-sub a { color: var(--v2-accent-text) !important; font-weight: 600; text-decoration: none; }

/* How it works: three glass cards with a numbered squircle. */
html.v2 .lp-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
html.v2 .lp-step { padding: 26px 24px; border-radius: 26px; }
html.v2 .lp-step-num {
  display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0 0 16px;
  border-radius: 12px; background: linear-gradient(180deg, var(--v2-btn-top), var(--v2-btn-bottom));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 6px 14px rgba(4, 120, 87, .25);
  font: 700 17px var(--v2-font-round); color: #fff;
}
html.v2 .lp-step h3, html.v2 .lp-benefit h3 { margin: 0 0 8px; font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--v2-ink); }
html.v2 .lp-step p, html.v2 .lp-benefit p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--v2-ink-sec); }

/* Benefits: four glass cards, each led by a tile. */
html.v2 .lp-benefits-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
html.v2 .lp-benefit { padding: 24px 22px; border-radius: 26px; }
html.v2 .lp-benefit .v2-tile { margin: 0 0 16px; }

/* ── Supported brands: capsules, the coming ones dashed ───────────── */
html.v2 .lp-brands { max-width: 1040px; margin: 72px auto 0; padding: 26px 24px; border-radius: 28px; text-align: center; }
html.v2 .lp-brands > p { margin: 0 0 16px; font-size: 13px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--v2-ink-sec); }
html.v2 .lp-brand-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
html.v2 .lp-brand-list--soon { margin-top: 12px; }
html.v2 .lp-brand-pill {
  display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 6px 16px 6px 9px; box-sizing: border-box;
  border-radius: 999px; font-size: 14px; font-weight: 600; line-height: 1.3; text-align: left;
}
html.v2 .lp-brand-pill img {
  width: 22px; height: 22px; padding: 2px; box-sizing: border-box; object-fit: contain;
  border-radius: 7px; background: #fff; box-shadow: 0 0 0 1px rgba(6, 78, 59, .08);
}
html.v2 .lp-brand-pill .v2-icon { width: 18px; height: 18px; flex-shrink: 0; }
html.v2 .lp-brand-pill.active {
  border: 1px solid var(--v2-chrome-border); background: var(--v2-chrome-bg); color: var(--v2-ink);
  box-shadow: 0 2px 8px rgba(6, 78, 59, .08);
}
html.v2 .lp-brand-pill.active > .v2-icon { padding: 2px; box-sizing: content-box; border-radius: 7px; background: #fff; color: #1f3a30; box-shadow: 0 0 0 1px rgba(6, 78, 59, .08); }
html.v2 .lp-brand-pill.beta { border-color: rgba(5, 150, 105, .3); background: rgba(5, 150, 105, .10); color: var(--v2-accent-text); }
html.v2 .lp-brand-pill.beta > .v2-icon { background: none; box-shadow: none; color: inherit; }
html.v2 .lp-brand-pill.soon { padding: 6px 16px; border: 1px dashed var(--v2-fill-2); background: none; color: var(--v2-ink-sec); }
html.v2 .lp-brand-pill.soon > .v2-icon { margin-left: -4px; }

/* ── Pricing: two glass plans ─────────────────────────────────────── */
html.v2 .lp-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 360px)); justify-content: center; gap: 18px; }
html.v2 .lp-plan { position: relative; display: flex; flex-direction: column; padding: 28px 26px 24px; border-radius: 28px; }
html.v2 .lp-plan-featured { box-shadow: var(--v2-glass-shadow), inset 0 0 0 2px var(--v2-accent); }
html.v2 .lp-plan-badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: 999px; white-space: nowrap;
  background: linear-gradient(180deg, var(--v2-btn-top), var(--v2-btn-bottom)); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
html.v2 .lp-plan-name { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--v2-ink-sec); }
html.v2 .lp-plan-price { margin: 8px 0 4px; font: 800 44px/1.05 var(--v2-font-round); letter-spacing: -.02em; color: var(--v2-ink); }
html.v2 .lp-plan-price span { font: 500 15px var(--v2-font); letter-spacing: 0; color: var(--v2-ink-sec); }
html.v2 .lp-plan-per { font-size: 14px; color: var(--v2-ink-sec); }
html.v2 .lp-plan ul { flex: 1; margin: 18px 0 22px; padding: 0; list-style: none; }
html.v2 .lp-plan ul li { position: relative; padding: 10px 0 10px 30px; border-bottom: 1px solid var(--v2-sep); font-size: 15px; color: var(--v2-ink-2); }
html.v2 .lp-plan ul li:last-child { border-bottom: 0; }
html.v2 .lp-plan ul li::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%;
  background: rgba(5, 150, 105, .14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23059669' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 12px 12px;
}
html.v2 .lp-pricing-section .hint { margin-top: 20px; text-align: center; font-size: 14px; line-height: 1.5; color: var(--v2-ink-sec); }

/* ── FAQ: one grouped list, a chevron per row ─────────────────────── */
html.v2 .lp-faq { display: block; max-width: 840px; margin: 0 auto; border-radius: 26px; overflow: hidden; }
html.v2 .lp-faq-item { margin: 0; border: 0; border-top: 1px solid var(--v2-sep); border-radius: 0; background: none; box-shadow: none; }
html.v2 .lp-faq-item:first-child { border-top: 0; }
html.v2 .lp-faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px;
  list-style: none; cursor: pointer; font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--v2-ink);
}
html.v2 .lp-faq-item summary::-webkit-details-marker { display: none; }
html.v2 .lp-faq-item summary::after {
  content: ""; flex-shrink: 0; width: 16px; height: 16px; transition: transform .2s ease;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%236b7c74' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
html.v2 .lp-faq-item[open] summary::after { transform: rotate(180deg); }
html.v2 .lp-faq-item summary:focus-visible { outline: 2px solid var(--v2-accent); outline-offset: -2px; }
html.v2 .lp-faq-item .faq-body { padding: 0 22px 20px; font-size: 15px; line-height: 1.6; color: var(--v2-ink-sec); }
html.v2 .lp-faq-item .faq-body strong { font-weight: 600; color: var(--v2-ink); }
html.v2 .lp-faq-item .faq-body a { font-weight: 600; text-decoration: none; color: var(--v2-accent-text); }
html.v2 .lp-formula {
  margin: 12px 0; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--v2-inset-border);
  background: var(--v2-inset-bg); font: 13px/1.65 var(--v2-mono); color: var(--v2-ink-2); overflow-x: auto;
}
html.v2 .lp-formula .k { font-weight: 600; color: var(--v2-accent-text); }
html.v2 .lp-formula .c { color: var(--v2-ink-ter); }

/* ── Final call and footer ────────────────────────────────────────── */
html.v2 .lp-final-cta { max-width: 1040px; margin: 72px auto 0; padding: 48px 24px; border-radius: 32px; text-align: center; }
html.v2 .lp-final-cta h2 { margin-bottom: 10px; }
html.v2 .lp-final-cta p { max-width: 560px; margin: 0 auto 24px; font-size: 16px; line-height: 1.5; color: var(--v2-ink-sec); }
html.v2 .lp-footer { margin: 36px 0 0; padding: 20px 0 4px; border: 0; background: none; text-align: center; font-size: 13px; color: var(--v2-ink-sec); }
html.v2 .lp-footer p { margin: 4px 0; }
html.v2 .lp-footer a { font-weight: 500; text-decoration: none; color: var(--v2-accent-text); }
@media (hover: hover) { html.v2 .lp-footer a:hover { text-decoration: underline; } }

@media (prefers-reduced-motion: reduce) { html.v2 .lp-faq-item summary::after { transition: none; } }

/* ── Narrower windows ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  html.v2 .lp-benefits-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  html.v2 .lp-steps { grid-template-columns: minmax(0, 1fr); }
  html.v2 .lp-plans { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  html.v2 .lp-stats-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
  html.v2 .lp-stat:nth-child(3) { border-left: 0; }
}
@media (max-width: 600px) {
  html.v2 .lp-hero { padding: 36px 4px 26px; }
  html.v2 .lp-hero h1 br { display: none; }   /* v1's break leaves „износ“ alone on a line */
  html.v2 .lp-hero p { font-size: 16px; }
  html.v2 .lp-cta .btn { flex: 1 1 100%; min-width: 0; }
  html.v2 .lp-stat-num { font-size: 26px; }
  html.v2 .v2-main--landing h2 { font-size: 27px; }
  html.v2 .lp-sub { margin-bottom: 22px; font-size: 15px; }
  html.v2 .lp-section, html.v2 .lp-benefits-section, html.v2 .lp-pricing-section { padding-top: 52px; }
  html.v2 .lp-brands, html.v2 .lp-final-cta { margin-top: 52px; }
  html.v2 .lp-benefits-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  html.v2 .lp-step, html.v2 .lp-benefit { padding: 22px 20px; }
  html.v2 .lp-brands { padding: 22px 14px; }
  html.v2 .lp-brand-pill { min-height: 34px; font-size: 13px; }
  html.v2 .lp-faq-item summary { padding: 16px 18px; font-size: 15px; }
  html.v2 .lp-faq-item .faq-body { padding: 0 18px 18px; font-size: 14.5px; }
  html.v2 .lp-final-cta { padding: 36px 18px; }
}