/* Страница акции «Всё на 4» (запись offer 1248). СОБРАНО tools/v-temu.py из css/style.css пилота 01: руками не править. */
/* Совместимость с темой. Внутри блока стили темы (общие правила для *, button, h2, label, input…) откатываются к браузерным:
   окружение как в пилоте — браузер плюс стили пилота. Правила страницы ниже точнее этого отката (приставка html body .ao4),
   SVG не трогаем: откат стёр бы их атрибуты fill и stroke. Объявления страницы — с !important (см. important() в v-temu.py). */
html body .ao4 *:not(svg, svg *), html body .ao4 *:not(svg, svg *)::before, html body .ao4 *:not(svg, svg *)::after { all: revert; box-sizing: border-box; }
html body .ao4 button { color: inherit !important; }
/* тема задаёт размер абзацам и пунктам в секциях (body main section[class] :is(p, li)): здесь они наследуют, как в пилоте */
html body .ao4 :is(p, li) { font-size: inherit !important; }
/* своя кнопка записи и нижняя плашка у страницы есть: плавающая кнопка сайта лишняя и закрыла бы плашку о противопоказаниях */
html body:has(.ao4) .avc-cf-fab { display: none !important; }
html body .ao4 { --orange: #FF973F; --orange-hi: #FFB66E; --orange-deep: #F27B1D; --on-orange: #1D1206; --head-font: "Unbounded", "Onest", system-ui, sans-serif; --body-font: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif; --radius: 22px; --dock-h: max(6vh, 44px); --wrap: 1200px; --flyer-bg:
    radial-gradient(55% 60% at 78% 42%, rgba(28, 197, 194, .38), transparent 70%),
    radial-gradient(40% 45% at 8% 0%, rgba(255, 151, 63, .16), transparent 70%),
    linear-gradient(160deg, #0A4342 0%, #062E2D 55%, #031A19 100%); --flyer-ink: #F2FBFA; --flyer-muted: #BFE6E3; --flyer-line: rgba(233, 252, 251, .22); --grad: linear-gradient(100deg, #E9FCFB 0%, #63E9E6 45%, #1CC5C2 100%); --price: var(--orange); --price-old: #9CCBC8; --sticker-bg: var(--orange); --sticker-ink: var(--on-orange); --chip-bg: rgba(233, 252, 251, .08); --chip-line: rgba(233, 252, 251, .28); --chip-ic: var(--orange); --flyer-btn-bg: var(--orange); --flyer-btn-ink: var(--on-orange); --flyer-ghost-ink: #F2FBFA; --flyer-ghost-line: rgba(242, 251, 250, .55); --header-bg: rgba(3, 26, 25, .9); --header-ink: #F2FBFA; --page: #F4FBFA; --sec-light: #FFFFFF; --sec-tint: #E4F4F3; --ink: #0E2928; --ink-2: #3C5654; --head: #0A3B3A; --line: #CFE7E5; --card: #FFFFFF; --ic: #117977; --ic-bg: #DDF5F4; --in-bg: #D3F4F2; --in-ink: #0A4342; --out-bg: #E9EDED; --out-ink: #3A4747; --dock-bg: #062E2D; --dock-ink: #F2FBFA; --foot-bg: #031A19; --foot-ink: #CFEAE8; --frame-bg: radial-gradient(70% 70% at 50% 55%, #FFFFFF 0%, #E9F6F5 100%); --doc-circle: radial-gradient(circle at 35% 30%, #63E9E6 0%, #1CC5C2 45%, #0F6B6A 100%); --field-line: #6F8F8D; }
html body .ao4 * { box-sizing: border-box !important; }
html body .ao4 [hidden] { display: none !important; }
html:has(.ao4) { scroll-behavior: smooth !important; -webkit-text-size-adjust: 100% !important; overflow-x: clip !important; }
@media (prefers-reduced-motion: reduce) {
html:has(.ao4) { scroll-behavior: auto !important; }
}
html body .ao4 { margin: 0 !important; font-family: var(--body-font) !important; font-size: 17px !important; line-height: 1.55 !important; color: var(--ink) !important; background: var(--page) !important; overflow-x: clip !important; }
@media (max-width: 759px) {
html body .ao4 { font-size: 16px !important; }
}
html body .ao4 img { max-width: 100% !important; height: auto !important; display: block !important; }
html body .ao4 a { color: inherit !important; }
html body .ao4 button { font: inherit !important; cursor: pointer !important; }
html body .ao4 .wrap { width: min(var(--wrap), 100% - 40px) !important; margin-inline: auto !important; }
html body .ao4 .narrow { width: min(860px, 100% - 40px) !important; }
html body .ao4 .ic { width: 1.2em !important; height: 1.2em !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.8 !important; stroke-linecap: round !important; stroke-linejoin: round !important; flex: none !important; }
html body .ao4 .ic--big { width: 44px !important; height: 44px !important; }
html body .ao4 .btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; min-height: 56px !important; padding: 14px 28px !important; border-radius: 99px !important; border: 2px solid transparent !important; font: 700 17px/1.2 var(--body-font) !important; text-decoration: none !important; text-align: center !important; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease !important; }
html body .ao4 .btn:focus-visible, html body .ao4 .opt:focus-visible, html body .ao4 summary:focus-visible, html body .ao4 a:focus-visible, html body .ao4 .modal__close:focus-visible, html body .ao4 .quiz__back:focus-visible { outline: 3px solid #111 !important; outline-offset: 2px !important; box-shadow: 0 0 0 7px #FFD400 !important; }
html body .ao4 .btn--main { background: var(--orange) !important; color: var(--on-orange) !important; box-shadow: 0 10px 28px -10px rgba(242, 123, 29, .8) !important; }
html body .ao4 .btn--main:hover { transform: translateY(-2px) !important; background: var(--orange-hi) !important; }
html body .ao4 .btn--ghost { background: transparent !important; color: var(--head) !important; border-color: currentColor !important; }
html body .ao4 .btn--ghost:hover { transform: translateY(-2px) !important; }
html body .ao4 .btn--sm { min-height: 44px !important; padding: 10px 20px !important; font-size: 15px !important; }
html body .ao4 .btn--block { width: 100% !important; }
html body .ao4 .flyer .btn--main { background: var(--flyer-btn-bg) !important; color: var(--flyer-btn-ink) !important; }
html body .ao4 .flyer .btn--ghost { color: var(--flyer-ghost-ink) !important; border-color: var(--flyer-ghost-line) !important; }
html body .ao4 .cta-row { display: flex !important; flex-wrap: wrap !important; gap: 12px !important; margin-top: 28px !important; }
html body .ao4 .hero .cta-row { margin-top: 18px !important; }
html body .ao4 .cta-row--center { justify-content: center !important; margin-top: 44px !important; }
@media (max-width: 759px) {
html body .ao4 .cta-row .btn { width: 100% !important; }
}
html body .ao4 .flyer { position: relative !important; background: var(--flyer-bg) !important; color: var(--flyer-ink) !important; overflow: hidden !important; isolation: isolate !important; }
html body .ao4 .flyer__glow { position: absolute !important; inset: auto -10% -40% auto !important; width: 60vw !important; height: 60vw !important; border-radius: 50% !important; background: radial-gradient(circle, rgba(255, 151, 63, .22), transparent 65%) !important; z-index: -1 !important; pointer-events: none !important; }
html body .ao4 .hero { padding: 26px 0 0 !important; }
html body .ao4 .hero__grid { display: grid !important; gap: 28px !important; align-items: center !important; padding-bottom: 32px !important; }
@media (min-width: 1024px) {
html body .ao4 .hero__grid { grid-template-columns: 1.12fr .88fr !important; gap: 40px !important; padding-bottom: 40px !important; }
html body .ao4 .hero { padding-top: 20px !important; }
}
html body .ao4 .hero__stickers { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; align-items: center !important; margin-bottom: 14px !important; }
html body .ao4 .sticker { display: inline-block !important; padding: 9px 16px 8px !important; border-radius: 12px !important; transform: rotate(-3deg) !important; background: var(--sticker-bg) !important; color: var(--sticker-ink) !important; font: 800 14px/1.1 var(--head-font) !important; letter-spacing: .04em !important; text-transform: uppercase !important; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .45) !important; }
html body .ao4 .sticker--sm { font-size: 12px !important; margin: 0 0 12px !important; }
html body .ao4 .countdown { display: inline-flex !important; align-items: baseline !important; gap: 6px !important; padding: 7px 14px !important; border-radius: 99px !important; border: 1.5px dashed var(--chip-line) !important; font-weight: 600 !important; font-size: 15px !important; }
html body .ao4 .countdown b { font: 800 22px/1 var(--head-font) !important; color: var(--price) !important; }
html body .ao4 .countdown.is-over b, html body .ao4 .countdown.is-over [data-days-word] { display: none !important; }
html body .ao4 .hero__eyebrow { margin: 0 0 8px !important; font-weight: 700 !important; font-size: 17px !important; color: var(--flyer-muted) !important; letter-spacing: .01em !important; }
html body .ao4 .hero__title, html body .ao4 .final__title { margin: 0 !important; font: 800 clamp(30px, 3.7vw, 52px)/1.04 var(--head-font) !important; letter-spacing: -.02em !important; text-wrap: balance !important; }
html body .ao4 .grad { background: var(--grad) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; }
html body .ao4 .price { margin: 20px 0 0 !important; }
html body .ao4 .price__num { display: block !important; font: 800 clamp(50px, 6.8vw, 96px)/.95 var(--head-font) !important; color: var(--price) !important; letter-spacing: -.03em !important; white-space: nowrap !important; }
html body .ao4 .price__row { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 6px 14px !important; margin-top: 10px !important; }
html body .ao4 .price__per { font-weight: 700 !important; font-size: 17px !important; }
html body .ao4 .price__old { display: inline-flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 6px 12px !important; }
html body .ao4 .price__old s { font: 700 clamp(19px, 1.9vw, 26px)/1 var(--head-font) !important; color: var(--price-old) !important; text-decoration-thickness: 3px !important; text-decoration-color: var(--orange-deep) !important; }
html body .ao4 .price__save { display: inline-block !important; background: var(--sticker-bg) !important; color: var(--sticker-ink) !important; border-radius: 8px !important; padding: 5px 10px !important; font-weight: 800 !important; font-size: 14px !important; letter-spacing: .02em !important; transform: rotate(-2deg) !important; }
html body .ao4 .chips { list-style: none !important; margin: 18px 0 0 !important; padding: 0 !important; display: grid !important; gap: 8px !important; }
@media (min-width: 640px) {
html body .ao4 .chips { grid-template-columns: repeat(3, auto) !important; justify-content: start !important; }
}
html body .ao4 .chips li { display: flex !important; align-items: center !important; gap: 10px !important; padding: 10px 14px !important; border-radius: 14px !important; background: var(--chip-bg) !important; border: 1px solid var(--chip-line) !important; font-weight: 700 !important; font-size: 15px !important; line-height: 1.25 !important; }
html body .ao4 .chips .ic { color: var(--chip-ic) !important; width: 22px !important; height: 22px !important; }
html body .ao4 .hero__extra { margin: 14px 0 0 !important; font-size: 15.5px !important; color: var(--flyer-muted) !important; max-width: 640px !important; }
html body .ao4 .hero__extra b { color: var(--flyer-ink) !important; }
html body .ao4 .hero__extra a { color: var(--flyer-ink) !important; font-weight: 700 !important; }
html body .ao4 .hero__phone { margin: 16px 0 0 !important; display: flex !important; flex-wrap: wrap !important; gap: 4px 12px !important; align-items: baseline !important; font-size: 15px !important; color: var(--flyer-muted) !important; }
html body .ao4 .hero__phone a { font: 700 20px/1.2 var(--head-font) !important; color: var(--flyer-ink) !important; text-decoration: none !important; }
html body .ao4 .hero__art { margin: 0 !important; position: relative !important; }
html body .ao4 .hero__art img { width: 100% !important; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .35)) !important; }
html body .ao4 .hero__art figcaption { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; justify-content: center !important; margin-top: 6px !important; }
html body .ao4 .tag { font-weight: 700 !important; font-size: 13px !important; padding: 6px 12px !important; border-radius: 99px !important; border: 1px solid var(--chip-line) !important; background: var(--chip-bg) !important; }
html body .ao4 .tag--b { background: var(--orange) !important; color: var(--on-orange) !important; border-color: transparent !important; }
html body .ao4 .tag--c { opacity: .85 !important; font-weight: 600 !important; }
@media (max-width: 1023px) {
html body .ao4 .hero__art { max-width: 620px !important; margin-inline: auto !important; width: 100% !important; }
}
html body .ao4 .warn { margin: 0 !important; text-align: center !important; font-weight: 700 !important; letter-spacing: .01em !important; }
html body .ao4 .warn--inline { padding: 20px !important; font: 700 clamp(15px, 1.7vw, 22px)/1.3 var(--body-font) !important; background: rgba(3, 26, 25, .55) !important; color: #F2FBFA !important; border-top: 1px solid var(--flyer-line) !important; }
html body .ao4 .ribbon { background: var(--orange) !important; color: var(--on-orange) !important; transform: rotate(-1.4deg) !important; margin: -10px -2vw 0 !important; position: relative !important; z-index: 2 !important; overflow: hidden !important; box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .5) !important; }
html body .ao4 .ribbon__track { display: flex !important; width: max-content !important; animation: ribbon 38s linear infinite !important; }
html body .ao4 .ribbon__track span { white-space: nowrap !important; padding: 13px 0 !important; font: 800 16px/1 var(--head-font) !important; letter-spacing: .05em !important; text-transform: uppercase !important; }
@keyframes ribbon { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
html body .ao4 .ribbon__track { animation: none !important; }
}
html body .ao4 .sec { padding: clamp(56px, 8vw, 104px) 0 !important; background: var(--page) !important; }
html body .ao4 .sec--light { background: var(--sec-light) !important; }
html body .ao4 .sec--tint { background: var(--sec-tint) !important; }
html body .ao4 .kicker { display: inline-block !important; margin: 0 0 14px !important; padding: 6px 12px !important; border-radius: 8px !important; background: var(--orange) !important; color: var(--on-orange) !important; font: 800 12.5px/1.1 var(--head-font) !important; letter-spacing: .06em !important; text-transform: uppercase !important; transform: rotate(-1.5deg) !important; }
html body .ao4 .h2 { margin: 0 0 18px !important; font: 800 clamp(26px, 3.6vw, 44px)/1.12 var(--head-font) !important; color: var(--head) !important; letter-spacing: -.015em !important; text-wrap: balance !important; }
html body .ao4 .lead { font-size: clamp(17px, 1.6vw, 20px) !important; color: var(--ink) !important; max-width: 820px !important; margin: 0 0 16px !important; }
html body .ao4 .sub { font-weight: 700 !important; margin: 26px 0 14px !important; color: var(--head) !important; font-size: 18px !important; }
html body .ao4 .note { margin: 22px 0 0 !important; font-size: 14.5px !important; color: var(--ink-2) !important; }
html body .ao4 .frames { list-style: none !important; margin: 30px 0 0 !important; padding: 0 !important; display: grid !important; gap: 18px !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; counter-reset: fr !important; }
html body .ao4 .frame { position: relative !important; background: var(--frame-bg) !important; border: 1px solid var(--line) !important; border-radius: var(--radius) !important; padding: 46px 12px 16px !important; display: flex !important; flex-direction: column !important; }
html body .ao4 .frame img { width: 100% !important; }
html body .ao4 .frame__step { position: absolute !important; top: 14px !important; left: 14px !important; font: 800 12.5px/1 var(--head-font) !important; letter-spacing: .06em !important; text-transform: uppercase !important; padding: 6px 10px !important; border-radius: 8px !important; background: var(--out-bg) !important; color: var(--out-ink) !important; }
html body .ao4 .frame--hit { border: 3px solid var(--orange) !important; box-shadow: 0 18px 40px -22px rgba(242, 123, 29, .7) !important; }
html body .ao4 .frame--hit .frame__step { background: var(--orange) !important; color: var(--on-orange) !important; }
html body .ao4 .frame__cap { margin: 10px 4px 0 !important; font-weight: 700 !important; font-size: 16px !important; line-height: 1.3 !important; color: var(--head) !important; }
html body .ao4 .frame__tag { align-self: flex-start !important; margin: 10px 4px 0 !important; padding: 6px 10px !important; border-radius: 8px !important; font-weight: 800 !important; font-size: 13.5px !important; }
html body .ao4 .frame__tag--in { background: var(--orange) !important; color: var(--on-orange) !important; }
html body .ao4 .frame__tag--out { background: var(--out-bg) !important; color: var(--out-ink) !important; }
html body .ao4 .frame:not(:last-child)::after { content: "→" !important; position: absolute !important; right: -16px !important; top: 46% !important; z-index: 2 !important; width: 30px !important; height: 30px !important; border-radius: 50% !important; display: grid !important; place-items: center !important; background: var(--orange) !important; color: var(--on-orange) !important; font-weight: 800 !important; font-size: 16px !important; }
@media (max-width: 599px) {
html body .ao4 .frames { display: flex !important; overflow-x: auto !important; scroll-snap-type: x mandatory !important; gap: 14px !important; margin-inline: -20px !important; padding: 4px 20px 14px !important; scrollbar-width: thin !important; }
html body .ao4 .frame { flex: 0 0 84% !important; scroll-snap-align: center !important; }
html body .ao4 .frame::after { display: none !important; }
}
html body .ao4 .pains { list-style: none !important; margin: 0 !important; padding: 0 !important; display: grid !important; gap: 14px !important; grid-template-columns: repeat(3, 1fr) !important; }
html body .ao4 .pains li { display: grid !important; grid-template-columns: 48px 1fr !important; column-gap: 14px !important; align-items: start !important; background: var(--card) !important; border: 1px solid var(--line) !important; border-radius: 18px !important; padding: 18px !important; }
html body .ao4 .pains .ic { grid-row: span 2 !important; width: 48px !important; height: 48px !important; padding: 11px !important; border-radius: 14px !important; background: var(--ic-bg) !important; color: var(--ic) !important; }
html body .ao4 .pains b { font-size: 17.5px !important; color: var(--head) !important; }
html body .ao4 .pains span { color: var(--ink-2) !important; font-size: 15.5px !important; }
@media (max-width: 1023px) {
html body .ao4 .pains { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 599px) {
html body .ao4 .pains { grid-template-columns: 1fr !important; }
}
html body .ao4 .split { display: grid !important; gap: 32px !important; align-items: start !important; }
@media (min-width: 1024px) {
html body .ao4 .split { grid-template-columns: 1.3fr .7fr !important; gap: 56px !important; }
}
html body .ao4 .facts { margin: 8px 0 0 !important; padding: 0 !important; list-style: none !important; counter-reset: f !important; display: grid !important; gap: 14px !important; }
html body .ao4 .facts li { counter-increment: f !important; position: relative !important; padding: 4px 0 4px 58px !important; font-size: 17px !important; }
html body .ao4 .facts li::before { content: counter(f) !important; position: absolute !important; left: 0 !important; top: 0 !important; width: 42px !important; height: 42px !important; border-radius: 50% !important; display: grid !important; place-items: center !important; background: var(--head) !important; color: #fff !important; font: 800 17px/1 var(--head-font) !important; }
html body .ao4 .facts b { color: var(--head) !important; }
html body .ao4 .callout { background: var(--card) !important; border: 2px solid var(--orange) !important; border-radius: var(--radius) !important; padding: 26px !important; box-shadow: 0 20px 50px -30px rgba(10, 67, 66, .5) !important; }
html body .ao4 .callout .ic { color: var(--ic) !important; }
html body .ao4 .callout__title { font: 800 21px/1.25 var(--head-font) !important; color: var(--head) !important; margin: 12px 0 8px !important; }
html body .ao4 .callout p { margin: 0 0 18px !important; }
html body .ao4 .callout .btn { width: 100% !important; }
html body .ao4 .get { display: grid !important; gap: 28px !important; align-items: start !important; margin-top: 26px !important; grid-template-columns: minmax(0, 1fr) !important; }
html body .ao4 .get > * { min-width: 0 !important; }
@media (min-width: 1100px) {
html body .ao4 .get { grid-template-columns: 1.35fr .9fr !important; gap: 36px !important; }
}
html body .ao4 .benefits { list-style: none !important; margin: 0 !important; padding: 0 !important; display: grid !important; gap: 14px !important; grid-template-columns: repeat(2, 1fr) !important; }
@media (max-width: 699px) {
html body .ao4 .benefits { grid-template-columns: minmax(0, 1fr) !important; }
}
html body .ao4 .benefit { display: flex !important; gap: 14px !important; min-width: 0 !important; background: var(--card) !important; border: 1px solid var(--line) !important; border-radius: 18px !important; padding: 18px !important; }
html body .ao4 .benefit .ic { width: 46px !important; height: 46px !important; padding: 11px !important; border-radius: 14px !important; background: var(--ic-bg) !important; color: var(--ic) !important; }
html body .ao4 .benefit b { display: block !important; font-size: 17.5px !important; line-height: 1.3 !important; color: var(--head) !important; margin-bottom: 4px !important; }
html body .ao4 .benefit span { color: var(--ink-2) !important; font-size: 15.5px !important; }
html body .ao4 .benefit--hit { grid-column: 1 / -1 !important; background: var(--flyer-bg) !important; border: 0 !important; color: var(--flyer-ink) !important; }
html body .ao4 .benefit--hit b { color: var(--flyer-ink) !important; font: 800 clamp(19px, 2vw, 24px)/1.2 var(--head-font) !important; }
html body .ao4 .benefit--hit span { color: var(--flyer-muted) !important; font-size: 16.5px !important; }
html body .ao4 .benefit--hit .ic { background: var(--orange) !important; color: var(--on-orange) !important; }
html body .ao4 .receipt { position: relative !important; background: #FFFFFF !important; color: #1C2524 !important; border-radius: 16px 16px 0 0 !important; padding: 28px 24px 22px !important; box-shadow: 0 26px 60px -30px rgba(0, 0, 0, .45) !important; border: 1px solid #E3E8E7 !important; border-bottom: 0 !important; font-variant-numeric: tabular-nums !important; transform: rotate(.6deg) !important; }
html body .ao4 .receipt::after { content: "" !important; position: absolute !important; left: -1px !important; right: -1px !important; bottom: -12px !important; height: 12px !important; background: radial-gradient(circle at 10px 0, #FFFFFF 9px, transparent 9.5px) -1px 0 / 20px 12px repeat-x !important; filter: drop-shadow(0 2px 0 #E3E8E7) !important; }
html body .ao4 .receipt__stamp { position: absolute !important; top: 18px !important; right: 16px !important; margin: 0 !important; padding: 6px 12px !important; border-radius: 8px !important; background: var(--orange) !important; color: var(--on-orange) !important; font: 800 13px/1 var(--head-font) !important; letter-spacing: .08em !important; text-transform: uppercase !important; transform: rotate(8deg) !important; }
html body .ao4 .receipt__title { margin: 0 70px 4px 0 !important; font: 800 19px/1.25 var(--head-font) !important; color: #10201F !important; }
html body .ao4 .receipt__sub { margin: 0 0 14px !important; font-size: 14px !important; color: #4F5C5B !important; }
html body .ao4 .receipt__table { width: 100% !important; border-collapse: collapse !important; font-size: 15px !important; }
html body .ao4 .receipt__table th { text-align: left !important; font-weight: 500 !important; padding: 9px 10px 9px 0 !important; vertical-align: top !important; }
html body .ao4 .receipt__table td { text-align: right !important; padding: 9px 0 !important; white-space: nowrap !important; font-weight: 600 !important; vertical-align: top !important; }
html body .ao4 .receipt__table tbody tr { border-bottom: 1px dashed #C9D2D1 !important; }
html body .ao4 .receipt__table tbody td { color: #2D3938 !important; }
html body .ao4 .receipt__sum th, html body .ao4 .receipt__sum td { padding-top: 14px !important; font-weight: 700 !important; }
html body .ao4 .receipt__sum s { text-decoration-thickness: 2px !important; text-decoration-color: var(--orange-deep) !important; color: #4F5C5B !important; }
html body .ao4 .receipt__total th, html body .ao4 .receipt__total td { font: 800 22px/1.2 var(--head-font) !important; padding-top: 8px !important; }
html body .ao4 .receipt__save th, html body .ao4 .receipt__save td { padding-top: 6px !important; }
html body .ao4 .receipt__save td { color: var(--on-orange) !important; }
html body .ao4 .receipt__save td, html body .ao4 .receipt__save th { font-weight: 800 !important; }
html body .ao4 .receipt__save td { background: var(--orange) !important; border-radius: 6px !important; padding: 6px 8px !important; }
html body .ao4 .receipt__foot { margin: 16px 0 0 !important; font-size: 13.5px !important; color: #4F5C5B !important; }
@media (min-width: 1100px) {
html body .ao4 .receipt { position: sticky !important; top: 90px !important; }
}
@media (max-width: 599px) {
html body .ao4 .receipt__stamp { top: -14px !important; right: 10px !important; }
html body .ao4 .receipt__title { margin-right: 0 !important; }
html body .ao4 .receipt { padding: 24px 16px 20px !important; }
html body .ao4 .receipt__total th, html body .ao4 .receipt__total td { font-size: 19px !important; }
}
html body .ao4 .why { margin: 4px 0 30px !important; }
html body .ao4 .why__lead { margin: 0 0 18px !important; max-width: 820px !important; font-size: clamp(17px, 1.6vw, 20px) !important; color: var(--ink) !important; }
html body .ao4 .outcomes { list-style: none !important; margin: 0 !important; padding: 0 !important; display: grid !important; gap: 14px !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
@media (max-width: 1099px) {
html body .ao4 .outcomes { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 699px) {
html body .ao4 .outcomes { grid-template-columns: minmax(0, 1fr) !important; }
}
html body .ao4 .outcome { display: flex !important; flex-direction: column !important; gap: 8px !important; min-width: 0 !important; background: var(--card) !important; border: 1px solid var(--line) !important; border-radius: 18px !important; padding: 20px !important; }
html body .ao4 .outcome .ic { width: 46px !important; height: 46px !important; padding: 11px !important; border-radius: 50% !important; background: var(--ic-bg) !important; color: var(--ic) !important; }
html body .ao4 .outcome b { font-size: 18px !important; line-height: 1.3 !important; color: var(--head) !important; }
html body .ao4 .outcome span { font-size: 15.5px !important; color: var(--ink-2) !important; }
@media (max-width: 699px) {
html body .ao4 .outcome { display: grid !important; grid-template-columns: 46px 1fr !important; column-gap: 14px !important; row-gap: 2px !important; align-items: start !important; }
html body .ao4 .outcome .ic { grid-row: span 2 !important; }
}
html body .ao4 .why__note { margin: 14px 0 0 !important; font-size: 14px !important; color: var(--ink-2) !important; }
html body .ao4 .why + .sub { margin-top: 8px !important; }
html body .ao4 .path { list-style: none !important; margin: 28px 0 0 !important; padding: 0 !important; display: grid !important; gap: 14px !important; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important; }
html body .ao4 .path__step { display: flex !important; gap: 14px !important; background: var(--card) !important; border: 1px solid var(--line) !important; border-radius: 18px !important; padding: 18px !important; }
html body .ao4 .path__n { flex: none !important; width: 40px !important; height: 40px !important; border-radius: 50% !important; display: grid !important; place-items: center !important; font: 800 16px/1 var(--head-font) !important; background: var(--out-bg) !important; color: var(--out-ink) !important; }
html body .ao4 .path__step b { display: block !important; font-size: 17.5px !important; color: var(--head) !important; }
html body .ao4 .path__step p { margin: 4px 0 10px !important; color: var(--ink-2) !important; font-size: 15.5px !important; }
html body .ao4 .pill { display: inline-block !important; font-weight: 800 !important; font-size: 13px !important; padding: 5px 10px !important; border-radius: 8px !important; background: var(--out-bg) !important; color: var(--out-ink) !important; }
html body .ao4 .pill--in, html body .ao4 .path__step--in .path__n { background: var(--in-bg) !important; color: var(--in-ink) !important; }
html body .ao4 .pill--hit, html body .ao4 .path__step--hit .path__n { background: var(--orange) !important; color: var(--on-orange) !important; }
html body .ao4 .path__step--hit { border: 2px solid var(--orange) !important; }
html body .ao4 .extras { margin: 22px 0 0 !important; display: grid !important; gap: 0 !important; background: var(--card) !important; border: 1px solid var(--line) !important; border-radius: var(--radius) !important; overflow: hidden !important; }
html body .ao4 .extras > div { display: grid !important; grid-template-columns: minmax(180px, .8fr) 1.2fr !important; gap: 6px 22px !important; padding: 16px 22px !important; border-bottom: 1px solid var(--line) !important; }
html body .ao4 .extras > div:last-child { border-bottom: 0 !important; }
html body .ao4 .extras dt { font-weight: 700 !important; color: var(--head) !important; }
html body .ao4 .extras dd { margin: 0 !important; color: var(--ink-2) !important; }
html body .ao4 .extras dd a { color: var(--head) !important; font-weight: 700 !important; }
html body .ao4 .extras__hit { background: #FFF1E3 !important; }
@media (max-width: 599px) {
html body .ao4 .extras > div { grid-template-columns: 1fr !important; }
}
html body .ao4 .team { list-style: none !important; margin: 26px 0 0 !important; padding: 0 !important; display: grid !important; gap: 18px !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
@media (max-width: 899px) {
html body .ao4 .team { grid-template-columns: minmax(0, 1fr) !important; max-width: 520px !important; margin-inline: auto !important; }
}
html body .ao4 .team__card { position: relative !important; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; background: var(--card) !important; border: 1px solid var(--line) !important; border-radius: var(--radius) !important; padding: 28px 24px !important; min-width: 0 !important; transition: transform .15s, box-shadow .15s !important; }
html body .ao4 .team__photo { width: 200px !important; max-width: 100% !important; aspect-ratio: 1 !important; border-radius: 50% !important; overflow: hidden !important; background: var(--doc-circle) !important; margin-bottom: 18px !important; }
html body .ao4 .team__photo img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
html body .ao4 .team__name { margin: 0 0 6px !important; font: 800 19px/1.3 var(--head-font) !important; color: var(--head) !important; }
html body .ao4 .team__role { margin: 0 0 16px !important; color: var(--ink-2) !important; font-weight: 600 !important; }
html body .ao4 .team .ticks { align-self: stretch !important; text-align: left !important; margin-bottom: 0 !important; }
html body .ao4 .team__card:is(:hover, :active) { transform: translateY(-4px) !important; box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .35) !important; }
html body .ao4 .team__link { color: inherit !important; text-decoration: none !important; -webkit-tap-highlight-color: transparent !important; }
html body .ao4 .team__link::after { content: "" !important; position: absolute !important; inset: 0 !important; border-radius: var(--radius) !important; }
html body .ao4 .team__link:focus-visible { outline: none !important; box-shadow: none !important; }
html body .ao4 .team__card:has(.team__link:focus-visible) { outline: 3px solid #111 !important; outline-offset: 2px !important; }
html body .ao4 .team__more { display: inline-flex !important; align-items: center !important; gap: 6px !important; margin-top: auto !important; padding-top: 18px !important; font-weight: 700 !important; color: var(--head) !important; }
@media (prefers-reduced-motion: reduce) {
html body .ao4 .team__card:is(:hover, :active) { transform: none !important; }
}
html body .ao4 .team__note { margin: 24px auto 0 !important; max-width: 760px !important; text-align: center !important; color: var(--ink-2) !important; }
html body .ao4 .ticks { list-style: none !important; margin: 0 0 26px !important; padding: 0 !important; display: grid !important; gap: 10px !important; }
html body .ao4 .ticks li { display: flex !important; gap: 12px !important; align-items: flex-start !important; font-size: 16.5px !important; }
html body .ao4 .ticks .ic { color: var(--on-orange) !important; background: var(--orange) !important; border-radius: 50% !important; padding: 4px !important; width: 26px !important; height: 26px !important; margin-top: 1px !important; stroke-width: 2.6 !important; }
html body .ao4 .ticks--cond li { background: var(--card) !important; border: 1px solid var(--line) !important; border-radius: 14px !important; padding: 14px 16px !important; }
html body .ao4 .faq { display: grid !important; gap: 10px !important; margin-top: 18px !important; }
html body .ao4 .faq details { background: var(--card) !important; border: 1px solid var(--line) !important; border-radius: 16px !important; }
html body .ao4 .faq summary { list-style: none !important; cursor: pointer !important; padding: 18px 56px 18px 20px !important; font-weight: 700 !important; font-size: 17.5px !important; color: var(--head) !important; position: relative !important; border-radius: 16px !important; }
html body .ao4 .faq summary::-webkit-details-marker { display: none !important; }
html body .ao4 .faq summary::after { content: "+" !important; position: absolute !important; right: 16px !important; top: 50% !important; translate: 0 -50% !important; width: 30px !important; height: 30px !important; border-radius: 50% !important; display: grid !important; place-items: center !important; background: var(--orange) !important; color: var(--on-orange) !important; font: 800 20px/1 var(--body-font) !important; transition: rotate .2s !important; }
html body .ao4 .faq details[open] summary::after { rotate: 45deg !important; }
html body .ao4 .faq details p { margin: 0 !important; padding: 0 20px 20px !important; color: var(--ink-2) !important; }
html body .ao4 .final { padding: 64px 0 0 !important; text-align: center !important; }
html body .ao4 .final__in { padding-bottom: 48px !important; }
html body .ao4 .final .hero__stickers, html body .ao4 .final .hero__phone { justify-content: center !important; }
html body .ao4 .final__title { font-size: clamp(30px, 4.6vw, 60px) !important; max-width: 980px !important; margin-inline: auto !important; }
html body .ao4 .final__line { margin: 18px auto 0 !important; font-size: clamp(17px, 1.8vw, 21px) !important; font-weight: 600 !important; color: var(--flyer-muted) !important; max-width: 720px !important; }
html body .ao4 .final__price { margin: 22px 0 0 !important; display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: baseline !important; gap: 6px 16px !important; }
html body .ao4 .final__small { margin: 10px 0 0 !important; font-weight: 700 !important; color: var(--flyer-muted) !important; }
html body .ao4 .others { display: grid !important; gap: 16px !important; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important; margin-top: 22px !important; }
html body .ao4 .other { position: relative !important; display: flex !important; flex-direction: column !important; gap: 8px !important; padding: 24px !important; border-radius: var(--radius) !important; background: var(--card) !important; border: 1px solid var(--line) !important; text-decoration: none !important; color: var(--ink) !important; transition: transform .15s, box-shadow .15s !important; }
html body .ao4 .other:hover { transform: translateY(-4px) !important; box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .35) !important; }
html body .ao4 .other__badge { align-self: flex-start !important; background: var(--orange) !important; color: var(--on-orange) !important; font: 800 20px/1 var(--head-font) !important; padding: 8px 12px !important; border-radius: 10px !important; transform: rotate(-2deg) !important; }
html body .ao4 .other b { font-size: 18.5px !important; color: var(--head) !important; line-height: 1.3 !important; }
html body .ao4 .other span { color: var(--ink-2) !important; }
html body .ao4 .other__more { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-weight: 700 !important; color: var(--head) !important; margin-top: 4px !important; }
html body .ao4 .dock { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; z-index: 40 !important; }
html body .ao4 .dock__cta { display: flex !important; gap: 10px !important; padding: 10px 12px !important; background: var(--sec-light) !important; border-top: 1px solid var(--line) !important; box-shadow: 0 -10px 30px -18px rgba(0, 0, 0, .4) !important; }
html body .ao4 .dock__cta .btn { flex: 1 !important; min-height: 52px !important; padding: 10px 16px !important; font-size: 16px !important; }
html body .ao4 .dock__call { flex: none !important; width: 52px !important; height: 52px !important; border-radius: 50% !important; display: grid !important; place-items: center !important; border: 2px solid var(--head) !important; color: var(--head) !important; }
html body .ao4 .dock__call .ic { width: 24px !important; height: 24px !important; }
@media (min-width: 760px) {
html body .ao4 .dock__cta { display: none !important; }
}
html body .ao4 .warn--dock { height: var(--dock-h) !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 14px !important; background: var(--dock-bg) !important; color: var(--dock-ink) !important; font: 700 clamp(12.5px, 2.1vh, 19px)/1.2 var(--body-font) !important; border-top: 2px solid var(--orange) !important; }
html body .ao4 .modal { border: 0 !important; padding: 0 !important; background: transparent !important; width: min(560px, 100vw - 24px) !important; max-height: calc(100dvh - 24px) !important; color: var(--ink) !important; }
html body .ao4 .modal::backdrop { background: rgba(3, 26, 25, .72) !important; backdrop-filter: blur(3px) !important; }
html body .ao4 .modal__box { position: relative !important; background: var(--sec-light) !important; border-radius: 24px !important; padding: 30px 26px 26px !important; max-height: calc(100dvh - 24px) !important; overflow: auto !important; overscroll-behavior: contain !important; }
html:has(.ao4 dialog.modal[open]) { overflow: hidden !important; }
@media (max-width: 559px) {
html body .ao4 .modal { width: 100vw !important; max-width: 100vw !important; height: 100dvh !important; max-height: 100dvh !important; margin: 0 !important; }
html body .ao4 .modal__box { min-height: 100dvh !important; max-height: 100dvh !important; border-radius: 0 !important; padding: 22px 18px 28px !important; }
}
html body .ao4 .modal__close { position: absolute !important; top: 12px !important; right: 12px !important; width: 44px !important; height: 44px !important; border-radius: 50% !important; border: 0 !important; background: var(--out-bg) !important; color: var(--ink) !important; display: grid !important; place-items: center !important; }
html body .ao4 .modal__close .ic { width: 22px !important; height: 22px !important; }
html body .ao4 .modal__title { margin: 0 48px 8px 0 !important; font: 800 clamp(21px, 3vw, 26px)/1.2 var(--head-font) !important; color: var(--head) !important; }
html body .ao4 .modal__title:focus { outline: none !important; }
html body .ao4 .modal__sub { margin: 0 0 16px !important; color: var(--ink-2) !important; }
html body .ao4 .form { display: grid !important; gap: 14px !important; }
html body .ao4 .field { display: grid !important; gap: 6px !important; font-weight: 700 !important; font-size: 15px !important; color: var(--head) !important; border: 0 !important; padding: 0 !important; margin: 0 !important; }
html body .ao4 .field input[type="text"], html body .ao4 .field input[type="tel"] { width: 100% !important; min-height: 54px !important; padding: 12px 16px !important; border-radius: 14px !important; border: 2px solid var(--field-line) !important; background: #fff !important; font: 500 17px/1.2 var(--body-font) !important; color: #10201F !important; }
html body .ao4 .field input:focus { outline: 3px solid #111 !important; outline-offset: 2px !important; border-color: #111 !important; box-shadow: 0 0 0 7px #FFD400 !important; }
html body .ao4 .field input[aria-invalid="true"] { border-color: #e6584f !important; }
html body .ao4 .field--radio legend { margin-bottom: 8px !important; }
html body .ao4 .field--radio { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }
html body .ao4 .field--radio legend { width: 100% !important; }
html body .ao4 .field--radio label { flex: 1 1 120px !important; }
html body .ao4 .field--radio input { position: absolute !important; opacity: 0 !important; pointer-events: none !important; }
html body .ao4 .field--radio span { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; min-height: 48px !important; padding: 8px 12px !important; border-radius: 12px !important; border: 2px solid var(--field-line) !important; font-weight: 700 !important; color: var(--ink) !important; cursor: pointer !important; }
html body .ao4 .field--radio input:checked + span { border-color: var(--orange-deep) !important; background: #FFF1E3 !important; }
html body .ao4 .field--radio input:focus-visible + span { outline: 3px solid #111 !important; outline-offset: 2px !important; box-shadow: 0 0 0 7px #FFD400 !important; }
html body .ao4 .consent { display: flex !important; gap: 10px !important; align-items: flex-start !important; font-size: 14px !important; color: var(--ink-2) !important; }
html body .ao4 .consent input { width: 22px !important; height: 22px !important; margin: 1px 0 0 !important; flex: none !important; accent-color: var(--orange-deep) !important; }
html body .ao4 .consent a { color: var(--head) !important; font-weight: 600 !important; }
html body .ao4 .form__err { margin: 0 !important; color: #c0392b !important; font-weight: 700 !important; font-size: 14.5px !important; }
html body .ao4 .form__note { margin: 4px 0 0 !important; font-size: 13px !important; color: var(--ink-2) !important; text-align: center !important; }
html body .ao4 .hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
html body .ao4 .thanks__mark { width: 64px !important; height: 64px !important; border-radius: 50% !important; display: grid !important; place-items: center !important; background: var(--orange) !important; color: var(--on-orange) !important; margin: 8px 0 14px !important; }
html body .ao4 .thanks__mark .ic { width: 34px !important; height: 34px !important; stroke-width: 2.6 !important; }
html body .ao4 .next { margin: 0 0 16px !important; padding-left: 22px !important; display: grid !important; gap: 8px !important; }
html body .ao4 .quiz__progress { display: grid !important; gap: 8px !important; margin: 0 52px 18px 0 !important; font-weight: 700 !important; font-size: 14px !important; color: var(--ink-2) !important; }
html body .ao4 .quiz__bar { height: 8px !important; border-radius: 99px !important; background: var(--out-bg) !important; overflow: hidden !important; }
html body .ao4 .quiz__bar i { display: block !important; height: 100% !important; width: 25%; background: var(--orange) !important; border-radius: 99px !important; transition: width .25s !important; }
html body .ao4 .opts { display: grid !important; gap: 10px !important; margin-top: 14px !important; }
html body .ao4 .opt { text-align: left !important; min-height: 56px !important; padding: 14px 18px !important; border-radius: 14px !important; border: 2px solid var(--field-line) !important; background: #fff !important; font-weight: 700 !important; font-size: 16.5px !important; color: #10201F !important; transition: border-color .15s, background-color .15s !important; }
html body .ao4 .opt:hover { border-color: var(--orange-deep) !important; background: #FFF6EC !important; }
html body .ao4 .opt[aria-pressed="true"] { border-color: var(--orange-deep) !important; background: #FFF1E3 !important; }
html body .ao4 .quiz__back { margin-top: 16px !important; border: 0 !important; background: none !important; color: var(--ink-2) !important; font-weight: 700 !important; padding: 8px 0 !important; }
html body .ao4 .ticks--quiz { margin-bottom: 18px !important; }
html body .ao4 .ticks--quiz li { font-size: 15.5px !important; }
@media (max-width: 599px) {
html body .ao4 .hero { padding-top: 12px !important; }
html body .ao4 .hero__stickers { gap: 8px !important; margin-bottom: 12px !important; }
html body .ao4 .sticker { font-size: 11.5px !important; padding: 7px 11px 6px !important; }
html body .ao4 .countdown { padding: 5px 10px !important; font-size: 13px !important; }
html body .ao4 .countdown b { font-size: 18px !important; }
html body .ao4 .hero__eyebrow { font-size: 14.5px !important; margin-bottom: 6px !important; }
html body .ao4 .hero__title { font-size: 28px !important; }
html body .ao4 .price { margin-top: 14px !important; }
html body .ao4 .price__num { font-size: 50px !important; }
html body .ao4 .price__row { margin-top: 8px !important; gap: 6px 10px !important; }
html body .ao4 .price__per { font-size: 15px !important; }
html body .ao4 .price__save { font-size: 12.5px !important; padding: 4px 8px !important; }
html body .ao4 .chips { margin-top: 10px !important; gap: 2px !important; }
html body .ao4 .chips li { padding: 4px 0 !important; background: none !important; border: 0 !important; font-size: 15px !important; }
html body .ao4 .chips .ic { width: 20px !important; height: 20px !important; }
html body .ao4 .hero__extra { font-size: 14px !important; margin-top: 8px !important; line-height: 1.4 !important; }
html body .ao4 .hero .cta-row { margin-top: 12px !important; gap: 10px !important; }
html body .ao4 .hero .btn { min-height: 52px !important; }
}
html body .ao4 .path__total { margin: 22px 0 0 !important; padding: 18px 22px !important; border-radius: 18px !important; background: var(--card) !important; border: 2px dashed var(--orange-deep) !important; font-size: 16.5px !important; color: var(--ink) !important; }
html body .ao4 .path__total b { color: var(--head) !important; }
html body .ao4 .sum { list-style: none !important; margin: 0 0 16px !important; padding: 14px 16px !important; border-radius: 14px !important; background: #FFF1E3 !important; display: grid !important; gap: 6px !important; font-size: 14.5px !important; line-height: 1.4 !important; color: #2B1A08 !important; }
html body .ao4 .sum li { position: relative !important; padding-left: 18px !important; }
html body .ao4 .sum li::before { content: "" !important; position: absolute !important; left: 2px !important; top: .55em !important; width: 7px !important; height: 7px !important; border-radius: 50% !important; background: var(--orange-deep) !important; }
html body .ao4 .warn--modal { position: sticky !important; bottom: -26px !important; z-index: 3 !important; margin: 22px -26px -26px !important; min-height: max(6vh, 44px) !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 8px 14px !important; background: var(--dock-bg) !important; color: var(--dock-ink) !important; font: 700 clamp(13px, 1.9vh, 17px)/1.25 var(--body-font) !important; border-top: 2px solid var(--orange) !important; }
@media (max-width: 559px) {
html body .ao4 .warn--modal { bottom: -28px !important; margin: 20px -18px -28px !important; }
}
html body .ao4 .over-note { margin: 14px 0 0 !important; padding: 12px 16px !important; border-radius: 12px !important; background: #FFF6C9 !important; color: #3A3000 !important; font-weight: 700 !important; }
html.promo-over body .ao4 .price, html.promo-over body .ao4 .final__price, html.promo-over body .ao4 .final__small, html.promo-over body .ao4 .ribbon, html.promo-over body .ao4 .sum { display: none !important; }
@media (max-width: 599px) {
html body .ao4 .price__num { font-size: min(50px, 13.2vw) !important; }
}
html body div.ao4[data-variant="c"] { --head-font: "Onest", system-ui, sans-serif; --radius: 28px; --wrap: 1240px; --flyer-bg: #FFFFFF; --flyer-ink: #333333; --flyer-muted: #666666; --flyer-line: #D6D6D6; --price: #055C74; --price-old: #666666; --sticker-bg: #FFF1E3; --sticker-ink: #A84A06; --chip-bg: transparent; --chip-line: #D6D6D6; --flyer-btn-bg: #FF973F; --flyer-btn-ink: #FFFFFF; --flyer-ghost-ink: #0F6B6A; --flyer-ghost-line: #0F6B6A; --header-bg: #FFFFFF; --header-ink: #333333; --page: #F2F2F2; --sec-light: #FFFFFF; --sec-tint: #E9FCFB; --ink: #333333; --ink-2: #666666; --head: #055C74; --line: #D6D6D6; --card: #FFFFFF; --ic: #0F6B6A; --ic-bg: #E9FCFB; --in-bg: #E9FCFB; --in-ink: #0F6B6A; --out-bg: #EDEDED; --out-ink: #333333; --dock-bg: #F2F2F2; --dock-ink: #333333; --foot-bg: #0A4F4E; --foot-ink: #E4F4F3; --frame-bg: #F2F2F2; --doc-circle: #1CC5C2; --field-line: #898989; }
html body div.ao4[data-variant="c"] { font-size: 18px !important; color: #333333 !important; }
@media (max-width: 759px) {
html body div.ao4[data-variant="c"] { font-size: 17px !important; }
}
html body div.ao4[data-variant="c"] .wrap { width: min(var(--wrap), 100% - 48px) !important; }
html body div.ao4[data-variant="c"] .narrow { width: min(860px, 100% - 48px) !important; }
@media (min-width: 768px) {
html body div.ao4[data-variant="c"] .wrap { width: min(var(--wrap), 100% - 80px) !important; }
}
@media (min-width: 1100px) {
html body div.ao4[data-variant="c"] .wrap { width: min(var(--wrap), 100% - 144px) !important; }
}
html body div.ao4[data-variant="c"] .wrap.narrow { max-width: 860px !important; }
html body div.ao4[data-variant="c"] :is(.btn, .opt, summary, a, .modal__close, .quiz__back):focus-visible, html body div.ao4[data-variant="c"] .field--radio input:focus-visible + span { outline: 3px solid #0F6B6A !important; outline-offset: 3px !important; box-shadow: none !important; }
html body div.ao4[data-variant="c"] .field input:focus { outline: 3px solid #0F6B6A !important; outline-offset: 3px !important; box-shadow: none !important; }
html body div.ao4[data-variant="c"] .btn { min-height: 56px !important; padding: 0 30px !important; border-radius: 18px !important; font: 400 18px/1.2 var(--body-font) !important; transition: background-color .15s, color .15s !important; }
html body div.ao4[data-variant="c"] .btn:hover { transform: none !important; }
html body div.ao4[data-variant="c"] .btn--main, html body div.ao4[data-variant="c"] .flyer .btn--main { background: #FF973F !important; color: #FFFFFF !important; box-shadow: none !important; border: 0 !important; }
html body div.ao4[data-variant="c"] .btn--main:hover, html body div.ao4[data-variant="c"] .flyer .btn--main:hover { background: #F2852B !important; }
html body div.ao4[data-variant="c"] .btn--ghost, html body div.ao4[data-variant="c"] .flyer .btn--ghost { border: 1.5px solid #0F6B6A !important; color: #0F6B6A !important; background: transparent !important; }
html body div.ao4[data-variant="c"] .btn--ghost:hover { background: #E9FCFB !important; }
html body div.ao4[data-variant="c"] .btn--sm { min-height: 48px !important; border-radius: 14px !important; font-size: 16px !important; padding: 0 22px !important; }
@media (max-width: 759px) {
html body div.ao4[data-variant="c"] .btn { min-height: 52px !important; border-radius: 14px !important; font-size: 16px !important; padding: 12px 16px !important; }
}
html body div.ao4[data-variant="c"] .ribbon, html body div.ao4[data-variant="c"] .flyer__glow { display: none !important; }
html body div.ao4[data-variant="c"] .hero { padding-top: 40px !important; }
@media (min-width: 1024px) {
html body div.ao4[data-variant="c"] .hero__grid { grid-template-columns: 1.2fr .8fr !important; gap: 40px !important; padding-bottom: 56px !important; }
html body div.ao4[data-variant="c"] .hero { padding-top: 48px !important; }
}
html body div.ao4[data-variant="c"] .sticker { transform: none !important; border-radius: 999px !important; padding: 6px 14px !important; box-shadow: none !important; font: 500 15px/1.3 var(--body-font) !important; letter-spacing: 0 !important; text-transform: none !important; }
html body div.ao4[data-variant="c"] .countdown { border: 1px solid #D6D6D6 !important; font-weight: 400 !important; color: #333333 !important; padding: 4px 14px !important; }
html body div.ao4[data-variant="c"] .countdown b { font: 500 20px/1 var(--body-font) !important; color: #055C74 !important; }
html body div.ao4[data-variant="c"] :is(.hero__eyebrow, .kicker) { display: flex !important; align-items: center !important; gap: 10px !important; margin: 0 0 12px !important; padding: 0 !important; background: none !important; transform: none !important; font: 500 16px/1.55 var(--body-font) !important; color: #117977 !important; letter-spacing: 0 !important; text-transform: none !important; }
html body div.ao4[data-variant="c"] :is(.hero__eyebrow, .kicker)::before { content: "" !important; flex: none !important; width: 10px !important; height: 10px !important; border-radius: 50% !important; background: #1CC5C2 !important; }
html body div.ao4[data-variant="c"] :is(.hero__title, .final__title) { font: 500 48px/1.12 var(--body-font) !important; color: #055C74 !important; letter-spacing: 0 !important; }
html body div.ao4[data-variant="c"] .grad { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; color: #FF973F !important; padding: 0 !important; }
html body div.ao4[data-variant="c"] .price__num { font: 500 64px/1 var(--body-font) !important; color: #055C74 !important; letter-spacing: -.01em !important; font-variant-numeric: tabular-nums !important; }
html body div.ao4[data-variant="c"] .price__per { font-weight: 500 !important; color: #333333 !important; }
html body div.ao4[data-variant="c"] .price__old s { font: 400 22px/1 var(--body-font) !important; color: #666666 !important; text-decoration-thickness: 2px !important; text-decoration-color: #FF973F !important; }
html body div.ao4[data-variant="c"] .price__save { transform: none !important; border-radius: 999px !important; padding: 5px 12px !important; font-weight: 500 !important; font-size: 15px !important; letter-spacing: 0 !important; }
html body div.ao4[data-variant="c"] .chips { grid-template-columns: 1fr !important; gap: 8px !important; margin-top: 20px !important; }
html body div.ao4[data-variant="c"] .chips li { padding: 0 !important; border: 0 !important; background: none !important; font-weight: 500 !important; font-size: 17px !important; color: #333333 !important; }
html body div.ao4[data-variant="c"] .chips .ic { width: 28px !important; height: 28px !important; padding: 5px !important; border-radius: 50% !important; background: #0F6B6A !important; color: #FFFFFF !important; stroke-width: 2.2 !important; }
html body div.ao4[data-variant="c"] .hero__extra { color: #666666 !important; font-size: 16px !important; }
html body div.ao4[data-variant="c"] .hero__extra b { color: #333333 !important; font-weight: 500 !important; }
html body div.ao4[data-variant="c"] .hero__extra a { color: #117977 !important; font-weight: 500 !important; }
html body div.ao4[data-variant="c"] .hero__phone a { font: 500 20px/1.2 var(--body-font) !important; color: #333333 !important; }
html body div.ao4[data-variant="c"] .hero__phone span { color: #666666 !important; }
html body div.ao4[data-variant="c"] .hero__art img { filter: drop-shadow(0 22px 26px rgba(5, 92, 116, .28)) !important; }
html body div.ao4[data-variant="c"] .hero__art figcaption { margin-top: 18px !important; }
html body div.ao4[data-variant="c"] .tag { background: #F2F2F2 !important; border: 0 !important; color: #333333 !important; font-weight: 500 !important; font-size: 14px !important; }
html body div.ao4[data-variant="c"] .tag--b { background: #0F6B6A !important; color: #FFFFFF !important; }
html body div.ao4[data-variant="c"] .tag--c { background: none !important; color: #666666 !important; opacity: 1 !important; font-weight: 400 !important; }
html body div.ao4[data-variant="c"] .warn--inline { background: #F2F2F2 !important; color: #333333 !important; border-top: 0 !important; font: 500 clamp(16px, 1.8vw, 26px)/1.3 var(--body-font) !important; padding: 24px 20px !important; min-height: 84px !important; display: flex !important; align-items: center !important; justify-content: center !important; }
html body div.ao4[data-variant="c"] .sec { padding: clamp(56px, 8.9vw, 128px) 0 !important; --card: #FFFFFF; }
html body div.ao4[data-variant="c"] .sec--light { --card: #F2F2F2; }
html body div.ao4[data-variant="c"] .h2 { font: 500 40px/1.15 var(--body-font) !important; color: #055C74 !important; letter-spacing: 0 !important; margin-bottom: 24px !important; }
html body div.ao4[data-variant="c"] .lead { font-size: clamp(18px, 1.5vw, 20px) !important; color: #333333 !important; }
html body div.ao4[data-variant="c"] .sub { font-weight: 500 !important; }
html body div.ao4[data-variant="c"] .note { color: #5B5B5B !important; font-size: 14px !important; }
html body div.ao4[data-variant="c"] :is(.frames, .pains, .benefits, .path, .others, .team, .outcomes) > :nth-of-type(3n + 1) { --band: #1CC5C2; }
html body div.ao4[data-variant="c"] :is(.frames, .pains, .benefits, .path, .others, .team, .outcomes) > :nth-of-type(3n + 2) { --band: #A4E8E6; }
html body div.ao4[data-variant="c"] :is(.frames, .pains, .benefits, .path, .others, .team, .outcomes) > :nth-of-type(3n + 3) { --band: #0F6B6A; }
html body div.ao4[data-variant="c"] :is(.frame, .pains li, .benefit, .path__step, .other, .team__card, .outcome) { background: var(--card) !important; border: 0 !important; border-top: 6px solid var(--band) !important; border-radius: 28px !important; box-shadow: none !important; padding: 24px !important; transition: transform .2s ease, box-shadow .2s ease !important; }
html body div.ao4[data-variant="c"] :is(.frame, .pains li, .benefit, .path__step, .other, .team__card, .outcome):hover, html body div.ao4[data-variant="c"] :is(.other, .team__card):active { transform: translateY(-4px) !important; box-shadow: 0 16px 36px rgba(5, 92, 116, .13) !important; }
@media (prefers-reduced-motion: reduce) {
html body div.ao4[data-variant="c"] :is(.frame, .pains li, .benefit, .path__step, .other, .team__card, .outcome):hover, html body div.ao4[data-variant="c"] :is(.other, .team__card):active { transform: none !important; }
}
html body div.ao4[data-variant="c"] :is(.pains b, .benefit b, .path__step b, .frame__cap, .other b, .outcome b) { font-weight: 500 !important; font-size: 22px !important; line-height: 1.3 !important; color: #055C74 !important; }
html body div.ao4[data-variant="c"] :is(.pains span, .benefit span, .path__step p, .other span, .outcome span) { font-size: 16px !important; color: #666666 !important; }
html body div.ao4[data-variant="c"] :is(.pains .ic, .benefit .ic) { border-radius: 50% !important; background: #E9FCFB !important; color: #0F6B6A !important; }
html body div.ao4[data-variant="c"] .frames .frame { padding: 52px 14px 20px !important; }
html body div.ao4[data-variant="c"] .frame__step { top: 16px !important; left: 16px !important; font: 500 14px/1 var(--body-font) !important; letter-spacing: 0 !important; text-transform: none !important; border-radius: 999px !important; padding: 6px 12px !important; background: #FFFFFF !important; color: #0F6B6A !important; }
html body div.ao4[data-variant="c"] .frames .frame--hit { background: #E9FCFB !important; border-top-color: #0F6B6A !important; box-shadow: none !important; }
html body div.ao4[data-variant="c"] .frame--hit .frame__step { background: #0F6B6A !important; color: #FFFFFF !important; }
html body div.ao4[data-variant="c"] .frame__tag { border-radius: 999px !important; font-weight: 500 !important; font-size: 14px !important; padding: 6px 12px !important; }
html body div.ao4[data-variant="c"] .frame__tag--in { background: #0F6B6A !important; color: #FFFFFF !important; }
html body div.ao4[data-variant="c"] .frame__tag--out { background: #FFFFFF !important; color: #333333 !important; }
html body div.ao4[data-variant="c"] .frame:not(:last-child)::after { background: #0F6B6A !important; color: #FFFFFF !important; font-weight: 500 !important; }
html body div.ao4[data-variant="c"] .facts li::before { background: #0F6B6A !important; font: 500 17px/1 var(--body-font) !important; }
html body div.ao4[data-variant="c"] .facts b { font-weight: 500 !important; }
html body div.ao4[data-variant="c"] .callout { background: #FFFFFF !important; border: 0 !important; border-radius: 28px !important; box-shadow: none !important; padding: 32px 28px !important; }
html body div.ao4[data-variant="c"] .callout__title { font: 500 22px/1.3 var(--body-font) !important; color: #055C74 !important; }
html body div.ao4[data-variant="c"] .benefits .benefit--hit { background: #0F6B6A !important; border-top: 0 !important; color: #FFFFFF !important; }
html body div.ao4[data-variant="c"] .benefit--hit b { font: 500 clamp(20px, 2vw, 24px)/1.25 var(--body-font) !important; color: #FFFFFF !important; }
html body div.ao4[data-variant="c"] .benefit--hit span { color: #E4F4F3 !important; }
html body div.ao4[data-variant="c"] .benefit--hit .ic { background: #FFFFFF !important; color: #0F6B6A !important; }
html body div.ao4[data-variant="c"] .receipt { transform: none !important; box-shadow: none !important; border-radius: 28px 28px 0 0 !important; padding: 32px 28px 24px !important; color: #333333 !important; }
html body div.ao4[data-variant="c"] .receipt__stamp { transform: none !important; border-radius: 999px !important; background: #FFF1E3 !important; color: #A84A06 !important; font: 500 14px/1 var(--body-font) !important; letter-spacing: 0 !important; text-transform: none !important; padding: 7px 12px !important; }
html body div.ao4[data-variant="c"] .receipt__title { font: 500 22px/1.3 var(--body-font) !important; color: #055C74 !important; }
html body div.ao4[data-variant="c"] .receipt__table td { font-weight: 500 !important; }
html body div.ao4[data-variant="c"] .receipt__sum s { text-decoration-color: #FF973F !important; color: #666666 !important; }
html body div.ao4[data-variant="c"] .receipt__sum th, html body div.ao4[data-variant="c"] .receipt__sum td { font-weight: 500 !important; }
html body div.ao4[data-variant="c"] .receipt__total th, html body div.ao4[data-variant="c"] .receipt__total td { font: 500 26px/1.2 var(--body-font) !important; color: #055C74 !important; }
html body div.ao4[data-variant="c"] .receipt__save th, html body div.ao4[data-variant="c"] .receipt__save td { font-weight: 500 !important; }
html body div.ao4[data-variant="c"] .receipt__save td { background: #FFF1E3 !important; color: #A84A06 !important; border-radius: 999px !important; padding: 6px 12px !important; }
html body div.ao4[data-variant="c"] .path__n { font: 500 16px/1 var(--body-font) !important; background: #E9FCFB !important; color: #0F6B6A !important; }
html body div.ao4[data-variant="c"] .path__step--in .path__n { background: #0F6B6A !important; color: #FFFFFF !important; }
html body div.ao4[data-variant="c"] .path .path__step--hit { background: #FFF1E3 !important; }
html body div.ao4[data-variant="c"] .path__step--hit .path__n { background: #A84A06 !important; color: #FFFFFF !important; }
html body div.ao4[data-variant="c"] .pill { border-radius: 999px !important; font-weight: 500 !important; font-size: 14px !important; padding: 5px 12px !important; }
html body div.ao4[data-variant="c"] .pill--in { background: #E9FCFB !important; color: #0F6B6A !important; }
html body div.ao4[data-variant="c"] .pill--hit { background: #FFFFFF !important; color: #A84A06 !important; }
html body div.ao4[data-variant="c"] .path__total { background: #FFFFFF !important; border: 0 !important; border-radius: 28px !important; padding: 24px 28px !important; }
html body div.ao4[data-variant="c"] .path__total b { font-weight: 500 !important; }
html body div.ao4[data-variant="c"] .extras { background: #FFFFFF !important; border: 0 !important; border-radius: 28px !important; }
html body div.ao4[data-variant="c"] .extras > div { padding: 18px 28px !important; }
html body div.ao4[data-variant="c"] .extras dt { font-weight: 500 !important; }
html body div.ao4[data-variant="c"] .extras dd { color: #333333 !important; }
html body div.ao4[data-variant="c"] .extras dd a { color: #117977 !important; font-weight: 500 !important; }
html body div.ao4[data-variant="c"] .extras__hit { background: #FFF1E3 !important; }
html body div.ao4[data-variant="c"] .team .team__card { padding: 32px 24px 28px !important; }
html body div.ao4[data-variant="c"] .team__name { font: 500 22px/1.3 var(--body-font) !important; color: #055C74 !important; }
html body div.ao4[data-variant="c"] .team__role { font-weight: 400 !important; font-size: 16px !important; color: #666666 !important; }
html body div.ao4[data-variant="c"] .team__note { color: #5B5B5B !important; font-size: 16px !important; }
html body div.ao4[data-variant="c"] .team__link:focus-visible { outline: none !important; }
html body div.ao4[data-variant="c"] .team__card:has(.team__link:focus-visible) { outline: 3px solid #0F6B6A !important; outline-offset: 3px !important; }
html body div.ao4[data-variant="c"] .team__more { color: #117977 !important; font-weight: 500 !important; text-decoration: underline !important; text-underline-offset: 3px !important; }
html body div.ao4[data-variant="c"] .ticks .ic { background: #0F6B6A !important; color: #FFFFFF !important; stroke-width: 2.6 !important; }
html body div.ao4[data-variant="c"] .ticks li { font-size: 17px !important; }
html body div.ao4[data-variant="c"] .ticks--cond li { background: #FFFFFF !important; border: 0 !important; border-radius: 20px !important; padding: 16px 20px !important; }
html body div.ao4[data-variant="c"] .faq details { background: #FFFFFF !important; border: 0 !important; border-radius: 20px !important; }
html body div.ao4[data-variant="c"] .faq summary { font-weight: 500 !important; font-size: 18px !important; border-radius: 20px !important; padding: 20px 60px 20px 24px !important; }
html body div.ao4[data-variant="c"] .faq summary::after { background: #E9FCFB !important; color: #0F6B6A !important; font-weight: 400 !important; }
html body div.ao4[data-variant="c"] .faq details[open] summary::after { background: #0F6B6A !important; color: #FFFFFF !important; }
html body div.ao4[data-variant="c"] .faq details p { padding: 0 24px 22px !important; color: #333333 !important; }
html body div.ao4[data-variant="c"] .final { padding: clamp(56px, 8.9vw, 128px) 0 !important; background: #FFFFFF !important; }
html body div.ao4[data-variant="c"] .final__in { background: #F2F2F2 !important; border-radius: 28px !important; padding: clamp(40px, 5vw, 64px) 24px !important; }
html body div.ao4[data-variant="c"] .final__line { font-weight: 500 !important; color: #333333 !important; }
html body div.ao4[data-variant="c"] .final__small { font-weight: 400 !important; color: #666666 !important; }
html body div.ao4[data-variant="c"] .final .warn--inline { width: min(var(--wrap), 100% - 48px) !important; margin: 16px auto 0 !important; border-radius: 16px !important; background: #F2F2F2 !important; min-height: max(96px, 4.6vw) !important; display: flex !important; align-items: center !important; justify-content: center !important; }
@media (min-width: 768px) {
html body div.ao4[data-variant="c"] .final .warn--inline { width: min(var(--wrap), 100% - 80px) !important; }
}
@media (min-width: 1100px) {
html body div.ao4[data-variant="c"] .final .warn--inline { width: min(var(--wrap), 100% - 144px) !important; }
}
html body div.ao4[data-variant="c"] #drugie { background: #F2F2F2 !important; --card: #FFFFFF; }
html body div.ao4[data-variant="c"] .other .other__badge { background: none !important; color: #333333 !important; font: 500 32px/1.1 var(--body-font) !important; padding: 0 !important; transform: none !important; font-variant-numeric: tabular-nums !important; }
html body div.ao4[data-variant="c"] .other .other__more { color: #117977 !important; font-weight: 500 !important; text-decoration: underline !important; text-underline-offset: 3px !important; }
html body div.ao4[data-variant="c"] .dock__cta { background: #FFFFFF !important; border-top: 1px solid #D6D6D6 !important; box-shadow: none !important; padding: 12px 24px !important; }
html body div.ao4[data-variant="c"] .dock__cta .btn { min-height: 52px !important; }
html body div.ao4[data-variant="c"] .dock__call { display: none !important; }
html body div.ao4[data-variant="c"] .warn--dock { border-top: 1px solid #D6D6D6 !important; font-weight: 500 !important; }
@media (min-width: 760px) {
html body div.ao4[data-variant="c"] .dock__cta:not([hidden]) { display: block !important; position: absolute !important; right: 22px !important; bottom: calc(100% + 16px) !important; padding: 0 !important; background: none !important; border: 0 !important; }
html body div.ao4[data-variant="c"] .dock__cta .btn { min-height: 56px !important; padding: 0 30px !important; font-size: 18px !important; border-radius: 18px !important; }
}
html body div.ao4[data-variant="c"] .modal::backdrop { background: rgba(10, 79, 78, .55) !important; }
html body div.ao4[data-variant="c"] .modal__box { border-radius: 28px !important; }
@media (max-width: 559px) {
html body div.ao4[data-variant="c"] .modal__box { border-radius: 0 !important; }
}
html body div.ao4[data-variant="c"] .modal__close { background: #F2F2F2 !important; color: #333333 !important; }
html body div.ao4[data-variant="c"] .modal__title { font: 500 clamp(22px, 3vw, 28px)/1.25 var(--body-font) !important; color: #055C74 !important; }
html body div.ao4[data-variant="c"] .field { font-weight: 500 !important; color: #333333 !important; }
html body div.ao4[data-variant="c"] .field input[type="text"], html body div.ao4[data-variant="c"] .field input[type="tel"] { min-height: 52px !important; border-radius: 16px !important; border: 1px solid #898989 !important; font-weight: 400 !important; color: #333333 !important; }
html body div.ao4[data-variant="c"] .field input[aria-invalid="true"] { border: 2px solid #E6584F !important; }
html body div.ao4[data-variant="c"] .field input:is([type="text"], [type="tel"]):focus:not([aria-invalid="true"]) { border-color: #117977 !important; }
html body div.ao4[data-variant="c"] .field--radio span { border-radius: 999px !important; border: 1px solid #898989 !important; font-weight: 500 !important; color: #333333 !important; }
html body div.ao4[data-variant="c"] .field--radio input:checked + span { background: #0F6B6A !important; border-color: #0F6B6A !important; color: #FFFFFF !important; }
html body div.ao4[data-variant="c"] .consent input { accent-color: #0F6B6A !important; }
html body div.ao4[data-variant="c"] .consent a { color: #117977 !important; font-weight: 500 !important; }
html body div.ao4[data-variant="c"] .opt { border-radius: 16px !important; border: 1px solid #898989 !important; font-weight: 500 !important; color: #333333 !important; }
html body div.ao4[data-variant="c"] .opt:hover, html body div.ao4[data-variant="c"] .opt[aria-pressed="true"] { border-color: #0F6B6A !important; background: #E9FCFB !important; }
html body div.ao4[data-variant="c"] .quiz__bar i { background: #1CC5C2 !important; }
html body div.ao4[data-variant="c"] .quiz__progress, html body div.ao4[data-variant="c"] .quiz__back { font-weight: 500 !important; }
html body div.ao4[data-variant="c"] .thanks__mark { background: #0F6B6A !important; color: #FFFFFF !important; }
html body div.ao4[data-variant="c"] .sum { background: #F2F2F2 !important; color: #333333 !important; }
html body div.ao4[data-variant="c"] .sum li::before { background: #1CC5C2 !important; }
html body div.ao4[data-variant="c"] .warn--modal { border-top: 1px solid #D6D6D6 !important; font-weight: 500 !important; }
@media (max-width: 599px) {
html body div.ao4[data-variant="c"] .hero { padding-top: 10px !important; }
html body div.ao4[data-variant="c"] .sticker { font-size: 13.5px !important; padding: 5px 12px !important; }
html body div.ao4[data-variant="c"] .countdown { font-size: 13.5px !important; padding: 3px 12px !important; }
html body div.ao4[data-variant="c"] .countdown b { font-size: 17px !important; }
html body div.ao4[data-variant="c"] .hero .countdown:not(.is-over) .countdown__label { display: none !important; }
html body div.ao4[data-variant="c"] .hero__eyebrow { font-size: 15px !important; margin-bottom: 6px !important; }
html body div.ao4[data-variant="c"] .kicker { font-size: 15px !important; }
html body div.ao4[data-variant="c"] .hero__title { font-size: 30px !important; }
html body div.ao4[data-variant="c"] .price__num { font-size: min(48px, 12.8vw) !important; }
html body div.ao4[data-variant="c"] .price__old s { font-size: 18px !important; }
html body div.ao4[data-variant="c"] .price__save { font-size: 13px !important; padding: 4px 10px !important; }
html body div.ao4[data-variant="c"] .chips { margin-top: 8px !important; gap: 4px !important; }
html body div.ao4[data-variant="c"] .price { margin-top: 10px !important; }
html body div.ao4[data-variant="c"] .hero__extra { margin-top: 6px !important; }
html body div.ao4[data-variant="c"] .hero .cta-row { margin-top: 10px !important; }
html body div.ao4[data-variant="c"] .chips li { font-size: 15px !important; }
html body div.ao4[data-variant="c"] .chips .ic { width: 24px !important; height: 24px !important; padding: 4px !important; }
html body div.ao4[data-variant="c"] .hero__extra { font-size: 14px !important; }
html body div.ao4[data-variant="c"] :is(.frame, .pains li, .benefit, .path__step, .other, .outcome) { padding: 20px !important; }
html body div.ao4[data-variant="c"] .frames .frame { padding: 52px 12px 18px !important; }
html body div.ao4[data-variant="c"] .extras > div { padding: 16px 20px !important; }
}
@media (max-width: 960px) {
html body div.ao4[data-variant="c"] :is(.hero__title, .final__title) { font-size: 38px !important; }
html body div.ao4[data-variant="c"] .h2 { font-size: 32px !important; }
html body div.ao4[data-variant="c"] .price__num { font-size: 56px !important; }
html body div.ao4[data-variant="c"] :is(.pains b, .benefit b, .path__step b, .frame__cap, .other b, .outcome b) { font-size: 20px !important; }
}
@media (max-width: 767px) {
html body div.ao4[data-variant="c"] :is(.hero__title, .final__title) { font-size: 30px !important; }
html body div.ao4[data-variant="c"] .h2 { font-size: 28px !important; }
html body div.ao4[data-variant="c"] .price__num { font-size: min(48px, 12.8vw) !important; }
}
@media (max-width: 599px) {
html body div.ao4[data-variant="c"] .receipt { padding: 26px 18px 20px !important; }
html body div.ao4[data-variant="c"] .receipt__total th, html body div.ao4[data-variant="c"] .receipt__total td { font-size: 22px !important; }
}
@media (prefers-reduced-motion: reduce) {
html body div.ao4[data-variant="c"] *, html body div.ao4[data-variant="c"] *::before, html body div.ao4[data-variant="c"] *::after { transition: none !important; }
}
html body .ao4 .jaw3d-wrap { position: relative !important; max-width: 440px !important; margin-inline: auto !important; container-type: inline-size !important; }
html body .ao4 .jaw3d { position: relative !important; aspect-ratio: 2 / 3 !important; cursor: pointer !important; border-radius: 16px !important; -webkit-tap-highlight-color: transparent !important; }
html body .ao4 .jaw3d:focus { outline: none !important; }
html body .ao4 .jaw3d:focus-visible { outline: 2px solid #1CC5C2 !important; outline-offset: 4px !important; }
html body .ao4 .jaw3d__stage { position: absolute !important; inset: 0 !important; }
html body .ao4 .jaw3d__video { display: block !important; width: 100% !important; height: 100% !important; object-fit: contain !important; background: #FFFFFF !important; }
html body .ao4 .jaw3d__lines { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; pointer-events: none !important; }
html body .ao4 .jaw3d__line { fill: none !important; stroke: #117977 !important; stroke-width: 3.5 !important; stroke-linecap: round !important; stroke-dasharray: 1 !important; stroke-dashoffset: 1 !important; opacity: 0 !important; transition: stroke-dashoffset .4s cubic-bezier(.22, .8, .3, 1), opacity .15s !important; }
html body .ao4 #jaw3d-arrow path { fill: #117977 !important; }
html body .ao4 .jaw3d__pin { position: absolute !important; width: 26px !important; height: 26px !important; box-sizing: border-box !important; translate: -50% -50% !important; border-radius: 50% !important; border: 1.5px solid #1CC5C2 !important; background: #FFFFFF !important; color: #117977 !important; font: 500 13px/23px var(--body-font) !important; text-align: center !important; opacity: 0 !important; scale: .6 !important; transition: opacity .25s, scale .25s !important; pointer-events: none !important; }
html body .ao4 .jaw3d__pin--1 { left: 9.27% !important; top: 10.42% !important; }
html body .ao4 .jaw3d__pin--2 { left: 9.27% !important; top: 30.28% !important; }
html body .ao4 .jaw3d__pin--3 { left: 9.27% !important; top: 45.07% !important; }
html body .ao4 .jaw3d-wrap.is-open .jaw3d__line { stroke-dashoffset: 0 !important; opacity: 1 !important; }
html body .ao4 .jaw3d-wrap.is-open .jaw3d__pin { opacity: 1 !important; scale: 1 !important; }
html body .ao4 .jaw3d-wrap.is-open :is(.jaw3d__pin--2, .jaw3d__line--2) { transition-delay: .2s !important; }
html body .ao4 .jaw3d-wrap.is-open :is(.jaw3d__pin--3, .jaw3d__line--3) { transition-delay: .4s !important; }
html body .ao4 .jaw3d__desc { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; }
html body .ao4 .jaw3d__legend { list-style: none !important; margin: 12px 0 0 !important; padding: 0 !important; display: grid !important; gap: 8px !important; font-size: 14px !important; line-height: 1.35 !important; color: #333333 !important; }
html body .ao4 .jaw3d__legend li { display: flex !important; gap: 10px !important; align-items: flex-start !important; }
html body .ao4 .jaw3d__num { flex: none !important; width: 22px !important; height: 22px !important; box-sizing: border-box !important; border-radius: 50% !important; border: 1.5px solid #1CC5C2 !important; color: #117977 !important; font: 500 12px/19px var(--body-font) !important; text-align: center !important; }
@media (min-width: 1024px) {
html body .ao4 .flyer.hero { overflow: clip !important; }
html body .ao4 .hero__art { align-self: start !important; position: sticky !important; top: 95px !important; }
html body .ao4 .jaw3d-wrap { max-width: min(460px, calc((100svh - 200px) * 2 / 3)) !important; }
html body .ao4 .jaw3d__legend { position: relative !important; margin: -18% 0 0 !important; padding-left: 2% !important; gap: 4px !important; font-size: clamp(12px, 3.2cqw, 13.5px) !important; line-height: 1.28 !important; }
html body .ao4 .jaw3d__legend li { opacity: 0 !important; translate: 0 6px !important; transition: opacity .3s, translate .3s !important; }
html body .ao4 .jaw3d-wrap.is-open .jaw3d__legend li { opacity: 1 !important; translate: 0 0 !important; transition-delay: .3s !important; }
html body .ao4 .jaw3d-wrap.is-open .jaw3d__legend li:nth-child(2) { transition-delay: .5s !important; }
html body .ao4 .jaw3d-wrap.is-open .jaw3d__legend li:nth-child(3) { transition-delay: .7s !important; }
html body div.ao4[data-variant="c"] .hero .warn--inline { font-size: 20px !important; padding: 14px 20px !important; min-height: 60px !important; }
}
@media (max-width: 1023px) {
html body .ao4 .jaw3d-wrap { max-width: 640px !important; }
@container (max-width: 559.98px) {
html body .ao4 .jaw3d { max-width: 290px !important; margin-inline: auto !important; }
}
@container (min-width: 0) {
html body .ao4 .jaw3d { aspect-ratio: 960 / 1160 !important; overflow: hidden !important; }
html body .ao4 .jaw3d__stage { inset: auto 0 !important; top: -8.62% !important; height: 124.14% !important; }
}
@container (min-width: 560px) {
html body .ao4 .jaw3d-row { display: grid !important; grid-template-columns: 300px 1fr !important; gap: 28px !important; align-items: center !important; }
html body .ao4 .jaw3d__legend { margin: 0 !important; gap: 12px !important; }
}
}
@media (prefers-reduced-motion: reduce) {
html body .ao4 .jaw3d__line, html body .ao4 .jaw3d__pin, html body .ao4 .jaw3d__legend li { transition: none !important; }
}
html body .ao4 .frame__photo { mix-blend-mode: multiply !important; }
@media (min-width: 1100px) {
html body div.ao4[data-variant="c"] .outcomes .outcome b { font-size: 20px !important; }
}
html body div.ao4[data-variant="c"] .why__note { color: #5B5B5B !important; }
/* отступ под нижнюю плашку — у body этой страницы, иначе низ подвала темы уходит под неё */
body:has(.ao4) { padding-bottom: max(6vh, 44px); }
@media (max-width: 759px) { body:has(.ao4) { padding-bottom: calc(max(6vh, 44px) + 76px); } }