/* Landing Ads — additions on top of the main theme stylesheet.
   Loaded only on template-landing-ads.php. Site-wide header tweaks live in
   Customizer → Additional CSS. Reused theme blocks keep their own styles. */

/* ═══ tokens ═══════════════════════════════════════════════════════════ */
.lp-ads { --lp-r: 3.2rem; --lp-line: rgba(0, 0, 0, .08); }
.lp-accent { color: var(--red-1, #f43563); white-space: nowrap; }

/* ═══ 000 hero ═════════════════════════════════════════════════════════ */
.lp-hero { padding-top: 11.2rem; padding-bottom: 2.4rem; border-radius: 0; }

.lp-hero .lp-hero__grid { grid-template-columns: 65fr 35fr; gap: 2rem; align-items: stretch; }
.lp-hero .lp-hero__card { height: auto; min-height: 58rem; padding: 6.4rem; }
.lp-hero .decor { top: -1.4rem; margin-left: .4rem; }

.lp-hero .lp-hero__btns {
  display: flex; flex-wrap: wrap; align-items: center;
  height: auto; min-height: 0; margin-top: 4.4rem; gap: 1.6rem 3.2rem;
}
.lp-hero .lp-hero__btns .btn { margin: 0; }

.lp-hero__link {
  display: inline-flex; align-items: center; align-self: center; gap: .8rem;
  font-size: 1.7rem; font-weight: 400; line-height: 1;
  color: var(--black-1, #000); text-decoration: none;
  border-bottom: 1px solid rgba(0, 0, 0, .22); padding-bottom: .4rem;
  transition: color .18s, border-color .18s;
}
.lp-hero__link:hover { color: var(--red-1, #f43563); border-color: var(--red-1, #f43563); }
.lp-hero__link .icon { width: 1.6rem; height: 1.6rem; flex: 0 0 auto; transition: transform .22s cubic-bezier(.2, .7, .2, 1); }
.lp-hero__link:hover .icon { transform: translate(.3rem, -.3rem); }

.lp-hero .lp-hero__stats {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 0;
  margin: 3.2rem 0 0; padding: 2.4rem 0 0;
  border-top: 1px solid rgba(162, 172, 184, .32); list-style: none;
}
.lp-hero .lp-hero__stats li { display: flex; align-items: baseline; gap: .5rem; white-space: nowrap; }
.lp-hero .lp-hero__stats li + li::before {
  content: ''; align-self: center; width: .4rem; height: .4rem; margin: 0 1.4rem;
  border-radius: 50%; background: var(--gray-2, #a2acb8);
}
.lp-hero .lp-hero__stats strong { font-size: 1.6rem; font-weight: 600; line-height: 1; }
.lp-hero .lp-hero__stats span { font-size: 1.5rem; line-height: 1; color: var(--gray-1, #464c54); }

/* video placeholder (until an mp4 is uploaded) */
.lp-video {
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  min-height: 58rem; padding: 2.4rem; border-radius: var(--lp-r);
  background: #0c0d10; color: #fff; overflow: hidden; isolation: isolate;
}
.lp-video::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 45% at 85% 5%, rgba(244, 53, 99, .22), transparent 62%),
    linear-gradient(180deg, #16171b 0%, #0c0d10 100%);
}
.lp-video__top { display: flex; align-items: center; justify-content: space-between; }
.lp-video__chip {
  display: inline-block; padding: .7rem 1.2rem; border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 99rem; font-size: 1.1rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
}
.lp-video__dur { font-size: 1.2rem; color: rgba(255, 255, 255, .55); }
.lp-video__play {
  position: absolute; top: 50%; left: 50%; display: flex; align-items: center; justify-content: center;
  width: 8.8rem; height: 8.8rem; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .08);
  transform: translate(-50%, -50%);
}
.lp-video__play svg { width: 2.2rem; height: 2.4rem; margin-left: .3rem; }
.lp-video__caption { max-width: 72%; font-size: 2rem; font-weight: 500; line-height: 1.3; }
.lp-video__handle { margin-top: .8rem; font-size: 1.2rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }

/* logo marquee */
.lp-marquee {
  overflow: hidden; margin-top: 5.6rem; padding-bottom: 4rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.lp-marquee__track { display: flex; align-items: center; gap: 8rem; padding-right: 8rem; width: max-content; animation: lp-marquee 42s linear infinite; }
.lp-marquee:hover .lp-marquee__track { animation-play-state: paused; }
.lp-marquee__item { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; height: 4.8rem; }
.lp-marquee__item img { max-height: 100%; width: auto; filter: grayscale(1); opacity: .55; transition: filter .3s, opacity .3s; }
.lp-marquee__item:hover img { filter: grayscale(0); opacity: 1; }
@keyframes lp-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .lp-marquee__track { animation: none; } }

/* ═══ 001 object types ═════════════════════════════════════════════════ */
.lp-types { background: var(--white-2, #f3f5f5); }
/* right-column width now unified site-wide in lua-fixes.css (section 5) */
.lp-types .specialization__top_descr { text-wrap: balance; }

.lp-types__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;
  margin-top: 4.8rem;
}

.lp-type {
  display: flex; flex-direction: column;
  background: var(--white-1, #fff); color: var(--black-1, #000);
  border-radius: var(--lp-r); overflow: hidden;
  transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s;
}
.lp-type:hover { transform: translateY(-.4rem); box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, .08); }
.lp-type--dark { background: var(--black-1, #000); color: var(--white-1, #fff); }

.lp-type__photo { aspect-ratio: 16 / 10; overflow: hidden; }
.lp-type__photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.lp-type:hover .lp-type__photo img { transform: scale(1.04); }

.lp-type__body { display: flex; flex-direction: column; flex: 1; padding: 3.2rem 3.2rem 3.6rem; }

.lp-type__eyebrow {
  font-size: 1.2rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gray-1, #464c54); margin-bottom: 1.2rem;
}
.lp-type--dark .lp-type__eyebrow { color: rgba(255, 255, 255, .55); }

.lp-type__title { font-size: 2.4rem; font-weight: 500; line-height: 1.2; letter-spacing: -.01em; margin: 0 0 1.2rem; }

.lp-type__desc { font-size: 1.5rem; line-height: 1.5; color: var(--gray-1, #464c54); margin: 0 0 2.4rem; }
.lp-type--dark .lp-type__desc { color: rgba(255, 255, 255, .62); }

/* Metrics, variant A (2026-09-09). Was a 1.25fr 1fr 1fr row: the two-line label
   «Річний бюджет маркетингу» pushed its value 12px below the other two, and the
   value carried a different size (20.5 vs 15.8px) — three mismatched baselines in
   one row. The budget now owns a full-width row of its own, the other two share a
   clean two-column row, so every baseline inside a row is homogeneous. */
.lp-type__metrics {
  list-style: none; margin: auto 0 0; padding: 2.4rem 0 0;
  border-top: 1px solid var(--lp-line);
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.8rem 2.4rem;
}
.lp-type__metric--budget {
  grid-column: 1 / -1;
  padding-bottom: 1.8rem;
  border-bottom: 1px solid var(--lp-line);
}
.lp-type--dark .lp-type__metric--budget { border-bottom-color: rgba(255, 255, 255, .12); }
.lp-type--dark .lp-type__metrics { border-top-color: rgba(255, 255, 255, .12); }

.lp-type__metric { display: flex; flex-direction: column; gap: .8rem; min-width: 0; }
.lp-type__head { display: flex; align-items: center; gap: .7rem; }
.lp-type__ico { width: 1.6rem; height: 1.6rem; flex: 0 0 auto; color: var(--gray-2, #a2acb8); }
.lp-type__ico svg { width: 100%; height: 100%; display: block; }
.lp-type--dark .lp-type__ico { color: rgba(255, 255, 255, .45); }
.lp-type__label { font-size: 1.3rem; line-height: 1.2; color: var(--gray-1, #464c54); }
.lp-type--dark .lp-type__label { color: rgba(255, 255, 255, .55); }
.lp-type__value { font-size: 2rem; font-weight: 500; line-height: 1.15; letter-spacing: -.015em; white-space: nowrap; }

/* the annual budget is the hero number of the card */
.lp-type__metric--budget .lp-type__value { font-size: 2.6rem; letter-spacing: -.025em; }
.lp-type__metric--budget .lp-type__ico { color: var(--red-1, #f43563); }
.lp-type__metric--budget .lp-type__label {
  color: var(--gray-1, #464c54); font-weight: 500;
  font-size: 1.2rem; letter-spacing: .08em; text-transform: uppercase;
}
.lp-type--dark .lp-type__metric--budget .lp-type__label { color: #fff; }

.lp-types__summary {
  max-width: 68rem; margin: 4.8rem auto 0; text-align: center;
  font-size: 1.7rem; line-height: 1.55; color: var(--gray-1, #464c54);
}
.lp-types__summary b, .lp-types__summary strong { font-weight: 500; color: var(--black-1, #000); }

/* ═══ 002 what's inside (1:1 prototype) ════════════════════════════════ */
.lp-inside { padding: 6.4rem 0; background: var(--white-2, #f3f5f5); }
.lp-shead { display: grid; grid-template-columns: 57fr 43fr; gap: 2rem; align-items: end; margin-bottom: 4.8rem; }
.lp-snum { font-size: 1.3rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gray-2, #a2acb8); margin-bottom: 2rem; }
.lp-shead__title { max-width: 28ch; margin: 0; }
.lp-shead__title .lp-accent { display: inline-block; }
.lp-shead__text { font-size: 1.8rem; line-height: 1.55; color: var(--gray-1, #464c54); max-width: 46ch; padding-bottom: .8rem; margin: 0; text-wrap: balance; }
.lp-card { background: var(--white-1, #fff); border-radius: var(--lp-r, 3.2rem); overflow: hidden; }
.lp-inside__grid { display: grid; grid-template-columns: 57fr 43fr; gap: 2rem; align-items: start; }
.lp-branch { padding: 4.4rem; margin-bottom: 2rem; position: relative; }
.lp-branch__n { position: absolute; right: 3.6rem; top: 2.4rem; font-size: 9.6rem; line-height: 1; color: #eef0f2; letter-spacing: -.05em; font-weight: 500; pointer-events: none; user-select: none; }
.lp-branch__t, .lp-branch__body { position: relative; }
.lp-branch__body { display: flex; justify-content: space-between; align-items: flex-end; gap: 3.2rem; }
.lp-branch__cta { flex: none; }
.lp-branch:last-child { margin-bottom: 0; }
.lp-branch__t { margin-right: 12rem; font-size: 1.4rem; letter-spacing: .09em; text-transform: uppercase; padding-bottom: 2.2rem; border-bottom: .1rem solid var(--lp-line); margin-bottom: 2.6rem; color: var(--gray-1, #464c54); }
.lp-branch__t b { font-weight: 500; color: var(--black-1, #000); }
.lp-branch__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6rem; }
.lp-branch__list li { display: flex; gap: 1.6rem; font-size: 1.7rem; line-height: 1.5; color: var(--gray-1, #464c54); margin: 0; }
.lp-branch__ico { width: 1.8rem; height: 1.8rem; flex: none; margin-top: .5rem; fill: var(--red-1, #f43563); }
.lp-docprev { background: linear-gradient(158deg, #1c1f24, #0c0d10); padding: 4rem; margin-bottom: 2rem; position: relative; }
.lp-docprev::after { content: ''; position: absolute; inset: 0; background: radial-gradient(80% 60% at 80% 10%, rgba(244,53,99,.2), transparent 60%); pointer-events: none; }
.lp-sheet { background: #fff; border-radius: 1.2rem; box-shadow: 0 2rem 5rem rgba(0,0,0,.34); padding: 3rem; position: relative; z-index: 2; }
.lp-sheet + .lp-sheet { margin-top: -2rem; transform: translateX(2.4rem); }
.lp-sheet__k { font-size: 1.2rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gray-2, #a2acb8); margin-bottom: 1.4rem; }
.lp-sheet__h { font-size: 2rem; line-height: 1.25; margin-bottom: 2.2rem; font-weight: 500; color: var(--black-1, #000); }
.lp-bar { display: flex; align-items: flex-end; gap: .9rem; height: 8rem; margin-bottom: 2rem; }
.lp-bar i { flex: 1; background: #e4e7ea; border-radius: .4rem; display: block; }
.lp-bar i.hi { background: var(--black-1, #000); }
.lp-bar i.mid { background: #c2c8ce; }
.lp-rows { display: grid; gap: .9rem; }
.lp-rows div { display: flex; justify-content: space-between; font-size: 1.35rem; color: var(--gray-1, #464c54); padding-bottom: .8rem; border-bottom: .1rem solid var(--lp-line); }
.lp-rows b { font-weight: 500; color: var(--black-1, #000); display: inline-flex; align-items: center; gap: .8rem; }

/* «приклад» chip on the sheet header: the figures below are illustrative, and
   the sheet must not read as one specific client's report */
.lp-sheet__tag {
  display: inline-block; margin-left: .8rem; padding: .2rem .8rem;
  border-radius: .6rem; background: var(--white-2, #f3f5f5);
  color: var(--gray-1, #464c54); letter-spacing: .08em; font-size: 1.05rem;
}
/* the spend row keeps a placeholder bar instead of a number — the client's ad
   budget is never shown (price list rule), and «— ₴» read as broken */
.lp-skel {
  display: block; height: 1.1rem; border-radius: .4rem;
  background: linear-gradient(90deg, #e4e7ea, #eef1f3 60%, #e4e7ea);
}
.lp-skel--sm { width: 7.2rem; }
.lp-delta { font-style: normal; font-size: 1.15rem; font-weight: 500; color: var(--red-1, #f43563); }
.lp-inside__cta { display: flex; flex-direction: column; align-items: flex-start; gap: 1.8rem; }
.lp-inside__cta-row { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }
.lp-chip { display: inline-flex; align-items: center; gap: .8rem; padding: 1.1rem 1.6rem; border: .1rem solid var(--lp-line); border-radius: 99rem; font-size: 1.3rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gray-1, #464c54); white-space: nowrap; }
.lp-chip::before { content: ''; width: .8rem; height: .8rem; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 .3rem rgba(34, 197, 94, .18); }
.lp-btn--down { min-width: 0; padding-left: 2.4rem; gap: 2.4rem; justify-content: flex-start; flex: none; }
.lp-btn--red { background-color: var(--red-1, #f43563); color: #fff; }
.lp-btn--red i { background-color: #fff; color: var(--red-1, #f43563); }
.lp-btn--red:hover { box-shadow: 0 1.4rem 3.4rem rgba(244, 53, 99, .32); }
.lp-btn--ghost { background-color: transparent; color: var(--black-1, #000); box-shadow: inset 0 0 0 .1rem rgba(0, 0, 0, .18); transition: background-color .2s, color .2s, box-shadow .2s, transform .2s; }
.lp-btn--ghost i { background-color: var(--black-1, #000); color: #fff; transition: background-color .2s, color .2s; }
.lp-btn--ghost:hover { background-color: var(--black-1, #000); color: #fff; box-shadow: 0 1.4rem 3.4rem rgba(0, 0, 0, .18); }
.lp-btn--ghost:hover i { background-color: #fff; color: var(--black-1, #000); }
.lp-btn--down i svg { width: 100%; height: 100%; fill: none; animation: lp-nudge 2.6s ease-in-out infinite; }
@keyframes lp-nudge { 0%, 74%, 100% { transform: translateY(0); } 86% { transform: translateY(.3rem); } }
.lp-docnote { font-size: 1.5rem; line-height: 1.5; color: var(--gray-1, #464c54); margin: 0; max-width: 36ch; }

/* doc preview reveal: sheets one after another, then bars grow left→right */
.lp-sheet { opacity: 0; transform: translateY(2.4rem); transition: opacity .6s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.lp-sheet + .lp-sheet { transform: translate(2.4rem, 2.4rem); transition-delay: .4s; }
.lp-docprev.is-in .lp-sheet { opacity: 1; transform: translateY(0); }
.lp-docprev.is-in .lp-sheet + .lp-sheet { transform: translateX(2.4rem); }
.lp-bar i { transform: scaleY(0); transform-origin: 50% 100%; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.lp-docprev.is-in .lp-bar i { transform: scaleY(1); }
.lp-docprev.is-in .lp-bar i:nth-child(1) { transition-delay: .9s; }
.lp-docprev.is-in .lp-bar i:nth-child(2) { transition-delay: 1.05s; }
.lp-docprev.is-in .lp-bar i:nth-child(3) { transition-delay: 1.2s; }
.lp-docprev.is-in .lp-bar i:nth-child(4) { transition-delay: 1.35s; }
.lp-docprev.is-in .lp-bar i:nth-child(5) { transition-delay: 1.5s; }
.lp-docprev.is-in .lp-bar i:nth-child(6) { transition-delay: 1.65s; }
@media (prefers-reduced-motion: reduce) {
  .lp-sheet, .lp-sheet + .lp-sheet, .lp-bar i { opacity: 1; transform: none; transition: none; }
  .lp-sheet + .lp-sheet { transform: translateX(2.4rem); }
}

/* ═══ 005 steps (theme "need" v4 cards) ═══════════════════════════════ */
.lp-stages { background: #fff; padding: 6.4rem 0; margin-top: 0; }
.lp-stages .need-title h2 strong { color: var(--red-1, #f43563); font-weight: inherit; }
.lp-stages__time { font-size: 1.4rem; color: var(--gray-2, #a2acb8); margin: .6rem 0 1.2rem; }
.lp-stages__note { margin: 4rem auto 0; max-width: 68rem; text-align: center; font-size: 1.7rem; line-height: 1.5; color: var(--gray-1, #464c54); }
.lp-stages__note b, .lp-stages__note strong { font-weight: 500; color: var(--black-1, #000); }

/* ═══ 008 FAQ (theme help block) ═══════════════════════════════════════ */
.lp-faq .help-title strong { color: var(--red-1, #f43563); font-weight: inherit; }

/* ═══ 004 quiz head + tighter shared quiz ═══════════════════════════════ */
.lp-quiz-head { background: #fff; padding: 6.4rem 0 0; }
.lp-quiz-head .lp-shead { margin-bottom: 4rem; }
.lp-ads .quiz { padding-top: 0; padding-bottom: 0; min-height: 0; }
.lp-ads .quiz-sidebar .quiz-title { font-size: 2.4rem; }

/* The features list bottom-aligns with margin-top:auto, which collapses to 0 as
   soon as the content fills the sidebar — measured gap between the message
   bubble and the first pill: 0px, with the lock badge (4rem circle at top:-2rem)
   sitting on top of the bubble. Padding is immune to the auto margin, so the
   clearance goes here: 4rem = 31.5px, comfortably clear of the badge's 15.75px
   overhang and a touch more than the 3rem gap between the pills themselves. */
.lp-ads .quiz-sidebar__features { padding-top: 4rem; }

/* Quiz sidebar pills (2026-09-09). The emoji used to sit inline inside centred
   text, so with one-line vs two-line items the optical gap jumped — and WP's
   twemoji turns some emoji into <img class="emoji"> while leaving others as a
   text glyph, which changed the footprint again. Emoji now lives in its own
   fixed column; the icon+text pair stays centred as a unit under the lock badge. */
.lp-ads .quiz-sidebar__feature { gap: 1.2rem; padding: 1.2rem 2.4rem; }
.lp-ads .quiz-sidebar__feature .lp-qfeat__ico {
  flex: 0 0 2.6rem; width: 2.6rem; height: 2.6rem;
  display: grid; place-items: center; font-size: 2.2rem; line-height: 1;
}
.lp-ads .quiz-sidebar__feature .lp-qfeat__ico img.emoji {
  width: 2.4rem; height: 2.4rem; margin: 0; display: block;
}
/* Fixed text column, and this is the whole point of it: when text wraps, a flex
   child stretches to the width it is allowed, not to the width of its longest
   rendered line — so the icon+text pair sat left-of-centre even with
   justify-content:center. Measured at 1512: available 200px, longest line 162px,
   i.e. 38px of dead space pulling the pair left. There is no CSS length that
   means «as wide as the longest wrapped line», so the column is pinned instead.
   21.6rem = 170px at 1512 and 216px at 768 (rem and font-size scale together),
   which is just above the longest line in all three pills, so the natural line
   breaks stay exactly as they are and all three icons line up at the same x. */
.lp-ads .quiz-sidebar__feature .lp-qfeat__txt {
  text-align: left; line-height: 1.25; text-wrap: balance;
  width: 21.6rem; max-width: 100%;
}

/* The bubble keeps its full width, so «розбору.» must not be left alone on the
   last line. nbsp in the markup binds it to «для» (works everywhere), balance
   then evens the three lines out: 159/194/119 with plain wrapping, 159/176/138
   balanced — spread down from 75px to 38px, which is what stops it reading as
   an accident. */
.lp-ads .quiz-sidebar__message { text-wrap: balance; }

/* «Жодних довгих погоджень…» broke 546px + 81px — one orphan clause on line 2.
   The width and the balanced wrapping now come from the site-wide section-head
   rule in lua-fixes.css (section 5), which puts every such paragraph on the
   same geometry. Nothing LP-specific left here. */
.lp-ads .quiz .quiz_container { margin-top: 0; margin-bottom: 6.4rem; }

/* ═══ misc ═════════════════════════════════════════════════════════════ */
.lp-ads > .lua-crumbs { display: none; }

/* ═══ mobile ═══════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  /* hero: video first is site-wide (lua-mobile.css); CTA + link side by side, centred */
  .lp-hero .lp-hero__btns {
    flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center;
    width: 100%; margin-top: 3.2rem; gap: 1.6rem 2.4rem;
  }
  .lp-hero .lp-hero__btns .btn { width: auto; flex: 0 0 auto; }
  .lp-hero .lp-hero__btns .lp-hero__link { flex: 0 0 auto; }
  .lp-types__grid { grid-template-columns: 1fr 1fr; }
  .lp-inside__grid { grid-template-columns: 1fr; }
  /* 002: on tablet the list + CTA don't share a row — list full width, CTA below */
  .lp-branch__body { flex-direction: column; align-items: flex-start; gap: 2.4rem; }
}
@media (max-width: 767px) {
  .lp-hero { padding-top: 9.6rem; }
  .lp-hero .lp-hero__grid { grid-template-columns: 1fr; }
  .lp-hero .lp-hero__card { padding: 3.2rem 2.4rem; min-height: 0; }
  .lp-video { min-height: 36rem; }
  .lp-video__caption { max-width: 100%; font-size: 1.8rem; }
  .lp-hero .lp-hero__stats li + li::before { margin: 0 1rem; }
  .lp-marquee__track { gap: 4rem; padding-right: 4rem; animation-duration: 28s; }
  .lp-marquee__item { height: 3.6rem; }
  .lp-types__grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .lp-type__body { padding: 2.4rem; }
  /* metrics keep the variant-A shape on phones — nothing extra needed */
  .lp-types__summary { margin-top: 3.2rem; font-size: 1.5rem; }
  /* rem = vw/50 on phones, so the pill text needs a px floor to stay readable */
  .lp-ads .quiz-sidebar__feature { padding: 1.2rem 2rem; }
  .lp-ads .quiz-sidebar__feature .lp-qfeat__ico { flex: 0 0 2.8rem; width: 2.8rem; height: 2.8rem; }
  /* font-size is pinned to 15px here while rem tracks the viewport, so the text
     column needs a px width too — 162px clears the longest line (155px) */
  .lp-ads .quiz-sidebar__feature .lp-qfeat__txt { font-size: 15px; width: 162px; }

  .lp-shead { grid-template-columns: 1fr; align-items: start; margin-bottom: 3.2rem; }
  .lp-branch { padding: 2.8rem 2.4rem; }
  .lp-docprev { padding: 2.4rem; }
  .lp-sheet + .lp-sheet { transform: translateX(1.2rem); }
  .lp-docprev.is-in .lp-sheet + .lp-sheet { transform: translateX(1.2rem); }
  .lp-inside__cta { flex-direction: column; align-items: flex-start; gap: 1.6rem; }
  .lp-branch__n { font-size: 7rem; right: 2rem; top: 1.6rem; }
  .lp-branch__t { margin-right: 8rem; }
  .lp-branch__body { align-items: flex-start; gap: 2rem; }
  .lp-branch__cta .btn { width: auto; }
}

/* ═══ mobile pass 2 — 2026-09-09 ═══════════════════════════════════════
   Measured on a 390-wide viewport before each change; numbers in comments are
   the «before» so the reasoning survives. */
@media (max-width: 767px) {

  /* Hero. The lead paragraph's third sentence lands alone on line 4 here —
     wrapper comes from _hero.php, see the note there. */
  .lp-ads .lp-hide-mob { display: none; }

  /* The trust row («12+ років · 60+ клієнтів · …») was a left-aligned flex that
     wrapped to two lines, so neither line sat on the middle of the screen.
     Centre the row itself and each wrapped line. */
  .lp-ads .lp-hero__stats {
    justify-content: center;
    flex-wrap: wrap;
    row-gap: .8rem;
    text-align: center;
  }

  /* 002 / A and B. The heading is «<b>A · Реклама вже йде</b> — аудит кабінету
     і воронки»: one run, so the tail broke mid-phrase wherever the line ended.
     The span comes from _inside.php; on a phone it takes its own line. */
  .lp-ads .lp-branch__sub { display: block; }

  /* CTAs. .lp-branch__body is a flex column with align-items:flex-start (the
     checklist needs that), so only the button is re-centred, not the list. */
  .lp-ads .lp-branch__cta { align-self: center; }
  .lp-ads .lp-inside__cta { align-items: center; }
  .lp-ads .lp-inside__cta-row { justify-content: center; }
  .lp-ads .lp-docnote { text-align: center; }
  .lp-ads .lp-cases__foot { justify-content: center; }

  /* Cases → quiz head. Was 58.5px of section padding + 25px inside the
     pagination block + 50px on the next section = 133px under the button. */
  .lp-ads .cases { padding-bottom: 2.4rem; }

  /* Sidebar «Після квізу ви отримаєте». The features block carried both a 6.4rem
     margin-top from the theme and the 4rem padding-top added for the desktop
     badge clearance — 81px from the title to the first pill. The lock badge
     overlaps the first pill by ~16px, so ~31px is the floor here. */
  .lp-ads .quiz-sidebar__features { margin-top: 2.4rem; padding-top: 1.6rem; }

  /* Pills: one px up, as asked. font-size is pinned in px while rem tracks the
     viewport, so the text column needs a matching px width — 176px keeps all
     three at exactly two lines (longest line measured 166px at 16px). */
  .lp-ads .quiz-sidebar__feature .lp-qfeat__txt { font-size: 16px; width: 176px; }

  /* Quiz must fit one screen. Before: .quiz-content was 740px tall at 390 wide
     (33.5 padding + 507 step + 33 gap + 133 bottom + 33.5 padding), and that is
     before the sticky header and the browser chrome. Every number below is
     tightened, nothing is removed:
        content padding  4.3rem → 2.4rem
        step title       3.6rem → 3rem
        subtitle gap     2rem   → 1.2rem
        options gap      2rem   → 1.2rem
        options offset   3.8rem → 2rem
        bottom offset    4.2rem → 2rem
        bottom gap       4rem   → 1.6rem
     ≈ 105px back, so ~635px — clears a 360×800 phone with the header. */
  .lp-ads .quiz-content { padding: 2.4rem 2.4rem; }
  .lp-ads .quiz-step .quiz-title { font-size: 3rem; }
  .lp-ads .quiz-step .quiz-text { margin-top: 1.2rem; }
  .lp-ads .quiz-choises { margin-top: 2rem; gap: 1.2rem; }
  .lp-ads .quiz-bottom { margin-top: 2rem; gap: 1.6rem; }

  /* Back / Next side by side — stacked they cost another 82px on steps 2-4.
     First attempt let «Далі» keep its arrow: the arrow is a fixed 5.4rem disc
     pinned to the right of the pill, so once the pill was only half the row
     wide the disc overhung and sat on top of «Назад». Owner's call — drop the
     arrow on phones and make the two buttons equal, compact halves. `order`
     rather than flex-direction, so the pair is left-to-right whichever
     direction the theme sets. */
  .lp-ads .quiz-nav {
    flex-direction: row !important;
    align-items: stretch;
    gap: 1.2rem;
  }
  .lp-ads .quiz-nav .quiz-prev,
  .lp-ads .quiz-nav .quiz-next {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    justify-content: center;
    padding: 1.6rem 1.2rem;
    text-align: center;
  }
  .lp-ads .quiz-nav .quiz-prev { order: 1; }
  .lp-ads .quiz-nav .quiz-next { order: 2; }
  .lp-ads .quiz-nav .quiz-next > i { display: none; }
  .lp-ads .quiz-nav .quiz-prev > span,
  .lp-ads .quiz-nav .quiz-next > span { margin: 0; }

  /* Quiz → «Як проходить розбір». Was 50px of container margin + 50px of
     section padding; the next section's own padding gets trimmed too, so the
     two gaps land at ~50px instead of 100 and 108. */
  .lp-ads .quiz .quiz_container { margin-bottom: 2.4rem; }
  .lp-ads .lp-stages { padding-top: 4rem; }
  .lp-ads .lp-quiz-head { padding-top: 4rem; }

  /* Step 4 is the contact form, not options: 3 fields + consent + submit.
     Measured 683px as admin, but 155px of that is WP Armour's admin-only test
     notice — a real visitor's step 4 is ~525px. Trimming the field rhythm a
     little buys another ~30px without touching field height (tap target). */
  .lp-ads .quiz-form .wpcf7-form-control-wrap { margin-top: 1.8rem; }
  .lp-ads .quiz-form .sf7-input.quiz-submit { margin-top: 2rem; }

  /* Reviews. ~59px of dead space under the last platform rating before the
     block ended. */
  .lp-ads .reviews__platforms { padding-bottom: 1.2rem; }
  .lp-ads .reviews { padding-bottom: 0; }
}

/* Hero eyebrow «Розбір об'єкта» retired 2026-09-09 — owner's call: it repeats
   what the H1 already says and costs a line on every viewport. Hidden rather
   than cleared from ACF so the copy is one edit away from coming back. */
.lp-ads .lp-hero .internal_hero__suptitle { display: none; }

/* == Hero video overlay ================================================
   4:5 on phones only. The theme squares the media with padding-bottom:
   100% up to 1023px; 125% there made tablets absurd (at 900px the video
   came out 852 x 1065), so the taller ratio is scoped to <=767 and
   tablets keep the square.

   The caption sits to the right of the mute button, as the theme has it.
   A full-width caption row was tried and reverted: it pushed the mute
   button to the middle of the frame. */
/* Three ragged lines beside the button (147/201/112 at 390) even out to
   147/169/143 with balance; on desktop 188/257/143 -> 188/217/183. */
.lp-ads .lp-hero .internal_hero__right-title { text-wrap: balance; }

@media (max-width: 767px) {
  .lp-ads .lp-hero .square-video-mobile { padding-bottom: 125%; }
}

/* --- Mobile: hero top gap. Menu is hidden on the first screen, so the 10rem
       reservation from the base theme rule is dead space. LUA 10.09.2026 --- */
@media screen and (max-width: 1023px) {
	/* Відкочено 10.09.2026: шапку повернули, тому відступ теми знову доречний. */
}

/* --- Accent span must wrap on narrow screens. nowrap is fine on desktop,
       on a phone it pushes the red line out of the viewport. LUA 10.09.2026 --- */
@media screen and (max-width: 1023px) {
	.lp-accent { white-space: normal; }
}

/* --- Mobile scroll reveal for the 1.5-2.5% section. The theme kills every
       fade-in below 1024px, so this block uses its own classes. LUA 10.09.2026 --- */
@media screen and (max-width: 1023px) {
	.lp-types .lp-anim { opacity: 0; transform: translateY(2.4rem); transition: opacity .55s ease-out, transform .55s cubic-bezier(.22, 1, .36, 1); }
	.lp-types .lp-anim.lp-in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.lp-types .lp-anim { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ===== Стрічка логотипів: старт лише після завантаження лого (2026-09-10) ===== */
/* Без цього трек міряється по порожніх lazy-картинках, потім розширюється — і петля смикається. */
.lp-marquee__track { animation-play-state: paused; }
.lp-marquee.is-ready .lp-marquee__track { animation-play-state: running; }
.lp-marquee.is-ready:hover .lp-marquee__track { animation-play-state: paused; }