*, *::before, *::after { box-sizing: border-box; }
  /* NOTA (2026-05-27 #3): resets de body são ESCOPADOS ao LP standalone via
     :not(.survey-page-body):not(#body). Quando este CSS é carregado dentro
     do host LeadsHook (body id=body class=survey-page-body), esses resets
     NÃO aplicam — o host mantém seu próprio padding/min-height/background
     que ele usa pra centralizar os popups das Question pages.
     Resets globais quebraram o popup em produção (commit 7c5e56b → este). */
  html { margin: 0; padding: 0; }
  body:not(.survey-page-body):not(#body) {
    margin: 0;
    padding: 0;
    min-height: 100%;
    background: #fff;
    overflow-x: hidden;
  }
  input, button, textarea, select { font: inherit; }

  /* === LeadsHook host reset (mínimo) ===
     Apenas esconder os wrappers VAZIOS que o host injeta como filhos diretos
     do body host (header-container/footer-container com margin:1rem geram faixa
     branca de ~32px topo/rodapé). NÃO tocar em .node-inner/.node-panel/
     .preview-panel-container — esses são compartilhados com as Question pages
     do quiz e zerá-los descentraliza o popup. */
  body > .header-container,
  body > .footer-container,
  body > #header-editor-preview,
  body > #footer-editor-preview,
  body > .below-header-container,
  body > .above-footer-container {
    display: none !important;
  }
  /* === fim LeadsHook host reset === */
  :root {
    --forest: #0B1F42;
    --forest-deep: #071530;
    --forest-ink: #f5c842;
    --gold: #fbbf24;
    --gold-deep: #d97706;
    --cta: #28a745;
    --cta-deep: #1e7e34;
    --ink-text: #0B1F42;
    --ink-accent: #0B1F42;
    --blush: #FFF1F0;
    --surface: #F4F4F5;
    --ink: #1A1A1A;
    --muted: #5C5C62;
  }
  html { scroll-behavior: smooth; }
  /* Scope: NÃO aplicar background no host LeadsHook (id=body / .survey-page-body)
     senão pinta de branco a área onde o popup do quiz é renderizado. */
  body:not(.survey-page-body):not(#body) {
    background: #fff;
    color: var(--ink);
    font-family: 'Inter', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
  }
  /* No host LeadsHook só herda font/color sem mexer em background/centralização. */
  body.survey-page-body,
  body#body {
    color: var(--ink);
    font-family: 'Inter', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
  }
  .font-display { font-family: 'Inter Tight', Inter, system-ui, sans-serif; letter-spacing: -0.022em; }

  /* Marquee — padrão Encore: GPU layer no outer + track inline-flex sem gap, items/dots com padding próprio */
  .marquee {
    overflow: hidden; white-space: nowrap;
    background: var(--forest-ink);
    color: var(--ink-text);
    padding: 0.55rem 0;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  .marquee-logo { flex-shrink: 0; }
  .marquee-track {
    display: inline-flex; align-items: center; gap: 0;
    animation: marquee 28s linear infinite;
    will-change: transform;
  }
  .marquee-item {
    padding: 0 20px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }
  .marquee-dot {
    padding: 0 6px;
    color: color-mix(in srgb, var(--ink-text) 50%, transparent);
  }
  @keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  @media (prefers-reduced-motion: reduce) {
    .marquee-track { animation: none; }
    .fade-in { opacity: 1 !important; transform: none !important; }
  }

  /* Fade-in */
  .fade-in { opacity: 0; transform: translateY(12px); transition: opacity .65s ease, transform .65s ease; }
  .fade-in.is-visible { opacity: 1; transform: translateY(0); }

  /* Hero photo + light overlay + subtle CSS grain */
  .hero-bg {
    position: absolute; inset: 0; z-index: 0;
    background-image: url("https://lp-for-life-kitchens.pages.dev/assets/images/for-life-kitchens/photo-1556909114-f6e7ad7d3136.webp");
    background-size: cover; background-position: center;
    filter: saturate(0.9) contrast(1.02);
  }
  .hero-overlay {
    position: absolute; inset: 0; z-index: 1;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.82) 40%, rgba(244,244,245,0.92) 100%);
  }
  .hero-grain {
    position: absolute; inset: 0; z-index: 2;
    pointer-events: none; opacity: .5; mix-blend-mode: multiply;
    background-image: radial-gradient(rgba(0,0,0,0.045) 1px, transparent 1px);
    background-size: 3px 3px;
  }

  /* Headline accents */
  .accent-forest { color: var(--forest); }
  .area-underline {
    position: relative;
    padding: 0 .08em;
  }
  .area-underline::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 4%;
    height: 14%;
    background: var(--forest-ink);
    z-index: -1;
  }
  /* Destaque da palavra do servico — controlado por hero.headline.accent_style
     (none|ink|gold). Render condicional via Mustache projeta accent_is_ink / accent_is_gold. */
  .service-accent { position: relative; padding: 0 .08em; display: inline-block; }
  .service-accent--ink::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 4%;
    height: 14%; background: var(--forest-ink); z-index: -1;
  }
  .service-accent--gold {
    border-bottom: 6px solid var(--gold);
    padding-bottom: 2px;
  }

  /* Pills */
  .pill {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    padding: .45rem .7rem;
    background: #fff;
    border: 1px solid rgba(45,90,63,0.18);
    border-radius: 999px;
    font-weight: 600; font-size: .72rem; letter-spacing: .02em;
    color: var(--forest);
    text-align: center; line-height: 1.15;
    min-height: 40px;
  }
  @media (min-width: 640px) {
    .pill { font-size: .78rem; letter-spacing: .04em; padding: .5rem .9rem; min-height: 0; }
  }
  .pill .tick {
    color: var(--forest);
    font-weight: 800;
    flex-shrink: 0;
  }

  /* Offer card */
  .offer-card {
    background: var(--blush);
    border: 2px solid var(--gold);
    border-radius: 18px;
    box-shadow: 0 14px 30px -18px rgba(212,165,116,0.55);
  }
  .offer-50 {
    display: inline-block;
    border-bottom: 6px solid var(--gold);
    padding-bottom: 4px;
  }
  /* Bloco oferta+CTA: inline-block encolhe à largura da headline "50% off install";
     o CTA (width:100%) acompanha essa largura automaticamente. */
  .offer-action { display: inline-block; }
  /* Divisor clean dentro do offer card — hairline curta, sem destaque */
  .offer-divider {
    width: 56px;
    height: 1px;
    margin: 1.25rem auto;
    background: rgba(20,52,37,0.14);
  }

  /* Hero CTA — primary action, content-hugging (não full-bleed). Abre o popup LeadsHook. */
  .hero-cta {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    height: 46px;
    padding: 0 1.5rem;
    border-radius: 10px;
    border: 0;
    outline: 0;
    background: var(--cta);
    color: #fff;
    font-weight: 800;
    font-size: .82rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .15s ease, transform .12s ease, box-shadow .15s ease;
    box-shadow: 0 4px 12px -4px rgba(0,0,0,0.18);
  }
  .hero-cta:hover { box-shadow: 0 6px 16px -4px rgba(0,0,0,0.24); }
  .hero-cta:focus-visible { box-shadow: 0 0 0 3px rgba(40,167,69,0.35); }
  .hero-cta:hover { background: var(--cta-deep); }
  .hero-cta:active { transform: translateY(1px); }

  /* Pulse animation — chama atencao do CTA primario (mobile + desktop).
     Inspirado no Go Flooring: scale sutil + halo expansivo. */
  @keyframes hero-cta-pulse {
    0%   { transform: scale(1);    box-shadow: 0 4px 12px -2px rgba(0,0,0,0.18), 0 0 0 0 rgba(40,167,69,0.32); }
    50%  { transform: scale(1.018); box-shadow: 0 5px 14px -3px rgba(0,0,0,0.20), 0 0 0 8px rgba(40,167,69,0); }
    100% { transform: scale(1);    box-shadow: 0 4px 12px -2px rgba(0,0,0,0.18), 0 0 0 0 rgba(40,167,69,0); }
  }
  .hero-cta {
    animation: hero-cta-pulse 2.4s ease-in-out infinite;
    will-change: transform, box-shadow;
  }
  .hero-cta:hover, .hero-cta:focus-visible, .hero-cta:active {
    animation-play-state: paused;
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-cta { animation: none; }
  }

  /* Sticky CTA mobile — fixa no rodape, aparece apos scroll alem do hero CTA.
     Renderizado apenas se mobile_sticky_cta.enabled=true. Mobile-only (<640px).
     Animation pulse compartilhada (.hero-cta keyframes). */
  .lp-sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    background: #fff;
    border-top: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 -4px 16px -4px rgba(0,0,0,0.12);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    transform: translateY(110%);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    display: none;
  }
  .lp-sticky-cta.is-visible {
    transform: translateY(0);
  }
  .lp-sticky-cta .hero-cta {
    width: 100%;
    margin: 0;
    font-size: 1rem;
    padding: 14px 18px;
  }
  @media (max-width: 639.98px) {
    .lp-sticky-cta { display: block; }
    /* Quando sticky ativo, garante espaco no fim do body pro footer nao ficar coberto */
    body.has-sticky-cta { padding-bottom: 80px; }
  }
  /* Ícone configurável: data-icon="off" no botão esconde o 📍 */
  .hero-cta[data-icon="off"] .cta-icon { display: none; }

  /* Countdown */
  .cd-box {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 12px;
    padding: .55rem .55rem .45rem;
    min-width: 68px;
    text-align: center;
    box-shadow: 0 1px 0 rgba(0,0,0,0.02);
  }
  .cd-num {
    font-family: 'Inter Tight', Inter, sans-serif;
    font-weight: 800;
    font-size: 1.7rem;
    line-height: 1;
    color: var(--forest);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
  }
  .cd-lbl {
    margin-top: 3px;
    font-size: .75rem;
    letter-spacing: .14em;
    color: var(--muted);
    font-weight: 700;
  }
  @media (min-width: 640px) {
    .cd-lbl { font-size: .62rem; }
  }

  /* Trust seals */
  .seal {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: .78rem; font-weight: 600;
    color: var(--forest);
    background: #fff;
    border: 1px solid rgba(0,0,0,0.10);
    border-radius: 10px;
    padding: .4rem .75rem;
  }

  /* Steps — rounded cards with circle icons */
  .step-card {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.07);
    border-radius: 18px;
    padding: 28px 24px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.03);
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .step-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px -22px rgba(0,0,0,0.18);
  }
  .step-circle {
    width: 56px; height: 56px;
    border-radius: 999px;
    background: var(--forest-ink);
    color: var(--ink-text);
    display: inline-flex; align-items: center; justify-content: center;
  }
  .step-num-tag {
    display: inline-block;
    font-size: .75rem; font-weight: 800; letter-spacing: .2em;
    color: var(--forest);
  }
  @media (min-width: 640px) {
    .step-num-tag { font-size: .65rem; }
  }

  /* Nav chip */
  .nav-chip {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .35rem .7rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.10);
    font-size: .78rem; font-weight: 600; color: var(--forest);
  }
  .star { color: #E0A93A; }

  /* Offer chip no navbar — single-line, herda .nav-chip + acento de oferta (blush/gold).
     Em mobile rebaixamos padding vertical pra ficar mais "low-profile" mesmo com texto completo. */
  .hdr-offer {
    background: var(--blush);
    border-color: var(--gold);
    color: var(--forest);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .03em;
    transition: background .15s ease;
    padding: .2rem .85rem;
    font-size: .7rem;
    min-height: 34px;
  }
  @media (min-width: 640px) {
    .hdr-offer { padding: .35rem .9rem; font-size: .78rem; min-height: 44px; }
  }
  .hdr-offer:hover { background: #FFE6E4; }

  /* Stats band — faixa escura, quebra visual entre hero e "How it works" */
  .stats-band { background: var(--forest-ink); }
  .stat {
    text-align: center;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    min-height: 52px;
  }
  .stat-num {
    font-family: 'Inter Tight', Inter, sans-serif;
    font-weight: 800;
    font-size: 1.05rem;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--ink-text);
  }
  .stat-accent { color: var(--ink-accent); }
  .stat-label {
    margin-top: .15rem;
    font-size: .6rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 700;
    color: color-mix(in srgb, var(--ink-text) 55%, transparent);
  }
  @media (min-width: 768px) {
    .stat-num { font-size: 1.2rem; }
    .stat-label { font-size: .58rem; }
    .stat + .stat { border-left: 1px solid color-mix(in srgb, var(--ink-text) 15%, transparent); }
  }

  /* Footer */
  footer.foot {
    background: #2A2A2A;
    color: #f4f4f5;
  }
  footer.foot a { color: #f4f4f5; }

  button, input[type="submit"], a.tappable { min-height: 44px; }

  /* LeadsHook host injeta `img { height: auto !important }` que zera as constraints
     do Tailwind no preview/Page Node. Force as alturas via classes scoped + !important
     pra que as logos respeitem o cap mesmo dentro do LeadsHook. */
  img.marquee-logo {
    height: 1.25rem !important;
    width: auto !important;
    max-width: none !important;
  }
  .lp-nav-logo {
    height: 4.5rem !important;
    width: auto !important;
    max-width: 260px !important;
    object-fit: contain !important;
  }
  @media (min-width: 640px) {
    .lp-nav-logo {
      height: 5.5rem !important;
      max-width: 340px !important;
    }
  }
  .lp-footer-logo {
    height: 4rem !important;
    width: auto !important;
    max-width: 160px !important;
    object-fit: contain !important;
  }
  @media (min-width: 640px) {
    .lp-footer-logo {
      height: 5rem !important;
      max-width: 180px !important;
    }
  }

  /* Footer mobile centralizado (inspirado no Go Flooring):
     logo+tagline empilhados e centralizados, contact centralizado,
     copyright bar centralizada com itens empilhados. */
  @media (max-width: 639.98px) {
    .foot > div:first-child {
      grid-template-columns: 1fr !important;
      gap: 1.25rem !important;
      text-align: center !important;
      padding-top: 2rem !important;
      padding-bottom: 1.5rem !important;
    }
    .foot > div:first-child > div > .flex {
      flex-direction: column !important;
      align-items: center !important;
      gap: 0.85rem !important;
    }
    .foot .lp-footer-logo {
      height: 3rem !important;
      max-width: 120px !important;
    }
    .foot > div:first-child > div:last-child {
      align-items: center;
    }
    .foot > div:last-child > div {
      flex-direction: column !important;
      align-items: center !important;
      text-align: center !important;
      gap: 0.4rem !important;
      padding-top: 1rem !important;
      padding-bottom: 1rem !important;
    }
  }

  .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
  }

  /* LeadsHook host containers injetam padding/margin acima do conteudo (panel-body,
     custompage-container, etc) e renderizam um #header-editor-preview vazio com
     altura. Zera tudo pra marquee colar no topo da pagina publicada. */
  #header-editor-preview,
  .below-header-container { display: none !important; }
  #dt-container,
  .dt-container,
  .custompage-container,
  .lh-panel-default,
  .panel-body {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  .panel-body {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
  }

  /* MOBILE FIRST-FOLD COMPRESSION
     Objetivo: trazer o CTA "Check My Zip Code" pra dentro do viewport mobile
     (referencia Go Flooring: CTA visivel em ~700px de altura). Comprimimos
     paddings/margens/typography do hero em <640px sem tocar no desktop. */
  @media (max-width: 639.98px) {
    /* Nav menor */
    .lp-nav-logo {
      height: 3rem !important;
      max-width: 200px !important;
    }
    main#top > nav {
      padding-top: 0.5rem !important;
      padding-bottom: 0.5rem !important;
    }
    /* H1 hero — reduz de 40px -> 30px e aperta line-height/margem */
    main#top h1.fade-in {
      font-size: 28px !important;
      line-height: 1.08 !important;
      margin-top: 0.75rem !important;
    }
    /* Subhead — esconde no mobile pra ganhar dobra (info nao essencial pre-CTA) */
    main#top h1.fade-in + p.fade-in {
      display: none !important;
    }
    /* Pills — aperta margem superior */
    main#top h1.fade-in ~ ul.fade-in {
      margin-top: 0.75rem !important;
    }
    /* Offer card — aperta padding e tipografia */
    .offer-card {
      margin-top: 1rem !important;
      padding-top: 1rem !important;
      padding-bottom: 1rem !important;
    }
    .offer-card .offer-action > p:first-child {
      font-size: 34px !important;
      margin-top: 0.25rem !important;
    }
    .offer-card .offer-action > p:nth-child(2) {
      margin-top: 0.5rem !important;
      font-size: 0.85rem !important;
    }
    .offer-card .offer-divider {
      margin-top: 0.75rem !important;
      margin-bottom: 0.75rem !important;
    }
    .offer-card > p:last-child {
      margin-top: 0.5rem !important;
    }
    /* Hero section bottom padding minimo */
    main#top > section {
      padding-bottom: 1.25rem !important;
    }
    /* Rating chip — margem zero pra colar no nav */
    main#top > section > .fade-in:first-child {
      margin-top: 0 !important;
    }
  }