/* =====================================================================
   NutrIA landing v2 — "a body made of light".
   One dark world (navy night + emerald light). The test & report below
   keep style.css; this file only restyles the landing (.hero.l2) and
   swaps the type to Fixel (Cyrillic-native, matches the ad reels).
   ===================================================================== */
@font-face { font-family: 'Fixel Display'; src: url('fonts/FixelDisplay-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Fixel Text'; src: url('fonts/FixelText-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Fixel Text'; src: url('fonts/FixelText-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Fixel Text'; src: url('fonts/FixelText-SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; }

html.l2 {
  --display: 'Fixel Display', 'Fixel Text', -apple-system, 'Segoe UI', sans-serif;
  --sans: 'Fixel Text', -apple-system, 'Segoe UI', sans-serif;
  --serif: var(--display);
  --l2-bg: #040a12;
  --l2-ink: #eef4fa;
  --l2-dim: #a9bacd;
  --l2-mute: #7489a1;
  --l2-line: rgba(150, 185, 225, 0.14);
  --l2-glass: rgba(10, 20, 33, 0.66);
  --l2-em: #34d399;
  --l2-em2: #10b981;
  --l2-mint: #a7f3d0;
  --l2-amber: #f5b64a;
  --l2-blue: #7fb2ff;
  --l2-rose: #ff8a7e;
  --l2-ease: cubic-bezier(0.19, 1, 0.22, 1);     /* expo-out: reveals */
  --l2-ease-io: cubic-bezier(0.76, 0, 0.24, 1);  /* in-out: swaps */
}
html.l2 body { font-family: var(--sans); background: var(--l2-bg); }
html.l2 body:not(.inTest) { background: var(--l2-bg); }
html.l2 .themeToggle { display: none; }               /* the landing is one deliberate dark world */
html.l2 .topbar { background: rgba(4, 10, 18, 0.62); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-bottom: 1px solid var(--l2-line); }
html.l2 .btn-top { background: var(--l2-em); color: #03241a; border: none; font-weight: 700; }
html.l2 .btn-top:hover { background: var(--l2-mint); }

/* ---------- the 3D stage (fixed, behind everything on the landing) ---------- */
#l2gl { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100lvh; z-index: 0; pointer-events: none; display: block; }
.hero.l2 { position: relative; z-index: 1; }
.hero.l2 > * { position: relative; z-index: 1; }
.hero.l2 > #l2gl, .hero.l2 > .l2-aura { position: fixed; z-index: 0; }
html.l2-no3d .hero.l2::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(60% 50% at 70% 40%, rgba(16, 185, 129, 0.22), transparent 70%), radial-gradient(40% 40% at 20% 80%, rgba(127, 178, 255, 0.10), transparent 70%);
}
/* the light behind the swarm: follows the shape (v2.js sets the transform), colour per section */
@property --l2-ac { syntax: '<color>'; inherits: false; initial-value: rgba(16, 185, 129, 0.24); }
.l2-aura { position: fixed; left: 0; top: 0; z-index: 0; width: min(78vh, 900px); height: min(78vh, 900px); pointer-events: none; border-radius: 50%;
  --l2-ac: rgba(16, 185, 129, 0.24); background: radial-gradient(closest-side, var(--l2-ac), transparent);
  transition: --l2-ac 1.4s var(--l2-ease); will-change: transform; }
.l2-aura[data-c="blue"] { --l2-ac: rgba(90, 150, 255, 0.2); }
.l2-aura[data-c="rose"] { --l2-ac: rgba(255, 110, 110, 0.2); }
body.inTest .l2-aura { display: none; }
.l2-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; pointer-events: none; }
.l2-progress i { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--l2-em2), var(--l2-mint)); box-shadow: 0 0 12px rgba(52, 211, 153, 0.7); }
body.inTest .l2-progress { display: none; }

/* ---------- type system: 1 display + 1 text face, 5 styles ---------- */
.l2-kicker { display: inline-flex; align-items: center; gap: 10px; font: 600 13px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--l2-em); }
.l2-kicker::before { content: ''; width: 22px; height: 1px; background: currentColor; }
.l2-h1 { font: 700 clamp(46px, 7vw, 108px)/0.94 var(--display); letter-spacing: -0.035em; color: var(--l2-ink); margin: 22px 0 0; text-wrap: balance; }
.l2-h1 em, .l2-h2 em { font-style: normal; color: var(--l2-em); }
.l2-h2 { font: 700 clamp(36px, 4.6vw, 70px)/0.98 var(--display); letter-spacing: -0.03em; color: var(--l2-ink); margin: 18px 0 0; text-wrap: balance; max-width: 15ch; }
.l2-lead { font: 400 clamp(17px, 1.45vw, 21px)/1.55 var(--sans); color: var(--l2-dim); max-width: 34em; margin: 26px 0 0; }
.l2-small { font: 500 14px/1.5 var(--sans); color: var(--l2-mute); }

/* ---------- layout: one force line = the left edge of the copy ---------- */
.l2-sec { padding: 150px 0 0; min-height: 70vh; }
.l2-col { max-width: 600px; }
.l2-wide { max-width: none; }

/* ---------- CTA: the brightest thing on every screen ---------- */
.l2-btn {
  appearance: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 12px;
  padding: 20px 30px; border-radius: 16px; font: 700 18px/1 var(--sans); letter-spacing: -0.01em; color: #03241a;
  background: linear-gradient(135deg, #6ee7b7, var(--l2-em) 45%, var(--l2-em2));
  box-shadow: 0 18px 44px -14px rgba(16, 185, 129, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.l2-btn svg { width: 20px; height: 20px; transition: transform 0.25s ease; }
.l2-btn:hover { transform: translateY(-2px); box-shadow: 0 24px 52px -14px rgba(16, 185, 129, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.l2-btn:hover svg { transform: translateX(4px); }
.l2-btn:focus-visible { outline: 3px solid var(--l2-mint); outline-offset: 4px; }
.l2-cta-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 36px; }
.l2-cta-note { font: 500 15px/1.4 var(--sans); color: var(--l2-dim); }
.l2-cta-note b { color: var(--l2-ink); font-weight: 600; }
.l2-quick { display: inline-block; margin-top: 22px; font: 500 15px/1.4 var(--sans); color: var(--l2-dim); text-decoration: none; border-bottom: 1px dashed rgba(167, 243, 208, 0.45); }
.l2-quick:hover { color: var(--l2-mint); }

/* ---------- glass cards ---------- */
.l2-glass {
  background: linear-gradient(160deg, rgba(20, 34, 52, 0.72), rgba(8, 16, 27, 0.72));
  border: 1px solid var(--l2-line); border-radius: 24px;
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.l2-tag { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; font: 600 12px/1 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--l2-mute); border: 1px solid var(--l2-line); }

/* ================= HERO ================= */
.l2-hero { min-height: calc(100svh - 72px); display: grid; align-items: center; padding: 40px 0 70px; position: relative; }
.l2-hero-copy { max-width: 760px; position: relative; z-index: 1; }
.l2-eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 9px 15px 9px 11px; border-radius: 999px; font: 600 14px/1 var(--sans); color: var(--l2-mint); background: rgba(52, 211, 153, 0.1); border: 1px solid rgba(52, 211, 153, 0.32); }
.l2-eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: var(--l2-em); box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.7); animation: l2pulse 2.2s infinite; }
@keyframes l2pulse { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.6); } 70% { box-shadow: 0 0 0 10px rgba(52, 211, 153, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); } }
.l2-odo { position: absolute; right: 0; bottom: 90px; display: flex; gap: 10px; }
.l2-odo-cell { padding: 16px 20px 14px; min-width: 150px; }
.l2-odo-cell small { display: block; font: 600 11px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--l2-mute); }
.l2-odo-cell b { display: block; margin-top: 10px; font: 700 54px/0.9 var(--display); letter-spacing: -0.03em; color: var(--l2-ink); font-variant-numeric: tabular-nums; }
.l2-odo-cell.body small { color: var(--l2-em); }
.l2-odo-cell.body b { color: var(--l2-em); min-width: 2ch; }
.l2-scroll { position: absolute; left: 0; bottom: 26px; display: flex; align-items: center; gap: 12px; font: 600 12px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--l2-mute); }
.l2-scroll i { width: 1px; height: 40px; background: linear-gradient(var(--l2-em), transparent); animation: l2drip 2.4s var(--l2-ease-io) infinite; transform-origin: top; }
@keyframes l2drip { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* ================= PROBLEM ================= */
.l2-factors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 48px; max-width: 760px; }
.l2-factor { padding: 20px 18px; }
.l2-factor svg { width: 26px; height: 26px; color: var(--l2-em); }
.l2-factor b { display: block; margin-top: 14px; font: 600 19px/1.2 var(--sans); color: var(--l2-ink); }
.l2-factor span { display: block; margin-top: 6px; font: 700 26px/1 var(--display); letter-spacing: -0.02em; }
.l2-factor .up { color: var(--l2-rose); } .l2-factor .down { color: var(--l2-em); }
.l2-note { margin-top: 16px; font: 500 13px/1.4 var(--sans); color: var(--l2-mute); }

