:root {
  --paper: #F4F1EA;
  --card: #FFFFFF;
  --ink: #14130F;
  --muted: #6E6A60;
  --line: #E2DDD2;
  --chip: #EAE6DC;
  --lime: #D6F25C;
  --rust: #B23A00;
  --rust-bg: #FBE3D6;
  --green: #2E9E6A;
  --blue: #1F4DFF;
  --radio-off: #B9B3A6;
  --tip-bg: #FFF4CC;
  --tip-ink: #5C4A12;
  --tip-icon: #8A6100;
  --display: "Unbounded", system-ui, sans-serif;
  --text: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.5 var(--text);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; }

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

.page {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 80px 64px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* ---------- Nav ---------- */
.nav { height: 80px; display: flex; align-items: center; justify-content: space-between; }
.logo {
  display: inline-flex; align-items: center; gap: 5px;
  font: 600 18px var(--display); letter-spacing: -0.5px;
  color: var(--ink); text-decoration: none;
}
.logo-pill {
  padding: 4px 7px;
  border-radius: 7px;
  background: var(--ink); color: var(--lime);
  font-size: 14px; letter-spacing: 0; line-height: 1.2;
}
.nav-right { display: flex; align-items: center; gap: 24px; }
.nav-link { font: 500 14px var(--text); color: var(--muted); text-decoration: none; }
.nav-link:hover { color: var(--ink); }
.share {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--ink);
  border-radius: 99px;
  background: none;
  font: 600 13px var(--text);
}
.share .i { width: 14px; height: 14px; }
.share:hover { background: var(--ink); color: var(--paper); }

/* ---------- Hero ---------- */
.hero { display: grid; grid-template-columns: 1fr 620px; gap: 24px; min-height: 420px; }
.hero > * { min-width: 0; }
.headline { display: flex; flex-direction: column; justify-content: space-between; padding: 8px 0; gap: 24px; }
.eyebrow { font: 700 12px var(--text); letter-spacing: 1.5px; color: var(--muted); }
h1 { font: 600 64px/1.05 var(--display); letter-spacing: -2px; max-width: 9.5em; }
.lead { max-width: 460px; font-size: 17px; color: var(--muted); }

