/* ============================================================
   PROMO CAMPAIGNS - LANDING PAGE
   Shown at the bare app URL (no campaign code). Follows the
   Achievement Awards Group landing-page system used for the
   performXP ad page: dark-blue nav, halftone blue hero, hairline
   card grids, numbers band, dark CTA band, black site footer.
   Self-contained: the app stylesheet is not loaded on this page.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --blue:        #21409A;
  --blue-dark:   #0A162E;
  --blue-mid:    #273C88;
  --blue-light:  #E8EBF5;
  --black:       #181818;
  --grey:        #939598;
  --grey-light:  #E5E5E5;
  --grey-rule:   #EBEBEB;
  --white:       #FFFFFF;
  --off-white:   #FAFAFA;
  --amber:       #FBAB18;
  --lime:        #ACD253;
  --teal:        #59B0C4;
  --pink:        #BB1D5E;
  --accent:      var(--amber);
  --f-head:      'Archivo', -apple-system, 'Helvetica Neue', sans-serif;
  --f-body:      'Helvetica Neue', 'Arial', sans-serif;
  --max-w:       1200px;
  --section-pad: 80px 48px;
  --transition:  0.2s ease;
}

html { font-size: 16px; scroll-behavior: smooth; scroll-padding-top: 76px; }
body { font-family: var(--f-body); color: var(--black); background: var(--white); line-height: 1.6; padding-top: 76px; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.section { padding: var(--section-pad); }
.section-inner { max-width: var(--max-w); margin: 0 auto; }
.section-offwhite { background: var(--off-white); }

.eyebrow {
  font-family: var(--f-head); font-size: 10px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--grey);
  display: block; margin-bottom: 12px;
}
.eyebrow-white { color: rgba(255,255,255,.6); }

h1, h2, h3, h4 { font-family: var(--f-head); line-height: 1.08; color: var(--black); }
h1 { font-size: clamp(36px, 5vw, 60px); font-weight: 700; }
h2 { font-size: clamp(28px, 3.5vw, 44px); font-weight: 700; }
h3 { font-size: clamp(20px, 2.5vw, 26px); font-weight: 700; }
h4 { font-size: 17px; font-weight: 600; }

p { margin-bottom: 1em; font-size: 15px; line-height: 1.75; color: #444; }
p:last-child { margin-bottom: 0; }
.lead { font-size: 18px; line-height: 1.65; color: #444; max-width: 660px; }

/* Accent emphasis word */
.acc { color: var(--accent); font-style: normal; }

/* Section headers */
.section-header { margin-bottom: 56px; }
.section-header.center { text-align: center; }
.section-header.center .lead { margin-left: auto; margin-right: auto; }
.section-header h2 { margin-bottom: 16px; }
.section-header .eyebrow { color: var(--accent); }
.section-header .eyebrow-white { color: rgba(255,255,255,.6); }

/* ── BUTTONS - rounded, sentence case, hard offset shadow, nudging arrow ── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-head); font-size: 13px; font-weight: 500; letter-spacing: .1px;
  padding: 14px 28px; border: 2px solid transparent; border-radius: 6px;
  box-shadow: 3px 3px 0 rgba(10,22,46,.16); cursor: pointer; white-space: nowrap;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.btn::after { content: "\2192"; font-size: 1.15em; line-height: 1; transition: transform 160ms ease; }
.btn:hover::after { transform: translateX(3px); }
.btn-amber { background: var(--amber); color: var(--blue-dark); border-color: var(--amber); }
.btn-amber:hover { background: #e59a10; border-color: #e59a10; }
.btn-primary { background: var(--blue); color: #fff; border-color: var(--blue); }
.btn-primary:hover { background: var(--blue-dark); border-color: var(--blue-dark); }
.btn-lg { padding: 18px 36px; font-size: 14px; }

/* ── LOGO LOCKUP - symbol and wordmark share a baseline ── */
.brand-lockup { --logo-size: 38px; display: flex; align-items: flex-end; gap: calc(var(--logo-size) * .303); }
.brand-lockup .logo-icon { height: var(--logo-size); width: auto; }
.brand-lockup .logo-wordmark { height: calc(var(--logo-size) * .591); width: auto; margin-bottom: calc(var(--logo-size) * .023); }
.brand-lockup.on-dark img { filter: brightness(0) invert(1); }