/* ================= HOW (a real sequence → numbered) ================= */
.l2-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 56px; counter-reset: st; }
.l2-step { padding: 30px 28px 32px; position: relative; overflow: hidden; }
.l2-step .n { font: 700 15px/1 var(--display); color: var(--l2-em); letter-spacing: 0.04em; }
.l2-step h3 { margin: 20px 0 0; font: 700 26px/1.08 var(--display); letter-spacing: -0.02em; color: var(--l2-ink); }
.l2-step p { margin: 14px 0 0; font: 400 16px/1.55 var(--sans); color: var(--l2-dim); }
.l2-step .chip { display: inline-block; margin-top: 20px; padding: 7px 12px; border-radius: 999px; font: 600 13px/1 var(--sans); color: var(--l2-mint); background: rgba(52, 211, 153, 0.1); border: 1px solid rgba(52, 211, 153, 0.3); }
.l2-step .chip.paid { color: #ffd592; background: rgba(245, 182, 74, 0.1); border-color: rgba(245, 182, 74, 0.35); }
.l2-step::after { content: ''; position: absolute; left: 28px; right: 28px; top: 0; height: 2px; background: linear-gradient(90deg, var(--l2-em), transparent); opacity: 0.7; }

/* ================= SCIENCE ================= */
.l2-scales { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 52px; }
.l2-scale { padding: 24px 24px 26px; }
.l2-scale b { font: 700 24px/1 var(--display); letter-spacing: -0.01em; color: var(--l2-ink); }
.l2-scale span { display: block; margin-top: 10px; font: 400 15px/1.5 var(--sans); color: var(--l2-dim); }
.l2-scale i { display: block; margin-top: 14px; font: 600 12px/1 var(--sans); font-style: normal; letter-spacing: 0.12em; text-transform: uppercase; color: var(--l2-em); }
.l2-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 56px; border-top: 1px solid var(--l2-line); }
.l2-stat { padding: 30px 26px 0 0; }
.l2-stat b { display: block; font: 700 clamp(44px, 5vw, 72px)/0.9 var(--display); letter-spacing: -0.035em; color: var(--l2-ink); font-variant-numeric: tabular-nums; }
.l2-stat b em { font-style: normal; color: var(--l2-em); }
.l2-stat span { display: block; margin-top: 12px; font: 500 16px/1.4 var(--sans); color: var(--l2-dim); max-width: 18em; }

