/* Humbrela B2C — shared cosmetic styles for both variants */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700;800;900&display=swap');

@font-face {
  font-family: 'Outfit-local';
  src: url('fonts/Outfit-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/Outfit-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Mirror humbrela tokens for use inside both variants */
  --hp-pink: #FF1675;
  --hp-pink-alt: #FF3285;
  --hp-pink-deep: #B5117D;
  --hp-pink-blush: #FFE2E8;
  --hp-pink-wash: #FFF1F6;
  --hp-yellow: #F8CE05;
  --hp-yellow-ink: #E9C100;
  --hp-yellow-soft: #FFF6C2;
  --hp-cream: #FBF4E9;
  --hp-ink: #0F1729;
  --hp-ink-soft: #1B2440;
  --hp-fg2: #65758B;
  --hp-fg3: #9A9A9A;
  --hp-line: #EAEAEA;
  --hp-app: #F7F7F7;
  --hp-card: #FFFFFF;
  --hp-blue: #2568E5;
  --hp-blue-deep: #0F2A77;

  --display: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Reset within artboards */
.lp * { box-sizing: border-box; }
.lp { font-family: var(--body); color: var(--hp-ink); }
.lp h1, .lp h2, .lp h3, .lp h4, .lp h5, .lp p, .lp ul, .lp li { margin: 0; padding: 0; }
.lp ul { list-style: none; }
.lp a { color: inherit; text-decoration: none; }
.lp button { font-family: inherit; cursor: pointer; border: 0; background: none; padding: 0; color: inherit; }
.lp img { display: block; max-width: 100%; }

/* ===== Reveal-on-scroll ===== */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal.delay-1 { transition-delay: .08s; }
.reveal.delay-2 { transition-delay: .16s; }
.reveal.delay-3 { transition-delay: .24s; }
.reveal.delay-4 { transition-delay: .32s; }

/* ===== Bobbing animations ===== */
@keyframes lp-float {
  0%,100% { transform: translateY(0) rotate(var(--rot,0deg)); }
  50% { transform: translateY(-14px) rotate(var(--rot,0deg)); }
}
@keyframes lp-wobble {
  0%,100% { transform: rotate(var(--rot, -3deg)); }
  50% { transform: rotate(calc(var(--rot, -3deg) * -1)); }
}
@keyframes lp-spin {
  to { transform: rotate(360deg); }
}
@keyframes lp-pulse {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
@keyframes lp-marquee {
  to { transform: translateX(-50%); }
}
@keyframes lp-pop {
  0% { opacity: 0; transform: scale(.6) translateY(8px); }
  60% { opacity: 1; transform: scale(1.04) translateY(0); }
  100% { transform: scale(1); }
}
@keyframes lp-blink { 0%,100%{opacity:1} 50%{opacity:.2} }
@keyframes lp-typing { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }

/* Sticker base — used widely in variant A */
.sticker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: #fff;
  border: 2.5px solid var(--hp-ink);
  box-shadow: 4px 4px 0 0 var(--hp-ink);
  font-family: var(--display);
  font-weight: 800;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.sticker.pink { background: var(--hp-pink); color: #fff; }
.sticker.yellow { background: var(--hp-yellow); color: var(--hp-ink); }
.sticker.cream { background: var(--hp-cream); }

/* Nav links — sticker-shop hover state */
.lp-nav-link {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  color: var(--hp-ink);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 999px;
  border: 2px solid transparent;
  background: transparent;
  position: relative;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .18s cubic-bezier(.2,.8,.2,1),
              background-color .18s ease,
              border-color .18s ease,
              box-shadow .18s ease,
              color .18s ease;
}
.lp-nav-link:hover,
.lp-nav-link:focus-visible {
  background: #fff;
  border-color: var(--hp-ink);
  box-shadow: 3px 3px 0 0 var(--hp-ink);
  transform: translate(-1px, -1px) rotate(-1.5deg);
  outline: none;
}
.lp-nav-link:active {
  transform: translate(1px, 1px) rotate(-1deg);
  box-shadow: 1px 1px 0 0 var(--hp-ink);
}
.lp-nav-link--alt { font-size: 14px; }
.lp-nav-link--alt:hover,
.lp-nav-link--alt:focus-visible {
  background: var(--hp-yellow);
}

/* Store buttons (App Store / Google Play) — playful hover */
.lp-store-btn {
  position: relative;
}
.lp-store-btn:hover {
  transform: translate(-2px, -3px) rotate(-1.2deg) !important;
  box-shadow: 6px 7px 0 0 var(--hp-ink) !important;
}
.lp-store-btn:active {
  transform: translate(2px, 2px) !important;
  box-shadow: 2px 2px 0 0 var(--hp-ink) !important;
}
.lp-store-icon {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  transform-origin: center;
  transition: transform .25s cubic-bezier(.2,.8,.2,1);
}
.lp-store-btn:hover .lp-store-icon {
  animation: lp-store-wiggle .6s cubic-bezier(.2,.8,.2,1);
}
.lp-store-btn:not(:hover) .lp-store-icon {
  animation: lp-store-breath 3.2s ease-in-out infinite;
}
@keyframes lp-store-wiggle {
  0%   { transform: rotate(0)   scale(1); }
  25%  { transform: rotate(-14deg) scale(1.18); }
  55%  { transform: rotate(10deg)  scale(1.1); }
  80%  { transform: rotate(-4deg)  scale(1.05); }
  100% { transform: rotate(0)   scale(1); }
}
@keyframes lp-store-breath {
  0%, 100% { transform: scale(1) rotate(0); }
  50%      { transform: scale(1.08) rotate(-3deg); }
}

/* SVG noise / grain helper */
.grain {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: .35;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Dotted halftone background */
.dotgrid {
  background-image: radial-gradient(rgba(15,23,41,0.12) 1.4px, transparent 1.4px);
  background-size: 18px 18px;
}
.dotgrid-pink {
  background-image: radial-gradient(rgba(255,22,117,0.22) 1.6px, transparent 1.6px);
  background-size: 22px 22px;
}

/* Washi tape decoration */
.tape {
  position: absolute;
  width: 90px; height: 28px;
  background: var(--hp-yellow);
  opacity: .9;
  background-image: repeating-linear-gradient(90deg, transparent 0 8px, rgba(0,0,0,.08) 8px 10px);
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

/* Common phone frame */
.phone-frame {
  width: 320px;
  border-radius: 42px;
  padding: 14px;
  background: #0F1729;
  box-shadow: 0 30px 60px -10px rgba(15,23,41,.35), inset 0 0 0 2px rgba(255,255,255,.05);
  position: relative;
}
.phone-screen {
  border-radius: 30px;
  background: linear-gradient(180deg, #ffffff, #FFF1F6 60%, #ffffff);
  overflow: hidden;
  padding: 22px 18px 18px;
  min-height: 600px;
  position: relative;
}
.phone-notch {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  width: 110px; height: 28px; background: #000; border-radius: 0 0 18px 18px;
  z-index: 3;
}


/* ─────────────────────────────────────────────────────────────
   Responsive — tablet & mobile reflow for variant A
   The Y2K layout is desktop-first and uses lots of inline styles,
   so the rules below lean on !important + attribute selectors.
   ─────────────────────────────────────────────────────────── */

/* Mobile-only hero trust block — hidden on desktop */
.lp-hero-trust-mobile { display: none !important; }

/* ===== FR/EN language toggle ===== */
/* Use .lp .lp-lang-toggle (specificity 0-2-0) to beat the .lp button reset (0-1-1) */
.lp .lp-lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 7px 14px;
  border: 2.5px solid var(--hp-ink);
  border-radius: 999px;
  background: var(--hp-yellow);
  box-shadow: 3px 3px 0 0 var(--hp-ink);
  cursor: pointer;
  font-family: var(--display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--hp-ink);
  white-space: nowrap;
  text-decoration: none;
  transition: box-shadow .12s, transform .12s;
}
.lp .lp-lang-toggle:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 0 var(--hp-ink);
}
.lp .lp-lang-toggle:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 0 var(--hp-ink);
}
.lp .lp-lang-toggle span { opacity: .35; transition: opacity .15s; }
.lp .lp-lang-toggle .lp-lang-active { opacity: 1; }
.lp .lp-lang-toggle .lp-lang-sep { opacity: .3; font-weight: 400; margin: 0 1px; }
.lp .lp-lang-toggle--mobile {
  align-self: center;
  margin-top: 20px;
  font-size: 14px;
  padding: 8px 20px;
}

/* ===== Hamburger button (hidden on desktop, shown at ≤768px) ===== */
.lp-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: 2.5px solid var(--hp-ink);
  border-radius: 10px;
  cursor: pointer;
  flex-shrink: 0;
}
.lp-hamburger span {
  display: block;
  width: 18px;
  height: 2.5px;
  background: var(--hp-ink);
  border-radius: 2px;
  transition: opacity .15s;
}

/* ===== Mobile nav overlay ===== */
.lp-mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(15, 23, 41, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

.lp-mobile-nav-panel {
  width: min(320px, 92vw);
  height: 100dvh;
  background: var(--hp-cream);
  border-left: 2.5px solid var(--hp-ink);
  box-shadow: -6px 0 0 0 var(--hp-ink);
  display: flex;
  flex-direction: column;
  padding: 24px 20px 32px;
  overflow-y: auto;
  animation: slideInRight .22s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes slideInRight {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

.lp-mobile-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}

.lp-mobile-nav-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 2px solid var(--hp-ink);
  border-radius: 8px;
  background: none;
  cursor: pointer;
  color: var(--hp-ink);
  padding: 0;
}

.lp-mobile-nav-links {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 2px solid var(--hp-ink);
  margin-bottom: 28px;
}

.lp-mobile-nav-links a {
  display: block;
  padding: 16px 4px;
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  color: var(--hp-ink);
  text-decoration: none;
  border-bottom: 2px solid var(--hp-line);
  transition: color .12s;
}

.lp-mobile-nav-links a:hover {
  color: var(--hp-pink);
}

.lp-mobile-nav-ctas {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 24px;
}

/* ===== Medium screens (≤ 1200px) — nav-only tightening ===== */
@media (max-width: 1200px) {
  /* Reduce side padding so nav has more room */
  [data-variant="a"] nav {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
  /* Tighten the gap between center nav links */
  [data-variant="a"] nav > div:nth-of-type(1) {
    gap: 18px !important;
  }
  /* Slightly smaller link font so "Comment ça marche ?" stays on one line */
  [data-variant="a"] .lp-nav-link {
    font-size: 13px !important;
  }
}

/* ===== Medium-small (≤ 1060px) — hide "Je suis courtier" to free room ===== */
@media (max-width: 1060px) {
  [data-variant="a"] nav a[href*="humbrela.com"] {
    display: none !important;
  }
  [data-variant="a"] nav > div:nth-of-type(1) {
    gap: 14px !important;
  }
}

/* ===== Compact nav (≤ 960px) — hide FR/EN, tighten further ===== */
@media (max-width: 960px) {
  [data-variant="a"] nav .lp-nav-link--alt {
    display: none !important;
  }
  [data-variant="a"] .lp-nav-link {
    font-size: 12px !important;
    padding: 5px 8px !important;
  }
  [data-variant="a"] nav > div:nth-of-type(1) {
    gap: 4px !important;
  }
  [data-variant="a"] nav {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ===== Tablet (≤ 1024px) ===== */
@media (max-width: 1024px) {
  [data-variant="a"] section,
  [data-variant="a"] footer,
  [data-variant="a"] nav {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }
  /* Stack any 2-column-style inline grid to one column */
  [data-variant="a"] [style*="grid-template-columns: 1fr 1fr"],
  [data-variant="a"] [style*="grid-template-columns: 1.1fr 1fr"],
  [data-variant="a"] [style*="grid-template-columns: 1fr 1.05fr"],
  [data-variant="a"] [style*="grid-template-columns: 0.9fr 1.1fr"],
  [data-variant="a"] [style*="grid-template-columns: 1.05fr 0.95fr"] {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
  /* 3-column audience cards → 1 column */
  [data-variant="a"] [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  /* 4-column chip/testimonial grid → 2 columns */
  [data-variant="a"] [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }
  /* 5-column footer (legacy) → 2 */
  [data-variant="a"] [style*="grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 30px !important;
  }
}

/* ===== Mobile (≤ 768px) ===== */
@media (max-width: 768px) {
  [data-variant="a"] section,
  [data-variant="a"] footer,
  [data-variant="a"] nav {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  [data-variant="a"] section {
    padding-top: 72px !important;
    padding-bottom: 72px !important;
  }

  /* Force every inline grid to single column */
  [data-variant="a"] [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  /* Keep the chip grid 2-up so it doesn't look like a list */
  [data-variant="a"] [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  /* Type scale */
  [data-variant="a"] h1 {
    font-size: clamp(40px, 11vw, 60px) !important;
    line-height: .95 !important;
  }
  [data-variant="a"] h2 {
    font-size: clamp(32px, 9vw, 48px) !important;
    line-height: 1 !important;
    letter-spacing: -0.03em !important;
  }
  [data-variant="a"] h3 {
    font-size: clamp(20px, 5.5vw, 26px) !important;
  }
  /* Big body/quote text */
  [data-variant="a"] p[style*="font-size: 32px"],
  [data-variant="a"] p[style*="font-size:32px"] {
    font-size: 22px !important;
  }
  [data-variant="a"] [style*="font-size: 64px"] { font-size: 40px !important; }
  [data-variant="a"] [style*="font-size: 58px"] { font-size: 38px !important; }
  [data-variant="a"] [style*="font-size: 56px"] { font-size: 36px !important; }
  [data-variant="a"] [style*="font-size: 76px"] { font-size: 44px !important; }
  [data-variant="a"] [style*="font-size: 72px"] { font-size: 42px !important; }
  [data-variant="a"] [style*="font-size: 38px"] { font-size: 30px !important; }
  [data-variant="a"] [style*="font-size: 30px"] { font-size: 24px !important; }
  [data-variant="a"] [style*="font-size: 28px"] { font-size: 22px !important; }

  /* Reduce wild card rotations — calm down the cards when stacked */
  [data-variant="a"] section [style*="transform: rotate(-2deg)"],
  [data-variant="a"] section [style*="transform: rotate(2deg)"],
  [data-variant="a"] section [style*="transform: rotate(-1deg)"],
  [data-variant="a"] section [style*="transform: rotate(1deg)"],
  [data-variant="a"] section [style*="transform: rotate(1.5deg)"],
  [data-variant="a"] section [style*="transform: rotate(-0.6deg)"] {
    transform: none !important;
  }
  /* Trim chunky shadows so stacked cards don't feel heavy */
  [data-variant="a"] [style*="box-shadow: 8px 8px 0"] { box-shadow: 4px 4px 0 0 var(--hp-ink) !important; }
  [data-variant="a"] [style*="box-shadow: 10px 10px 0"] { box-shadow: 5px 5px 0 0 var(--hp-ink) !important; }
  [data-variant="a"] [style*="box-shadow: 6px 6px 0"] { box-shadow: 4px 4px 0 0 var(--hp-ink) !important; }

  /* Nav: hide center menu, FR/EN, and "Je suis courtier" at ≤768px — show hamburger instead */
  [data-variant="a"] nav > div:nth-of-type(1) { display: none !important; }
  [data-variant="a"] nav .lp-nav-link--alt { display: none !important; }
  [data-variant="a"] nav a[href*="humbrela.com"] { display: none !important; }
  [data-variant="a"] nav {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  /* Shrink the logo a touch */
  [data-variant="a"] nav img[alt="Humbrela"] { height: 28px !important; }
  /* Show hamburger, hide any remaining App Store pill in nav */
  .lp-hamburger { display: flex !important; }
  [data-variant="a"] nav > div:nth-of-type(2) > a { display: none !important; }
  /* Hide lang toggle from nav bar on mobile — it lives in the burger menu only */
  [data-variant="a"] nav .lp-lang-toggle:not(.lp-lang-toggle--mobile) { display: none !important; }

  /* Buttons (Pill) — slightly smaller, allow wrap container */
  [data-variant="a"] button {
    padding: 12px 18px !important;
    font-size: 14px !important;
  }

  /* Hero phone: center & fit */
  .phone-frame { width: min(320px, 90vw) !important; margin-left: auto !important; margin-right: auto !important; }
  /* Owl illustrations: cap width */
  [data-variant="a"] img[src*="owl-"] { max-width: 60vw !important; height: auto !important; }
  /* Big mascot in CTA — center */
  [data-variant="a"] img[src*="owl-laptop"] { position: relative !important; left: 0 !important; right: 0 !important; margin: 0 auto !important; }

  /* Hide absolute-positioned decorations that overflow */
  [data-variant="a"] [style*="position: absolute"][style*="bottom: -90px"],
  [data-variant="a"] [style*="position: absolute"][style*="left: -30px"][style*="top: -10px"] {
    display: none !important;
  }

  /* FAQ + general blocks: tighter padding */
  [data-variant="a"] [style*="padding: 56px"] { padding: 28px !important; }
  [data-variant="a"] [style*="padding: 32px"] { padding: 22px !important; }
  [data-variant="a"] [style*="padding: 28px"] { padding: 22px !important; }
  [data-variant="a"] [style*="padding: 24px"] { padding: 20px !important; }

  /* Dotgrid: less busy on small viewports */
  [data-variant="a"] .dotgrid { background-size: 14px 14px !important; }

  /* Steps 1-2-3: more breathing room between cards */
  .lp-steps-list { gap: 24px !important; }

  /* What cards 01/02/03: gap must exceed the 22px badge overhang */
  [data-variant="a"] .lp-what-grid { gap: 40px !important; }

  /* Audience cards: 1 per row, full width */
  [data-variant="a"] .lp-audience-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  [data-variant="a"] .lp-audience-grid > div {
    min-height: 0 !important;
  }

  /* Category chips: reduce size */
  [data-variant="a"] [style*="min-height: 130px"] { min-height: 72px !important; }
  [data-variant="a"] [style*="padding: 22px"] { padding: 14px !important; }

  /* CTA card: reduce top padding so owl sits closer to the pink block top */
  [data-variant="a"] .lp-cta-card { padding-top: 28px !important; }

  /* Hero: increase gap between text/buttons and phone image */
  [data-variant="a"] .lp-hero-grid { gap: 48px !important; }

  /* Hero trust block: hide original (inside text col), show copy below phone */
  [data-variant="a"] .lp-hero-trust { display: none !important; }
  .lp-hero-trust-mobile { display: flex !important; }

  /* Ela section: show text+cards first, chat demo below */
  [data-variant="a"] .lp-ela-text { order: 1; }
  [data-variant="a"] .lp-ela-chat { order: 2; }

  /* Hide gauge note text below score circle */
  .lp-gauge-note { display: none !important; }

  /* Score chart: shrink circle, hide floating stickers */
  .lp-score-chart { min-height: 260px !important; }
  .lp-score-chart [style*="width: 320px"] {
    width: min(220px, 52vw) !important;
    height: min(220px, 52vw) !important;
  }
  .lp-score-chart [style*="width: 260px"] {
    width: min(174px, 42vw) !important;
    height: min(174px, 42vw) !important;
  }
  .lp-score-chart [style*="font-size: 96px"] { font-size: 54px !important; }
  .lp-score-chart > [style*="position: absolute"] { display: none !important; }

  /* Footer: stack the logo + mailto row */
  [data-variant="a"] footer [style*="grid-template-columns: 1fr auto"] {
    grid-template-columns: 1fr !important;
    justify-items: start !important;
    gap: 22px !important;
  }
  /* Footer bottom row: wrap legal links */
  [data-variant="a"] footer ul[style*="gap: 28px"] { gap: 14px !important; }

  /* ── Overflow / viewport containment ── */
  /* Prevent any overflowing element from making the page horizontally scrollable */
  html, body { overflow-x: hidden; }

  /* Hero badges: let them wrap onto a second line on small phones */
  .lp-hero-badges { flex-wrap: wrap !important; }

  /* Hero h1: allow long lines ("vraiment protégé ?") to wrap */
  [data-variant="a"] h1 span[style*="white-space: nowrap"] { white-space: normal !important; }
}

/* ===== Small mobile (≤ 480px) ===== */
@media (max-width: 480px) {
  [data-variant="a"] section,
  [data-variant="a"] footer,
  [data-variant="a"] nav {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  [data-variant="a"] section {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  /* Chip grid: keep 2-up even on tiny phones */
  [data-variant="a"] [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 10px !important;
  }
  /* Even smaller hero */
  [data-variant="a"] h1 {
    font-size: clamp(36px, 12vw, 48px) !important;
  }
  /* Stack the catch-all sticker tag */
  [data-variant="a"] [style*="transform: rotate(-0.6deg)"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
  }
  /* Smaller pills, shorter labels work better */
  [data-variant="a"] button {
    padding: 11px 16px !important;
    font-size: 13px !important;
  }
}