/* ── NAV ── */
.lp-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: var(--blue-dark); height: 76px; border-bottom: 1px solid rgba(255,255,255,.08); }
.lp-nav-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 48px; height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.lp-nav-right { display: flex; align-items: center; gap: 28px; }
.lp-nav-phone { font-family: var(--f-head); font-size: 13px; color: rgba(255,255,255,.75); white-space: nowrap; }
.lp-nav-phone span { color: rgba(255,255,255,.4); margin-right: 8px; }
.lp-nav-phone:hover { color: #fff; }

/* ── HERO - halftone blue, copy left, illustrated campaign art right ── */
.lp-hero {
  position: relative; overflow: hidden;
  background-color: var(--blue);
  background-image: radial-gradient(rgba(255,255,255,.12) 1.4px, transparent 1.6px);
  background-size: 13px 13px;
  padding: 72px 48px 80px;
}
.lp-hero-grid { position: relative; z-index: 2; max-width: var(--max-w); margin: 0 auto; display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.lp-hero-copy .eyebrow { color: rgba(255,255,255,.6); margin-bottom: 18px; }
.lp-hero-copy h1 { color: #fff; margin-bottom: 22px; }
.lp-hero-copy .lead { color: rgba(255,255,255,.88); margin-bottom: 28px; max-width: 540px; }
.lp-hero-copy .lead a { color: #fff; font-weight: 700; border-bottom: 2px solid var(--accent); }
.lp-hero-copy .lead a:hover { color: var(--accent); }
.lp-hero-trust { display: flex; flex-direction: column; gap: 12px; margin-bottom: 34px; }
.lp-hero-trust-item { font-family: var(--f-head); font-size: 13px; color: rgba(255,255,255,.82); display: flex; align-items: center; gap: 10px; }
.lp-hero-trust-item svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; }
.lp-hero-cta-row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.lp-hero-alt { font-family: var(--f-head); font-size: 13px; color: rgba(255,255,255,.7); }
.lp-hero-alt a { color: #fff; border-bottom: 1px solid rgba(255,255,255,.35); }
.lp-hero-alt a:hover { border-color: #fff; }

/* ── HERO ART ──
   A campaign in motion: the entry screen on a phone, the till slip being
   claimed, the QR code that brings people in, and the result landing on
   the dashboard. Pure HTML/CSS so it stays crisp and weighs almost
   nothing. Drawn on a 500 x 540 canvas; sizes are in container units
   (1cqw = 5px at full size) so the whole piece scales as one. */
.hp-art-wrap { position: relative; width: 100%; max-width: 500px; margin: 0 auto; container-type: inline-size; }
.hp-art { position: relative; width: 100%; aspect-ratio: 500 / 540; font-family: var(--f-head); }
.hp-art::after {
  content: ""; position: absolute; right: -2cqw; bottom: 2cqw; width: 22cqw; height: 22cqw; z-index: 0;
  background-image: radial-gradient(var(--accent) 2px, transparent 2.2px); background-size: 12px 12px; opacity: .55;
}
.hp-art > * { position: absolute; z-index: 1; }

.hp-card { background: #fff; border-radius: 2.8cqw; box-shadow: 0 3cqw 7cqw rgba(10,22,46,.35); }

/* Phone */
.hp-phone {
  left: 26cqw; top: 3cqw; width: 48cqw; height: 100cqw; z-index: 3;
  background: var(--blue-dark); border-radius: 8cqw; padding: 2cqw;
  box-shadow: 0 6cqw 14cqw rgba(10,22,46,.5), inset 0 0 0 .4cqw rgba(255,255,255,.08);
}
.hp-phone::before { content: ""; position: absolute; top: 3.4cqw; left: 50%; transform: translateX(-50%); width: 13cqw; height: 3.2cqw; background: var(--blue-dark); border-radius: 2cqw; z-index: 2; }
.hp-screen { position: relative; width: 100%; height: 100%; background: #fff; border-radius: 6.2cqw; overflow: hidden; display: flex; flex-direction: column; }
.hp-banner {
  height: 29cqw; padding: 9cqw 4.4cqw 3.6cqw; display: flex; flex-direction: column; justify-content: flex-end;
  background-color: var(--pink);
  background-image: radial-gradient(rgba(255,255,255,.18) 1.2px, transparent 1.4px), linear-gradient(135deg, var(--pink) 0%, #8e1547 100%);
  background-size: 9px 9px, 100% 100%;
  color: #fff;
}
.hp-banner-kicker { font-size: 2cqw; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; opacity: .8; }
.hp-banner-title { font-size: 5.4cqw; font-weight: 700; line-height: 1.02; margin-top: .8cqw; }
.hp-banner-title em { font-style: normal; color: var(--amber); }
.hp-screen-body { flex: 1; padding: 4cqw 4.4cqw 4.4cqw; display: flex; flex-direction: column; gap: 2.2cqw; }
.hp-screen-title { font-size: 3.6cqw; font-weight: 700; color: var(--black); }
.hp-field { display: flex; flex-direction: column; gap: .9cqw; }
.hp-field span { font-size: 1.9cqw; font-weight: 600; color: #666; }
.hp-field i { display: block; height: 5.4cqw; border: .3cqw solid var(--grey-light); border-radius: 1.2cqw; background: #fff; padding: 0 1.8cqw; font-style: normal; font-family: var(--f-body); font-size: 2.1cqw; line-height: 4.8cqw; color: var(--black); }
.hp-upload {
  display: flex; align-items: center; gap: 2cqw; padding: 2.2cqw; margin-top: .6cqw;
  border: .3cqw dashed rgba(33,64,154,.35); border-radius: 1.6cqw; background: var(--blue-light);
}
.hp-upload-thumb { width: 6.4cqw; height: 8cqw; border-radius: .8cqw; background: #fff; box-shadow: 0 .4cqw 1cqw rgba(10,22,46,.15); position: relative; flex-shrink: 0; }
.hp-upload-thumb::before { content: ""; position: absolute; inset: 1.4cqw 1.2cqw; background: repeating-linear-gradient(#cfd4e4 0 .5cqw, transparent .5cqw 1.3cqw); }
.hp-upload-text { font-size: 2cqw; font-weight: 600; color: var(--blue); line-height: 1.3; }
.hp-upload-text small { display: block; font-weight: 400; color: #666; font-size: 1.8cqw; }
.hp-upload-tick { margin-left: auto; width: 4.4cqw; height: 4.4cqw; border-radius: 50%; background: var(--lime); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hp-upload-tick svg { width: 2.6cqw; height: 2.6cqw; color: var(--blue-dark); }
.hp-screen-btn { margin-top: auto; height: 7cqw; border-radius: 1.4cqw; background: var(--pink); color: #fff; font-size: 2.4cqw; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 1cqw; box-shadow: .6cqw .6cqw 0 rgba(10,22,46,.16); }

/* Till slip */
.hp-slip {
  left: -2cqw; top: 12cqw; width: 29cqw; padding: 3.4cqw 2.8cqw 5.6cqw; z-index: 2;
  background: #fffdf7; transform: rotate(-9deg);
  font-family: 'Courier New', monospace; color: #4a4a4a;
  box-shadow: 0 3cqw 7cqw rgba(10,22,46,.35);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 2.6cqw 100%;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 2.6cqw 100%;
}
.hp-slip-shop { font-family: var(--f-head); font-weight: 700; font-size: 2.4cqw; text-align: center; color: var(--black); letter-spacing: .04em; }
.hp-slip-meta { font-size: 1.7cqw; text-align: center; margin: .6cqw 0 2.2cqw; color: #888; }
.hp-slip-row { display: flex; justify-content: space-between; gap: 1cqw; font-size: 1.75cqw; line-height: 1.7; }
.hp-slip-row.hl { color: var(--pink); font-weight: 700; }
.hp-slip-total { display: flex; justify-content: space-between; font-size: 2.1cqw; font-weight: 700; color: var(--black); border-top: .3cqw dashed #bbb; margin-top: 1.4cqw; padding-top: 1.4cqw; }
.hp-slip-barcode { height: 5cqw; margin-top: 2.6cqw; background: repeating-linear-gradient(90deg, #333 0 .3cqw, transparent .3cqw .7cqw, #333 .7cqw 1.3cqw, transparent 1.3cqw 1.6cqw, #333 1.6cqw 1.8cqw, transparent 1.8cqw 2.4cqw); }

/* Approval toast */
.hp-toast { right: 0; top: 16cqw; width: 42cqw; padding: 2.8cqw 3cqw; display: flex; align-items: center; gap: 2.4cqw; z-index: 4; }
.hp-toast-icon { width: 7.2cqw; height: 7.2cqw; border-radius: 50%; background: var(--lime); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hp-toast-icon svg { width: 3.8cqw; height: 3.8cqw; color: var(--blue-dark); }
.hp-toast strong { display: block; font-size: 2.8cqw; color: var(--black); line-height: 1.2; }
.hp-toast span { display: block; font-family: var(--f-body); font-size: 2.1cqw; color: #666; line-height: 1.35; margin-top: .4cqw; }

/* Dashboard card */
.hp-stats { right: -1cqw; top: 64cqw; width: 37cqw; padding: 3cqw 3.2cqw 3.2cqw; z-index: 4; }
.hp-stats-label { font-size: 1.8cqw; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--grey); }
.hp-stats-row { display: flex; align-items: baseline; gap: 1.6cqw; margin: .8cqw 0 2.4cqw; }
.hp-stats-num { font-size: 5.6cqw; font-weight: 700; color: var(--black); line-height: 1; }
.hp-stats-pill { font-size: 1.9cqw; font-weight: 700; color: #4d6b12; background: rgba(172,210,83,.3); border-radius: 2cqw; padding: .4cqw 1.4cqw; }
.hp-bars { display: flex; align-items: flex-end; gap: 1.4cqw; height: 11cqw; border-bottom: .3cqw solid var(--grey-rule); }
.hp-bars i { flex: 1; background: var(--blue-light); border-radius: .8cqw .8cqw 0 0; }
.hp-bars i:nth-child(1) { height: 34%; }
.hp-bars i:nth-child(2) { height: 52%; }
.hp-bars i:nth-child(3) { height: 44%; }
.hp-bars i:nth-child(4) { height: 66%; background: #b9c4e6; }
.hp-bars i:nth-child(5) { height: 58%; background: #b9c4e6; }
.hp-bars i:nth-child(6) { height: 80%; background: var(--blue); }
.hp-bars i:nth-child(7) { height: 100%; background: var(--accent); }

/* QR tile */
.hp-qr { left: 3cqw; top: 74cqw; width: 23cqw; padding: 2.6cqw; z-index: 4; transform: rotate(6deg); text-align: center; }
.hp-qr svg { display: block; width: 100%; height: auto; color: var(--blue-dark); }
.hp-qr span { display: block; margin-top: 1.4cqw; font-size: 1.8cqw; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }

/* A slow drift keeps the scene alive without pulling focus */
@keyframes hp-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -1.4cqw; } }
.hp-toast { animation: hp-float 6s ease-in-out infinite; }
.hp-stats { animation: hp-float 7s ease-in-out -2s infinite; }
.hp-qr { animation: hp-float 8s ease-in-out -4s infinite; }
@media (prefers-reduced-motion: reduce) { .hp-toast, .hp-stats, .hp-qr { animation: none; } }

/* Browsers without container units get the copy only, as on small phones */
@supports not (width: 1cqw) { .lp-hero-art { display: none; } }

/* ── CAMPAIGN TYPES (2-up) ── */
.type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.type-card { background: var(--off-white); border-top: 3px solid var(--blue); padding: 40px 40px 36px; display: flex; flex-direction: column; }
.type-card.b2b { border-top-color: var(--accent); }
.type-tag { align-self: flex-start; display: inline-block; padding: 4px 12px; background: var(--blue-light); font-family: var(--f-head); font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); margin-bottom: 18px; }
.type-card.b2b .type-tag { background: #FEF3DC; color: #8a5c00; }
.type-card h3 { margin-bottom: 6px; }
.type-slogan { font-family: var(--f-head); font-size: 15px; font-weight: 500; color: var(--blue); margin-bottom: 14px; }
.type-card > p { font-size: 15px; margin-bottom: 22px; }
.type-list { list-style: none; display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--grey-rule); padding-top: 22px; }
.type-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: #333; line-height: 1.55; }
.type-list svg { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; margin-top: 1px; }

/* ── PROCESS STEPS ── */
.process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.process-step { padding-top: 24px; border-top: 2px solid var(--blue); }
.process-step-num { font-family: var(--f-head); font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--blue); margin-bottom: 10px; }
.process-step h4 { margin-bottom: 8px; line-height: 1.3; }
.process-step p { font-size: 14px; color: #555; margin: 0; }

/* ── FEATURE CARDS (3-up, hairline gaps) ── */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--grey-rule); }
.solution-card { background: var(--white); padding: 40px 32px; border-bottom: 3px solid transparent; transition: border-color var(--transition); display: flex; flex-direction: column; }
.solution-card:hover { border-color: var(--blue); }
.solution-card-icon { width: 48px; height: 48px; background: var(--blue-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.solution-card-icon svg { width: 22px; height: 22px; color: var(--blue); }
.solution-card h3 { font-size: 20px; margin-bottom: 12px; }
.solution-card p { font-size: 14px; color: #555; margin: 0; }

/* ── CHECK LIST ── */
.check-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.check-item { display: flex; align-items: flex-start; gap: 12px; padding: 20px 24px; background: var(--off-white); }
.section-offwhite .check-item { background: var(--white); border: 1px solid var(--grey-rule); }
.check-item svg { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.check-item p { font-size: 14px; color: #444; margin: 0; }
.check-item strong { font-family: var(--f-head); font-weight: 600; color: var(--black); }

/* ── NUMBERS BAND ── */
.numbers-band { background: var(--blue-dark); padding: 64px 48px; }
.numbers-intro { max-width: 760px; margin: 0 auto 44px; text-align: center; }
.numbers-intro .eyebrow { color: rgba(255,255,255,.55); }
.numbers-intro p { color: #fff; font-size: 19px; line-height: 1.6; }
.numbers-grid { max-width: var(--max-w); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); }
.number-item { text-align: center; padding: 0 24px; border-right: 1px solid rgba(255,255,255,.15); }
.number-item:last-child { border-right: none; }
.number-item .overline { display: block; font-family: var(--f-head); font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.85); margin-bottom: 8px; }
.number-item .num { font-family: var(--f-head); font-size: 56px; font-weight: 700; color: var(--accent); line-height: 1; margin-bottom: 12px; }
.number-item .num-label { font-size: 14px; color: rgba(255,255,255,.65); line-height: 1.55; }

/* ── CTA BAND - dark + halftone ── */
.cta-band {
  padding: 80px 48px; text-align: center;
  background-color: var(--blue-dark);
  background-image: radial-gradient(rgba(255,255,255,.07) 1.4px, transparent 1.6px);
  background-size: 13px 13px;
}
.cta-band-inner { max-width: 660px; margin: 0 auto; }
.cta-band h2 { color: #fff; margin-bottom: 16px; }
.cta-band p { color: rgba(255,255,255,.75); font-size: 16px; margin-bottom: 32px; }
.cta-band p a { color: #fff; border-bottom: 1px solid var(--accent); }
.cta-band .lp-hero-cta-row { justify-content: center; }

/* ── FOOTER ── */
.site-footer { background: var(--black); padding: 64px 48px 32px; }
.footer-inner { max-width: var(--max-w); margin: 0 auto; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; }
.footer-brand .brand-lockup { --logo-size: 28px; margin-bottom: 16px; }
.footer-brand p { font-size: 13px; color: rgba(255,255,255,.5); line-height: 1.7; max-width: 380px; }
.footer-col h5, .footer-contact-block h5 { font-family: var(--f-head); font-size: 10px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 16px; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 13px; color: rgba(255,255,255,.6); transition: color var(--transition); }
.footer-col a:hover { color: #fff; }
.footer-contacts { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding: 32px 0; margin-bottom: 32px; border-top: 1px solid rgba(255,255,255,.08); }
.footer-contact-block p { font-size: 13px; color: rgba(255,255,255,.5); line-height: 1.7; margin: 0 0 6px; }
.footer-contact-block a { color: rgba(255,255,255,.6); transition: color var(--transition); }
.footer-contact-block a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.footer-bottom p { font-size: 12px; color: rgba(255,255,255,.3); margin: 0; }
.footer-bottom-links { display: flex; gap: 24px; flex-wrap: wrap; }
.footer-bottom-links a { font-size: 12px; color: rgba(255,255,255,.3); transition: color var(--transition); }
.footer-bottom-links a:hover { color: rgba(255,255,255,.7); }

/* ── STICKY MOBILE CTA ── */
.lp-sticky-cta { position: fixed; bottom: 0; left: 0; right: 0; z-index: 90; background: var(--blue-dark); padding: 12px 20px; display: none; box-shadow: 0 -4px 16px rgba(0,0,0,.2); }
.lp-sticky-cta .btn { width: 100%; justify-content: center; }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  :root { --section-pad: 64px 32px; }
  .lp-nav-inner { padding: 0 32px; }
  .lp-hero { padding-left: 32px; padding-right: 32px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .lp-hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .hp-art-wrap { max-width: 440px; }
  .type-grid { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: 1fr 1fr; }
  .numbers-grid { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
  .number-item:nth-child(2n) { border-right: none; }
}

@media (max-width: 768px) {
  :root { --section-pad: 48px 20px; }
  body { padding-bottom: 64px; }
  .lp-sticky-cta { display: block; }
  .process-grid { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-contacts { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; text-align: center; }
}

@media (max-width: 640px) {
  .lp-nav-inner, .lp-hero { padding-left: 20px; padding-right: 20px; }
  .lp-nav-phone { display: none; }
  .lp-nav .brand-lockup { --logo-size: 32px; }
  .lp-nav .btn { padding: 11px 18px; font-size: 12px; }
  .lp-hero { padding-top: 44px; padding-bottom: 56px; }
  .hp-art-wrap { max-width: 360px; }
  .type-card { padding: 32px 24px 28px; }
  .check-grid { grid-template-columns: 1fr; }
  .numbers-band, .cta-band, .site-footer { padding-left: 20px; padding-right: 20px; }
  .numbers-grid { grid-template-columns: 1fr; }
  .number-item { border-right: none; }
}

@media (max-width: 380px) {
  .lp-nav .btn::after { display: none; }
}