/* ================= REPORT DEMO ================= */
.l2-report { display: grid; grid-template-columns: 1.05fr 0.95fr 1fr; grid-auto-rows: auto; gap: 14px; margin-top: 52px; }
.l2-rc { padding: 24px; position: relative; }
.l2-rc h4 { margin: 0; font: 600 13px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--l2-mute); }
.l2-ex { position: absolute; top: 20px; right: 20px; font: 600 10px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--l2-mute); padding: 5px 8px; border-radius: 6px; border: 1px solid var(--l2-line); }
.l2-ring { --v: 0; width: 168px; height: 168px; margin: 20px auto 6px; border-radius: 50%; display: grid; place-items: center; position: relative;
  background: conic-gradient(var(--l2-em) calc(var(--v) * 1%), rgba(255, 255, 255, 0.07) 0); transition: --v 1.6s var(--l2-ease); }
.l2-ring::before { content: ''; position: absolute; inset: 14px; border-radius: 50%; background: #091422; }
.l2-ring b { position: relative; font: 700 56px/1 var(--display); letter-spacing: -0.03em; color: var(--l2-ink); }
.l2-ring small { position: absolute; bottom: 44px; font: 500 13px/1 var(--sans); color: var(--l2-mute); }
.l2-rc .cap { text-align: center; font: 600 15px/1.3 var(--sans); color: var(--l2-ink); }
.l2-bio { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 22px; }
.l2-bio b { font: 700 72px/0.85 var(--display); letter-spacing: -0.04em; color: var(--l2-amber); }
.l2-bio span { font: 500 15px/1.4 var(--sans); color: var(--l2-dim); text-align: right; }
.l2-badge { display: inline-block; padding: 6px 10px; border-radius: 8px; font: 700 11px/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: #ffd592; background: rgba(245, 182, 74, 0.14); border: 1px solid rgba(245, 182, 74, 0.45); }
.l2-qa { display: grid; gap: 8px; margin-top: 16px; }
.l2-qa div { padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); }
.l2-qa small { display: block; font: 600 11px/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--l2-mute); }
.l2-qa p { margin: 6px 0 0; font: 400 15px/1.45 var(--sans); color: var(--l2-ink); }
.l2-qa .res { background: rgba(127, 178, 255, 0.1); } .l2-qa .res small { color: var(--l2-blue); }
.l2-qa .mean { background: rgba(52, 211, 153, 0.1); } .l2-qa .mean small { color: var(--l2-em); }
.l2-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.l2-list li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); font: 500 16px/1.3 var(--sans); color: var(--l2-ink); }
.l2-list li svg { width: 18px; height: 18px; color: var(--l2-em); flex: none; }
.l2-mac { display: grid; gap: 14px; margin-top: 18px; }
.l2-mac div { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: baseline; font: 500 16px/1 var(--sans); color: var(--l2-ink); }
.l2-mac div b { font: 700 18px/1 var(--display); color: var(--l2-mint); }
.l2-mac div i { grid-column: 1 / -1; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.l2-mac div i::after { content: ''; display: block; height: 100%; width: var(--w); border-radius: 4px; background: var(--c); transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.4s var(--l2-ease) 0.2s; }
.l2-rc.on .l2-mac div i::after { transform: scaleX(1); }
.l2-chat { display: grid; gap: 10px; margin-top: 16px; }
.l2-chat p { margin: 0; padding: 12px 15px; border-radius: 16px; font: 400 15px/1.45 var(--sans); color: var(--l2-ink); max-width: 88%; }
.l2-chat .me { justify-self: end; background: rgba(52, 211, 153, 0.18); border-bottom-right-radius: 4px; }
.l2-chat .ai { background: rgba(255, 255, 255, 0.06); border-bottom-left-radius: 4px; }
.l2-span2 { grid-column: span 2; }

/* ================= PRICE ================= */
.l2-price { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 52px; max-width: 980px; }
.l2-pcard { padding: 34px 32px 34px; }
.l2-pcard .amt { display: flex; align-items: baseline; gap: 12px; margin-top: 18px; }
.l2-pcard .amt b { white-space: nowrap; font: 700 clamp(56px, 6vw, 88px)/0.9 var(--display); letter-spacing: -0.04em; color: var(--l2-ink); }
.l2-pcard .amt span { font: 500 16px/1.3 var(--sans); color: var(--l2-dim); }
.l2-pcard ul { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; }
.l2-pcard li { display: flex; gap: 12px; align-items: flex-start; font: 400 16px/1.45 var(--sans); color: var(--l2-dim); }
.l2-pcard li svg { width: 20px; height: 20px; color: var(--l2-em); flex: none; margin-top: 1px; }
.l2-pcard.full { border-color: rgba(52, 211, 153, 0.45); background: linear-gradient(160deg, rgba(16, 60, 48, 0.6), rgba(8, 16, 27, 0.75)); }
.l2-guar { display: flex; gap: 14px; align-items: flex-start; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--l2-line); }
.l2-guar svg { width: 24px; height: 24px; color: var(--l2-em); flex: none; }
.l2-guar b { display: block; font: 600 16px/1.3 var(--sans); color: var(--l2-ink); }
.l2-guar span { display: block; margin-top: 4px; font: 400 14px/1.5 var(--sans); color: var(--l2-dim); }