.answer {
  background: var(--lime);
  border-radius: 28px;
  padding: 36px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
}
.intro-top { display: flex; align-items: center; gap: 8px; font: 700 14px var(--text); }
.intro-copy { display: flex; flex-direction: column; gap: 14px; }
.intro-title { font: 600 40px/1.12 var(--display); letter-spacing: -1.2px; }
.intro-text { font-size: 16px; line-height: 1.45; color: rgba(20, 19, 15, .7); }
.intro-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.steps { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.steps a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px 6px 6px;
  border: 1px solid rgba(20, 19, 15, .25); border-radius: 99px;
  font: 700 12px var(--text); color: var(--ink); text-decoration: none;
}
.steps a:hover { border-color: var(--ink); }
.step-n {
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ink); color: var(--lime);
  font: 700 11px var(--text);
}
.cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 20px;
  border-radius: 99px;
  background: var(--ink); color: #fff;
  font: 700 15px var(--text); text-decoration: none;
  white-space: nowrap;
}
.cta .i { width: 16px; height: 16px; color: var(--lime); }
.cta:hover { background: #000; }
.row { scroll-margin-top: 16px; }

/* ---------- Parameters ---------- */
.params { background: var(--card); border-radius: 28px; padding: 8px 40px; }
.row { display: flex; gap: 40px; padding: 32px 0; border-bottom: 1px solid var(--line); }
.row:last-child { border-bottom: 0; }
.row-label { width: 340px; flex: none; display: flex; gap: 18px; }
.row-num { font: 500 14px/1.9 var(--display); color: var(--muted); }
h2 { font: 500 20px/1.2 var(--display); }
.row-hint { margin-top: 6px; font-size: 13px; color: var(--muted); }
.row-control { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }

.brands { display: flex; gap: 12px; }
.brand {
  flex: 1;
  display: flex; flex-direction: column; gap: 2px;
  padding: 16px 20px;
  border: 0; border-radius: 16px;
  background: var(--paper);
  text-align: left;
}
.brand-top { display: flex; align-items: center; justify-content: space-between; }
.brand-name { font: 700 17px var(--text); }
.brand-sub { font-size: 13px; color: var(--muted); }
.brand .i { color: var(--radio-off); }
.brand .on { display: none; }
.brand[aria-checked="true"] { background: var(--ink); color: #fff; }
.brand[aria-checked="true"] .brand-sub { color: rgba(255, 255, 255, .6); }
.brand[aria-checked="true"] .on { display: block; color: var(--lime); }
.brand[aria-checked="true"] .off { display: none; }
.brand-name { display: inline-flex; align-items: center; gap: 8px; }
.brand .season-icon { color: var(--ink); }
.brand[aria-checked="true"] .season-icon { color: var(--lime); }

.select { position: relative; }
.select select {
  width: 100%; height: 56px;
  padding: 0 52px 0 20px;
  border: 0; border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  font: 600 16px var(--text);
  appearance: none; -webkit-appearance: none;
  cursor: pointer;
  text-overflow: ellipsis;
}
.select.tall select { height: 60px; }
.select .i { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
select:focus-visible, input:focus-visible, button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.specs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.spec { border-radius: 99px; padding: 7px 12px; font-size: 13px; color: var(--muted); }
.spec b { margin-left: 4px; font-weight: 700; color: var(--ink); }
.spec.typ { background: var(--chip); }
.spec.max { background: var(--rust-bg); }
.spec.max b { color: var(--rust); }
.src { display: inline-flex; align-items: center; gap: 6px; padding: 0 8px; font: 600 13px var(--text); }
.src .i { width: 14px; height: 14px; }
.src.spec-src { color: var(--green); }
.src.est { color: var(--rust); }
.src.self { color: var(--blue); }

.battery-grid { display: flex; gap: 12px; }
.ah {
  width: 280px; height: 132px; flex: none;
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr;
  align-items: end; column-gap: 8px;
  padding: 20px;
  border: 1.5px solid var(--ink); border-radius: 16px;
  cursor: text;
}
.ah-label { grid-column: 1 / -1; align-self: start; font: 600 12px var(--text); color: var(--muted); }
.ah-value { display: flex; align-items: flex-end; gap: 6px; min-width: 0; }
.ah input {
  width: 2.3ch; max-width: 100%; min-width: 0;
  padding: 0; border: 0; background: none;
  font: 600 44px/1 var(--display); color: var(--ink);
  -moz-appearance: textfield;
}
.ah input::-webkit-outer-spin-button, .ah input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ah input:focus-visible { outline: none; }
.ah:focus-within { box-shadow: 0 0 0 3px rgba(31, 77, 255, .25); }
.ah-unit { font: 600 15px var(--text); color: var(--muted); padding-bottom: 4px; }
.stepper { display: flex; gap: 6px; }
.stepper button {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 0; border-radius: 10px;
  background: var(--paper);
}
.stepper button:disabled { opacity: .35; cursor: default; }
.stepper .i { width: 16px; height: 16px; }
.battery-selects { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }

.warning { display: flex; align-items: center; gap: 8px; color: var(--rust); font: 600 13px var(--text); }
.warning .i { width: 16px; height: 16px; }

.recommend {
  padding: 20px;
  border-radius: 16px;
  background: var(--paper);
  border: 1.5px dashed var(--ink);
}
.recommend[hidden] { display: none; }
.recommend-head { display: flex; align-items: center; gap: 8px; font: 500 16px var(--display); }
.recommend-head .i { color: var(--blue); }
.recommend ul { margin: 12px 0 16px; padding-left: 18px; font-size: 14px; color: var(--muted); }
.recommend li + li { margin-top: 4px; }
.recommend b { color: var(--ink); font-weight: 700; }
.recommend-btn {
  padding: 12px 18px;
  border: 0; border-radius: 99px;
  background: var(--ink); color: var(--lime);
  font: 700 14px var(--text);
}

/* ---------- Bottom ---------- */
.bottom { display: block; }
.energy {
  background: var(--card); border-radius: 28px; padding: 40px;
  display: flex; flex-direction: column; gap: 32px;
}
.runtime {
  background: var(--lime);
  border-radius: 22px;
  padding: 28px 32px;
  display: flex; flex-direction: column; gap: 20px;
}
.runtime-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.runtime-label { font: 700 15px var(--text); white-space: nowrap; }
.pill {
  background: var(--ink); color: var(--lime);
  border-radius: 99px; padding: 6px 12px;
  font: 600 12px var(--text);
  white-space: nowrap;
}
.time { display: flex; align-items: flex-end; white-space: nowrap; }
.time-num { font: 600 104px/0.95 var(--display); letter-spacing: -6px; }
.time-unit { font: 500 28px var(--display); padding: 0 18px 14px 10px; }
.daylight { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.daylight-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.daylight-label { display: flex; align-items: center; gap: 6px; font: 600 14px var(--text); }
.daylight-label .i { width: 16px; height: 16px; }
.verdict {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 6px 12px 6px 8px;
  border-radius: 99px;
  background: var(--ink); color: var(--lime);
  font: 700 12px var(--text);
}
.verdict .i { width: 15px; height: 15px; }
.verdict.short { color: #fff; }
.verdict.bad { background: var(--rust); color: #fff; }
.compare { display: flex; flex-direction: column; gap: 10px; }
.cmp-row { display: grid; grid-template-columns: 210px 1fr 110px; align-items: center; gap: 16px; font: 700 13px var(--text); }
.cmp-val { text-align: right; font-weight: 800; }
.cmp-day .cmp-name { font-weight: 600; color: rgba(20, 19, 15, .7); }
.cmp-bar { display: flex; gap: 2px; height: 14px; }
.cmp-bar i { display: block; height: 100%; border-radius: 4px; transition: width .3s ease; }
.seg-run { background: var(--ink); }
.seg-day { background: rgba(20, 19, 15, .5); }
.seg-day-var { background: rgba(20, 19, 15, .2); }
.runtime-note {
  display: flex; gap: 16px;
  padding-top: 20px;
  border-top: 1px solid rgba(20, 19, 15, .2);
  font-size: 14px; line-height: 1.4;
}
.runtime-source { font-weight: 600; }
.runtime-disclaimer { margin-top: 2px; color: rgba(20, 19, 15, .7); }
.energy-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.energy-label { font: 700 14px var(--text); color: var(--muted); }
.energy-value { display: flex; align-items: flex-end; gap: 8px; margin-top: 6px; }
.energy-value > span:first-child { font: 600 56px/1 var(--display); letter-spacing: -2px; }
.energy-unit { font: 700 18px var(--text); color: var(--muted); }
.formula { background: var(--paper); border-radius: 10px; padding: 8px 14px; font: 600 13px var(--text); white-space: nowrap; }

.breakdown { display: flex; flex-direction: column; gap: 12px; }
.breakdown-title { font: 700 13px var(--text); color: var(--muted); }
.bar { display: flex; gap: 4px; height: 40px; }
.bar span { border-radius: 4px; min-width: 8px; }
.bar span:first-child { border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
.bar span:last-child { border-top-right-radius: 10px; border-bottom-right-radius: 10px; }
.c-head { background: var(--blue); }
.c-sonar { background: var(--ink); }
.legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 14px; }
.legend li { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.legend i { width: 10px; height: 10px; border-radius: 50%; }
.legend b { color: var(--ink); font-weight: 700; }

.tip { display: flex; gap: 14px; padding: 20px; border-radius: 16px; background: var(--tip-bg); }
.tip > .i { width: 20px; height: 20px; color: var(--tip-icon); }
.tip-title { font: 700 14px/1.5 var(--text); }
.tip-text { margin-top: 4px; font-size: 13px; color: var(--tip-ink); }

.order-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 28px;
  border: 2px solid var(--lime); border-radius: 24px;
  background: var(--ink); color: #fff;
}
.order-cta[hidden] { display: none; }
.order-cta-left { display: flex; align-items: center; gap: 24px; min-width: 0; }
.order-cta-tile { width: 84px; height: 84px; flex: none; display: grid; place-items: center; border-radius: 20px; background: var(--lime); color: var(--ink); }
.order-cta-tile .i { width: 40px; height: 40px; }
.order-cta-text { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.order-cta-eyebrow { display: inline-flex; align-items: center; gap: 6px; font: 500 11px var(--display); letter-spacing: 1px; color: var(--lime); }
.order-cta-eyebrow .i { width: 14px; height: 14px; }
.order-cta-title { font: 600 24px/1.15 var(--display); letter-spacing: -0.6px; }
.order-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.order-chips > span {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 99px;
  background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .85);
  font: 600 12px var(--text);
}
.order-chips .i { width: 13px; height: 13px; color: rgba(255, 255, 255, .7); }
.order-cta-btn {
  display: inline-flex; align-items: center; gap: 16px; flex: none;
  padding: 10px 10px 10px 28px;
  border-radius: 99px;
  background: var(--lime); color: var(--ink);
  font: 800 17px var(--text); text-decoration: none; white-space: nowrap;
}
.order-cta-arrow { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--lime); }
.order-cta-arrow .i { width: 20px; height: 20px; }
.order-cta-btn:hover { background: #c9e64a; }

/* ---------- FAQ ---------- */
.faq { display: flex; gap: 80px; padding: 40px 0 8px; scroll-margin-top: 16px; }
.faq-intro { width: 380px; flex: none; display: flex; flex-direction: column; gap: 20px; }
.faq-title { font: 600 32px/1.12 var(--display); letter-spacing: -1.2px; }
.faq-lead { font-size: 15px; line-height: 1.55; color: var(--muted); }
.faq-ask { display: flex; align-items: center; gap: 8px; padding-top: 8px; font: 700 14px var(--text); }
.faq-ask .i { width: 16px; height: 16px; }
.faq-list { flex: 1; min-width: 0; background: var(--card); border-radius: 28px; padding: 8px 40px; }
.faq-item { padding: 26px 0; border-bottom: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 0; }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  list-style: none; cursor: pointer;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-q { font: 500 18px/1.3 var(--display); letter-spacing: -0.3px; }
.faq-toggle {
  width: 36px; height: 36px; flex: none; display: grid; place-items: center;
  border: 1px solid rgba(20, 19, 15, .2); border-radius: 50%;
}
.faq-toggle .i { width: 16px; height: 16px; }
.faq-toggle .minus, .faq-item[open] .faq-toggle .plus { display: none; }
.faq-item[open] .faq-toggle .minus { display: block; }
.faq-item[open] .faq-toggle { background: var(--ink); border-color: var(--ink); color: var(--lime); }
.faq-a { margin-top: 14px; padding-right: 60px; font-size: 15px; line-height: 1.6; color: rgba(20, 19, 15, .7); }

/* ---------- Notes & footer ---------- */
.notes { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding-top: 8px; }
.notes h3 { font: 500 16px var(--display); margin-bottom: 8px; }
.notes p { font-size: 14px; color: var(--muted); }
.notes > div { scroll-margin-top: 24px; }
.footer { display: flex; gap: 40px; padding-top: 8px; }
.footer-logo { font: 500 13px var(--display); color: var(--muted); white-space: nowrap; }
.footer p { font-size: 13px; color: var(--muted); }

/* ---------- Order page ---------- */
.order-head { display: flex; flex-direction: column; gap: 20px; }
.back { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font: 500 14px var(--text); color: var(--muted); text-decoration: none; }
.back .i { width: 16px; height: 16px; }
.back:hover { color: var(--ink); }
.order-head h1 { max-width: none; letter-spacing: -2.2px; }
.order-head .lead { max-width: 620px; }

.order-main { display: grid; grid-template-columns: 1fr 460px; gap: 20px; }
.order-main > * { min-width: 0; }
.battery-card {
  background: var(--card); border: 1px solid rgba(20, 19, 15, .1); border-radius: 28px;
  padding: 40px; display: flex; flex-direction: column; gap: 32px;
}
.battery-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.eyebrow-sm { font: 500 12px var(--display); letter-spacing: 1px; color: var(--muted); }
.badge-ok {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 99px;
  background: var(--lime); font: 700 12px var(--text);
}
.badge-ok .i { width: 14px; height: 14px; }
.battery-model { font: 600 44px/1.05 var(--display); letter-spacing: -1.4px; }
.battery-sub { margin-top: 10px; font: 500 16px var(--text); color: var(--muted); }
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.tile { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: 16px; background: var(--paper); }
.tile-label { font: 600 12px var(--text); color: var(--muted); }
.tile-value { display: flex; align-items: flex-end; gap: 5px; font: 600 13px var(--text); color: var(--muted); }
.tile-value b { font: 600 30px/1 var(--display); color: var(--ink); }
.fit {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 24px; border-radius: 18px; background: var(--ink); color: #fff;
}
.fit-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.fit-left > .i { width: 22px; height: 22px; color: var(--lime); }
.fit-title { font: 700 15px var(--text); }
.fit-sub { margin-top: 4px; font: 500 13px var(--text); color: rgba(255, 255, 255, .6); }
.fit-time { display: flex; align-items: flex-end; gap: 4px; flex: none; font: 600 13px var(--text); color: rgba(214, 242, 92, .7); }
.fit-time b { font: 600 32px/1 var(--display); color: var(--lime); }
.fit-time b + b, .fit-time b:last-of-type { margin-left: 6px; }
.included-title { font: 700 13px var(--text); margin-bottom: 12px; }
.included ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.included li { display: flex; align-items: center; gap: 10px; font: 500 14px var(--text); color: rgba(20, 19, 15, .8); }
.included li .i { width: 16px; height: 16px; color: var(--ink); }

.contact {
  background: var(--lime); border-radius: 28px; padding: 36px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 28px;
}
.contact-copy h2 { font: 600 32px/1.1 var(--display); letter-spacing: -1px; }
.contact-copy p { margin-top: 12px; font-size: 15px; color: rgba(20, 19, 15, .7); }
.contact-actions { display: flex; flex-direction: column; gap: 14px; }
.avito {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 18px 20px; border-radius: 20px; background: var(--ink); color: #fff; text-decoration: none;
}
.avito[hidden], .divider[hidden], .phone[hidden], .contact-empty[hidden] { display: none; }
.avito-left, .phone-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.avito-logo, .phone-icon { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 12px; }
.avito-logo { background: #fff; color: var(--ink); }
.avito-logo .i { width: 22px; height: 22px; }
.avito-title { display: block; font: 700 16px var(--text); }
.avito-sub { display: block; margin-top: 3px; font: 500 12px var(--text); color: rgba(255, 255, 255, .6); }
.avito-arrow { width: 20px; height: 20px; color: var(--lime); }
.divider { display: flex; align-items: center; gap: 12px; font: 600 12px var(--text); color: rgba(20, 19, 15, .6); }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: rgba(20, 19, 15, .2); }
.phone {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 14px;
  padding: 18px 20px; border-radius: 20px; border: 1.5px solid var(--ink);
}
.phone-icon { border: 1px solid rgba(20, 19, 15, .25); }
.phone-icon .i { width: 20px; height: 20px; }
.phone-number { display: block; font: 500 16px var(--display); letter-spacing: .5px; white-space: nowrap; }
.phone-hours { display: block; margin-top: 3px; font: 500 12px var(--text); color: rgba(20, 19, 15, .6); }
.phone-buttons { display: flex; align-items: center; gap: 8px; flex: none; margin-left: auto; }
.phone-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px; border: 0; border-radius: 99px;
  background: var(--ink); color: #fff; font: 700 13px var(--text); text-decoration: none;
}
.phone-btn .i { width: 14px; height: 14px; color: var(--lime); }
.phone-btn[hidden], .phone-copy[hidden] { display: none; }
.phone-copy {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid rgba(20, 19, 15, .25); border-radius: 50%; background: none;
}
.phone-copy .i { width: 16px; height: 16px; }
.phone-copy.done { background: var(--ink); color: var(--lime); }
.phone.revealed { background: #fff; border-color: #fff; }
.phone.revealed .phone-icon { background: var(--lime); border-color: var(--lime); }
.contact-empty { font: 600 14px var(--text); }
.messengers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.messengers[hidden], .messenger[hidden] { display: none; }
.messenger {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  padding: 12px 14px; border: 0; border-radius: 18px;
  background: #fff; color: var(--ink); text-align: left;
}
.messenger:hover { background: #fafaf5; }
.messenger-logo { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 10px; color: #fff; }
.messenger-logo .i { width: 18px; height: 18px; }
.messenger-logo.tg { background: #2AABEE; }
.messenger-logo.max { background: linear-gradient(225deg, #3C6CFF, #9C3CF5); }
.messenger-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.messenger-name { font: 700 15px var(--text); }
.messenger-sub { font: 500 12px var(--text); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.messenger-arrow { width: 16px; height: 16px; }
.fine { display: flex; align-items: center; gap: 8px; font: 600 13px var(--text); }
.fine .i { width: 16px; height: 16px; }

/* ---------- 404 ---------- */
.notfound { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding: 80px 0 120px; }
.notfound h1 { max-width: none; }

/* ---------- Tablet ---------- */
@media (max-width: 1180px) {
  .page { padding: 0 32px 48px; }
  .hero { grid-template-columns: 1fr; }
  .intro-bottom { flex-direction: column; align-items: stretch; }
  .steps { flex-wrap: wrap; }
  .hero { min-height: 0; }
  .row-label { width: 260px; }
  .order-main { grid-template-columns: 1fr; }
  .faq { flex-direction: column; gap: 32px; }
  .faq-intro { width: auto; }
}

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
  .page { padding: 0 16px 32px; gap: 20px; }
  .nav { height: 60px; }
  .logo { font-size: 16px; gap: 4px; }
  .logo-pill { font-size: 13px; padding: 4px 6px; border-radius: 6px; }
  .nav-link, .share-text, .eyebrow-ver { display: none; }
  .share { width: 40px; height: 40px; padding: 0; justify-content: center; }
  .share .i { width: 16px; height: 16px; }

  .headline { padding: 4px; gap: 12px; }
  .eyebrow { font-size: 11px; }
  h1 { font-size: 34px; letter-spacing: -1px; }
  .lead { font-size: 14px; }

  .answer { border-radius: 24px; padding: 22px; gap: 22px; }
  .intro-top { font-size: 13px; }
  .intro-top .i { width: 16px; height: 16px; }
  .intro-copy { gap: 10px; }
  .intro-title { font-size: 26px; letter-spacing: -0.6px; }
  .intro-text { font-size: 14px; }
  .intro-bottom { gap: 14px; }
  .steps { gap: 6px 4px; }
  .steps a { gap: 4px; padding: 4px 7px 4px 4px; font-size: 11px; }
  .step-n { width: 18px; height: 18px; font-size: 10px; }

  .params { border-radius: 24px; padding: 4px 18px; }
  .row { flex-direction: column; gap: 14px; padding: 20px 0; }
  .row-label { width: auto; gap: 10px; align-items: baseline; }
  .row-num { font-size: 12px; line-height: 1; }
  h2 { font-size: 16px; }
  .row-hint { display: none; }
  .row-control { gap: 14px; }

  .brands { background: var(--paper); border-radius: 14px; padding: 4px; gap: 4px; }
  .brand { height: 42px; padding: 0; border-radius: 10px; align-items: center; justify-content: center; background: none; color: var(--muted); }
  .brand-name { font-size: 14px; }
  .brand-sub, .brand .i { display: none !important; }
  .brand[aria-checked="true"] { color: #fff; }

  .select select { height: 52px; padding-left: 16px; font-size: 15px; }
  .select.tall select { height: 64px; }
  .select .i { right: 16px; width: 16px; height: 16px; }
  .specs { gap: 6px; }
  .spec { padding: 6px 10px; font-size: 12px; }
  .src { margin-left: auto; padding: 0; font-size: 12px; }

  .battery-grid { flex-direction: column; }
  .ah { width: 100%; height: auto; row-gap: 2px; align-items: center; padding: 14px 8px 14px 18px; border-radius: 14px; }
  .ah-label { font-size: 11px; }
  .ah input { font-size: 30px; }
  .ah-unit { font-size: 13px; padding-bottom: 2px; }
  .warning { font-size: 12px; align-items: flex-start; }

  .energy { border-radius: 24px; padding: 16px; gap: 24px; }
  .runtime { border-radius: 18px; padding: 18px; }
  .runtime-label { font-size: 14px; }
  .runtime-mode { display: none; }
  .pill { font-size: 11px; padding: 5px 10px; }
  .time-num { font-size: min(76px, 15vw); letter-spacing: -3px; }
  .time-unit { font-size: 18px; padding: 0 6px 8px 6px; }
  .runtime-note { gap: 10px; padding-top: 16px; font-size: 13px; }
  .order-cta { flex-direction: column; align-items: stretch; gap: 18px; padding: 18px; border-radius: 18px; }
  .order-cta-left { align-items: flex-start; gap: 14px; }
  .order-cta-tile { width: 52px; height: 52px; border-radius: 14px; }
  .order-cta-tile .i { width: 26px; height: 26px; }
  .order-cta-title { font-size: 18px; }
  .order-cta-btn { justify-content: space-between; font-size: 15px; padding-left: 22px; }
  .daylight { padding-top: 2px; }
  .daylight-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .daylight-label { align-items: flex-start; font-size: 13px; line-height: 1.35; }
  .compare { gap: 12px; }
  .cmp-row { grid-template-columns: 1fr auto; grid-template-areas: "name val" "bar bar"; gap: 6px; }
  .cmp-name { grid-area: name; }
  .cmp-val { grid-area: val; }
  .cmp-bar { grid-area: bar; }
  .seasons .brand { gap: 6px; flex-direction: row; }
  .seasons .brand-top { display: contents; }
  .brand .season-icon { display: block !important; width: 15px; height: 15px; color: var(--muted); }
  .runtime-note .i { width: 16px; height: 16px; }
  .energy-head { flex-direction: column; gap: 6px; }
  .energy-label { font-size: 13px; }
  .energy-value > span:first-child { font-size: 40px; }
  .energy-unit { font-size: 15px; }
  .formula { font-size: 12px; padding: 6px 10px; border-radius: 8px; }
  .bar { height: 28px; gap: 3px; }
  .bar span:first-child { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
  .bar span:last-child { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
  .legend { flex-direction: column; gap: 8px; font-size: 13px; }
  .legend li b { margin-left: auto; }
  .legend i { width: 8px; height: 8px; }
  .tip { padding: 16px; gap: 12px; }
  .tip > .i { width: 18px; height: 18px; }
  .tip-title { font-size: 13px; }
  .tip-text { font-size: 12px; }

  .order-head { gap: 14px; }
  .order-head h1 { letter-spacing: -1px; }
  .battery-card { padding: 20px; gap: 22px; border-radius: 24px; }
  .battery-model { font-size: 30px; letter-spacing: -0.8px; }
  .battery-sub { font-size: 14px; }
  .tiles { grid-template-columns: 1fr 1fr; gap: 8px; }
  .tile { padding: 14px; gap: 10px; }
  .tile-value b { font-size: 24px; }
  .fit { flex-direction: column; align-items: flex-start; padding: 18px; }
  .contact { padding: 22px; border-radius: 24px; }
  .contact-copy h2 { font-size: 26px; }
  .avito, .phone { padding: 14px; }
  .messengers { grid-template-columns: 1fr; }
  .faq { padding-top: 12px; gap: 20px; }
  .faq-intro { gap: 12px; padding: 0 4px; }
  .faq-title { font-size: 24px; letter-spacing: -0.6px; }
  .faq-lead { font-size: 14px; }
  .faq-list { padding: 4px 18px; border-radius: 24px; }
  .faq-item { padding: 18px 0; }
  .faq-q { font-size: 15px; }
  .faq-toggle { width: 32px; height: 32px; }
  .faq-a { padding-right: 0; font-size: 14px; }
  .notes { grid-template-columns: 1fr; gap: 16px; padding: 4px 4px 0; }
  .footer { flex-direction: column-reverse; gap: 10px; padding: 4px 4px 0; }
  .footer p, .footer-logo { font-size: 12px; }
}