/* ================= FAQ ================= */
.l2-faq { margin-top: 44px; max-width: 820px; border-top: 1px solid var(--l2-line); }
.l2-faq details { border-bottom: 1px solid var(--l2-line); }
.l2-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 26px 0; font: 600 clamp(18px, 1.6vw, 22px)/1.3 var(--sans); color: var(--l2-ink); }
.l2-faq summary::-webkit-details-marker { display: none; }
.l2-faq summary::after { content: '+'; flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--l2-line); color: var(--l2-em); font: 400 22px/1 var(--sans); transition: transform 0.3s var(--l2-ease); }
.l2-faq details[open] summary::after { transform: rotate(45deg); }
.l2-faq summary:focus-visible { outline: 2px solid var(--l2-em); outline-offset: 4px; border-radius: 6px; }
.l2-faq p { margin: -6px 0 26px; max-width: 62ch; font: 400 17px/1.6 var(--sans); color: var(--l2-dim); }

/* ================= FINAL + B2B + FOOTER ================= */
.l2-final { text-align: left; padding-bottom: 120px; min-height: 92vh; display: grid; align-content: center; }
.l2-final .l2-h2 { max-width: 13ch; font-size: clamp(42px, 6vw, 92px); }
.l2-disc { margin-top: 30px; max-width: 46em; font: 400 14px/1.6 var(--sans); color: var(--l2-mute); }
.l2-b2b { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 32px; margin-top: 30px; }
.l2-b2b b { display: block; font: 700 22px/1.2 var(--display); color: var(--l2-ink); }
.l2-b2b span { display: block; margin-top: 6px; font: 400 15px/1.5 var(--sans); color: var(--l2-dim); max-width: 52ch; }
.l2-b2b a { flex: none; padding: 14px 20px; border-radius: 12px; border: 1px solid rgba(52, 211, 153, 0.5); color: var(--l2-mint); font: 600 15px/1 var(--sans); text-decoration: none; }
.l2-b2b a:hover { background: rgba(52, 211, 153, 0.12); }
html.l2 .footer { position: relative; z-index: 1; border-top: 1px solid var(--l2-line); margin-top: 90px; }

/* ================= reveals (JS adds .l2-js; without JS everything is visible) ================= */
html.l2-js .l2-rv { opacity: 0; transform: translateY(34px); filter: blur(10px); transition: opacity 1s var(--l2-ease), transform 1.1s var(--l2-ease), filter 1s var(--l2-ease); transition-delay: calc(var(--d, 0) * 70ms); }
html.l2-js .l2-rv.on { opacity: 1; transform: none; filter: none; }
html.l2-js .l2-h1 .w { display: inline-block; opacity: 0; transform: translateY(0.5em); filter: blur(8px); transition: opacity 0.9s var(--l2-ease), transform 1s var(--l2-ease), filter 0.9s var(--l2-ease); transition-delay: calc(var(--i) * 55ms + 150ms); }
html.l2-js .l2-h1.on .w { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) {
  html.l2-js .l2-rv, html.l2-js .l2-h1 .w { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .l2-eyebrow i, .l2-scroll i { animation: none; }
}

/* ================= mobile (83% of the traffic comes from the Instagram app) ================= */
@media (max-width: 860px) {
  .l2-sec { padding: 104px 0 0; min-height: auto; }
  .l2-hero { min-height: calc(100svh - 64px); display: flex; flex-direction: column; justify-content: flex-end; padding: 0 0 22px; }
  .l2-hero::before { content: ''; position: absolute; left: -16px; right: -16px; bottom: 0; height: 64%; z-index: 0; pointer-events: none;
    background: linear-gradient(to bottom, rgba(4, 10, 18, 0) 0%, rgba(4, 10, 18, 0.78) 30%, rgba(4, 10, 18, 0.92) 100%); }
  .l2-hero-copy { padding-top: 21svh; }
  .l2-eyebrow { font-size: 13px; padding: 8px 13px 8px 10px; background: rgba(8, 30, 25, 0.94); }
  .l2-h1 { margin-top: 16px; }
  .l2-h1 { font-size: clamp(40px, 11.5vw, 58px); }
  .l2-lead { font-size: 17px; margin-top: 18px; }
  .l2-cta-row { margin-top: 26px; gap: 12px; }
  .l2-btn { width: 100%; justify-content: center; padding: 19px 22px; }
  .l2-cta-note { width: 100%; text-align: center; }
  .l2-quick { display: block; text-align: center; border: 0; text-decoration: underline; text-underline-offset: 4px; }
  .l2-odo { left: 0; right: 0; top: 14px; bottom: auto; justify-content: space-between; z-index: 1; }
  .l2-odo-cell { min-width: 0; padding: 11px 13px 10px; border-radius: 18px; }
  .l2-odo-cell small { font-size: 10px; letter-spacing: 0.12em; }
  .l2-odo-cell b { font-size: 34px; margin-top: 7px; }
  .l2-odo-cell.body { text-align: right; }
  .l2-quick { margin-top: 16px; }
  .l2-pcard { padding: 28px 22px; }
  .l2-pcard .amt { flex-wrap: wrap; row-gap: 6px; }
  .l2-aura { width: 92vw; height: 92vw; }
  .l2-scroll { display: none; }
  .l2-h2 { font-size: clamp(34px, 9.6vw, 48px); max-width: none; }
  .l2-factors, .l2-steps, .l2-scales, .l2-price { grid-template-columns: 1fr 1fr; }
  .l2-steps, .l2-price { grid-template-columns: 1fr; }
  .l2-scales { grid-template-columns: 1fr; }
  .l2-stats { grid-template-columns: 1fr; }
  .l2-stat { padding: 24px 0 0; }
  .l2-report { grid-template-columns: 1fr; }
  .l2-span2 { grid-column: auto; }
  .l2-b2b { flex-direction: column; align-items: flex-start; }
  .l2-final { min-height: 80vh; }
  html.l2 .topnav { display: none; }
  html.l2 .navCab { display: none; }
}